@charset "utf-8";
/* ============================================================
   舞台.css — 豎舞台の共通基盤
   すべての画面を writing-mode:vertical-rl で組む。横書きは混ぜない。
   ・html にも幅と高さを明示する（縦書きでは width が行送り方向に
     なるため、書かないと画面いっぱいに広がらない）
   ・body を縦書きの flex カラムにする → 帯が DOM 順に右から左へ並ぶ
   ・寸法・余白は論理プロパティで書く（inline＝上下、block＝左右）
   ・書体は総称名だけを指定する。こう書いたときに限り、ブラウザ側の
     〈Serif フォント〉〈Sans Serif フォント〉の設定がそのまま効く。
   （この流儀は 豎帳/tatetodo.html から昇格したもの）
   ============================================================ */

/* ---------- 色と寸法のトークン ---------- */
:root{
  --bg:#efe8da; --paper:#faf6ec; --ink:#2b2622; --sub:#9a8f7e; --faint:#c9bfad;
  --line:#e2d9c7; --accent:#9c4a3c; --sel:#f0dcae;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 28px rgba(0,0,0,.07);
  --serif:serif;
  --sans:sans-serif;
  --lh:1.85;        /* 行の間隔＝縦書きでは列の幅 */
}
body.dark{
  --bg:#15130f; --paper:#1e1b17; --ink:#e8e0d1; --sub:#8a8071; --faint:#4a4238;
  --line:#332e27; --accent:#d09455; --sel:#4a3f2a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.4);
}

/* ---------- リセットと縦書きの土台 ---------- */
*{box-sizing:border-box}
html{writing-mode:vertical-rl; width:100%; height:100%; overflow:hidden}
body{
  margin:0; width:100%; height:100%; overflow:hidden;
  writing-mode:vertical-rl; text-orientation:mixed;      /* ← 画面ぜんぶ縦書き */
  display:flex; flex-direction:column;                   /* 縦書きでは右→左に並ぶ */
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sel)}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0; padding:0}
ul,ol{list-style:none}

/* ---------- 帯 ----------
   .bar    … 右端の道具帯。border は左側（block-end）に引く。
   .status … 左端のステータス帯。border は右側（block-start）に引く。 */
.bar{
  flex:none; display:flex; align-items:center; gap:9px;
  padding-inline:12px; padding-block:8px;
  background:var(--paper); border-block-end:1px solid var(--line);
}
.status{
  flex:none; display:flex; align-items:center; gap:12px;
  padding-inline:9px; padding-block:7px; font-size:11.5px; color:var(--sub);
  background:var(--paper); border-block-start:1px solid var(--line);
}
.brand{font-family:var(--serif); font-size:23px; font-weight:normal; letter-spacing:.12em; user-select:none; margin-inline-end:2px}
.brand a{text-decoration:none}
.spacer{flex:1}

/* ---------- 釦 ---------- */
button.tool{
  font:inherit; font-size:12.5px; border-radius:7px; cursor:pointer; white-space:nowrap;
  padding-inline:11px; padding-block:5px;
  border:1px solid var(--line); background:transparent; color:var(--ink);
}
button.tool:hover{background:var(--bg); border-color:var(--faint)}

/* ---------- ポップオーバーメニュー ----------
   既定は「右下の釦から、左へ開き、下端をそろえる」（豎帳の「…」と同じ）。
   .menu.head を足すと「上端をそろえる」変種になる（帯の上方の釦用）。 */
.menuwrap{position:relative}
.menu{
  position:absolute; inset-block-start:calc(100% + 7px); inset-inline-end:-6px; z-index:40;
  min-inline-size:230px; max-inline-size:calc(100vh - 30px); padding:7px;
  background:var(--paper); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow);
  display:none; flex-direction:column;
}
.menu.head{inset-inline-end:auto; inset-inline-start:-6px}
.menu.open{display:flex}
.menu button, .menu label{
  font:inherit; font-size:13px; text-align:start; background:none; border:0; border-radius:7px;
  color:var(--ink); cursor:pointer; padding-inline:9px; padding-block:8px; white-space:nowrap;
}
.menu button:hover, .menu label:hover{background:var(--bg)}
.menu button.sel{color:var(--accent)}
.menu .grp{font-size:11px; color:var(--faint); padding-inline:9px; padding-block:5px; white-space:nowrap}
/* 縦書きなので、区切り線は「縦の細い帯」になる（block-size＝幅） */
.menu hr{border:0; background:var(--line); block-size:1px; align-self:stretch; margin-block:4px; margin-inline:6px}

/* ---------- 覆いと箱（モーダル） ---------- */
.veil{
  position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.45);
  display:none; place-items:center;
}
.veil.open{display:grid}
.box{
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding-inline:24px; padding-block:26px;
  max-inline-size:min(86vh, 36em); max-block-size:82vw; overflow:auto;
}
.box h2{font-family:var(--serif); font-size:17px; letter-spacing:.1em; margin-block-end:14px}

/* ---------- 報せ（トースト）----------
   浮遊要素は作らず、ステータス帯の一角に書いて薄れさせる（豎帳の作法） */
#flash{transition:opacity .5s; opacity:0; white-space:nowrap}

/* ---------- 巻（スクロールの間） ----------
   .maki を付けた要素は横に巻いて読む。舞台.js がホイールの縦回転を
   読み進む向き（左）に変換する。バーは下辺に出る水平バーなので
   height の側を細くする（width を書いても効かない）。 */
.maki{overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--faint) transparent}
.maki::-webkit-scrollbar{height:8px; width:8px}
.maki::-webkit-scrollbar-thumb{background:var(--faint); border-radius:4px}
.maki::-webkit-scrollbar-track{background:transparent}

/* ---------- 縦中横 ----------
   本文系の容れ物にだけ .tcy を付ける（UIの帯には付けない）。
   二桁までの数字を一字分に横へ組む。三桁以上は縦のまま。
   注意：digits を解するのは今のところ Firefox だけ（Chromium は all のみ）。
   自前で組み立てる文字列（日時など）は、数字を .tcy-all の span で包んで
   全ブラウザで縦中横にする（舞台.js の 日時html を使う）。 */
.tcy{text-combine-upright:digits 2}
.tcy-all{text-combine-upright:all}   /* 数字の枡・手動の縦中横 */

/* ---------- リンク ----------
   縦書きでは underline が「字の右の傍線」として引かれる。それを意匠とする。 */
a{color:inherit; text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:var(--faint); text-underline-offset:.18em}
a:hover{color:var(--accent); text-decoration-color:var(--accent)}

/* ---------- ルビ・圏点 ---------- */
rt{font-size:.5em; color:var(--sub)}
.kenten{text-emphasis:filled sesame; -webkit-text-emphasis:filled sesame}

/* ---------- 狭い画面 ---------- */
@media (max-width:640px){
  .bar{gap:6px; padding-block:6px}
  .status{gap:8px}
  button.tool{font-size:12px; padding-inline:9px; padding-block:4px}
  .brand{font-size:20px}
}