:root{--indigo-7:#4263eb;--purple-7:#ae3ec9;--gray-12:#030507;--gray-7:#495057;--gray-0:#f8f9fa;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--font-system-ui:system-ui, sans-serif;--font-lineheight-3:1.5;--red-6:#fa5252;--red-3:#ffa8a8;--gray-6:#868e96;--indigo-3:#91a7ff;--purple-3:#e599f7;--gray-1:#f1f3f5;--gray-9:#212529;--gray-8:#343a40;--ease-2:cubic-bezier(.25, 0, .4, 1);--font-weight-9:900;--font-lineheight-1:1.25;--font-size-8:3.5rem;--size-header-1:20ch;--font-size-6:2.5rem;--size-header-2:25ch;--font-size-5:2rem;--font-size-4:1.5rem;--font-size-3:1.25rem;--size-header-3:35ch;--font-size-2:1.1rem;--indigo-2:#bac8ff;--purple-2:#eebefa;--size-1:.25rem;--size-2:.5rem;--size-relative-4:1.25ch;--radius-2:5px;--size-content-1:20ch;--size-3:1rem;--size-10:5rem;--font-monospace-code:Dank Mono,Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;--border-size-1:1px;--size-8:3rem;--size-content-2:45ch;--size-content-3:60ch;--font-weight-7:700;--size-5:1.5rem;--font-size-0:.75rem;--border-size-2:2px;--size-fluid-5:clamp(4rem, 5vw, 5rem);--font-size-1:1rem;--border-size-3:5px;--size-4:1.25rem;--red-9:#c92a2a;--red-2:#ffc9c9;--green-9:#2b8a3e;--green-1:#d3f9d8;--blue-5:#339af0;--radius-3:1rem;--shadow-6:
    0 -1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 3px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 7px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 12px 10px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)),
    0 22px 18px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)),
    0 41px 33px -2px hsl(var(--shadow-color) / var(--shadow-strength-7)),
    0 100px 80px -2px hsl(var(--shadow-color) / var(--shadow-strength-8));--font-lineheight-0:1.1;--font-lineheight-2:1.375;--font-lineheight-4:1.75;--green-10:#237032;--green-8:#2f9e44;--yellow-11:#804200;--yellow-1:#fff3bf;--yellow-8:#f08c00;--red-10:#b02525;--red-1:#ffe3e3;--red-8:#e03131;--orange-11:#99330b;--orange-1:#ffe8cc;--orange-8:#e8590c;--gray-5:#adb5bd;--blue-8:#1971c2;--shadow-2:
    0 3px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 7px 14px -5px hsl(var(--shadow-color) / var(--shadow-strength-6));--gray-10:#16191d;--gray-11:#0d0f12;--indigo-4:#748ffc;--green-3:#8ce99a;--green-12:#133d1b;--green-4:#69db7c;--yellow-3:#ffe066;--yellow-12:#663500;--yellow-4:#ffd43b;--red-12:#7d1a1a;--red-4:#ff8787;--orange-3:#ffc078;--orange-12:#802b09;--orange-4:#ffa94d;--blue-4:#4dabf7;--font-sans:var(--font-system-ui);--font-weight-6:600;--size-6:1.75rem;--size-7:2rem;--radius-round:1e5px;--font-weight-5:500;--shadow-3:
    0 -1px 3px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 1px 2px -5px hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 2px 5px -5px hsl(var(--shadow-color) / var(--shadow-strength-5)),
    0 4px 12px -5px hsl(var(--shadow-color) / var(--shadow-strength-6)),
    0 12px 15px -5px hsl(var(--shadow-color) / var(--shadow-strength-8));--font-weight-4:400;--ease-3:cubic-bezier(.25, 0, .3, 1);--shadow-color:220 3% 15%;--shadow-strength-3:calc(var(--shadow-strength) + 2%);--shadow-strength-4:calc(var(--shadow-strength) + 3%);--shadow-strength-5:calc(var(--shadow-strength) + 4%);--shadow-strength-6:calc(var(--shadow-strength) + 5%);--shadow-strength-7:calc(var(--shadow-strength) + 6%);--shadow-strength-8:calc(var(--shadow-strength) + 7%);--shadow-strength:1%}/*
 * CSS のエントリポイント。postcss-import がこの順で 1 本にまとめ、
 * そのあと postcss-jit-props が実際に参照している Open Props のトークンだけを注入する。
 * 出力は app/assets/builds/application.css。
 */:where(html){--csstools-color-scheme--light:initial;--link:var(--indigo-7);--link-visited:var(--purple-7);--text-1:var(--gray-12);--text-2:var(--gray-7);--surface-1:var(--gray-0);--surface-2:var(--gray-2);--surface-3:var(--gray-3);--surface-4:var(--gray-4);--scrollthumb-color:var(--gray-7);-webkit-text-size-adjust:none;accent-color:var(--brand,var(--link));background-color:var(--surface-1);block-size:100%;caret-color:var(--brand,var(--link));color:var(--text-1);color-scheme:light;font-family:var(--font-system-ui);line-height:var(--font-lineheight-3);scrollbar-color:var(--scrollthumb-color) transparent}@media (dynamic-range:high) or (color-gamut:p3){@supports (color:color(display-p3 0 0 0)){:where(html){--link:color(display-p3 .1 .39 1);--link-visited:color(display-p3 .6 .2 1)}}}:where(html) :where(dialog){background-color:var(--surface-1)}:where(html) :where(button,.btn){--_highlight:var(--_highlight-light);--_bg:var(--_bg-light);--_ink-shadow:var(--_ink-shadow-light)}:where(html) :where(button,.btn) :where([type=reset]){--_text:var(--red-6);--_border:var(--red-3)}:where(html) [disabled]:where(button,input[type=button],.btn){--_text:var(--gray-6)}:where(html) [disabled]:where(button,input[type=submit],.btn){--_text:var(--gray-6)}:where(html) [disabled]:where(button,input[type=reset],.btn){--_text:var(--gray-6)}:where(html) :where(textarea,select,input:not([type=button],[type=submit],[type=reset])){background-color:var(--surface-2)}@media (prefers-color-scheme:dark){:where(html){--csstools-color-scheme--light: ;--link:var(--indigo-3);--link-visited:var(--purple-3);--text-1:var(--gray-1);--text-2:var(--gray-4);--surface-1:var(--gray-9);--surface-2:var(--gray-8);--surface-3:var(--gray-7);--surface-4:var(--gray-6);--scrollthumb-color:var(--gray-6);--shadow-strength:10%;--shadow-color:220 40% 2%;color-scheme:dark}}:where(a[href]){color:var(--brand,var(--link))}:where(a[href]):where(:visited){color:var(--link-visited)}:focus-visible{outline-color:var(--brand,var(--link))}*,:after,:before{box-sizing:border-box}:where(:not(dialog)){margin:0}:where(:not(fieldset,progress,meter)){background-origin:border-box;background-repeat:no-repeat;border-style:solid;border-width:0}@media (prefers-reduced-motion:no-preference){:where(html){scroll-behavior:smooth}}@media (prefers-reduced-motion:no-preference){:where(:focus-visible){transition:outline-offset 145ms var(--ease-2)}:where(:not(:active):focus-visible){transition-duration:.25s}}:where(:not(:active):focus-visible){outline-offset:5px}:where(body){min-block-size:100%}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance;font-weight:var(--font-weight-9);line-height:var(--font-lineheight-1)}:where(h1){font-size:var(--font-size-8);max-inline-size:var(--size-header-1)}:where(h2){font-size:var(--font-size-6);max-inline-size:var(--size-header-2)}:where(h3){font-size:var(--font-size-5)}:where(h4){font-size:var(--font-size-4)}:where(h5){font-size:var(--font-size-3)}:where(h3,h4,h5,h6,dt){max-inline-size:var(--size-header-3)}:where(p,ul,ol,dl,h6){font-size:var(--font-size-2)}:where(a,u,ins,abbr){text-underline-offset:1px}@supports (-moz-appearance:none){:where(a,u,ins,abbr){text-underline-offset:2px}}:where(a[href],area,button,input:not([type=text],[type=email],[type=number],[type=password],[type=""],[type=tel],[type=url]),label[for],select,summary,[tabindex]:not([tabindex*="-"],pre)){cursor:pointer}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){-webkit-tap-highlight-color:transparent;touch-action:manipulation}:where(a):where([href]){text-decoration-color:var(--indigo-2)}:where(a):where([href]):where(:visited){text-decoration-color:var(--purple-2)}:where(a):where(:not(:hover)){text-decoration:inherit}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(input,button,textarea,select),:where(input[type=file])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}::placeholder{color:var(--gray-7);opacity:.75}:where(input:not([type=range]),textarea){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(select){field-sizing:content;padding-block:.75ch;padding-inline:var(--size-relative-4) 0}:where(textarea,select,input:not([type=button],[type=submit],[type=reset])){background-color:var(--surface-2);border-radius:var(--radius-2)}:where(textarea){field-sizing:content;min-block-size:2lh;min-inline-size:var(--size-content-1);resize:vertical}:where(input[type=checkbox],input[type=radio]){block-size:var(--size-3);inline-size:var(--size-3)}:where(svg:not([width])){inline-size:var(--size-10)}:where(code,kbd,samp,pre){font-family:var(--font-monospace-code),monospace}:where(:not(pre)>code,kbd){white-space:nowrap}:where(pre){direction:ltr;max-inline-size:max-content;min-inline-size:0;white-space:pre;writing-mode:lr}:where(:not(pre)>code){background:var(--surface-2);border-radius:var(--radius-2);padding:var(--size-1) var(--size-2);writing-mode:lr}:where(kbd,var){border-color:var(--surface-4);border-radius:var(--radius-2);border-width:var(--border-size-1);padding:var(--size-1) var(--size-2)}:where(mark){border-radius:var(--radius-2);padding-inline:var(--size-1)}:where(ol,ul){padding-inline-start:var(--size-8)}:where(li){padding-inline-start:var(--size-2)}:where(li,dd,figcaption){max-inline-size:var(--size-content-2)}:where(p){text-wrap:pretty;max-inline-size:var(--size-content-3)}:where(dt,summary){font-weight:var(--font-weight-7)}:where(dt:not(:first-of-type)){margin-block-start:var(--size-5)}:where(small){font-size:max(.5em,var(--font-size-0));max-inline-size:var(--size-content-1)}:where(hr){background-color:var(--surface-3);height:var(--border-size-2);margin-block:var(--size-fluid-5)}:where(figure){display:grid;gap:var(--size-2);place-items:center}:where(figure)>:where(figcaption){text-wrap:balance;font-size:var(--font-size-1)}:where(blockquote,:not(blockquote)>cite){border-inline-start-width:var(--border-size-3)}:where(blockquote){display:grid;gap:var(--size-3);max-inline-size:var(--size-content-2);padding-block:var(--size-3);padding-inline:var(--size-4)}:where(:not(blockquote)>cite){padding-inline-start:var(--size-2)}:where(summary){background:var(--surface-3);border-radius:var(--radius-2);margin:calc(var(--size-2)*-1) calc(var(--size-3)*-1);padding:var(--size-2) var(--size-3)}:where(details){background:var(--surface-2);border-radius:var(--radius-2);padding-block:var(--size-2);padding-inline:var(--size-3)}:where(details[open]>summary){border-end-end-radius:0;border-end-start-radius:0;margin-bottom:var(--size-2)}:where(fieldset){border:var(--border-size-1) solid var(--surface-4);border-radius:var(--radius-2)}:where(del){background:var(--red-9);color:var(--red-2)}:where(ins){background:var(--green-9);color:var(--green-1)}:where(abbr){text-decoration-color:var(--blue-5)}:where(dialog){background-color:var(--surface-1);border-radius:var(--radius-3);box-shadow:var(--shadow-6);color:inherit}:where(menu){display:flex;gap:var(--size-3);padding-inline-start:0}:where(sup){font-size:.5em}:where(table){--nice-inner-radius:calc(var(--radius-3) - 2px);background:var(--surface-2);border:1px solid var(--surface-2);border-radius:var(--radius-3);width:fit-content}:where(table:not(:has(tfoot)) tr:last-child td:first-child){border-end-start-radius:var(--nice-inner-radius)}:where(table:not(:has(tfoot)) tr:last-child td:last-child){border-end-end-radius:var(--nice-inner-radius)}:where(table thead tr:first-child th:first-child){border-start-start-radius:var(--nice-inner-radius)}:where(table thead tr:first-child th:last-child){border-start-end-radius:var(--nice-inner-radius)}:where(tfoot tr:last-child th:first-of-type){border-end-start-radius:var(--nice-inner-radius)}:where(tfoot tr:last-child td:first-of-type){border-end-start-radius:var(--nice-inner-radius)}:where(tfoot tr:last-child th:last-of-type){border-end-end-radius:var(--nice-inner-radius)}:where(tfoot tr:last-child td:last-of-type){border-end-end-radius:var(--nice-inner-radius)}:where(th){background-color:var(--surface-2);color:var(--text-1)}:where(table a:not(.does-not-exist):focus-visible){outline-offset:-2px}:where(table button:not(.does-not-exist):focus-visible){outline-offset:-2px}:where(table [contenteditable]:focus-visible){outline-offset:-2px}:where(td){text-wrap:pretty;background:var(--surface-1);max-inline-size:var(--size-content-2)}:where(td,th){padding:var(--size-2);text-align:left}:where(td:not([align])){text-align:center}:where(th:not([align])){text-align:center}:where(thead){border-collapse:collapse}:where(table tr:hover td),:where(tbody tr:nth-child(2n):hover td){background-color:var(--surface-3)}:where(table>caption){margin:var(--size-3)}:where(tfoot button){padding-block:var(--size-1);padding-inline:var(--size-3)}@media (prefers-color-scheme:dark){:where(textarea,select,input:not([type=button],[type=submit],[type=reset])){background-color:#171a1c}:where(dialog){background-color:var(--surface-2)}::placeholder{color:var(--gray-6)}}/*
 * アプリ全体のデザイントークンと土台のレイアウト。
 * 値の根拠と使い分けは DESIGN.md に書いてある。ここを触るときは向こうも直すこと。
 *
 * 色・余白は Open Props のカスタムプロパティを参照し、
 * アプリ固有の意味づけ（面の色・状態色・文字の役割）だけをここで定義する。
 */

:root {
  color-scheme: light dark;

  /* --- フォント（DESIGN.md §4.1 / §4.2）--------------------------------- */

  /*
   * 和文の描画をブラウザ既定に任せない。Yu Gothic Medium を Yu Gothic より
   * 先に置くのは、Windows の游ゴシック Regular が画面上で細すぎるため。
   */
  --font-ja:
    "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "BIZ UDPGothic", "Noto Sans JP",
    "Yu Gothic Medium", "Yu Gothic", Meiryo;

  /* 欧文が先、和文が後。逆にすると AST や HbA1c まで和文の字形で出る */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    var(--font-ja), sans-serif;

  /* --- 文字の役割（DESIGN.md §4.4）------------------------------------- */

  /*
   * 値はできる限り Open Props のトークンを参照する。参照できないものだけ実数で置き、
   * なぜ置けないのかを各行に書く。コンポーネントからは --type-* だけを見ること
   * （--font-size-* を直接参照しない）。
   *
   * Open Props の font-size は .75rem の次が 1rem、lineheight は 1.5 の次が 1.75 で、
   * 和文の密度域（13〜14px）と中間の行間に段がない。そこだけ実数になる。
   */
  --type-metric-size: var(--font-size-5);          /* 2rem / 32px  測定値。画面でいちばん大きい */
  --type-metric-line: var(--font-lineheight-0);    /* 1.1 */
  --type-metric-sm-size: 1.375rem;                 /* 22px  OP は 1.25rem の次が 1.5rem */
  --type-metric-sm-line: var(--font-lineheight-1); /* 1.25 */
  --type-h1-size: 1.625rem;                        /* 26px  OP は 1.5rem の次が 2rem */
  --type-h1-line: var(--font-lineheight-2);        /* 1.375 */
  --type-h2-size: var(--font-size-2);              /* 1.1rem / 17.6px  カテゴリ見出し */
  --type-h2-line: var(--font-lineheight-3);        /* 1.5 */
  --type-h3-size: var(--font-size-1);              /* 1rem / 16px  カードの項目名 */
  --type-h3-line: 1.6;                             /* OP は 1.5 の次が 1.75。和文の中間が要る */
  --type-body-size: var(--font-size-1);            /* 1rem / 16px  本文・説明・所見 */
  --type-body-line: var(--font-lineheight-4);      /* 1.75 */
  --type-dense-size: 0.875rem;                     /* 14px  OP は .75rem の次が 1rem */
  --type-dense-line: 1.6;                          /* 同上。1.5 では和文の表が詰まる */
  --type-label-size: 0.8125rem;                    /* 13px  同上 */
  --type-label-line: var(--font-lineheight-3);     /* 1.5 */
  --type-caption-size: 0.8125rem;                  /* 13px  同上 */
  --type-caption-line: var(--font-lineheight-4);   /* 1.75 */

  /*
   * 和文の行長。全角 38 文字。Open Props の --size-content-* は ch 単位で、
   * 欧文の「0」の幅が基準になるため和文には使えない（DESIGN.md §4.5）。
   */
  --measure-ja: 38em;

  /* 最小タップ領域。デザインスケールではなくプラットフォームの定数（44px） */
  --tap-min: 2.75rem;

  /* --- 面と文字（DESIGN.md §3.1）--------------------------------------- */

  --app-surface: var(--gray-0);
  --app-surface-raised: white;
  --app-surface-sunken: var(--gray-1);
  --app-border: var(--gray-3);
  --app-text: var(--gray-9);
  /* gray-6 は白地で 3.32:1 しかなく AA を満たさない。gray-7 で 8.18:1 */
  --app-text-muted: var(--gray-7);
  --app-accent: var(--indigo-7);
  --app-accent-contrast: white;

  /* --- 状態色（DESIGN.md §3.2）----------------------------------------- */

  /*
   * ink（文字）・surface（地）・mark（帯や線）で必要なコントラストが違うので
   * 3 役に分ける。1 トークンで兼ねると、図として成立する明るさを 13px の
   * 文字に流用してしまう。
   */
  --status-normal-ink: var(--green-10);
  --status-normal-surface: var(--green-1);
  --status-normal-mark: var(--green-8);

  --status-caution-ink: var(--yellow-11);
  --status-caution-surface: var(--yellow-1);
  /*
   * ここだけ mark の 3:1 を満たさない（2.36）。3:1 に届かせるには yellow-10 まで
   * 暗くする必要があり、その明度では琥珀・茶に見えて「注意」の語彙を失う。
   * 緑・赤・灰の帯と並んだときの調和を優先し、帯単体の視認性は落とした。DESIGN.md §3.2。
   */
  --status-caution-mark: var(--yellow-8);

  --status-abnormal-ink: var(--red-10);
  --status-abnormal-surface: var(--red-1);
  --status-abnormal-mark: var(--red-8);

  --status-warning-ink: var(--orange-11);
  --status-warning-surface: var(--orange-1);
  --status-warning-mark: var(--orange-8);

  --status-unknown-ink: var(--gray-7);
  --status-unknown-surface: var(--gray-1);
  --status-unknown-mark: var(--gray-5);

  /* --- 増減（DESIGN.md §3.3）------------------------------------------- */

  /* 方向だけを示す。増えたことの良し悪しは項目によって違うので色で示さない */
  --trend-up: var(--red-9);
  --trend-down: var(--blue-8);
  --trend-flat: var(--gray-7);

  /* --- 形・余白 -------------------------------------------------------- */

  --app-radius: var(--radius-3);
  --app-shadow: var(--shadow-2);
  --app-max-width: 72rem;
  /* Open Props は 8px の次が 16px。カード内のブロック間に 12px が要る */
  --space-3h: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --app-surface: var(--gray-10);
    --app-surface-raised: var(--gray-9);
    --app-surface-sunken: var(--gray-11);
    --app-border: var(--gray-8);
    --app-text: var(--gray-1);
    --app-text-muted: var(--gray-5);
    --app-accent: var(--indigo-4);
    --app-accent-contrast: var(--gray-12);

    /* 暗い地の上では ink を 1 段明るくする（5.6〜12.8:1） */
    --status-normal-ink: var(--green-3);
    --status-normal-surface: var(--green-12);
    --status-normal-mark: var(--green-4);

    --status-caution-ink: var(--yellow-3);
    --status-caution-surface: var(--yellow-12);
    --status-caution-mark: var(--yellow-4);

    --status-abnormal-ink: var(--red-3);
    --status-abnormal-surface: var(--red-12);
    --status-abnormal-mark: var(--red-4);

    --status-warning-ink: var(--orange-3);
    --status-warning-surface: var(--orange-12);
    --status-warning-mark: var(--orange-4);

    --status-unknown-ink: var(--gray-4);
    --status-unknown-surface: var(--gray-11);
    --status-unknown-mark: var(--gray-6);

    --trend-up: var(--red-4);
    --trend-down: var(--blue-4);
    --trend-flat: var(--gray-5);
  }
}

/* --- 和文の組版（DESIGN.md §5）----------------------------------------- */

/*
 * word-break: break-all は使わない。和文が文節の途中で折れて読めなくなる。
 * 長い英数字（項目コードやエイリアス）は overflow-wrap で折る。
 */
html:lang(ja) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}

/*
 * 段階的強化。未対応のブラウザでは何も起きないだけで、レイアウトは壊れない。
 * これらの詰めを前提にした余白設計はしない。
 */
@supports (text-autospace: normal) {
  html:lang(ja) {
    text-autospace: normal;
  }
}

/* 見出しは文節で折る。対応していなければ normal のまま */
:lang(ja) :is(h1, h2, h3, .page-title, .checkup-header__date) {
  word-break: auto-phrase;
}

body {
  background-color: var(--app-surface);
  color: var(--app-text);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  text-rendering: optimizeLegibility;
}

/*
 * Open Props の normalize は p を 1.1rem・60ch に固定する。和文の本文サイズと
 * 行長はこちらで決めるので、既定を外して必要な箇所にだけ --measure-ja を掛ける。
 */
p {
  font-size: inherit;
  max-inline-size: none;
}

/* 数字は桁で揃える。年ごとに並ぶ値がずれると比較できない */
:is(.number, .metric, time, td, th, dd) {
  font-variant-numeric: tabular-nums;
}

/* --- 動きとフォーカス（DESIGN.md §10）------------------------------------ */

/*
 * Open Props の normalize が :where(html) に scroll-behavior: smooth を当てている。
 * Turbo はページ遷移のたびに先頭へスクロールするので、そのままだと遷移のたびに
 * 画面が縦にゆっくり流れる。ページ遷移にアニメーションは付けないので打ち消す。
 */
html {
  scroll-behavior: auto;
}

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

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

/* --- 土台のレイアウト --------------------------------------------------- */

.app-header {
  border-block-end: var(--border-size-1) solid var(--app-border);
  background-color: var(--app-surface-raised);
}

.app-header > .inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-3);
  align-items: baseline;
  justify-content: space-between;
  max-inline-size: var(--app-max-width);
  margin-inline: auto;
  padding: var(--size-3) var(--size-4);
}

.app-header .brand {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: var(--font-weight-7);
  color: var(--app-text);
  text-decoration: none;
}

.app-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2);
  align-items: baseline;
}

.app-nav a,
.app-nav button {
  /* タップ領域を 44px 確保する。見た目は文字だけ */
  display: inline-flex;
  align-items: center;
  flex: none;
  min-block-size: var(--tap-min);
  padding-inline: var(--size-2);
  /* 縮んで「直近の結 / 果」と割れるのを防ぐ。入らなければ行を折る */
  white-space: nowrap;
  color: var(--app-text-muted);
  font-size: var(--type-dense-size);
  line-height: var(--type-dense-line);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

.app-nav a:hover,
.app-nav button:hover,
.app-nav a[aria-current="page"] {
  color: var(--app-accent);
}

.app-nav a[aria-current="page"] {
  font-weight: var(--font-weight-6);
}

.app-main {
  max-inline-size: var(--app-max-width);
  margin-inline: auto;
  padding: var(--size-5) var(--size-4) var(--size-8);
  display: grid;
  gap: var(--size-6);
}

.page-title {
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  font-weight: var(--font-weight-7);
  margin-block-end: var(--size-2);
}

/*
 * ネイティブアプリはツールバーに <title> をそのまま出すので、本文の見出しは
 * 同じ文字の繰り返しになる。見出しだけを消し、説明文（.page-subtitle）は残す。
 */
body.native-app .page-title {
  display: none;
}

/* 見出ししか入っていない塊は、見出しを消すと空の行が1つ残る（受診回の詳細） */
body.native-app .app-main > div:has(> .page-title:only-child) {
  display: none;
}

.page-subtitle {
  color: var(--app-text-muted);
  font-size: var(--type-dense-size);
  line-height: var(--type-dense-line);
  max-inline-size: var(--measure-ja);
}

.flash {
  border-radius: var(--app-radius);
  padding: var(--size-3) var(--size-4);
  font-size: var(--type-dense-size);
  line-height: var(--type-dense-line);
  border: var(--border-size-1) solid var(--app-border);
  background-color: var(--app-surface-raised);
}

.flash.alert {
  border-color: var(--status-abnormal-mark);
  color: var(--status-abnormal-ink);
  background-color: var(--status-abnormal-surface);
}

.empty-state {
  border: var(--border-size-2) dashed var(--app-border);
  border-radius: var(--app-radius);
  padding: var(--size-7) var(--size-4);
  text-align: center;
  color: var(--app-text-muted);
  display: grid;
  gap: var(--size-2);
  font-size: var(--type-dense-size);
  line-height: var(--type-dense-line);
}

.card-surface {
  background-color: var(--app-surface-raised);
  border: var(--border-size-1) solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-1) var(--size-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-list li {
  /* Open Props の normalize が li に付ける字下げと行長上限を外す */
  padding-inline-start: 0;
  max-inline-size: none;
}

.link-list a {
  /* 受診日の切り替えチップ。タップ領域を 44px 確保する */
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding: 0 var(--size-3);
  border-radius: var(--radius-round);
  border: var(--border-size-1) solid var(--app-border);
  background-color: var(--app-surface-raised);
  color: var(--app-text);
  font-size: var(--type-dense-size);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
}

.link-list a[aria-current="page"] {
  border-color: var(--app-accent);
  color: var(--app-accent);
  font-weight: var(--font-weight-6);
}

/*
 * 基準値との比較結果。色だけでなく必ず文言を伴う（DESIGN.md §7.2）。
 * 文字は ink、地は surface。この組み合わせで 5.3〜7.4:1 を確保している。
 */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--size-1);
  padding: var(--size-1) var(--size-2);
  border-radius: var(--radius-round);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--font-weight-6);
  white-space: nowrap;
  color: var(--status-unknown-ink);
  background-color: var(--status-unknown-surface);
}

.status-pill[data-status="normal"] {
  color: var(--status-normal-ink);
  background-color: var(--status-normal-surface);
}

.status-pill[data-status="caution"] {
  color: var(--status-caution-ink);
  background-color: var(--status-caution-surface);
}

.status-pill[data-status="abnormal"] {
  color: var(--status-abnormal-ink);
  background-color: var(--status-abnormal-surface);
}

.status-pill[data-status="warning"] {
  color: var(--status-warning-ink);
  background-color: var(--status-warning-surface);
}

/*
 * 1 項目分のカード。いちばん大きいのは測定値で、項目名ではない（DESIGN.md §7.1）。
 * 左端の帯は状態の補助。状態そのものはピルの文言が担う。
 */
.result-card {
  display: grid;
  gap: var(--space-3h);
  padding: var(--space-3h) var(--size-4) var(--size-4);
  border-inline-start: var(--size-1) solid var(--status-unknown-mark);
}

.result-card[data-status="normal"] { border-inline-start-color: var(--status-normal-mark); }
.result-card[data-status="caution"] { border-inline-start-color: var(--status-caution-mark); }
.result-card[data-status="abnormal"] { border-inline-start-color: var(--status-abnormal-mark); }

.result-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-2);
}

.result-card__heading {
  /* 説明のツールチップの位置基準 */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--size-1);
  min-inline-size: 0;
}

.result-card__name {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  font-weight: var(--font-weight-6);
  margin: 0;
}

.result-card__name a {
  color: inherit;
  text-decoration: none;
}

.result-card__name a:hover {
  color: var(--app-accent);
  text-decoration: underline;
}

.result-card__value {
  display: flex;
  align-items: baseline;
  gap: var(--size-1);
  margin: 0;
}

/*
 * スパークラインは値の右の空きに寄せる。カードが広いほど図も大きくしたいので
 * 幅はカードに対する割合で決め、viewBox の比率のまま拡大させる（形は変わらない）。
 */
.result-card__value .sparkline {
  margin-inline-start: auto;
  align-self: center;
  inline-size: clamp(5.75rem, 45%, 40vw);
  block-size: auto;
}

.result-card__value .number {
  font-size: var(--type-metric-size);
  line-height: var(--type-metric-line);
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
}

.result-card__value .unit {
  color: var(--app-text-muted);
  font-size: var(--type-dense-size);
  white-space: nowrap;
}

.result-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-1) var(--size-5);
  margin: 0;
  font-size: var(--type-dense-size);
  line-height: var(--type-dense-line);
}

.result-card__meta > div {
  display: flex;
  align-items: baseline;
  gap: var(--size-2);
}

.result-card__meta dt {
  margin: 0;
  color: var(--app-text-muted);
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-5);
  white-space: nowrap;
}

.result-card__meta dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.result-card__meta .delta[data-direction="up"] { color: var(--trend-up); }
.result-card__meta .delta[data-direction="down"] { color: var(--trend-down); }
.result-card__meta .delta[data-direction="flat"] { color: var(--trend-flat); }

.result-card__meta .previous {
  color: var(--app-text-muted);
  font-size: var(--type-label-size);
  margin-inline-start: var(--size-1);
}

.result-card__flag,
.result-card__note {
  margin: 0;
  font-size: var(--type-dense-size);
  line-height: var(--type-dense-line);
  color: var(--app-text-muted);
}

.result-card__flag {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  color: var(--status-warning-ink);
}

.category-section {
  display: grid;
  gap: var(--space-3h);
}

.category-section__header {
  display: flex;
  align-items: baseline;
  gap: var(--size-3);
  border-block-end: var(--border-size-1) solid var(--app-border);
  padding-block-end: var(--size-2);
}

.category-section__header h2 {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: var(--font-weight-7);
  margin: 0;
  max-inline-size: none;
}

.category-section__count {
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--font-weight-5);
  color: var(--status-abnormal-ink);
  white-space: nowrap;
}

.category-section__grid {
  display: grid;
  gap: var(--size-3);
  /* 広い画面ではカードを大きめに取り、スパークラインに使える幅を確保する */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

.checkup-header {
  display: grid;
  gap: var(--space-3h);
  padding: var(--size-4);
}

@media (width >= 48rem) {
  .checkup-header {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .checkup-header__note {
    grid-column: 1 / -1;
  }
}

.checkup-header__date {
  font-size: var(--type-metric-sm-size);
  line-height: var(--type-metric-sm-line);
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.checkup-header__meta {
  margin: 0;
  color: var(--app-text-muted);
  font-size: var(--type-dense-size);
  line-height: var(--type-dense-line);
  max-inline-size: var(--measure-ja);
}

.checkup-header__counts {
  display: flex;
  gap: var(--size-5);
  margin: 0;
}

.checkup-header__counts dt {
  color: var(--app-text-muted);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--font-weight-5);
  margin: 0;
  white-space: nowrap;
}

.checkup-header__counts dd {
  margin: 0;
  font-size: var(--type-metric-sm-size);
  line-height: var(--type-metric-sm-line);
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
}

.checkup-header__counts .judgment {
  color: var(--app-accent);
}

.checkup-header__note {
  margin: 0;
  display: grid;
  gap: var(--size-2);
  padding: var(--size-3);
  border-radius: var(--radius-2);
  background-color: var(--app-surface-sunken);
  /* 所見は読ませる文章。本文の行間と行長を使う（DESIGN.md §1.3） */
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--app-text);
}

.checkup-header__note p {
  margin: 0;
  max-inline-size: var(--measure-ja);
}

.checkup-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--size-2);
}

/*
 * Open Props の normalize は可読性のために li を 60ch で頭打ちにする。
 * ここは本文ではなくレイアウト用のリストなので、その上限を外して幅いっぱいに使う。
 */
.checkup-list__item {
  max-inline-size: none;
  padding-inline-start: 0;
}

.checkup-list__item a {
  display: grid;
  gap: var(--size-1);
  padding: var(--size-3) var(--size-4);
  color: inherit;
  text-decoration: none;
}

@media (width >= 48rem) {
  .checkup-list__item a {
    /* 受診日と判定は内容ぶんだけ。行をまたいで揃える必要があるので固定幅にする */
    grid-template-columns: 10rem 5.5rem 1fr auto;
    column-gap: var(--size-3);
    align-items: baseline;
  }
}

.checkup-list__item:hover {
  border-color: var(--app-accent);
}

.checkup-list__date {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.checkup-list__meta,
.checkup-list__counts {
  color: var(--app-text-muted);
  font-size: var(--type-dense-size);
  line-height: var(--type-dense-line);
}

.checkup-list__judgment {
  color: var(--app-accent);
  font-size: var(--type-dense-size);
  font-weight: var(--font-weight-6);
  white-space: nowrap;
}

.checkup-list__counts {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/*
 * 表はカードで包まず、そのまま本文に流す。
 * 密度が本文とは違うので、本文のサイズ・行間を継承させない（DESIGN.md §7.3）。
 */
.trend-table-wrapper,
.item-table-wrapper {
  overflow-x: auto;
}

.trend-table,
.item-table {
  inline-size: 100%;
  border-collapse: collapse;
  /* Open Props の normalize が table に付ける地と角丸・width:fit-content を外す */
  background: none;
  border: none;
  border-radius: 0;
  font-size: var(--type-dense-size);
  line-height: var(--type-dense-line);
}

.trend-table th,
.item-table th {
  text-align: start;
  background: none;
  color: var(--app-text-muted);
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-5);
  padding: var(--size-2) var(--size-3);
  border-block-end: var(--border-size-1) solid var(--app-border);
  white-space: nowrap;
}

.trend-table td,
.item-table td {
  text-align: start;
  background: none;
  max-inline-size: none;
  padding: var(--space-3h) var(--size-3);
  border-block-end: var(--border-size-1) solid var(--app-border);
  vertical-align: baseline;
}

.trend-table tr:last-child td,
.item-table tr:last-child td {
  border-block-end: none;
}

.trend-table .number {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.trend-table .unit,
.item-table .unmeasured {
  color: var(--app-text-muted);
}

/*
 * 単位は途中で折らない（DESIGN.md §5.2）。列が狭いと overflow-wrap: anywhere が
 * g/cm2 を「g/c」「m2」に割ってしまう。
 */
.item-table td:nth-child(3),
.trend-table .unit {
  white-space: nowrap;
}

/*
 * 項目コードとエイリアスは長い英数字が並ぶ。幅を確保するのではなく折り返させ、
 * それでも足りなければ表ごと横スクロールさせる（DESIGN.md §5.2）。
 */
.item-table code {
  font-size: var(--type-label-size);
  overflow-wrap: anywhere;
}

.item-table .aliases {
  color: var(--app-text-muted);
  overflow-wrap: anywhere;
}

/*
 * 余った幅はエイリアス列に寄せる。何もしないと、説明文を持つ「項目」列が
 * 幅を取りすぎて、右端に読むもののない空白が残る。
 */
.item-table th:nth-child(1) { inline-size: 34%; }
.item-table th:nth-child(2),
.item-table th:nth-child(3) { inline-size: 1%; }
.trend-chart {
  margin: 0;
  padding: var(--size-4);
  display: grid;
  gap: var(--size-3);
  /* Open Props の normalize が figure に place-items:center を当てるため、横幅いっぱいに戻す */
  justify-items: stretch;
}

/*
 * Chart.js は canvas に幅・高さをインラインで書き込む。canvas 自身に CSS で
 * 高さを与えると「親の高さ = canvas の高さ」が循環参照になり、リサイズのたびに
 * 際限なく伸びてしまう。高さの決定はこのラッパーだけが行う。
 */
.trend-chart__canvas {
  position: relative;
  block-size: min(50vh, 22rem);
}

.trend-chart figcaption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--app-text-muted);
  max-inline-size: var(--measure-ja);
  text-wrap: initial;
}

/*
 * 軸も目盛りも持たない、推移の形だけを見せる図。
 * 面は薄く敷き、各受診回を点で打ち、表示中の回だけ判定の色で強調する。
 * 基準値がある項目は、その境界に破線を引く（塗ると折れ線が読みにくくなるため）。
 */
.sparkline {
  display: block;
  flex: none;
  overflow: visible;
  color: var(--app-accent);
}

.sparkline__reference {
  fill: none;
  stroke: var(--app-text-muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.6;
}

.sparkline__area {
  fill: currentColor;
  opacity: 0.1;
  stroke: none;
}

.sparkline__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

/* 日次の図は詳細グラフと同じく、実測値を濃く、7日移動平均を30%の不透明度で描く */
.sparkline__moving-average {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.3;
}

.sparkline--daily .sparkline__line {
  opacity: 1;
}

.sparkline__point {
  fill: currentColor;
  opacity: 0.45;
}

.sparkline__head {
  fill: currentColor;
}

.sparkline[data-status="normal"] .sparkline__head { fill: var(--status-normal-mark); }
.sparkline[data-status="caution"] .sparkline__head { fill: var(--status-caution-mark); }
.sparkline[data-status="abnormal"] { color: var(--status-abnormal-mark); }
/*
 * Health Connect の指標 1 つ分のカード。健診のカードと違い基準値を持たないので、
 * 状態の帯もピルも出さない。いちばん大きいのは最新値（DESIGN.md §7.1）。
 */
.daily-metric-grid {
  display: grid;
  gap: var(--size-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.daily-metric-card {
  display: grid;
  gap: var(--space-3h);
  padding: var(--space-3h) var(--size-4) var(--size-4);
}

.daily-metric-card__name {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  font-weight: var(--font-weight-6);
  margin: 0;
}

.daily-metric-card__name a {
  color: inherit;
  text-decoration: none;
}

.daily-metric-card__name a:hover {
  color: var(--app-accent);
  text-decoration: underline;
}

.daily-metric-card__value {
  display: flex;
  align-items: baseline;
  gap: var(--size-1);
  margin: 0;
}

.daily-metric-card__value .number {
  font-size: var(--type-metric-size);
  line-height: var(--type-metric-line);
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
}

.daily-metric-card__value .unit {
  color: var(--app-text-muted);
  font-size: var(--type-dense-size);
  white-space: nowrap;
}

/*
 * 推移は値の右の空きに寄せる。カードが広いほど図も大きくしたいので幅は割合で決め、
 * viewBox の比率のまま拡大させる（形は変わらない）。
 */
.daily-metric-card__value .sparkline {
  margin-inline-start: auto;
  align-self: center;
  inline-size: clamp(6rem, 45%, 40vw);
  block-size: auto;
}

.daily-metric-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-1) var(--size-5);
  margin: 0;
  font-size: var(--type-dense-size);
  line-height: var(--type-dense-line);
}

.daily-metric-card__meta > div {
  display: flex;
  align-items: baseline;
  gap: var(--size-2);
}

.daily-metric-card__meta dt {
  margin: 0;
  color: var(--app-text-muted);
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-5);
  white-space: nowrap;
}

.daily-metric-card__meta dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* 増減は方向だけを示す。良し悪しは指標によって違うので色で示さない（DESIGN.md §3.3） */
.daily-metric-card__meta .delta[data-direction="up"] { color: var(--trend-up); }
.daily-metric-card__meta .delta[data-direction="down"] { color: var(--trend-down); }
.daily-metric-card__meta .delta[data-direction="flat"] { color: var(--trend-flat); }
/*
 * 日次指標の詳細ページの上に並べる要約。期間内の最新・平均・最小・最大を横に並べる。
 */
.daily-metric-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--size-3);
  margin: 0;
  padding: var(--space-3h) var(--size-4);
}

.daily-metric-stats > div {
  display: grid;
  gap: var(--size-1);
}

.daily-metric-stats dt {
  margin: 0;
  color: var(--app-text-muted);
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-5);
}

.daily-metric-stats dd {
  margin: 0;
  white-space: nowrap;
}

.daily-metric-stats .number {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
}

.daily-metric-stats .unit {
  color: var(--app-text-muted);
  font-size: var(--type-dense-size);
}

/*
 * 項目名の横の「?」と、その下に出る説明のツールチップ。
 * 位置の基準は項目名の行（.result-card__heading）にしてある。ボタン基準で中央に置くと
 * 名前が長い項目でカードの外へはみ出すため、カードの左端から右へ伸ばす。
 */

.item-hint {
  display: inline-flex;
  vertical-align: middle;
}

.item-hint__toggle {
  position: relative;
  inline-size: var(--size-4);
  block-size: var(--size-4);
  display: grid;
  place-items: center;
  padding: 0;
  border: var(--border-size-1) solid var(--app-border);
  border-radius: var(--radius-round);
  background-color: transparent;
  color: var(--app-text-muted);
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-7);
  line-height: 1;
  cursor: pointer;
}

/*
 * 見た目は 20px のまま、当たり判定だけ 44px に広げる（DESIGN.md §9）。
 * 指のときだけ。マウスでは隣の項目名リンクに覆いかぶさって取り合いになる。
 */
@media (pointer: coarse) {
  .item-hint__toggle::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    translate: -50% -50%;
  }
}

.item-hint__toggle:hover,
.item-hint__toggle:focus-visible {
  border-color: var(--app-accent);
  color: var(--app-accent);
}

.item-hint__tip {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(100% + var(--size-1));
  inset-inline-start: 0;
  inline-size: max-content;
  max-inline-size: min(19rem, calc(100vw - var(--size-7)));
  padding: var(--size-2) var(--size-3);
  border: var(--border-size-1) solid var(--app-border);
  border-radius: var(--radius-2);
  background-color: var(--app-surface-raised);
  box-shadow: var(--shadow-3);
  color: var(--app-text);
  font-size: var(--type-dense-size);
  font-weight: var(--font-weight-4);
  line-height: var(--type-body-line);
  text-align: start;
  white-space: normal;
  /* 出入りだけ滑らかにする。閉じている間は当たり判定も外す */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms var(--ease-3), visibility 120ms;
}

.item-hint:hover .item-hint__tip,
.item-hint:focus-within .item-hint__tip {
  opacity: 1;
  visibility: visible;
}

/* 項目ページなど、開いた状態で常に見せる説明文 */
.item-description {
  margin-block-start: var(--size-3);
  max-inline-size: var(--measure-ja);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--app-text);
}

/*
 * 一覧の説明文。既定は畳んでおき、「項目の説明を表示」を入れたときだけ開く。
 * チェック状態は :has でページ全体に伝えるので JS はいらない。
 * 開いている間は「?」を引っ込める（同じ文がその場に出ているため）。
 */
.description-toggle {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--size-2);
  min-block-size: var(--tap-min);
  font-size: var(--type-dense-size);
  color: var(--app-text-muted);
  cursor: pointer;
}

.description-toggle input {
  margin: 0;
  cursor: pointer;
}

.result-card__description,
.item-table__description {
  margin: 0;
  font-size: var(--type-dense-size);
  line-height: var(--type-body-line);
  color: var(--app-text-muted);
  max-inline-size: var(--measure-ja);
}

/* 結果カードでは畳んでおき、トグルを入れたときだけ開く */
.result-card__description {
  display: none;
}

/* 項目・辞書は辞書そのものなので常に出す（「?」は置かない） */
.item-table__description {
  margin-block-start: var(--size-1);
  max-inline-size: 24rem;
  white-space: normal;
}

.app-main:has(#show-descriptions:checked) .result-card__description {
  display: block;
}

.app-main:has(#show-descriptions:checked) .item-hint {
  display: none;
}

/* パスキーのログインと OAuth の同意。入力欄は多くて 2 つなので詰めない（DESIGN.md §7.7） */
.auth-panel {
  display: grid;
  gap: var(--size-4);
  padding: var(--size-6);
  max-inline-size: 26rem;
  margin-inline: auto;
  text-align: center;
}

.auth-panel__field {
  display: grid;
  gap: var(--size-1);
  text-align: start;
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--font-weight-5);
  color: var(--app-text-muted);
}

.auth-panel__field input {
  /* IME の変換中に文字が隠れないよう、内側の余白は詰めすぎない */
  padding: var(--space-3h) var(--size-3);
  border: var(--border-size-1) solid var(--app-border);
  border-radius: var(--radius-2);
  background-color: var(--app-surface);
  color: var(--app-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.auth-panel__button {
  min-block-size: var(--tap-min);
  padding: var(--size-2) var(--size-4);
  border: none;
  border-radius: var(--radius-2);
  background-color: var(--app-accent);
  color: var(--app-accent-contrast);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-6);
  cursor: pointer;
}

.auth-panel__button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.auth-panel__message {
  min-block-size: var(--size-4);
  margin: 0;
  font-size: var(--type-dense-size);
  line-height: var(--type-dense-line);
  color: var(--app-text-muted);
}

.auth-panel__message[data-state="error"] {
  color: var(--status-abnormal-ink);
}

.auth-panel__actions {
  display: flex;
  gap: var(--size-3);
  justify-content: center;
}

.auth-panel__button--secondary {
  background-color: var(--app-surface-sunken);
  color: var(--app-text);
}

.scope-list {
  margin: 0;
  padding-inline-start: var(--size-5);
  text-align: start;
  font-size: var(--type-dense-size);
  line-height: var(--type-dense-line);
  color: var(--app-text-muted);
}

.scope-list li {
  max-inline-size: none;
}

/*
 * ネイティブアプリの下部タブ（DESIGN.md §7.6）。
 * Web のヘッダーナビと同じ行き先を、親指の届く位置に置き換えたもの。
 */

.tab-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 10;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;

  background-color: var(--app-surface-raised);
  border-block-start: var(--border-size-1) solid var(--app-border);
  /* ジェスチャーバーやホームインジケータの下にタブが潜らないようにする */
  padding-block-end: env(safe-area-inset-bottom, 0px);
}

.tab-bar a {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--size-1);

  min-block-size: var(--tap-min);
  padding-block: var(--size-2);
  padding-inline: var(--size-1);

  color: var(--app-text-muted);
  font-size: var(--type-label-size);
  /* ラベルは 1 行に収める。2 行になるとタブごとに高さが揃わない */
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.tab-bar a[aria-current="page"] {
  color: var(--app-accent);
  font-weight: var(--font-weight-6);
}

.tab-bar__icon {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

/*
 * タブは fixed なので、最後の要素がタブの裏に隠れる。
 * タブがある画面でだけ本文の下余白を足す（タブの高さぶん + 通常の下余白）。
 */
body:has(.tab-bar) .app-main {
  padding-block-end: calc(var(--size-8) + 3.5rem + env(safe-area-inset-bottom, 0px));
}
/*
 * 日々の記録の上に出る Health Connect の同期状況と「今すぐ同期」ボタン。ネイティブアプリでだけ表示される。
 * 状態は文言で伝わるので、色は失敗のときだけ付ける（DESIGN.md §3.4）。
 */

.sync-status:not([hidden]) {
  margin-block-start: var(--size-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-2) var(--size-3);
}

.sync-status__message {
  flex: 1 1 12em;
  margin: 0;
  color: var(--app-text-muted);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
}

.sync-status[data-state="error"] .sync-status__message {
  color: var(--status-abnormal-ink);
}

.sync-status__button {
  min-block-size: var(--tap-min);
  padding: 0 var(--size-4);
  border: var(--border-size-1) solid var(--app-border);
  border-radius: var(--radius-2);
  background-color: var(--app-surface-raised);
  color: var(--app-text);
  font-size: var(--type-dense-size);
  font-weight: var(--font-weight-6);
  white-space: nowrap;
  cursor: pointer;
}

.sync-status__button:disabled {
  opacity: 0.6;
  cursor: progress;
}

@media (prefers-color-scheme: dark){:root{--shadow-color:220 40% 2%;--shadow-strength:25%}}