/* サイト全体で共通のもの。/shared/style.css として公開ページ用バケットへ置き、
 * 公開ページ・ダッシュボード・登録画面（HTML は Lambda が返す）の 3 つが読む。
 *
 * 壁の外に置いてあるのは、登録画面が壁を通る前にこれを読むため。
 * ダッシュボード側に置くと、Cookie の壁に例外を開けることになる。 */

/* ---------------- トークン ---------------- */

:root {
  color-scheme: light;

  /* 間隔。1 本の階段だけを使う。中間の値が要ると思ったら、たいていは
   * 器の作りが違う */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;

  /* 文字。画面幅で滑らかに変える。見出しほど大きく動かす */
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-s: 0.875rem;
  --text-m: 1rem;
  --text-l: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --text-xl: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --text-2xl: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem);

  /* 面と文字。薄い色は AA(4.5) を満たす濃さを実測して選んである。
   * 薄くしたくなったら、まず文字を減らせないか考えること。
   *   rgba(0,0,0,.62)  6.19  ／ rgba(0,0,0,.55)  4.66  ／ .45 は 3.36 で未達 */
  --bg: #ffffff;
  --surface: #f7f8f7;
  --surface-hover: #f1f3f1;
  --text: #23272b;
  --text-strong: #14181c;
  --text-muted: rgba(0, 0, 0, 0.55);
  --text-soft: rgba(0, 0, 0, 0.62);
  --line: rgba(0, 0, 0, 0.09);        /* 行間の細線。飾り */
  --line-strong: rgba(0, 0, 0, 0.16); /* 表の見出しの下など、構造の線 */
  /* 押せるもの・入力の輪郭。ここだけは 3:1 が要る（WCAG 1.4.11）。
   * 唯一の境界なので、薄いと枠がどこか分からない。
   * .16 は白の上で 1.45 しかなかった。.42 で 3.02 */
  --control: rgba(0, 0, 0, 0.42);
  --hover: rgba(0, 0, 0, 0.04);

  /* アクセント。BIG DATA for CHILDREN の色に合わせる
   * （https://www.bigdataforchildren.jp/）。旧サイトの緑は QuickSight 版の
   * 名残で、親プロジェクトの色ではなかった。
   *
   * 元の指定値と、実測したコントラスト（白の上 / 面の上）:
   *   リンク  #ee779a   2.71 / 2.55  → 文字に使えない
   *   ボタン  #e60044   4.72（白文字）→ そのまま使える
   * --accent は #ee779a の色相（H342）を保ったまま、AA(4.5) を満たす
   * 一番明るい濃さ。目分量で変えないこと。
   *
   * 濃い赤は「文字」と「細い線」にだけ使う。面を塗らない。BD4C は白地・
   * 細枠で組まれていて、濃い赤はロゴの字と小さな印にしか出てこない。
   * 使うのは 3 か所だけ: 本文中のリンク / フォーカスの枠 / 導線ボタン */
  --accent: #da1b53;         /* 文字と枠線 */
  --accent-hover: #b21343;
  --accent-strong: #e60044;  /* 導線ボタンの塗り */
  --accent-tint: #fdeaf0;

  /* 選択中の下地と印。色は折れ線グラフのものなので、周りは無彩色にする。
   * 器まで色を持つと、どれがデータの色なのか分からなくなる */
  --picked: var(--text-strong);
  --picked-ink: var(--bg);
  --danger: #b3261e;
  --notice-bg: #fff8e6;
  --notice-line: #c98500;
  --notice-text: #55420f;

  /* グラフ */
  --grid: #ececec;
  --axis: #d5d5d5;
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;

  /* 幅 */
  /* グラフの高さ。枠は中身が無いときも保つ（下の #plots の注記） */
  --plot-h: clamp(16rem, 40vh, 26rem);

  --page: 74rem;      /* ページの最大幅 */
  --measure: 34em;    /* 読む文章の 1 行。日本語で 35〜40 字 */
  --gutter: clamp(var(--space-s), 4vw, var(--space-l));

  --radius: 10px;
  --radius-s: 6px;
  --radius-pill: 999px;
}

/* Latin は Lato。日本語はブラウザの既定（Lato に字が無いため）。
 * 実体は /shared/font/ に置いてある（配信ジョブが別なので置き場も別）。
 * 取得できなければ Arial に落ちるだけ */
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/shared/font/Lato-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/shared/font/Lato-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/shared/font/Lato-Black.woff') format('woff');
}

/* ---------------- 土台 ---------------- */

*, *::before, *::after { box-sizing: border-box; }

/* hidden を最後まで効かせる。display を持つ規則（.card など）を後から書くと、
 * ブラウザ既定の display:none に勝ってしまい、隠したはずの器が出る */
[hidden] { display: none !important; }

html {
  /* スクロールバーの場所を先に空ける。空けないと、1 画面に収まるページと
   * 収まらないページで中央寄せの基準幅が変わり、ヘッダから本文まで
   * 全部が数 px 横にずれる */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Lato, Arial, sans-serif;
  font-size: var(--text-m);
  line-height: 1.7;
  /* 中身が短いページでもフッタを下に置く */
  min-block-size: 100svb;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-strong);
  line-height: 1.35;
  text-wrap: balance;
}

/* 日本語の折り返し。既定だと文字と文字のあいだならどこでも折れるので、
 * 「レセプ / トありの」のようにカタカナ語の途中で切れる。
 * auto-phrase は文節の切れ目で折る。対応していないブラウザでは既定に戻る。
 * strict は小書きの仮名や長音符を行頭に置かない（禁則を厳しく取る）。 */
body {
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: anywhere;
}
/* 説明文は行を均す。既定だと最終行に「人数。」だけが残る。
 * pretty ではなく balance なのは、pretty が「傷病1」を「傷病 / 1」に
 * 割るため（実測）。balance は数字を割らずに 3 行を均した。
 * 対応していないブラウザでは既定に戻る */
.lede, .hero > p { text-wrap: balance; }
/* 語の途中で折らないぶん、はみ出しうるものだけ個別に許す */
.tlabel, .code, table { overflow-wrap: normal; }
p, ul, ol, figure, table { margin: 0; }
ul, ol { padding-inline-start: 1.4em; }
img { max-inline-size: 100%; block-size: auto; }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); }

/* 押せるものは消さない。状態だけ変える。
 *
 * 出したり消したりすると、その要素より下が全部ずれる。ずれるたびに
 * 「その要素に場所を予約する」のは後追いで、次に足す人がまた同じことをする。
 * 選べないときは disabled にして、置き場所は変えない。
 *   すべて外す   選択が 0 件のとき
 *   指標         年齢が「すべて」でないとき（医療費）
 *   傷病2        傷病1 を選ぶまで（ツリーの行が aria-disabled になる）
 * 一度出たら変わらないもの（開発環境の帯・剤型のカード）と、めったに
 * 出ない知らせ（読み込み失敗）は hidden のままでよい。
 *
 * 文字だけが入れ替わる場所（.hint）は、空でも 1 行ぶん取る。 */
:is(button, input, .tnode)[disabled],
:is(button, input, .tnode)[aria-disabled="true"] { cursor: default; }
.linkish:disabled { opacity: .35; cursor: default; }
.linkish:disabled:hover { background: none; }
.ages label:has(input:disabled) { opacity: .4; cursor: default; }
.ages label:has(input:disabled):hover { background: none; }

/* 押せるものは二度押しの拡大を待たない（待つとタップが 300ms 遅れる）。
 * ツリーの行は div[role="treeitem"] なので要素では拾えない */
a, button, label, summary, input, .tnode { touch-action: manipulation; }

/* キーボードで今どこにいるか。押せるものを足したらここに入ること。
 * :where() で詳細度を 0 にしてあるので、後から個別に上書きできる */
:where(a, button, input, label, summary, .tnode):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* 目に見せず読み上げにだけ乗せる。display:none だと読み上げからも消える */
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  white-space: nowrap; clip-path: inset(50%);
}

/* ---------------- 器 ---------------- */

/* 中央に置く。padding と max-width を別々に持つと二重管理になるので、
 * 幅の式ひとつで決める */
.wrap, .inner {
  inline-size: min(100% - var(--gutter) * 2, var(--page));
  margin-inline: auto;
}

/* 縦に積むときの間。要素ごとに margin を持たせず、器がまとめて決める。
 * --flow を上書きすれば、その塊だけ間を変えられる */
.flow > * + * { margin-block-start: var(--flow, var(--space-s)); }

/* ---------------- ヘッダとフッタ ---------------- */

/* ふだんは見えず、tab で入ると出る。display:none だと tab でも入れない */
.skip {
  position: absolute; inset-block-start: 0; inset-inline-start: -100vw;
  z-index: 10; background: var(--bg); color: var(--accent);
  padding: var(--space-2xs) var(--space-s);
  font-size: var(--text-s); font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.skip:focus { inset-inline-start: 0; }

.site-header {
  border-block-end: 1px solid var(--line);
  background: var(--bg);
}
.site-header .inner {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2xs) var(--space-xl);
  padding-block: var(--space-s);
}
.site-header .brand {
  font-size: var(--text-s); font-weight: 700; letter-spacing: 0.01em;
  color: var(--text-strong); text-decoration: none;
}
.site-header .brand:hover { color: var(--accent); }
/* 名前のとなりに置く。端まで離すと、目が横断しないと行き先が見つからない */
.site-header nav { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.site-header nav a {
  font-size: var(--text-s); color: var(--text-soft); text-decoration: none;
  padding-block: var(--space-3xs);
}
.site-header nav a:hover { color: var(--accent); }
/* 現在地は色でなく太さと下線で示す。色は折れ線グラフのものにしてある */
.site-header nav a[aria-current="page"] {
  color: var(--text-strong); font-weight: 700;
  box-shadow: inset 0 -2px var(--text-strong);
}

.site-footer {
  margin-block-start: auto;
  border-block-start: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--text-xs); color: var(--text-muted);
}
.site-footer .inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2xs) var(--space-m);
  padding-block: var(--space-s);
}
.site-footer ul {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m);
  list-style: none; margin: 0; padding: 0;
}
.site-footer a { color: var(--text-soft); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

/* ---------------- ページの中身 ---------------- */

main.wrap {
  padding-block: var(--space-l) var(--space-2xl);
  display: flex; flex-direction: column; gap: var(--space-m);
}
main:focus { outline: none; }

h1 { font-size: var(--text-2xl); font-weight: 900; letter-spacing: -0.01em; }

/* 統計どうしの行き来。6 つは横並びのきょうだいなので、見出しの上に置いて
 * 「いまどれを見ているか」と「他に何があるか」を同時に見せる。
 * 一覧ページに戻ってから選び直す手間をなくす */
.switch {
  display: flex; flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-s);
  margin-block-end: var(--space-2xs);
  border-block-end: 1px solid var(--line);
}
.switch a {
  padding: var(--space-2xs) var(--space-3xs);
  color: var(--text-soft); text-decoration: none;
  font-size: var(--text-s);
}
.switch a:hover { color: var(--text-strong); }
.switch a[aria-current="page"] {
  color: var(--text-strong); font-weight: 700;
  box-shadow: inset 0 -2px var(--text-strong);
}

/* 見出しのすぐ下に置く説明。1 行を読める長さで折る */
.lede {
  margin: 0; max-inline-size: var(--measure);
  color: var(--text-soft); font-size: var(--text-s);
}
.lede a, .prose a, .stat a { color: var(--accent); }

/* 見出しと説明と導線の塊。ページの先頭で「何のページか」を言う */
.hero { display: flex; flex-direction: column; gap: var(--space-xs); }
.hero > p { margin: 0; max-inline-size: var(--measure); color: var(--text-soft); font-size: var(--text-s); }
.hero .cta { margin-block-start: var(--space-2xs); }

/* その統計の定義へ。いま見ているものの説明に、一覧を経由せず行ける */
.lede-link { font-size: var(--text-s); }

/* ---------------- 押せるもの ---------------- */

/* 一番強い導線。1 画面に 1 つだけ置く。
 * ここだけは塗る。折れ線グラフのある画面には出てこないので、
 * データの色と competing しない */
.button, button.primary {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-l);
  border: 0; border-radius: var(--radius-s);
  background: var(--accent-strong); color: #fff; text-decoration: none;
  font: inherit; font-size: var(--text-s); font-weight: 700;
  cursor: pointer;
}
.button:hover, button.primary:hover { background: var(--accent-hover); color: #fff; }

/* 文字だけの操作。押せることは色で示す */
.linkish {
  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-xs); color: var(--accent);
}
.linkish:hover { background: var(--hover); }

/* 押した瞬間の灰色は、自前で押した見た目を持つものだけ消す。
 * 本文のリンクから消すと、触った反応が何も無くなる */
.tnode, .legend-item, .linkish, .ages label, .chip button, .tile,
.button, button.primary, .skip {
  -webkit-tap-highlight-color: transparent;
}

/* ---------------- 面 ---------------- */

/* / と /dashboard/ で同じ面を使う。別々にすると 1 つのサイトに見えない */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-s);
  display: flex; flex-direction: column; gap: var(--space-2xs);
}
.card h2 { font-size: var(--text-s); font-weight: 700; }
/* カードの見出しの下の一言。中身が入れ替わるので、空でも 1 行ぶん取る
 * （.hint と同じ理由。取らないと、選んだ瞬間に下が落ちる） */
.card .sub {
  margin: 0; font-size: var(--text-xs); color: var(--text-muted);
  min-block-size: 1.7em;
}
/* 見出しの右に置く小物（件数・すべて外す） */
.card h2 { display: flex; align-items: center; gap: var(--space-2xs); }
.card h2 .linkish { margin-inline-start: auto; }

/* ---------------- フォーム（登録画面。HTML は Lambda 側が返す） ---------------- */

.field { display: flex; flex-direction: column; gap: var(--space-3xs); }
.field + .field { margin-block-start: var(--space-s); }
.field label { font-size: var(--text-s); font-weight: 700; }
.field :is(input, select) {
  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);
}