/*
 * OIKOS 活動記録 Web 画面のスタイル（依存なし・バンドラなし）。
 *
 * 参照元: デジタル庁デザインシステム（DADS）β版 v2.18.0
 *   https://design.digital.go.jp/dads/ （参照日 2026-09-25。サイト表示の版は v2.18.0）
 * 写経したもの:
 *   - 色・タイポグラフィ・角丸: @digital-go-jp/design-tokens v2.0.1 の dist/tokens.css
 *     https://cdn.jsdelivr.net/npm/@digital-go-jp/design-tokens@2.0.1/dist/tokens.css
 *     ライセンス: MIT（Copyright (c) 2023 デジタル庁。パッケージの LICENSE で確認）
 *   - ボタン・入力・ノティフィケーションバナー・フォーカスリングの寸法と指定:
 *     https://github.com/digital-go-jp/design-system-example-components-html （main, 2026-09-25 取得）
 *     src/components/{button,input-text,notification-banner}/*.css
 *     ライセンス: MIT（Copyright (c) 2025 デジタル庁。リポジトリの LICENSE で確認）
 *   - 公式サイト本文（ガイドライン文章）自体のライセンス表記は未確認。
 *   - 余白（8px 基準の段階）はトークンに含まれておらず、この値は本プロジェクトの設定（DADS 準拠かは未確認）。
 *
 * W7（2026-10-13）: 中立色は暖かい灰、アクセントは緑 1 色、枠は 1 枚・影は弱く。値の出典と比は docs/web/v2/briefs/w7-visual.md §4。
 *   本文 #1f1e1b / 白 16.7:1、補足 #625e55 / 白 6.46:1、入力の枠 #8a867c / 白 3.63:1（非文字 3:1）、
 *   リンク・主ボタン #15613d / 白 7.48:1。状態チップ: ok 7.15、warn 6.89、alert 6.70、info 7.82、muted 6.13（文字 / 塗り）。
 * 状態の意味は色ではなく語と記号で伝える（色は補助）。Web フォントは読み込まない（OS のフォント）。ダークモードは無い。
 */

:root {
  /* 中立色（暖かい灰） */
  --n-0: #ffffff;
  --n-50: #f6f5f1;
  --n-100: #edebe5;
  --n-200: #e4e1da;
  --n-300: #cfcbc2;
  --n-500: #8a867c;
  --n-600: #625e55;
  --n-800: #3a3833;
  --n-900: #1f1e1b;

  /* アクセント（緑 1 色。リンク・主ボタン・現在地） */
  --accent: #15613d;
  --accent-hover: #0f4d30;
  --accent-active: #0a3a24;
  --accent-weak: #e4f2e9;
  --accent-weak-border: #bddcc9;

  /* 状態（薄い塗り + 濃い文字。棒・丸印は -bar） */
  --tone-ok-fg: #0b5a33;    --tone-ok-bg: #e1f2e7;
  --tone-warn-fg: #6b4c00;  --tone-warn-bg: #fdefc3;  --tone-warn-bar: #c99700;
  --tone-alert-fg: #9b1c1c; --tone-alert-bg: #fde3e1; --tone-alert-bar: #b91c1c;
  --tone-info-fg: #26418f;  --tone-info-bg: #e3eaff;
  --tone-muted-fg: #5a564d; --tone-muted-bg: #edebe5;
  --tone-violet-fg: #5b2a8a; --tone-violet-bg: #efe4fa; --tone-violet-bar: #7b3fb5;
  --tone-orange-fg: #7a3600; --tone-orange-bg: #fde5d0; --tone-orange-bar: #d9690f;
  --tone-blue-bar: #3a5fd0;

  /* 役割（既存の名前を保つ。--app-bg は「ページの地」、白い面は --app-surface） */
  --app-bg: var(--n-50);
  --app-surface: var(--n-0);
  --app-bg-weak: var(--n-100);
  --app-text: var(--n-900);
  --app-text-sub: var(--n-600);
  --app-border: var(--n-500);
  --app-border-weak: var(--n-200);
  --app-accent: var(--accent);
  --app-accent-hover: var(--accent-hover);
  --app-accent-active: var(--accent-active);
  --app-accent-weak: var(--accent-weak);
  --app-focus: #1f1e1b;
  --app-focus-halo: #ffd43d;

  /* 文字（指定どおりに出る OS のフォント。Web フォントは読まない） */
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic UI", Meiryo, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, "Noto Sans Mono", monospace;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --lh-tight: 1.3;
  --lh-heading: 1.4;
  --lh-ui: 1.5;
  --lh-body: 1.65;

  /* 余白（8px 基準。本プロジェクトの設定） */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;

  /* 角丸・影 */
  --radius-4: 0.25rem;
  --radius-6: 0.375rem;
  --radius-8: 0.5rem;
  --radius-12: 0.75rem;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(31 30 27 / 6%), 0 1px 1px rgb(31 30 27 / 3%);
  --shadow-2: 0 4px 12px rgb(31 30 27 / 10%), 0 1px 3px rgb(31 30 27 / 6%);
  --shadow-3: 0 16px 40px rgb(31 30 27 / 16%), 0 2px 6px rgb(31 30 27 / 8%);

  --sidebar-w: 15.5rem;
  --content-w: 78rem;

  /* 旧名（段 2〜5 で順に新名へ移す。グラフ・名簿が参照する分は残る） */
  --color-neutral-white: #ffffff;
  --color-neutral-black: #000000;
  --color-neutral-solid-gray-50: #f2f2f2;
  --color-neutral-solid-gray-100: #e6e6e6;
  --color-neutral-solid-gray-200: #cccccc;
  --color-neutral-solid-gray-420: #949494;
  --color-neutral-solid-gray-536: #767676;
  --color-neutral-solid-gray-600: #666666;
  --color-neutral-solid-gray-700: #4d4d4d;
  --color-neutral-solid-gray-800: #333333;
  --color-neutral-solid-gray-900: #1a1a1a;
  --color-primitive-green-50: #e6f5ec;
  --color-primitive-green-100: #c2e5d1;
  --color-primitive-green-800: #197a4b;
  --color-primitive-green-900: #115a36;
  --color-primitive-green-1000: #0c472a;
  --color-primitive-green-1100: #08351f;
  --color-primitive-blue-100: #d9e6ff;
  --color-primitive-blue-900: #0017c1;
  --color-primitive-blue-1000: #00118f;
  --color-primitive-red-100: #ffdada;
  --color-primitive-red-800: #ec0000;
  --color-primitive-red-900: #ce0000;
  --color-primitive-red-1000: #a90000;
  --color-primitive-yellow-100: #fff0b3;
  --color-primitive-yellow-300: #ffd43d;
  --color-primitive-yellow-900: #927200;
  --color-primitive-yellow-1000: #806300;
  --color-semantic-success-2: var(--color-primitive-green-800);
  --color-semantic-error-1: var(--color-primitive-red-800);
  --color-semantic-error-2: var(--color-primitive-red-900);
  --color-semantic-warning-yellow-2: var(--color-primitive-yellow-900);
  --font-family-sans: var(--font-sans);
  --font-family-mono: var(--font-mono);
  --font-size-14: var(--fs-14);
  --font-size-16: var(--fs-16);
  --font-size-18: var(--fs-18);
  --font-size-20: var(--fs-20);
  --font-size-24: var(--fs-24);
  --font-size-28: var(--fs-28);
  --font-size-32: var(--fs-32);
  --line-height-140: 1.4;
  --line-height-150: 1.5;
  --line-height-170: 1.65;
  --border-radius-4: var(--radius-4);
  --border-radius-6: var(--radius-6);
  --border-radius-8: var(--radius-8);
  --border-radius-12: var(--radius-12);
  --app-content-width: 70rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

/* フォーカスリング: 黒 3px + 黄 5px のハロー（白地・緑地・黄地のどれの上でも見える） */
:focus-visible {
  outline: 3px solid var(--app-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--app-focus-halo);
  border-radius: var(--radius-4);
}

a {
  color: var(--app-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--app-accent-hover);
  text-decoration-thickness: 2px;
}

/*
 * 見出し（W7 §4）。h1 24 / h2 18（節。下線は引かない）/ h3 16〜18。
 * 節の上の余白は見出しの margin-top ではなく、section の間隔と .section-head が担う。
 */
h1,
h2,
h3,
h4 {
  line-height: var(--lh-heading);
  margin: var(--space-24) 0 var(--space-8);
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
}

h1 {
  font-size: var(--fs-24);
  font-weight: 700;
  margin: 0 0 var(--space-16);
}

h2 {
  font-size: var(--fs-18);
  font-weight: 700;
  margin-top: var(--space-24);
}

h3 {
  font-size: var(--fs-16);
  font-weight: 700;
}

h4 {
  font-size: var(--fs-16);
  font-weight: 700;
  margin-top: var(--space-16);
}

/* 節の先頭の見出し・main の先頭は、上の余白を詰める */
section > :is(h2, h3, h4):first-child,
.main > h1 + :is(h2, h3, section) > :is(h2, h3):first-child,
.card > :is(h2, h3, h4):first-child {
  margin-top: 0;
}

.main > section {
  margin-top: var(--space-24);
}

.main > section:first-of-type,
.main > h1 + section,
.main > .page-status + section,
.main > .page-status + nav + section {
  margin-top: var(--space-16);
}

p {
  margin: 0 0 var(--space-12);
}

ul,
ol {
  margin: 0 0 var(--space-12);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9375em;
  background: var(--app-bg-weak);
  border-radius: var(--radius-4);
  padding: 0 var(--space-4);
}

.skip-link {
  position: absolute;
  left: var(--space-8);
  top: -10rem;
  background: var(--app-surface);
  padding: var(--space-8) var(--space-16);
  z-index: 10;
  border-radius: var(--radius-8);
}

.skip-link:focus {
  top: var(--space-8);
}

/* ---- 本文とフッター（画面の枠は下の「画面の枠」） ---- */
.main:focus {
  outline: none;
}

.site-footer {
  color: var(--app-text-sub);
  font-size: var(--fs-14);
  line-height: var(--lh-ui);
}

.site-footer > p {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--space-16);
}

.breadcrumb {
  margin: 0 0 var(--space-8);
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-8);
  font-size: var(--font-size-14);
}

/* タップの高さは li に持たせ、リンクはインラインのまま（リンクと現在地のベースラインをそろえる） */
.breadcrumb li {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}

.breadcrumb li + li::before {
  content: '›';
  margin-right: var(--space-8);
  color: var(--app-text-sub);
}

.breadcrumb a {
  display: inline;
  padding: 0;
}

/* ---- 状態チップ（語＋記号。色は補助。枠は無く、薄い塗り + 濃い文字。forced-colors では枠が出る） ---- */
.state {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  border: 1px solid transparent;
  border-radius: var(--radius-6);
  padding: 0.05em 0.5em;
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: var(--lh-ui);
  white-space: nowrap;
  vertical-align: baseline;
}

.state + .state {
  margin-left: var(--space-4);
}

.state__mark {
  font-weight: 700;
}

.state[data-tone="ok"] { color: var(--tone-ok-fg); background: var(--tone-ok-bg); }
.state[data-tone="warn"] { color: var(--tone-warn-fg); background: var(--tone-warn-bg); }
.state[data-tone="alert"] { color: var(--tone-alert-fg); background: var(--tone-alert-bg); }
.state[data-tone="info"] { color: var(--tone-info-fg); background: var(--tone-info-bg); }
.state[data-tone="muted"] { color: var(--tone-muted-fg); background: var(--tone-muted-bg); }
.state[data-tone="violet"] { color: var(--tone-violet-fg); background: var(--tone-violet-bg); }
.state[data-tone="orange"] { color: var(--tone-orange-fg); background: var(--tone-orange-bg); }

/* 文中の状態語（塗りなし）: 「出席 4回」のような数値の前に置く小さな印 */
.state--inline {
  background: transparent !important;
  padding: 0;
}

.num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.sub,
.note,
.field__hint {
  color: var(--app-text-sub);
  font-size: var(--fs-14);
  line-height: var(--lh-ui);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.9375em;
}

.pre {
  white-space: pre-wrap;
}

/*
 * ---- 要約リスト（項目名と値の 2 列。行は区切り線だけ） ----
 * 単独で置くときだけ弱い枠で囲む。カードの中では外枠を落とす（枠は 1 枚。下の「.card .summary-list」）。
 * ホームの「いま確認すること」（.summary-list--home）は導線のカードとして残す（下で上書き）。
 */
.summary-list {
  margin: 0 0 var(--space-16);
  display: grid;
  gap: 0;
  border: 1px solid var(--app-border-weak);
  border-radius: var(--radius-8);
  background: var(--app-surface);
}

.summary-list__item {
  display: grid;
  grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-4) var(--space-16);
  border-bottom: 1px solid var(--app-border-weak);
  padding: var(--space-8) var(--space-16);
}

.summary-list__item:last-child {
  border-bottom: 0;
}

.card .summary-list__item,
.panel .summary-list__item {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 40rem) {
  .summary-list__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ホーム: 導線のカード（項目名を上、状態語と数字・リンクを下）。 */
.summary-list--home {
  gap: var(--space-8);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.summary-list--home .summary-list__item {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: var(--space-4);
  border: 1px solid var(--app-border-weak);
  border-radius: var(--radius-8);
  background: var(--app-surface);
  box-shadow: var(--shadow-1);
  padding: var(--space-12) var(--space-16);
}

.summary-list--home .summary-list__item:last-child {
  border-bottom: 1px solid var(--app-border-weak);
}

.summary-list dt {
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--app-text-sub);
  line-height: var(--lh-ui);
  padding-top: 0.15em;
}

.summary-list dd {
  margin: 0;
  line-height: var(--lh-ui);
}

.summary-list dd > ul {
  margin: 0;
  padding-left: var(--space-16);
}

.summary-list dd > .form {
  margin-top: var(--space-8);
}

/*
 * ホームの「いま確認すること」: 状態語と数字を左、導線のリンクを右に、指で押せる高さで置く。
 * リンクのない項目もある高さをそろえるため、dd に最小の高さを持たせる。幅が足りないときだけリンクを折り返す。
 */
.summary-list--home dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  min-height: 2.75rem;
}

.summary-list--home dd > a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 auto;
  min-height: 2.75rem;
  font-weight: 700;
}

.summary-list--home dd > a::after {
  content: ' →';
  white-space: pre;
}

.inline-list {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 var(--space-16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
}

.inline-list > li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  border: 1px solid var(--app-border-weak);
  border-radius: var(--border-radius-8);
  padding: var(--space-8) var(--space-12);
}

/* カード・パネル: 弱い枠 1 枚 + 薄い影。カードの中の要約リスト・表は外枠を持たない（二重の枠を作らない） */
.card,
.panel {
  border: 1px solid var(--app-border-weak);
  border-radius: var(--radius-12);
  background: var(--app-surface);
  box-shadow: var(--shadow-1);
  padding: var(--space-16);
  margin: 0 0 var(--space-16);
}

.card > :last-child,
.panel > :last-child {
  margin-bottom: 0;
}

/* 注意を要するカード: 左に 4px の棒 */
.card[data-attention="alert"] {
  box-shadow: inset 4px 0 0 var(--tone-alert-bar), var(--shadow-1);
}

.card[data-attention="warn"] {
  box-shadow: inset 4px 0 0 var(--tone-warn-bar), var(--shadow-1);
}

/* カードの題（状態語＋種別＋ID など）。ID は折り返して横にはみ出させない。 */
.card > :is(h2, h3):first-child,
.panel > :is(h2, h3):first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin: 0 0 var(--space-12);
}

.card > h3:first-child {
  font-size: var(--fs-18);
}

.card .mono {
  overflow-wrap: anywhere;
}

.card .summary-list,
.panel .summary-list,
.card .table-wrap,
.panel .table-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-left: 0;
  margin-right: 0;
}

.card .table-wrap,
.panel .table-wrap {
  margin-top: 0;
}

.card .table thead th:first-child,
.card .table td:first-child,
.card .table th[scope="row"],
.panel .table thead th:first-child,
.panel .table td:first-child,
.panel .table th[scope="row"] {
  padding-left: 0;
}

.card .table thead th:last-child,
.card .table td:last-child,
.panel .table thead th:last-child,
.panel .table td:last-child {
  padding-right: 0;
}

/* ---- 表（横長の表だけラッパー内で横スクロール） ---- */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 var(--space-16);
  border: 1px solid var(--app-border-weak);
  border-radius: var(--radius-8);
  background: var(--app-surface);
}

.table-wrap:focus-visible {
  outline-offset: 0;
}

.table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: var(--fs-14);
  line-height: var(--lh-ui);
}

.table caption {
  text-align: left;
  font-weight: 700;
  padding: var(--space-8) var(--space-12);
}

.table th,
.table td {
  border-bottom: 1px solid var(--app-border-weak);
  padding: var(--space-8) var(--space-12);
  text-align: left;
  vertical-align: top;
}

.table tbody tr:last-child > th,
.table tbody tr:last-child > td {
  border-bottom: 0;
}

.table thead th {
  background: transparent;
  border-bottom: 1px solid var(--n-300);
  color: var(--app-text-sub);
  font-weight: 700;
  white-space: nowrap;
  vertical-align: bottom;
}

.table th[scope="row"] {
  font-weight: 700;
}

.table td.num,
.table th.num {
  text-align: right;
}

.table tbody tr:hover > td,
.table tbody tr:hover > th {
  background: var(--n-50);
}

/* 表の中のボタン付きフォーム: ボタンの文字を折り返さず、縦に詰めて並べる */
.table td > .form--inline {
  display: block;
  margin: 0 0 var(--space-8);
}

.table td > .form--inline:last-child {
  margin-bottom: 0;
}

/* 取り込み状態: 操作は列にせず、行の直後の .row--actions に横並びで置く（列が画面外に出ない） */
.table td .button-row {
  gap: var(--space-8);
}

.table td .button-row .form--inline {
  display: inline-block;
  margin: 0;
}

.table .row--has-actions > th,
.table .row--has-actions > td {
  border-bottom: 0;
}

.table .row--actions td {
  padding-top: 0;
}

/* カード表示の表（列の多い表）は見出しを折り返して、列が画面外に出ないようにする */
.table--cards thead th {
  white-space: normal;
}

/* 行見出しの ID・日付のリンクは途中で折り返さない */
.table th[scope="row"] code,
.table th[scope="row"] a {
  white-space: nowrap;
}

.table .button {
  white-space: nowrap;
}

.table td > .form:not(.form--inline) {
  margin: 0;
}

.table .button[data-size="sm"],
.table td > .form--inline .button {
  min-height: 2.75rem;
  min-width: 0;
  padding: var(--space-4) var(--space-12);
}

/* 行見出し・数値セルは最小幅を確保し、狭い画面で1文字ずつ折り返さない（表はラッパーで横スクロール）。 */
.table th[scope="row"] {
  min-width: 10em;
}

.table td {
  min-width: 5em;
}

/* 強調行の印は内側の影で描く（border だと行見出しの幅が 4px 増えて、他の行とずれる） */
.table .row--attention th[scope="row"] {
  box-shadow: inset 4px 0 0 var(--tone-warn-bar);
}

.card .table .row--attention th[scope="row"],
.panel .table .row--attention th[scope="row"] {
  padding-left: var(--space-12);
}

/* 訂正済みの確定値・選択中の版。意味は状態語が担い、見た目は補助。 */
.table .row--muted {
  color: var(--app-text-sub);
}

.table .row--current th[scope="row"] {
  box-shadow: inset 4px 0 0 var(--app-accent);
}

/* ---- フォーム（スマホは縦並び） ---- */
.form {
  display: grid;
  gap: var(--space-24);
  margin: var(--space-16) 0 var(--space-24);
  justify-items: start;
}

.form > * {
  min-width: 0;
  max-width: 100%;
}

.form > .field,
.form > .fieldset,
.form > .banner,
.form > .confirm,
.form > .note,
.form > h2,
.form > h3,
.form > p,
.form > .table-wrap,
.form > .button-row {
  justify-self: stretch;
}

/* フォーム内の見出し・注記は入力欄の間で詰める */
.form > h2,
.form > h3 {
  margin-top: var(--space-8);
  margin-bottom: 0;
}

.form > .note,
.form > p {
  margin: 0;
}

.form--inline,
.form--row {
  gap: var(--space-8);
  margin: 0;
}

.field {
  display: grid;
  gap: var(--space-4);
}

.field__label,
.fieldset legend {
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: var(--lh-ui);
}

.field__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  padding-bottom: var(--space-4);
}

.fieldset legend {
  padding: 0 var(--space-4);
}

.field__hint {
  margin: 0;
}

.field__static {
  margin: 0;
}

.fieldset {
  display: grid;
  gap: var(--space-8);
  border: 1px solid var(--app-border-weak);
  border-radius: var(--radius-8);
  background: var(--app-surface);
  padding: var(--space-8) var(--space-16) var(--space-12);
  margin: 0;
  min-width: 0;
}

.fieldset > .field__hint {
  margin-top: calc(-1 * var(--space-4));
}

.req {
  display: inline-block;
  font-size: var(--fs-12);
  font-weight: 700;
  line-height: 1.5;
  border-radius: var(--radius-4);
  padding: 0 0.4em;
}

.req[data-required="true"] {
  color: var(--tone-alert-fg);
  background: var(--tone-alert-bg);
}

.req[data-required="false"] {
  color: var(--app-text-sub);
  background: var(--tone-muted-bg);
}

/* 入力（高さ 44px・枠 #8a867c は白地 3.63:1・角丸 8px。読み取り専用は破線） */
.input,
.select,
.textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-8);
  background: var(--app-surface);
  color: var(--app-text);
  font: inherit;
  padding: var(--space-8) var(--space-12);
  min-height: 2.75rem;
}

.input--number {
  max-width: 10rem;
}

.textarea {
  line-height: var(--line-height-170);
  resize: vertical;
}

.input:read-only:not(:disabled) {
  border-style: dashed;
}

@media (hover: hover) {
  .input:not(:read-only):hover,
  .select:hover,
  .textarea:hover {
    border-color: var(--n-900);
  }
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"],
.fieldset[aria-invalid="true"] {
  border-color: var(--tone-alert-bar);
  border-width: 2px;
}

.field-error {
  margin: 0;
  color: var(--tone-alert-fg);
  font-weight: 700;
  font-size: var(--fs-14);
}

.field-error::before {
  content: '！ ';
}

.radio,
.checkbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  min-height: 2.75rem;
  cursor: pointer;
}

.radio .sub,
.checkbox .sub {
  margin-left: var(--space-4);
  white-space: nowrap;
}

.search-results .radio,
.search-results .checkbox {
  min-height: 2.75rem;
  padding: var(--space-4) 0;
}

.radio input,
.checkbox input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--accent);
}

/*
 * ボタン（W7 §5.5）。solid = 緑地 + 白文字（1 カードに 1 つ）、outline = 白地 + 灰の枠 + 黒文字、
 * text = 緑の下線文字、danger = 白地 + 赤枠 + 赤文字。高さは sm 44px（既定）・md 48px。
 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: fit-content;
  max-width: 100%;
  min-width: 5.5rem;
  min-height: 2.75rem;
  border-radius: var(--radius-8);
  padding: var(--space-8) var(--space-16);
  font: inherit;
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.button[data-variant="solid"] {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-1);
}

.button[data-variant="outline"] {
  border: 1px solid var(--n-300);
  background: var(--app-surface);
  color: var(--app-text);
}

.button[data-variant="text"] {
  border: 1px solid transparent;
  background: transparent;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.button[data-variant="danger"] {
  border: 1px solid var(--tone-alert-bar);
  background: var(--app-surface);
  color: var(--tone-alert-fg);
}

@media (hover: hover) {
  .button[data-variant="solid"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .button[data-variant="outline"]:hover { border-color: var(--n-500); background: var(--n-50); }
  .button[data-variant="text"]:hover { background: var(--accent-weak); }
}

.button[data-variant="solid"]:active { background: var(--accent-active); box-shadow: none; }

.button[data-size="md"] {
  min-height: 3rem;
  padding: var(--space-8) var(--space-20);
  font-size: var(--fs-16);
}

.button[data-size="sm"] {
  min-height: 2.75rem;
  min-width: 4.5rem;
  padding: var(--space-4) var(--space-12);
  font-size: var(--fs-14);
}

.button:disabled,
.button[aria-disabled="true"] {
  cursor: default;
  background: var(--n-100);
  color: var(--n-600);
  border-color: transparent;
  box-shadow: none;
  text-decoration: none;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
}

.button-row--end {
  justify-content: flex-end;
}

/* 「次のページ」などリンクをボタンの見た目で出すとき */
a.button {
  text-decoration: none;
}

/* バナー（W7 §5.8）: 薄い塗り + 左 4px の棒 + 濃い見出し。本文は本文色 */
.banner {
  --_fg: var(--tone-info-fg);
  --_bg: var(--tone-info-bg);
  --_bar: var(--tone-info-fg);
  border: 1px solid transparent;
  border-left: 4px solid var(--_bar);
  border-radius: var(--radius-8);
  background: var(--_bg);
  color: var(--app-text);
  padding: var(--space-12) var(--space-16);
  margin: 0 0 var(--space-16);
}

.banner[data-type="success"] { --_fg: var(--tone-ok-fg); --_bg: var(--tone-ok-bg); --_bar: var(--tone-ok-fg); }
.banner[data-type="warning"] { --_fg: var(--tone-warn-fg); --_bg: var(--tone-warn-bg); --_bar: var(--tone-warn-bar); }
.banner[data-type="error"] { --_fg: var(--tone-alert-fg); --_bg: var(--tone-alert-bg); --_bar: var(--tone-alert-bar); }
.banner[data-type="info"] { --_fg: var(--tone-info-fg); --_bg: var(--tone-info-bg); --_bar: var(--tone-info-fg); }

.banner__heading {
  font-weight: 700;
  color: var(--_fg);
  line-height: var(--lh-ui);
  margin: 0 0 var(--space-4);
}

/* エラーの題の前に、丸い「!」記号を CSS で描く（画像は使わない。意味は題の文が担う） */
.banner[data-type="error"] > .banner__heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.banner[data-type="error"] > .banner__heading::before {
  content: '!';
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1em;
  border-radius: 50%;
  background: var(--_bar);
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.banner__body {
  font-weight: 400;
}

.banner > p {
  margin: 0 0 var(--space-4);
  line-height: var(--lh-ui);
}

.banner > p:last-child,
.banner > ul:last-child {
  margin-bottom: 0;
}

.banner .button-row {
  margin-top: var(--space-4);
}

.page-status:empty {
  display: none;
}

.page-status .banner {
  margin-top: 0;
}

/* 保存後に続きの位置へ移ったとき、結果の帯を画面の下に一時的に浮かせる */
.page-status--float {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 20;
  max-width: 40rem;
  margin: 0 auto;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
}

.dirty {
  margin: 0;
  font-weight: 700;
  color: var(--tone-warn-fg);
}

.confirm {
  border: 1px solid var(--accent-weak-border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-8);
  background: var(--accent-weak);
  padding: var(--space-12) var(--space-16);
}

.confirm__heading {
  font-weight: 700;
  margin: 0 0 var(--space-8);
}

/* 空の状態: 破線の枠 + 薄い地 + 補足色の 1 文 + 右に操作 */
.empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  padding: var(--space-16);
  border: 1px dashed var(--n-300);
  border-radius: var(--radius-8);
  color: var(--app-text-sub);
  background: var(--n-50);
}

.empty > p {
  margin: 0;
}

.empty .button {
  margin-left: auto;
}

.card .empty,
.panel .empty {
  padding: var(--space-12) var(--space-16);
}

.search-results {
  display: grid;
  gap: 0;
}

.search-results > .note {
  margin: 0;
}

[hidden] {
  display: none !important;
}

/* 広い画面では一部を横並びに（スマホは縦並びのまま）。 */
@media (min-width: 48rem) {
  .summary-list--home {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-12);
  }

  .form--inline,
  .form--row {
    grid-template-columns: repeat(auto-fit, minmax(10rem, max-content));
    align-items: end;
  }

  .table th,
  .table td {
    padding: var(--space-12) var(--space-16);
  }

  .table caption {
    padding: var(--space-12) var(--space-16);
  }

  .card,
  .panel {
    padding: var(--space-20) var(--space-24);
  }

  /* 入力欄はページいっぱいに伸ばさない（DADS の入力欄の推奨幅に近づける）。ラジオ・チェックの枠も同じ幅にそろえる。 */
  .form > .field:has(> .input:not(.input--number)),
  .form > .field:has(> .select),
  .form > .field:has(> .textarea),
  .form > .fieldset {
    max-width: 40rem;
  }

  /* 支部の切り替えの select は、他の select と幅をそろえる */
  .form--picker .select {
    min-width: 20rem;
  }

  /* 開催詳細の参加者: 出欠・申込状態の select 2 つとボタンを 1 行に並べる（1 人 1 行の高さに収める） */
  .table td.cell--action > .form--row {
    grid-template-columns: repeat(2, minmax(9rem, 1fr)) auto;
    align-items: end;
    gap: var(--space-8);
  }

  .table td.cell--action:has(> .form--row) {
    min-width: 30rem;
  }

}

/*
 * スマホ幅（640px 以下）: `.table--cards` の表は、各行をカードに積む（横スクロールで操作を隠さない）。
 * 見出し行は隠し、各セルの data-label を ::before で見出しに出す。氏名（行見出し）はカードの題にする。
 * 更新フォーム（.cell--action）はカードの最下段。出欠・申込状態を2列、ボタンを下段いっぱいに置く。
 * PC 幅（641px 以上）は従来の表のまま。app.css を変えたら layout.ts の ASSET_VERSION を上げる。
 */
@media (max-width: 640px) {
  .table--cards,
  .table--cards caption,
  .table--cards tbody,
  .table--cards tr,
  .table--cards th,
  .table--cards td {
    display: block;
  }

  .table--cards {
    min-width: 0;
    width: 100%;
  }

  .table-wrap:has(> .table--cards) {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .card .table-wrap:has(> .table--cards),
  .panel .table-wrap:has(> .table--cards) {
    margin: 0;
  }

  .table--cards caption {
    padding: 0 0 var(--space-8);
    border-bottom: 0;
  }

  .table--cards thead {
    display: none;
  }

  .table--cards tr {
    border: 1px solid var(--app-border-weak);
    border-radius: var(--radius-8);
    background: var(--app-surface);
    padding: var(--space-12) var(--space-16);
    margin-bottom: var(--space-8);
  }

  .card .table--cards tr,
  .panel .table--cards tr {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }

  /* 未確認行の強調は、表の行見出しの左ボーダーから、カード全体の左ボーダーへ移す。 */
  .table--cards .row--attention {
    box-shadow: inset 4px 0 0 var(--tone-warn-bar);
  }

  .table--cards .row--attention th[scope="row"] {
    box-shadow: none;
  }

  .card .table--cards th[scope="row"],
  .panel .table--cards th[scope="row"] {
    padding-left: 0;
  }

  .table--cards th[scope="row"] {
    min-width: 0;
    border-bottom: 1px solid var(--app-border-weak);
    padding: 0 0 var(--space-8);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-16);
  }

  /*
   * セル: 左 6rem に見出し（data-label）、右に中身。見出しは左の余白に浮かせ（float）、中身は通常の文の流れのまま置く。
   * grid にしないのは、状態ラベルがセル幅いっぱいに伸びるのと、中身が複数の要素のときに段がずれるのを避けるため。
   */
  .table--cards td {
    display: flow-root;
    min-width: 0;
    border-bottom: 0;
    padding: var(--space-4) 0 var(--space-4) calc(6rem + var(--space-8));
  }

  .home-roster .table--cards td { padding-left: 0; }
  .home-roster .table--cards td::before { display: none; }

  .table--cards td::before {
    content: attr(data-label);
    float: left;
    width: 6rem;
    margin-left: calc(-6rem - var(--space-8));
    font-weight: 700;
    color: var(--app-text-sub);
  }

  .table--cards td:empty {
    display: none;
  }

  /* 長い状態語（例: 小標本（N<10のため値を出さない））はカードの幅で折り返す */
  .table--cards .state {
    white-space: normal;
  }

  /* 取り込み状態: 操作の行（.row--actions）は、直前の行のカードの最下段としてつなげる */
  .table--cards .row--has-actions {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .table--cards .row--actions {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .table--cards .row--actions .button-row .form--inline,
  .table--cards .row--actions .button-row .button {
    width: 100%;
  }

  .table--cards td.cell--action {
    display: block;
    border-top: 1px solid var(--app-border-weak);
    margin-top: var(--space-8);
    padding: var(--space-12) 0 var(--space-4);
  }

  .table--cards td.cell--action + td.cell--action {
    margin-top: 0;
  }

  .table--cards td.cell--action > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 700;
  }

  /* フォーム自体が項目名（ラベル）を持つので、セル見出しは出さない。 */
  .table--cards td.cell--action::before {
    content: none;
  }

  /* セルの中のフォームは 1 列（ラジオ群・理由の欄を横に並べない）。出欠・申込状態の select の組（.form--row）だけ 2 列。 */
  .table--cards .cell--action .form {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
  }

  .table--cards .cell--action .form--row {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }

  .table--cards .cell--action .button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 2.75rem;
  }
}

@media (forced-colors: active) {
  .state,
  .button,
  .card,
  .panel,
  .todo__item {
    border: 1px solid CanvasText;
  }

  .sidebar__nav a[aria-current="page"] {
    outline: 2px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* タブ（ページ内の切り替え）: 下線 1px の上に、現在地だけ 2px の緑の線 + 太字。件数は .tabs__count */
.tabs__list,
.home-roster__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  margin: 0 0 var(--space-16);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--app-border-weak);
}

.tabs__link,
.home-roster__tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 2.75rem;
  padding: var(--space-8) var(--space-12);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--app-text-sub);
  text-decoration: none;
  font-weight: 500;
}

@media (hover: hover) {
  .tabs__link:hover,
  .home-roster__tabs a:hover {
    color: var(--app-text);
    border-bottom-color: var(--n-300);
  }
}

.tabs__link[aria-current="page"],
.home-roster__tabs a[aria-current="page"] {
  color: var(--app-text);
  font-weight: 700;
  border-bottom-color: var(--accent);
  background: transparent;
}

.tabs__count {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0 var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--app-bg-weak);
  font-size: var(--fs-14);
  font-weight: 700;
  text-align: center;
}

.tabs__link[aria-current="page"] .tabs__count {
  background: var(--accent-weak);
  color: var(--accent);
}

.answer-value {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.answer-values {
  margin: 0;
  padding-left: var(--space-16);
}

/*
 * アコーディオン（W7 §5.7。native の details/summary）。上下に区切り線、左に 24px の丸い chevron（data URI の SVG。
 * 画像ファイルは使わない）、48px 行。節全体を畳むときは .accordion--section（枠線なし）。フォーカスリングは共通の :focus-visible。
 */
.accordion {
  border-top: 1px solid var(--app-border-weak);
}

.accordion:last-child {
  border-bottom: 1px solid var(--app-border-weak);
}

.accordion + :is(p, form, div) {
  margin-top: var(--space-24);
}

.accordion__content > .table-wrap:first-child,
.accordion__content > .form:first-child,
.accordion__content > .banner:first-child {
  margin-top: 0;
}

.accordion__content > :last-child {
  margin-bottom: 0;
}

.accordion__summary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-12);
  min-height: 3rem;
  padding: var(--space-8) var(--space-4);
  color: var(--app-text);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: var(--lh-ui);
  border-radius: var(--radius-6);
  cursor: pointer;
  list-style: none;
}

.accordion__summary::marker {
  content: "";
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary::before {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--accent-weak-border);
  background: var(--app-surface);
}

/* 丸の中の chevron は罫線で描く（CSP に img-src が無く data: の画像は止められるため）。 */
.accordion__summary::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--space-4) + 0.75rem);
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion[open] > .accordion__summary::after {
  transform: translate(-50%, -25%) rotate(225deg);
}

@media (hover: hover) {
  .accordion__summary:hover {
    background-color: var(--n-50);
  }
}

.accordion__summary .sub {
  font-weight: 400;
}

.accordion__summary :is(h2, h3, h4) {
  margin: 0;
  font: inherit;
  font-weight: 700;
}

.accordion__content {
  padding: var(--space-8) var(--space-4) var(--space-20) calc(1.5rem + var(--space-12));
}

/* 節全体を畳むアコーディオン（カードの外。見出しだけの行） */
.accordion--section {
  margin: 0 0 var(--space-8);
  border: 0;
}

.accordion--section:last-child {
  border-bottom: 0;
}

.accordion--section > .accordion__summary {
  font-size: var(--fs-16);
}

.accordion--section > .accordion__content {
  padding-left: 0;
  padding-right: 0;
}

/*
 * ディスクロージャー（W7 §5.7）。summary をボタン（.button）の見た目にし、右に開閉の chevron を足す。
 * 開いている間は薄い緑の地。中身は薄い灰の箱。
 */
.disclosure__summary {
  gap: var(--space-8);
  list-style: none;
}

.disclosure__summary::marker {
  content: "";
}

.disclosure__summary::-webkit-details-marker {
  display: none;
}

.disclosure__summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.45em;
  height: 0.45em;
  margin-top: -0.2em;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(45deg);
}

.disclosure[open] > .disclosure__summary::after {
  margin-top: 0.2em;
  transform: rotate(225deg);
}

.disclosure[open] > .disclosure__summary[data-variant="outline"] {
  background: var(--accent-weak);
  border-color: var(--accent-weak-border);
  color: var(--accent);
}

.disclosure[open] > .disclosure__summary[data-variant="solid"] {
  background: var(--accent-active);
}

.disclosure__content {
  margin: var(--space-12) 0 0;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--app-border-weak);
  border-radius: var(--radius-8);
  background: var(--n-50);
}

.disclosure__content > :last-child {
  margin-bottom: 0;
}

.disclosure + .accordion,
.disclosure + .note,
.disclosure + p {
  margin-top: var(--space-24);
}

.cell--action .disclosure__content {
  margin: var(--space-8) 0 0;
  padding: var(--space-8) var(--space-12);
}

.cell--action .disclosure__content > .note {
  margin: 0;
}

/* 画面には出さず、読み上げだけに渡す語（例: 「操作」ボタンがどの行のものか）。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 画面の枠（W7 §3: 左の白いサイドバー + 右の作業領域。64rem 未満は上の 2 段） ---- */
.layout {
  min-height: 100vh;
  min-height: 100dvh;
}

.sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  position: relative;
  z-index: 2;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border-weak);
}

.sidebar__brand {
  grid-column: 1;
  grid-row: 1;
  padding: var(--space-8) var(--space-16);
  min-width: 0;
}

.site-title {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: var(--lh-heading);
  white-space: nowrap;
}

.site-title__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 2.75rem;
  color: var(--app-text);
  text-decoration: none;
}

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

/* 団体のシンボル（正方形。96px の PNG を 40px で。隣に「OIKOS ポータル」の文字があるので画像の代替テキストは空） */
.site-logo {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  background-image: url(/assets/oikos-symbol-96.png?v=2026-10-13-1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 支部の表示: 枠で囲まず、見出し語 + 名前 + 切り替え（本部だけ） */
.sidebar__branch {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  padding: var(--space-8) var(--space-16) var(--space-12);
  border-top: 1px solid var(--app-border-weak);
}

.sidebar__branch-role,
.sidebar__branch-name,
.sidebar__email {
  margin: 0;
}

.sidebar__branch-role {
  color: var(--app-text-sub);
  font-size: var(--fs-14);
  line-height: var(--lh-ui);
}

.sidebar__branch-name {
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: var(--lh-ui);
}

.sidebar__branch .form--picker {
  margin: var(--space-8) 0 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: end;
}

.sidebar__branch .form--picker .field,
.sidebar__branch .form--picker .select {
  min-width: 0;
  width: 100%;
}

.sidebar__branch .form--picker .field__label,
.sidebar__branch .form--picker .required {
  font-size: var(--fs-14);
}

.sidebar__branch .select {
  min-height: 2.75rem;
  padding: var(--space-4) var(--space-12);
  font-size: var(--fs-14);
}

.sidebar__desktop-menu {
  display: none;
}

.sidebar__menu {
  grid-column: 2;
  grid-row: 1;
  margin-right: var(--space-16);
}

.sidebar__menu-toggle {
  min-width: 5.25rem;
  cursor: pointer;
  list-style: none;
}

.sidebar__menu-toggle::-webkit-details-marker {
  display: none;
}

.sidebar__menu-toggle::after {
  content: '⌄';
  margin-left: var(--space-8);
}

.sidebar__menu[open] .sidebar__menu-toggle::after {
  content: '⌃';
}

.sidebar__menu-content {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  padding: var(--space-12) var(--space-12) var(--space-16);
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border-weak);
  box-shadow: var(--shadow-3);
}

.sidebar__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}

.nav-group + .nav-group {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--app-border-weak);
}

.nav-group__label {
  margin: 0 0 var(--space-4);
  padding: 0 var(--space-12);
  color: var(--app-text-sub);
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: var(--lh-ui);
}

.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 2.75rem;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-8);
  color: var(--app-text);
  text-decoration: none;
  font-size: var(--fs-15);
  line-height: var(--lh-ui);
}

.sidebar__nav a:hover {
  background: var(--app-bg-weak);
  color: var(--app-text);
}

.sidebar__nav a[aria-current="page"] {
  font-weight: 700;
  color: var(--accent);
  background: var(--app-accent-weak);
  box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar__foot {
  margin-top: var(--space-16);
  padding: var(--space-12) var(--space-12) 0;
  border-top: 1px solid var(--app-border-weak);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
}

.sidebar__email {
  flex: 1 1 10rem;
  color: var(--app-text-sub);
  font-size: var(--fs-14);
  line-height: var(--lh-ui);
  overflow-wrap: anywhere;
}

.site-account__logout {
  margin: 0;
}

.workspace {
  min-width: 0;
}

.workspace .main {
  max-width: var(--content-w);
  min-height: min(75vh, 44rem);
  margin: 0 auto;
  padding: var(--space-20) var(--space-16) var(--space-64);
}

.workspace .main > h1 {
  margin: 0 0 var(--space-16);
  font-size: var(--fs-24);
}

.workspace .main > section,
.workspace .main > .panel {
  margin-top: var(--space-24);
}

.workspace .main > section > h2:first-child,
.workspace .main > .panel > h2:first-child {
  margin-top: 0;
}

.workspace .site-footer > p {
  max-width: var(--content-w);
}

.panel {
  background: var(--app-surface);
  border: 1px solid var(--app-border-weak);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-1);
  padding: var(--space-16);
}

@media (min-width: 64rem) {
  /* 縦に長いページでもサイドバーの列が途切れないよう、左の列だけ白く塗る */
  .layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    background: linear-gradient(to right, var(--app-surface) var(--sidebar-w), transparent var(--sidebar-w));
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    padding: var(--space-16) var(--space-12) var(--space-16);
    border-right: 1px solid var(--app-border-weak);
    border-bottom: 0;
  }

  .sidebar__brand {
    padding: 0 var(--space-8) var(--space-12);
  }

  .sidebar__branch {
    padding: var(--space-12) var(--space-8);
    border-top: 0;
    border-bottom: 1px solid var(--app-border-weak);
  }

  .sidebar__branch .form--picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar__branch .form--picker .button {
    width: 100%;
  }

  .sidebar__desktop-menu {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-top: var(--space-12);
  }

  .sidebar__desktop-menu .sidebar__foot {
    margin-top: auto;
  }

  .sidebar__menu {
    display: none;
  }

  .workspace .main {
    padding: var(--space-32) var(--space-40) var(--space-64);
  }
}

@media (max-width: 63.999rem) {
  .sidebar__branch .form--picker {
    max-width: 34rem;
  }
}

@media (max-width: 40rem) {
  .site-title {
    font-size: var(--fs-16);
  }

  .site-logo {
    width: 2.25rem;
    height: 2.25rem;
  }

  .sidebar__branch-role,
  .sidebar__branch-name {
    display: inline;
  }

  .sidebar__branch-role::after {
    content: ' · ';
  }
}

/*
 * ---- W7 段 6: W6 のマークアップが使う部品（回答の確認の 2 層カード・人ごとのブロック・いま確認すること） ----
 * response-card / person-block は回答の確認の views が付ける。todo* / situation-nav / safety-item は使える状態にしてある（任意）。
 */
.situation-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin: 0 0 var(--space-16);
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
}

.situation-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 2.75rem;
  padding: 0 var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--app-surface);
  border: 1px solid var(--app-border-weak);
  color: var(--app-text);
  text-decoration: none;
}

.situation-nav a:hover {
  border-color: var(--n-500);
}

/* フォームの種類: 左の太い線（札の文言と一緒に使う。色だけに頼らない） */
.response-card[data-form-kind] { border-left: 6px solid var(--tone-muted-bar, var(--n-500)); }
.response-card[data-form-kind="registration"] { border-left-color: var(--tone-blue-bar); }
.response-card[data-form-kind="participation"] { border-left-color: var(--tone-ok-fg); }
.response-card[data-form-kind="other"] { border-left-color: var(--n-500); }

.response-legend { margin: 0 0 var(--space-12); line-height: var(--lh-ui); }

.response-card > h3:first-child {
  font-size: var(--fs-18);
}

.response-card__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-12);
  margin: 0 0 var(--space-8);
  line-height: var(--lh-ui);
}

.response-card__next {
  margin: var(--space-8) 0 var(--space-12);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-8);
  background: var(--n-50);
  line-height: var(--lh-ui);
}

.response-card .banner {
  margin-bottom: var(--space-8);
}

.response-card > p {
  line-height: var(--lh-ui);
}

/* 作業領域（下層） */
.accordion[data-role="work"] {
  margin: 0 0 var(--space-12);
}

.work__content {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-12);
}

.person-block {
  border: 1px solid var(--app-border-weak);
  border-radius: var(--radius-8);
  background: var(--app-surface);
  padding: var(--space-8) var(--space-16) var(--space-12);
}

.person-block legend {
  font-weight: 700;
  padding: 0 var(--space-4);
}

.person-block > .note {
  margin: 0 0 var(--space-4);
}

.body-block > .accordion__summary {
  font-weight: 500;
  color: var(--app-text-sub);
}

/* いま確認すること: 白いカード + 左 4px の棒（warn 黄 / alert 赤）+ 丸い記号 + 1 行の文 + 右に主ボタン */
.todo {
  margin: 0 0 var(--space-24);
}

.todo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
}

.todo__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  padding: var(--space-12) var(--space-16);
  background: var(--app-surface);
  border: 1px solid var(--app-border-weak);
  border-left: 4px solid var(--tone-warn-bar);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-1);
}

.todo__item[data-tone="alert"] {
  border-left-color: var(--tone-alert-bar);
}

.todo__mark {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tone-warn-bg);
  color: var(--tone-warn-fg);
  font-weight: 700;
  font-size: var(--fs-14);
}

.todo__item[data-tone="alert"] .todo__mark {
  background: var(--tone-alert-bg);
  color: var(--tone-alert-fg);
}

.todo__text {
  margin: 0;
  line-height: var(--lh-ui);
}

.todo__text .sub {
  display: block;
}

@media (max-width: 40rem) {
  .todo__item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .todo__item > .button,
  .todo__item > a.button {
    grid-column: 2;
    justify-self: start;
  }
}

.safety-item dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
}

.safety-item .src {
  font-size: var(--fs-14);
  color: var(--app-text-sub);
}

/* 今日の運営（W7 §5.9）: 次回の開催（日付 28px + 状態 + 詳細）→ 前後の開催 → 数値 3 タイル → 参加者 → 申し送り */
.home-next {
  padding: var(--space-16) var(--space-20);
}

.home-next__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
}

.home-next__eyebrow {
  flex-basis: 100%;
  margin: 0;
  color: var(--app-text-sub);
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: var(--lh-ui);
}

.home-next__main > h2 {
  margin: 0;
  font-size: var(--fs-28);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.home-next__detail {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.home-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--app-border-weak);
  font-size: var(--fs-14);
}

.home-switch a {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  min-height: 2.75rem;
}

/* 数値 3 つ: 1 枚の白い箱を 3 分割（区切り線だけ）。未確認のタイルだけ黄の塗り + 上 4px の棒 */
.home-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  margin: 0 0 var(--space-16);
  background: var(--app-surface);
  border: 1px solid var(--app-border-weak);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-1);
}

.home-stats__item {
  min-width: 0;
  padding: var(--space-16) var(--space-20);
  border-right: 1px solid var(--app-border-weak);
}

.home-stats__item[data-attention="attendance"] {
  background: var(--tone-warn-bg);
  box-shadow: inset 0 4px 0 var(--tone-warn-bar);
}

.home-stats__item:last-child {
  border-right: 0;
}

.home-stats__label,
.home-stats__note {
  margin: 0;
  color: var(--app-text-sub);
  font-size: var(--fs-14);
  line-height: var(--lh-ui);
}

.home-stats__label {
  font-weight: 700;
}

.home-stats__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-8);
  margin: var(--space-4) 0;
}

.home-stats__value .num {
  color: var(--app-text);
  font-size: var(--fs-32);
  line-height: var(--lh-tight);
}

.home-stats__value .sub {
  font-size: var(--fs-16);
}

.home-roster {
  margin-top: var(--space-16);
}

.home-roster .table-wrap {
  margin-bottom: var(--space-16);
}

@media (max-width: 40rem) {
  .home-next {
    padding: var(--space-12) var(--space-16);
  }

  .home-next__main > h2 {
    font-size: var(--fs-24);
  }

  .home-stats__item {
    padding: var(--space-12);
  }

  .home-stats__value .num {
    font-size: var(--fs-24);
  }

  .home-stats__value .sub {
    font-size: var(--fs-14);
  }
}

/* ---- 人物詳細（T78）: 強調する 3 項目と対応記録 ---- */
.person-notes,
.person-note__fixes {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
}

.person-note {
  border: 1px solid var(--app-border-weak);
  border-radius: var(--radius-8);
  padding: var(--space-12);
  margin-bottom: var(--space-8);
}

.person-note__meta {
  margin: 0 0 var(--space-4);
}

.person-note__body {
  margin: 0 0 var(--space-8);
  overflow-wrap: anywhere;
}

.person-note__fixes {
  margin: var(--space-8) 0 var(--space-8) var(--space-16);
  padding-left: var(--space-12);
  border-left: 3px solid var(--app-border-weak);
}

.person-note__fix {
  margin-bottom: var(--space-8);
}

/* T80-A: 印刷用の参加者名簿（GET /events/:id/roster）。画面でも読めて、紙では表を幅に収める。 */
.roster__main { padding: 16px; }
.roster__tools { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.roster__meta { margin: 0 0 4px; }
.roster__notice { margin: 0 0 16px; padding: 8px 12px; border: 2px solid currentColor; }
.roster__section { margin-block: 24px; }
.roster__table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.roster__table th, .roster__table td { border: 1px solid #767676; padding: 4px 6px; vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.roster__check { width: 4rem; text-align: center; }
.roster__box { font-size: 1.5rem; line-height: 1; }
.home-roster__print { margin: 8px 0; }

@media print {
  /* 支部の紙は A4 縦（2026-10-15 利用者）。列が多いので字を小さめにし、名前・メモ以外は詰める。 */
  @page { size: A4 portrait; margin: 10mm; }
  body, .roster { background: #fff !important; color: #000; }
  .no-print, .skip-link, .button { display: none !important; }
  .roster__main { padding: 0; }
  .roster__table { width: 100%; table-layout: auto; font-size: 8.5pt; }
  .roster__table th, .roster__table td { padding: 3px 4px; }
  .roster__check { width: 2.5rem; }
  .roster__table thead { display: table-header-group; }
  .roster__table tr { break-inside: avoid; page-break-inside: avoid; }
  .roster .state { border: 0; background: none !important; padding: 0; }
  .roster__section { break-inside: auto; }
}

/* ---- 今日の運営: 参加者の行（T85）。名前（太字）／かな・学年（小）／例外だけの印／出欠 ---- */
.home-roster__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.home-roster__search { margin: 0; display: flex; gap: var(--space-8); }
.home-roster__search .input { min-width: 12rem; }

.home-person { font-size: var(--fs-16); }
.home-person__sub { display: block; margin-top: 2px; font-weight: 400; font-size: var(--fs-14); color: var(--app-text-sub); }

.home-att { margin: 0; }
.home-att .field { margin: 0; }
.home-att__select { min-height: 2.75rem; max-width: 11rem; }

.home-marks { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.home-mark { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; max-width: 100%; }
.home-remark { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }

/* アレルギー: 記入があれば赤字で目立たせる */
.home-allergy { color: var(--tone-alert-fg); font-weight: 700; }

.home-roster .table td, .home-roster .table th[scope="row"] { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }

/* 申し送り（対応記録の新しい順・直近 3 件）。画面の最下部。 */
.home-notes { margin-top: var(--space-16); }
.home-notes h2 { margin-top: 0; font-size: var(--font-size-18); }
.home-notes__list { list-style: none; margin: 0; padding: 0; }
.home-notes__item { padding: 12px 0; border-top: 1px solid var(--app-border-weak); }
.home-notes__item:first-child { border-top: 0; padding-top: 0; }
.home-notes__head { margin: 0 0 4px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.home-notes__head .sub { font-weight: 400; font-size: var(--font-size-14); }
.home-notes__body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- T85: 支部のナビの件数・取り込みの帯・各画面の小さな部品 ---- */
.nav-count {
  margin-left: auto;
  min-width: 1.5rem;
  padding: 0 var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--tone-alert-bar);
  color: #fff;
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sync-alert { margin-bottom: var(--space-16); }

/* ページの頭: h1 + 右に主ボタン + 下に補足（かな・学年・状態・登録日）。無くても h1 だけで成り立つ */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-8) var(--space-16); margin: 0 0 var(--space-20); }
.page-head > h1 { flex: 1 1 16rem; margin: 0; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.page-head__meta { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-12); color: var(--app-text-sub); font-size: var(--fs-14); line-height: var(--lh-ui); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 var(--space-8); }
.section-head > h2 { margin: 0; display: flex; align-items: baseline; gap: var(--space-8); }
.section-head > h2 .sub { font-weight: 400; }
.section-head + .table-wrap, .section-head + p { margin-top: var(--space-12); }

.table .row--cancelled th[scope="row"], .table .row--cancelled td { color: var(--app-text-sub); }

.person-profile { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: var(--space-4) 0 var(--space-20); color: var(--app-text-sub); font-size: var(--fs-15); }
.person-more, .report-more { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); margin-top: var(--space-24); }
.person-more > *, .report-more > * { max-width: 100%; }
.report-state { margin: 0 0 var(--space-16); }
.submit-blocked { margin: var(--space-8) 0; }
.people-search { margin: var(--space-16) 0; }
.events-summary { margin: 0 0 var(--space-16); }

/*
 * T83: 本部画面の KPI（数値タイル・グラフ）。グラフはサーバーが生成するインライン SVG（src/web/ui/charts.ts）。
 * 系列色は 2 色だけ。dataviz スキルの validate_palette.js で検査した（--mode light --surface #ffffff）:
 *   "#197a4b,#2a78d6" → 明度帯・彩度の下限・色覚多様性での差（ΔE 21.1）・通常視の差（ΔE 22.2）・白地とのコントラスト 3:1 以上、すべて PASS。
 * 子ども＝緑 #197a4b（DADS green-800、アクセントと同系）、大学生＝青 #2a78d6。状態色（黄＝部分集計、灰＝未取得）は系列に使わない。
 * 文字は系列色で塗らない。補助線は薄い灰 1 色・1px、面は塗らない。ダークモードは製品に無いので対象外。
 */
:root {
  --chart-child: #197a4b;
  --chart-student: #2a78d6;
  --chart-grid: var(--color-neutral-solid-gray-100);
  --chart-ink: var(--color-neutral-solid-gray-600);
  --chart-none: var(--color-neutral-solid-gray-420);
}

/* 期間の選択は広い画面で 1 行に（入力欄が縦に積まれて KPI が下に押し出されないように） */
@media (min-width: 48rem) {
  .form--period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-16); }
  .form--period > .field { margin: 0; flex: 1 1 12rem; max-width: 16rem; }
  .form--period > .button { flex: none; }
}

.kpi-meta { margin: 0 0 var(--space-16); color: var(--app-text-sub); font-size: var(--font-size-14); line-height: var(--line-height-170); }

.kpi-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--space-12);
}
.kpi-tile {
  margin: 0;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--app-border-weak);
  border-radius: var(--radius-12);
  background: var(--app-surface);
  box-shadow: var(--shadow-1);
}
.kpi-tile__label { margin: 0; font-size: var(--fs-14); font-weight: 700; color: var(--app-text-sub); display: flex; align-items: center; gap: var(--space-8); }
.kpi-tile[data-series] .kpi-tile__label::before {
  content: '';
  display: inline-block;
  width: 0.75rem;
  height: 0.25rem;
  border-radius: 2px;
  background: var(--chart-child);
  flex: none;
}
.kpi-tile[data-series="student"] .kpi-tile__label::before { background: var(--chart-student); }
.kpi-tile__value { margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-8); }
.kpi-tile__state { flex-basis: 100%; font-size: var(--fs-14); }
.kpi-tile__num { font-size: var(--font-size-32); font-weight: 700; line-height: 1.2; color: var(--app-text); }
.kpi-tile__num--none { color: var(--chart-none); }
.kpi-tile__unit { font-size: var(--font-size-16); font-weight: 700; margin-left: calc(-1 * var(--space-4)); }
.kpi-tile__sub { margin: var(--space-4) 0 0; font-size: var(--fs-14); color: var(--app-text-sub); }
.kpi-tiles + .note { margin-top: var(--space-8); }

.chart-grid { display: grid; gap: var(--space-24); margin-top: var(--space-24); }
@media (min-width: 64rem) {
  .chart-grid { grid-template-columns: 1fr 1fr; }
}
.chart-block { margin-top: var(--space-24); min-width: 0; }
.chart-grid > .chart-block { margin-top: 0; }
.chart-block > h3 { margin: 0 0 var(--space-12); font-size: var(--font-size-16); }
.chart-block > h3 .sub { font-weight: 400; font-size: var(--font-size-14); }
.chart { margin: 0; }

/* 横棒（支部の比較・割合）。行は HTML（ラベル・値は本文の文字）、棒だけ 1 行ごとの小さな SVG。 */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.bars__row {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) minmax(4rem, 1fr) auto;
  align-items: center;
  gap: var(--space-4) var(--space-12);
  font-size: var(--font-size-14);
}
.chart--rates .bars__row { grid-template-columns: minmax(6rem, 13rem) minmax(4rem, 1fr) minmax(7.5rem, auto); }
.bars__label { overflow-wrap: anywhere; }
.bars__track { display: block; min-width: 0; }
.bars__svg { display: block; width: 100%; height: 1rem; overflow: visible; }
.bars__bar, .bars__bar-base { fill: var(--chart-child); }
.bars__bar[data-series="child"], .bars__bar-base[data-series="child"] { fill: var(--chart-child); }
.bars__bar[data-series="student"], .bars__bar-base[data-series="student"] { fill: var(--chart-student); }
.bars__scale { stroke: var(--chart-grid); stroke-width: 1; }
.bars__none { fill: none; stroke: var(--chart-none); stroke-width: 2; }
.bars__value { white-space: nowrap; text-align: right; }
.bars__value.sub { font-size: var(--font-size-14); }
.bars__flag { grid-column: 1 / -1; font-size: 0.75rem; color: var(--color-primitive-red-1000); margin-top: calc(-1 * var(--space-4)); }
@media (max-width: 640px) {
  .bars__row, .chart--rates .bars__row { grid-template-columns: minmax(0, 1fr) auto; }
  .bars__label { grid-column: 1 / -1; }
}

/* 推移の折れ線（小さな 2 枚。1 軸ずつ） */
.chart-pair { display: grid; gap: var(--space-16); }
@media (min-width: 48rem) {
  .chart-pair { grid-template-columns: 1fr 1fr; }
}
.chart--line { min-width: 0; }
.chart__title { font-size: var(--font-size-14); color: var(--app-text-sub); margin-bottom: var(--space-4); }
.line { display: block; width: 100%; max-width: 30rem; height: auto; overflow: visible; }
.chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart__tick { fill: var(--chart-ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.line__path { fill: none; stroke: var(--chart-child); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line__path[data-series="student"] { stroke: var(--chart-student); }
.line__dot { fill: var(--chart-child); stroke: var(--app-surface); stroke-width: 2; }
.line__dot[data-series="student"] { fill: var(--chart-student); }
.line__label { fill: var(--app-text); font-size: 12px; font-weight: 700; }
.line__missing { fill: var(--chart-ink); font-size: 11px; }
.chart__hit { fill: transparent; }
.chart__hit:focus { outline: none; }
.chart__hit:focus-visible { stroke: var(--app-text); stroke-width: 2; }

.chart-tip {
  position: absolute;
  z-index: 50;
  max-width: 18rem;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--border-radius-4);
  background: var(--color-neutral-solid-gray-900);
  color: var(--color-neutral-white);
  font-size: var(--font-size-14);
  pointer-events: none;
}

@media (forced-colors: active) {
  .bars__bar, .bars__bar-base, .line__dot { fill: CanvasText; }
  .line__path { stroke: CanvasText; }
}

/* 一覧の行の直後に全幅で開く欄（支部の編集など）。中身は横に並べて縦に伸ばさない。 */
.table .row--detail > td {
  background: var(--n-50);
  padding: var(--space-12) var(--space-16);
}

.edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-12) var(--space-24);
  align-items: start;
}

.edit-grid__item > h4 {
  margin: 0 0 var(--space-8);
}

.edit-grid__item--wide {
  grid-column: 1 / -1;
}

@media (max-width: 48rem) {
  .edit-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-8) var(--space-16);
  align-items: end;
  margin-bottom: var(--space-8);
}

.field-grid .field {
  margin: 0;
}

.checklist {
  columns: 2 13rem;
  column-gap: var(--space-24);
  margin: 0 0 var(--space-8);
  padding-left: 0;
  list-style: none;
}

.checklist > li {
  break-inside: avoid;
  margin-bottom: var(--space-4);
}