: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));--green-7:#37b24d;--yellow-8:#f08c00;--yellow-1:#fff3bf;--red-8:#e03131;--red-1:#ffe3e3;--orange-8:#e8590c;--orange-1:#ffe8cc;--red-7:#f03e3e;--blue-7:#1c7ed6;--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;--gray-5:#adb5bd;--indigo-4:#748ffc;--green-4:#69db7c;--green-12:#133d1b;--yellow-4:#ffd43b;--yellow-12:#663500;--red-4:#ff8787;--red-12:#7d1a1a;--orange-4:#ffa94d;--orange-12:#802b09;--blue-4:#4dabf7;--font-sans:var(--font-system-ui);--size-6:1.75rem;--size-7:2rem;--radius-round:1e5px;--font-weight-6:600;--font-size-00:.5rem;--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);--font-lineheight-4:1.75;--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)}}/*
 * アプリ全体のデザイントークンと土台のレイアウト。
 * 色・余白・タイポグラフィは Open Props のカスタムプロパティを参照し、
 * アプリ固有の意味づけ（面の色・状態色）だけをここで定義する。
 */

:root {
  color-scheme: light dark;

  /* 面と文字 */
  --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);
  --app-text-muted: var(--gray-6);
  --app-accent: var(--indigo-7);
  --app-accent-contrast: white;

  /* 状態色（正常・要注意・異常・警告） */
  --status-normal: var(--green-7);
  --status-normal-surface: var(--green-1);
  --status-caution: var(--yellow-8);
  --status-caution-surface: var(--yellow-1);
  --status-abnormal: var(--red-8);
  --status-abnormal-surface: var(--red-1);
  --status-warning: var(--orange-8);
  --status-warning-surface: var(--orange-1);
  --status-unknown: var(--gray-6);
  --status-unknown-surface: var(--gray-1);

  /* 増減 */
  --trend-up: var(--red-7);
  --trend-down: var(--blue-7);
  --trend-flat: var(--gray-6);

  --app-radius: var(--radius-3);
  --app-shadow: var(--shadow-2);
  --app-max-width: 72rem;
}

@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);

    --status-normal: var(--green-4);
    --status-normal-surface: var(--green-12);
    --status-caution: var(--yellow-4);
    --status-caution-surface: var(--yellow-12);
    --status-abnormal: var(--red-4);
    --status-abnormal-surface: var(--red-12);
    --status-warning: var(--orange-4);
    --status-warning-surface: var(--orange-12);
    --status-unknown: var(--gray-5);
    --status-unknown-surface: var(--gray-11);

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

body {
  background-color: var(--app-surface);
  color: var(--app-text);
  font-family: var(--font-sans);
  line-height: var(--font-lineheight-3);
}

.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(--font-size-3);
  font-weight: var(--font-weight-7);
  color: var(--app-text);
  text-decoration: none;
}

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

.app-nav a,
.app-nav button {
  color: var(--app-text-muted);
  font-size: var(--font-size-1);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

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

.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(--font-size-5);
  font-weight: var(--font-weight-7);
  margin-block-end: var(--size-1);
}

.page-subtitle {
  color: var(--app-text-muted);
  font-size: var(--font-size-1);
}

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

.flash.alert {
  border-color: var(--status-abnormal);
  color: var(--status-abnormal);
  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);
}

.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 a {
  display: inline-block;
  padding: var(--size-1) var(--size-2);
  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(--font-size-0);
  text-decoration: none;
}

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

.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(--font-size-0);
  font-weight: var(--font-weight-6);
  line-height: 1;
  white-space: nowrap;
  color: var(--status-unknown);
  background-color: var(--status-unknown-surface);
}

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

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

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

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

.result-card {
  display: grid;
  gap: var(--size-2);
  padding: var(--size-3) var(--size-4) var(--size-4);
  border-inline-start: var(--size-1) solid var(--status-unknown);
}

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

.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);
}

.result-card__name {
  font-size: var(--font-size-1);
  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(--font-size-5);
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.result-card__value .unit {
  color: var(--app-text-muted);
  font-size: var(--font-size-1);
}

.result-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2) var(--size-5);
  margin: 0;
  font-size: var(--font-size-0);
}

.result-card__meta dt {
  color: var(--app-text-muted);
}

.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);
  margin-inline-start: var(--size-1);
}

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

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

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

.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(--font-size-2);
  font-weight: var(--font-weight-7);
  margin: 0;
}

.category-section__count {
  font-size: var(--font-size-0);
  color: var(--status-abnormal);
}

.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(--size-3);
  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(--font-size-4);
  font-weight: var(--font-weight-7);
  margin: 0;
}

.checkup-header__meta {
  margin: 0;
  color: var(--app-text-muted);
  font-size: var(--font-size-0);
}

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

.checkup-header__counts dt {
  color: var(--app-text-muted);
  font-size: var(--font-size-0);
}

.checkup-header__counts dd {
  margin: 0;
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
}

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

.checkup-header__note p {
  margin: 0;
}

.checkup-header__note {
  margin: 0;
  display: grid;
  gap: var(--size-1);
  padding: var(--size-3);
  border-radius: var(--radius-2);
  background-color: var(--app-surface-sunken);
  font-size: var(--font-size-0);
  color: var(--app-text-muted);
}

.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;
}

.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: 9rem 5rem 1fr auto;
    column-gap: var(--size-3);
    align-items: baseline;
  }
}

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

.checkup-list__date {
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
}

.checkup-list__meta,
.checkup-list__counts {
  color: var(--app-text-muted);
  font-size: var(--font-size-0);
}

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

.checkup-list__counts {
  white-space: nowrap;
}

/* 表はカードで包まず、そのまま本文に流す */
.trend-table-wrapper,
.item-table-wrapper {
  overflow-x: auto;
}

.trend-table,
.item-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-0);
}

.trend-table th,
.item-table th {
  text-align: start;
  color: var(--app-text-muted);
  font-weight: var(--font-weight-6);
  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;
  padding: var(--size-2) 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);
}

.item-table .aliases {
  color: var(--app-text-muted);
  min-inline-size: 20rem;
}

.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(--font-size-0);
  color: var(--app-text-muted);
}

/*
 * 軸も目盛りも持たない、推移の形だけを見せる図。
 * 面は薄く敷き、各受診回を点で打ち、表示中の回だけ判定の色で強調する。
 * 基準値がある項目は、その境界に破線を引く（塗ると折れ線が読みにくくなるため）。
 */
.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;
}

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

.sparkline__head {
  fill: currentColor;
}

.sparkline[data-status="normal"] .sparkline__head { fill: var(--status-normal); }
.sparkline[data-status="caution"] .sparkline__head { fill: var(--status-caution); }
.sparkline[data-status="abnormal"] { color: var(--status-abnormal); }
/*
 * 項目名の横の「?」と、その下に出る説明のツールチップ。
 * 位置の基準は項目名の行（.result-card__heading）にしてある。ボタン基準で中央に置くと
 * 名前が長い項目でカードの外へはみ出すため、カードの左端から右へ伸ばす。
 */

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

.item-hint__toggle {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  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(--font-size-00);
  font-weight: var(--font-weight-7);
  line-height: 1;
  cursor: pointer;
}

.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(--font-size-0);
  font-weight: var(--font-weight-4);
  line-height: var(--font-lineheight-3);
  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-2);
  max-inline-size: 42rem;
  font-size: var(--font-size-0);
  line-height: var(--font-lineheight-4);
  color: var(--app-text-muted);
}

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

/* 結果カードでは畳んでおき、トグルを入れたときだけ開く */
.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;
}

.auth-panel {
  display: grid;
  gap: var(--size-3);
  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(--font-size-0);
  color: var(--app-text-muted);
}

.auth-panel__field input {
  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);
  color: var(--app-text);
  font-size: var(--font-size-1);
}

.auth-panel__button {
  padding: var(--size-3) var(--size-4);
  border: none;
  border-radius: var(--radius-2);
  background-color: var(--app-accent);
  color: var(--app-accent-contrast);
  font-size: var(--font-size-1);
  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(--font-size-0);
  color: var(--app-text-muted);
}

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

.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(--font-size-0);
  color: var(--app-text-muted);
}

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