/* 元帳の設計トークン（2026-10-26 作り直し）
 *
 * **見た目の基本は早押し.jp（https://hayaoshi.jp/）に合わせる**（利用者の決定）。
 * 辞書側の Design.md（濃紺・色相は注意と危険の2つだけ・反転で選択）から写していた
 * 体系はここで撤廃した。辞書側の精査ツールは辞書側の体系のまま（こちらから触らない）。
 *
 * - 配色は早押し.jp のライト（生成り）を既定、ダーク（紫紺）を切替で持つ
 * - **色相は早押し.jp のまま、明度だけ補正してある。** そのまま写すと
 *   橙の文字 2.7:1・枠線 1.3〜1.8:1 で基準に届かない。文字は面に対して 4.5:1、
 *   枠（--edge）と選択の縁（--accent-edge）は 3:1 を満たす（tools/contrast.py で検査）
 * - 字は Zen Maru Gothic を同梱（web/shared/fonts、SIL OFL 1.1）。外へ取りに行かない
 * - 角丸は操作 4px・面 8px。影は使わず、段は面の明度で作る
 * - 大きさは利用者の設定（小・中・大）で --scale が変わる。数値は scale に掛けて書く
 *
 * 各画面の style.css は**変数を定義しない**。定義すると同じ名前に違う値が入り、体系が割れる。
 */

@font-face { font-family: "Zen Maru Gothic"; font-weight: 400; font-display: swap; src: url("fonts/ZenMaruGothic-Regular.woff2") format("woff2"); }
@font-face { font-family: "Zen Maru Gothic"; font-weight: 500; font-display: swap; src: url("fonts/ZenMaruGothic-Medium.woff2") format("woff2"); }
@font-face { font-family: "Zen Maru Gothic"; font-weight: 700; font-display: swap; src: url("fonts/ZenMaruGothic-Bold.woff2") format("woff2"); }

/* ---- ライト（既定）---- */
:root {
  color-scheme: light;
  --bg:       #F5EFEA;   /* 最背面 */
  --surface:  #FBF7F4;   /* 面。カード・一覧の地 */
  --raised:   #EFE7E1;   /* 1段上の面・釦の地。影の代わり */
  --line:     #DDD0C8;   /* 装飾の罫（意味を持たせない） */
  --edge:     #9B7F6F;   /* 意味のある境界。釦・入力欄の枠。3:1 */
  --text:     #2A2540;
  --subtext:  #5A4349;
  --muted:    #776468;   /* 添字。それでも 4.5:1 */
  --link:     #1E6CAE;
  --accent:   #DD7A35;   /* 早押し.jp の橙。**塗りにだけ使う**（上の文字は --text で 4.8:1） */
  --accent-edge: #CE6923;/* 選択の縁。3:1 */
  --accent-text: #A2531B;/* 橙を文字にする時 */
  --on-accent: #2A2540;  /* 橙の塗りの上の文字。4.8:1 */
  --sel:      #F6DFCD;   /* 選択中・現在地の塗り（その上の副文は --subtext） */
  --warn:     #895F1C;
  --danger:   #A23B4E;
  --ok:       #2F8F4E;   /* 正解で押した位置の印（背景の濃淡にだけ使う） */
  --danger-bg:#F7EEEC;
  --scrim:    rgba(42, 37, 64, .45);
}

/* ---- ダーク（設定で選ぶ。早押し.jp の紫紺）---- */
:root[data-style="dark"] {
  color-scheme: dark;
  --bg:       #15121F;
  --surface:  #1F1B31;
  --raised:   #29243E;
  --line:     #383253;
  --edge:     #736B9A;
  --text:     #EDE4E0;
  --subtext:  #B9A9AC;
  --muted:    #9A8A8E;
  --link:     #7FC0F0;
  --accent:   #E89248;
  --accent-edge: #E89248;
  --accent-text: #E89248;
  --on-accent: #15121F;
  --sel:      #3B2E3A;
  --warn:     #E6B45E;
  --danger:   #DB6B81;
  --ok:       #4FBF77;
  --danger-bg:#2A1E2C;
  --scrim:    rgba(8, 6, 14, .7);
}

/* ---- 大きさ（利用者の設定。早押し.jp の UIサイズと同じ考え方）----
 * **押す的は 24px を割らない**（WCAG 2.2 の 2.5.8）。小でも守る。 */
:root { --scale: 1.15; }
:root[data-ui="S"] { --scale: 1; }
:root[data-ui="L"] { --scale: 1.3; }
:root {
  --sans: "Zen Maru Gothic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic UI", sans-serif;
  --mono: "Consolas", "BIZ UDGothic", monospace;   /* 件数・日付・ID だけ */
  --font:      calc(14px * var(--scale));
  --font-s:    calc(12px * var(--scale));
  --font-l:    calc(17px * var(--scale));
  --row-pad-y: calc(6px * var(--scale));
  --row-h:     calc(32px * var(--scale));
  --gap:       calc(6px * var(--scale));
  --h-chip:    calc(28px * var(--scale));
  --h-ctl:     calc(34px * var(--scale));
  --h-main:    calc(44px * var(--scale));
  --r-control: 4px;
  --r-surface: 8px;
  --console-bar-h: 0px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--font);
  line-height: 1.5;
}
body { margin: 0; accent-color: var(--accent-edge); }
::selection { background: var(--sel); color: var(--text); }
* { scrollbar-color: var(--edge) var(--surface); scrollbar-width: thin; }

a { color: var(--link); }
a:hover { color: var(--link); }
.mono, .mono * { font-family: var(--mono); }

/* ---- 釦 ----
 * 既定は早押し.jp の btnCompact（地は --raised、枠は --edge）。
 * 主操作だけ橙で塗る。選択中・現在地は淡い橙の地＋橙の縁（色だけに頼らず太字も付ける）。 */
button, .btn {
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
  padding: 4px 12px;
  min-height: var(--h-ctl);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
button:hover, .btn:hover { background: var(--sel); }
button:disabled { color: var(--muted); border-color: var(--line); cursor: default; }
button:disabled:hover { background: var(--raised); }

.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent-edge); font-weight: 700; }
.primary:hover { background: var(--accent); filter: brightness(1.05); }
button.on, .btn.on, .cur { background: var(--sel); color: var(--text); border-color: var(--accent-edge); font-weight: 700; }
button.on:hover, .btn.on:hover { background: var(--sel); }

.secondary { background: var(--raised); color: var(--text); border-color: var(--edge); }
.ghost { background: transparent; border-color: var(--line); color: var(--subtext); }
.ghost:hover { background: var(--raised); color: var(--text); }
.ghost:disabled { color: var(--muted); border-color: var(--line); }
.btn-s { padding: 1px 8px; min-height: var(--h-chip); font-size: var(--font-s); }

/* 戻せない操作。常時塗らない（並ぶと警告として働かない） */
.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.danger:hover { background: var(--danger-bg); color: var(--danger); }
.warn { color: var(--warn); }

/* ---- 入力欄 ---- */
input, select, textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
  padding: 3px 8px;
  font: inherit;
}
:where(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: var(--h-ctl); }
/* チェック・ラジオも的を 24px 以上に（2.5.8） */
input[type="checkbox"], input[type="radio"] { width: calc(18px * var(--scale)); height: calc(18px * var(--scale)); margin: 3px 6px 3px 0; vertical-align: middle; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; }
/* 焦点は橙の縁を2px（2.4.13 の太さとコントラストを満たす） */
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-edge);
  outline-offset: 1px;
}
input::placeholder, textarea::placeholder { color: var(--muted); }

/* ---- よく使う小物 ---- */
.sub   { color: var(--subtext); }
.muted { color: var(--muted); }
.small { font-size: var(--font-s); }
.mini  { color: var(--subtext); font-size: var(--font-s); }
.sp    { flex: 1; }
.none  { color: var(--muted); padding: 10px; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-head { position: sticky; top: var(--console-bar-h); z-index: 5; background: var(--bg); border-bottom: 1px solid var(--edge); }

/* ---- 頁の切り替え（日常の2つ＋取り込みの畳み）と見た目の設定。ui.js が動かす ---- */
nav.pages { display: inline-flex; gap: 4px; align-items: center; }
nav.pages > a, nav.pages summary {
  display: inline-flex; align-items: center; min-height: var(--h-ctl); padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-control); text-decoration: none;
  color: var(--text); font-weight: 700; white-space: nowrap; cursor: pointer; background: transparent;
}
nav.pages > a:hover, nav.pages summary:hover { background: var(--raised); }
nav.pages > a.cur, nav.pages details.cur > summary { background: var(--sel); border-color: var(--accent-edge); }
nav.pages details { position: relative; }
nav.pages summary { list-style: none; }
nav.pages summary::-webkit-details-marker { display: none; }
nav.pages summary::after { content: "▾"; margin-left: 4px; color: var(--subtext); }
.menu {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 12em;
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-surface);
  padding: 4px; display: flex; flex-direction: column;
}
.menu a, .menu button { display: flex; align-items: center; min-height: var(--h-ctl); padding: 0 10px;
  border: 0; border-radius: var(--r-control); background: transparent; color: var(--text); text-decoration: none; text-align: left; font-weight: 500; }
.menu a:hover, .menu button:hover { background: var(--raised); }
.menu a.cur { background: var(--sel); }
#ui-prefs-slot { order: 99; margin-left: auto; }
#ui-prefs { position: relative; }
#ui-prefs summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer;
  border: 1px solid var(--edge); border-radius: var(--r-control); background: var(--raised); }
#ui-prefs summary::-webkit-details-marker { display: none; }
#ui-prefs summary::after { content: "▾"; margin-left: 4px; color: var(--subtext); }
#ui-prefs .menu { left: auto; right: 0; min-width: 15em; padding: 8px 10px; gap: 6px; }
#ui-prefs .menu .grp { display: flex; flex-direction: column; gap: 4px; }
#ui-prefs .menu .seg { display: flex; gap: 4px; }
#ui-prefs .menu .seg button { flex: 1; justify-content: center; border: 1px solid var(--edge); }
#ui-prefs .menu .seg button.on { background: var(--sel); border-color: var(--accent-edge); }

/* 動きを嫌う設定の時は移り変わりを止める（OSの設定に従う） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 確かめる窓（ui.js の UI.confirm。ブラウザ既定の confirm() の代わり） */
.ui-dialog { position: fixed; inset: 0; z-index: 9000; background: var(--scrim);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.ui-dialog .box { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r-surface); padding: 16px 18px; }
.ui-dialog p { margin: 0 0 14px; line-height: 1.6; }
.ui-dialog .box.info { width: min(560px, 100%); max-height: 80vh; overflow-y: auto; }
.ui-dialog .ui-info-body { line-height: 1.7; margin-bottom: 14px; }
.ui-dialog .ui-info-body h3 { font-size: var(--font-l); margin: 0 0 8px; }
.ui-dialog .ui-info-body ul { margin: 6px 0; padding-left: 1.3em; }
.ui-dialog .ui-info-body li { margin: 4px 0; }
.ui-dialog .ui-info-body code { background: var(--raised); padding: 0 4px; border-radius: var(--r-control); }
.ui-dialog .acts { display: flex; gap: 8px; justify-content: flex-end; }
.ui-dialog .acts button { min-height: var(--h-main); min-width: 6em; }

/* アイコン（Lucide。ui.js の UI.ic / UI.ib）。線の太さと大きさを1か所で決める */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-i { display: inline-flex; align-items: center; justify-content: center; padding: 0; min-width: var(--h-chip); min-height: var(--h-chip); }
.btn-i .ic { width: 1.25em; height: 1.25em; vertical-align: 0; }
button .ic + span, button span + .ic { margin-left: 4px; }