/* ダッシュボード固有のもの。トークン・器・ヘッダ・フッタ・カード・ボタンは
 * /shared/style.css にある。HTML は 2 本とも読むこと。 */

/* 年齢や区分の下に出す短い補足。
 * 中身は選択の数で出たり消えたりする。空のときも 1 行ぶん場所を取る。
 * 取らないと、2 件目を選んだ瞬間にグラフから下が 22px 落ちる（実測） */
.hint {
  margin: 0; font-size: var(--text-xs); color: var(--text-muted);
  /* 本文の行送りと同じ。ずらすと予約が足りず、出た瞬間に数 px 動く */
  min-block-size: 1.7em;
}
/* 上限で弾いた時だけ出す。常に出しておくと読まれないので、
   出た瞬間に目に入るよう一度だけ色を戻して差し込む */
.hint.flash { color: var(--text); animation: hint-flash 0.9s ease-out; }
@keyframes hint-flash {
  from { opacity: 0; transform: translateY(-0.2em); }
  to   { opacity: 1; transform: none; }
}

.empty { margin: 0; font-size: var(--text-s); color: var(--text-muted); padding-block: var(--space-2xs); }

/* 読み込みに失敗したときの知らせ */
.alert {
  margin: 0; padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-s);
  background: #fdecea; color: var(--danger);
  font-size: var(--text-s);
}

/* 開発環境のダミーデータ。見た目で区別が付かないので強めに出す */
.synthetic {
  margin: 0; padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-s);
  border-inline-start: 3px solid var(--notice-line);
  background: var(--notice-bg); color: var(--notice-text);
  font-size: var(--text-s);
}

/* ---------------- ダッシュボードの配置 ---------------- */

/* 左で選び、右で見る。高さは高いほうに揃える（align-items の既定）。
 * 左だけ短いと下が空き、その空きぶんツリーが隠れていた（実測で 200〜280px） */
.layout {
  display: grid; gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr);
}
/* 左で選び、右で見る。狭いときは縦に積む */
@media (min-width: 60rem) {
  .layout { grid-template-columns: 21rem minmax(0, 1fr); }
}
.layout > * { display: flex; flex-direction: column; gap: var(--space-m); }
/* 余りはツリーの器に渡す。min-block-size: 0 が無いと、中身の高さより
 * 縮めなくなって overflow が効かない */
.layout > * > .card:has(.tree) { flex: 1; min-block-size: 0; }

/* ---------------- 傷病を選ぶ ---------------- */

input[type="search"] {
  inline-size: 100%;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--control); border-radius: var(--radius-s);
  background: var(--bg); color: var(--text);
  font: inherit; font-size: var(--text-s);
}
input[type="search"]::placeholder { color: var(--text-muted); }

/* 階層コードのツリー。
 * 枝線は引かない。深さはインデントだけで示す。罫線を足すと密度が上がって
 * 名称そのものが読みにくくなる。
 * 行の中に押せるものが 2 つある。行全体（選ぶ）と山形（開閉）で、
 * 山形だけ当たり判定を切り離している */
.tree {
  /* 高さは器の余りで決まる（右の列の高さに揃う）。
   * block-size: 0 が要る。これが無いと中身の高さ（1,280px）で場所を取り、
   * 逆に右の列まで押し広げてしまう。min で下限だけ持たせる */
  flex: 1 1 0;
  block-size: 0;
  min-block-size: 18rem;
  overflow-y: auto;
  /* 端まで来てもページごと動かさない */
  overscroll-behavior: contain;
  margin-inline: calc(var(--space-3xs) * -1);
}
.tnode {
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-3xs);
  border-radius: var(--radius-s); cursor: pointer;
  font-size: var(--text-s); line-height: 1.4;
}
.tnode:hover { background: var(--hover); }
.tnode[aria-selected="true"] { background: var(--hover); }
.tnode[aria-selected="true"] .tlabel { font-weight: 700; color: var(--text-strong); }
.tnode[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.tnode[aria-disabled="true"]:hover { background: none; }
.tnode:focus { outline: none; }
.tnode:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* 選ばれているかどうか。押すのは行なので、これは状態を見せるだけ */
.tnode .tbox {
  flex: none; inline-size: 1rem; block-size: 1rem;
  border: 1.5px solid var(--control); border-radius: var(--radius-s);
  background: var(--bg); position: relative;
}
.tnode[aria-selected="true"] .tbox { background: var(--picked); border-color: var(--picked); }
/* チェックの形。線 2 本を回して作る（画像を持たない） */
.tnode[aria-selected="true"] .tbox::after {
  content: ''; position: absolute; inset-inline-start: 4.5px; inset-block-start: 1px;
  inline-size: 4px; block-size: 8px;
  border: solid var(--picked-ink); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.tnode[aria-disabled="true"] .tbox { border-style: dashed; }

/* 畳んだ下に選ばれているものがある。選択済み（塗り）と見分けが付くよう、
 * 白いままで線だけ引く */
.tnode.inside .tbox { border-color: var(--picked); }
.tnode.inside .tbox::after {
  content: ''; position: absolute; inset-inline-start: 2.5px; inset-block-start: 5.5px;
  inline-size: 8px; block-size: 2px; border-radius: 1px; background: var(--picked);
}

/* 山形。開けるノードにだけ出すが、場所は葉にも空ける。
 * 深さで字下げするのはここから右だけ。チェックは左端で揃える
 * （深いところでも「選ぶ」場所が動かない） */
.tnode .chev {
  flex: none; inline-size: 1.5rem; block-size: 1.5rem;
  border-radius: var(--radius-s);
  margin-inline-start: calc(var(--depth) * var(--space-m));
  display: grid; place-items: center;
  color: var(--text-soft); font-size: var(--text-2xs);
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.tnode .chev:empty { pointer-events: none; }
.tnode .chev:not(:empty):hover { background: var(--line); color: var(--text-strong); }
.tnode[aria-expanded="true"] > .chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .tnode .chev { transition: none; }
  .hint.flash { animation: none; }
}

/* 名称は 1 行に収める。全文は tooltip と読み上げで取れる */
.tlabel { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code { color: var(--text-muted); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
/* 絞り込み中に、場所を示すためだけに出している親 */
.tnode.ctx .tlabel { color: var(--text-muted); font-weight: 400; }

/* ---------------- 選択中・年齢 ---------------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) var(--space-2xs);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--bg); font-size: var(--text-xs);
}
.chip .dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 3px; flex: none; }
.chip button {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 0 var(--space-3xs); border-radius: var(--radius-pill);
  color: var(--text-muted); font: inherit; line-height: 1;
}
.chip button:hover { background: var(--hover); color: var(--text-strong); }

/* 選ぶピル。実体の radio は隠して、ラベル側に状態を出す */
.ages { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.ages label {
  padding: var(--space-3xs) var(--space-xs);
  border: 1px solid var(--control); border-radius: var(--radius-pill);
  color: var(--text-soft); font-size: var(--text-xs); cursor: pointer;
}
.ages input { position: absolute; opacity: 0; pointer-events: none; }
.ages label:hover { background: var(--hover); }
.ages label:has(input:checked) {
  background: var(--picked); border-color: var(--picked);
  color: var(--picked-ink); font-weight: 700;
}
.ages label:has(input:disabled) { opacity: 0.4; cursor: default; }
.ages label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------- グラフ ---------------- */

/* 高さを持つのは canvas の枠だけ。凡例はその下に伸びる。
 * .plot に高さを持たせると、凡例が枠からはみ出して次のカードに重なる */
.plot { position: relative; }
.plot-canvas { position: relative; block-size: var(--plot-h); }

/* グラフが無いときも枠の高さを保つ。選択を全部外した瞬間にここが潰れると、
 * 右の列が縮み、左のツリーもそれに合わせて縮み（.layout は高さを揃える）、
 * ページ全体が短くなってブラウザがスクロール位置を切り詰める。
 * 実測で ツリー 770→288px・scrollY 300→70 と動いていた */
/* canvas の高さに凡例 1 行ぶんを足す。凡例まで見込まないと、グラフが
 * 出た瞬間にその下が 1 行ぶん落ちる。系列が多くて凡例が折り返すぶんは
 * 内容の違いなので伸びてよい */
#plots { min-block-size: calc(var(--plot-h) + 2.4em); }

/* canvas の中だとキーボードで触れないので HTML で作る。
 * 押すとその 1 本だけを目立たせ、もう一度押すと戻る */
.legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-3xs) var(--space-xs);
  margin-block-start: var(--space-2xs);
}
.legend-item {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: var(--space-3xs) var(--space-2xs); border-radius: var(--radius-s);
  font: inherit; font-size: var(--text-2xs); color: var(--text-soft);
}
.legend-item:hover { background: var(--hover); }
/* 触れている / 押して固定している 1 本 */
.legend-item.on, .legend-item[aria-pressed="true"] { color: var(--text-strong); font-weight: 700; }
/* 目立たせていないほう。読めなくはしない（--text-muted は 4.66:1）。
 * 「どれか 1 本」は、薄くする側ではなく濃くする側で示す */
.legend-item.dim { color: var(--text-muted); }
.legend-item.dim .legend-dot { opacity: 0.35; }
.legend-dot { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 3px; flex: none; }

/* ---------------- 表 ---------------- */

/* 狭い画面で表だけ横スクロールさせる（ページ全体を横に広げない） */
.scroll { overflow-x: auto; overscroll-behavior-x: contain; }

/* 何も選んでいないときは中身が空になる。器ごと潰れると、その下も、
 * 高さを揃えている左の列も一緒に縮む（実測で 220px）。
 * 見出し＋年齢 4 行ぶんの場所を先に取っておく。傷病を増やして行が増える
 * ぶんは中身どおりに伸びてよい（それは内容の違いなので驚かない）。 */
/* 見出し 1 行＋年齢 4 行。1 行の実測が 2.3em（文字 1.5em ＋ 上下の余白と罫） */
#summary { min-block-size: calc(5 * 2.3em); }

table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-s); }
thead th {
  font-size: var(--text-xs); font-weight: 700; color: var(--text-muted);
  border-block-end: 1px solid var(--line-strong); white-space: nowrap;
}
th, td { padding: var(--space-3xs) var(--space-s) var(--space-3xs) 0; text-align: start; }
tbody th { font-weight: 400; white-space: nowrap; }
tbody tr + tr :is(th, td) { border-block-start: 1px solid var(--line); }
/* 数値は桁を揃える。先頭列（見出し）だけ左のまま */
thead th:not(:first-child), td { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------------- 一覧ページ ---------------- */

.tiles {
  display: grid; gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.tile {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-m);
  border-radius: var(--radius); background: var(--surface);
  color: inherit; text-decoration: none;
}
.tile:hover { background: var(--surface-hover); }
.tile h2 { font-size: var(--text-l); font-weight: 700; color: var(--accent); }
.tile p { margin: 0; font-size: var(--text-xs); color: var(--text-soft); }