/* ============================================================
   紡 Tsumugi — Stage-A design system (Task D, REVISION 2)
   Direction (Richard): "a modern hospital interface — simple
   enough for older people to navigate, modern enough that kids
   trust the aesthetic."
   - Clinical near-white surfaces, one medical teal-blue accent
     family; semantic green/amber/red reserved for STATUS only.
   - Elderly floors: body >= 18px (JA), line-height >= 1.7,
     tap targets >= 48px, every icon has a visible label.
   - Youth trust: crisp geometry, rounded-16 cards, hairline +
     soft shadow depth, micro-transitions <= 200ms.
   - System fonts only. No external hosts. sessionStorage only.
   All contrast pairs computed >= 4.5:1 (see task-D report).
   ============================================================ */

:root{
  /* -- surfaces ------------------------------------------------ */
  --surface:#fbfcfd;        /* page background */
  --card:#ffffff;           /* card / raised surface */
  --panel:#eef3f6;          /* recessed panel, section separators */

  /* -- text ---------------------------------------------------- */
  --ink:#0f172a;            /* primary text        17.9:1 on card */
  --muted:#475569;          /* secondary text       7.6:1 on card */
  --soft:var(--muted);      /* legacy alias (inline styles) */

  /* -- hairlines ----------------------------------------------- */
  --line:#e3e8ee;           /* 1px hairline */
  --line2:#c6d0da;          /* stronger hairline (inputs, pills) */

  /* -- accent: medical teal-blue (the ONLY brand hue) ---------- */
  --accent:#0e7490;         /* accent-600 — 5.4:1 on white */
  --accent-strong:#0c5a70;  /* accent-700 — 7.7:1 on white */
  --accent-soft:#d9eef5;    /* accent-100 tint */
  --accent-faint:#f0f7fa;   /* accent-50 wash */
  --header-a:#0f6e8c;       /* header gradient start (white 5.8:1) */
  --header-b:#0b4f66;       /* header gradient end   (white 9.0:1) */

  /* -- semantic status (reserved for status meaning ONLY) ------ */
  --ok:#15803d;             /* fills/borders; white on it 5.0:1 */
  --ok-ink:#116d38;         /* text on --ok-bg 5.7:1 */
  --ok-bg:#e8f5ed;
  --warn:#d97706;           /* fills/borders only */
  --warn-ink:#8a5a0a;       /* text on --warn-bg 5.4:1 */
  --warn-bg:#fdf3e0;
  --bad:#b91c1c;            /* 架空症例 banner red; white on it 6.5:1 */
  --bad-ink:#b91c1c;        /* text on --bad-bg 5.7:1 */
  --bad-bg:#fdecec;

  /* -- type scale (JA-first; body floor 18px) ------------------ */
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",
         "Meiryo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-base:18px;           /* elderly readability floor */
  --fs-xl:1.25rem;          /* hero */
  --fs-lg:1.1rem;           /* h2 */
  --fs-body:1rem;           /* 18px */
  --fs-sm:.89rem;           /* 16px — secondary */
  --fs-xs:.78rem;           /* 14px — captions, never below */
  --lh:1.75;                /* JA elderly floor >= 1.7 */
  --lh-tight:1.4;           /* headings */

  /* -- spacing scale ------------------------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* -- shape & depth ------------------------------------------- */
  --r-card:16px;
  --r-ctl:12px;
  --r-pill:999px;
  --shadow-card:0 1px 2px rgba(15,23,42,.04),0 4px 14px rgba(15,23,42,.06);
  --shadow-pop:0 2px 6px rgba(15,23,42,.08),0 10px 28px rgba(15,23,42,.10);

  /* -- motion (micro only, <= 200ms) --------------------------- */
  --t:160ms;
  --ease:cubic-bezier(.2,.6,.3,1);

  /* -- floors --------------------------------------------------- */
  --tap:48px;               /* minimum tap target, both dimensions */
}

/* ==== base ==================================================== */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ font-size:var(--fs-base); }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--surface);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ line-height:var(--lh-tight); }

/* ==== focus: thick, accent, always visible ==================== */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}

/* ==== controls: every button is a real >= 48px target ========= */
button{
  font-family:var(--sans);
  min-height:var(--tap);
  min-width:var(--tap);
  cursor:pointer;
  /* NOTE (Task 9, hardest-mode screenshot review): background-color/color are
     deliberately NOT animated. Family.html's font-size toggle uses
     html:has(body.huge), which forces a full-document reflow on a page this
     dense; when a second toggle (e.g. コントラスト) is tapped immediately
     after, the browser coalesces both style recalcs and the resulting
     color/background-color transition can render white-on-white for several
     hundred ms before settling -- an illegible flash for exactly the elderly
     users this product is for. Border/shadow/transform stay animated (cheap,
     non-legibility-critical, keep the "obvious pressed state" feel). */
  transition:border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease),
             transform var(--t) var(--ease);
}
/* obvious pressed state (elderly feedback) */
button:active{ transform:scale(.97); filter:brightness(.94); }

/* ==== shared components ======================================= */

/* 架空症例 banner — stays red, stays prominent */
.demo-banner{
  background:var(--bad);
  color:#fff;
  text-align:center;
  font-size:var(--fs-xs);
  font-weight:700;
  padding:7px 12px;
  letter-spacing:.02em;
}

/* app frame */
.wrap{
  margin:0 auto;
  min-height:100vh;
  background:var(--surface);
  box-shadow:0 0 0 1px var(--line),0 0 32px rgba(15,23,42,.05);
}

/* page header — calm deep teal, crisp */
header{
  background:linear-gradient(165deg,var(--header-a),var(--header-b));
  color:#fff;
}

/* card primitive: radius 16, hairline + soft shadow */
.t-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
}

/* pill primitive: large labeled pill, >= 48px */
.t-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:var(--tap);
  min-width:var(--tap);
  padding:10px 18px;
  border:1.5px solid var(--line2);
  border-radius:var(--r-pill);
  background:var(--card);
  color:var(--accent-strong);
  font-weight:700;
  font-size:var(--fs-sm);
  line-height:1.3;
}
.t-pill.on{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12);
}

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