/* UNLOCKノートのデザインの決まり（2026-10-21 青基調への全面刷新。正本は DESIGN.md）
   配色は 6:3:1。ページ全体（スクロール込み）の面積で数える。最初の1画面だけは、表紙の空が4割を超えてよい
   60%＝地（白・氷）／30%＝構造（濃紺・青・文字・空の写真）／10%＝差し色（金・空色）
   黒の色は使わない。グラデーションは空の写真の中だけ。暗い画面（ダークモード）は作らない
   ※このファイルに黒を表す文字列そのものを書かない（検査で見つけやすくするため） */

/* 明朝のかなと約物（自前の部分ファイル）。Google Fonts の配る Shippori Mincho B1 の部分ファイルは palt（かな詰め）を抜いているので、
   元の TTF（OFL 1.1。public/fonts/OFL.txt）から、かなと全角の約物だけを palt 付きで切り出した（scripts/build-kana-fonts.sh）。
   v2 は、palt で全角より広くなる字（「で」「バ」「ル」など）を全角に抑えた（見出しの中で、その字の後ろだけが空かないように。AA-N-14）。
   漢字・英数字は今の Google Fonts のまま。合成用の濁点（U+3099・309A）は、前の字と同じ書体で組めるよう Google Fonts に残す。
   範囲を変えるときは、切り出しのスクリプトの範囲もいっしょに直し、ファイルの名前の版（.v2）を上げる（前の版のファイルは消さない） */
@font-face {
  font-family: 'UN Mincho Kana';
  src: url('/fonts/smb1-kana-500.v2.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-3098, U+309B-30FF, U+FF01-FF0F, U+FF1A-FF20, U+FF3B-FF40, U+FF5B-FF65;
}
@font-face {
  font-family: 'UN Mincho Kana';
  src: url('/fonts/smb1-kana-700.v2.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-3098, U+309B-30FF, U+FF01-FF0F, U+FF1A-FF20, U+FF3B-FF40, U+FF5B-FF65;
}
/* ゴシックのかっこ（「」『』【】（））だけを半分の幅にした部分ファイル（Zen Kaku Gothic New・OFL 1.1。public/fonts/OFL-ZenKakuGothicNew.txt）。
   本文の書体には palt も halt も無く、「、「」「）。」が2字分空き、行の頭の「が字下げに見えるため（AS-N-03）。字の幅そのものを変えたので、font-feature-settings は要らない。
   「、」「。」は全角のまま（本文の読みやすさのため）。作り直しは scripts/build-gothic-brackets.sh（範囲を変えたら、ここの unicode-range も同じにし、名前の版を上げる） */
@font-face {
  font-family: 'UN Gothic Brackets';
  src: url('/fonts/zkg-brackets-400.v1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+300C-300F, U+3010-3011, U+FF08-FF09;
}
@font-face {
  font-family: 'UN Gothic Brackets';
  src: url('/fonts/zkg-brackets-500.v1.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+300C-300F, U+3010-3011, U+FF08-FF09;
}
@font-face {
  font-family: 'UN Gothic Brackets';
  src: url('/fonts/zkg-brackets-700.v1.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+300C-300F, U+3010-3011, U+FF08-FF09;
}
/* 明朝のかっこ（「」『』【】（））も、ゴシックと同じく詰めた幅にした部分ファイル（Shippori Mincho B1・OFL 1.1。public/fonts/OFL.txt）。
   明朝の20px未満は palt が効かず、見出しのかっこだけが全角のまま残り、すぐ下のゴシックのラベルと同じ節で2通りに見えた（「数字（わかる分だけ）」の「字（」が空く。AS-R-02）。
   書体の palt の値（「」約0.48〜0.5em・（）約0.39〜0.4em）を字の形と幅に焼き込んだので、大きさによらず20px以上の palt の見出しと同じ幅になる。作り直しは scripts/build-mincho-marks.sh */
@font-face {
  font-family: 'UN Mincho Brackets';
  src: url('/fonts/smb1-brackets-500.v1.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+300C-300F, U+3010-3011, U+FF08-FF09;
}
@font-face {
  font-family: 'UN Mincho Brackets';
  src: url('/fonts/smb1-brackets-700.v1.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+300C-300F, U+3010-3011, U+FF08-FF09;
}
/* 明朝の「！」「？」は、字形の立った Zen Old Mincho（OFL 1.1。public/fonts/OFL-ZenOldMincho.txt）から切り出した部分ファイル。
   Shippori Mincho B1 の「！」は筆で右へ倒した字形で、16pxの引用では点が見えず「おめでとうございます／」と読めた（AS-R-06）。
   字の幅は全角のまま。palt を足してあるので、20px以上の見出しでは今までどおり詰まる。作り直しは scripts/build-mincho-marks.sh */
@font-face {
  font-family: 'UN Mincho Marks';
  src: url('/fonts/zom-marks-500.v1.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+FF01, U+FF1F;
}
@font-face {
  font-family: 'UN Mincho Marks';
  src: url('/fonts/zom-marks-700.v1.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+FF01, U+FF1F;
}

:root {
  color-scheme: light;

  /* ---- 60%：地 ---- */
  --paper: #FFFFFF;          /* 頁・紙面・タブ・運営の紙面の地 */
  --ice: #F4F8FC;            /* 入力欄の地・選んだ行・押した行・マウスを載せた行・お知らせの地だけ */
  --ice-2: #E8F1F9;          /* 棒の下地・濃淡の段の1段目 */

  /* ---- 30%：構造 ---- */
  --navy: #0E2F47;           /* 見出し・宣言・数字・名前・選んだタブ・運営の左帯（白文字 13.85:1） */
  --navy-2: #123F5E;         /* 運営の左帯で選んでいる行（白文字 11.06:1）・帳簿の増えた分の補足（「今月＋16本」。白地 11.06:1） */
  --blue: #1B5E8C;           /* 主ボタン・リンク・輪と棒の進み・気がかりの小札（白地 6.94:1）。押せない文字には使わない */
  --blue-deep: #154A70;      /* 主ボタンを押した時・マウスを載せた時（白文字 9.35:1） */
  --ink: #16212C;            /* 本文（白 16.30:1） */
  --ink-2: #45596E;          /* 副の文字・ラベル・未選択のタブ（白 7.22:1） */
  --ink-3: #5E7185;          /* 入力欄の例文・押せない時の文字だけ（白 5.03:1） */

  /* ---- 10%：差し色 ---- */
  --gold: #B8862F;           /* 印の円・印の一文字（20px以上の太字だけ）・お祝いの小札の枠（白地 3.24:1） */
  --gold-ink: #8A6420;       /* 金の小さな文字（お祝い・あと少しの小札）白 5.35:1 */
  --gold-light: #E8C878;     /* 写真・濃紺の上の金（アプリのアイコンだけ） */
  --sky: #6FB7DE;            /* 飾りの線だけ：輪をつなぐ線・引用の左線・運営の左帯の選択線 */
  --sky-pale: #BFDDF1;       /* 記録の罫・濃紺の上の未選択の文字（9.78:1）・濃淡の段の2段目 */

  /* ---- 線 ---- */
  --rule: #D5E5F1;           /* 節の区切り・表の行・頁の縁・副ボタンとチップの枠・タブの上・輪の下地 */
  --rule-ledger: #BFDDF1;    /* 記録（帳簿）の行の下 */
  --rule-strong: #7A8EA2;    /* 入力欄・選ぶ欄・チェックの枠（白 3.38:1＝部品の境目の基準3:1） */

  /* ---- 状態（ふだんは出ない） ---- */
  --error: #9E3B32;          /* 入力の誤り・取り込みの失敗（白 6.72:1） */
  --error-bg: #FBF1EF;
  --on-dark: #FFFFFF;        /* 空・濃紺・青の上の文字 */

  /* ---- 写真が出るまでの地 ---- */
  --cover-fallback: #1B5E8C; /* 表紙・空の帯（白文字が読める色） */
  --soft-fallback: #E5EDF6;  /* お祝いの画面（sky_soft の平均の色） */

  /* ---- 書体 ---- */
  /* 明朝は、「！」「？」（'UN Mincho Marks'・立った字形）とかっこ（'UN Mincho Brackets'・半分の幅）、かなと約物（'UN Mincho Kana'・palt 入り）の自前の部分ファイルを先に使う。
     「！」「？」とかっこは 'UN Mincho Kana' の範囲にも入っているが、先に並べた書体が使われる。行の高さを決める書体は、空白を持つ 'Shippori Mincho B1' のまま */
  --font-mincho: 'UN Mincho Marks', 'UN Mincho Brackets', 'UN Mincho Kana', 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  /* ゴシックは、かっこだけ自前の 'UN Gothic Brackets'（半分の幅）を先に使う。行の高さを決める書体は、空白を持つ次の 'Zen Kaku Gothic New' のまま */
  --font-gothic: 'UN Gothic Brackets', 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-code: ui-monospace, 'SFMono-Regular', Menlo, monospace; /* 運営の設定（JSON）の入力欄だけ */

  /* ---- 文字の大きさ（スマホ。運営は .admin で上書き） ---- */
  --fs-declare: clamp(23px, 6.67vw, 26px); /* 宣言（画面で最大。390px幅で26px＝仕様の「宣言26＞あいさつ22」。palt が効いて「「2章 AI×リール講座」を」が頁の1行に収まる） */
  --fs-greet: 22px;
  --fs-h2: 17px;
  --fs-name: 17px;
  --fs-num: 20px;
  --fs-num-s: 18px;
  --fs-quote: 16px;
  --fs-body: 15px;
  --fs-input: 16px;          /* 16px未満だとiPhoneが拡大する */
  --fs-btn: 16px;
  --fs-small: 13px;
  --fs-caption: 12px;        /* いちばん小さい文字（これ未満にしない） */
  --fs-tab: 11px;            /* タブの文字だけの例外 */

  /* ---- 角丸 ---- */
  --r-page: 14px;            /* 白い頁（1画面に1枚だけ） */
  --r-ctl: 10px;             /* ボタン・入力欄・チップ・トースト（運営は8px） */
  --r-tag: 4px;              /* 小札 */

  /* ---- 影（白い頁だけ） ---- */
  --shadow-page: 0 8px 24px rgba(14, 47, 71, 0.08);

  /* ---- 余白と寸法 ---- */
  --gutter: 20px;
  --sec-y: 28px;
  --tap: 44px;
  --btn-h: 48px;
  --btn-h-s: 44px;
  --tab-h: 56px;
  --cover-h: clamp(300px, 45svh, 420px);
  --cover-overlap: 120px;
  --band-h: 112px;
  --content-max: 560px;
  --admin-nav-w: 240px;
  --admin-band-h: 136px;     /* 運営の帯（PC）。どの画面も136px（今週だけ高くしない：AA-R-03。スマホは96px） */

  /* ---- 動き ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 120ms;           /* 色・不透明度の切り替えだけ（位置や大きさは動かさない） */
}

/* 狭いスマホ（360px未満）は余白を詰める */
@media (max-width: 359px) {
  :root { --gutter: 16px; }
}

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* hidden を付けた部品は、ほかの display の指定より優先して隠す */
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  /* 焦点を移した入力欄が、下に固定したタブや保存の帯に隠れないようにする */
  scroll-padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 32px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-gothic);
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: 0.02em;
  /* 行頭禁則：小さい「ゃ」「ッ」・長音「ー」・句読点を行の頭に置かない（本文・説明・ラベルのすべて） */
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--blue); }
img, svg { display: block; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
/* 最後の行に1文字だけ残さない */
p, li, blockquote, dd, legend, .row-title, .row-sub, .tl-title, .tl-sub, .event-title { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 文節で改行する（サーバーで BudouX が文節ごとに .ph で包み、文節の間に <wbr> を置いた要素だけ。Phrase 部品）。
   BudouX の推奨の組み方：文節の中は keep-all で折らず、<wbr> で折る。空白の無い長い塊（リンク・ID）は、列より長いときだけ塊の中で折る（anywhere）
   keep-all は .ph（Phrase で包んだ文）だけに効かせる。受講生が書いた文をそのまま出す所（下の .when など）は keep-all にせず、anywhere だけを足す（行頭禁則はそのまま効く）
   pretty は p などの決まりと同じ（.bx が上書きして、最後の行に1文節だけ残らないように）。改行で分けた行（.bl）は1行ずつの段にして、段ごとに pretty を効かせる */
.bx { line-break: strict; text-wrap: pretty; }
.ph { word-break: keep-all; overflow-wrap: anywhere; }
.bx .bl { display: block; }
/* 1文ずつの段の中は、行の長さをそろえる（pretty のままだと1行目を目いっぱい使い、「…次のグルコンで／一緒に見ましょう。」と読点でない所で折れて2行目が短く残る：AS-R6-04）。
   balance の効かないブラウザは pretty のまま。行の数は変わらない（47頁×390・375 で確かめた） */
main .bx .bl { text-wrap: balance; }
/* トースト（ui.tsx の Toast。.bx ではない）も、2文のお知らせは1文ずつの段にする（bySentence。2文目が1行目の途中から始まらないように：AS-R5-03） */
.toast .bl { display: block; }
/* 受講生が書いた文をそのまま出す所（一歩の「いつ」・一歩の候補・運営の画面の声の行）：空白の無い長い塊も、列より長ければ塊の中で折る（頁を横に広げない。ES-N-01）
   flex の中の文は、縮められるように min-width: 0（小札 .tag は縮めない） */
.when, .chip--plan > span, .voice-line, .voice-line > span:not(.tag), .note-body { min-width: 0; overflow-wrap: anywhere; }
/* 折らない短い値（年齢・干支・未入力・年月・リンクの言葉） */
.nw { white-space: nowrap; }
/* 運営の帯の見出しは、2行になったら行の長さをそろえる */
.a-band-title.bx { text-wrap: balance; }
/* 運営のカルテの講義の題も、2行になったら行の長さをそろえる（「3章 AI×インスタグラムアフィリエイト／講座」と最後の行に2字だけ残さない：AA-R-12） */
.a-paper .row-title.bx { text-wrap: balance; }
/* 運営の紙面のお知らせ・説明・空の案内・入口リンクの文面は、1行44字まで（紙面の幅いっぱいの80〜95字にしない） */
.a-paper .notice, .a-paper .caption, .a-paper .empty, .copybox .textarea { max-width: 44em; }
/* 運営の紙面の短い文のうち、文節（Phrase）で包んでいない文は、Chrome の文節の折り返しにする（「作り直しませ／ん」「集／まりの名前」と語の途中で折らない：AA-N-01）。
   Phrase で包んだ文（.ph）は keep-all のまま。Safari は字の単位で折るので、よく出る文（誤りの箱・お知らせ・欄の添え書きと誤り・外すときの説明）は Phrase で包む */
.a-paper :is(.notice, .notice-h, .caption, .hint, .field-error, .small, .muted, .empty, .lead, .voice-line, .note-body, td, dd) { word-break: auto-phrase; }
/* 明朝の20px以上は、かぎかっこを詰める */
.palt { font-feature-settings: 'palt' 1; }
.num { font-family: var(--font-mincho); font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
.unit { font-family: var(--font-gothic); font-weight: 500; font-size: 12px; color: var(--ink-2); margin-left: 2px; letter-spacing: 0.02em; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.6; }
/* 増えた分（「今月＋16本」）は、押せない文字なのでリンクの青にしない。副の文字より濃い --navy-2 の500（白地 11.06:1。青はリンク・主ボタン・輪と棒の進みだけ：AS-R5-06） */
.up { color: var(--navy-2); font-weight: 500; }
/* 線画のアイコン（Icon。aria-hidden の svg）は、大きさによらず画面の上で線1.5px（viewBox の目盛りで太さが変わらないように） */
svg[aria-hidden='true'] :is(path, circle, rect, line, polyline, polygon, ellipse) { vector-effect: non-scaling-stroke; }
.ico { width: 18px; height: 18px; flex: none; stroke-width: 1.5; }
.ico-s { width: 14px; height: 14px; flex: none; }
.ico-m { width: 20px; height: 20px; flex: none; }

/* ---------- 表紙（ホーム・ログイン・入口） ---------- */
/* 高さは「いちばん低いときの高さ」。あいさつ・題が2行になったり、文字だけを大きくする設定でも、中身に合わせて伸びて切れない */
.cover { position: relative; min-height: var(--cover-h); background: var(--cover-fallback); overflow: hidden; color: var(--on-dark); }
.cover-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* 下の余白＝白い頁が重なる120px＋24px。あいさつが長くても、頁との間に24pxを残す（ふだんの1行では表紙の高さは変わらない） */
.cover-inner { position: relative; max-width: var(--content-max); margin: 0 auto; padding: calc(env(safe-area-inset-top) + 12px) var(--gutter) calc(var(--cover-overlap) + 24px); }
.cover-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); }
/* 見た目は1行の文字のまま、押せる高さを44pxにする */
.logo { display: inline-flex; align-items: center; min-height: var(--tap); font-family: var(--font-mincho); font-weight: 500; font-size: 15px; letter-spacing: 0.08em; line-height: 1.4; color: var(--on-dark); text-decoration: none; }
.me-link { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-right: -10px; color: var(--on-dark); border-radius: 50%; }
.me-link svg { width: 22px; height: 22px; }
/* 空の写真の上の焦点の輪は白（青の輪は空に溶けて1.02〜1.28:1しかない）。運営のスマホ・タブレットの帯のロゴ（.a-band）も同じ（AY-N-08） */
.me-link:focus-visible, .cover a:focus-visible, .band a:focus-visible, .a-band a:focus-visible { outline-color: var(--on-dark); }
.cover-date { margin-top: 28px; font-weight: 500; font-size: 14px; letter-spacing: 0.04em; line-height: 1.5; }
.cover-hello { margin-top: 6px; font-family: var(--font-mincho); font-weight: 700; font-size: var(--fs-greet); line-height: 1.45; letter-spacing: 0.02em; }
.cover-title { margin-top: 32px; font-family: var(--font-mincho); font-weight: 700; font-size: 26px; line-height: 1.4; letter-spacing: 0.02em; }

/* 表紙の写真が、その回の最初の1回だけふわっと出る（app.js） */
.cover-photo img.cover-enter { opacity: 0; transform: scale(1.03); }
.cover-photo img.cover-enter.cover-in { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }

/* ---------- 空の帯（受講生のほかの画面） ---------- */
/* 帯の高さも「いちばん低いときの高さ」。長い呼び名で見出しが2行になっても、下を切らずに伸びる */
.band { position: relative; min-height: calc(env(safe-area-inset-top) + var(--band-h)); background: var(--cover-fallback); overflow: hidden; color: var(--on-dark); }
.band--tall { --band-h: 144px; }
.band--page { --band-h: 152px; }
/* 世界の景色（11回目の直し）：表紙はスマホ・タブレット・PCとも、景色の真ん中より少し上から見せる。帯は横長3:1の真ん中 */
.cover .cover-photo--world img { object-position: 50% 22%; }
@media (min-width: 768px) { .cover .cover-photo--world img { object-position: 50% 30%; } }
.band .cover-photo--world img { object-position: 50% 50%; }
/* 景色の上の白い字を読みやすくする、薄い濃紺の重ね（上の字の所と、帯の下の見出しの所を少し濃く。景色の色は残す） */
.cover-photo--world::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(14, 47, 71, 0.34) 0%, rgba(14, 47, 71, 0.22) 55%, rgba(14, 47, 71, 0) 85%), linear-gradient(180deg, rgba(14, 47, 71, 0.50) 0%, rgba(14, 47, 71, 0.32) 45%, rgba(14, 47, 71, 0.10) 72%, rgba(14, 47, 71, 0.16) 100%); }
/* 帯：見出しは景色の上に載るので、字のある左を横の重ねで濃くする（右の景色はそのまま見える）。12か所×390・375・320・1280で、見出し3:1以上・ロゴ4.5:1以上（審査 AY-R8-01・AS-R8-01） */
.band .cover-photo--world::after { background: linear-gradient(90deg, rgba(14, 47, 71, 0.42) 0%, rgba(14, 47, 71, 0.30) 55%, rgba(14, 47, 71, 0) 85%), linear-gradient(180deg, rgba(14, 47, 71, 0.50) 0%, rgba(14, 47, 71, 0.30) 45%, rgba(14, 47, 71, 0.62) 100%); }
/* 景色の上のわたしのアイコン（白い雲・白い家の上で2.4:1まで落ちる）に、場所の札と同じ薄い濃紺の丸い下地 */
.cover:has(.cover-photo--world) .me-link, .band:has(.cover-photo--world) .me-link { background: rgba(14, 47, 71, 0.38); }
/* 景色の上の白い字に、ごく薄い濃紺の影（明るい景色の日でも、字の縁が景色に溶けない） */
.cover:has(.cover-photo--world) :is(.logo, .cover-date, .cover-hello, .cover-title), .band:has(.cover-photo--world) :is(.logo, .band-title) { text-shadow: 0 1px 8px rgba(14, 47, 71, 0.45); }
/* 今日の景色の場所（表紙のあいさつ・題の下の小さな1行） */
/* 雪山や白い街並みの日でも読めるよう、薄い濃紺の小さな下地（角丸6px。すりガラスにはしない） */
.cover-place { display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 10px; padding: 2px 8px 2px 6px; border-radius: 6px; background: rgba(14, 47, 71, 0.62); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; line-height: 1.5; }
.cover-place svg { flex: none; width: 14px; height: 14px; stroke-width: 1.5; }
/* 表紙と帯の写真の使い分け（DESIGN.md 5章。11回目の直しで、受講生の表紙と帯は今日の世界の景色にした：ui.tsx の WORLD・SkyPhoto）
   表紙：767px以下は縦長2:3の p（50% 22%）、768px以上は横長3:2の t（50% 30%）。字の後ろは空、景色は字の下から白い頁の上へのぞく。帯：横長3:1の b の真ん中（スマホでも街並みまで見える）
   前の空の写真（sky_portrait・sky_tablet・sky_wide）の幅ごとの置き方は、使う所が無くなったので消した（ファイルは残す） */
.band-inner { position: relative; min-height: calc(env(safe-area-inset-top) + var(--band-h)); max-width: var(--content-max); margin: 0 auto; padding: calc(env(safe-area-inset-top) + 12px) var(--gutter) 20px; display: flex; flex-direction: column; }
.band--page .band-inner { padding-bottom: 60px; }
.band-title { margin-top: auto; font-family: var(--font-mincho); font-weight: 700; font-size: var(--fs-greet); line-height: 1.45; letter-spacing: 0.02em; }

/* ---------- 受講生の中身の列 ---------- */
/* 下の余白＝下のタブ＋32px。文字だけを大きくする設定でタブが伸びても、最後の字がタブに触れないよう、32pxは文字の大きさに付いてくる（ふだんの15pxでは32pxのまま。AY-N-01） */
.sheet { max-width: var(--content-max); margin: 0 auto; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + max(32px, 2.1em)); }
.sheet--plain { padding-bottom: calc(env(safe-area-inset-bottom) + 40px); }
/* ログイン・入口・使えないリンク（題のある表紙の画面）：題の位置は今のまま、最後の奥付（プライバシーポリシー。.sec--foot）を画面の下に置いて、頁の下の大きな白を締める */
.app:has(.cover-title) { min-height: 100svh; display: flex; flex-direction: column; }
.app:has(.cover-title) > .sheet--plain { flex: 1; display: flex; flex-direction: column; width: 100%; }
.app:has(.cover-title) > .sheet--plain > .sec--foot:last-child { margin-top: auto; }
/* スマホの題のある表紙は高くして（50svh）、白い頁を下げる。写真は上寄せにして、上の深い青を題の後ろに置く（S22）
   題の位置は下げないので白い題は暗くならず、字の後ろのいちばん明るい所との比が上がる（390で4.32→5.67・375で3.90→5.59・2行の「このリンクは使えなくなっています」は375で3.49→4.95） */
@media (max-width: 767px) {
  .app:has(.cover-title) .cover { min-height: clamp(340px, 50svh, 460px); }
  .app:has(.cover-title) .cover-photo img { object-position: 50% 0%; }
  .app:has(.cover-title) .cover .cover-photo--world img { object-position: 50% 22%; }
}

/* 白い頁（1画面に1枚だけのカード） */
.page {
  position: relative; z-index: 1;
  margin: 0 var(--gutter);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-page);
  box-shadow: var(--shadow-page);
  padding: 20px 20px 22px;
}
.page--cover { margin-top: calc(-1 * var(--cover-overlap)); }
.page--band { margin-top: -40px; }
.page-head { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.page-h { font-family: var(--font-mincho); font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: 0.04em; color: var(--navy); }
.page-text { margin-top: 8px; font-size: var(--fs-body); }
.page-note { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-2); }
.page .notice { margin-top: 12px; }
/* 知らせの箱のすぐ下の宣言・問い・節の見出しは、20pxあける（8〜16pxのままだと、知らせと見出しがくっついて1つの箱に見える。AS-R-08・AS-R5-07）
   一歩の頁のやり切った週の青の知らせ→宣言、まだ書けない振り返りの赤の知らせ→「◯月◯日から書けます」、わたし・はじめにの赤の知らせ→「何に使うか」
   知らせの側には下の余白を付けない（student.tsx の style に書かない）。問いが節の頭に来るとき（知らせの無いとき）は上の余白を0にする */
.notice + :is(.declare, .ask, .sec-head) { margin-top: 20px; }
.sec > .ask:first-child { margin-top: 0; }

/* 今週の一歩 */
.declare { margin-top: 8px; font-family: var(--font-mincho); font-weight: 700; font-size: var(--fs-declare); line-height: 1.4; letter-spacing: 0.02em; color: var(--navy); }
/* 「いつ」の頭の時計は、文の1行目にそろえる（2行以上になっても、行全体の真ん中に浮かない。やり切りの行 .done-line と同じ「頭の印」の扱い。AS-R-09）
   上の空き＝1行（行の高さ1.75）の真ん中に16pxの時計を置く位置。15pxでは約5px（1行のときの位置は変わらない）。em なので、文字だけを大きくしても1行目の真ん中のまま（.sync-fix と同じ求め方）
   時計もやり切りのチェックも縮めない（flex: none。Icon に .ico が無いので、そのままだと文が2行に折れたとき、横の並びの中で絵の幅だけが縮む＝320pxの2行で16px→11px：ES-R6-02。文の側は min-width: 0 で折れる） */
.when { margin-top: 6px; display: flex; align-items: flex-start; gap: 6px; font-weight: 500; font-size: 15px; color: var(--ink-2); }
.when svg { flex: none; width: 16px; height: 16px; margin-top: calc((1.75em - 16px) / 2); }
.done-line { margin-top: 16px; display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-mincho); font-weight: 500; font-size: 16px; line-height: 1.6; color: var(--navy); }
.done-line svg { flex: none; width: 18px; height: 18px; margin-top: 3px; stroke-width: 1.5; }
/* やり切った日（手帳の日付の印）。字はやり切りの文の頭にそろえる（チェック18px＋間8px） */
.done-date { margin-top: 2px; padding-left: 26px; font-size: var(--fs-small); color: var(--ink-2); }
/* やり切った週は、印「歩」の円を2pxにする（金は印だけに使う決まりのまま、手応えを足す） */
.page:has(.done-line) .seal--d { border-width: 2px; }
.rest-line { margin: -4px 0 14px; font-size: 14px; color: var(--ink-2); }
.ask { margin-top: 10px; font-family: var(--font-mincho); font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--navy); }
.why { margin-top: 6px; font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.6; }

/* ---------- 節（罫と余白で区切る） ---------- */
.sec { position: relative; padding: var(--sec-y) var(--gutter); }
.sec + .sec::before, .sheet > form + .sec::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--rule); }
/* 奥付（ログイン・入口・コードの画面の最後のプライバシーポリシー）の上には罫を引かない。前の節の後ろでも、画面の下に寄せたときも同じ形（AS-N-11） */
.sec + .sec--foot::before { content: none; }
.sec--tight { padding-top: 20px; }
.page + .sec { padding-top: 24px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-head:has(> h2 > .h-ico) { align-items: center; }
.sec-head h2 { font-family: var(--font-mincho); font-weight: 500; font-size: var(--fs-h2); line-height: 1.5; letter-spacing: 0.04em; color: var(--navy); }
.sec-head .count { font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; }
/* 右の -9px＝余白4px＋矢印（›）の中の空き5px。矢印の線の端を罫の右端にそろえる
   字と矢印の間は4px（文字ボタン .btn--text・畳んだ説明の summary と同じ1つの値。同じ画面に縦に並ぶ「すべて ↗」と「見返す ↗」で詰まり方を変えない：AS-R5-05） */
.sec-link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); margin: -12px -9px -12px 0; padding: 0 4px; font-weight: 500; font-size: 14px; color: var(--blue); text-decoration: none; white-space: nowrap; }
.sec-link svg { width: 14px; height: 14px; }
/* 新しい画面で開く節のリンク（集まりのアーカイブの「すべて ↗」）は、↗の中の空き（約3.3px）に合わせて -7.5px（-9px のままだと罫より1.7px外に出る。S17） */
.sec-link[target='_blank'] { margin-right: -7.5px; }
.lead { font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.lead + .lead { margin-top: 6px; }
.sec > .caption { margin-top: 12px; }
.bye { padding: 8px var(--gutter) 0; font-size: var(--fs-small); color: var(--ink-2); }

/* 押せる行（講義の章・集まり・振り返りの履歴・月初の案内） */
.rows { display: block; }
.row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter); color: var(--ink); text-decoration: none; transition: background-color var(--t-fast); }
.row::after { content: ''; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: var(--rule); }
a.row:active, a.row:hover { background: var(--ice); }
.row > .row-ico { width: 20px; height: 20px; color: var(--blue); flex: none; stroke-width: 1.5; }
.row-body { flex: 1; min-width: 0; }
.row-title { font-weight: 500; font-size: 15px; line-height: 1.55; }
.row-sub { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; }
.row-end { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
/* 行の右端の › と ↗ は、矢印の線の端を罫の右端にそろえる（18pxのアイコンの中の右の空き：›は6px・↗は4.5px。↗は新しい画面で開く行（講義）だけに付く。S17） */
.row > .row-end { margin-right: -6px; }
a.row[target='_blank'] > .row-end { margin-right: -4.5px; }
/* 点は左の線にそろえる（「10」まで入る幅28px） */
.row-score { width: 28px; flex: none; text-align: left; font-size: 20px; }
/* 点のある行（振り返りの履歴）は、点を月の行（題の1行目）の字の下の線にそろえる。補足が何行に折れても、点が行全体の真ん中に浮かない（AS-R-09）
   点の行の高さは1（20px）にする。本文の1.75（35px）のままだと、点の上の空きが月の字より大きく、そろえたときに月と補足が8px下へ押され、行が8px高くなり上の余白だけが広がる
   （1なら、行の高さも上下12pxの余白も今のまま）。右の › は今のまま行の真ん中（押せる行の印は、ほかの行と同じ位置） */
.row:has(> .row-score) { align-items: baseline; }
.row:has(> .row-score) > .row-score { line-height: 1; }
.row:has(> .row-score) > .row-end { align-self: center; }
.row--flush { margin: 0; padding-left: 0; padding-right: 0; }
.row--flush::after { left: 0; right: 0; }

/* ---------- 今週の3つの輪 ---------- */
.rings { display: flex; align-items: center; }
.ring-item { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ring-link { flex: 1 1 12px; min-width: 12px; height: 1px; background: var(--sky); margin: 0 8px; }
.ring { width: 40px; height: 40px; flex: none; }
.ring .track { stroke: var(--rule); }
.ring .bar { stroke: var(--blue); }
.ring .tick { stroke: var(--navy); }
.ring-label { font-weight: 500; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.3; white-space: nowrap; }
.ring-val { font-size: var(--fs-num-s); line-height: 1.2; white-space: nowrap; }
/* 幅が足りないときは、輪をつなぐ線を消して両端にそろえる（399px以下）。さらに狭いときは輪を小さくする */
@media (max-width: 399px) {
  .rings { justify-content: space-between; gap: 8px; }
  .ring-link { display: none; }
  .ring-item { gap: 8px; }
}
@media (max-width: 359px) {
  .ring { width: 34px; height: 34px; }
  .ring-item { gap: 6px; }
}
.post-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.post-row form { display: flex; }

/* ---------- 記録の行（帳簿） ---------- */
/* 言葉の列はどの帳簿も7.6em（同じ画面に2つの帳簿が並んでも、数字の右端がそろう。AS-N-05）
   長い言葉は文節の境で2行に折る（「週報｜フィードバック」＝phrases() の8字以上の漢字とかたかなの境。語の途中では折れない） */
.ledger { display: block; --ledger-label: 7.6em; }
.ledger-row { display: grid; grid-template-columns: var(--ledger-label, 7.6em) 4.5em minmax(0, 1fr); column-gap: 12px; align-items: baseline; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--rule-ledger); }
.ledger-label { font-size: 15px; line-height: 1.5; }
/* 受講生の帳簿は、言葉の頭に何の記録かのアイコン（青の18px）。言葉が2行に折れても、2行目はアイコンの下に回さない（ぶら下げ）。
   アイコンの分だけ言葉の列を広げる（受講生の帳簿はどれも同じ幅＝同じ画面の帳簿の数字の右端はそろったまま。運営のカルテの帳簿はアイコンなしの7.6em） */
.sheet .ledger { --ledger-label: calc(7.6em + 24px); }
.ledger-label:has(> .ledger-ico) { position: relative; padding-left: 24px; }
.ledger-label > .ledger-ico { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; color: var(--blue); stroke-width: 1.5; }
.ledger-num { text-align: right; font-family: var(--font-mincho); font-weight: 700; font-size: var(--fs-num); line-height: 1.2; color: var(--navy); white-space: nowrap; }
.ledger-num .unit { font-size: 12px; }
.ledger-note { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; text-wrap: pretty; }
/* 増えた分の補足は --navy-2 の500（同じ節の見出しの右の「あゆみへ ›」や、すぐ上の「カレンダーに追加 ↗」の青と分ける：AS-R5-06） */
.ledger-note.up { color: var(--navy-2); font-weight: 500; }
/* 記録がつながる前の「—」（数字と同じ明朝24pxの太い棒にしない。カルテの積み上がり） */
.ledger-wait { font-family: var(--font-gothic); font-weight: 400; font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- 次の集まり（行） ---------- */
.event { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.event-when { font-family: var(--font-mincho); font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: 0.02em; color: var(--navy); }
.event-title { font-size: 15px; line-height: 1.55; }
.event-meta { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }
.event-act { grid-row: 1 / span 3; grid-column: 2; align-self: center; }
.page .event { grid-template-columns: minmax(0, 1fr); border-bottom: 0; padding: 0; }
.page .event-when { margin-top: 8px; font-weight: 700; font-size: 20px; }
.page .event-act { grid-row: auto; grid-column: 1 / -1; margin-top: 16px; }
/* 節の中の集まりの行（ホームの次の集まり・集まりの画面の予定とアーカイブ）：日時と題は幅いっぱい。右の動き（カレンダーに追加・見返す・参加する）は、
   3段目（種類と会場）の右に置き、題の幅を取らない（「UNLOCKグルコン（10月後半）」をかっこの前で2行に折らない。AS-N-01）
   文字ボタンの押せる高さ44pxは上下-12pxにして、行の高さに数えない（字の真ん中は、種類と会場の行の真ん中）
   枠のある小ボタン（ホームの「参加する」）は重ねない。上を4pxあけて、題の字に枠を触れさせない。頁の中の集まり（.page .event）は今のまま */
.sec .event > .event-when, .sec .event > .event-title { grid-column: 1 / -1; }
.sec .event > .event-meta { grid-column: 1; grid-row: 3; }
.sec .event > .event-act { grid-row: 3; grid-column: 2; display: flex; }
.sec .event > .event-act > .btn--text { margin-block: -12px; }
.sec .event > .event-act > .btn:not(.btn--text) { margin-top: 4px; }

/* ---------- 節目の印 ---------- */
.seal { display: grid; place-items: center; flex: none; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); font-family: var(--font-mincho); font-weight: 700; line-height: 1; letter-spacing: 0; }
/* 円の大きさは、印の字の大きさの em で決める（ふだんの字では前の px と同じ＝88・44・40px。お祝いの128pxも同じ）。文字だけを大きくしたときは、字と一緒に円も大きくなり、
   字が円の縁に触れたり外へ出たりしない（AY-R6-04。56pxの .seal--m と出来事の行の28pxの .seal--s は、並びの列と一緒に、節の入れ物の条件の中で広げる＝下の @container）
   2字の印（五十）は字を下げるので、円はその字の大きさで割り直す（1字と2字の円を同じ大きさにする） */
.seal--l { width: calc(88em / 38); height: calc(88em / 38); border-width: 2px; font-size: 38px; }
.seal--m { width: 56px; height: 56px; font-size: 24px; }
.seal--m.seal--2 { font-size: 20px; }
/* 2字の印（五十）は、円に収まる大きさへ下げる */
.seal--l.seal--2 { width: calc(88em / 30); height: calc(88em / 30); font-size: 30px; }
.seal--todo.seal--2 { width: calc(40em / 15); height: calc(40em / 15); font-size: 15px; }
.seal--s.seal--2 { font-size: 12px; letter-spacing: -0.08em; }
.seal--d { width: calc(44em / 20); height: calc(44em / 20); font-size: 20px; }
.seal--todo { width: calc(40em / 18); height: calc(40em / 18); border: 1px solid var(--rule); color: var(--ink-2); font-size: 18px; }
.seal--s { width: 28px; height: 28px; font-size: 13px; color: var(--navy); }
/* 列の間は8px（1列を約81px取り、名前を2行までに収める）。日付の分からない節目の「8月15日以前」（12pxで66.4px・2けたの月で71.3px）は、390・375・360pxの列（81.5〜74px）に1行で入る（S12） */
.seals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 8px; }
.seal-item { min-width: 0; }
.seal-name { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }
/* あゆみの節目（日付のある並び .seals--dated）は、印・名前・日付の3段を、同じ段（横の4つ）でそろえる（subgrid）。名前の段の高さは、その段でいちばん長い名前で決まる
   ＝2行の名前がある段だけ名前の段が2行分になり、同じ段の日付は1本の線にそろう（スマホの4幅：AS-R5-02）。名前が全部1行の段（768px以上の列124pxでは、ほぼすべて）では、日付は名前のすぐ下に付く
   （前は名前をいつも2行分の高さに取っていたので、768・1280では名前と日付の間が1行あき、日付が次の段の印との真ん中に浮いていた：AS-R6-01）
   段の中の間は0（名前の上の8pxは .seal-name の margin）。段と段の間は .seals の20pxのまま */
.seals--dated > .seal-item { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
/* subgrid の無いブラウザは、前の形（名前を2行分の高さに取って、日付の線をそろえる） */
@supports not (grid-template-rows: subgrid) {
  .seals--dated .seal-name { min-height: 3em; }
}
/* 日付は「◯月◯日」と「以前」をそれぞれ折らない塊（.nw）にし、その間（<wbr>）だけで折る（「8月15日以／前」「10月1／4日」と割らない）。
   ふだんの字では1行。列より長いとき（320pxの2けたの月・文字だけを大きくしたとき）だけ「10月14日／以前」の2行にする（隣の列に重ねず、頁を横に流さない：AY-R5-01）
   日付は名前の p の外（li の直下の p）。字の大きさと行の高さは前の形（名前の p の中の12px・1.5）と同じ */
.seal-date { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-2); }
/* 389px以下は1列が78px未満になるので、名前を12pxにして2行までに収める（13pxの5字の文節「はじめての」「フォロワー」は66.3pxで、320pxの列66pxに入らない） */
@media (max-width: 389px) {
  .seal-name { font-size: var(--fs-caption); }
}
/* 320pxの列（66px）では、日付の字間を0にして「8月15日以前」（64.3px）を1行に収める（2けたの月の約69pxは「10月14日／以前」の2行になる） */
@media (max-width: 359px) {
  .seal-date { letter-spacing: 0; }
}
/* 次の節目の印の列は、印の大きさ（ふだん40px）に合わせる（文字だけを大きくすると印が80pxになるので、40pxの決め打ちの列だと右の文に重なる：AY-R6-04） */
.near { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 24px; }
.near-text { font-size: 15px; line-height: 1.5; }
.near .bar { margin-top: 8px; }

/* 棒（居住地は6px、あと少し・はじめの30日は4px） */
.bar { position: relative; height: 4px; background: var(--ice-2); overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--blue); }
.bar--6 { height: 6px; }

/* ---------- 引用（ひとこと・3か月前のあなた・振り返りの声） ---------- */
.quote { border-left: 2px solid var(--sky); padding-left: 12px; font-family: var(--font-mincho); font-weight: 500; font-size: var(--fs-quote); line-height: 1.9; letter-spacing: 0.02em; color: var(--ink); white-space: pre-wrap; }
.quote-src { margin-top: 8px; padding-left: 14px; font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- はじめの30日 ---------- */
.todo { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.todo-mark { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--rule-strong); color: var(--navy); transition: border-color var(--t-fast), background-color var(--t-fast); }
.todo-mark svg { width: 14px; height: 14px; stroke-width: 1.5; }
/* 済んだ印は、輪と同じ「1.5pxの濃紺の細いチェック」（塗らない） */
.todo.is-done .todo-mark { border-color: var(--navy); }
/* 自分で付ける項目は、左の丸そのものを押す（見た目22px・押せる範囲44×44px。外の11pxずつは並びの幅に数えないので、丸の位置はほかの行と同じ） */
.todo-check { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -11px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.todo-check:hover .todo-mark { border-color: var(--blue); }
.todo-check:active .todo-mark { background: var(--ice); }
.todo-check:focus-visible { outline-offset: -7px; }
.todo.is-done .row-title { color: var(--ink-2); }
.todo .row-body { flex: 1; min-width: 0; }
.todo form { display: flex; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); min-width: 120px; padding: 0 24px;
  border-radius: var(--r-ctl); border: 1px solid var(--rule); background: var(--paper); color: var(--blue);
  font-family: var(--font-gothic); font-weight: 500; font-size: var(--fs-btn); line-height: 1; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn svg { width: 18px; height: 18px; stroke-width: 1.5; }
.btn:hover { background: var(--ice); border-color: var(--blue); }
.btn--primary { background: var(--blue); border-color: var(--blue); color: var(--on-dark); }
.btn--primary:hover, .btn--primary:active { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn--s { min-height: var(--btn-h-s); min-width: 0; padding: 0 14px; font-size: 14px; }
.btn--block { width: 100%; }
/* 受講生とログインの画面の全幅のボタンは、文字だけを大きくする設定で言葉が入りきらなければ折り返す（「メールアドレスでログイン」をボタンと白い頁の外に出さない。AY-N-01）
   ふだんは1行に収まり（左右16pxなので、320px幅の白い頁の中でも12字が1行に入る）、高さ48px・字の位置も同じなので、見た目は変わらない
   行の高さ1.25は16pxの字で20px（48pxのボタンの中で上下14pxずつ＝字の位置が半端な画素にならない）。上下8pxは2行になったときの余白 */
.sheet .btn--block { white-space: normal; text-align: center; line-height: 1.25; padding: 8px 16px; }
/* 押せる範囲は44×44px以上（「戻す」のような短い言葉でも幅44px）
   字と矢印（› ↗ ⌄）・左のアイコンの間は4px（.btn の8pxを、文字ボタンだけ詰める。枠のあるボタン・主ボタンは8pxのまま。節の見出しの右のリンク・畳んだ説明と同じ値：AS-R5-05） */
.btn--text { gap: 4px; min-height: var(--tap); min-width: var(--tap); padding: 0 4px; border: 0; background: none; font-size: 15px; }
.btn--text:hover { background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.btn--text svg { width: 14px; height: 14px; }
.btn:disabled, .btn[aria-disabled='true'] { background: var(--ice-2); border-color: var(--ice-2); color: var(--ink-3); cursor: not-allowed; }
.btn--danger { color: var(--error); }
.btn--danger:hover { border-color: var(--error); background: var(--error-bg); }
/* 消す・取り下げるの引き金（開く前の summary）は副の色。赤は、確かめの中の最後のボタンだけ（マウスを載せた・焦点・開いたときだけ赤にする） */
summary.btn--danger { color: var(--ink-2); }
summary.btn--danger:hover, summary.btn--danger:focus-visible, details[open] > summary.btn--danger { color: var(--error); }
.btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.btns > form { display: flex; }
.btns--tight { margin-top: 10px; }
/* 白い頁の中の文字ボタン（メールアドレスを入れ直す・「できた」を取り消す）も、1つで頁の幅に入りきらないときだけ折り返す（320px幅で文字が2倍のとき、頁を345pxに広げていた。AY-N-01）
   並びは flex-wrap なので、ふだんは1行のまま次の行へ送られ、言葉は折れない */
.page .btns > .btn--text { white-space: normal; text-align: left; }
/* 文字ボタンが行の頭に来るときは、左の余白（4px）を外に出して、字を左の線にそろえる
   （並びの最初・隠したボタンの次・全幅のボタンの下に折り返したもの・開く部品の見出し・節の中のフォーム） */
.btns > .btn--text:first-child, .btns > [hidden]:first-child + .btn--text, .btns > .btn--block + .btn--text, details > summary.btn--text, .sec > .btn--text:first-child, .sec > form > .btn--text:first-child { margin-left: -4px; }
/* 行の右端の文字ボタンは、矢印の線の端を罫の右端にそろえる（余白4px＋アイコンの中の空き。↗は約4px・›は約5px） */
.event-act > .btn--text, .row--flush > .btn--text:last-child { margin-right: -8px; }
.todo > .btn--text:last-child { margin-right: -9px; }
/* はじめの30日の「取り消す」（矢印の無い文字ボタン）は、字の右端を罫の右端にそろえる（余白4pxだけ外に出す。ES-N-07） */
.todo > form:last-child > .btn--text { margin-right: -4px; }

/* ---------- 入力欄・選ぶ欄・チップ・チェック ---------- */
.field { display: block; margin-top: 16px; }
.field:first-child { margin-top: 0; }
.label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; font-weight: 500; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; letter-spacing: 0.04em; }
.label .hint { font-weight: 400; color: var(--ink-2); }
/* 受講生の画面の添え書きは、ラベルの下の行に小さく出す（かっこを付けない。行の頭の「（」で左の線が崩れないように）。任意の欄は小札「任意」 */
.sheet .label { row-gap: 2px; }
.sheet .label .hint { display: block; flex-basis: 100%; font-size: var(--fs-caption); letter-spacing: 0.02em; }
/* 運営の欄の注意の添え書き（要配慮個人情報の注意 .hint--note：カルテの下書き・ひとこと・メモ、今週の行の下書き）も、名前の下の行に小さく出し、かっこを付けない
   （左の列では名前の右・右の列とスマホでは「（」で始まる2行、と同じ画面で2通りに出ていた：AA-R6-05）。名前との間は受講生の欄と同じ2px
   集まりの欄の短い「（Zoomなど・任意）」「（任意）」は、名前の右に1行のまま（.label .hint） */
.a-paper .label:has(> .hint--note) { row-gap: 2px; }
.a-paper .label .hint--note { flex-basis: 100%; font-size: var(--fs-caption); letter-spacing: 0.02em; }
legend { padding: 0; }
.input, .select, .textarea {
  display: block; width: 100%; min-height: 48px; padding: 0 14px;
  border-radius: var(--r-ctl); border: 1px solid var(--rule-strong); background: var(--ice);
  font-size: var(--fs-input); color: var(--ink); line-height: 1.5;
}
.textarea { min-height: 112px; padding: 12px 14px; line-height: 1.7; resize: vertical; }
/* 受講生の書く欄（振り返りのつまずき・ベスト1）は、中身に合わせて伸ばし、右下のつまみ（ブラウザの既定の斜線）を出さない（手帳のように組んだフォームの中で、ここだけブラウザのままの部品に見えた：AS-R5-09）
   書いた分だけ欄が伸びるので、つまみで広げる必要は無い。いちばん高くても画面の半分まで（それより長い文は欄の中で送る）。いちばん低い高さ（112px・つまずきは88px）は今のまま
   field-sizing の無いブラウザ（Safari など）は今のまま（つまみで伸ばせる）。運営の下書きの欄（.textarea--draft）と同じ考え */
@supports (field-sizing: content) {
  .sheet .textarea { field-sizing: content; resize: none; max-height: 50svh; }
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.select {
  -webkit-appearance: none; appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345596E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px;
}
/* 日付・時刻の欄の標準のアイコンを、副の色の線画に置き換える */
.input[type='date'], .input[type='time'] { position: relative; }
/* iPhone の Safari は日付の欄を中央揃えのボタンの形で出し、空のときに高さが縮むことがある。ほかの入力欄と同じ左揃えの形にする（高さは .input の48px） */
.input[type='date'] { -webkit-appearance: none; appearance: none; text-align: left; }
.input[type='date']::-webkit-date-and-time-value { text-align: left; }
.input[type='date']::-webkit-calendar-picker-indicator, .input[type='time']::-webkit-calendar-picker-indicator {
  width: 18px; height: 18px; padding: 0; cursor: pointer; opacity: 1; color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345596E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
.input[type='time']::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345596E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}
.input-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.input-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.input-row .field { margin-top: 16px; }
.field.is-error .input, .field.is-error .textarea, .field.is-error .select { border-color: var(--error); }
/* 欄の誤りの文（欄のすぐ下・6pxあけて。id を付けて欄の aria-describedby と結ぶ）。「!」は2行になっても1行目の真ん中にそろえる（20.8px＝13px×1.6 の1行） */
.field-error { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: var(--fs-small); line-height: 1.6; color: var(--error); }
.field-error svg { width: 16px; height: 16px; margin-top: 2px; flex: none; }
/* 端末で言い方を変える文（auth.tsx の ByDevice・Sentences。入口リンクを読み取れなかったときの誤り：「長押し」は指で使う端末にだけ言う。CP-R6-01）
   指で使う端末（スマホ・タブレット＝pointer: coarse）は .for-touch、ほかの端末（マウス・トラックパッド）は .for-mouse だけを出す。JSが無くても効き、読み上げも見えている方だけ
   見分け方は、ホーム画面に追加の案内（app.js の installHint）と同じ。pointer を知らない古いブラウザは、どの端末にも当てはまる .for-mouse の文を出す。使うのは span だけ（inline に戻すため） */
.for-touch { display: none; }
@media (pointer: coarse) {
  .for-touch { display: inline; }
  .for-mouse { display: none; }
}
/* 字間0.3emは最後の字の後ろにも付くので、同じだけ字下げして数字のかたまりを欄の真ん中に置く */
.code-input { height: 56px; text-align: center; font-weight: 500; font-size: 28px; letter-spacing: 0.3em; text-indent: 0.3em; }

/* チップ（一歩の候補・いちばん役立ったもの）。中はラジオボタンなので JS が無くても選べる。振り返りの任意の3問は役立ち度と同じ5列の尺度（下の .scale--5） */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend, .scale-set > legend { padding: 0; margin-bottom: 8px; font-weight: 500; font-size: var(--fs-small); color: var(--ink-2); letter-spacing: 0.04em; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid var(--rule); background: var(--paper); font-weight: 500; font-size: 14px; color: var(--ink-2); line-height: 1.4; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip .chip-check { display: none; flex: none; width: 14px; height: 14px; stroke-width: 1.5; }
/* 選んだチップは、先頭にチェック（14px）を出し、枠を1.5pxの青にする。チップの幅は選ぶ前と同じにする（チェックと間の4pxの分を、左右の余白から出す）
   選ぶ前＝枠1px＋余白14px＋字＋余白14px＋枠1px、選んだあと＝枠1.5px＋余白4px＋チェック14px＋間4px＋字＋余白5px＋枠1.5px。どちらも「字＋30px」
   押した指のすぐ横で隣のチップが動き、並びが組み替わらないように（390で「Discord」が19px広がり、「仲間との会話」が次の段へ落ちていた：AS-R6-02）。一歩の候補（.chip--plan）は下の決まりで今のまま */
.chip:has(input:checked) { border: 1.5px solid var(--blue); padding: 0 5px 0 4px; gap: 4px; background: var(--ice); color: var(--navy); }
/* いちばん役立ったものの「選んだのを外す」は、問いの名前（legend）の行の右端に置く（チップの並びの外。出ても消えても、チップと下の節を動かさない：AS-R6-02）
   押せる高さ44pxの箱の下の端を、チップの並びの上の端（legend の下の8pxの余白の下）に付け、字は上に5pxを足して legend の字の行にそろえる（チップの1段目の押せる範囲に重ねない）
   右は余白4pxを外に出して、字の右端を節の右の線にそろえる。文字だけを大きくしたとき（節の入れ物の条件 19em）は、問いの名前と重なるので、前の形（チップの並びの後ろ）に戻す */
.chips[data-optional-choice] { position: relative; }
.chips[data-optional-choice] > [data-clear-choice] { position: absolute; right: -4px; bottom: 100%; padding-top: 5px; }
.chip:has(input:checked) .chip-check { display: block; }
.chip:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
/* 今週の一歩の候補は、箱にせず罫で区切った「選ぶ行」にする（白い頁の中に箱を積まない）。左の丸がラジオの印（選ぶと青の丸に点）
   文字の大きさは押せる行（.row-title・.row-sub）と同じ。丸は題の1行目の真ん中（上から24px）にそろえる */
.chips--plan { gap: 0; }
.chip.chip--plan { width: 100%; justify-content: flex-start; min-height: 56px; padding: 12px 0 12px 32px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; font-size: 15px; line-height: 1.55; color: var(--ink); text-align: left; }
.chip--plan::before { content: ''; position: absolute; left: 0; top: 14px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--rule-strong); transition: border-color var(--t-fast); }
.chip--plan:hover::before { border-color: var(--blue); }
.chip.chip--plan:has(input:checked) { border: 0; border-bottom: 1px solid var(--rule); padding: 12px 0 12px 32px; background: none; color: var(--navy); }
.chip--plan:has(input:checked)::before { border-color: var(--blue); }
.chip--plan:has(input:checked)::after { content: ''; position: absolute; left: 6px; top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.chips .chip.chip--plan:last-of-type { border-bottom: 0; }
.chip--plan .chip-why { margin-top: 2px; font-size: var(--fs-small); line-height: 1.55; text-wrap: pretty; }
/* 候補の題も文節で包む（「「0章 マインドセット講座」を3本見／る」と1字の行を出さない：AS-N-04） */
.chip-title { display: block; }
.chip-why { display: block; font-weight: 400; font-size: var(--fs-caption); color: var(--ink-2); }

/* 役立ち度（0〜10。最初はどれも選ばない）。箱を並べず、罫の上に数字を並べ、選んだ数字を丸で囲む（手帳に丸を付ける形）
   すき間の無い11列で、1つの幅は390px幅で約32px・320px幅で約26px（高さは44px）。44px未満の幅はこの部品だけの例外（DESIGN.md 4章） */
.scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--rule); }
.scale label { position: relative; display: grid; place-items: center; min-height: var(--tap); font-family: var(--font-mincho); font-weight: 700; font-size: 17px; line-height: 1; color: var(--ink-2); cursor: pointer; transition: color var(--t-fast); }
/* 選んだときの丸（直径34px・1.5pxの青）。ふだんは透明の枠で、切り替えは色だけ */
.scale label::before { content: ''; position: absolute; inset: 0; width: 34px; height: 34px; margin: auto; border-radius: 50%; border: 1.5px solid transparent; transition: border-color var(--t-fast); }
.scale input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.scale label:hover { color: var(--navy); }
.scale label:has(input:checked) { color: var(--navy); }
.scale label:has(input:checked)::before { border-color: var(--blue); }
/* 焦点の輪は、数字の丸の外側に出す（列の四角ではなく丸で） */
.scale label:has(input:focus-visible)::before { outline: 2px solid var(--blue); outline-offset: 2px; }
/* 359px以下（1つの升が約26px）は、選んだ丸を30pxにする（34pxだと両隣の升に4pxずつはみ出し、隣の数字に3〜4pxまで迫る。30pxで5.5〜5.8px空く）。押せる範囲は升のまま（AS-R-10） */
@media (max-width: 359px) {
  .scale label::before { width: 30px; height: 30px; }
}
.scale-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--fs-caption); color: var(--ink-2); }
/* 振り返りの任意の3問（もう少しだけ答える）は、役立ち度と同じ部品の5列（升は390で70px・320で56px。押せる大きさ44px以上なので、役立ち度の狭い幅の例外は要らない：AS-R6-03）
   選んだ数と言葉の行（.scale-foot）の右に「選んだのを外す」を置く。行の高さは押せる高さに決めておき、ボタンが出ても消えても下の節を動かさない */
.scale--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.scale-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); margin-top: 4px; }
.scale-foot .scale-word { margin-top: 0; }
.scale-foot [data-clear-choice] { margin-right: -4px; }
.scale-word { margin-top: 10px; min-height: 1.6em; font-size: 14px; color: var(--ink-2); }
.scale-word b { font-family: var(--font-mincho); font-weight: 700; font-size: 20px; color: var(--navy); margin-right: 6px; }
/* JSが無くても、点を選んだら「まだ選んでいません」を消す（JSがあるときは app.js が選んだ点の言葉に書き換える。E2E-09） */
fieldset:has(input[name='score']:checked) .scale-empty { display: none; }

/* チェック（行全体が押せる） */
.check { display: flex; align-items: flex-start; gap: 12px; min-height: var(--tap); padding: 10px 0; cursor: pointer; font-size: 15px; color: var(--ink); }
.check input, .check-item input, .check-arc input {
  -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0;
  border-radius: 4px; border: 1.5px solid var(--rule-strong); background: var(--paper); cursor: pointer;
}
.check input:checked, .check-item input:checked, .check-arc input:checked {
  border-color: var(--blue);
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
/* ひとつを選ぶ丸（カルテの「記録を取り消す」で、取り消す回を選ぶ）。チェックと同じ大きさ・枠で、選んだら中に青い丸 */
/* 誤りのあるチェック（はじめの登録の同意）は、枠を誤りの色にする（入力欄の .field.is-error と同じ。DESIGN.md「誤りの見せ方」。AS-N-10） */
.check input[aria-invalid='true'] { border-color: var(--error); }
.check input[type='radio'] { border-radius: 50%; }
.check input[type='radio']:checked { border-color: var(--blue); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%231B5E8C'/%3E%3C/svg%3E") center / 22px 22px no-repeat; }

/* 使い道の説明（点は空色の小さな丸） */
.purpose { display: grid; gap: 6px; }
.purpose li { position: relative; padding-left: 14px; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.purpose li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); }

/* ---------- 小札 ---------- */
/* 高さは「いちばん低いときの高さ」（min-height 22px）。文字だけを大きくする設定では字に合わせて伸び、枠の線が字にかからない（WCAG 1.4.4。AY-R-04）
   上下2pxの余白は、ふだんの22pxの中に収まる（12pxの字＋2px×2＋枠1px×2＝18px）ので、受講生・運営のどの小札も見た目は変わらない */
.tag { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: var(--r-tag); border: 1px solid var(--rule); background: var(--paper); font-family: var(--font-gothic); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: 0.04em; color: var(--ink-2); white-space: nowrap; vertical-align: middle; }
.tag--gold { border-color: var(--gold); color: var(--gold-ink); }
.tag--blue { border-color: var(--blue); color: var(--blue); }
.tag--fill { border-color: var(--blue); background: var(--blue); color: var(--on-dark); }
.tag--error { border-color: var(--error); color: var(--error); }

/* ---------- お知らせ・トースト・空の状態 ---------- */
.notice { padding: 12px 16px; border-left: 2px solid var(--blue); background: var(--ice); font-size: 14px; color: var(--ink); line-height: 1.7; }
.notice--error { border-left-color: var(--error); background: var(--error-bg); }
.notice--error .notice-h { color: var(--error); font-weight: 500; }
/* 出し直しの頁で、app.js（focusFirstError）がフォームの頭の誤りの知らせを画面の上へ送るときは、上の端から16pxあける（白い頁の縁と問いの見出しを切らない。運営のスマホは上のナビの分＝scroll-padding-top に足して16px：AS-R5-01） */
main .notice[role='alert'] { scroll-margin-top: 16px; }
/* 欄が1つのフォーム（コード・入口リンク）で、欄の下の誤りの文が role="alert" のときは、app.js が知らせでなく欄の箱を画面の上へ送る（知らせを上へ送ると、欄が画面の上の外に出る：AY-R6-01）。
   そのときもラベルを画面の上の縁に付けない（16px。運営のスマホは scroll-padding-top に足される） */
main .field.is-error { scroll-margin-top: 16px; }
/* 誤りのある組（役立ち度・チップ）は、罫とチップの枠を誤りの色にする（入力欄の .field.is-error と同じ。DESIGN.md「誤りの見せ方」） */
fieldset.is-error .scale { border-bottom-color: var(--error); }
fieldset.is-error .chip { border-color: var(--error); }
.notice .btns { margin-top: 10px; }
/* トースト（成功のお知らせ）：下のタブのすぐ上に出す（表紙のロゴや空の上に重ねない。白地の上なら濃紺がはっきりし、親指の近くに出る）
   タブの無い画面（運営・ログイン・入口）は下から20px。出し入れは不透明度だけ（120ms）。誤りには使わない（紙面・欄の近くに残す） */
/* 横の置き方は、左右16pxの間で中央（left: 50% と transform で置くと、幅が画面の半分までしか広がらず、短い文でも3行の塊になる） */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px); z-index: 60;
  width: fit-content; max-width: 560px; margin: 0 auto; padding: 12px 18px; border-radius: var(--r-ctl); background: var(--navy); color: var(--on-dark);
  /* 文は JS が入れるので BudouX の .ph が無い。Chrome の文節の折り返し（auto-phrase）で「決めら／れました」のように語の途中で折らない */
  word-break: auto-phrase; text-wrap: pretty;
  font-weight: 500; font-size: 14px; line-height: 1.5; opacity: 0; pointer-events: none; transition: opacity var(--t-fast);
}
body:not(:has(.tabbar)) .toast { bottom: calc(env(safe-area-inset-bottom) + 20px); }
/* 運営のスマホで下に貼り付く保存の帯（出欠）があるときは、その上に出す（帯の高さ 12＋48＋12px の上に16px） */
@media (max-width: 899px) { body:has(.save-bar) .toast { bottom: calc(env(safe-area-inset-bottom) + 88px); } }
/* 運営のPCは、左の帯を除いた紙面の真ん中に出す（画面全体の真ん中だと左の帯の分だけ左に寄り、左の列のボタンに重なる：AA-R-17）
   紙面は左に寄せて1280px（広い紙面 a-paper--wide は1440px）までなので、それより広い画面では、紙面の右の端から16px内側を右の端にする（right の % は画面の幅） */
/* 紙面の中では右に寄せる（真ん中だと、カルテ・今週の左右の列の境にまたがる：16-5の12・2026-10-23 推奨案で決定。重なっても押す操作は妨げない＝pointer-events: none・2.6秒で消える）。
   左右の端は紙面の余白（40px）にそろえる（中身の右の線より24px外に出ていた：13回目の直し AA-R9-16） */
@media (min-width: 900px) {
  html.is-admin .toast { left: calc(var(--admin-nav-w) + 40px); right: max(40px, calc(100% - var(--admin-nav-w) - 1280px + 40px)); margin: 0 0 0 auto; }
  html.is-admin body:has(.a-paper--wide) .toast { right: max(40px, calc(100% - var(--admin-nav-w) - 1440px + 40px)); }
}
.toast.show { opacity: 1; }
/* サーバーが描いたトースト（JSが無くても出る）。2.6秒見せてから、不透明度だけで消す（JS があれば app.js が引き継いで、この指定を外す） */
.toast--server { animation: toast-out var(--t-fast) linear 2.6s forwards; }
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }
.empty { font-size: 14px; color: var(--ink-2); line-height: 1.7; }

/* ---------- 写真・イラスト・図解（8回目の直し：文字だけの画面にしない。部品は src/views/visuals.tsx、決まりは DESIGN.md 5章・4章） ---------- */
/* 写真は角丸の四角（白い頁の頭は10px・行の小さな正方形は8px）。読み込むまでは氷の色の地（形は width・height で先に決まるので、読み込んでも下が動かない） */
.art { display: block; max-width: 100%; height: auto; background: var(--ice); }
.art--hero { width: 100%; aspect-ratio: 16 / 9; max-height: 220px; object-fit: cover; border-radius: 10px; margin: 4px 0 16px; }
/* 高さは220pxまで（パソコン・タブレットの560pxの列で約290pxになり、最初の画面の多くを写真が占めていた。それより広い幅では上下を切り抜く） */
.art--wide { aspect-ratio: 5 / 2; margin-top: 0; }
.art--thumb { width: 56px; height: 56px; flex: none; border-radius: 8px; object-fit: cover; }
.art--thumb-s { width: 44px; height: 44px; }
/* 講義の行：左に章の表紙、見終えた章は写真の右下に青の丸の印。進み具合は名前の下の細い棒 */
.row--art { align-items: flex-start; gap: 14px; }
.row-art { position: relative; flex: none; display: block; }
.row-art-done { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF; }
.row-art-done svg { width: 14px; height: 14px; stroke-width: 1.5; }
.row--art .bar { margin-top: 8px; max-width: 240px; }
.row--art > .row-end { align-self: center; }
/* 集まりの行：左に種類の写真（日時・名前・種類と会場の3段の左。右の動きは3段目の右のまま） */
.sec .event--art { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 14px; }
.sec .event--art > .event-art { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-top: 4px; }
.sec .event--art > .event-when, .sec .event--art > .event-title { grid-column: 2 / -1; }
.sec .event--art > .event-meta { grid-column: 2; grid-row: 3; }
.sec .event--art > .event-act { grid-column: 3; grid-row: 3; }
/* イラスト（空の状態・お休み・見つからない頁・ようこそ）。白地のまま紙面に置き、枠も影も付けない。左の線にそろえる（中央揃えにしない） */
.spot { display: block; width: 168px; height: auto; margin: 0 0 8px -12px; }
.spot--s { width: 128px; }
/* 流れの図：丸いアイコンを左から右へ並べ、間を空色の細い矢印でつなぐ（段は3〜4つ。320pxでも1行） */
.flow { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.flow-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.flow-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ice); border: 1px solid var(--rule); color: var(--blue); }
.flow-ico svg { width: 22px; height: 22px; stroke-width: 1.5; }
.flow-text { font-size: var(--fs-small); line-height: 1.5; color: var(--ink); }
.flow-step:not(:last-child)::after { content: ''; position: absolute; top: 24px; left: calc(50% + 30px); right: calc(-50% + 22px); border-top: 1.5px solid var(--sky); }
.flow-step:not(:last-child)::before { content: ''; position: absolute; top: 20px; right: calc(-50% + 22px); width: 7px; height: 7px; border-top: 1.5px solid var(--sky); border-right: 1.5px solid var(--sky); transform: rotate(45deg); }
.flow--4 .flow-ico { width: 44px; height: 44px; }
.flow--4 .flow-step:not(:last-child)::after { top: 22px; left: calc(50% + 28px); right: calc(-50% + 20px); }
.flow--4 .flow-step:not(:last-child)::before { top: 18px; right: calc(-50% + 20px); }
/* 3つの輪の数え方の図：輪の形のアイコン・輪の名前・数えるもの（3列） */
.ring-guide { list-style: none; margin: 12px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ring-guide-i { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ring-guide-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--blue); color: var(--blue); }
.ring-guide-ico svg { width: 20px; height: 20px; stroke-width: 1.5; }
.ring-guide-name { margin-top: 2px; font-weight: 500; font-size: 14px; color: var(--navy); }
.ring-guide-what { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-2); }
/* 何に使うかの図：情報のアイコン（氷の丸）→ 何のために使うか。行は罫で区切る */
.purpose-map { list-style: none; margin: 0; padding: 0; }
.purpose-map-i { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.purpose-map-i:first-child { padding-top: 0; }
.purpose-map-i:last-child { border-bottom: 0; }
.purpose-map-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ice); color: var(--blue); }
.purpose-map-ico svg { width: 20px; height: 20px; stroke-width: 1.5; }
.purpose-map-what { display: block; font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--navy); }
.purpose-map-why { display: block; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }
/* 歩んだ週のスタンプ：週ごとに足あとのバッジ（白い丸のシール）。減らない数なので、抜けた週は描かない（9回目の直し：明朝の「歩」の字の印をやめた） */
.stamps { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 8px 6px; }
.stamp { display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px var(--rule); }
.stamp > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 節目のバッジ（9回目の直し：たいがさん「◯の中に益とかあるのが怖い」→ 明朝の漢字の印をやめ、節目ごとのイラストの丸いシールにした。visuals.tsx の Badge） ---------- */
.badge { position: relative; display: inline-block; flex: none; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px var(--rule), 0 2px 6px rgba(14, 47, 71, 0.08); }
.badge > img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.badge--xl { width: 104px; height: 104px; }
.badge--l { width: 88px; height: 88px; }
.badge--m { width: 64px; height: 64px; }
.badge--d { width: 48px; height: 48px; }
.badge--todo { width: 44px; height: 44px; }
.badge--s { width: 28px; height: 28px; box-shadow: 0 0 0 1px var(--rule); }
/* まだ届いていない節目（次の節目）は、色を抜いて淡く（届いたら色が付く楽しみを残す） */
.badge--muted { background: var(--ice); }
.badge--muted > img { filter: grayscale(1); opacity: 0.5; }
/* やり切った週の今週の一歩：右下に青のチェック */
.badge-check { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF; }
.badge-check svg { width: 12px; height: 12px; stroke-width: 1.5; }
.tl-mark .badge--s { margin-top: -3px; }
/* 節目の並び：320pxの4列（列66px）でもバッジが列に入る */
@media (max-width: 359px) { .badge--m { width: 56px; height: 56px; } }
/* 3つの輪の真ん中に、その輪のアイコン（目標に届いたらチェックに変わる） */
.ring-box { position: relative; display: grid; place-items: center; flex: none; }
/* 3つとも目標に届いた週のひとこと（金の小さな文字の色・星のアイコン） */
.rings-all { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 500; font-size: 14px; color: var(--gold-ink); }
.rings-all svg { width: 16px; height: 16px; flex: none; stroke-width: 1.5; }
.ring-box > .ring-ico { position: absolute; width: 18px; height: 18px; color: var(--blue); stroke-width: 1.5; }
/* 節の見出しの頭のアイコン（氷の丸に青の線。何の節かを、読む前に目で分かるように） */
.sec-head h2:has(> .h-ico) { display: flex; align-items: center; gap: 10px; }
.h-ico { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--ice); color: var(--blue); stroke-width: 1.5; }
/* 押したことに答える動き：「できた」を押した直後だけ、ほめ言葉がふわっと出て、足あとのバッジにチェックがぽんと付く（動きを減らす設定では動かない） */
@media (prefers-reduced-motion: no-preference) {
  .done-line--new { animation: un-rise 0.6s ease-out both; }
  .badge--pop .badge-check { animation: un-pop 0.5s 0.25s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
}
@keyframes un-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes un-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- 折れ線（何の線かは見出しに書く） ---------- */
/* 線と両端の丸は、列の内側へ5pxずつ入れる（8pxの丸の半分＋1px。丸を列の外・罫の右端の外へはみ出させない：AS-R5-08）
   下の罫は .chart-wrap の下の線にして、列の幅いっぱいに引く（下の「7月 6点」「9月 8点」の端と罫の端は、列の端にそろったまま）。丸の位置は ui.tsx の LineChart が同じ内側の幅で数える */
.chart { display: block; width: 100%; height: 72px; overflow: visible; }
.chart .line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: var(--fs-small); color: var(--ink-2); }
.chart-ends b { font-weight: 500; color: var(--navy); }
.chart-wrap { position: relative; padding-inline: 5px; border-bottom: 1px solid var(--rule); }
.chart-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--blue); }

/* ---------- あゆみ（月ごとの記録の行） ---------- */
/* 月の最後の行は下の余白を持たない（節の最後の行と同じ）ので、月と月の間は節の余白と同じ28px */
.month + .month { margin-top: 28px; }
.month-h { font-family: var(--font-mincho); font-weight: 500; font-size: 16px; color: var(--navy); line-height: 1.5; margin-bottom: 4px; }
/* 日付と印は、題の1行目にそろえる（2〜3行の項目でも、行と行の間に浮かない）。22.5px＝題の1行の高さ（15px×1.5） */
.tl { display: grid; grid-template-columns: 3.4em 28px minmax(0, 1fr); column-gap: 10px; align-items: start; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--rule-ledger); }
.tl-date { font-size: var(--fs-small); line-height: 22.5px; color: var(--ink-2); white-space: nowrap; }
.tl-mark { width: 28px; height: 22.5px; display: grid; place-items: center; }
/* 28pxの小さな印は1行の高さより大きいので、上に少し出して題の1行目の真ん中にそろえる */
.tl-mark .seal--s { margin-top: -3px; }
.tl-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--blue); }
/* 年表の出来事の種類のアイコン（氷の丸に青の線。節目の印より小さく、点より目に入る） */
.tl-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ice); color: var(--blue); }
.tl-ico svg { width: 14px; height: 14px; stroke-width: 1.5; }
.tl-title { font-size: 15px; line-height: 1.5; }
.tl-sub { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }

/* ---------- ホーム画面に追加の案内 ---------- */
.install-ico { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; color: var(--ink-2); }
/* お知らせ1つにまとめた案内の2文目（入り直し方）は、小さく副の色で */
.notice .install-note { margin-top: 6px; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; }

/* ---------- 下部のタブ ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--paper); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); }
/* タブの高さは「いちばん低いときの高さ」（56px）。文字だけを大きくする設定（Android の文字の大きさ・Firefox の文字だけの拡大）で言葉が2行になっても、下を切らずに伸びる（AY-N-01）
   上下6pxの余白は、ふだんの56pxの中に収まる（アイコン22＋間3＋言葉13＝38px）ので、見た目は変わらない */
.tabbar-inner { max-width: var(--content-max); margin: 0 auto; min-height: var(--tab-h); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; text-align: center; color: var(--ink-2); font-weight: 500; font-size: var(--fs-tab); line-height: 1.2; letter-spacing: 0.04em; text-decoration: none; }
.tab svg { width: 22px; height: 22px; stroke-width: 1.5; }
.tab[aria-current='page'] { color: var(--navy); font-weight: 700; }
/* 選んだタブも線は1.5pxのまま（違いは色と文字の太さだけ） */
.tab[aria-current='page'] svg { stroke-width: 1.5; }
.tab:focus-visible { outline-offset: -4px; }

/* ---------- お祝いの画面（節目が届いたとき） ---------- */
.celebrate { position: fixed; inset: 0; z-index: 70; background: var(--soft-fallback); overflow-y: auto; }
.celebrate .cover-photo img { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.celebrate-inner { position: relative; min-height: 100%; max-width: var(--content-max); margin: 0 auto; padding: max(22svh, calc(env(safe-area-inset-top) + 40px)) 28px calc(env(safe-area-inset-bottom) + 32px); display: flex; flex-direction: column; }
.celebrate h2 { margin-top: 24px; font-family: var(--font-mincho); font-weight: 700; font-size: 28px; line-height: 1.4; color: var(--navy); }
.celebrate p { margin-top: 12px; font-size: 16px; line-height: 1.8; color: var(--ink); }
.celebrate .celebrate-date { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-2); }
.celebrate .btns { margin-top: auto; padding-top: 40px; }
/* 成果の節目の「成果報告チャンネルで仲間に伝える」（主の「ありがとう」の下の文字のボタン：16-5の19） */
.celebrate .btns > .celebrate-share { margin: 6px 0 0; justify-content: center; }
/* 縦に余裕のある画面（740px以上：390×844・414×896・PC）は、印を128pxにして節目の重さを出す（88pxのままだと、日付の下から「ありがとう」まで約300pxの空が残り、山場の手応えが弱い。AS-R-07）
   印は今のまま金の1本の線（光沢のあるメダルにしない）。題も少し大きく・印との間を広くし、上の余白は少し詰める。375×667 などの低い画面は今のまま（空きは約130pxで釣り合っている）
   円の大きさは字の大きさの em（ふだんは128px。文字だけを大きくしても字が円からはみ出さない：AY-R6-04） */
@media (min-height: 740px) {
  .celebrate .badge--xl { width: 136px; height: 136px; }
  .celebrate .seal--l { width: calc(128em / 56); height: calc(128em / 56); font-size: 56px; }
  .celebrate .seal--l.seal--2 { width: calc(128em / 44); height: calc(128em / 44); font-size: 44px; }
  .celebrate h2 { margin-top: 32px; font-size: 30px; }
  .celebrate-inner { padding-top: max(20svh, calc(env(safe-area-inset-top) + 40px)); }
}

/* ---------- 法務の頁（プライバシーポリシー） ---------- */
/* 本文の見出しも文節で折り、最後の行に1字だけ残さない（「…削除を求めると／き」にしない：AS-N-15。Safari は字の単位のまま） */
.doc h2 { margin-top: 28px; font-family: var(--font-mincho); font-weight: 500; font-size: 17px; color: var(--navy); line-height: 1.5; word-break: auto-phrase; text-wrap: pretty; }
.doc h2:first-child { margin-top: 0; }
/* プライバシーポリシーの長い本文は文節（Phrase）で包まないので、Chrome の文節の折り返しで「データ／ベース」「入口リ／ンク」と語の途中で折らない（AS-N-15。Safari は字の単位のまま）。
   講師の名前と敬称は legal.tsx の .nw で割らない */
.doc p, .doc li { margin-top: 8px; font-size: 15px; line-height: 1.8; word-break: auto-phrase; }
.doc ul { padding-left: 0; }
/* 本文の中のリンク（公式LINEの問い合わせ）：新しい画面で開く印は字の大きさ（大きさを決めないと、線画の svg が列いっぱいに広がった） */
.doc a > svg { display: inline-block; width: 0.9em; height: 0.9em; margin-left: 2px; vertical-align: -0.1em; }
.doc li { position: relative; padding-left: 14px; }
.doc li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); }
/* 戻る道（帯の下と、頁の終わり）。ホーム画面に追加したアプリには戻るボタンが無いので、文字ボタンで前の画面へ戻す（app.js の data-back）
   左向きの矢印（› を裏返す）の線の端を、左の線にそろえる（余白4px＋矢印の中の空き5px） */
.back-row { padding: 8px var(--gutter) 0; }
.back-row > .btn--text { margin-left: -9px; }
.ico-back { transform: scaleX(-1); }
.back-row + .doc { padding-top: 12px; }
.doc + .back-row { padding-top: 0; }

/* ============================================================
   運営の画面（たいがさん用）。PCが基本で、スマホでも使える
   ============================================================ */
.admin {
  --fs-page: 40px;
  --fs-h2: 26px;
  --fs-h3: 20px;             /* 見出しの2段目（小さい見出し）：2列のうち右の列の節の見出し（DESIGN.md 3章） */
  --fs-name: 22px;
  --fs-num: 24px;
  --fs-quote: 17px;
  --fs-body: 16px;
  --fs-btn: 15px;
  --fs-small: 14px;
  --fs-caption: 13px;
  --r-ctl: 8px;
  --sec-y: 32px;
  display: grid; grid-template-columns: var(--admin-nav-w) minmax(0, 1fr); min-height: 100svh;
  font-size: var(--fs-body);
}
@media (max-width: 899px) {
  .admin { --fs-page: 24px; --fs-h2: 20px; --fs-name: 18px; --fs-num: 20px; --fs-body: 15px; --fs-small: 13px; --fs-caption: 12px; --admin-band-h: 96px; --sec-y: 28px; grid-template-columns: minmax(0, 1fr); }
}
/* マウスで使う運営のPCだけ、小ボタンを低くしてよい */
@media (min-width: 900px) and (pointer: fine) {
  .admin { --btn-h-s: 36px; }
}

/* 左の帯（PC） */
.a-nav { position: sticky; top: 0; height: 100svh; overflow-y: auto; background: var(--navy); color: var(--sky-pale); display: flex; flex-direction: column; }
.a-logo { display: block; min-height: 88px; padding: 28px 24px 24px; font-family: var(--font-mincho); font-weight: 500; font-size: 18px; letter-spacing: 0.08em; line-height: 1.4; color: var(--on-dark); text-decoration: none; }
.a-nav a.nav { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 24px 0 22px; border-left: 2px solid transparent; color: var(--sky-pale); font-weight: 500; font-size: 15px; text-decoration: none; transition: color var(--t-fast); }
.a-nav a.nav svg { width: 20px; height: 20px; stroke-width: 1.5; }
.a-nav a.nav:hover { color: var(--on-dark); }
.a-nav a.nav[aria-current='page'] { background: var(--navy-2); border-left-color: var(--sky); color: var(--on-dark); font-weight: 700; }
.a-nav a:focus-visible { outline: 2px solid var(--on-dark); outline-offset: -2px; }
.a-who { margin-top: auto; padding: 24px; font-size: 12px; color: var(--sky-pale); line-height: 1.6; word-break: break-all; }
@media (max-width: 899px) { .a-nav { display: none; } }

/* 空の帯（運営）。高さは「いちばん低いときの高さ」（min-height）：見出しが2行になったら帯が伸びる（切らない。写真は inset:0 なので伸びた帯も覆う）
   PCは見出しの字の上端を、左の帯のロゴの字の上端（28px）にそろえる。帯（136px）の下端は、左の帯の1つ目と2つ目の項目の境（.a-logo の88px＋48px）にそろう
   今週も同じ136px（画面を移っても見出しの位置が動かない枠にする。今週の強さは帯でなく、KPIと「今週声をかける人」の行で出す：AA-R-03） */
.a-band { position: relative; min-height: calc(env(safe-area-inset-top) + var(--admin-band-h)); background: var(--cover-fallback); overflow: hidden; color: var(--on-dark); }
/* 帯の専用の写真（sky_band・3:1）。帯は縦の真ん中の4割を見せる（左の深い青が、左の濃紺の帯へつながる） */
.a-band .cover-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
/* 帯が狭いと、見出しと要約が帯の幅の半分〜6割まで伸びて写真の明るい側に載る。写真を広く置いて、左の深い青だけを見せる（白い見出しで5:1以上）
   スマホは1.6倍・PCの狭い幅（900〜1279px）は1.25倍。1280px以上は帯の幅のまま（2倍の画面での引き伸ばしは、1440px幅で1.10倍・1920px幅で1.55倍。前の sky_wide は1.56倍・2.19倍） */
@media (max-width: 899px) { .a-band .cover-photo img { width: 160%; } }
@media (min-width: 900px) and (max-width: 1279px) { .a-band .cover-photo img { width: 125%; } }
/* 中身は帯の64%まで（PC）。40pxの見出しは大きい字なので白との比は3:1で足り、写真の64%までは3.9:1以上ある（1280pxで「UNLOCKグルコン（10月前半）」555pxを1行に入れ、帯を136pxのままにする：AA-R-09）
   14pxの要約（4.5:1が要る）は、下の .a-band-sub の決まりで帯の55%までで折る */
.a-band-inner { position: relative; min-height: calc(env(safe-area-inset-top) + var(--admin-band-h)); max-width: 64%; padding: calc(env(safe-area-inset-top) + 28px) 40px 24px; display: flex; flex-direction: column; justify-content: flex-end; }
.a-band-logo { display: none; font-family: var(--font-mincho); font-weight: 500; font-size: 15px; letter-spacing: 0.08em; color: var(--on-dark); text-decoration: none; }
.a-band-title { font-family: var(--font-mincho); font-weight: 500; font-size: var(--fs-page); line-height: 1.3; letter-spacing: 0.04em; }
/* 要約は1行に収まる言葉で書く（帯の高さをそろえる）。狭い幅で2行になるときは、行の長さをそろえて2行目に1〜2字だけ残さず、文節の境で折る（AA-N-13。auto-phrase は Chrome だけ） */
.a-band-sub { margin-top: 8px; font-weight: 500; font-size: 14px; letter-spacing: 0.04em; line-height: 1.5; text-wrap: balance; word-break: auto-phrase; }
/* 14pxの要約（4.5:1が要る）は、見出しと違って帯の55%までで折る（写真の明るい側に載せない：AA-R-09）。1280px以上は写真が帯の幅のままで、帯の55%までは4.7:1以上
   900〜1279pxは写真を125%に広げているので、前の帯の60%（−左右の余白）とほぼ同じ所で折れる。帯の幅は帯を入れ物にして測る（cqw。使えない古いブラウザは中身の64%まで） */
@media (min-width: 900px) {
  .a-band { container-type: inline-size; }
  .a-band-sub { max-width: calc(55cqw - 40px); }
}
/* 帯の要約の区切り（全角の「｜」の代わりの細い縦の線。前後の空きをそろえる。読み上げは中の .sr の「、」） */
.a-band-sub .sep, .a-sub-m .sep { display: inline-block; width: 1px; height: 0.9em; margin: 0 0.6em; background: currentColor; opacity: 0.6; vertical-align: -0.1em; }
/* 前が閉じかっこ（「（水）」）のときは、かっこの字の中に右の空きがあるので、線の左の空きを詰める（左右の見た目の空きをそろえる）。
   ゴシックのかっこは半分の幅（'UN Gothic Brackets'）で、「）」の中の右の空きは約0.2em。0.6em − 0.2em ＝ 0.4em（全角のかっこの約0.7emの空きのときは0だった） */
.a-band-sub .sep--close, .a-sub-m .sep--close { margin-left: 0.4em; }
.a-band--slim { --admin-band-h: 136px; }
/* 要約の無い帯（講義の進捗の取り込み・見つからない頁）：PCでも見出しを下に寄せず、要約のある帯と同じ位置に置く（行の箱の上端31px＝字の上端28pxでロゴにそろう。帯の高さは136pxのまま：AA-N-13） */
@media (min-width: 900px) {
  .a-band--nosub .a-band-inner { justify-content: flex-start; padding-top: calc(env(safe-area-inset-top) + 31px); }
}
@media (max-width: 899px) {
  .a-band-inner { max-width: none; padding: calc(env(safe-area-inset-top) + 10px) var(--gutter) 14px; justify-content: space-between; }
  .a-band-logo { display: block; }
  .a-band-sub { display: none; }
  .a-band--slim { --admin-band-h: 96px; }
}

/* 上のナビ（スマホ）。横に流れる。焦点を移すと見える所まで横に動く（scroll-padding-inline）。今いる画面の項目は app.js が最初から見える所まで送る
   項目は左右に4pxの余白を持たせ、焦点の輪をその内側に描く（ナビの overflow で輪の上下が切れないように）。字の並びの位置は前と同じ（余白16＋4＝20） */
.a-mnav { display: none; }
@media (max-width: 899px) {
  .a-mnav { position: sticky; top: 0; z-index: 20; display: flex; gap: 12px; height: 44px; padding: 0 calc(var(--gutter) - 4px); overflow-x: auto; scroll-padding-inline: var(--gutter); background: var(--paper); border-bottom: 1px solid var(--rule); scrollbar-width: none; }
  .a-mnav::-webkit-scrollbar { display: none; }
  .a-mnav a { position: relative; display: flex; align-items: center; padding: 0 4px; white-space: nowrap; font-weight: 500; font-size: 14px; color: var(--ink-2); text-decoration: none; }
  .a-mnav a[aria-current='page'] { color: var(--navy); font-weight: 700; }
  .a-mnav a[aria-current='page']::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; background: var(--navy); }
  .a-mnav a:focus-visible { outline-offset: -2px; }
  /* 上に貼り付けたナビ（44px）の下に、焦点を移した欄が入らないようにする（AdminLayout の html.is-admin） */
  html.is-admin { scroll-padding-top: calc(44px + 12px); }
}

/* 紙面 */
.a-main { min-width: 0; }
.a-paper { max-width: 1280px; padding: 32px 40px 64px; }
/* 一覧の画面（受講生・講義・振り返り）は、広い画面で表を広く使う（今週・カルテは今のまま。どちらも左に寄せる） */
.a-paper--wide { max-width: 1440px; }
@media (max-width: 899px) { .a-paper { padding: 20px var(--gutter) 48px; } }
/* スマホでは帯の要約（件数・会員番号・日時など）を隠すので、紙面の頭に出す（AdminLayout） */
.a-sub-m { display: none; }
@media (max-width: 899px) { .a-sub-m { display: block; margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--ink-2); } }
/* 紙面の頭の要約も、帯の要約と同じく行の長さをそろえて文節の境で折る（「入／力済み」「7月／14日」と語や日付の途中で折らない。auto-phrase は Chrome だけ） */
.a-sub-m { text-wrap: balance; word-break: auto-phrase; }
/* 要約（PCでは隠れている）のすぐ後の節は、紙面の最初の節として扱う（.a-sec:first-child と同じく上の余白を付けない） */
.a-sub-m + .a-sec { padding-top: 0; }
.a-sub { margin-bottom: 20px; font-size: var(--fs-small); color: var(--ink-2); }
.a-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.a-actions-r { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
/* 横に並べるのは、直下のボタンだけのフォームだけ。開いた details の中の確かめ（説明→チェック→ボタン）は、ふつうの縦の並びにする */
.a-actions-r > form { display: flex; }
.a-sec { padding: var(--sec-y) 0; }
.a-sec + .a-sec { border-top: 1px solid var(--rule); }
.a-sec:first-child { padding-top: 0; }
.a-sec-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 16px; }
.a-sec-head h2 { font-family: var(--font-mincho); font-weight: 500; font-size: var(--fs-h2); line-height: 1.4; letter-spacing: 0.04em; color: var(--navy); }
/* 見出しの2段目：2列のうち右の列（1fr）の節の見出しは20px（狭い列に、主の列と同じ強さの見出しを並べない。強いのは主の列の見出し）
   1列に落ちる幅（1099px以下）では、どの節も同じ段（--fs-h2） */
@media (min-width: 1100px) {
  .a-grid > :last-child .a-sec-head h2 { font-size: var(--fs-h3); letter-spacing: 0.02em; }
}
.a-sec-head .count, .a-sec-head .hint { font-size: var(--fs-small); color: var(--ink-2); }
.a-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: 48px; margin-top: 8px; }
.a-grid--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.a-grid > * { min-width: 0; }
/* 2列に並べた節どうしには、上の罫と余白を付けない（隣の列の見出しと高さをそろえる。.a-sec + .a-sec の罫は、縦に積んだ節どうしだけ） */
.a-grid > .a-sec { border-top: 0; padding-top: 0; }
.a-grid > :last-child { position: relative; }
.a-grid > :last-child::before { content: ''; position: absolute; left: -24px; top: 0; bottom: 0; width: 1px; background: var(--rule); }
/* 2列のときは、右の列の箱（と縦の罫）を右の列の中身の終わりで止める（左の列の方が長いとき、右の3分の1に罫だけを何画面も引かない：AA-R5-02）
   右の列の方が長い画面は、見た目が変わらない。1列に落ちる幅（1099px以下）と、並びを flex にする今週のスマホ（.a-home の display: contents）には効かせない */
@media (min-width: 1100px) {
  .a-grid > :last-child { align-self: start; }
}
@media (max-width: 1099px) {
  .a-grid, .a-grid--even { grid-template-columns: minmax(0, 1fr); }
  .a-grid > :last-child::before { display: none; }
  /* 1列に落ちたら、2列目の頭に罫と、節の間と同じ余白を付ける（罫に見出しが接しないように） */
  .a-grid > :last-child { border-top: 1px solid var(--rule); padding-top: var(--sec-y); }
}
.a-more { margin-top: 12px; }
/* 節の終わりの「詳しい画面へ」の文字ボタン：文字を列の左の線にそろえる（文字ボタンの左右の4pxの余白を戻す）
   言葉（span と Phrase）は、列より長いとき（文字だけ200%のスマホ）だけ文節の境で折り、頁を横に広げない（「声かけの対象を受講生の一覧で見る」で390pxの頁が545pxに広がっていた：AY-R5-02）
   ふだんは1行に入るので、折れない。行の高さ（字の大きさ＋6px）と上下6pxは、2行に折れたときの行の間と余白（44pxの押せる高さの中で上下同じに足す）
   行の高さは「字の大きさ＋偶数px」にする。1行のときの字の位置が今（行の高さ1）と同じになる（1.25＝15pxの字で18.75pxだと、字が0.9px上がる。1280・1440・390で画素が同じことを確かめた） */
.a-more .btn--text { margin-left: -4px; white-space: normal; text-align: left; line-height: calc(1em + 6px); padding-top: 6px; padding-bottom: 6px; }
/* 節の下の余白も、受講生の .sec と同じ決まりにする：最後のインク（字・罫・枠）から下の罫までを、どの節も節の余白（PC32px・スマホ28px）前後にそろえ、
   罫から次の見出しまでの余白と釣り合わせる（手帳の行のリズム：AA-R-06）
   ①節の最後の行（帳簿・講義の行・声・あゆみ・メモ・紐付いているID）は下の余白を持たない。並びが節の終わりにあるとき（節の直下か、節の最後の入れ物の中の最後の行）だけ
   ②節の終わりが閉じた文字ボタン（「詳しい画面へ」・「直す」・「消す」などの summary）のときは、押せる高さ44pxの字の下の空き（約12px）を節の下の余白に重ねる
   ③畳んだ説明（details.help）は、小ボタンの高さ（PCのマウス36px・指44px）から字の行（14px×1.4）を引いた半分を重ねる
   ②③のボタンは行の箱の上にそろえる（vertical-align: top。入れ物の行の高さ＝本文の1.75が、重ねた分の下に空きを残さないように） */
.a-sec > :is(.ledger-row, .row--flush, .voice, .tl, .note-row, .id-row):last-child,
.a-sec > :last-child > :is(.ledger-row, .row--flush, .voice, .tl, .note-row, .id-row):last-child { padding-bottom: 0; min-height: 0; }
.a-sec > .id-row:last-child > .id-val { padding-bottom: 0; }
.a-sec > .a-more:last-child > .btn--text,
.a-sec > details:not([open]):last-child > summary.btn--text,
.a-sec > .note-row:last-child > details:not([open]):last-child > summary.btn--text,
.a-sec > :last-child > .note-row:last-child > details:not([open]):last-child > summary.btn--text { vertical-align: top; margin-bottom: -12px; }
.a-sec > details.help:not([open]):last-child > summary { vertical-align: top; margin-bottom: calc((1.4em - var(--btn-h-s)) / 2); }
/* 集まりが0件で、開いた「集まりを足す」の欄が節の終わりにあるときは、下の表との間の余白（24px＋8px）を持たない。スマホの変更の履歴（2段に積んだ行）の最後の行も同じ */
.a-sec > .a-add:last-child { margin-bottom: 0; }
.a-sec > .a-add:last-child > .a-add-body { padding-bottom: 0; }
@media (max-width: 899px) {
  .a-sec > .table-wrap:last-child > table.t-hist tr:last-child { padding-bottom: 0; }
}
/* 中身の幅が狭い節（講義の進み具合・退会した人・講義の進捗の取り込み中）は、PCで節の頭の件数と進みの棒を、中身の右端までにする（紙面の右端に浮かせない：AA-R-07）
   節そのものは紙面の幅のまま（上の罫は紙面の幅いっぱい）にして、中を1列の格子にし、列の幅をいちばん広い中身（凡例・説明・表）に合わせる
   表が紙面より広いときは、列は紙面の幅で止まり、今までどおり横に流れる。退会した人の表は列の幅いっぱい（説明と件数の右端にそろえる） */
@media (min-width: 900px) {
  .a-sec:is([aria-labelledby='lp-h'], [aria-labelledby='lf-h'], [aria-labelledby='pg-h']) { display: grid; grid-template-columns: minmax(0, max-content); }
  .a-sec[aria-labelledby='lf-h'] table.t--fit { width: 100%; }
}

/* KPIの行（3項目×2段。スマホは2項目×3段） */
.kpi-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
/* .kpi の中は dt（名前）・dd（数）・dd（補足）だけ（dl の中を div で2段に包まない：A11Y-06）。名前と数を1行目に、補足は2行目に */
.kpi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 16px 24px; border-left: 1px solid var(--rule); min-width: 0; }
.kpi:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.kpi:nth-child(n + 4) { border-top: 1px solid var(--rule); }
/* 2列の段組みの幅（1100px以上）では、KPIの3列目の罫を、下の2列の境の罫（左の列 1.7fr の右・溝48pxの真ん中）にそろえる（AD-06）
   1列＝2列目の境までの半分：(100% − 48px) × 1.7 ÷ 2.7 ÷ 2 ＋ 24px ÷ 2 */
@media (min-width: 1100px) {
  .a-home .kpi-line { grid-template-columns: repeat(2, calc((100% - 48px) * 0.314815 + 12px)) minmax(0, 1fr); }
}
.kpi-label { font-weight: 500; font-size: 14px; color: var(--ink-2); letter-spacing: 0.04em; }
.kpi-num { font-family: var(--font-mincho); font-weight: 700; font-size: var(--fs-num); line-height: 1.2; color: var(--navy); white-space: nowrap; }
.kpi-num .unit { font-size: 13px; }
/* 記録がつながる前の数（「未接続」）。数字と同じ明朝の大きな字にしない（長い棒の「—」に見えるため） */
.kpi-num .kpi-off, .kpi-off { font-family: var(--font-gothic); font-weight: 500; font-size: 14px; color: var(--ink-2); letter-spacing: 0.04em; }
.kpi-sub { flex-basis: 100%; font-size: 13px; color: var(--ink-2); }
/* 今週のKPIの補足（「会員サイトかDiscord」）は、文節が升より長いときだけ文節の中で折る（auto-phrase は「サイトかDiscord」を1つの塊にするので、
   文字だけ200%の320pxでは升の列を158pxに広げ、頁を335pxに広げていた：AY-R5-03 の残り）。ふだんは文節の境で折れるので、見た目は変わらない（320〜1440pxで画素が同じ） */
.a-home .kpi-sub { overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .kpi-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { display: block; padding: 14px 16px; }
  .kpi:nth-child(3n + 1) { border-left: 1px solid var(--rule); padding-left: 16px; }
  .kpi:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .kpi:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .kpi-num { display: block; margin-top: 2px; }
  .kpi-sub { margin-top: 4px; }
}

/* 今週声をかける人（行全体が押せる。開くと下書き） */
.out { border-top: 1px solid var(--rule); }
.out-row { border-bottom: 1px solid var(--rule); }
.out-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; padding: 18px 16px; margin: 0 -16px; list-style: none; cursor: pointer; transition: background-color var(--t-fast); }
.out-sum::-webkit-details-marker { display: none; }
.out-sum:hover { background: var(--ice); }
.out-row[open] > .out-sum { background: var(--ice); }
.out-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-family: var(--font-mincho); font-weight: 700; font-size: var(--fs-name); line-height: 1.4; color: var(--navy); }
.out-reason { margin-top: 6px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
.out-more { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
/* 理由と「ほか◯件」は2段目から幅いっぱいに使う（右の文字ボタンの幅のぶん狭くしない：AD-26） */
.out-reason, .out-more { grid-column: 1 / -1; }
/* 文字ボタンは押せる高さ44pxのまま、上下を名前の行にかぶせる（1段目の高さは名前で決まる）。字と › の間は、ほかの文字ボタンと同じ4px（AS-R5-05） */
.out-cta { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); margin: -8px 0; font-weight: 500; font-size: 14px; color: var(--blue); white-space: nowrap; }
.out-cta svg { width: 14px; height: 14px; transition: transform var(--t-fast); }
.out-row[open] .out-cta svg { transform: rotate(90deg); }
.out-body { margin: 0 -16px; padding: 0 16px 20px; background: var(--ice); }
.out-body .textarea { min-height: 140px; background: var(--paper); }
/* 理由の一覧（今週の開いた行の中・カルテの声をかける理由）：小札の幅（急ぎ・気がかり・お祝い）が違っても、理由の文の左の線をそろえる
   （一覧を「小札｜文」の2列の格子にし、行は subgrid で列を分け合う。縦に読み比べる一覧なので、文の始まりを札ごとにずらさない：AA-R-16。subgrid は Safari 16 以上） */
.out-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 8px; row-gap: 6px; margin-bottom: 12px; }
.out-item { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; font-size: 14px; line-height: 1.6; }
.out-item .tag { justify-self: start; margin-top: 1px; }
.out-action { margin-bottom: 10px; font-size: 13px; color: var(--ink-2); }
.out-links { margin-top: 10px; font-size: 14px; }
/* 「◯◯さんのカルテを開く」は節の終わりの「詳しい画面へ」（.a-more）と同じ文字ボタン。行の頭なので、字を左の線にそろえる（文字ボタンの余白4pxを外に出す：AA-N-17） */
.out-links .btn--text { margin-left: -4px; }
/* 行を開いた中の文字ボタン（「カルテの「対面作業の回」で記録を確かめる」・「◯◯さんのカルテを開く」）の言葉（span と Phrase）は、
   列より長いとき（文字だけ200%のスマホ）だけ文節の境で折る（行を開くと、390pxの頁が541〜573pxに広がっていた：AY-R6-07）
   .a-more の文字ボタンと同じ組み（行の高さは字の大きさ＋6px・上下6px）。ふだんは1行に入り、字の位置も今と同じ */
.out-links .btn--text { white-space: normal; text-align: left; line-height: calc(1em + 6px); padding-top: 6px; padding-bottom: 6px; }

/* 最近の振り返り・声 */
.voice { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.voice:first-child { padding-top: 0; }
.voice-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }
.voice-name { font-family: var(--font-mincho); font-weight: 700; font-size: 18px; color: var(--navy); text-decoration: none; }
.voice-name:hover { text-decoration: underline; text-underline-offset: 3px; }
/* カルテの振り返り：1人の月ごとの声（見出しは月。名前のリンクと同じ明朝700 18px） */
.voice-month { font-family: var(--font-mincho); font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--navy); font-feature-settings: 'palt' 1; }
.voices-karte { margin-top: 20px; }
.voice-meta { font-size: 13px; color: var(--ink-2); }
.voice-line { margin-top: 8px; display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.6; }
.voice-line .tag { margin-top: 1px; }

/* 居住地の棒（今週の「居住地」・居住地の「都道府県ごと」）
   名前の列は6.5emまで（minmax(0, 6.5em)）。ふだんは6.5emのまま（棒の列の前に幅を取る）で、文字だけ200%の320pxのように3つの列が入らないときだけ名前の列が縮み、名前が折れる
   （決め打ちの6.5emだと、人数が右の端で切れ、頁を325pxに広げていた：AY-R5-03 の残り。320〜1440pxのふだんの字では画素が同じことを確かめた） */
.region { display: grid; grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr) 3em; column-gap: 12px; align-items: center; min-height: 32px; }
.region-name { font-size: 14px; }
.region-n { font-size: 14px; text-align: right; }

/* 取り込みの行 */
/* 名前｜札｜時刻の3列。札と時刻の列の幅を決めて、どの行も札の左端・時刻の右端をそろえる（AD-16） */
.sync-row { display: grid; grid-template-columns: minmax(0, 1fr) 5.5em 7.5em; column-gap: 12px; align-items: center; min-height: 40px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.sync-row .tag { justify-self: start; }
.sync-row:last-child { border-bottom: 0; }
.sync-when { font-size: 13px; color: var(--ink-2); white-space: nowrap; text-align: right; }
/* 文字を大きくしたとき（文字だけ200%のスマホ）は、名前を1段目、札と時刻を2段目にする（札と時刻の列が em で広がり、名前の列が0に潰れて1字ずつ縦に並び、札が字に重なっていた・時刻が右で切れていた：AY-R5-03）
   入れ物は「取り込み」の節。条件の16emは節の字（15〜16px）で240〜256px。ふだんの字では、いちばん狭い右の列（1100pxで271px）でもスマホ（320pxで288px）でも効かない（17emだと1100pxの右の列に効いてしまう） */
.a-sec:has(> .sync-row) { container-type: inline-size; }
@container (max-width: 16em) {
  .sync-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; }
  .sync-row .sync-name { grid-column: 1 / -1; }
  .sync-when { text-align: left; white-space: normal; }
}

/* 表 */
/* position: relative は、表の中の読み上げ用の文（.sr は position:absolute）を、この箱の中に収めるため（無いと頁が横にはみ出す） */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-padding-inline: 6px; }  /* Tab で送ったとき、焦点の輪（外へ4px）まで入れ物の中に入れる（R10-02） */
table.t { width: 100%; border-collapse: collapse; font-size: 15px; }
table.t th { padding: 10px 12px; border-bottom: 1px solid var(--rule); font-weight: 500; font-size: 13px; color: var(--ink-2); text-align: left; letter-spacing: 0.04em; white-space: nowrap; }
/* 行の値は、1行目の字の下の線（ベースライン）にそろえる（縦の真ん中にしない）。名前の下に会員番号・AI顧問の添え書きが付く行や、中身が3〜4行の記録でも、
   ほかの列の値が名前・日時の1行目と1本の線に乗る（目で行の頭から右へ追える：AA-R-02）。札だけのセルは札の字の線でそろい、1行だけの行は見た目が変わらない */
table.t td { padding: 14px 12px; border-bottom: 1px solid var(--rule); vertical-align: baseline; line-height: 1.5; }
/* 札も、札の字の線を行の字の線にそろえる（.tag の middle のままだと、札が隣の字より約2px低く見える。そろえると0.3px） */
table.t td .tag { vertical-align: baseline; }
/* 表の行には、同じ言葉の操作のボタンの列を作らない（ほかの画面への道は行の名前のリンク。集まりの一覧の「出欠を付ける」も名前のリンクにした：AA-R5-03）。
   そのため、どの表も行の値は字の線のまま（行の真ん中に置く列は無い） */
table.t th:first-child, table.t td:first-child { padding-left: 0; }
table.t .r { text-align: right; white-space: nowrap; }
/* 表の文も、最後の行に1〜2字だけ残さない。短い値（年月・年齢・内訳の項目）は .nw で折らない */
table.t td { text-wrap: pretty; }
table.t tbody tr { transition: background-color var(--t-fast); }
table.t tbody tr:hover td { background: var(--ice); }
table.t .t-name { font-family: var(--font-mincho); font-weight: 700; font-size: 16px; color: var(--navy); text-decoration: none; }
table.t .t-name:hover { text-decoration: underline; text-underline-offset: 3px; }
table.t .t-sub { display: block; font-size: 12px; color: var(--ink-2); }
/* AI顧問の添え書き（対面作業・ロードマップ・満了日）は、名前の列の幅を決めない（この1行で列が広がり、声かけの小札が名前から離れないように）
   使える所では contain で幅の計算から外し、列の幅いっぱいで項目の境ごとに折る。使えない古いブラウザは17emで折る */
table.t .t-adv { max-width: 17em; }
@supports (contain: inline-size) {
  table.t .t-adv { max-width: none; contain: inline-size; }
}
/* AI顧問の添え書きは、どの幅でも項目を1つずつの行にする（「満了日」だけの行・「ロードマップ」で終わる行を作らず、どの行も項目の名前から始める）
   PCの名前の列（1440で226px・1280で194px）でも、項目を「・」でつないで流すと項目の途中で折れ、「ロードマップ／期限10月23日」「満了日／2027年3月10日」と言葉と値が別の行に分かれた（AA-R6-03。スマホは AA-R5-04 で先に直した）
   項目の中で折れたときは、続きの行を1字下げて、前の項目の続きだと分かるようにする（「ロードマップ／　期限10月23日」）
   区切りの「・」は目では隠し、読み上げには残す（.sr と同じ隠し方。行の終わりに「・」だけが残らないように） */
table.t .t-adv-i { display: block; padding-left: 1em; text-indent: -1em; }
table.t .t-adv-dot { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
table.t .sticky { position: sticky; left: 0; z-index: 1; background: var(--paper); }
/* 横に流れるときだけ、固定した列の右に縦の罫を出す（app.js が .table-wrap に is-scroll を付ける。収まっているときは表を裂かない） */
.table-wrap.is-scroll table.t .sticky { box-shadow: inset -1px 0 0 var(--rule); }
/* 受講生の一覧：名前の列のほかは折らない（「36歳・ひつ／じ」のように語の途中で切らない。収まらなければ横に流れる） */
table.t-members td:not(.sticky) { white-space: nowrap; }
/* 受講生の一覧の名前の列は、PCでも10emより細くしない（スマホの決まりと同じ幅）。表が紙面に入らないPCの狭い幅（900〜1180px前後）では、名前の列だけが80pxまで縮み、
   札が名前の下に落ち、会員番号と本名・AI顧問の添え書きが途中で折れて、列の右の線をまたいでいた（AA-R6-03 の確かめで見つけた）。その幅では、表は今までどおり横に流れる
   1280px以上は列がもっと広いので変わらない。退会した人の3列の表（t--fit）は中身に合わせる幅なので入れない（スマホは下の決まりで、どちらの表も10em） */
table.t-members:not(.t--fit) td.sticky { min-width: 10em; }
/* 列の少ない表（受講生の一覧の「退会した人」の3列）は、PCで紙面の幅いっぱいに引き伸ばさない（名前から所属・日付が離れすぎないように：AA-N-16）。スマホは全幅のまま */
@media (min-width: 900px) {
  table.t--fit { width: auto; min-width: 36em; }
  table.t--fit th, table.t--fit td { padding-right: 40px; }
}
/* 数だけが入る列の見出し（振り返りの任意の3問）は、文節で折って列を細くする（空いた幅を「いちばん役立ったもの」の文の列に回す：AA-N-22）
   幅は左右の余白（12px×2）込み。字の幅は5.5em（「選べている」の5字の文節が1行に入る）で、見出しは2行まで
   min-width でも決める（表が紙面より広いスマホでは、折れる見出しの列が1字の幅まで縮み、見出しの行が200pxを超えるため） */
table.t th.th-wrap { white-space: normal; width: calc(5.5em + 24px); min-width: calc(5.5em + 24px); }
/* 長い見出し（居住地の地方ごとの「オフ会への参加（のべ）」）は、列の幅を決めず、列より長いときだけ文節の境で折る（Phrase で包む。th-wrap と違い、ふだんは1行のまま）
   文字だけ200%のスマホで、折れない見出しが表を499px・頁を519pxに広げていた（AY-R5-03） */
table.t th.th-long { white-space: normal; }
/* 見出しが2行に折れる表は、どの見出しも下の罫の上にそろえる（1行の見出しだけ行の真ん中に浮かせない） */
table.t:has(th.th-wrap, th.th-long) th { vertical-align: bottom; }
@media (max-width: 899px) {
  table.t { font-size: 14px; }
  /* 固定した名前の列に幅を持たせ、呼び名を1〜2文字ずつ折らない（10em＝3字の呼び名と4字の小札「気がかり」が1行に入る幅。
     9emでは3字＋4字の人だけ札が名前の下の行に落ち、同じ表の中で札の位置が2通りになった：AA-R5-04。札が2つの人は今までどおり2段） */
  table.t td.sticky { min-width: 10em; }
  table.t .t-name { white-space: nowrap; }
  /* AI顧問の添え書きを項目ごとの行にする決まり（.t-adv-i・.t-adv-dot）は、PCと同じ（上の全部の幅の決まり：AA-R5-04・AA-R6-03） */
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
/* 欄の高さは、同じ行の「絞り込む」の小ボタンと同じ（PCのマウスでは36px・指では44px） */
.filters .input, .filters .select { width: auto; min-height: var(--btn-h-s); font-size: 14px; }
.filters .input { min-width: 240px; }
/* スマホ：絞り込みの右端を、紙面の右の線にそろえる（探す欄は1行・選ぶ欄は2つずつ・ボタンは1行）。カルテの操作のボタンは左の線に乗せる */
@media (max-width: 899px) {
  .filters .input { flex: 1 1 100%; min-width: 0; }
  .filters .select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .filters .btn { flex: 1 1 100%; }
  .a-actions-r { margin-left: 0; }
}

/* カルテ */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .field { margin-top: 16px; }
@media (max-width: 599px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.copybox .textarea { min-height: 132px; font-size: 14px; background: var(--paper); }
/* 声かけの下書き・入口リンクの文面：中身に合わせて伸ばし、文を欄の下端で切らない（field-sizing が効かない所は、この高さのまま右下で伸ばせる） */
.textarea--draft { min-height: 140px; field-sizing: content; max-height: 360px; }
/* 中身に合わせて伸びる欄（声かけの下書き・入口リンクの読み取り専用の文面・ようこその手紙）は、右下のつまみ（ブラウザの既定の斜線）を出さない
   （書いた分だけ伸びるので、つまみで広げる必要が無い。入口リンクの文面は書き換えられない欄。カルテの頭のいちばん大事な欄だけが、ブラウザのままの部品に見えていた：AA-R6-09）
   受講生の書く欄（.sheet .textarea）と同じ決まり：field-sizing の無いブラウザ（Safari など）は今のまま（読み取り専用の文面も、つまみで広げて全文を見られる）
   高さの決まった欄（ひとこと・メモ。書く量に合わせて広げる意味がある）は今のまま（.textarea の resize: vertical） */
@supports (field-sizing: content) {
  .textarea--draft { resize: none; }
}
/* 下書き・入口リンクの文面・ようこその手紙の欄の中は、Chrome の文節の折り返しにする（送る前に読み直す文。「おめでとうござい／ます」「11月20日を過／ぎると」と語の途中で折らない：AA-R-05）
   欄の中の文は Phrase で包めない。変わるのは見た目の折り返しだけで、コピーする文・送る文は変わらない。Safari は今のまま字の単位で折る */
.textarea--draft, .copybox .textarea { word-break: auto-phrase; }
/* 行の中の小さな欄（渡した日・契約の種類・紐付け待ちの選ぶ欄）。高さは同じ行の小ボタンと同じ（PCのマウスでは36px・指では44px） */
.ctl-inline { width: auto; min-height: var(--btn-h-s); font-size: 14px; }
/* 2列の欄の中で、長い値が入る欄（見せる相手・Instagram など）は1列ぶん広げる */
.form-grid .field--full { grid-column: 1 / -1; }
/* 相手のいない数の欄（契約の「一時停止した日数」）は、行は升の幅いっぱい（field--full。説明の文を欄のすぐ後ろに置くため）のまま、数の箱だけを升の1列ぶんの幅にする
   （1〜2桁の数に397pxの箱を出すと、中が「0」だけの空の欄に見える。上の購入日・起算日の欄と、左の線も右の端もそろう：AA-R5-11）。升が1列になる幅（599px以下）は、ほかの欄と同じ幅いっぱい */
@media (min-width: 600px) {
  .form-grid > .field--full > input[name='paused_days'] { max-width: calc((100% - 16px) / 2); }
}

/* 右の列の「言葉｜値」（プロフィール・契約・紐付いているID）。言葉の列の幅をそろえる */
.kv, .id-row { --kv-w: 7.5rem; }
/* 帳簿の行で見せる「言葉｜値」。ふだんは読む形で見せ、「直す」で欄を開く（dl の中は dt と dd の組を div で包む） */
.kv > div { display: grid; grid-template-columns: var(--kv-w) minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: 0.04em; color: var(--ink-2); }
.kv dd { min-width: 0; font-size: 15px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.kv .kv-off { color: var(--ink-2); }
/* 「直す」で開く欄。開いたら読む形（.kv）を隠し、欄だけにする（同じ値を2回並べない）。文字ボタンの字は左の線にそろえる */
.edit { margin-top: 6px; }
.edit > summary { margin-left: -4px; }
.a-sec:has(> .edit[open]) > .kv, .contract:has(> .edit[open]) > .kv { display: none; }
.dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--rule); }
.dots i.on { background: var(--blue); border-color: var(--blue); }
.dots i.late { border: 1.5px solid var(--blue); }
.svc { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.svc:last-child { border-bottom: 0; }
.svc-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.svc-name { font-weight: 500; font-size: 15px; }
.svc-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }  /* ボタンを欄の下の線にそろえる（指の端末で75pxの縦長に伸びた：AA-R9-07） */
/* 欄の高さは同じ行の小ボタンと同じ（PCのマウスでは36px・指では44px）。欄の名前は欄の左に見える文字で出す（.svc-field） */
.svc-form .input { width: auto; min-height: var(--btn-h-s); font-size: 14px; }
/* 狭い幅（320px）では、欄の名前と欄を2段に折る（「その回でやったこと」と240pxの欄を1行に並べて、頁を横に流さない：AY-N-04） */
.svc-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; font-size: 13px; color: var(--ink-2); white-space: normal; }
.svc-field .input { min-width: 0; max-width: 100%; }
.note-row { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.note-row:last-child { border-bottom: 0; }
.note-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.note-head form { margin-left: auto; display: flex; }
.note-body { margin-top: 6px; font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
/* 前に届けたひとこと（いまはホームに出ていない記録）は畳む。文字ボタンの字は左の線にそろえる */
.note-more { margin-top: 12px; }
.note-more > summary { margin-left: -4px; }
/* 紐付いているIDの1行：種類｜値（UTAGEは値の下に「名簿の同期で決まります」）｜外す。値を種類のすぐ右から読ませ、一言で値の幅を押しつぶさない */
.id-row { display: grid; grid-template-columns: var(--kv-w) minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.id-row form { display: flex; }
.id-kind { padding: 6px 0; font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: 0.04em; color: var(--ink-2); }
.id-val { min-width: 0; padding: 6px 0; line-height: 1.6; overflow-wrap: anywhere; }
.id-val .caption { display: block; margin-top: 2px; }
/* 「外す」を開いたら、確かめの箱を行の幅いっぱいに出す（次の段に送る） */
.id-row > details { justify-self: end; }
.id-row > details[open] { grid-column: 1 / -1; justify-self: stretch; }
.contract { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
/* 消す操作（「この人のデータを削除する」「この契約を消す」）の上の罫：前のボタン（書き出し・保存する）の下から24px、罫から summary の字まで約24px（押せる高さの空き約12pxを含む）
   （前は罫がボタンの8px下に来て、枠に触れそうに詰まって見えた：AA-R5-08） */
.danger-zone { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--rule); }

/* ---------- 運営：カルテの並び（4回目の直し・カルテの担当） ---------- */
/* 2列の段組みのある画面（カルテ・今週・出欠・取り込み）では、紙面の頭のお知らせの右端を、下の左の列の右端にそろえる（AA-N-02）
   左の列＝(100% − 溝48px) × 1.7 ÷ 2.7。1列に落ちる幅（1099px以下）では列と同じ幅いっぱい。1行は1440で46字・1280で40字ほど（44emの決まりの例外）
   列の中のお知らせと、カルテの左の列の頭の入口リンクの文面（.copybox。AA-R5-01）も、列の幅いっぱい（列の右端・下書きの欄の右端にそろえる） */
.a-paper:has(.a-grid) > .notice, .a-home > .notice { max-width: none; }
@media (min-width: 1100px) {
  .a-paper:has(.a-grid) > .notice, .a-home > .notice { max-width: calc((100% - 48px) * 0.62963); }
}
.a-grid .copybox .textarea, .a-grid .notice { max-width: none; }
/* 成功のお知らせ（声をかけた直後の案内・紙面に残す長いお知らせ）は、頭に青いチェックを置いて、注意のお知らせ（送信停止など）と見分ける（AA-N-18）
   チェックは .field-error の「!」と同じく、1行目の真ん中にそろえる（14px・行の高さ1.7） */
.notice--done { display: flex; align-items: flex-start; gap: 8px; }
.notice--done > svg { width: 16px; height: 16px; margin-top: 4px; flex: none; color: var(--blue); }
.notice--done > span { min-width: 0; }
/* 2列の欄（.form-grid）の誤りの文と添え書きは、欄の行のすぐ下に升の幅いっぱいで出す（半分の幅に押し込んで6行に折らない・となりの欄の下を空けない：AA-N-09） */
.form-grid > .form-grid-note { grid-column: 1 / -1; }
/* 文は読む順では欄のすぐ後ろに置く（スマホの1列では欄の真下）。2列のときは dense で、文の後ろの右の欄を左の欄の隣へ詰める（文は行の下に来る） */
.form-grid--notes { grid-auto-flow: row dense; }
.form-grid > .caption.form-grid-note { margin-top: 6px; }
/* 約束した回数：記録の欄は、どの行も題の下の行にそろえる（長い欄の行だけ題の下・左に回る形にしない：AA-N-24） */
.svc-head > .svc-form { flex-basis: 100%; }
/* 対面作業の各回の文字ボタン（直す・この回を取り消す）は横に並べる。開いた方は行の幅いっぱい（中の欄を狭めない） */
.svc-acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 20px; margin-top: 2px; }
.svc-acts > details[open] { flex-basis: 100%; }
/* 取り込み・設定の「再入会のとき」：種類の選ぶ欄（1段目・幅いっぱい）の下に、値の欄と「外す」を1行に（同じ「外す」を3つ縦に並べない：AA-N-26） */
.release-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }
.release-form .select { grid-column: 1 / -1; width: 100%; }
.release-form .input { width: 100%; min-width: 0; }
@media (max-width: 899px) {
  /* スマホの操作の行：2つのボタンを1行に半分ずつ並べる（172pxで縦に積んで右を空けない）。開いた方は行の幅いっぱいにして、確かめを読める幅にする（AA-N-19） */
  .a-actions-r { flex: 1 1 100%; }
  .a-actions-r > details { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .a-actions-r > details[open] { flex-basis: 100%; }
  .a-actions-r > details > summary { width: 100%; padding: 0 8px; }
  /* 変更の履歴：3列を横に流さず、1行を段に積む（1段目が「いつ・誰が」、その下に「何を」「中身」）。見出しの行は読み上げにだけ残す（AA-N-19・AA-R-14） */
  table.t-hist, table.t-hist tbody { display: block; }
  table.t-hist thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.t-hist tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--rule); }
  /* 最後の行の罫を消すのは、表が節の終わりのとき（節の直下の最後の表・開いた「前の履歴」の中の表）だけ。後ろに畳んだ「前の履歴」が続く表は、
     PCと同じく最後の行の罫を残し、その下に文字ボタンを置く（畳んだ「前のあゆみ」の上の罫と同じ形：AA-R6-06） */
  .a-sec > .table-wrap:last-child > table.t-hist tr:last-child, .note-more > .table-wrap > table.t-hist tr:last-child { border-bottom: 0; }
  table.t-hist td { padding: 0; border: 0; }
  table.t-hist td:nth-child(n + 2) { margin-top: 4px; }
  /* 段に積んだ形では、「何を」を行の題（500）にして、すぐ下の「中身」（本文の色・400）と見分ける（見出しの行と列の線が見えないので、字の太さで段の役を言う。
     中身を本文の色にしたので、2つの段が同じ字に見えていた：AA-R6-04。PCは列の見出しと線が役を言うので、何をも中身も400のまま） */
  table.t-hist td:nth-child(2) { font-weight: 500; }
  /* 1段目は、時刻の右に「誰が」（PCでは時刻の下の小さな行）を並べる（前の2列の1段目と同じ形で、行を1段ぶん伸ばさない）。入らなければ、時刻を割らずに下へ回す */
  table.t-hist td:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  /* 今週の行を開いたときの地の塗りは、画面の端まで（紙面の余白の内側で止めない：AA-N-25） */
  .out-sum, .out-body { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
}
/* 2つのボタンが半分の幅に収まらない幅（359px以下）では、1つずつ幅いっぱいに積む（字を切らない） */
@media (max-width: 359px) {
  .a-actions-r > details { flex-basis: 100%; }
}

/* ---------- 運営：カルテ（5回目の直し・カルテの担当） ---------- */
/* カルテの操作の行の確かめの箱（入口リンクを作る・ログインを止める＝details の直下の form）。.a-paper .notice の44emより先に効かせる（前は form の style に書いていた） */
.a-actions .a-actions-r > details > form { margin-top: 10px; max-width: 420px; }
/* 開いても、押したボタンと隣のボタンを動かさない（AA-R-01）。details を display: contents にして、2つの summary を1行目に並べ（PCは右寄せ）、
   開いた中身（::details-content）は次の行に回して右に寄せる。閉じた中身は高さ0の行になるので、行の間（row-gap）は0にし、箱の上の空きは箱の margin で付ける
   箱の幅は、2列の段組み（1100px以上）では下の右の列の幅まで（左の列から縦の罫をまたがない）＝(100% − 溝48px) × 1 ÷ 2.7（1440で397px・1280で338px）
   スマホも、2つのボタンが半分ずつ並ぶ幅（360〜899px）は同じ形（開いた方のボタンを下の段へ送らない。箱は行の幅いっぱい）。1つずつ積む幅（359px以下）は今のまま（箱は押したボタンのすぐ下）
   ::details-content の無いブラウザは今のまま（PCでは開いた details が中身の幅まで広がり、ボタンが左へ寄る） */
@supports selector(::details-content) {
  @media (min-width: 360px) {
    .a-actions-r { flex: 1 1 100%; justify-content: flex-end; row-gap: 0; }
    .a-actions-r > details { display: contents; }
    .a-actions-r > details > summary { order: 1; }
    .a-actions-r > details::details-content { order: 2; flex: 0 0 100%; }
    .a-actions .a-actions-r > details > form { margin-left: auto; }
  }
  @media (min-width: 360px) and (max-width: 899px) {
    /* 並びの項目は details の代わりに summary（半分ずつ。前の .a-actions-r > details の決まりと同じ幅） */
    .a-actions-r > details > summary { flex: 1 1 calc(50% - 6px); min-width: 0; }
  }
  @media (min-width: 1100px) {
    .a-actions .a-actions-r > details > form { max-width: min(420px, calc((100% - 48px) * 0.37037)); }
  }
}
/* 予定の回の「その回でやったこと」は、行の残りの幅を使う（幅を決め打ちしない。1280の左の列でも「実施した」を同じ行に残す：AA-R-15）
   1280では欄が約150px。名前と欄が1行に入らない幅では、名前と欄を2段に折る（.svc-field の flex-wrap） */
.svc-form .svc-field--grow { flex: 1 1 14em; }
.svc-form .svc-field--grow > .input { flex: 1 1 8em; width: auto; min-width: 8em; }
/* カルテの節（.a-karte の中の .a-sec）は、受講生の節（.sec）と同じく、文字だけを大きくしたときの入れ物にする（条件は @container (max-width: 19em)）。
   積み上がりの帳簿は「言葉｜数字」の下に補足を回し、畳んだ欄の文字ボタン（前に届けたひとこと・この人のデータを削除する など）は文節の境で折り返す。文字2倍のスマホで頁を横に広げない（390で520px→390px：AY-R-05）
   ふだんの字の大きさでは効かない（条件は15〜16pxの字で285〜304px。1100〜1170pxの右の列（271px〜）では効くが、そこの文字ボタンは1行に収まり、見た目は変わらない＝320〜1440pxで画素が同じことを確かめた） */
.a-karte .a-sec { container-type: inline-size; }
/* 運営の今週の右の列の「今月の成果」（13回目に右の列へ移した帳簿）も同じ入れ物にする（1100pxの右の列・文字2倍のスマホで、補足が1字ずつ縦に並んでいた：R10-01） */
.a-home .a-res { container-type: inline-size; }
/* 操作の行のボタンの言葉は、文字だけを大きくしたときだけ、文節の境で2行に折る（半分の幅のボタンからはみ出して頁を横に広げない：AY-R-05）
   入れ物は操作の行。条件の17emは、ふだんの字（15〜16px）では効かない幅（いちばん狭い320pxでも288px＝19.2em）で、文字1.5倍（390で15.9em）・2倍（11.9em）では効く
   ふだんは1行のまま（360pxの半分の幅でも、言葉を折らない） */
.a-actions { container-type: inline-size; }
@container (max-width: 17em) {
  .a-actions-r > details > summary { white-space: normal; line-height: 1.25; text-align: center; padding-top: 6px; padding-bottom: 6px; }
}
/* スマホの紙面の頭の要約（SubLine の a-sub-m）：区切りごとの塊（.a-sub-i）を折り返して並べ、区切りの線は塊の頭に描く（AA-R-13）
   行の頭に来た塊の線は、紙面の左の外（-0.6em − 1px）に出して隠す（overflow: hidden）。1行目の終わりに線だけが残らない
   線の形（1px・0.9em・不透明度0.6・字との間0.6em）と、閉じかっこの後ろを0.4emに詰めるのは、帯の要約の .sep と同じ。塊が1行より長いときは塊の中で折る（2行目も字の左端は紙面の線） */
@media (max-width: 899px) {
  .a-sub-m { overflow: hidden; }
  .a-sub-w { display: flex; flex-wrap: wrap; margin: 0 -0.6em 0 calc(-0.6em - 1px); }
  .a-sub-i { min-width: 0; padding-left: calc(0.6em + 1px); margin-right: 0.6em; }
  .a-sub-i--close { margin-right: 0.4em; }
  .a-sub-i::before { content: ''; display: inline-block; width: 1px; height: 0.9em; margin: 0 0.6em 0 calc(-0.6em - 1px); background: currentColor; opacity: 0.6; vertical-align: -0.1em; }
}

/* ---------- 運営：カルテ（6回目の直し・カルテの担当） ---------- */
/* 変更の履歴（2列の段組みの下の、紙面の幅の節）：新しい10件の表と、畳んだ「前の履歴」の中の表で、列の線をそろえる（AA-R5-02）
   列の幅は colgroup で決める（table-layout: fixed。中身でそれぞれの表の列の幅を決めると、畳んだ表を開いたときに上下の表の列がずれる）
   いつ・誰が＝9rem（去年の日付「2026年12月31日 23:59」の14pxの字が1行に入る幅131px＋右の余白12px）、何を＝15rem（「実施を取り消して、予定に戻した」215pxが1行に入る幅＋左右の余白24px）、中身＝残りの全部
   1列に落ちる幅（900〜1099px）では、何をの列を12remにして「中身」に幅を残す。スマホ（899px以下）は1行を段に積む形（上の t-hist の決まり）なので、列の幅は効かない
   畳んだ表の見出しの行は、読み上げにだけ残す（thead.sr。目では上の表の見出しの列の続きとして読む） */
table.t-hist { table-layout: fixed; }
table.t-hist col.t-hist-when { width: 9rem; }
table.t-hist col.t-hist-what { width: 15rem; }
@media (max-width: 1099px) {
  table.t-hist col.t-hist-what { width: 12rem; }
}
/* 誰が（運営のメールの「@」の前）が列より長いときだけ、誰がの行の中で折る（日時は td の nw のまま折らない） */
table.t-hist .t-sub { white-space: normal; overflow-wrap: anywhere; }
/* 畳んだ「前の履歴」の表は、開いた summary のすぐ下に続ける */
.note-more > .table-wrap { margin-top: 4px; }
/* スマホ（1行を段に積む形）：
   ・中身の無い行（ホームに届けた・メモを残した など）は、空の「中身」の段を出さない（空の段の上の4pxのぶん、行の下と節の終わりが4px広がっていた：5回目の直しの残り）
   ・畳んだ「前の履歴」を開いたときも、節の最後の行は下の余白を持たない（節の終わりの決まり：AA-R-06。閉じた表の最後の行の決まりは上の t-hist） */
@media (max-width: 899px) {
  table.t-hist td:empty { display: none; }
  .a-sec > details.note-more:last-child > .table-wrap > table.t-hist tr:last-child { padding-bottom: 0; }
}
/* 変更の履歴の節も、カルテの節（.a-karte .a-sec）と同じく、文字だけを大きくしたときの入れ物にする（畳んだ欄の文字ボタンを文節の境で折る） */
.a-karte + .a-sec { container-type: inline-size; }

/* 地図（11×11の四角）と講義の濃淡 */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 14px; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 14px; border: 1px solid transparent; }
.lv0 { background: var(--paper); border: 1px solid var(--rule) !important; }
.lv1 { background: var(--ice-2); color: var(--ink); }
.lv2 { background: var(--sky-pale); color: var(--ink); }
.lv3 { background: var(--sky); color: var(--ink); }
.lv4 { background: var(--blue); color: var(--on-dark); }
.lv5 { background: var(--navy); color: var(--on-dark); }
/* 横に流れるとき（スマホ）は、app.js が東の端（関東・東北・北海道）から見せる（AY-R-07） */
.tilemap-wrap { overflow-x: auto; }
/* 四角は40px以上（3字の県名「北海道」「神奈川」「和歌山」「鹿児島」が12pxで1行に入り、下の人数が切れない：AY-N-03）。11×40＋10×2＝460px。広い画面は600pxまで */
.tilemap { display: grid; grid-template-columns: repeat(11, minmax(40px, 1fr)); gap: 2px; max-width: 600px; min-width: 460px; }
/* 四角は正方形のまま。中身が入らないとき（文字の間隔を広げる設定で、県名が2行に折れたとき）だけ縦に伸びる（overflow で切らない：AY-R-07・1.4.12） */
.tile { aspect-ratio: 1; display: grid; place-items: center; align-content: center; min-width: 0; font-size: 12px; line-height: 1.15; text-align: center; color: var(--ink-2); }
/* 四角の人数は明朝700の16px（明朝は16px以上で使う：DESIGN.md 3章。14pxは決まりの外だった：DOC-01）。県名12px＋人数16pxで中身は32px＝いちばん狭い40pxの四角にも入る
   数だけゴシックにする案も見比べたが、ゴシックの数字は細く縦長で、四角の中の主役（人数）が県名より弱く見えたので明朝のまま大きくした */
.tile b { display: block; font-family: var(--font-mincho); font-weight: 700; font-size: 16px; }
/* 県名の文字の色は、四角の濃さで変える（.tile の副の文字の色が、濃い四角の上で沈まないように。どの段も4.5:1以上：AD-05・E2E-A09・A11Y-08）
   0名〜lv2 の上は副の文字（5.10:1以上）／空色（lv3）の上は本文の色（7.38:1）／青・濃紺（lv4・lv5）の上は白（6.94:1・13.85:1）。数（b）も受け継ぐ */
.tile.lv3 { color: var(--ink); }
.tile.lv4, .tile.lv5 { color: var(--on-dark); }
/* 地図が横に流れる幅（紙面が地図の最小の幅460pxより狭い＝余白20px×2を足して、画面499px以下）だけ「・横に動かせます」を出す */
.map-scroll-hint { display: none; }
@media (max-width: 499px) { .map-scroll-hint { display: inline; } }
/* 講義の濃淡（人×章の表。見た目は濃淡のマス）。マスは64px（スマホ56px）まで。名前の列は横に送っても左に残す（AD-07・E2E-A22・A11Y-12） */
table.heat { border-collapse: separate; border-spacing: 2px; margin-left: -2px; }
.heat th, .heat td { padding: 0; }
.heat-head { font-weight: 400; font-size: 12px; color: var(--ink-2); text-align: center; vertical-align: bottom; line-height: 1.3; padding-bottom: 4px; white-space: nowrap; }
/* 名前の列の幅は min-width でも決める（名前を折り返すと、表が紙面より広いときに列が1字の幅まで縮むため） */
.heat-name, .heat-corner { position: sticky; left: 0; z-index: 1; width: 140px; min-width: 140px; max-width: 140px; background: var(--paper); text-align: left; font-weight: 500; }
/* 名前は「…」で切らずに折り返して、全部を見せる（長い呼び名でも目で確かめられる。吹き出しの title だけに頼らない：AY-N-03・AA-N-21）。行はマスより高くなってよい
   折り返すときは行の長さをそろえる（「ながいなまえのみほ／ん」と最後の行に1字だけ残さない：AA-R-12・CP-R-19。呼び名は文節で包まない＝名前を文節の境で割らない） */
.heat-name a { display: block; padding: 4px 8px 4px 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; color: var(--navy); text-decoration: none; text-wrap: balance; }
.heat-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.heat-cell { width: 64px; min-width: 28px; height: 32px; text-align: center; vertical-align: middle; font-size: 12px; }
@media (max-width: 899px) {
  .heat-name, .heat-corner { width: 96px; min-width: 96px; max-width: 96px; }
  .heat-cell { width: 56px; }
}

/* 出欠（当日にスマホで付ける） */
.check-list { border-top: 1px solid var(--rule); }
/* 1人の行：参加の印（行の左の大きな面）と、始まったあとのグルコンだけの「アーカイブで視聴」（行の右。狭い幅では名前の下に回る：16-5の18） */
.check-row { display: flex; align-items: center; column-gap: 16px; border-bottom: 1px solid var(--rule); }
.check-item { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; cursor: pointer; }
.check-item input { margin: 0; }
.check-arc { display: inline-flex; align-items: center; justify-content: flex-end; flex: none; margin-left: auto; min-width: 44px; min-height: 44px; padding: 0 0 0 12px; cursor: pointer; }  /* 印の右端を、列の頭「アーカイブで視聴」の右端（紙面の右の線）にそろえる（R10-10） */
/* 列の頭（参加｜アーカイブで視聴）。右の言葉は右の印の真上 */
.check-head { display: flex; justify-content: space-between; padding: 0 0 6px; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--ink-2); }
.check-head + .check-list { border-top: 0; }
.check-arc input { width: 20px; height: 20px; margin: 0; }
.at-note { margin: -4px 0 12px; color: var(--ink-2); }
/* 小札（申込・入会前・アーカイブで視聴）は、名前と場所のすぐ後ろ（12px）に置く（行の反対の端に押し出さない。受講生の一覧の「小札は名前の横」と同じ：AA-R-11） */
.check-name { flex: 0 1 auto; min-width: 0; font-size: 15px; }
.check-name small { margin-left: 8px; font-size: 13px; color: var(--ink-2); }
.save-bar { margin-top: 20px; }
@media (max-width: 899px) {
  .save-bar { position: sticky; bottom: 0; z-index: 10; margin: 20px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--rule); }
  /* 一覧のすぐ下の保存の帯は、帯の上の罫（画面の端まで）が一覧の終わりの罫を兼ねる（最後の行の罫と2本並べない：AA-R-11）。帯は最後の行のすぐ下に付ける */
  .check-list:has(+ .save-bar) > .check-row:last-child { border-bottom: 0; }
  .check-list + .save-bar { margin-top: 0; }
}
/* PCでは全幅の棒にせず、ほかの運営のボタン（主も副も小ボタン）と同じ大きさにする（高さ var(--btn-h-s)＝マウス36px・指44px、字14px、左右14px：.btn--s と同じ）
   48px・200pxのままだと、運営のPCで主ボタンの高さがこの画面だけ違い、同じ画面の右の列の「保存する」（36px）とも段違いだった（AA-R6-07）
   スマホ（899px以下）は、当日に指で付けるので、下に固定した全幅の48pxのまま（上の決まり） */
@media (min-width: 900px) {
  .save-bar .btn--block { width: auto; min-width: 0; min-height: var(--btn-h-s); padding: 0 14px; font-size: 14px; }
}
.code-area { min-height: 180px; font-family: var(--font-code); font-size: 13px; }



/* 並びの最後の行は、下の罫を引かない（節の罫と二重にしない） */
.ledger-row:last-child, .event:last-child, .todo:last-child, .tl:last-child, .voice:last-child, .note-row:last-child, .id-row:last-child { border-bottom: 0; }
.row:last-child::after { display: none; }
/* 受講生の節の最後の行は、下の余白も持たない（最後の字から下の罫までを、どの節も節の余白28pxにそろえる＝手帳の行のリズム）
   押せる行（a.row）は、押したときの地の塗りが上下そろうように余白は残し、そのぶん節の下の余白に重ねる */
.sec .event:last-child, .sec .ledger-row:last-child, .sec .tl:last-child, .sec .todo:last-child { padding-bottom: 0; min-height: 0; }
.sec .row--flush:last-child { padding-bottom: 0; }
.sec a.row:last-child { margin-bottom: -12px; }
/* 節の終わりが文字ボタン（閉じた「もう少しだけ答える」・閉じた「輪の数え方」・わたしの「プライバシーポリシー」）のときも、押せる高さ44pxの字の下の空き（約12px）を、
   押せる行と同じく節の下の余白に重ねる（最後の字から下の罫まで40px→28〜31px。S05）。運営の紙面（.a-sec）には効かない */
.sec > details:not([open]):last-child > summary.btn--text, .sec > details.help:not([open]):last-child > summary, .sec > .btns:last-child > .btn--text:only-child { margin-bottom: -12px; }

/* 文字だけを大きくする設定（Android の文字の大きさ・Firefox の文字だけの拡大）で、横に並べたものが頁を横に広げないようにする（WCAG 1.4.4。AY-N-01）
   入れ物は節（.sec）＝輪・帳簿の並ぶ幅そのもの。条件の em は節の文字の大きさに付いてくるので、ふだんの15pxなら19em＝285px（320px幅の節の中は288px）で効かず、
   320〜1440pxの見た目は変わらない。文字が2倍なら570pxで、どの幅でも効く（.sheet を入れ物にすると、360px幅で文字125%のときに輪が頁を368pxに広げる）
   折る形のときは、輪をつなぐ線を消して輪の間を20pxあける。帳簿は「言葉｜数字」の下に補足。閉じた文字ボタン（もう少しだけ答える）は折り返す */
.sec { container-type: inline-size; }
@container (max-width: 19em) {
  .rings { flex-wrap: wrap; gap: 12px 20px; }
  .ring-link { display: none; }
  .ledger-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ledger-note { grid-column: 1 / -1; }
  details > summary.btn--text { white-space: normal; text-align: left; }
  /* ログイン・入口の奥付（320px幅で文字が2倍のとき、頁を354pxに広げていた）。折るのは言葉の中の <wbr> だけ（「プライバシー／ポリシー」） */
  .sec--foot > .btn--text { white-space: normal; word-break: keep-all; text-align: left; }
  /* カルテの「本人からの求め」の「データを書き出す（JSON）」（小ボタンのリンク）：言葉（span と Phrase）を文節の境で折る（入れ物はカルテの節 .a-karte .a-sec）
     文字だけ200%の320pxで、字が小ボタンからはみ出して頁を334pxに広げていた（AY-R5-03・AY-R-05 の残り）。行の高さ（字の大きさ＋6px）と上下6pxは、2行に折れたときの行の間と余白
     ふだんの字でも効く幅（右の列が304px以下＝1100〜1190px）では1行に入り、小ボタンの高さ（36px）の中で上下同じに足す。行の高さは「字の大きさ＋偶数px」で、字の位置も今と同じ（.a-more の文字ボタンと同じ） */
  .a-karte .a-sec .btns > a.btn--s { white-space: normal; text-align: left; line-height: calc(1em + 6px); padding-top: 6px; padding-bottom: 6px; }
  /* 節目の印の並びは2列にする（4列のままだと、文字が2倍のとき日付「8月15日以前」が隣の列の名前に重なり、頁を横に流していた：AY-R5-01）
     印の円も字に合わせて大きくする（56pxの決め打ちのままだと「五十」が円からはみ出す。ふだんの字では今の56px＝1字の24px・2字の20pxに対する割合。1字と2字の円を同じ大きさにする） */
  .seals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seal--m { width: calc(56em / 24); height: calc(56em / 24); }
  .seal--m.seal--2 { width: calc(56em / 20); height: calc(56em / 20); }
  /* あゆみの「これまでの出来事」の28pxの印も、字に合わせて円を大きくし、印の列も同じ幅（ふだんの28px＝15pxの字の 28/15em）に広げる（字が円の外へ出ていた：AY-R6-04）
     印の列を広げたぶん、日付の列を3.4em→2.6emに詰める（「14日」は2.6emに入る。印の列だけを広げると本文の列が細くなり、「。」が1字だけの行に落ちた）
     印の箱の高さは、日付の行の高さ22.5px（15pxの字の 22.5/15em）に合わせて広げる。運営のカルテの出来事の行（日付が「10月20日」）は今のまま（受講生の節 .sec の中だけ） */
  .seal--s { width: calc(28em / 13); height: calc(28em / 13); }
  .seal--s.seal--2 { width: calc(28em / 12); height: calc(28em / 12); }
  .sec .tl { grid-template-columns: 2.6em calc(28em / 15) minmax(0, 1fr); }
  .sec .tl-mark { width: 100%; height: calc(22.5em / 15); }
  /* 振り返りの「選んだのを外す」：文字が大きいと、問いの名前の行の右に置くと名前に重なるので、チップの並びの後ろに戻す（AS-R6-02） */
  .chips[data-optional-choice] > [data-clear-choice] { position: static; padding-top: 0; }
}
/* 明朝の20px以上は、かなを詰める。日時（.event-when）は大きさによらず詰める（同じ画面の頁の中の日時と行の日時を、同じ組み方にする：曜日のかっこの前後を空けない。AS-N-02） */
.a-sec-head h2, .out-name, .a-band-title, .celebrate h2, .ask, .event-when, .a-logo, .declare { font-feature-settings: 'palt' 1; }

/* 運営の今週：スマホでは「今週声をかける人」をいちばん上に */
.a-home .a-grid { margin-top: 32px; }
@media (max-width: 899px) {
  .a-home { display: flex; flex-direction: column; }
  .a-home > .a-grid { display: contents; }
  .a-home .a-out { order: 1; padding-top: 0; }
  .a-home .kpi-line { order: 2; margin: 8px 0 0; }
  /* すぐ上のKPIの下の罫で区切る（罫を2本重ねない）。罫と見出しの間は、節の間と同じ余白 */
  .a-home .a-side { order: 3; border-top: 0; padding-top: var(--sec-y); }
  .a-home .a-side::before { display: none; }
  /* 左の列（今週声をかける人・運営の作業・声をかける人がいない週の最近の振り返り）も、中の節を並びに出す（並びは声をかける人→作業→KPI→残り） */
  .a-home .a-left { display: contents; }
  .a-home .a-task { order: 1; }
  .a-home .a-left > .a-rv { order: 3; border-top: 0; padding-top: var(--sec-y); }
  .a-home .a-left:has(> .a-rv) + .a-side { border-top: 1px solid var(--rule); }
}
/* 運営の作業（ロードマップの期限）の節：見出しは2段目の大きさ（いちばん強いのは「今週声をかける人」）と、節の一文 */
.a-task .a-sec-head h2 { font-size: var(--fs-h3); letter-spacing: 0.02em; }
.a-task-note { margin-bottom: 12px; }
.a-actions details > summary { list-style: none; }
.a-actions details > summary::-webkit-details-marker { display: none; }
details > summary.btn { list-style: none; }
details > summary.btn::-webkit-details-marker { display: none; }
/* 押すと中が開く文字ボタン（もう少しだけ答える）は、右の ⌄ で開くものと分かるようにする。開いたら上向き（色の切り替えと同じ120ms・位置は動かさない） */
summary .ico-toggle { transition: transform var(--t-fast); }
details[open] > summary .ico-toggle { transform: rotate(180deg); }

/* 動きを減らす設定の人には、表紙の動きも色の切り替えも出さない */
@media (prefers-reduced-motion: reduce) {
  .cover-photo img { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------- 運営：取り込みの記録（2026-10-21 統合・担当A。カルテのIDの行は「カルテ」の .id-row に移した） ---------- */
/* 取り込みの記録の、次にすること・止まったことの一文（打ち切り・一部完了）。赤にせず本文の色の500にし、頭に青の「!」を置く
   （赤は本当に失敗したもの＝失敗の札・Discordの設定の誤りの箱だけ。札も青の枠：AA-N-06・DESIGN.md 2章）。「!」は1行目の真ん中にそろえる */
.sync-fix { display: flex; align-items: flex-start; gap: 6px; color: var(--ink); font-weight: 500; }
.sync-fix > svg { flex: none; width: 14px; height: 14px; margin-top: calc((1.5em - 14px) / 2); color: var(--blue); }
.sync-fix > span { min-width: 0; }

/* ---------- 運営：入力欄の文字の大きさ・集まりを足す欄（3回目の直し・運営の枠の担当） ---------- */
/* 指で使う画面では、運営の小さな入力欄も16pxにする（16px未満だと iPhone の Safari が焦点で拡大したまま戻らない）。マウスで使うPCは今のまま */
@media (pointer: coarse) {
  .filters .input, .filters .select, .svc-form .input, .copybox .textarea, .code-area, .ctl-inline { font-size: 16px; }
}
/* 集まりの一覧の「集まりを足す」：ふだんは畳み、一覧に紙面の幅を使う。開いた欄は読みやすい幅まで */
.a-add { margin-bottom: 8px; }
.a-add-body { max-width: 560px; padding: 8px 0 24px; }
/* 集まりの一覧の最後の列（参加）は、見出しも数も表の右の線にそろえる（件数の「◯件」と同じ右端） */
table.t-events th:last-child, table.t-events td:last-child { padding-right: 0; text-align: right; }
/* 集まりの名前が出欠の画面への道（受講生の一覧の名前と同じ t-name の形。行ごとに同じ言葉のボタンを並べない：AA-R5-03）
   名前の欄の全体を押せる形にする（::after を欄いっぱいに広げる。基準を tr でなく td にするのは、tr の position: relative が効かないブラウザで、広げた面が表の箱いっぱいになるのを避けるため）
   名前は折り返してよい（スマホの t-name の nowrap を外す。長い集まりの名前で表を横に流さない） */
table.t-events td.ev-name { position: relative; }
table.t-events .ev-link { white-space: normal; }
table.t-events .ev-link::after { content: ''; position: absolute; inset: 0; }
table.t-events .ev-end { display: none; }
/* 集まりの一覧（スマホ）：日時・種類・会場・参加の列を隠し、名前の上下の小さな行（ev-m）に出す */
table.t .ev-m { display: none; }
@media (max-width: 899px) {
  table.t-events .ev-pc { display: none; }
  table.t-events .ev-m { display: block; }
  /* 名前の欄が左の端になるので、表の左の線にそろえる（ふだんの1列目と同じ） */
  table.t-events .ev-name { padding-left: 0; }
  /* スマホでは名前の欄が行の全体になり、行のどこを押しても出欠の画面へ移る（当日に指で押す）。押す面は紙面の左右の余白まで広げる（受講生の画面の押せる行 a.row と同じ）
     そのため、この表の箱（ev-wrap）は横に流さない（見えるのは名前の欄1つだけで、名前は文節の境で折れるので、表は紙面の幅を超えない）
     右の端に › を置く（a.row の .row-end と同じ大きさと色）。› の線の右の端を表の右の線にそろえる（18pxの箱の右に6.75pxの空きがあるので6px外へ出す）
     › は押す面の上に重なるので、押しても下の道（名前のリンクの面）へ通す（pointer-events: none） */
  .ev-wrap { overflow-x: visible; }
  table.t-events td.ev-name { padding-right: 30px; }
  table.t-events .ev-link::after { left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); }
  table.t-events .ev-end { display: block; position: absolute; top: 50%; right: -6px; width: 18px; height: 18px; margin-top: -9px; color: var(--ink-2); pointer-events: none; }
  /* 焦点の輪は、押せる面（行の全体）の内側＝紙面の余白の中に描く（名前の字の周りの輪だと、左の端の線が表の左の線の外で切れ、行のどこを押せるかも見えない。a.row:focus-visible と同じ内側の輪） */
  table.t-events .ev-link:focus-visible { outline: none; }
  table.t-events .ev-link:focus-visible::after { outline: 2px solid var(--blue); outline-offset: -2px; }
}

/* ---------- 共通の動き：送っている途中・本文へ・焦点の輪（3回目の直し・共通の動きの担当） ---------- */
/* 送っている途中のボタン（app.js が押したボタンに aria-disabled を付ける。二度押しを止めるため）。文字ボタンは塗らず、字の色だけ変える */
.btn--text[aria-disabled='true'] { background: none; color: var(--ink-3); }
form[data-sending] [aria-disabled='true'] { cursor: progress; }
/* 運営の「本文へ」：キーボードで焦点が来たときだけ左上に出す（左の帯の8つを通らずに紙面へ） */
.skip { position: absolute; left: 12px; top: -64px; z-index: 80; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--blue); font-weight: 500; font-size: 14px; line-height: 1.5; text-decoration: none; }
.skip:focus { top: 12px; }
/* 「本文へ」で焦点を受けた紙面は、輪で囲まない（紙面は押す物ではない） */
.a-paper[tabindex='-1']:focus { outline: none; }
/* 左右の余白まで塗る行（講義・振り返りの履歴・声をかける人）は、焦点の輪を内側に描く（輪の左右が画面の外に出ないように） */
.row:focus-visible, .out-sum:focus-visible { outline-offset: -2px; }
/* 読み上げない輪（Ring の decorative。aria-hidden の svg）は、線画のアイコンの「画面の上で線1.5px」に入れない
   （non-scaling-stroke だと、小さくした輪（34px）で進みの弧の長さ（stroke-dasharray）がずれる。ほかの輪と同じく、輪と一緒に縮める） */
svg.ring :is(circle, path) { vector-effect: none; }

/* ---------- 運営：取り込み・設定の紙面（3回目の直し・運営の集計の担当。AD-15） ---------- */
/* 「今すぐ取り込む」の4つのボタンは2×2の格子（3＋1・2＋2でがたつかない）。文字は左にそろえる。狭い画面は1列 */
.sync-now { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sync-now > form, .sync-now .btn { width: 100%; }
.sync-now .btn { justify-content: flex-start; }
@media (max-width: 599px) { .sync-now { grid-template-columns: minmax(0, 1fr); } }
/* 「今すぐ取り込む」の4つのボタンと、同じ節の名簿の保留の「確かめたので反映する」の言葉（span と Phrase）は、ボタンより長いとき（文字だけ200%の320px）だけ文節の境で折る
   （折れないままだと「成果報告・週報（Discord）」が288pxのボタンから357pxまではみ出し、頁を374pxに広げていた：AY-R6-03）。ふだんの字では1行に入るので折れない
   行の高さ（字の大きさ＋6px）と上下6pxは、2行に折れたときの行の間と余白。1行のときは小ボタンの高さ（マウス36px・指44px）の中で上下同じに足すので、字の位置は今と同じ（.a-more の文字ボタンと同じ） */
.sync-now .btn, .sync-now ~ .notice .btn--s { white-space: normal; text-align: left; line-height: calc(1em + 6px); padding-top: 6px; padding-bottom: 6px; }
/* 並びの中の選ぶ欄（紐付け待ちの「誰か選ぶ」・カルテの契約の種類）は、列より広くしない。ふだんは中身の幅のまま（紐付け待ちは202px）で、1つで列に入らないときだけ列の幅まで縮める
   （文字だけ200%では、いちばん長い選択肢「紐付けない（運営など）」の幅の342pxになり、288pxの列からはみ出していた：AY-R6-03。閉じた欄に出るのは選んだ1つで、開いた一覧は全部の幅で出る） */
.btns > select.ctl-inline { max-width: 100%; min-width: 0; }
/* 畳んだ説明（くわしく）：ブラウザの黒い三角を消し、青い文字ボタン＋下向きの山にする。開くと山が上を向く。字と山の間は4px（文字ボタン .btn--text・節の見出しの右のリンクと同じ値：AS-R5-05） */
details.help > summary { display: inline-flex; align-items: center; gap: 4px; min-height: var(--btn-h-s); list-style: none; cursor: pointer; font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--blue); }
details.help > summary::-webkit-details-marker { display: none; }
details.help > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
details.help > summary svg { width: 14px; height: 14px; flex: none; transition: transform var(--t-fast); }
details.help[open] > summary svg { transform: rotate(180deg); }
details.help > .caption { margin-top: 2px; }
/* 受講生の「輪の数え方」の中の2つの文（0のままの理由・数え方）は、6pxあけて分ける（運営の紙面の details.help は今のまま。AS-N-14） */
.sec details.help > .caption + .caption { margin-top: 6px; }
/* 記録のまま（JSON）。行の「くわしく」の中だけ */
.raw-code { display: block; margin-top: 6px; font-family: var(--font-code); font-size: 12px; line-height: 1.6; color: var(--ink); word-break: break-all; }
/* 声かけのしきい値の表（項目｜意味｜範囲）。項目の名前は等幅の濃紺 */
table.t--compact th, table.t--compact td { padding: 8px 12px; font-size: 13px; line-height: 1.6; }
table.t--compact .t-sub { margin-top: 2px; font-size: 13px; }
/* プログラムの名前（profileMissingDays など）は、列より長いときだけ名前の中で折る（文字だけ200%のスマホで、しきい値の表が頁を421pxに広げていた：AY-R5-03）。ふだんは列に入るので折れない */
code.k { font-family: var(--font-code); font-size: 13px; color: var(--navy); overflow-wrap: anywhere; }
/* 表のセルの .nw（折らない短い値）。table.t td の text-wrap: pretty（折り返す）が .nw の nowrap を打ち消すので、セルでは強く書く */
table.t td.nw, table.t th.nw { white-space: nowrap; }
/* 今週：声をかける人の一覧の下に「運営の作業」が続くときは、一覧の最後の罫を節の区切りにする（罫を2本重ねない）
   上限を超える週のように、節が一覧でなく文字ボタン（声かけの対象を受講生の一覧で見る）で終わるときは、ふつうの節の区切り（.a-sec + .a-sec の罫と余白）にする
   （文字ボタンのすぐ下に罫なしで見出しを続けない。右の列の「すべての振り返り ›→罫→居住地」と同じ形：AA-R5-07） */
.a-out:has(.out):not(:has(> .a-more:last-child)) + .a-task { border-top: 0; padding-top: 8px; }

/* ---------- 運営：今週と取り込み・設定（4回目の直し・今週と取り込みの担当） ---------- */
/* 2列の頭の見出しは、字の下の線（ベースライン）でそろえる（AA-N-12。今週・カルテ・出欠・居住地・取り込み・設定）
   左の列の見出しは26px・右の列は20px（どちらも行の高さ1.4の明朝）。字の下の線は行の箱の上から、26pxで29px・20pxで22px（測った値）と7px違う
   右の列の最初の見出しの行を、その差（字の大きさの差の7/6）だけ下げる。件数・添え書き（.count・.hint）も同じ行なので一緒に下がる
   右の列の頭の縦の罫（::before）は列の上端から引くので動かない。1列に落ちる幅（1099px以下）は見出しが同じ大きさなので下げない */
@media (min-width: 1100px) {
  .a-grid > :last-child > .a-sec:first-child > .a-sec-head, .a-grid > .a-sec:last-child > .a-sec-head { padding-top: calc((var(--fs-h2) - var(--fs-h3)) * 7 / 6); }
}

/* 今週のKPI（1100px以上）：言葉｜数の2列にして、上下の2段で数の左端を列ごとにそろえる（AA-N-04。DESIGN.md 3章「数字の列は列の幅の固定」）
   言葉の列の幅（--kl）は、その列でいちばん長い言葉に合わせる（言葉の14pxの字で測った幅：1列目「今月のグルコン参加（のべ）」13.52em・2列目「14日以内に動いた人」9.29em・3列目「居住地・生年月日」8.32em）
   ただし升が狭い幅（1100〜1200px）では、数の分（--kn：その列の数＋間の幅）を残した幅までにして、言葉の方を折る（数を升の右の罫からはみ出させない。上下の2段は同じ幅なので、そろいは崩れない）
   em は言葉の字（14px）で数えるため、升の字の大きさを14pxにする（中の言葉・数・補足は、それぞれの大きさを持つので変わらない）。言葉や数の桁を変えたら、この幅も一緒に直す */
@media (min-width: 1100px) {
  .a-home .kpi { font-size: 14px; display: grid; grid-template-columns: min(var(--kl), 100% - var(--kn)) auto; column-gap: 12px; align-items: baseline; justify-content: start; }
  .a-home .kpi-sub { grid-column: 1 / -1; }
  .a-home .kpi:nth-child(3n + 1) { --kl: 13.6em; --kn: 4.5em; }
  .a-home .kpi:nth-child(3n + 2) { --kl: 9.4em; --kn: 6.5em; }
  .a-home .kpi:nth-child(3n) { --kl: 8.4em; --kn: 5.5em; }
}
/* スマホ（899px以下）のKPI（2列×3段）：同じ段の2つの升で、言葉が1行と2行に分かれても、数と補足の高さをそろえる（AA-N-04）
   升を親の3つの行にまたがる subgrid にする（言葉・数・補足の行の高さを、同じ段の升どうしで分け合う）。1行の言葉は数のすぐ上に寄せる */
@media (max-width: 899px) {
  .kpi { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .kpi-label { align-self: end; }
}

/* 今週声をかける人：行を開いたら、見出しの行の「ほか◯件」は隠す（2つ目からの理由は、開いた中の一覧に小札つきで出る：AA-N-03・EA-N-10） */
.out-row[open] > .out-sum .out-more { display: none; }

/* 今週の取り込みの欄：名前は、取り込み・設定の表の「何を」と同じ2段（名前／取り込み元）。どの幅でも全部の行が同じ高さになり、「（」が行の頭に来ない（AA-N-10） */
.sync-name { line-height: 1.5; }
.sync-name .t-sub { display: block; font-size: 12px; line-height: 1.4; color: var(--ink-2); }

/* 取り込み・設定（AA-N-05）：2列の段（今すぐ取り込む｜紐付け待ち）・全幅の節（取り込みの記録）・2列の段（紐付けないにしたもの｜再入会のとき）・全幅の節（設定）を縦に重ねる
   段と節の間にも、節どうし（.a-sec + .a-sec）と同じ罫と余白を付ける */
.a-ruled { border-top: 1px solid var(--rule); }
.a-grid.a-ruled { margin-top: 0; padding-top: var(--sec-y); }
/* 設定：しきい値の欄（左の上）・ようこその手紙の欄と保存（左の下）・しきい値の項目の表（右）。列の比と溝は .a-grid と同じ（上の段の縦の罫と同じ位置）
   右の表は2つの行にまたがる。手紙の欄は、しきい値の欄のすぐ下に続ける（表が長いときの余りは下の行に回す：auto 1fr）
   並び（HTML）は欄→表→手紙。1列に落ちる幅（1099px以下）では、項目の意味が欄のすぐ下に来る */
.a-settings { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: 'json help' 'letter help'; column-gap: 48px; align-items: start; }
.a-settings > * { min-width: 0; }
.a-settings > .set-json { grid-area: json; }
.a-settings > .set-letter { grid-area: letter; }
.a-settings > .set-help { grid-area: help; align-self: stretch; position: relative; }
.a-settings > .set-help::before { content: ''; position: absolute; left: -24px; top: 0; bottom: 0; width: 1px; background: var(--rule); }
/* 欄の頭を節の見出しのすぐ下に置き、右の表の頭とそろえる。手紙の欄は、しきい値の欄（とその注記）と別の設定なので、欄どうしより少し空ける */
.a-settings > .set-json > .field:first-child { margin-top: 0; }
.a-settings > .set-letter > .field:first-child { margin-top: 24px; }
@media (max-width: 1099px) {
  .a-settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: 'json' 'help' 'letter'; }
  .a-settings > .set-help { margin-top: 16px; }
  .a-settings > .set-help::before { display: none; }
}

/* 節の見出しへの送り（5回目の直し・admin-logic）：カルテの保存・記録のあとの戻り先の印（#pf-h・#ct-h・#mm-h・#lt-h・#sv-h：index.tsx の karteBack）や、
   誤りの箱の下のリンク（#rt-h・#cf-h）で送ったとき、PCでは見出しの字を画面の上の端に付けない（スマホは html.is-admin の scroll-padding-top が上のナビの分をあける。EA-R-08） */
@media (min-width: 900px) {
  .a-paper .a-sec-head > h2[id] { scroll-margin-top: 24px; }
}

/* ---------- 情報を分ける部品（10回目の直し：たいがさん「1つの画面の中に文字量が多く、疲れてしまう。情報を分散させて」「スクロールさせる工夫も」）。部品は src/views/visuals.tsx ---------- */
/* 横にめくる棚：画面の端から端まで流す（節の左右の余白の分だけ外へ出す）。次の札の頭が右に少しのぞくので、横に続くと分かる。帯は出さない */
/* position: relative：中の読み上げ用の文字（.sr＝absolute）を棚の中に閉じ込める（棚の外の .sec を基準にすると、横に送った先の .sr が頁を押し広げ、下のタブまで広がる） */
.shelf { position: relative; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.shelf:focus-visible { outline-offset: -2px; }
.shelf-list { display: flex; gap: 12px; width: max-content; }
.shelf-item { display: flex; flex: none; width: 148px; scroll-snap-align: start; }
.shelf-item--quote { width: 212px; }
.shelf-item--event { width: min(236px, 68vw); }
/* 棚の札（ホームの記録）：淡い氷色の面（影は付けない。白い頁は1画面に1枚だけ）。1枚に1つのこと（大きな数か絵と、短い言葉） */
.card { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 14px 14px 16px; border-radius: var(--r-page); background: var(--ice); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); text-decoration: none; transition: background-color var(--t-fast); }
a.card:hover { background: var(--ice-2); }
.card .card-photo { width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 0 0 1px var(--rule); }
/* イラストは白地の JPG なので、氷色の面に重ねる（白い四角を出さない） */
.card .card-spot { width: 76px; height: 76px; margin: -10px 0 -6px -10px; mix-blend-mode: multiply; }
.card-badges { display: flex; }
.card-badges > .badge + .badge { margin-left: -14px; }
.card-num { margin-top: 12px; font-family: var(--font-mincho); font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: 0.02em; color: var(--navy); white-space: nowrap; }
.card-num .unit { margin-left: 2px; font-size: 13px; font-weight: 500; }
.card-pre { margin-right: 3px; font-size: 13px; font-weight: 500; }
.card-wait { font-family: var(--font-gothic); font-weight: 400; font-size: 22px; color: var(--ink-2); }
.card-label { margin-top: 4px; font-weight: 500; font-size: 13px; line-height: 1.5; color: var(--ink); }
.card-note { margin-top: 2px; font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-2); }
.card-note.up { color: var(--navy-2); font-weight: 500; }
.card-quote { margin-top: 6px; font-family: var(--font-mincho); font-weight: 500; font-size: 15px; line-height: 1.7; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.card .card-quote + .card-note { margin-top: auto; padding-top: 6px; }
.card > .bar { align-self: stretch; margin-top: 10px; background: #FFFFFF; }
/* 集まりの予定・アーカイブの札：写真・日時・名前・種類と会場・動き（面にしない。写真の下に字） */
.ecard { display: flex; flex-direction: column; width: 100%; }
.ecard .ecard-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.ecard .event-when { font-size: 15px; }
.ecard-title { font-weight: 500; font-size: 15px; line-height: 1.55; }
.ecard-act { display: flex; margin-top: auto; padding-top: 2px; }
.ecard-act > .btn--text { margin-left: -4px; }
.ecard-act > .caption { padding-top: 8px; }

/* 数字のタイル：2列の升を細い罫で区切る（箱にしない）。アイコンと短い言葉、大きな数字、下に小さな補足 */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.stat { display: flex; flex-direction: column; min-width: 0; padding: 14px 12px 16px 0; background: var(--paper); }
.stat:nth-child(2n) { padding-left: 16px; padding-right: 0; }
.stats--odd > .stat:last-child { grid-column: 1 / -1; }
.stat-head { display: flex; align-items: center; gap: 8px; }
.stat-ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ice); color: var(--blue); }
.stat-ico svg { width: 16px; height: 16px; stroke-width: 1.5; }
.stat-label { font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.stat-num { margin-top: 8px; font-family: var(--font-mincho); font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: 0.02em; color: var(--navy); white-space: nowrap; }
.stat-num .unit { margin-left: 2px; font-size: 13px; font-weight: 500; }
.stat-wait { font-family: var(--font-gothic); font-weight: 400; font-size: 20px; color: var(--ink-2); }
.stat-note { margin-top: 2px; font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-2); }
.stat-note.up { color: var(--navy-2); font-weight: 500; }

/* 畳む行：アイコン・名前・いまの値の1行。押すと中が開く（わたしの頁）。山の向きで開け閉めが分かる */
.folds { border-top: 1px solid var(--rule); }
.notice + .sr + .folds { margin-top: 20px; }
.fold { border-bottom: 1px solid var(--rule); }
.fold-sum { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 0; list-style: none; cursor: pointer; }
.fold-sum::-webkit-details-marker { display: none; }
.fold-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ice); color: var(--blue); }
.fold-ico svg { width: 18px; height: 18px; stroke-width: 1.5; }
.fold-head { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fold-title { font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--ink); }
.fold-val { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.fold-sum:hover .fold-title { color: var(--blue); }
.fold-chev { flex: none; width: 18px; height: 18px; color: var(--ink-2); stroke-width: 1.5; transition: transform var(--t-fast); }
details[open] > summary .fold-chev { transform: rotate(180deg); }
.fold-body { padding: 0 0 24px 48px; }
.fold-body > .spot:first-child { margin-top: -4px; }
@media (max-width: 359px) { .fold-body { padding-left: 0; } }
.folds-more { padding-top: 0; }
.sec + .folds-more::before { content: none; }
/* わたしの頁の2つの組（プロフィール・そのほか）は、1本の続いた並びに見せる（間に空きと二重の罫を作らない） */
form:has(+ .folds-more) > .sec:last-child { padding-bottom: 0; }
.sheet > form + .folds-more::before { content: none; }
.folds-more > .folds { border-top: 0; }

/* 頁の中の切り替え（あゆみの「記録・節目・出来事」）。頁を下へ送っても、上に付いたまま（どの見方かを見失わない） */
.seg-wrap { position: sticky; top: 0; z-index: 5; padding: 14px var(--gutter) 10px; background: var(--paper); }
.seg-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--ice); box-shadow: inset 0 0 0 1px var(--rule); }
.seg-a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); border-radius: 9px; font-weight: 500; font-size: 14px; color: var(--ink-2); text-decoration: none; transition: background-color var(--t-fast), color var(--t-fast); }
.seg-a svg { width: 16px; height: 16px; stroke-width: 1.5; }
.seg-a:hover { color: var(--navy); }
.seg-a[aria-current='page'] { background: var(--paper); color: var(--navy); box-shadow: 0 0 0 1px var(--rule); }
.seg-wrap + .sec { padding-top: 12px; }
.seg-wrap + .sec::before { content: none; }
.near--top { margin: 0 0 28px; }

/* 出来事の前の月は畳む（「9月・14件」の1行。押すと開く） */
.month-n { margin-left: 8px; font-family: var(--font-gothic); font-weight: 400; font-size: var(--fs-small); color: var(--ink-2); }
.month--fold > summary.month-h { display: flex; align-items: center; min-height: var(--tap); margin-bottom: 0; list-style: none; cursor: pointer; }
.month--fold > summary::-webkit-details-marker { display: none; }
.month--fold > summary .fold-chev { margin-left: auto; }
.month--fold[open] > summary { margin-bottom: 4px; }
.month + .month--fold { margin-top: 16px; }
.month--fold + .month--fold { margin-top: 0; border-top: 1px solid var(--rule); }

/* 講義の章のカード（2列。表紙の写真・名前・進み具合）。広い画面は3列 */
.courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
@media (min-width: 520px) { .courses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.course { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.course-art { position: relative; display: block; }
.course .course-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.course-art > .row-art-done { right: 6px; bottom: 6px; }
.course-name { margin-top: 8px; font-weight: 500; font-size: 14px; line-height: 1.5; }
.course:hover .course-name { color: var(--blue); }
.course-sub { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 2px; font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-2); }
.course-sub svg { width: 12px; height: 12px; flex: none; stroke-width: 1.5; }
.course > .bar { margin-top: 6px; }

/* 振り返りを1問ずつ（JSがあるときだけ。上の流れの図が、いまどこかの印になる） */
form.is-stepped .step:not(.is-current) { display: none; }
.flow-step.is-current .flow-ico { background: var(--blue); border-color: var(--blue); color: var(--on-dark); }
.flow-step.is-done .flow-ico { background: var(--paper); border-color: var(--blue); }
.flow-step.is-current .flow-text { font-weight: 700; color: var(--navy); }
.step-nav { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 28px; }
.step-nav > .btn--text { align-self: flex-start; margin-left: -4px; }
.step-nav--last { margin-top: 8px; }

/* 参加した集まりの4回目から（「ほか◯回を見る」で開く） */
details.more { margin-top: 4px; }

/* 成果報告の日の声かけ（毎月1日〜3日のホーム。domain/report.ts）：淡い氷色の面の中に、言葉（左）・紙飛行機の絵（右）・ボタン・添え書きを全部入れる。動きは付けない
   箱にする例外（DESIGN.md 1章）：月に3日だけの頼みごとなので、白い頁の次に目に入る強さが要る。字の左の線は面の内側の1本 */
.report { display: grid; grid-template-columns: minmax(0, 1fr) 80px; column-gap: 12px; align-items: start; padding: 16px; border-radius: var(--r-page); background: var(--ice); box-shadow: inset 0 0 0 1px var(--rule); }
.report > .report-body { grid-column: 1; grid-row: 1; }
.report .report-spot { grid-column: 2; grid-row: 1; width: 80px; height: 80px; margin: -4px -4px 0 0; mix-blend-mode: multiply; }
.report > .btns, .report > .caption, .report > .report-done { grid-column: 1 / -1; }
.report > .btns { margin-top: 14px; }
.report > .btns--tight { margin-top: 4px; }
.report > .caption { margin-top: 8px; }
.report-h { font-family: var(--font-mincho); font-weight: 700; font-size: 18px; line-height: 1.45; letter-spacing: 0.04em; color: var(--navy); }
.report-when { margin-top: 2px; font-weight: 500; font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-2); }
.report-text { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--ink); }
.report-done { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; font-size: 15px; line-height: 1.7; color: var(--navy); }
.report-done > svg { flex: none; width: 18px; height: 18px; margin-top: calc((1.7em - 18px) / 2); color: var(--blue); stroke-width: 1.5; }
@media (max-width: 359px) {
  .report { grid-template-columns: minmax(0, 1fr) 64px; padding: 14px; }
  .report .report-spot { width: 64px; height: 64px; }
}
/* 運営の今週の「今月の成果報告」のまだの人（名前のリンクを折り返して並べる。押せる高さはほかの文字ボタンと同じ） */
.a-names { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 4px; }
.a-names { gap: 0 20px; }
.a-names a { display: inline-flex; align-items: center; min-height: var(--btn-h-s); font-family: var(--font-mincho); font-weight: 700; font-size: 16px; color: var(--navy); text-decoration: none; }
.a-names a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 今月の成果報告の節の中の間（手書きの style を持たない） */
.rpd-bar { margin-top: 12px; }
.rpd-more { margin-top: 8px; }
/* スマホの今週：今月の成果報告を「今週声をかける人」「運営の作業」のすぐ下に回す（右の列の残りは、今までどおりKPIの下：AA-R8-03） */
@media (max-width: 899px) {
  .a-home .a-side:has(> .a-rpd) { display: contents; }
  .a-home .a-side:has(> .a-rpd) > .a-sec { order: 3; }
  /* すぐ上の「右の列の節は order: 3」より強い指定にする（:has を含む方が強いので、同じ :has を付ける） */
  .a-home .a-side:has(> .a-rpd) > .a-rpd { order: 1; border-top: 1px solid var(--rule); padding-top: var(--sec-y); }
  .a-home .a-side:has(> .a-rpd) > .a-rpd + .a-sec { border-top: 0; padding-top: var(--sec-y); }
}

/* ---------- 12回目の採点し直しの直し（review8） ---------- */
/* わたしの頁：保存できなかった欄のある行は、閉じていても「直すところがあります」（アイコンと誤りの色） */
.fold--error .fold-ico { background: var(--error-bg); color: var(--error); }
.fold-val--error { display: flex; align-items: center; gap: 4px; font-weight: 500; color: var(--error); }
.fold-val--error svg { flex: none; width: 14px; height: 14px; stroke-width: 1.5; }
/* 数字のタイルが節の最後のときは、タイルの下の罫が節の区切りを兼ねる（罫を28pxの間で2本並べない：AS-R8-03） */
.sec:has(> .stats:last-child) { padding-bottom: 0; }
.sec:has(> .stats:last-child) + .sec::before { content: none; }
/* ホームの棚の札：頭の絵の段を64pxにそろえ、数字の線を札ごとに同じ高さにする（AS-R8-04） */
.card { display: grid; grid-template-rows: 64px auto auto auto 1fr; justify-items: start; align-content: start; }
.card > :first-child { align-self: end; }
.card > .bar { justify-self: stretch; align-self: start; }
.card .card-quote + .card-note { align-self: start; }
.card-label.bx { text-wrap: balance; }
.seals--dated .seal-name { color: var(--ink); font-weight: 500; }
/* 振り返りの1問ずつ：2問目からは、頭の写真と2文を出さず、流れの図から（問いを画面の上に：AS-R8-06） */
form.is-stepped:has(.step.is-current:not([data-step="1"])) > .sec--tight > :is(.art, .lead) { display: none; }
/* 横にめくる棚：焦点の輪の上の辺が切れないよう、上に4pxあける（見た目の位置は上の外の余白で戻す：AY-R8-03） */
.shelf { padding-top: 4px; margin-top: -2px; }
/* マウスの画面（パソコン）では、棚を折り返して並べる（ホイールでは横に送れないため：AS-R8-07）。指の端末は横の棚のまま */
/* 折り返して並べるのは、マウスの画面と、列が紙面の幅（520px）になる700px以上の画面（タブレットで棚が列の右の端で札を切り、右に104pxの白が残った：13回目の直し AS-R9-01） */
/* マウスの画面でも、窓が560pxより狭いときは指の画面と同じ横の棚（3列の札が88〜109pxになり、字がはみ出した：R10-05） */
@media (hover: hover) and (pointer: fine) and (min-width: 560px), (min-width: 700px) {
  .shelf { margin: 0; padding: 4px 0 0; overflow: visible; scroll-snap-type: none; }
  .shelf-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: auto; }
  .shelf-item, .shelf-item--event, .shelf-item--quote { width: auto; }
  .shelf-item--quote { grid-column: 1 / -1; order: 1; }
  .shelf--wide .shelf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 3か月前のあなた（最後の段の全幅の札）は、前の段の残りの列を埋める（7枚・8枚の人の最後の段に穴を作らない：AS-R9-10） */
  .shelf-list:has(> :nth-child(3n+2):last-child) > .shelf-item--quote { grid-column: span 2; }
  .shelf-list:has(> :nth-child(3n):last-child) > .shelf-item--quote { grid-column: span 1; }
}
/* 横に送る棚の最後の札は、右の端にそろえて止める（Tab で来たときも最後の札の全体が見える：AY-R9-04） */
.shelf-item:last-child { scroll-snap-align: end; }
/* あゆみの切り替え：選んでいる見方は、下のタブと同じく太い字と、部品の境目の色の枠（3:1。AY-R8-07） */
.seg-a[aria-current='page'] { font-weight: 700; box-shadow: 0 0 0 1px var(--rule-strong); }
/* 運営の表の先頭の列の名前のリンク：焦点の輪を内側に描く（表の箱で左の辺が切れない：AY-R8-10） */
.table-wrap :is(th, td):first-child a:focus-visible { outline-offset: -2px; }
.table-wrap :is(th, td):first-child a { padding-inline: 2px; margin-inline: 0; }
/* 320pxの狭い画面：タイルの名前を詰めて「週報フィードバック」を1行に、次の集まりの行の動きを種類と会場の下へ（語の途中・中黒の前で折らない：CP-R8-05） */
@media (max-width: 359px) {
  .stat-head { gap: 6px; }
  .stat-label { letter-spacing: 0; }
  .sec .event--art > .event-meta { grid-column: 2 / -1; }
  .sec .event--art > .event-act { grid-column: 2 / -1; grid-row: 4; justify-self: start; margin-top: 4px; }
}
/* 文字だけを大きくしたときも、次の集まりの行の動きを下の行へ回し、文字ボタンの言葉を折れるようにする（頁を横に広げない：AY-R8-06） */
@container (max-width: 19em) {
  .sec .event--art > .event-meta { grid-column: 2 / -1; }
  .sec .event--art > .event-act { grid-column: 2 / -1; grid-row: 4; margin-top: 4px; }
  .sec .event--art > .event-act > .btn--text { white-space: normal; text-align: left; margin-block: 0; }
  /* 任意の3問の「選んだ数と言葉｜選んだのを外す」は、文字が大きいときは2段に（「4 わ／りと」と語の途中で折らない：R10-04） */
  .scale-foot { flex-wrap: wrap; }
}
/* 参加した集まりの行の頭：種類のアイコン（写真を何度も並べない：AS-R8-09）。行の頭の大きさは、ほかの行の32pxにそろえる */
.row > .row-kind { flex: none; width: 32px; height: 32px; }
.row > .row-kind svg { width: 16px; height: 16px; }
/* ホーム画面に追加の案内の、追加したあとのログインの手順（畳む） */
details.help.install-note { margin-top: 4px; }

/* ---------- Discord の XP（あゆみの「称号」とホームの札。2026-10-23：Discord の XP の仕組みと連携） ----------
   本人の積み上げだけを見せる（順位・ほかの人のXPは出さない）。いまの称号のバッジと名前を大きく、次の称号までの棒、今月と連続記録のタイル、8段階の一覧 */
.xp-head { display: flex; align-items: center; gap: 16px; }
.xp-head-body { min-width: 0; }
.xp-kicker { font-size: var(--fs-small); color: var(--ink-2); }
.xp-name { margin-top: 2px; font-family: var(--font-mincho); font-weight: 700; font-size: 26px; line-height: 1.3; color: var(--navy); font-feature-settings: 'palt' 1; }
.xp-total { margin-top: 4px; }
.xp-num { font-family: var(--font-mincho); font-weight: 700; font-size: 22px; color: var(--navy); font-variant-numeric: tabular-nums lining-nums; }
.xp-next { margin-top: 18px; }
.xp-next .bar { margin-top: 8px; }
.tiers { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.tier { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule-ledger); }
.tier-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tier-name { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; font-weight: 500; font-size: 15px; color: var(--ink-2); }
.tier.is-on .tier-name { color: var(--navy); }
.tier-xp { font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tier-perk { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.tier-valid { font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.tier-on { font-size: var(--fs-small); font-weight: 500; color: var(--navy-2); }
/* まだ届いていない段は灰色の字（届いた段の濃紺と、色と言葉の両方で分ける：R9-03・R9-05） */
.tier-on--yet { font-weight: 400; color: var(--ink-2); }
.dots-list { list-style: none; padding: 0; margin: 0; }
.dots-list li { position: relative; margin-top: 6px; padding-left: 14px; font-size: 14px; line-height: 1.7; }
.dots-list li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); }
/* 取り込み・設定：ノートでの行動に付ける XP の量（ようこその手紙の下。枠線の無い組） */
.set-xp { margin: 24px 0 0; padding: 0; border: 0; min-width: 0; }
.set-xp > legend { padding: 0; }
/* 4つの見方（Discord の XP が届いた人のあゆみ：記録・節目・出来事・称号）は1段に並べる。狭い幅では字と絵の間を詰め、359pxまではアイコンを外す */
.seg-list:has(> li:nth-child(4)) .seg-a { gap: 4px; font-size: 13px; }
@media (max-width: 359px) { .seg-list:has(> li:nth-child(4)) .seg-a svg { display: none; } }
/* 13回目の直し：称号の頁（XPの数の横の「Discordの称号」・今月のXP・畳んだ「その先の称号」・XPが付くことの小見出し） */
.xp-src { display: inline-block; margin-left: 10px; font-size: var(--fs-small); color: var(--ink-2); }  /* 前の「XP」との間に折れ目を作る（文字2倍の320pxで「XP Discord」がつながって列からはみ出した：R10-04） */
.xp-month { margin-top: 2px; font-size: var(--fs-small); font-weight: 500; color: var(--navy-2); }
.tiers-more { margin-top: 4px; }
.tiers-more > .tiers { border-top: 0; }
.xp-rules-h { margin-top: 12px; }
.xp-rules-h:first-child { margin-top: 0; }
/* 振り返りの任意の3問の開く行：言葉と答えた数を折り返せる塊にする（1行401pxで頁が横に流れた：R9-01） */
.sdt-sum { flex-wrap: wrap; white-space: normal; justify-content: flex-start; text-align: left; line-height: 1.4; padding-block: 10px; column-gap: 8px; }
.sdt-count { font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); }
/* 320px の表紙：朝のあいさつが右の端まで1行で伸び、重ねの無い明るい景色に載る（モルディブの日に2.68:1）。374px以下だけ、横の重ねを右の端まで薄く残す（13回目の直し AY-R9-01） */
@media (max-width: 374px) {
  .cover .cover-photo--world::after { background: linear-gradient(90deg, rgba(14, 47, 71, 0.34) 0%, rgba(14, 47, 71, 0.26) 60%, rgba(14, 47, 71, 0.16) 100%), linear-gradient(180deg, rgba(14, 47, 71, 0.50) 0%, rgba(14, 47, 71, 0.32) 45%, rgba(14, 47, 71, 0.10) 72%, rgba(14, 47, 71, 0.16) 100%); }
}
/* 強制色（Windows のコントラスト テーマ）：選んだ状態をシステムの色で見せる（ふだんの見た目は変わらない：AY-R9-02） */
@media (forced-colors: active) {
  .check input, .check-item input, .check-arc input { -webkit-appearance: auto; appearance: auto; }
  .scale label::before { forced-color-adjust: none; border-color: transparent; }
  .scale label:has(input:checked)::before { border: 3px solid Highlight; }
  .chip--plan:has(input:checked)::after { forced-color-adjust: none; background: Highlight; }
  .seg-a[aria-current='page'] { outline: 2px solid CanvasText; outline-offset: -2px; }
  .bar { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
  .bar > i { forced-color-adjust: none; background: Highlight; }
}
/* 13回目の直し：タイルの3段（頭・数・補足）を同じ段の升でそろえる（名前が2行に折れても、となりの升の数の線がずれない：AS-R9-07） */
.stats { grid-auto-rows: auto; }
.stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
/* 足あと：700px以上は38pxで1段に12個（約3か月の区切り。768・1280で11＋1にならない：AS-R9-08） */
@media (min-width: 700px) { .stamps { grid-template-columns: repeat(auto-fill, 38px); gap: 8px 4px; } .stamp { width: 38px; height: 38px; } }
/* 仲間の絵（舟の群れ）は、帯の形に切り抜いて左の線にそろえる（絵の上下に約45pxの白が残り、左へ10〜12px出ていた：AS-R9-11） */
.spot.spot--band { width: 168px; aspect-ratio: 480 / 170; object-fit: cover; object-position: 50% 52%; margin-left: 0; }
.card .card-spot.card-spot--band { width: 100%; max-width: 100px; height: 36px; aspect-ratio: auto; object-fit: cover; object-position: 50% 52%; margin: 10px 0 18px 0; }  /* 狭い列（マウスの端末の3列）では列の幅まで縮める */
/* 集まりのアーカイブの札：「アーカイブは準備中です」を、となりの札の「見返す」と同じ44pxの行の真ん中に（AS-R9-15） */
.ecard-act > .caption { padding-top: 0; min-height: 44px; display: flex; align-items: center; }
/* 成果報告の日の札（375以下）：「Discordで書く」を面の幅いっぱいに、「書きました」はその下で左の線に（AS-R9-17） */
@media (max-width: 389px) { .report .btns > .btn:not(.btn--text) { flex: 1 1 100%; } }
/* 受講生の一覧の絞り込み（8つの欄）：PCでは格子にして、どの段も左右の端をそろえる（幅のばらばらな2行に割れた：13回目の直し AA-R9-03） */
@media (min-width: 900px) {
  .filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: 8px; }
  .filters .input { min-width: 0; }
  .filters .select { width: 100%; }
  .filters .btn { justify-self: start; }
}
/* 取り込み・設定の「DiscordのXP」：名前・状態の札・時刻の1行（今週の「取り込み」の札の行と同じ形）と、数の表 */
.xp-bridge { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule); }
.xp-bridge-row { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 10px; row-gap: 4px; margin-bottom: 6px; }  /* 札と時刻は1段目の名前の行にそろえる（2行の真ん中に浮かせない：R10-05） */
.xp-bridge-name { display: flex; flex-direction: column; font-weight: 500; font-size: 15px; }
/* 設定のXPの量：まとめの言葉は太く、2桁の数の欄は短く、後ろに単位（AA-R9-15） */
.set-xp > legend { font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.set-xp-ctl { display: inline-flex; align-items: center; gap: 6px; }
.set-xp .input { width: 7em; }
/* カルテの「DiscordのXP」：称号のバッジと名前・付けてほしいXPの行（言葉と状態｜XP） */
.xp-kv-tier { display: flex; align-items: center; gap: 8px; }
.xp-grants-h { margin: 16px 0 4px; }
.xp-grant { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.xp-grant-xp { font-family: var(--font-mincho); font-weight: 700; color: var(--navy); white-space: nowrap; text-align: right; }
/* スマホの今週：運営の作業の最後の行の罫を消し、次の節の頭の罫1本を区切りにする（2本並べない：AA-R9-11） */
@media (max-width: 899px) { .a-home .a-left > .a-sec:last-child .out > .out-row:last-child { border-bottom: 0; } }

/* ---------- 14回目の直し（2026-10-23） ---------- */
/* 称号のバッジ（金属のメダル）は、色を全部抜くと銀に見えてシルバーと見分けがつかない。届いていない段は色を少しだけ残して淡く（節目のバッジは今のまま：R10-01） */
.badge--muted > img[src*="/badge_tier_"] { filter: grayscale(0.35); opacity: 0.6; }
/* 縦の低いスマホ（iPhone SE・mini など。縦600〜760px）のホームは、白い頁の重なりを64pxに（120pxでは景色の見える帯が24pxになり、景色が白い頁の裏に隠れた：R10-02）
   320×568 は入れない（重なりを減らすと、一歩の「できた」が下のタブの裏に入る） */
@media (max-width: 767px) and (min-height: 600px) and (max-height: 760px) {
  .app:has(.cover-hello) { --cover-overlap: 64px; }
}
/* 題のある表紙（ログイン・コード・入口）は、題が右の端まで1行に伸びるので、横の重ねを右の端まで0.22残す（パリの日にエッフェル塔の灯りの上で2.86:1だった→3.7:1以上：R10-03） */
.app:has(.cover-title) .cover .cover-photo--world::after { background: linear-gradient(90deg, rgba(14, 47, 71, 0.34) 0%, rgba(14, 47, 71, 0.28) 60%, rgba(14, 47, 71, 0.22) 100%), linear-gradient(180deg, rgba(14, 47, 71, 0.50) 0%, rgba(14, 47, 71, 0.32) 45%, rgba(14, 47, 71, 0.10) 72%, rgba(14, 47, 71, 0.16) 100%); }
/* 折り返した棚で、3か月前の札が1列に縮んだとき（札が3n枚の人）は、ベスト1の字を1段小さく（「リールを」だけの行を作らない：R10-04） */
@media (hover: hover) and (pointer: fine) and (min-width: 560px), (min-width: 700px) {
  .shelf-list:has(> :nth-child(3n):last-child) > .shelf-item--quote .card-quote { font-size: 14px; letter-spacing: 0; }
}
/* はじめの30日の済んだ行を畳んだ所（R10-08） */
details.onb-done { margin-top: 4px; }
details.onb-done > .todo:first-of-type { margin-top: 4px; }
/* 日程を変える欄の段の区切り（1段目「新しい予定日｜連絡を受けた日」、2段目「場所｜保存」：R10-04） */
.svc-form > .svc-break { flex-basis: 100%; height: 0; }
/* 取り込み・設定のXPの2段目は、ほかの取り込み元と同じ小さな副の字（名前より強く見せない：R10-05） */
.xp-bridge-name .t-sub { font-size: 12px; font-weight: 400; color: var(--ink-2); }
/* カルテのXP：称号の行は、言葉を28pxのバッジの行の真ん中にそろえる・最後の付けてほしいXPは下の罫を引かない・付いていないXPの数は弱く（R10-06） */
.kv > div:has(> .xp-kv-tier) { align-items: center; }
.a-sec > .xp-grant:last-child { border-bottom: 0; padding-bottom: 0; }
.xp-grant--off .xp-grant-xp { font-family: var(--font-gothic); font-weight: 400; font-size: var(--fs-small); color: var(--ink-2); }
/* 受講生の一覧（スマホ）：長い言葉の入る「絞り込み」「並べ替え」の欄は1段の幅（「並べ替え：会員」で切れていた：R10-01） */
@media (max-width: 899px) {
  .filters .select[name='flag'], .filters .select[name='sort'] { flex-basis: 100%; }
  /* JSがあるとき、何も選んでいなければ6つの欄を畳む（app.js の filtersFold。JSが無いときは今までどおり全部出す：R10-09） */
  .filters.is-folded .select { display: none; }
  .filters-toggle { flex: 1 1 100%; justify-content: flex-start; }
}
@media (min-width: 900px) { .filters-toggle { display: none; } }

/* ---------- 集めるバッジ（あゆみの「節目」。2026-10-24 たいがさん「最初から全てのバッジを表示しておいて、GETしたら色がつくように」） ----------
   まとまり（講義・集まり・成果報告・振り返りと一歩・発信の成果）ごとに、見出し・集め方の一文・全部のバッジ・行き先。届いていないバッジは色を抜く（.badge--muted） */
.collect { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.collect-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.collect-head h3 { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--font-mincho); font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: 0.04em; color: var(--navy); }
.collect-head .count { font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; }
.collect-how { margin: 8px 0 16px; font-size: var(--fs-small); line-height: 1.7; color: var(--ink-2); }
.collect .btns { margin-top: 14px; }
/* 届いていないバッジの名前は淡く（届いたものは .seals--dated の濃い字）。残りは「あと◯本」と細い棒 */
.seals--dated .seal-item.is-todo .seal-name { color: var(--ink-2); font-weight: 400; }
.seal-left .bar { margin-top: 6px; }