/* web版の見た目。**アプリと同じ取り決めを使う。**

   色も角も、思いつきで決めない。アプリ側で理由を書いて決めたものが
   `App/Shared/DesignSystem.swift` と `App/Sources/Model.swift`(`enum K`)、
   `App/Sources/SemesterGrid.swift` にあるので、そこから写す。
   写した先は各所のコメントに書いてある。

   画面の作りは、実機を開いて突き合わせた ——
   薄灰の地に**白いカードを枠なしで**並べ、節の見出しは濃青のしるし＋太字、
   下に浮いたタブのカプセル、各タブの上に大きな題。 */

:root {
  /* 京都大学のスクールカラー「濃青」。PANTONE 281C / sRGB #00205B。
     出典は京都大学ビジュアル・アイデンティティ ガイドブック(2018-10-01 版)。 */
  --brand: #00205b;
  --on-brand: #fff;
  /* **字にするときの濃青。** `--brand` は「地」と「白字の下地」を兼ねる色で、
     暗い側では両方向のコントラストが釣り合う明るさ(#4F7FD1)に置いてある。
     その値を暗い地の**字**に使うと 3.5〜4.3:1 で、本文の 4.5:1 に届かない。
     **色相 218° は動かさず**、明るさだけ上げた値を字用に別に持つ。 */
  --brand-ink: #00205b;
  --screen: #f2f2f2;       /* Theme.screenBG */
  --card: #fff;            /* Theme.cardBG */
  --fill: #e8e8e8;         /* Theme.fill */
  --sep: #dcdcdc;          /* Theme.sep */
  --axis: #ececec;         /* Theme.axis */
  --ink: #1c1c1e;
  /* **いちばん薄い字がこれ。** これ以上薄い灰色(#8e8e93 など)は地に対して
     2.9:1 しか出ず、WCAG AA の本文 4.5:1 に届かない。断り書きも出典も文章
     なので、薄くしてよい理由が無い。 */
  --sub: #6c6c70;
  /* 軸の見出し。地が --axis(#ececec)と明るいので、--sub では 4.2:1 で足りない。 */
  --axis-ink: #5c5c60;
  --warn: #a25f00;         /* Theme.warn */
  --danger: #db0c00;       /* Theme.danger */
  --danger-fill: #ed0d00;  /* Theme.dangerFill。休講の札 */
  --good: #217e39;         /* Theme.good */
  --radius: 14px;          /* カードの角。アプリ中どこでも同じ値(Radius.card) */
  --radius-lg: 18px;       /* 一覧のカード。実機がこのくらい */
  --gutter: 42px;          /* 時限の見出しの幅。時刻を2行で出すぶん要る */
  /* 今日の列の薄い色掛け。アプリの `Brand.blue.opacity(0.04)`。 */
  --today-wash: #f4f6fb;
  --tab-sel: #e4e8f0;      /* タブの選択中の下地 */
  --toast-act: #9ec3ff;    /* 札の「取り消す」。暗い札の上の字 */
  --sat: #d00b32;          /* 土曜(青)と日曜(赤)。カレンダーの曜日 */
  --sun: #c8102e;
  --sat-ink: #1f4f9c;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* **濃青をそのまま暗い地に出さない。** 黒地に #00205B は輝度差が 1.2 しか
       無く、文字にすると読めない。色相 218° を保ったまま明るさを合わせた
       #4F7FD1 を使う(`Brand.blue` の注釈)。 */
    --brand: #4f7fd1;
    --on-brand: #0b1220;
    --brand-ink: #6e96dc;
    --screen: #111;
    --card: #1b1b1b;
    --fill: #2c2c2c;
    --sep: #333;
    --axis: #242424;
    --ink: #f2f2f7;
    --sub: #98989d;
    --axis-ink: #a5a5aa;
    --warn: #ff9f0a;
    --danger: #ff453a;
    --good: #30d158;
    --today-wash: #161a22;
    /* 選んでいるタブの下地。**#2a3140 では足りなかった** ——
       その上に載る --brand-ink(#6e96dc)が 4.38:1 で、本文の 4.5:1 を割る。
       地のほうを一段落として 4.63:1 にする(カプセルの地 #1b1b1b とは
       まだ見分けが付く)。 */
    --tab-sel: #262c39;
    --toast-act: #1f4f9c;
    --sun: #ff6961;
    --sat-ink: #7ab0ff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* **字の大きさは利用者の設定に追う**(HIG の Dynamic Type)。
   `--u` は「既定の設定で 1px になる長さ」。字は `calc(N * var(--u))` で書く。
   既定の設定では今までと同じ大きさで、ブラウザや OS で字を大きくすると一緒に大きくなる。
   - 他のブラウザ: 根の字(既定 16px)に追う。
   - iOS/iPadOS の Safari: `-apple-system-body` で OS の「文字サイズ」が取れる(既定 17px)。
   **例外は時間割の升目・軸と下のタブ。** 5列を画面の幅に収めるのが先で、
   升目の字はアプリ(`SemesterGrid`、8〜9.5pt)より小さくはしていない。 */
:root { --u: calc(1rem / 16); }
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
  :root { --u: calc(1rem / 17); }
}

body {
  margin: 0;
  background: var(--screen);
  color: var(--ink);
  font: calc(15 * var(--u))/1.55 -apple-system, BlinkMacSystemFont, "Hiragino Sans",
        "Noto Sans JP", "Yu Gothic", sans-serif;
}

button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.app {
  /* ノッチのある端末で、上下の帯が切れないように。 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           0 env(safe-area-inset-left);
}

/* ── 上の帯(タブごとの題) ─────────────────────────────────
   アプリの Navigation と同じ組み方。左右に丸いボタンが浮き、その下に大きな題。 */

header#nav {
  max-width: 1180px; margin: 0 auto; padding: 10px 16px 0;
}
.nav-actions {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 38px; gap: 8px;
}
.nav-left, .nav-right { display: flex; gap: 8px; align-items: center; }
/* ロゴ。アイコンは白地の角丸、名前は字で(記号だけにしない)。 */
.brand {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 800; letter-spacing: .06em; color: var(--ink);
}
.brand img { width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto; }
/* 狭い画面は上の帯の中央。左右のボタンの幅に関わらず真ん中に置く。 */
.nav-actions { position: relative; }
.nav-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.nav-btn {
  background: var(--card); border: 0; border-radius: 999px;
  width: 38px; height: 38px; display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--brand-ink); box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
/* **押せる場所は44px。** 見た目は38pxのままで、当たりだけ広げる。
   実機は同じことを `.frame(width:44,height:44).contentShape(...)` でやっている
   (「記号だけを的にすると12ptの当たりになる」)。隣との隙間は8pxあるので、
   左右に3pxずつ伸ばしても押しどころは重ならない。 */
.nav-btn { position: relative; }
.nav-btn::after { content: ""; position: absolute; inset: -3px; border-radius: 999px; }
.nav-btn.wide { width: auto; padding: 0 14px; font-size: calc(13.5 * var(--u)); font-weight: 600; }
@media (hover: hover) { .nav-btn:hover { background: var(--fill); } }
.nav-btn svg { width: 20px; height: 20px; }
/* 右上の ⋯ の一覧。アプリの Menu と同じく、押したボタンの下に右揃えで開く。 */
.more-menu { position: relative; }
.more-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 200px; padding: 6px; background: var(--card);
  border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0,0,0,.16);
}
.more-list[hidden] { display: none; }
.more-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 10px; background: none;
  color: var(--ink); font: inherit; font-size: calc(15 * var(--u)); text-align: left;
}
.more-item svg { width: 18px; height: 18px; color: var(--brand-ink); flex: 0 0 auto; }
@media (hover: hover) { .more-item:hover { background: var(--fill); } }

.large-title {
  font-size: clamp(calc(26 * var(--u)), 6.4vw, calc(34 * var(--u))); font-weight: 700; letter-spacing: -.02em;
  margin: 6px 0 14px; line-height: 1.15;
}
/* 大きな題のすぐ下に出す一行(いまは学期)。実機の `semesterLine` と同じ重さ。 */
.page-sub {
  margin: -8px 0 12px; font-size: calc(13 * var(--u)); font-weight: 500; color: var(--sub);
}
.page-sub:empty { display: none; }

/* 検索タブだけは小さい中央の題。実機がそうなっている。 */
header#nav.inline .large-title {
  font-size: calc(17 * var(--u)); font-weight: 700; text-align: center; margin: 2px 0 14px;
}

main {
  max-width: 1180px; margin: 0 auto;
  /* 下のタブのぶんを空ける。**浮いたカプセルの下に中身を潜らせない。** */
  padding: 0 16px calc(104px + env(safe-area-inset-bottom));
}

/* ── カード ───────────────────────────────────────────────
   **枠は引かない。** 実機は薄灰の地に白いカードを置くだけで、
   境目は明るさの差で出している。枠を足すと線が一段増える。 */

.card {
  background: var(--card); border-radius: var(--radius-lg);
  overflow: hidden;
}
.sec { margin: 22px 0 0; }
.sec:first-child { margin-top: 0; }
.sec-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 4px 8px; font-size: calc(16 * var(--u)); font-weight: 700;
}
.sec-title svg { width: 19px; height: 19px; color: var(--brand-ink); flex: 0 0 auto; }
.sec-title .more {
  margin-left: auto; font-size: calc(13.5 * var(--u)); font-weight: 600; color: var(--brand-ink);
  background: none; border: 0; padding: 2px 4px;
}

/* カードの中の行。題＋副題＋山かっこ。 */
.row-link {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; background: none; border: 0; text-align: left;
  color: inherit; text-decoration: none;
}
.row-link + .row-link { box-shadow: inset 0 1px 0 var(--sep); }
@media (hover: hover) { .row-link:hover { background: var(--fill); } }
.row-link .rl-body { flex: 1 1 auto; min-width: 0; }
.row-link .rl-t { display: block; font-size: calc(15.5 * var(--u)); font-weight: 600; }
.row-link .rl-s { display: block; font-size: calc(12.5 * var(--u)); color: var(--sub); margin-top: 2px; }
.row-link .chev { flex: 0 0 auto; color: var(--sub); font-size: calc(17 * var(--u)); line-height: 1; }
.row-link .lead { flex: 0 0 auto; color: var(--brand-ink); display: flex; }
.row-link .lead svg { width: 20px; height: 20px; }
/* 選択行。欄を行いっぱいに透明で重ね、行のどこを押しても開く。値は字で出す。 */
.select-row { position: relative; cursor: pointer; }
.select-row .rl-v {
  flex: 0 1 auto; max-width: 58%; min-width: 0; text-align: right;
  color: var(--brand-ink); font-weight: 600; font-size: calc(15 * var(--u));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  cursor: pointer; font-size: 16px; /* 16px 未満だと iOS が拡大する */
  -webkit-appearance: none; appearance: none;
}
.select-row:focus-within { box-shadow: inset 0 0 0 2px var(--brand); }


.card-note { padding: 16px 14px; margin: 0; color: var(--sub); font-size: calc(13.5 * var(--u));
             line-height: 1.7; text-align: center; }
.card-note b { display: block; color: var(--ink); font-size: calc(15 * var(--u)); margin-bottom: 4px; }

/* ── 下のタブ(浮いたカプセル) ─────────────────────────────
   iOS 26 の形。**画面の底に貼り付けない** —— 左右と下に余白を持って浮く。 */

.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; gap: 2px; padding: 6px;
  background: var(--card); border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
  z-index: 40; max-width: calc(100vw - 24px); overflow: hidden;
}
/* 下の中身を透かす(iOS 26 のタブの形)。**透明度を下げる設定では、今までの不透明に戻す。** */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar {
    background: color-mix(in srgb, var(--card) 80%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .tabbar { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.tab {
  background: none; border: 0; border-radius: 999px;
  padding: 6px 12px 5px; min-width: 62px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--ink); font-size: 10.5px; font-weight: 600; line-height: 1.1;
}
/* **押せる場所を44pxにする。見た目は触らない。**
   札の余白を増やすと、選ばれた札の座布団まで伸びてカプセルの縁に触れる。
   当たりだけを上下へ伸ばす。伸ばす先はカプセルの余白(6px)の中なので、
   カプセルからははみ出さない。 */
.tab { position: relative; }
.tab::after { content: ""; position: absolute; inset: -6px 0; }
.tab svg { width: 22px; height: 22px; }
.tab span { white-space: nowrap; }

/* 狭い画面。**札を2行に折らない。**
   「カレンダー」「マイページ」が折れると、タブの高さが揃わず、
   カプセルが画面の幅いっぱいまで育つ(実際そうなった)。 */
@media (max-width: 430px) {
  /* **5つを等幅に。** 字の長さで幅を決めると「課題」「検索」が 34px しか無く、
     44px の的に届かなかった。カプセルを画面の幅に合わせ、1つ 56px 以上にする。 */
  .tabbar { padding: 5px; gap: 0; width: calc(100vw - 24px); max-width: 400px; }
  .tab { flex: 1 1 0; min-width: 56px; padding: 5px 2px 4px; font-size: 10.5px; }
  .tab svg { width: 20px; height: 20px; }
  .tab .badge { transform: translate(14px, -3px); }
  /* 狭い画面はカプセルの余白が 5px。 */
  .tab::after { inset: -5px 0; }
}
.tab[aria-current=page] { background: var(--tab-sel); color: var(--brand-ink); }
@media (hover: hover) { .tab:hover { background: var(--fill); } }
@media (hover: hover) { .tab[aria-current=page]:hover { background: var(--tab-sel); } }
/* 未完了の課題の数。タブの上に小さく。 */
.tab .badge {
  position: absolute; transform: translate(16px, -4px);
  background: var(--danger-fill); color: #fff; font-size: 9.5px; font-weight: 700;
  min-width: 15px; height: 15px; border-radius: 999px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── PC では左の列 ──────────────────────────────────────────
   **幅だけで決めない。** 広い画面で、指ではなくマウスで操作するときだけ。
   スマホのブラウザと iPad(指で触る)は下のカプセルのまま。
   境目の 980px は右の欄(`.two-col`)を出す幅と揃える。
   列は左端に置き、上の帯はその右から始める —— 重ならない。
   **畳まない。** 項目は5つだけなので、Gmail や Google カレンダーのように出したままにする。

   形は Google カレンダーと Gmail に倣う(2026-09-28)。
   - **列を地と同じ色にし、線も引かない。** 前は地より一段暗い帯に区切り線を引き、頭に小さな灰色のロゴを置いていたが、
     作り物めいて見えると却下された。
   - 頭にロゴを大きめに置き、上の帯(題とボタン)と同じ高さ(64px)にそろえる。
   - 札は左端に付けて右だけ丸めた帯(Gmail)。選んでいる札は薄い濃青の地に太字。
     課題の件数は赤い丸にせず、行の右端に数字だけ(Gmail の未読の数)。
   - その下に小さな月のカレンダー(`renderMiniCal`)。日を押すとカレンダータブのその日を開く。 */
.rail { display: contents; }
.rail-brand, .mini-cal { display: none; }
@media (min-width: 980px) and (hover: hover) and (pointer: fine) {
  .app { padding-left: 256px; }
  main { padding-bottom: 40px; }
  /* **画面の高さいっぱいの列。** 巻いても動かない。中身が画面より高ければ列の中で巻く。 */
  .rail {
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 0; bottom: 0; width: 256px; z-index: 40;
    padding: 0 16px 16px 0; overflow: auto; background: var(--screen);
  }
  .rail-brand { display: flex; align-items: center; flex: 0 0 64px; padding-left: 22px; }
  .rail-brand .brand { gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: .03em; }
  .rail-brand .brand img { width: 32px; height: 32px; border-radius: 8px; }
  .tabbar {
    position: static; transform: none; width: auto; max-width: none;
    flex-direction: column; gap: 0; padding: 8px 0 0; overflow: visible;
    background: none; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .tab {
    flex-direction: row; justify-content: flex-start; gap: 18px;
    height: 40px; padding: 0 16px 0 26px; min-width: 0;
    font-size: 14px; font-weight: 500; border-radius: 0 999px 999px 0;
  }
  .tab[aria-current=page] { font-weight: 700; }
  .tab::after { inset: 0; }
  .tab svg { width: 20px; height: 20px; }
  .tab .badge { position: static; transform: none; margin-left: auto; min-width: 0; height: auto;
                padding: 0; background: none; color: inherit; font-size: 12.5px; font-weight: 700; }

  /* 小さな月のカレンダー。 */
  .mini-cal { display: block; margin: 20px 0 0; padding: 0 0 0 18px; }
  .mc-head { display: flex; align-items: center; gap: 2px; padding: 0 0 6px 8px; }
  .mc-mo { flex: 1 1 auto; font-size: 14px; font-weight: 600; }
  .mc-flip {
    width: 28px; height: 28px; border: 0; border-radius: 999px; background: none;
    color: var(--ink); font-size: 18px; line-height: 1; display: inline-flex;
    align-items: center; justify-content: center;
  }
  .mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
  .mc-wd { text-align: center; font-size: 11px; font-weight: 600; color: var(--sub); line-height: 24px; }
  .mc-day {
    position: relative; justify-self: center; width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: 999px; background: none; color: var(--ink);
    font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums;
  }
  .mc-day.out { color: var(--sub); }
  .mc-day.sel { background: var(--tab-sel); color: var(--brand-ink); font-weight: 700; }
  .mc-day.today { background: var(--brand); color: var(--on-brand); font-weight: 700; }
  .mc-dot {
    position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px;
    border-radius: 999px; background: var(--brand);
  }
  .mc-day.today .mc-dot { background: var(--on-brand); }
  @media (hover: hover) {
    .mc-flip:hover, .mc-day:not(.today):not(.sel):hover { background: var(--fill); }
  }

  /* 上の帯のボタン。**影を付けた白い丸をやめる**(Google カレンダーの「今日」と同じ、細い縁の字のボタン。
     記号のボタンは縁も地も無し)。 */
  .nav-btn { background: none; box-shadow: none; }
  .nav-btn.wide { border: 1px solid var(--sep); height: 36px; }
}

/* ── PC の画面の使い方(2026-09-27、Google カレンダーに倣う) ──────────
   **余白で埋めない。** 前は中身を 1180px の幅に収めて中央に寄せ、表は1マス 84px で止めていたので、
   広い画面では四方に大きな空きが残った。PC では
   - 中身を横いっぱいに使う(左の列の右から、右端の 24px 手前まで)。
   - 上の帯を1行にする: 題 → 右端にボタン。大きな題は2段目に置かない。
   - 時間割の表は画面の下端まで伸ばし、5つの時限で高さを分け合う。
     右の欄(今日の授業・候補)は表と同じ高さで止め、中で巻く —— 候補が長くても表が伸びない。 */
@media (min-width: 980px) and (hover: hover) and (pointer: fine) {
  .app { min-height: 100dvh; display: flex; flex-direction: column; }
  header#nav {
    max-width: none; width: 100%; margin: 0; padding: 0 24px 0 8px; min-height: 64px;
    display: flex; align-items: center; gap: 16px;
  }
  header#nav .nav-actions { display: contents; }
  /* PC のロゴは左の列の頭にあるので、上の帯には出さない。 */
  header#nav .nav-brand { display: none; }
  header#nav .nav-left { order: 0; }
  header#nav .large-title,
  header#nav.inline .large-title {
    order: 1; margin: 0; font-size: 22px; text-align: left; letter-spacing: -.01em;
  }
  header#nav .nav-right { order: 2; margin-left: auto; }
  main {
    max-width: none; width: 100%; margin: 0; padding: 0 24px 20px;
    flex: 1 1 auto; display: flex; flex-direction: column;
  }
  #pane-timetable:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  #pane-timetable .two-col { flex: 1 1 auto; align-items: stretch; }
  #pane-timetable .col-main { min-height: 0; }
  #pane-timetable .grid { flex: 1 1 auto; }
  /* 時限の行だけが高さを分け合う。曜日の見出しと集中講義の行は中身の高さのまま。 */
  #pane-timetable .grid > .row:not(:first-child):not(.int-row) { flex: 1 1 0; }
  #pane-timetable .cell { height: auto; min-height: 84px; }
  #pane-timetable .cell .nm { font-size: 13px; }
  /* 右の欄は自分の中身で高さを決めない(`contain: size`)。表の高さに合わせて伸び、あふれたら中で巻く。 */
  #pane-timetable .col-side { contain: size; overflow: auto; }
  /* カレンダー。**左に月の表、右に選んだ日。** 月の表は 560px で頭打ちのまま(下の `.cal-grid`)にし、
     縦に積んで下半分を空けるのをやめる。右は残りの幅を使う。 */
  #pane-calendar:not([hidden]) {
    display: grid; grid-template-columns: 560px minmax(0, 1fr); column-gap: 24px;
    grid-template-rows: auto auto auto 1fr auto; align-items: start;
  }
  #pane-calendar > .cal-head { grid-column: 1; grid-row: 1; }
  #pane-calendar > .cal-grid { grid-column: 1; grid-row: 2 / 5; }
  #pane-calendar > .cal-legend { grid-column: 1; grid-row: 5; }
  #pane-calendar > :not(.cal-head):not(.cal-grid):not(.cal-legend) { grid-column: 2; }
  #pane-calendar > .sec-title { grid-row: 1; margin-top: 0; }
  /* 一覧のタブ(課題・検索・マイページ)は、行が長すぎると目で追えないので前の幅で止める。 */
  #pane-todos, #pane-search, #pane-me { max-width: 1148px; }
}

/* ── 時間割タブ ────────────────────────────────────────── */

.two-col { display: grid; gap: 16px; grid-template-columns: 1fr; }
.col-main { min-width: 0; display: flex; flex-direction: column; }
.col-side { min-width: 0; }
@media (min-width: 980px) {
  .two-col { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
}
/* 右の欄。**見るときは今日の授業、編集中は候補。** 狭い画面では今日の授業を表の下に積み、
   候補は出さない(空きマスを選ぶと検索タブへ送る)。 */
@media (max-width: 979px) { .col-side.picking { display: none; } }
@media (min-width: 980px) { .col-side .today-section { margin-top: 0; } }
.edit-hint { margin: 0 4px 10px; font-size: calc(13 * var(--u)); color: var(--sub); }
.start-card { margin: 0 0 12px; }
.start-card .card-note { padding-bottom: 6px; }
.start-acts { display: flex; gap: 8px; padding: 6px 14px 14px; flex-wrap: wrap; }

/* ── 格子 ───────────────────────────────────────────────
   **アプリの升目の組み方をそのまま持ってくる。**

   地に区切りの色を敷き、行と行のあいだの 1px だけを見せる
   (`VStack(spacing: 1)` / `HStack(spacing: 0)`)。だから**罫線は横だけ**で、
   縦線は1本も引かれない。25マスの四辺すべてに線を走らせると、
   線が中身と注意を奪い合う。 */

.grid {
  background: var(--sep);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column; gap: 1px;
}
.row { display: grid; grid-template-columns: var(--gutter) repeat(5, 1fr); gap: 0; }
.row.int-row { grid-template-columns: var(--gutter) 1fr; }
/* 縦を曜日にしたとき。行の見出しは曜日の1字だけなので細くする(時刻は列の見出しへ移る)。 */
.grid.tr { --gutter: 30px; }
.int-cells { display: flex; gap: 0; }
.int-cells .cell { flex: 1 1 0; min-width: 0; }

/* 軸の見出し。**今日といまの時限は塗りつぶす。**
   淡い色掛けでは見つからなかった、というのがアプリ側の結論。 */
.ax {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--axis); color: var(--axis-ink);
  padding: 3px 2px; min-height: 26px; line-height: 1.15;
}
.ax-t { font-size: 12px; font-weight: 600; }
.ax-s { font-size: 9px; font-variant-numeric: tabular-nums; }
.ax.gut { padding: 4px 1px; }
.ax.on { background: var(--brand); color: var(--on-brand); }
.ax.on .ax-s { opacity: .85; }
/* これから始まる時限 = 縁取りだけ。塗ると進行中と見分けが付かない。 */
.ax.next { box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand-ink); }

/* 升目。**名前は上、教室は下端。**
   名前の箱を伸ばして教室を押し下げる(アプリの maxHeight: .infinity)。
   名前のすぐ下に置くと、行ごとに教室の高さが揃わない。 */
.cell {
  position: relative; display: flex; flex-direction: column;
  width: 100%; text-align: left; height: 84px;
  padding: 3px 5px 3px 7px;          /* アプリと同じ 上下3・右5・左7 */
  border: 0; border-radius: 0; background: var(--card); overflow: hidden;
}
.cell .nm {
  flex: 1 1 auto; min-height: 0;
  font-size: 11.5px; font-weight: 600; line-height: 1.22;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
  /* **長い英単語も折る。** 升目の幅は 60px 前後しかないので、
     "Fundamentals" のような語は折らないと横にはみ出して切れる。 */
  overflow-wrap: anywhere;
}
.cell .rm {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 500; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cell .sub {
  flex: 0 0 auto; font-size: 9.5px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* **地の色の上で字を薄くしない。** 系統色は黒(暗いときは白)の字が乗る
     前提で明るさを取ってある。灰色を置くと 4.0:1、78%に薄めると暗いときに
     16色のうち7色が 4.5:1 を割る(最小 3.46)。
     色は動かさず、大きさと太さだけで段を作る。 */
  color: inherit;
}
/* 升目の中の札。**角は立てない**(`SemesterGrid.chipRadius = 0`)。
   1つのマスの中に角の性格が3種類あると、取り決めが無いことが見えてしまう。 */
.cell .marks {
  flex: 0 0 auto; display: flex; align-items: center; gap: 3px;
  font-size: 8.5px; line-height: 1.3; min-height: 11px;
}
.cell .marks .ab { font-weight: 600; }
.cell .marks .todo {
  margin-left: auto; background: var(--brand); color: var(--on-brand);
  font-weight: 700; min-width: 13px; text-align: center; padding: 0 2px;
}
.cell .marks .cx {
  background: var(--danger-fill); color: #fff; font-weight: 700; padding: 0 3px;
}

/* 塗りの上は必ず黒(暗いときは白)。系統色は L* を揃えて取ってあるので、
   明るいとき最小 8.7:1、暗いとき最小 5.2:1 が保証されている。
   **--ink では足りない**(暗いときの最小が 4.63 まで下がる)。 */
.cell.taken, .cell.int { color: #111; }
@media (prefers-color-scheme: dark) {
  .cell.taken, .cell.int { color: #fff; }
}

/* **系統が無い科目に系統色を当てない。** 16色で色空間が埋まっていて、
   どんな灰色を持ってきてもどれかの系統と近づいてしまう。
   色ではなく、灰色の地と左端の細い線で示す。 */
.cell.nogroup { background: var(--fill); color: var(--ink); }
.cell.nogroup::before, .cell.int::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sub); opacity: .5;
}
/* 枠で塗るときの自由科目(どの枠にも入らないもの)。無彩色の地だけ。左端の帯は系統なしの印なので付けない。 */
.cell.free { background: var(--fill); color: var(--ink); }
.cell.int { height: 58px; }         /* アプリの intensiveRowHeight */

.cell.empty { background: var(--card); }
.cell.empty.dim { background: var(--today-wash); }
.cell.empty::after {
  content: "＋"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 15px; color: var(--sub); opacity: 0; transition: opacity .12s;
}
@media (hover: hover) { .cell.empty:hover::after { opacity: .55; } }
.cell.empty:focus-visible::after { opacity: .55; }
/* 見る画面の空きマスは押せない。＋も出さない。 */
.grid:not(.editing) .cell.empty { cursor: default; }
.grid:not(.editing) .cell.empty::after { content: none; }
/* 編集中に選んだ空きマス。右の候補がどのコマのものかを表で指す。 */
.cell.empty.picked { box-shadow: inset 0 0 0 2px var(--brand); }
.cell.empty.picked::after { opacity: .7; }
/* 候補(点線)。**編集中だけ出る。** 点線は1本で「まだ入れていない候補がある」だけを言う
   (アプリの `TimetableGrid` と同じ読み方)。何件あるかは字で添える。 */
.cell.tent { outline: 2px dashed var(--brand); outline-offset: -3px; }
.cell.tent-only { color: var(--ink); }
.cell.tent-only::after { content: none; }
.cell.tent-only .rm { color: var(--brand-ink); font-weight: 600; }
.cell .marks .tn { font-weight: 700; }
.cell.now { box-shadow: inset 0 0 0 2px var(--brand); }

.cell:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; z-index: 1; }

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  margin: 8px 4px 0; font-size: calc(11.5 * var(--u)); color: var(--sub);
}
.legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.legend .sw { width: 13px; height: 10px; display: inline-block; border-radius: 2px; }
.legend .sw.sw-free { background: var(--fill); box-shadow: inset 0 0 0 1px var(--sep); }
.sw-nogroup {
  width: 13px; height: 13px; background: var(--fill);
  border-left: 3px solid var(--sub); display: inline-block;
}
/* 凡例の「休講」。升目の札と同じ形(`.cell .marks .cx`)。 */
.sw-cx {
  font-style: normal; background: var(--danger-fill); color: #fff; font-weight: 700;
  font-size: 8.5px; line-height: 1.3; padding: 0 3px;
}
/* 休講の授業は取消線(アプリの `SemesterGrid` と同じ)。 */
.cell.cx .nm, .today-body.cx .n { text-decoration: line-through; opacity: .7; }
/* 日の授業の行(今日・カレンダータブ)は、休講の線を赤で引く(アプリの `CalendarTab` と同じ)。 */
.today-body-card .today-body.cx .n { text-decoration-color: var(--danger); text-decoration-thickness: 1.5px; opacity: 1; color: var(--sub); }

/* ── 今日の授業 ───────────────────────────────────────────
   **表の下に置く**(アプリと同じ場所)。出す順は
   「その日が何の日か」→「何の授業があるか」。逆にすると、休業日に
   空の一覧を出して「今日は授業が無い」を推測させることになる。 */

.today-section { margin-top: 20px; }
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 4px 8px; flex-wrap: wrap;
}
.sec-head h2 { font-size: calc(16 * var(--u)); margin: 0; font-weight: 700; }
.day-nav { display: flex; align-items: center; gap: 2px; }
.day-btn {
  background: var(--card); border: 0; border-radius: 9px;
  width: 34px; height: 30px; font-size: calc(17 * var(--u)); line-height: 1;
  color: var(--brand-ink); font-weight: 700;
}
@media (hover: hover) { .day-btn:hover { background: var(--fill); } }
/* 34×30 を、見た目そのままで 44×44 の当たりにする。
   前の日・次の日は毎日押すものなので、ここが一番効く。
   左右は `.day-label`(116px)が挟んでいるので、伸ばしても重ならない。 */
.day-btn { position: relative; }
.day-btn::after { content: ""; position: absolute; inset: -7px -5px; }
.day-label {
  font-size: calc(12.5 * var(--u)); padding: 0 8px; min-width: 116px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.today-body-card { padding: 4px 12px 8px; }
.today-kind { margin: 8px 2px 2px; font-size: calc(11.5 * var(--u)); color: var(--sub); font-weight: 600; }
.today-list { list-style: none; margin: 0; padding: 0; }
.today-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 2px; cursor: pointer; text-align: left;
  background: none; border: 0; width: 100%;
}
.today-row + .today-row { box-shadow: inset 0 1px 0 var(--sep); }
@media (hover: hover) { .today-row:hover { background: var(--fill); } }
/* いま進行中のコマ。**格子と同じ印にする** —— 別の見せ方にすると、
   どちらが「いま」なのかを2度考えることになる。 */
.today-row.now { box-shadow: inset 2px 0 0 var(--brand); background: var(--fill); }
.today-time {
  display: flex; flex-direction: column; min-width: 46px;
  font-variant-numeric: tabular-nums;
}
.today-time b { font-size: calc(13 * var(--u)); }
.today-time span { font-size: calc(10.5 * var(--u)); color: var(--sub); }
.today-body { flex: 1 1 auto; min-width: 0; }
.today-body .n { display: block; font-size: calc(14 * var(--u)); font-weight: 600; line-height: 1.35; }
.today-body .r { display: block; font-size: calc(11.5 * var(--u)); color: var(--sub); margin-top: 1px; }
/* その日の休講・教室変更。種類の色の薄い面に、同じ色の字(アプリの今日の授業の行)。 */
.today-body .ev {
  display: block; margin-top: 4px; padding: 3px 8px; border-radius: 7px;
  font-size: calc(11 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ev); background: color-mix(in srgb, var(--ev) 12%, transparent);
}
.ev-cancelled { --ev: var(--danger); }
.ev-roomChange { --ev: var(--warn); }
.ev-makeup { --ev: var(--brand-ink); }
.ev-notice { --ev: var(--sub); }
.today-none { margin: 12px 2px; font-size: calc(13 * var(--u)); color: var(--sub); line-height: 1.6; }

/* その場で出席を付ける。アプリの「今日の授業」と同じ振る舞い。 */
.att { display: flex; gap: 4px; flex: 0 0 auto; }
.att button { position: relative; }
/* 高さ 30px の札。当たりだけを上下に 44px へ。 */
.att button::after { content: ""; position: absolute; inset: -7px 0; }
.att button {
  border: 0; border-radius: 8px; background: var(--fill); color: var(--sub);
  font-size: calc(11 * var(--u)); font-weight: 600; padding: 5px 7px; min-height: 30px;
}
.att button[aria-pressed=true] { background: var(--brand); color: var(--on-brand); }
@media (hover: hover) { .att button:hover { background: var(--sep); } }
@media (hover: hover) { .att button[aria-pressed=true]:hover { background: var(--brand); } }

.today-notices { list-style: none; margin: 12px 0 0; padding: 10px 14px; font-size: calc(12 * var(--u)); }
.today-notices li { display: flex; gap: 8px; flex-wrap: wrap; padding: 3px 0; }
.today-notices .d { color: var(--sub); font-variant-numeric: tabular-nums; min-width: 100px; }
.today-notices .t { font-weight: 600; }
.today-notices .a { flex-basis: 100%; color: var(--sub); }
.today-notices li + li { box-shadow: inset 0 1px 0 var(--sep); padding-top: 7px; margin-top: 4px; }

/* ── 探す ───────────────────────────────────────────────── */

.searchbar {
  display: flex; align-items: center; gap: 8px; cursor: text;
  background: var(--card); border-radius: var(--radius); padding: 10px 12px;
}
.searchbar svg { width: 18px; height: 18px; color: var(--sub); flex: 0 0 auto; }
.searchbar:focus-within { box-shadow: inset 0 0 0 2px var(--brand); }
.searchbar input {
  flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none; padding: 6px 0;
  font-size: calc(15 * var(--u));
}
.filters { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.filters select {
  flex: 1 1 140px; min-width: 0; background: var(--card); border: 0;
  border-radius: 10px; padding: 9px 10px; font-size: calc(13.5 * var(--u));
}
.where { margin: 12px 4px 8px; font-size: calc(12.5 * var(--u)); color: var(--sub); }
.where b { color: var(--ink); font-size: calc(13.5 * var(--u)); }
.linkish {
  background: none; border: 0; padding: 2px 4px; margin-left: 6px; position: relative;
  color: var(--brand-ink); font-size: calc(13 * var(--u)); font-weight: 600; text-decoration: underline;
}
.linkish::after { content: ""; position: absolute; inset: -12px -4px; }

.results { border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.hit {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; padding: 10px 12px 10px 15px; position: relative; color: inherit;
}
.hit + .hit { box-shadow: inset 0 1px 0 var(--sep); }
@media (hover: hover) { .hit:hover { background: var(--fill); } }
.hit:focus-visible { background: var(--fill); } }
/* 系統は左の縦線で示す。**面で塗らない** —— 一覧では札が並ぶより静かで、
   かつ色を落としても行の区切りは残る。 */
.hit .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.hit .n { font-size: calc(13.5 * var(--u)); font-weight: 600; display: block; line-height: 1.35; }
.hit .m { font-size: calc(11.5 * var(--u)); color: var(--sub); display: block; margin-top: 2px; }
/* 重なっている科目。**一覧から消さない** —— 消すと「無い」のか
   「重なっているだけ」なのか分からない。薄くして、重なり先を名指しする。 */
/* 重なる候補は**薄くしない**(薄い字が 4.5:1 を割る)。左の線を灰色にし(app.js)、
   「◯曜◯限が埋まっています」を警告色の字で言う。 */
.hit .why { color: var(--warn); font-weight: 600; }
.hit .tag { color: var(--brand-ink); font-weight: 700; margin-right: 6px; }

.empty-note { padding: 18px 14px; color: var(--sub); font-size: calc(13 * var(--u)); margin: 0;
              text-align: center; }

/* 切り替えのつまみ。アプリの Toggle に当たる。 */
.switch-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--card); border-radius: var(--radius); margin-top: 10px;
}
.switch-row .sw-body { flex: 1 1 auto; min-width: 0; }
.switch-row .sw-t { display: block; font-size: calc(15 * var(--u)); font-weight: 600; }
.switch-row .sw-s { display: block; font-size: calc(12 * var(--u)); color: var(--sub); margin-top: 2px; }
.switch {
  flex: 0 0 auto; width: 50px; height: 30px; border-radius: 999px;
  background: var(--fill); border: 0; position: relative; transition: background .15s;
}
/* つまみは `::after` が使っているので、当たりは `::before` で広げる。
   50×30 の見た目を変えずに、高さだけ 44 にする。 */
.switch::before { content: ""; position: absolute; inset: -7px 0; }
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .15s;
}
.switch[aria-checked=true] { background: var(--good); }
.switch[aria-checked=true]::after { transform: translateX(20px); }

/* ── 課題 ───────────────────────────────────────────────── */

.todo-row {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px;
  width: 100%; background: none; border: 0; text-align: left; color: inherit;
}
.todo-row + .todo-row { box-shadow: inset 0 1px 0 var(--sep); }
@media (hover: hover) { .todo-row:hover { background: var(--fill); } }
.tick {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px;
  border: 1.8px solid var(--sub); background: none; padding: 0; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center; color: transparent;
}
/* 丸は 22px のまま、当たりを 44px に広げる(行の左の余白に収まる)。 */
.tick { position: relative; }
.tick::after { content: ""; position: absolute; inset: -11px; border-radius: 999px; }
.tick[aria-pressed=true] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.tick svg { width: 13px; height: 13px; }
/* 済みにした直後(`checking`): 丸が弾んで塗られ、波紋が広がり、少し置いて行が畳まれる。 */
.tick.checking { background: var(--brand); border-color: var(--brand); color: var(--on-brand);
  animation: tick-pop .3s cubic-bezier(.3, 1.6, .5, 1); }
.tick.checking::before { content: ""; position: absolute; inset: -2px; border-radius: 999px;
  border: 2px solid var(--brand); animation: tick-ripple .45s ease-out forwards; }
@keyframes tick-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes tick-ripple { from { transform: scale(1); opacity: .6; } to { transform: scale(2); opacity: 0; } }
.todo-row.leaving { animation: todo-leave .25s ease-in forwards; overflow: hidden; }
@keyframes todo-leave { to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } }
/* 行の本文はボタン(押すと課題のシート)。 */
.todo-body {
  flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0;
  text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.todo-row > .chev { flex: 0 0 auto; color: var(--sub); font-size: calc(17 * var(--u));
                    line-height: 1.4; align-self: center; }
.todo-body .t { display: block; font-size: calc(14.5 * var(--u)); font-weight: 600; line-height: 1.4; }
.todo-row.done .todo-body .t { text-decoration: line-through; color: var(--sub); }
.todo-body .m { display: block; font-size: calc(11.5 * var(--u)); color: var(--sub); margin-top: 2px; }
.todo-body .m .late { color: var(--danger); font-weight: 700; }
.todo-body .m .soon { color: var(--warn); font-weight: 700; }

/* ── カレンダー ─────────────────────────────────────────── */

.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 4px 10px; gap: 8px;
}
.cal-head .mo { font-size: calc(17 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }
/* **横に伸ばしきらない。** 幅いっぱいの7列にすると、広い画面では1マスが
   160px 角まで育って、数字がぽつんと浮いた巨大な表になる(実際なった)。
   月の表は読めれば足りるので、頭打ちを置く。 */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  max-width: 560px;
}
.cal-wd {
  text-align: center; font-size: calc(11.5 * var(--u)); font-weight: 600; color: var(--sub);
  padding: 2px 0 6px;
}
.cal-wd.sun { color: var(--sun); }
.cal-wd.sat { color: var(--sat-ink); }
.cal-day {
  position: relative; height: 46px; border: 0; background: none;
  border-radius: 10px; font-size: calc(14 * var(--u)); color: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; gap: 2px;
}
.cal-day.blank { visibility: hidden; }
.cal-day.sun { color: var(--sun); }
.cal-day.sat { color: var(--sat-ink); }
.cal-day.klass { background: var(--fill); }
.cal-day.exam { background: #f8c9cd; }
.cal-day.sub { background: #f7d9b0; }
@media (prefers-color-scheme: dark) {
  .cal-day.exam { background: #5c2027; }
  .cal-day.sub { background: #5a3d12; }
}
.cal-day.today { box-shadow: inset 0 0 0 2px var(--brand); font-weight: 700; }
.cal-day.sel { background: var(--brand); color: var(--on-brand); font-weight: 700; }
.cal-day .dot {
  width: 5px; height: 5px; border-radius: 999px; background: var(--brand);
}
.cal-day.sel .dot { background: var(--on-brand); }
.cal-legend {
  max-width: 560px;
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin: 10px 4px 14px; font-size: calc(11.5 * var(--u)); color: var(--sub);
}
.cal-legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block;
                margin-right: 4px; vertical-align: -2px; }

/* ── 詳細のシート ─────────────────────────────────────────── */

/* シート。**PC 幅では真ん中の箱**(macOS のシートの形)、**スマホ幅では下から**出す。
   巻くのはシート全体の1か所だけ(中でさらに巻く所を作らない)。題と「閉じる」は上に留める。 */
dialog {
  border: 0; border-radius: 22px; padding: 0; max-width: 440px;
  width: calc(100% - 32px); max-height: calc(100dvh - 48px);
  overflow: auto; overscroll-behavior: contain;
  background: var(--card); color: var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
/* 背景の暗さは iOS の標準に寄せる(.42 は濃すぎて、後ろの表が読めなかった)。 */
dialog::backdrop { background: rgba(0,0,0,.28); }
.sheet-head {
  position: sticky; top: 0; z-index: 2; background: inherit;
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 8px 18px;
}
.sheet-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; padding-top: 6px;
                 font-size: calc(18 * var(--u)); line-height: 1.35; }
.sheet-close {
  flex: 0 0 auto; position: relative; border: 0; border-radius: 999px;
  background: var(--fill); color: var(--brand-ink); font-weight: 600;
  font-size: calc(14 * var(--u)); padding: 0 14px; min-height: 36px;
}
.sheet-close::after { content: ""; position: absolute; inset: -4px; }
.sheet-close[hidden] { display: none; }
dialog .body { padding: 4px 18px 4px; }
dialog h2 { margin: 0 0 4px; font-size: calc(18 * var(--u)); line-height: 1.35; }
dialog .meta { color: var(--sub); font-size: calc(12.5 * var(--u)); margin: 0 0 12px; }
dialog dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px;
            margin: 0 0 12px; font-size: calc(13.5 * var(--u)); }
dialog dt { color: var(--sub); }
dialog dd { margin: 0; }
dialog .acts[hidden] { display: none; }
/* 候補のシート。地を灰にして、中の白いカードと分ける。**高さを決めておく** ——
   絞るたびにシートの背が伸び縮みしない。 */
#pickSheet, #pickSheet .sheet-head { background: var(--screen); }
#pickSheet { height: min(640px, calc(100dvh - 48px)); max-width: 520px; }
#pickSheet .body { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.pick-gap { height: 12px; }
/* 確かめる窓。小さく真ん中に(スマホでも下からにしない)。 */
dialog.ask { max-width: 340px; }
dialog.ask .body { padding: 20px 20px 4px; }
dialog.ask .body p { margin: 6px 0 8px; color: var(--sub); font-size: calc(14 * var(--u)); line-height: 1.6; }
.link-code {
  display: block; margin: 4px 0 8px; padding: 9px 10px; border-radius: 10px;
  background: var(--fill); font-size: calc(12.5 * var(--u)); word-break: break-all; user-select: all;
}
@media (max-width: 600px) {
  dialog:not(.ask) {
    margin: auto 0 0; width: 100%; max-width: none;
    border-radius: 22px 22px 0 0;
    max-height: calc(100dvh - env(safe-area-inset-top) - 16px);
  }
  #pickSheet { height: 64dvh; }
  dialog:not(.ask)[open] { animation: sheet-up .3s cubic-bezier(.2, .8, .2, 1); }
  dialog:not(.ask) > .acts, #tBody { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  /* 下の段が無い札(時間割タブの授業)は、中身の終わりに同じ余白を取る。 */
  #sheet:has(#dActs[hidden]) .body { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
dialog .acts {
  display: flex; gap: 8px; padding: 6px 18px 18px; flex-wrap: wrap;
  position: sticky; bottom: 0; background: inherit;
}
#tBody .acts { position: static; padding: 4px 0 18px; }
.btn {
  flex: 1 1 auto; border: 0; background: var(--fill);
  border-radius: 12px; padding: 11px 12px; font-weight: 600; text-align: center;
  text-decoration: none; color: inherit; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (hover: hover) { .btn:hover { background: var(--sep); } }
.btn.primary { background: var(--brand); color: var(--on-brand); }
@media (hover: hover) { .btn.primary:hover { background: var(--brand); opacity: .9; } }
.btn.destructive { color: var(--danger); }
.btn.destructive-fill { background: var(--danger-fill); color: #fff; }
.sync-acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 14px 12px; }
.sync-code { padding: 0 14px 12px; }
.sync-qr { padding: 0 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sync-qr svg { width: min(220px, 70vw); height: auto; border-radius: 8px; }
.choicebar { flex-wrap: wrap; }
.sync-code code {
  display: block; margin-top: 4px; padding: 9px 10px; border-radius: 10px;
  background: var(--fill); font-size: calc(13 * var(--u)); word-break: break-all; user-select: all;
}
.cannot {
  flex: 1 1 100%; margin: 0; font-size: calc(12.5 * var(--u)); line-height: 1.5; color: var(--warn);
  background: var(--fill); border-radius: 12px; padding: 11px 12px;
}

/* シートの中の小さな区画(出席・課題・覚え書き)。 */
.sheet-sec { margin: 0 0 14px; }
.sheet-sec h3 {
  font-size: calc(12 * var(--u)); color: var(--sub); margin: 0 0 6px; font-weight: 700;
}
.sheet-sec textarea {
  width: 100%; background: var(--fill); border: 0; border-radius: 10px;
  padding: 9px 10px; font-size: calc(13.5 * var(--u)); min-height: 64px; resize: vertical;
}
/* 授業の札(時間割タブで入れた授業)。**アプリの授業の頁と同じ並び。**
   地が白いシートなので、区画は灰の面(--fill)で分ける。 */
.d-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
         margin-right: 6px; vertical-align: 0; }
.d-card { display: block; width: 100%; background: var(--fill); border: 0;
          border-radius: 12px; overflow: hidden; color: inherit; margin: 0; }
.d-card + .d-card { margin-top: 8px; }
/* 同じコマの候補。名前と曜時限の右に「入れ替える」。 */
.rival { display: flex; align-items: center; gap: 10px; }
.rival + .rival { margin-top: 10px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--sep); }
.rival-t { flex: 1 1 auto; min-width: 0; }
.rival-t b { display: block; font-size: calc(14 * var(--u)); }
.rival-t span { display: block; font-size: calc(12 * var(--u)); color: var(--sub); margin-top: 2px; }
.rival .btn { flex: 0 0 auto; }
.d-card.rivals { padding: 10px 14px; }

/* KULASIS の連絡(アプリの `ClassDetailView.noticeSection`)。 */
.d-notice { padding: 10px 14px; }
.d-notice + .d-notice { box-shadow: inset 0 1px 0 var(--sep); }
.d-notice .h { display: flex; align-items: center; gap: 6px; font-size: calc(12 * var(--u)); }
.d-notice .ev-tag {
  background: var(--ev); color: #fff; font-weight: 700; font-size: calc(11 * var(--u));
  padding: 1px 6px; border-radius: 4px;
}
.d-notice .s { margin: 3px 0 0; font-size: calc(14 * var(--u)); }
.d-notice .p { margin: 3px 0 0; font-size: calc(11 * var(--u)); color: var(--sub); }
/* 自分で足した休講を消す。**字で書く**(✕ だけでは何が起きるか読めない)。 */
.d-notice-rm { margin-left: auto; background: none; border: 0; padding: 4px 0 4px 10px;
  color: var(--danger); font: inherit; font-weight: 600; cursor: pointer; }
.d-hint { margin: 6px 0 0; font-size: calc(12 * var(--u)); color: var(--warn); }
.d-hint:empty { display: none; }
.d-hint.bad { color: var(--danger); }
.d-note { margin: 0 0 6px; font-size: calc(11 * var(--u)); color: var(--sub); }
.d-syllabus {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--fill); border-radius: 12px; padding: 11px 14px; margin: 0 0 14px;
  color: var(--brand-ink); text-decoration: none; font-size: calc(15 * var(--u)); min-height: 44px;
}
.d-syllabus .ext { color: var(--sub); }
.d-tally { display: flex; padding: 12px 0; }
.d-tally > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.d-tally b { font-size: calc(22 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.d-tally span { font-size: calc(11 * var(--u)); color: var(--sub); }
.d-mark { box-shadow: inset 0 1px 0 var(--sep); padding: 12px 14px 14px;
          display: flex; flex-direction: column; gap: 10px; }
.d-date { display: flex; align-items: center; justify-content: space-between; gap: 10px;
          font-size: calc(15 * var(--u)); }
.d-date input { background: var(--card); border: 0; border-radius: 8px; padding: 6px 8px;
                font-size: calc(14 * var(--u)); color: inherit; min-height: 36px; }
.d-att { display: flex; gap: 6px; }
.d-att button { flex: 1; border-radius: 999px; font-size: calc(13 * var(--u));
                font-weight: 400; padding: 8px 0; background: var(--card); color: inherit; }
.d-att button[aria-pressed=true] { font-weight: 600; }
.d-hist { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none;
          color: var(--sub); font-size: calc(12 * var(--u)); font-weight: 600;
          padding: 10px 2px; min-height: 44px; text-align: left; }
.d-hist .chev { display: inline-block; transition: transform .2s; }
.d-hist.open .chev { transform: rotate(90deg); }
.d-rec { display: flex; justify-content: space-between; width: 100%; border: 0; background: none;
         color: inherit; padding: 10px 14px; font-size: calc(15 * var(--u)); min-height: 44px; text-align: left; }
.d-rec + .d-rec { box-shadow: inset 0 1px 0 var(--sep); }
.d-rec .s { color: var(--sub); font-size: calc(13 * var(--u)); }
.d-add { text-align: left; padding: 12px 14px; font-weight: 600; color: var(--brand-ink);
         font-size: calc(15 * var(--u)); min-height: 44px; }
.d-empty { text-align: center; padding: 20px; color: var(--sub); font-size: calc(13 * var(--u)); }
.d-field { width: 100%; background: var(--fill); border: 0; border-radius: 10px;
           padding: 10px; font-size: calc(15 * var(--u)); margin: 0 0 10px; color: inherit; }
#tBody .d-date input { background: var(--fill); }
.add-row { display: flex; gap: 6px; margin-top: 6px; }
.add-row input[type=text] {
  flex: 1 1 auto; min-width: 0; background: var(--fill); border: 0;
  border-radius: 10px; padding: 9px 10px; font-size: calc(13.5 * var(--u));
}
.add-row input[type=date] {
  background: var(--fill); border: 0; border-radius: 10px; padding: 9px 8px;
  font-size: calc(12.5 * var(--u)); min-width: 0;
}
.add-row button {
  background: var(--brand); color: var(--on-brand); border: 0;
  border-radius: 10px; padding: 0 14px; font-weight: 600; min-height: 38px; white-space: nowrap;
}

/* ── 単位数 ─────────────────────────────────────────────── */

.tally { display: flex; align-items: baseline; gap: 10px; padding: 14px;
         flex-wrap: wrap; }
.tally b { font-size: calc(24 * var(--u)); font-variant-numeric: tabular-nums; font-weight: 700; }
.tally .of { color: var(--sub); font-size: calc(13 * var(--u)); }
.tally.over b { color: var(--danger); }
.tally .why { flex-basis: 100%; font-size: calc(11.5 * var(--u)); color: var(--sub); margin: 0;
              line-height: 1.6; }

/* ── 下の但し書き ───────────────────────────────────────── */

footer {
  padding: 20px 4px 8px; color: var(--sub); font-size: calc(11.5 * var(--u)); line-height: 1.75;
}
footer a { color: var(--brand-ink); }
.warn-note { color: var(--warn); font-weight: 600; }

/* 触る的は 44×44 以上。iOS の作法をそのまま持ってくる。 */
@media (pointer: coarse) {
  .hit { padding-top: 13px; padding-bottom: 13px; }
}

@media print {
  #nav .nav-actions, .tabbar, .rail, .col-side, footer, .cell.empty::after { display: none !important; }
  body { background: #fff; }
  .app { padding-left: 0 !important; }
  .two-col { grid-template-columns: 1fr; }
}

/* ── 人から送られたリンク ─────────────────────────────────────
   **上の帯のいちばん上に固定で出す。** どちらの時間割を見ているのか
   分からないまま触れるのが、いちばんまずい。 */
.linkbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--brand); color: var(--on-brand);
  padding: 9px 16px; font-size: calc(12.5 * var(--u)); line-height: 1.5;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.linkbar-btn {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4);
  color: inherit; border-radius: 8px; padding: 5px 10px; font-size: calc(12 * var(--u));
  font-weight: 600; min-height: 32px;
}
@media (hover: hover) { .linkbar-btn:hover { background: rgba(255,255,255,.3); } }
@media print { .linkbar { display: none; } }

/* タブの中身。**切り替えは表示の出し入れだけ** —— 作り直すと、
   打っている途中の字や巻いた位置が飛ぶ。 */
.tab-pane[hidden] { display: none; }

/* ── 団体・イベント ───────────────────────────────────────────
   掲載の配信。**「PR」を隠さない。** */

.club { display: flex; gap: 12px; padding: 13px 14px; align-items: flex-start; }
.club + .club { box-shadow: inset 0 1px 0 var(--sep); }
.club-ic {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 11px;
  object-fit: cover; background: var(--fill);
}
.club-body { flex: 1 1 auto; min-width: 0; }
.club-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.club-n { font-size: calc(15 * var(--u)); font-weight: 700; }
.pr {
  font-size: calc(9.5 * var(--u)); font-weight: 700; letter-spacing: .04em;
  color: var(--sub); border: 1px solid var(--sep); border-radius: 4px;
  padding: 1px 4px; line-height: 1.4;
}
.club-t { margin: 3px 0 0; font-size: calc(13 * var(--u)); }
.club-m { margin: 3px 0 0; font-size: calc(11.5 * var(--u)); color: var(--sub); }
.club-b {
  margin: 5px 0 0; font-size: calc(12.5 * var(--u)); color: var(--sub); line-height: 1.6;
  white-space: pre-wrap;
}
.club-note { margin: 8px 4px 0; font-size: calc(11.5 * var(--u)); color: var(--sub); line-height: 1.6; }

/* ── 成績とGPA ────────────────────────────────────────────────
   **鍵はかけない。** アプリは端末の本人確認で閉じているが、ブラウザに
   同じものは無い。それらしい入口を作っても localStorage は素通しで読めるので、
   守っているふりになるだけ。守れないことを画面に書く。 */

.grade-row {
  display: flex; gap: 12px; align-items: center; padding: 11px 14px; flex-wrap: wrap;
}
.grade-row + .grade-row { box-shadow: inset 0 1px 0 var(--sep); }
.grade-body { flex: 1 1 200px; min-width: 0; }
.g-n { display: block; font-size: calc(14.5 * var(--u)); font-weight: 600; line-height: 1.4; }
.g-m { display: block; font-size: calc(11.5 * var(--u)); color: var(--sub); margin-top: 2px; }
.grade-ctl { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.grade-ctl input[type=number] {
  width: 62px; background: var(--fill); border: 0; border-radius: 9px;
  padding: 8px 8px; font-size: calc(13.5 * var(--u)); text-align: center;
  font-variant-numeric: tabular-nums;
}
.grade-ctl select {
  background: var(--fill); border: 0; border-radius: 9px; padding: 8px 6px;
  font-size: calc(13 * var(--u)); min-height: 36px;
}
.grade-ctl select:disabled { opacity: .45; }
.g-ex {
  background: var(--fill); border: 0; border-radius: 9px; padding: 8px 10px;
  font-size: calc(12 * var(--u)); font-weight: 600; min-height: 36px;
  /* **--sub では薄い地に負ける。** #e8e8e8 の上で 4.27:1 しか出ない。
     薄い地に載せるための色(--axis-ink)を使う。 */
  color: var(--axis-ink);
}
.g-ex[aria-pressed=true] { background: var(--brand); color: var(--on-brand); }

/* 畳んである区画の見出し。実機の「> 完了した課題 4件」。 */
.disclosure {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: 0; padding: 6px 4px; margin: 0 0 6px;
  color: var(--sub); font-size: calc(14 * var(--u)); font-weight: 600; text-align: left;
}
.disclosure .chev {
  font-size: calc(17 * var(--u)); line-height: 1; transition: transform .15s;
  display: inline-block;
}
.disclosure .chev.open { transform: rotate(90deg); }
@media (hover: hover) { .disclosure:hover { color: var(--ink); } }

/* ── 取り込みの説明(KULASIS の取り込みが使う) ─────────────────────────────────────── */
.kulms-how { padding: 14px 16px 16px; }
.kulms-how ol { margin: 0 0 14px; padding-left: 1.3em; line-height: 1.75; font-size: calc(14 * var(--u)); }
.kulms-note { color: var(--sub); font-size: calc(13 * var(--u)); line-height: 1.7; margin: 10px 4px 0; }
.kulms-how .kulms-note { margin: 12px 0 0; }
.kulms-class { font-size: calc(14.5 * var(--u)); margin: 12px 0 4px; }

/* ── KULASIS の取り込み ───────────────────────────────────── */
.kulasis-mode { margin: 0 0 6px; }
/* 貼る欄。打ち込みは受けないので低くてよい。 */
.kulasis-paste {
  display: block; width: 100%; min-height: 64px; resize: none; background: var(--fill); border: 0;
  border-radius: 10px; padding: 12px; font-size: calc(14 * var(--u));
}
.kulasis-mode .form-check { min-height: 36px; }
/* 断り書き。色は題の字だけに付け、本文は読みやすい灰に(アプリの `note`)。 */
.kulasis-warn { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; margin: 8px 0;
  border-radius: 10px; font-size: calc(12.5 * var(--u)); line-height: 1.6; color: var(--sub); }
.kulasis-warn b { font-size: calc(13 * var(--u)); }
.kulasis-warn.warn { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.kulasis-warn.warn b { color: var(--warn); }
.kulasis-warn.danger { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.kulasis-warn.danger b { color: var(--danger); }
.kulasis-warn.good { background: color-mix(in srgb, var(--good) 10%, transparent); }
.kulasis-warn.good b { color: var(--good); }
.kulasis-row { padding: 8px 2px; }
.kulasis-row + .kulasis-row { box-shadow: inset 0 1px 0 var(--sep); }
.kulasis-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kulasis-name { font-size: calc(14.5 * var(--u)); color: var(--ink); }
.kulasis-sub { font-size: calc(12 * var(--u)); color: var(--sub); }
.kulasis-tag { font-size: calc(11.5 * var(--u)); color: var(--warn); }


/* 下に数秒だけ出す札。「取り消す」のボタンを1つ持てる。
   popover で最前面に出すので、ブラウザの既定(真ん中・枠)を打ち消す。 */
.toast {
  position: fixed; inset: auto auto calc(84px + env(safe-area-inset-bottom)) 50%;
  transform: translateX(-50%); margin: 0; border: 0; z-index: 60;
  display: flex; align-items: center; gap: 6px;
  background: var(--ink); color: var(--screen); padding: 4px 4px 4px 16px; border-radius: 12px;
  min-height: 44px; font-size: calc(13.5 * var(--u)); line-height: 1.45;
  width: max-content; max-width: calc(100vw - 32px); box-shadow: 0 6px 24px rgba(0,0,0,.2);
  overflow: visible;
}
.toast[hidden], .toast[popover]:not(:popover-open) { display: none; }
.toast-t { padding: 8px 10px 8px 0; }
.toast:not(:has(.toast-act)) { padding-right: 16px; }
.toast-act {
  flex: 0 0 auto; background: none; border: 0; border-radius: 9px; min-height: 40px;
  padding: 0 12px; color: var(--toast-act); font-weight: 700; font-size: inherit;
}
@media (hover: hover) { .toast-act:hover { background: rgba(127,127,127,.25); } }
@media (min-width: 980px) and (hover: hover) and (pointer: fine) {
  .toast { bottom: 24px; }
}

/* ── キーボード ─────────────────────────────────────────── */
/* **焦点の縁を太く、見える色で。** ブラウザ既定の 1px は白いカードの上でほとんど見えない。 */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.row-link:focus-visible, .hit:focus-visible, .todo-body:focus-visible, .today-body:focus-visible {
  outline-offset: -2px;
}
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; padding: 14px;
        font-size: calc(14 * var(--u)); align-items: center; }
.keys dt { display: flex; gap: 4px; }
.keys dd { margin: 0; color: var(--sub); }
kbd {
  display: inline-block; min-width: 26px; padding: 2px 7px; border-radius: 6px; text-align: center;
  background: var(--fill); box-shadow: inset 0 -1px 0 var(--sep);
  font: 600 calc(12.5 * var(--u))/1.5 ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── 指で触る画面の的 ───────────────────────────────────── */
@media (pointer: coarse) {
  .linkbar-btn, .grade-ctl select, .g-ex, .grade-ctl input[type=number],
  .add-row button, .add-row input { min-height: 44px; }
}

/* ── 動きを減らす設定 ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important; transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ── 学科・専攻・卒業要件・過去の時間割 ───────────────────────── */

/* 節の下の断り書き。カードの外、地の上に置く小さな字。 */
.sec-note { padding: 8px 4px 0; }
.sec-note p { margin: 0 0 6px; color: var(--sub); font-size: calc(12 * var(--u)); line-height: 1.6; }
.card-acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 14px; }

/* 入力の欄。題を上、欄を下に。 */
.form { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 12px; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.ff-t { font-size: calc(12 * var(--u)); color: var(--sub); font-weight: 700; }
.form-field input, .form-field select {
  background: var(--fill); border: 0; border-radius: 10px; padding: 10px;
  font-size: calc(15 * var(--u)); min-height: 44px; color: inherit; width: 100%;
}
.form-check { display: flex; gap: 10px; align-items: flex-start; font-size: calc(13.5 * var(--u));
              line-height: 1.5; min-height: 44px; padding-top: 4px; }
.form-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; }
.form-err { margin: 0; color: var(--danger); font-size: calc(13 * var(--u)); }

/* 卒業要件の区分ごとの行。題と数字、右に修得単位と目標の欄。 */
.req-row { display: flex; gap: 10px; align-items: center; padding: 10px 14px; flex-wrap: wrap; }
.req-row + .req-row { box-shadow: inset 0 1px 0 var(--sep); }
.req-body { flex: 1 1 180px; min-width: 0; }
.req-t { display: block; font-size: calc(15 * var(--u)); }
.req-row.total .req-t { font-weight: 700; }
.req-row.fixed .req-t { color: var(--sub); }
.req-n { display: block; font-size: calc(12 * var(--u)); color: var(--sub); margin-top: 2px;
         font-variant-numeric: tabular-nums; }
.req-n .met { color: var(--good); font-weight: 600; }
.req-ctl { display: flex; gap: 10px; align-items: flex-end; flex: 0 0 auto; }
.req-ctl label { display: flex; flex-direction: column; gap: 3px; font-size: calc(11 * var(--u));
                 color: var(--sub); }
.req-ctl input {
  width: 64px; background: var(--fill); border: 0; border-radius: 9px; padding: 8px;
  font-size: calc(14 * var(--u)); text-align: right; min-height: 36px; color: inherit;
  font-variant-numeric: tabular-nums;
}
.req-auto { font-size: calc(12 * var(--u)); color: var(--sub); }
.short-list { list-style: none; margin: 0; padding: 0 14px 12px; }
.short-list li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0;
                 font-size: calc(14 * var(--u)); }
.short-list li .gap { margin-left: auto; color: var(--warn); font-weight: 600; }
.short-list li .of { color: var(--sub); font-size: calc(11.5 * var(--u)); }

/* 括りを選ぶシートの見出し。押せない行は字で理由を言うので、色は変えない。 */
.pick-h { font-size: calc(12 * var(--u)); color: var(--sub); font-weight: 700; margin: 14px 4px 6px; }
.pick-h:first-child { margin-top: 2px; }
.row-link:disabled { cursor: default; }
.row-link:disabled .chev { visibility: hidden; }

/* 単位取得計画(アプリの `CreditPlanView` / `PlanPill`) */
.short-list li .gap.done { color: var(--good); }
.plan-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px 4px;
  width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.plan-head[aria-expanded="false"] { padding-bottom: 12px; }
.plan-head .chev { display: inline-block; color: var(--sub); font-size: calc(17 * var(--u)); line-height: 1;
  transform: rotate(90deg); transition: transform .2s; }
.plan-head .chev.open { transform: rotate(-90deg); }
.plan-parts { flex: 1 0 100%; font-size: calc(12 * var(--u)); color: var(--sub); }
.plan-sem { font-weight: 600; font-size: calc(15 * var(--u)); }
.plan-now { font-size: calc(11 * var(--u)); font-weight: 600; color: var(--brand-ink);
  background: var(--fill); border-radius: 999px; padding: 1px 8px; }
.plan-total { margin-left: auto; font-size: calc(13 * var(--u)); font-weight: 600; color: var(--sub); }
.plan-strip { margin: 0 4px 10px; }
.plan-strip-btn { display: flex; gap: 6px; align-items: center; width: 100%; overflow-x: auto;
  border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.plan-strip-t { flex: 0 0 auto; font-size: calc(11 * var(--u)); font-weight: 600; color: var(--sub); }
.plan-pill { flex: 0 0 auto; display: inline-flex; gap: 4px; white-space: nowrap;
  font-size: calc(11 * var(--u)); font-weight: 600; color: var(--sub);
  background: var(--fill); border-radius: 999px; padding: 3px 9px; }
.plan-pill b { color: var(--ink); font-weight: 600; }
.plan-pill.reached b { color: var(--good); }
.plan-strip-add { margin-top: 6px; }
.plan-courses { padding: 0 14px 10px 28px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.plan-course { display: flex; gap: 10px; align-items: center; width: 100%; }
.plan-course-t { display: block; font-size: calc(13.5 * var(--u)); }
.plan-pick-sum { margin: 0 4px 10px; font-weight: 600; font-size: calc(13.5 * var(--u)); }
.plan-strip-more { flex: 0 0 auto; margin-left: auto; font-size: calc(11 * var(--u)); color: var(--brand-ink); }

/* 試験・レポートの日(アプリの `ClassDetailView` の「試験・レポート」)。
   行ごと押せて、直す1枚が開く。**過ぎたものは下で薄く「済み」。** */
.d-exam { display: block; width: 100%; border: 0; background: none; color: inherit; text-align: left;
          padding: 10px 14px; min-height: 44px; font: inherit; cursor: pointer; }
.d-exam + .d-exam { box-shadow: inset 0 1px 0 var(--sep); }
.d-exam .h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: calc(13 * var(--u)); }
.d-exam .h > * { white-space: nowrap; }
.d-exam .ev-tag {
  background: var(--ev); color: #fff; font-weight: 700; font-size: calc(11 * var(--u));
  padding: 1px 6px; border-radius: 4px; min-width: 4.4em; text-align: center; box-sizing: border-box;
}
.ev-exam { --ev: var(--danger-fill); }
.ev-report { --ev: var(--brand); }
.d-exam .left { margin-left: auto; color: var(--sub); font-size: calc(12 * var(--u)); }
.d-exam .s, .d-exam .p { display: block; margin-top: 3px; }
.d-exam .s { font-size: calc(14 * var(--u)); }
.d-exam .p { font-size: calc(11 * var(--u)); color: var(--sub); }
.d-exam.past { opacity: .5; }
.today-body-card .d-exams { margin: 0 -12px; }
.exam-kind { margin: 0 0 10px; }
.exam-kind button { background: var(--fill); }
.exam-day, .exam-time-on { margin-bottom: 10px; }
.cal-day .dots { display: flex; gap: 3px; }
.cal-day .dot.red { background: var(--danger); }
.cal-day.sel .dot.red { background: var(--danger-fill); box-shadow: 0 0 0 1px var(--on-brand); }