/*
 * Akatsuki Work App — デザインシステム
 *
 * ビルド不要・外部CDN不使用。CSP を script-src 'self' のまま締められる。
 * フォントは public/fonts/ に同梱（欧文と数字だけ。和文はOSに任せる）。
 *
 * 考え方は「計器盤」。業務アプリなので飾らない。かわりに精密さを見た目にする。
 *
 *   1. 数字が主役。等幅・桁揃え・スラッシュ付きゼロ。金額は本文より大きく強い
 *   2. 色は「状態」にしか使わない。赤＝まずい／黄＝要確認／緑＝済み。
 *      装飾で赤や緑を使わない。使うと本物の警告が埋もれる
 *   3. 青（瑠璃）は操作にだけ使う。リンク・主ボタン・現在地・フォーカス。それ以外に出さない
 *   4. 金（暁）はブランドの印だけ。ロゴとログイン画面の2か所のみ
 *   5. 余白に緩急をつける。かたまりの中は詰め、かたまりの間はあける
 */

/* ── 同梱フォント（SIL OFL 1.1／public/fonts/README.md 参照） ── */
@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/plex-sans-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  /* 和文はこのファイルに入っていない。欧文と記号だけ当てて、残りはOSのフォントに落とす */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-600-latin.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap;
}

/* ══════════════════════════════════════════════════════════
   1. トークン
   ══════════════════════════════════════════════════════════ */

:root {
  /* 面。青みではなくわずかに暖かい灰。赤の警告が沈まないようにする */
  --ground:    #eceded;
  --surface:   #ffffff;
  --sunken:    #f3f4f5;
  --raised:    #fafbfb;
  --line:      #cfd2d6;
  --line-soft: #e3e5e8;
  --rule:      rgba(20, 24, 31, .045);   /* 背景の方眼 */

  --ink:   #14181f;
  --ink-2: #39404c;
  --muted: #666f7b;

  /* 操作の色。リンク・主ボタン・現在地・フォーカスにしか使わない */
  --accent:      #1d3f8f;
  --accent-ink:  #ffffff;
  --accent-wash: #e7ebf6;
  --accent-line: #b1bedc;

  /* ブランドの色（暁）。ロゴとログイン画面だけ */
  --dawn:      #a06a1c;
  --dawn-wash: #f7edda;

  /* 状態の色。ここだけ彩度を高く保つ。台帳の中で一目で見つかる必要がある */
  --danger:      #b5301b;
  --danger-wash: #fbe9e5;
  --danger-line: #e9b4a8;
  --warn:        #8a5c07;
  --warn-wash:   #fbf1dc;
  --warn-line:   #e0c78e;
  --good:        #1f6a4c;
  --good-wash:   #e0efe8;
  --good-line:   #a4ccbb;

  /* 余白。3段階しか使わない */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  /* 字の大きさ。9段。これ以外を使わない */
  --t-micro: 10.5px; --t-xs: 11.5px; --t-sm: 12.5px; --t-base: 13.5px; --t-md: 15px;
  --t-lg: 18px; --t-xl: 22px; --t-2xl: 28px; --t-hero: 38px;

  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 1px 1px rgba(20, 24, 31, .04), 0 10px 30px -22px rgba(20, 24, 31, .45);
  --shadow-up: 0 1px 1px rgba(20, 24, 31, .05), 0 22px 50px -30px rgba(20, 24, 31, .55);

  --sans: "Plex Sans", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
          "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  color-scheme: light;
}

/*
 * 暗い面。
 *
 * OSの設定（prefers-color-scheme）には従わない。**既定は白**で、
 * 上部バーのボタンで暗くしたときだけ暗くする。
 * OSに従わせていた頃は、白い帳票を刷るPCと画面の見え方が人によって食い違い、
 * 「自分の画面ではこう見える」が通じなかった。
 *
 * 真っ黒にはしない。帳票の白面と並べたときに目が痛くなる
 */
:root[data-theme="dark"] {
  --ground:    #0f1216;
  --surface:   #171b21;
  --sunken:    #1e232b;
  --raised:    #222831;
  --line:      #2f3641;
  --line-soft: #252b34;
  --rule:      rgba(255, 255, 255, .028);

  --ink:   #e9ecf0;
  --ink-2: #bcc3cd;
  --muted: #808a99;

  --accent:      #84a2ee;
  --accent-ink:  #101725;
  --accent-wash: #1a2233;
  --accent-line: #364667;

  --dawn:      #e2ae60;
  --dawn-wash: #2a2115;

  --danger:      #f4897a;
  --danger-wash: #2e1a17;
  --danger-line: #5c3129;
  --warn:        #e6b463;
  --warn-wash:   #2b2314;
  --warn-line:   #574526;
  --good:        #6cc9a2;
  --good-wash:   #142720;
  --good-line:   #2b503f;

  --shadow:    0 1px 1px rgba(0, 0, 0, .5), 0 10px 30px -22px rgba(0, 0, 0, .9);
  --shadow-up: 0 1px 1px rgba(0, 0, 0, .55), 0 22px 50px -30px rgba(0, 0, 0, 1);

  color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════
   2. 土台
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.75;
  font-feature-settings: "palt" 1;   /* 和文の詰め。約物のまわりの空きを削る */
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;

  /*
   * 背景の方眼。装飾ではなく、この画面が「台帳」であることの合図。
   * 28px の薄い罫。カードの下にだけ見える
   */
  background-color: var(--ground);
  background-image:
    linear-gradient(to right,  var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.012em; }

/*
 * リンクは色だけでなく下線でも分かるようにする。
 * 色覚に頼らない、というだけでなく、台帳の中で「押せる文字」が見分けやすい
 */
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--accent-wash); color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--s4) 0; }

/*
 * 数字。この画面の主役。
 *  - tabular-nums …… 桁を揃える。揃わない台帳は読めない
 *  - slashed-zero …… 0 と O を取り違えない。口座番号・請求番号で効く
 *  - letter-spacing …… 等幅は間延びするので少し詰める
 */
.num, td.num, th.num,
input[inputmode="numeric"], input[type="date"], input[type="time"], input[type="month"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -.015em;
}

/* 金額。本文より一段強く出す。ここが読めれば仕事が終わる */
.money { font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero;
         letter-spacing: -.02em; font-weight: 600; }
.negative { color: var(--danger); }

/* ══════════════════════════════════════════════════════════
   3. 全体の骨格
   ══════════════════════════════════════════════════════════ */

.shell { min-height: 100dvh; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(10px);
}
.topbar .spacer { margin-left: auto; }

.topbar .brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-md); font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; padding: 0 var(--s1);
}
/*
 * 暁の印。ブランドの色を使うのはここと認証画面だけ。
 * 増やすと「状態の色」が効かなくなる
 */
.topbar .brand .mark {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: var(--dawn);
  box-shadow: 0 0 0 3px var(--dawn-wash);
}

/*
 * 画面全体の段組み（サイドナビ＋本文）。
 * `.body` はカードの中身にも使う名前なので、シェルの直下だけに効かせる。
 * 素の `.body` に flex を掛けると、カードの中のフォームが全部横並びになる
 */
.shell > .body {
  display: flex; gap: var(--s6);
  max-width: 1640px; margin: 0 auto;
  padding: var(--s5) var(--s5) var(--s7);
}
.sidebar { width: 214px; flex: none; }
.sidebar .sticky { position: sticky; top: 64px; }
.main { min-width: 0; flex: 1; }

@media (max-width: 1023px) {
  .shell > .body { padding: var(--s4) var(--s3) var(--s7); gap: 0; }
  .sidebar { display: none; }
  .sidebar.open {
    display: block; position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: 276px; padding: var(--s4); overflow-y: auto;
    background: var(--surface); border-right: 1px solid var(--line);
    box-shadow: var(--shadow-up);
  }
  .sidebar.open .sticky { position: static; }
}

/* ── サイドナビ ── */
.nav a {
  position: relative;
  display: block; padding: 5px 10px; margin-bottom: 1px;
  border-radius: var(--radius-sm);
  color: var(--ink-2); text-decoration: none;
  font-size: var(--t-sm); line-height: 1.6;
}
.nav a:hover { background: var(--sunken); color: var(--ink); }

/* 現在地。色を塗るだけでなく左に罫を立てる。塗りだけだと薄い画面で見失う */
.nav a.active {
  background: var(--accent-wash); color: var(--accent); font-weight: 700;
}
.nav a.active::before {
  content: ""; position: absolute; left: -7px; top: 5px; bottom: 5px;
  width: 3px; border-radius: 2px; background: var(--accent);
}
/*
 * まとまりは畳んでおく。いま居るまとまりだけ開く。
 * 全部を開いておくと35本のリンクが一度に並んで、どこを見ればいいか分からなくなる
 */
.nav .group { margin-bottom: 2px; }
.nav .group.flat { margin-bottom: var(--s3); }

.nav details > summary {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; margin-bottom: 1px;
  border-radius: var(--radius-sm);
  font-size: var(--t-sm); font-weight: 700; color: var(--ink-2);
  cursor: pointer; list-style: none; user-select: none;
}
.nav details > summary:hover { background: var(--sunken); color: var(--ink); }
.nav details[open] > summary { color: var(--ink); }

/* 開いているかどうかを三角で示す。文字だけだと、押して開くものだと分からない */
.nav details > summary::before {
  content: ""; flex: none;
  width: 0; height: 0; margin-left: 2px;
  border-left: 4.5px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  opacity: .45;
  transition: transform .12s ease-out;
}
.nav details[open] > summary::before { transform: rotate(90deg); opacity: .7; }

.nav .sub {
  border-left: 1px solid var(--line-soft);
  margin: 2px 0 var(--s3) 16px;
  padding-left: 6px;
}

.nav-foot {
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s3); margin-top: var(--s5);
  font-size: var(--t-xs); color: var(--muted); line-height: 1.6;
}
.nav-foot strong { display: block; color: var(--ink); font-size: var(--t-sm); }

/* ══════════════════════════════════════════════════════════
   4. 見出しとカード
   ══════════════════════════════════════════════════════════ */

.page-head { margin-bottom: var(--s5); }
.page-head h1 {
  font-size: var(--t-xl); margin: 0; line-height: 1.35;
}
.page-head .desc {
  color: var(--muted); font-size: var(--t-sm); margin: var(--s1) 0 0; max-width: 74ch;
}
.page-head .row {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  justify-content: space-between; align-items: flex-start;
}
/* 見出しの下は罫ではなく余白で切る。罫だらけの画面で罫を1本減らす */
.page-head::after {
  content: ""; display: block;
  height: 1px; margin-top: var(--s4);
  background: linear-gradient(to right, var(--line), transparent 62%);
}

.crumb {
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s1);
}
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card > header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-soft);
}
.card > header h2 {
  font-size: var(--t-md); font-weight: 700; margin: 0; letter-spacing: -.015em;
}
.card > header .sub { font-size: var(--t-xs); color: var(--muted); font-weight: 400; }
.card .body { padding: var(--s4); }
.card .body.flush { padding: 0; }
.card .body.tight { padding: var(--s3); }
.card > footer {
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line-soft);
  background: var(--sunken);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--t-sm);
}

/* かたまり同士の間。カードの中（16px）よりはっきり広くとる */
.grid { display: grid; gap: var(--s4); }
/*
 * 2段組みは高さを揃えない。片方が短いと、もう片方に合わせて
 * 中身のないカードが縦に間延びして、空白が「何かある」ように見えてしまう
 */
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* ══════════════════════════════════════════════════════════
   5. 数値カード
   ══════════════════════════════════════════════════════════ */

.stat { position: relative; overflow: hidden; }
.stat .k {
  font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0;
}
.stat .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero;
  font-size: var(--t-2xl); font-weight: 600; line-height: 1.15;
  letter-spacing: -.03em;
  margin: var(--s1) 0 0;
}
.stat .s { font-size: var(--t-xs); color: var(--muted); margin: 2px 0 0; line-height: 1.5; }

/*
 * 状態のあるカードは、数字を染めるだけでなく左に太い罫を立てる。
 * 数字の色だけだと、画面いっぱいに数字が並んだとき埋もれる
 */
.stat.danger, .stat.warn, .stat.good { border-left: 3px solid var(--line); }
.stat.danger { border-left-color: var(--danger); }
.stat.warn   { border-left-color: var(--warn); }
.stat.good   { border-left-color: var(--good); }
.stat.danger .v { color: var(--danger); }
.stat.warn   .v { color: var(--warn); }
.stat.good   .v { color: var(--good); }

/* 主役の1枚。同じ大きさのカードを並べない。1枚だけ大きくする */
.stat.hero .v { font-size: var(--t-hero); }
.stat.hero .k { font-size: var(--t-xs); }

/* ══════════════════════════════════════════════════════════
   6. ボタン
   ══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--t-sm); font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .12s linear, border-color .12s linear, color .12s linear;
}
.btn:hover { background: var(--sunken); border-color: var(--muted); }
.btn:active { background: var(--raised); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.btn:disabled:hover { background: var(--surface); border-color: var(--line); }

.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); border-color: transparent; }

.btn.danger { border-color: var(--danger-line); color: var(--danger); background: var(--surface); }
.btn.danger:hover { background: var(--danger-wash); border-color: var(--danger); }

.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--sunken); border-color: transparent; color: var(--ink); }

.btn.sm { padding: 3px 9px; font-size: var(--t-xs); }
.btn.lg { padding: 11px 22px; font-size: var(--t-md); border-radius: var(--radius); }
.btn.block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* ══════════════════════════════════════════════════════════
   7. フォーム
   ══════════════════════════════════════════════════════════ */

.field {
  display: block; width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--t-sm);
  transition: border-color .12s linear, box-shadow .12s linear;
}
.field:hover { border-color: var(--muted); }
.field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field::placeholder { color: var(--muted); opacity: .8; }
.field:disabled, .field[readonly] { background: var(--sunken); color: var(--muted); }
.field.num-input {
  text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero; letter-spacing: -.015em;
}
select.field { padding-right: 6px; }
textarea.field { line-height: 1.7; }

.label {
  display: block;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s1);
}
.hint { display: block; font-size: var(--t-xs); color: var(--muted); margin-top: var(--s1); line-height: 1.6; }
.req { color: var(--danger); margin-left: 3px; }

.form-row { display: grid; gap: var(--s3); }
.form-row.two   { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.form-row.three { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
.inline { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
/* 横並びの中では、日付・時刻の入力は中身ぶんの幅に収める（100%だと1つで1行を使い切る） */
.inline > .field[type="date"], .inline > .field[type="time"], .inline > .field[type="month"] { width: auto; }
.inline > .muted { padding-bottom: 7px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); cursor: pointer; }
.check input { accent-color: var(--accent); }

/* ══════════════════════════════════════════════════════════
   8. 台帳（表）
   ══════════════════════════════════════════════════════════ */

.scroll-x { overflow-x: auto; }

table.ledger { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.ledger thead th {
  text-align: left; padding: var(--s2) var(--s4); white-space: nowrap;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
table.ledger tbody td {
  padding: 9px var(--s4);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
table.ledger tbody tr:last-child td { border-bottom: 0; }
table.ledger tbody tr:hover { background: var(--sunken); }
table.ledger tfoot td {
  padding: var(--s2) var(--s4);
  border-top: 2px solid var(--line); font-weight: 700;
}
table.ledger td.right, table.ledger th.right { text-align: right; }
/* 表の中の数字は右端を揃える。ここが揃っていないと合計が目で検算できない */
table.ledger td.num { font-variant-numeric: tabular-nums slashed-zero; }

/* ══════════════════════════════════════════════════════════
   9. 印・注意書き
   ══════════════════════════════════════════════════════════ */

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 9px; border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  background: var(--sunken); color: var(--ink-2);
}
.chip.accent { background: var(--accent-wash); color: var(--accent); border-color: var(--accent-line); }
.chip.good   { background: var(--good-wash);   color: var(--good);   border-color: var(--good-line); }
.chip.warn   { background: var(--warn-wash);   color: var(--warn);   border-color: var(--warn-line); }
.chip.danger { background: var(--danger-wash); color: var(--danger); border-color: var(--danger-line); }

/*
 * 注意書き。左に太い罫を立てる。
 * 面を塗るだけだと、暗い面で「ただの別の箱」に見えて読み飛ばされる
 */
.notice {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  font-size: var(--t-sm); line-height: 1.7;
  background: var(--surface);
}
.notice p { margin: 0 0 var(--s1); }
.notice p:last-child { margin-bottom: 0; }
.notice .title { font-weight: 700; font-size: var(--t-base); margin-bottom: 2px; }
.notice a { color: inherit; text-decoration: underline; }

.notice.accent { border-color: var(--accent-line); border-left-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.notice.good   { border-color: var(--good-line);   border-left-color: var(--good);   background: var(--good-wash);   color: var(--good); }
.notice.warn   { border-color: var(--warn-line);   border-left-color: var(--warn);   background: var(--warn-wash);   color: var(--warn); }
.notice.danger { border-color: var(--danger-line); border-left-color: var(--danger); background: var(--danger-wash); color: var(--danger); }

/*
 * 「手が止まっているもの」。ダッシュボードの主役。
 * 表ではなく行のリストにして、左の罫の色で急ぎかどうかを一目で分ける
 */
.todo { display: flex; flex-direction: column; }
.todo .row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  text-decoration: none; color: inherit;
}
.todo .row:last-child { border-bottom: 0; }
.todo .row:hover { background: var(--sunken); }
.todo .row.danger { border-left-color: var(--danger); }
.todo .row.warn   { border-left-color: var(--warn); }
.todo .row .what { flex: 1 1 auto; min-width: 0; font-size: var(--t-base); }
.todo .row .go { flex: none; color: var(--muted); font-size: var(--t-md); line-height: 1; }
.todo .row:hover .go { color: var(--accent); }

.secret {
  font-family: var(--mono); font-size: var(--t-base); letter-spacing: -.01em;
  background: var(--sunken); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3);
  white-space: pre-wrap; word-break: break-all; margin: 6px 0;
}

.empty {
  text-align: center; color: var(--muted); font-size: var(--t-sm);
  padding: var(--s7) var(--s4); line-height: 1.8;
}

/* 集計の横棒。グラフライブラリは入れない */
.bar {
  display: block; height: 7px; border-radius: 999px;
  background: var(--ink-2); opacity: .35; min-width: 2px;
}

/* ── 権限の三択 ── */
.perm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: 3px 0; }
.perm-row .dot { width: 16px; text-align: center; font-size: var(--t-sm); }
.perm-row .dot.on { color: var(--good); }
.perm-row .dot.off { color: var(--line); }
.perm-row .name { flex: 1 1 240px; min-width: 0; font-size: var(--t-sm); }
.perm-row code { font-family: var(--mono); font-size: var(--t-micro); color: var(--muted); margin-left: 6px; }

.tri { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; flex: none; }
.tri label { padding: 2px 9px; font-size: var(--t-xs); cursor: pointer; background: var(--surface); color: var(--muted); }
.tri label:hover { background: var(--sunken); }
.tri input { position: absolute; opacity: 0; pointer-events: none; }
.tri input:checked + span { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.tri label span { display: block; margin: -2px -9px; padding: 2px 9px; }

/* ══════════════════════════════════════════════════════════
   10. こまごま
   ══════════════════════════════════════════════════════════ */

.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack.sm { gap: var(--s2); }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.right { text-align: right; }
.mt { margin-top: var(--s5); }
.mb { margin-bottom: var(--s5); }
.qr svg { width: 200px; height: 200px; background: #fff; padding: var(--s2); border-radius: var(--radius-sm); }

.pager { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-sm); }

/* 月の行き来（勤怠・シフト・給与で共通） */
.month-nav { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.month-nav form { margin: 0; }
.month-nav .now {
  font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero;
  font-size: var(--t-md); font-weight: 600; letter-spacing: -.02em;
}

/* details をボタン風に見せる。開閉のたびにレイアウトが飛ばないよう marker は消す */
details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary.btn { display: inline-flex; }

/* 色見本（シフトパターン） */
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); vertical-align: -2px; }

/* ══════════════════════════════════════════════════════════
   11. 打刻（スマホで押す画面）
   ══════════════════════════════════════════════════════════ */

.punch { max-width: 440px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); }
.punch .clock {
  font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero;
  font-size: 46px; font-weight: 600; line-height: 1;
  letter-spacing: -.045em; text-align: center;
  margin: 0;
}
.punch .clock-date {
  text-align: center; font-size: var(--t-sm); color: var(--muted);
  letter-spacing: .14em; margin: var(--s2) 0 0;
}
/*
 * 押す面は大きく、迷わせない。手袋でも、暗い店内でも押せる大きさ。
 * 主ボタンだけ色を持たせ、他は枠線のみにする
 */
.punch .main-btn {
  display: block; width: 100%; padding: 44px var(--s4);
  margin: var(--s5) 0 var(--s3);
  border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--sans); font-size: 28px; font-weight: 700; letter-spacing: .34em; text-indent: .34em;
  cursor: pointer;
  box-shadow: var(--shadow-up);
  transition: transform .08s ease-out, opacity .12s linear;
}
.punch .main-btn:active { transform: scale(.985); opacity: .9; }
.punch .main-btn:disabled { opacity: .45; box-shadow: none; }
.punch .sub-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.punch .sub-btns .btn { padding: var(--s3); font-size: var(--t-base); }

/* ══════════════════════════════════════════════════════════
   12. 認証画面

   毎日いちばん最初に開く画面。ここだけブランドの面を作る。
   左に暁の面、右に入力。狭い画面では上下に積む
   ══════════════════════════════════════════════════════════ */

.auth-wrap {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s5) var(--s4);
}
.auth-box {
  width: 100%; max-width: 880px;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-up);
  overflow: hidden;
}

/* 左の面。夜明けの空。ここでしかグラデーションを使わない */
.auth-head {
  position: relative;
  padding: var(--s7) var(--s6);
  display: flex; flex-direction: column; justify-content: center;
  color: #f4efe6;
  /* 夜明け。文字の下から光が上がってくる。ここでしかグラデーションを使わない */
  background:
    radial-gradient(72% 48% at 4% 98%, #e79127 0%, #9c5019 32%, transparent 70%),
    linear-gradient(198deg, #10141a 0%, #171d26 54%, #201a15 100%);
}
/*
 * 文字の下に暗い幕を1枚敷く。夜明けの光をそのままにすると、
 * オレンジの上に白文字が乗ってコントラストが基準を割る
 */
.auth-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 12, 16, .42) 0%, rgba(10, 12, 16, .16) 38%, transparent 62%);
}
/* 空に薄い水平線を引く。方眼の考え方をここにも通す */
.auth-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .038) 1px, transparent 1px);
  background-size: 100% 34px;
}
.auth-head > * { position: relative; z-index: 1; }
.auth-head .eyebrow {
  position: absolute; top: var(--s5); left: var(--s6);
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-micro); letter-spacing: .3em; text-transform: uppercase;
  color: #e8bb72; margin: 0; font-weight: 700;
}
.auth-head .eyebrow::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: #e8bb72; box-shadow: 0 0 14px 2px rgba(232, 187, 114, .5);
}
.auth-head h1 {
  font-size: var(--t-2xl); margin: 0 0 var(--s3);
  letter-spacing: -.025em; line-height: 1.25; color: #fff;
}
.auth-head p { font-size: var(--t-sm); color: rgba(244, 239, 230, .82); margin: 0; line-height: 1.8; }

.auth-form { padding: var(--s6) var(--s5); }
.auth-form > .card { border: 0; box-shadow: none; background: transparent; }
.auth-form > .card > .body { padding: 0; }

@media (max-width: 720px) {
  .auth-wrap { padding: 0; align-items: stretch; }
  .auth-box { grid-template-columns: 1fr; max-width: 460px; border: 0; border-radius: 0; box-shadow: none; margin: auto; }
  .auth-head { padding: var(--s6) var(--s5) var(--s5); min-height: 190px; }
  .auth-form { padding: var(--s5); }
}

.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  padding: 3px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--sunken);
  margin-bottom: var(--s5);
}
.tabs a {
  padding: 7px var(--s2); border-radius: var(--radius-sm);
  text-align: center; font-size: var(--t-sm); font-weight: 700;
  text-decoration: none; color: var(--muted);
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.pin-input {
  text-align: center; font-family: var(--mono);
  font-size: var(--t-xl); letter-spacing: .55em; text-indent: .55em; padding: var(--s3);
}

/* ══════════════════════════════════════════════════════════
   13. 従業員 × 日 のグリッド（シフト表・シフト希望・賃金台帳）

   1行目の従業員名と1列目の見出しは、横に流れても常に見えていないと
   「いま誰の何月何日を見ているのか」が分からなくなる。両方 sticky にする
   ══════════════════════════════════════════════════════════ */

table.grid-table {
  width: max-content; min-width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: var(--t-sm);
}
table.grid-table th, table.grid-table td {
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  padding: 5px 7px;
  vertical-align: middle;
  background: var(--surface);
}
table.grid-table thead th {
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-micro); font-weight: 700; color: var(--muted);
  text-align: center; white-space: nowrap;
}
table.grid-table .sticky-col {
  position: sticky; left: 0; z-index: 3;
  min-width: 152px; max-width: 152px;
  text-align: left; font-weight: 600;
  border-right: 1px solid var(--line);
}
table.grid-table thead .sticky-col { z-index: 4; }
table.grid-table tfoot td, table.grid-table tfoot th {
  position: sticky; bottom: 0; z-index: 2;
  border-top: 2px solid var(--line); font-weight: 700;
}
table.grid-table tfoot .sticky-col { z-index: 3; }
table.grid-table td.day {
  min-width: 48px; text-align: center;
  font-variant-numeric: tabular-nums slashed-zero;
}
/*
 * 土日。赤と青の「状態の色」は使わない。ここは状態ではなく暦なので、
 * 面をわずかに沈めるだけにする。使うと未入金の赤が埋もれる
 */
table.grid-table th.day.sun, table.grid-table td.day.sun,
table.grid-table th.day.sat, table.grid-table td.day.sat { background: var(--sunken); }
table.grid-table th.day.sun { color: var(--danger); }
table.grid-table th.day.sat { color: var(--accent); }
table.grid-table th.day.today {
  outline: 2px solid var(--accent); outline-offset: -2px;
  color: var(--accent); font-weight: 700;
}
table.grid-table tbody tr:hover td:not(.day),
table.grid-table tbody tr:hover .sticky-col { background: var(--sunken); }

/* シフト希望の重ね表示。色だけで意味を伝えないよう、セルの記号も併記している */
.shift-grid td.req-preferred  { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--good) 60%, transparent); }
.shift-grid td.req-available  { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 38%, transparent); }
.shift-grid td.req-unavailable { background: var(--danger-wash); }
.shift-grid .cell-select {
  width: 100%; min-width: 46px;
  padding: 2px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--t-xs); text-align: center;
}
.shift-grid .cell-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.shift-grid .cell-static { display: block; text-align: center; font-size: var(--t-sm); }
.shift-grid .pub-dot { display: block; width: 5px; height: 5px; margin: 2px auto 0; border-radius: 50%; background: var(--good); }

/* シフト希望の凡例 */
.req-mark { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; }
.req-mark.ok    { background: var(--good); }
.req-mark.avail { background: color-mix(in srgb, var(--good) 42%, transparent); }
.req-mark.ng    { background: var(--danger); }

/* ══════════════════════════════════════════════════════════
   14. 給与の一覧・賃金台帳
   ══════════════════════════════════════════════════════════ */

table.payroll-grid td.num, table.payroll-grid th.num {
  font-variant-numeric: tabular-nums slashed-zero; letter-spacing: -.015em;
}
table.payroll-grid .sticky-col {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface); min-width: 164px;
  border-right: 1px solid var(--line);
}
table.payroll-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
table.payroll-grid thead .sticky-col { z-index: 3; }
table.payroll-grid tr.is-section th {
  background: var(--sunken); font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700;
}
table.payroll-grid tr.is-total td, table.payroll-grid tr.is-total th {
  border-top: 1px solid var(--line); font-weight: 700;
}
/* 差引支給額の行。給与画面の主役。ここだけ本文より大きく出す */
table.payroll-grid tr.is-net td, table.payroll-grid tr.is-net th {
  border-top: 2px solid var(--line);
  font-size: var(--t-md); font-weight: 700; letter-spacing: -.02em;
}

/* 手で上書きした金額は、ひと目で分かるようにしておく */
.is-override { background: var(--warn-wash); box-shadow: inset 2px 0 0 var(--warn); }

/* 表の行の状態 */
tr.is-current > td, tr.is-current > th { background: var(--accent-wash); }
tr.is-anomaly > td { background: var(--danger-wash); }
tr.is-today > td { outline: 2px solid var(--accent); outline-offset: -2px; }
tr.is-sun > td:first-child { color: var(--danger); }
tr.is-sat > td:first-child { color: var(--accent); }

/* ══════════════════════════════════════════════════════════
   15. 明細エディタ・消込の候補
   ══════════════════════════════════════════════════════════ */

table.lines tbody td { padding: 6px var(--s2); vertical-align: top; }
table.lines tbody tr:hover { background: transparent; }
table.lines .field { padding: 5px var(--s2); font-size: var(--t-sm); }
table.lines .field.small { font-size: var(--t-xs); }
table.lines [data-amount] { padding-top: 12px; font-variant-numeric: tabular-nums slashed-zero; }
table.lines [data-line-no] { padding-top: 12px; font-size: var(--t-xs); color: var(--muted); }
table.totals { max-width: 430px; margin-left: auto; }
table.totals tbody td { border-bottom: none; padding: 5px 0; }
table.totals tfoot td { border-top: 1px solid var(--line); }

textarea.field.num { font-family: var(--mono); font-size: var(--t-sm); line-height: 1.6; letter-spacing: 0; }

.candidate {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--surface);
}
.candidate.is-strong { border-left-color: var(--good); background: var(--good-wash); }
.candidate-head { display: flex; gap: var(--s4); align-items: flex-start; }
.candidate-head > div:first-of-type { flex: 1 1 auto; min-width: 0; }
.candidate .score {
  flex: none;
  font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero;
  font-size: var(--t-xl); font-weight: 600; line-height: 1.1; letter-spacing: -.03em;
  min-width: 62px; text-align: center;
  padding: var(--s2) var(--s1); border-radius: var(--radius-sm);
  background: var(--sunken); color: var(--muted);
}
.candidate.is-strong .score { background: var(--good); color: #fff; }
.candidate .score small { font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; }
.candidate .reasons { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) 6px; }
.candidate .reasons li {
  font-size: var(--t-micro); color: var(--ink-2);
  background: var(--sunken); border-radius: 999px; padding: 1px 9px;
}
.candidate.is-strong .reasons li { background: var(--surface); }
.candidate-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }

/* ══════════════════════════════════════════════════════════
   16. 帳票（請求書・見積・給与明細の印刷面）

   ここは画面ではなく「紙」。暗い面でも白のまま出す。
   刷ったものと画面が違って見えると、送る前の確認にならない
   ══════════════════════════════════════════════════════════ */

.sheet-toolbar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 5;
}
.sheet-toolbar .spacer { margin-left: auto; }
.sheet-wrap { padding: var(--s5) var(--s4) var(--s7); display: flex; justify-content: center; }

.sheet {
  width: 210mm; min-height: 297mm; padding: 18mm 16mm;
  background: #fff; color: #14181f;
  border: 1px solid #cfd2d6; box-shadow: var(--shadow-up);
  font-size: var(--t-sm);
}
.sheet .muted { color: #666f7b; }
.sheet .num, .sheet .money { font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero; }

/* 未発行のものを刷って、そのまま送ってしまう事故を防ぐ */
.sheet.is-draft { position: relative; }
.sheet.is-draft::after {
  content: "下書き・未発行";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 76px; font-weight: 700; letter-spacing: .22em;
  color: rgba(181, 48, 27, .12);
  transform: rotate(-24deg);
  pointer-events: none;
}
/* 請求書は「下書き・未発行」だが、給与明細は「未確定」。同じ字だと意味が違って伝わる */
.sheet.is-draft.is-payslip::after { content: "未確定"; }

.sheet-title {
  text-align: center; font-size: var(--t-xl);
  letter-spacing: .55em; text-indent: .55em; font-weight: 700;
  margin: 0 0 var(--s5); padding-bottom: var(--s2);
}
.sheet-head { display: flex; gap: var(--s5); justify-content: space-between; margin-bottom: var(--s4); }
.sheet-head .to { flex: 1 1 55%; min-width: 0; }
.sheet-head .from { flex: 0 0 38%; text-align: left; }
.sheet-head p { margin: 0 0 2px; }
.sheet-head .party {
  font-size: var(--t-md); font-weight: 700;
  border-bottom: 1px solid #14181f; padding-bottom: 3px; margin-bottom: 6px;
}
.sheet-head .from .party { border-bottom: none; }
.sheet-head .lead { font-size: var(--t-sm); margin: var(--s3) 0 var(--s2); }

/* 請求金額。帳票でいちばん大きい字。ここを見るために紙を開く */
.sheet table.grand { border-collapse: collapse; margin-bottom: 6px; }
.sheet table.grand th {
  text-align: left; font-size: var(--t-sm); font-weight: 700;
  padding: 7px var(--s3); background: #f3f4f5; border: 1px solid #cfd2d6;
}
.sheet table.grand td {
  font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero;
  font-size: var(--t-xl); font-weight: 600; letter-spacing: -.03em;
  padding: 7px var(--s4); border: 1px solid #cfd2d6; text-align: right; min-width: 156px;
}
.sheet .subject { font-size: var(--t-base); margin: 0 0 var(--s2); }

table.sheet-lines { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.sheet-lines th {
  background: #f3f4f5; border: 1px solid #cfd2d6;
  padding: 6px var(--s2); text-align: left;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em;
}
table.sheet-lines td { border: 1px solid #cfd2d6; padding: 6px var(--s2); vertical-align: top; }
table.sheet-lines tr.filler td { height: 27px; }
table.sheet-lines .right, table.sheet-lines th.right { text-align: right; }

.sheet-foot { display: flex; gap: var(--s5); margin-top: var(--s3); align-items: flex-start; }
.sheet-foot .notes { flex: 1 1 auto; font-size: var(--t-xs); }
.sheet-foot .notes .label { font-weight: 700; font-size: var(--t-micro); margin: 0 0 2px; color: #666f7b; }

table.sheet-totals { flex: 0 0 46%; border-collapse: collapse; font-size: var(--t-sm); }
table.sheet-totals th {
  text-align: left; padding: 6px var(--s3); border: 1px solid #cfd2d6;
  background: #f3f4f5; font-weight: 600;
}
table.sheet-totals th.sub, table.sheet-totals td.sub { font-size: var(--t-micro); color: #666f7b; font-weight: 400; }
table.sheet-totals td {
  text-align: right; padding: 6px var(--s3); border: 1px solid #cfd2d6;
  font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero;
}
table.sheet-totals .grand-row th, table.sheet-totals .grand-row td {
  font-size: var(--t-md); font-weight: 700; letter-spacing: -.02em;
}

/* ══════════════════════════════════════════════════════════
   17. 動き

   ページを開いた瞬間の1回だけ。ホバーで拡大したり光ったりはさせない。
   1日に何十回も開く画面なので、毎回の演出はすぐ邪魔になる
   ══════════════════════════════════════════════════════════ */

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .main > .page-head,
  .main > .card,
  .main > .grid,
  .main > .notice,
  .auth-box {
    animation: rise .3s cubic-bezier(.2, .7, .3, 1) both;
  }
  /* 上から順に出す。全部同時に出すと「何かが起きた」だけで内容が入ってこない */
  .main > :nth-child(1) { animation-delay: 0ms; }
  .main > :nth-child(2) { animation-delay: 40ms; }
  .main > :nth-child(3) { animation-delay: 80ms; }
  .main > :nth-child(4) { animation-delay: 120ms; }
  .main > :nth-child(n + 5) { animation-delay: 150ms; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════
   18. 印刷
   ══════════════════════════════════════════════════════════ */

@media print {
  .no-print, .topbar, .sidebar, .sheet-toolbar { display: none !important; }
  body { background: #fff !important; background-image: none !important; color: #000; font-size: 10.5pt; }
  .shell > .body { padding: 0; display: block; }
  .sheet-wrap { padding: 0; display: block; }
  .sheet { width: auto; min-height: 0; border: none; box-shadow: none; padding: 0; }
  .card { box-shadow: none; }
  /* 給与明細をまとめて刷るとき、1人1ページにする */
  .sheet + .sheet { break-before: page; page-break-before: always; }
  table.grid-table .sticky-col, table.payroll-grid .sticky-col { position: static; }
  table.grid-table thead th, table.payroll-grid thead th { position: static; }
  .main > * { animation: none !important; }
  @page { size: A4 portrait; margin: 14mm; }
}

/* ══════════════════════════════════════════════════════════
   19. 狭い画面
   ══════════════════════════════════════════════════════════ */

@media (max-width: 820px) {
  .sheet { width: 100%; min-height: 0; padding: var(--s4); }
  .sheet-head { display: block; }
  .sheet-foot { display: block; }
  table.sheet-totals { width: 100%; margin-top: var(--s3); }
  .page-head h1 { font-size: var(--t-lg); }
  .stat.hero .v { font-size: var(--t-2xl); }
}

/* 認証画面の右側（用件の側） */
.auth-form h2 { font-size: var(--t-lg); margin: 0; letter-spacing: -.02em; }
.auth-form .lead { font-size: var(--t-sm); color: var(--muted); margin: var(--s1) 0 var(--s5); }
.auth-form .notice { margin-bottom: var(--s4); }
.auth-note {
  border-top: 1px solid var(--line-soft);
  margin: var(--s5) 0 0; padding-top: var(--s3);
  font-size: var(--t-xs); color: var(--muted); line-height: 1.8;
}
.auth-note strong { color: var(--ink); }

/* 主役の数値カードは横にも広くとる。字だけ大きくしても「主役」には見えない */
@media (min-width: 900px) {
  .grid.cols-4 > .stat.hero { grid-column: span 2; }
}

/* カードの中でいちばん見せたい1つの数字（今日のシフト・直近の支給額など） */
.lead-num {
  margin: 0;
  font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero;
  font-size: var(--t-xl); font-weight: 600; letter-spacing: -.03em; line-height: 1.2;
}
.lead-num .small { margin-left: var(--s2); letter-spacing: 0; font-family: var(--sans); font-weight: 400; }

/* 印の幅を揃える。揃っていないと、その右にある文章の頭が行ごとにずれて読みにくい */
.todo .row > .chip { min-width: 48px; justify-content: center; flex: none; }

/* 打刻画面の細部。従業員が毎日スマホで開くので、指で押す所以外は静かにする */
.punch-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s3); margin-bottom: var(--s5);
}
.punch-head h1 { font-size: var(--t-lg); margin: 2px 0 0; }
.punch-sub { margin: 2px 0 0; font-size: var(--t-xs); color: var(--muted); }
.punch-foot {
  text-align: center; margin: var(--s6) 0 0;
  font-size: var(--t-xs); color: var(--muted);
}

/* ── はじめに（セットアップの道案内） ── */
.setup-step.is-done { opacity: .78; }
.setup-step.is-done:hover { opacity: 1; }
.setup-head { display: flex; align-items: flex-start; gap: var(--s4); }
.setup-no {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sunken); color: var(--muted);
  font-family: var(--mono); font-size: var(--t-sm); font-weight: 600;
}
.setup-step.is-done .setup-no { background: var(--good-wash); color: var(--good); }
.setup-main { flex: 1 1 auto; min-width: 0; }
.setup-label {
  margin: 3px 0 0; font-size: var(--t-md); font-weight: 700; letter-spacing: -.015em;
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}
.setup-why { margin: var(--s1) 0 0; font-size: var(--t-sm); color: var(--muted); line-height: 1.75; }
.setup-note { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--warn); }
.setup-note.muted { color: var(--muted); }
.setup-list { margin: 0; padding-left: 1.2em; font-size: var(--t-sm); line-height: 1.9; }
.setup-list li + li { margin-top: var(--s2); }

@media (max-width: 640px) {
  .setup-head { flex-wrap: wrap; }
  .setup-head > .btn { margin-left: 40px; }
}

/*
 * 自社の都道府県の行。47件の中で、実際に使うのはこの1行だけ。
 * 左に太い罫を立てて、スクロールしなくても見つかるようにする
 */
tr.is-mine > td:first-child { box-shadow: inset 3px 0 0 var(--accent); font-weight: 700; }