/* Hallmark · genre: modern-minimal · macrostructure: Index-First (作業の列＝カードの縦の並び) · theme: Coral（_共通デザイン tokens に合わせて調整）
 * tone: utilitarian · anchor hue: 35（テラコッタ）· enrichment: none · nav: N9 edge-aligned（上の状態の帯）· footer: none（下に固定の指示欄）
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4
 * 土台：C:\システム管理\_共通デザイン\tokens.css の考え方（余白8px基準・薄線＋影・色は3〜4色）。iPhone 1画面・片手・文字は大きめ。
 */

/* ---------- トークン（色はここだけで決める。下では名前で使う） ---------- */
:root {
  color-scheme: light dark;
  --paper:      oklch(97.6% 0.006 75);   /* 地 */
  --surface:    oklch(99.6% 0.002 75);   /* カード */
  --ink:        oklch(23% 0.012 255);    /* 本文 */
  --ink-soft:   oklch(38% 0.012 255);
  --muted:      oklch(52% 0.012 255);
  --line:       oklch(90% 0.006 75);
  --line-soft:  oklch(94% 0.005 75);
  --accent:     oklch(55% 0.135 35);     /* 主役（おすすめ・主なボタン）。使うのは少しだけ */
  --accent-ink: oklch(99% 0.005 35);
  --accent-soft:oklch(94% 0.03 35);
  --ok:         oklch(52% 0.12 150);
  --bad:        oklch(53% 0.17 27);
  --bad-soft:   oklch(95% 0.03 27);
  --wait:       oklch(55% 0.09 250);
  --focus:      oklch(55% 0.16 250);
  --backdrop:   oklch(15% 0.01 255 / .45);   /* 下から出る設定の後ろ */
  --cam-bg:     oklch(12% 0.006 255);        /* カメラの画面 */
  --cam-ink:    oklch(97% 0.004 255);
  /* 案件の色分け（小さな札だけに使う・彩度は低め） */
  --case0-bg: oklch(93% 0.035 250); --case0-ink: oklch(38% 0.09 250);
  --case1-bg: oklch(93% 0.04 150);  --case1-ink: oklch(37% 0.08 150);
  --case2-bg: oklch(93% 0.04 300);  --case2-ink: oklch(40% 0.1 300);
  --case3-bg: oklch(93% 0.05 75);   --case3-ink: oklch(40% 0.08 70);

  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-base: 1.0625rem; --fs-lg: 1.1875rem; --fs-xl: 1.375rem;
  --leading: 1.7; --leading-tight: 1.35;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --radius-sm: 10px; --radius: 16px; --radius-full: 999px;
  --shadow: 0 1px 2px oklch(20% 0.01 255 / .05), 0 4px 14px oklch(20% 0.01 255 / .05);
  --tap: 48px;                              /* 指で押す物の最小の高さ */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:      oklch(17% 0.01 255);
    --surface:    oklch(21.5% 0.012 255);
    --ink:        oklch(93% 0.006 255);
    --ink-soft:   oklch(82% 0.008 255);
    --muted:      oklch(68% 0.01 255);
    --line:       oklch(30% 0.012 255);
    --line-soft:  oklch(25% 0.012 255);
    --accent:     oklch(72% 0.12 38);
    --accent-ink: oklch(18% 0.02 38);
    --accent-soft:oklch(30% 0.05 38);
    --ok:         oklch(74% 0.13 150);
    --bad:        oklch(70% 0.15 27);
    --bad-soft:   oklch(29% 0.06 27);
    --wait:       oklch(74% 0.09 250);
    --focus:      oklch(76% 0.13 250);
    --case0-bg: oklch(31% 0.05 250); --case0-ink: oklch(86% 0.06 250);
    --case1-bg: oklch(31% 0.05 150); --case1-ink: oklch(86% 0.07 150);
    --case2-bg: oklch(31% 0.06 300); --case2-ink: oklch(87% 0.07 300);
    --case3-bg: oklch(32% 0.05 75);  --case3-ink: oklch(88% 0.07 80);
    --shadow: 0 1px 2px oklch(8% 0.01 255 / .35);
  }
}

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--askbar, 96px) + env(safe-area-inset-bottom, 0px));
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { line-height: var(--leading-tight); margin: 0; font-weight: 700; font-style: normal; }
p { margin: 0; }

/* ---------- 上の状態の帯 ---------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: calc(env(safe-area-inset-top, 0px) + var(--sp-2)) var(--sp-4) var(--sp-2);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.pc { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--ink-soft); }
.pc-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.pc[data-tone="ok"] .dot { background: var(--ok); }
.pc[data-tone="bad"] .dot { background: var(--bad); }
.pc[data-tone="bad"] { color: var(--bad); font-weight: 700; }
.pc[data-tone="rest"] .dot { background: var(--muted); }

/* ---------- ボタン ---------- */
.btn {
  min-height: var(--tap); padding: 0 var(--sp-4); border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  text-decoration: none;
  transition: background var(--dur) var(--ease-out), transform 80ms var(--ease-out);
}
@media (hover: hover) { .btn:hover { background: var(--line-soft); } .btn-main:hover { background: var(--accent); filter: brightness(.96); } }
.btn:active { transform: translateY(1px); background: var(--line-soft); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-main { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn-main:active { background: var(--accent); filter: brightness(.94); }
.btn-small { min-height: 40px; padding: 0 var(--sp-3); }
.btn-quiet { background: transparent; }
.btn-danger { color: var(--bad); }
.btn[data-armed="1"] { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.btn[data-state="done"] { color: var(--ok); border-color: var(--ok); }
.icon-btn { width: var(--tap); padding: 0; font-size: 1.25rem; line-height: 1; }

/* ---------- 一覧 ---------- */
main { padding: var(--sp-4); display: grid; gap: var(--sp-4); max-width: 640px; margin: 0 auto; }
.empty { padding: var(--sp-7) var(--sp-2); color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.notice { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--bad-soft);
  color: var(--ink); font-size: var(--fs-sm); }
.notice .btn { margin-top: var(--sp-2); }

/* ---------- 案件カード ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--sp-4); display: grid; gap: var(--sp-3);
  scroll-margin-top: 72px;
}
.card[data-flash="1"] { outline: 3px solid var(--focus); outline-offset: 2px; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs); color: var(--muted); }
.case { display: inline-flex; align-items: center; padding: 0 var(--sp-3); line-height: 1.8; border-radius: var(--radius-full);
  font-weight: 700; font-size: var(--fs-xs); background: var(--case0-bg); color: var(--case0-ink); }
.case[data-c="1"] { background: var(--case1-bg); color: var(--case1-ink); }
.case[data-c="2"] { background: var(--case2-bg); color: var(--case2-ink); }
.case[data-c="3"] { background: var(--case3-bg); color: var(--case3-ink); }
.talk { color: var(--ink-soft); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.when { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary { font-size: var(--fs-lg); line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.need { font-size: var(--fs-sm); color: var(--ink-soft); }
.need b { color: var(--accent); }
.note { font-size: var(--fs-sm); color: var(--muted); }
.err { font-size: var(--fs-sm); color: var(--bad); }
.busy { font-size: var(--fs-sm); color: var(--wait); font-weight: 600; display: flex; gap: var(--sp-2); align-items: center; }
.busy::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wait); flex: none;
  animation: blink 1.4s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .25; } }

.opts { display: grid; gap: var(--sp-2); }
.opt { justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.5;
  padding: var(--sp-2) var(--sp-4); font-weight: 500; font-size: var(--fs-base); }
.opt .rec { flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--accent);
  border: 1px solid currentColor; border-radius: var(--radius-full); padding: 0 var(--sp-2); }
.opt[data-rec="1"] { border-color: var(--accent); }

.facts { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
.facts li { color: var(--ink-soft); overflow-wrap: anywhere; }
.facts .warn { color: var(--bad); font-size: var(--fs-xs); }

.field-label { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; display: flex; gap: var(--sp-2); }
textarea {
  width: 100%; resize: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); padding: var(--sp-3); line-height: 1.65; font-size: var(--fs-base);
  overflow-y: hidden; display: block;
}
textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
textarea[readonly] { color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.row > .btn { flex: 1 1 auto; }
.fix { display: grid; gap: var(--sp-2); }
.done-row { padding-top: var(--sp-2); border-top: 1px solid var(--line-soft); }

details.raw { font-size: var(--fs-sm); }
details.raw > summary { min-height: 40px; display: flex; align-items: center; color: var(--muted); cursor: pointer; }
.msgs { margin: var(--sp-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.msgs li { overflow-wrap: anywhere; white-space: pre-wrap; }
.msgs .who { display: block; font-size: var(--fs-xs); color: var(--muted); }
.msgs .att { display: block; font-size: var(--fs-xs); color: var(--ink-soft); }

/* ---------- 指示と答え・表に無いトーク ---------- */
.section-title { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; padding: var(--sp-2) 0 0; }
.qa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4);
  display: grid; gap: var(--sp-2); }
.qa .q { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }
.qa .a { overflow-wrap: anywhere; white-space: pre-wrap; }
.unk { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-soft); }

/* ---------- 下に固定の指示欄 ---------- */
.askbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
}
.askbar form { display: flex; gap: var(--sp-2); align-items: flex-end; max-width: 640px; margin: 0 auto; }
.askbar textarea { flex: 1 1 auto; min-width: 0; background: var(--surface); padding: var(--sp-2) var(--sp-3); }
.askbar .hint { font-size: var(--fs-xs); color: var(--muted); max-width: 640px; margin: 0 auto var(--sp-1); }

/* ---------- 登録の画面・設定 ---------- */
.setup { display: grid; gap: var(--sp-4); padding: var(--sp-5) var(--sp-1); }
.setup h1 { font-size: var(--fs-xl); }
.setup ol { margin: 0; padding-left: 1.4em; display: grid; gap: var(--sp-2); }
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--backdrop);
  display: flex; align-items: flex-end; }
.sheet-body { width: 100%; max-height: 85vh; overflow-y: auto; background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0; padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  display: grid; gap: var(--sp-4); }
.sheet-body h2 { font-size: var(--fs-lg); }
.dev { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-soft); }
.dev-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); }
.dev-name small { display: block; color: var(--muted); font-size: var(--fs-xs); }

.scanner { position: fixed; inset: 0; z-index: 50; background: var(--cam-bg); color: var(--cam-ink);
  display: grid; grid-template-rows: 1fr auto; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner-foot { padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--sp-3); }
.scanner-foot p { font-size: var(--fs-sm); }

.toast { position: fixed; left: 50%; transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px);
  bottom: calc(var(--askbar, 96px) + env(safe-area-inset-bottom, 0px) + var(--sp-2));
  background: var(--ink); color: var(--paper); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full);
  font-size: var(--fs-sm); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out); }
.toast[data-on="1"] { opacity: 1; }

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