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

   色も角も、思いつきで決めない。アプリ側で理由を書いて決めたものが
   `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行で出すぶん要る */
  /* 今日の列の薄い色掛け。アプリの `Color.todayWash`(Android は `todayWash`)と同じ値。 */
  --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%; touch-action: manipulation; }

/* **字の大きさは利用者の設定に追う**(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-actions:has(.nav-left > *) .nav-brand { display: 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 {
  color: var(--brand-ink);
  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;
}
:is(.card, .results) > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
:is(.card, .results) > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.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; }
.empty-center { min-height: 60vh; display: flex; align-items: center; justify-content: center;
                margin: 0; color: var(--sub); font-size: calc(15 * var(--u)); }

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

/* 包み(`.tabbar`)は箱を持たない。中に「5つのタブのカプセル」(`.tab-group`)。
   **検索もカプセルの中に並べる**(2026-10-13)。前は iOS 26 に倣って右に分けた丸にしていた(issue #41)。 */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: stretch; gap: 8px;
  z-index: 40; max-width: calc(100vw - 24px);
}
.tab-group {
  background: var(--card);
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
}
.tab-group {
  display: flex; gap: 2px; padding: 6px; border-radius: 999px;
  flex: 1 1 auto; min-width: 0; overflow: hidden;
}
.tab-group { align-items: stretch; min-height: 64px; }
.tab-group .tab { justify-content: center; }
/* 下の中身を透かす(iOS 26 のタブの形)。**透明度を下げる設定では、今までの不透明に戻す。** */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tab-group {
    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) {
  .tab-group { 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 { width: calc(100vw - 24px); max-width: 400px; }
  .tab-group { padding: 5px; gap: 0; }
  .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 では左の列 ──────────────────────────────────────────
   **幅だけで決める**(2026-10-13)。iPad も横向きなど 980px 以上なら PC と同じ形にする。
   前はマウスで操作するときだけ(`hover`/`pointer`)にしていたが、iPad だけ別の画面になるのを改めた。
   境目の 980px は右の欄(`.two-col`)を出す幅と揃える。
   列は左端に置き、上の帯はその右から始める —— 重ならない。
   **畳まない。** 項目は5つだけなので、Gmail や Google カレンダーのように出したままにする。

   形は Google カレンダーと Gmail に倣う(2026-09-28)。
   - **列を地と同じ色にする。** 前は地より一段暗い帯に区切り線を引き、頭に小さな灰色のロゴを置いていたが、
     作り物めいて見えると却下された。
   - **左の列・中身・右の列の間には、うっすら縦の線だけ引く**(2026-10-18、利用者の頼み。まとまって見えるように)。
     地の色は変えない。線は `--sep`、アプリの iPad も同じ(`ColumnRule`)。
   - 頭にロゴを大きめに置き、上の帯(題とボタン)と同じ高さ(64px)にそろえる。
   - 札は左端に付けて右だけ丸めた帯(Gmail)。選んでいる札は薄い濃青の地に太字。
     課題の件数は赤い丸にせず、行の右端に数字だけ(Gmail の未読の数)。
   - その下に小さな月のカレンダー(`renderMiniCal`)。日を押すとカレンダータブのその日を開く。
     カレンダータブを開いているときは、代わりに小さな時間割の表(`renderRailGrid`)。 */
.rail { display: contents; }
.rail-brand, .mini-cal { display: none; }
@media (min-width: 980px) {
  .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);
    box-shadow: inset -1px 0 0 var(--sep);
  }
  .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; align-items: stretch; gap: 0; padding: 8px 0 0;
  }
  .tab-group {
    display: contents; background: none; box-shadow: none; padding: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .tab-group { min-height: 0; }
  .tab-group .tab { justify-content: flex-start; }
  .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); }
  }

  /* カレンダータブでは、小さな月の代わりに小さな時間割の表(`renderRailGrid`)。
     縦は時限・横は曜日。名前だけ。色は時間割の表と同じ。見るだけで押せない。 */
  .rg-grid {
    display: grid; grid-template-columns: 16px repeat(5, 1fr); grid-template-rows: 22px repeat(5, 44px);
    gap: 1px; background: var(--screen); border-radius: 8px; overflow: hidden;
  }
  .rg-ax {
    display: flex; align-items: center; justify-content: center; background: var(--axis);
    color: var(--sub); font-size: 11px; font-weight: 600;
  }
  .rg-ax.today { color: var(--brand-ink); font-weight: 700; }
  .rg-cell { background: var(--card); padding: 2px; overflow: hidden; }
  .rg-cell.free, .rg-cell.nogroup { background: var(--fill); color: var(--ink); }
  .rg-cell .nm {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    font-size: 9.5px; font-weight: 600; line-height: 1.2; word-break: break-all;
  }

  /* 上の帯のボタン。**影を付けた白い丸をやめる**(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) {
  .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; }
  /* 一覧のタブ(課題・検索・マイページ)は、行が長すぎると目で追えないので前の幅で止める。 */
  #pane-todos, #pane-search, #pane-me { max-width: 1148px; }
}

/* マイページの入口は1列(アプリと同じ並び)。詳細画面の幅には触れない。 */
#pane-me.mypage-home { max-width: 960px; }
.mypage-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 560px; }
.mypage-column { min-width: 0; }
.mypage-home .row-link { min-height: 56px; }
.mypage-home .rl-s { line-height: 1.6; }
.mypage-home > footer { max-width: 70ch; }

/* PCのマイページは、左に入口の一覧・右に開いた画面の2枚に固定する。奥へ進んでも列は増やさず、右を入れ替える。 */
@media (min-width: 980px) {
  header#nav.mypage-nav { display: none; }
  main:has(#pane-me.mypage-browser:not([hidden])) { padding: 0 24px; min-width: 0; }
  #pane-me.mypage-browser:not([hidden]) {
    display: flex; gap: 32px; max-width: none; align-items: stretch;
    height: 100dvh; padding-bottom: 12px;
  }
  .me-column {
    min-width: 0; overflow-y: auto; padding: 0 4px 28px;
    overscroll-behavior-y: contain; scrollbar-width: thin;
  }
  .me-list { flex: 0 0 340px; }
  .me-detail { flex: 1 1 0; max-width: 993px; container-type: inline-size; border-left: 1px solid var(--sep); padding-left: 32px; }
  .me-column-head { position: sticky; top: 0; z-index: 2; background: var(--screen); padding: 16px 0 14px; }
  .me-column-title { font-size: calc(22 * var(--u)); line-height: 1.3; margin: 0; }
  .me-column-controls { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
  .me-column-controls:has(.nav-left:empty):has(.nav-right:empty) { display: none; }
  .me-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 4px; }
  .me-crumb {
    border: 0; background: none; padding: 2px 0; color: var(--brand-ink); cursor: pointer;
    font: inherit; font-size: calc(14 * var(--u));
  }
  .me-crumb:hover { text-decoration: underline; }
  .me-crumb-sep { color: var(--sub); font-size: calc(14 * var(--u)); }
  .me-column-body.mypage-home { max-width: none; }
  .me-column .mypage-columns { display: flex; flex-direction: column; gap: 22px; max-width: none; }
  .me-column .row-link[aria-current="page"] { background: var(--tab-sel); color: var(--brand-ink); }
  .me-column .plan-semester-layout { grid-template-columns: minmax(0, 1fr); }
  @container (min-width: 820px) {
    .me-detail .plan-semester-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  }
}

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

.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) {
  /* 右の欄の左に縦の線。線の右に 16px 空け、中身の幅は 360px のまま。 */
  .two-col { grid-template-columns: minmax(0, 1fr) 377px; align-items: start; }
  .two-col > .col-side { border-left: 1px solid var(--sep); padding-left: 16px; }
}
/* 右の欄。**見るときは今日の授業、編集中は候補。** 狭い画面では今日の授業を表の下に積み、
   候補は出さない(空きマスを選ぶと検索タブへ送る)。 */
@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: 1)`)。罫線は縦横とも 1px
   (2026-10-17、列の境が追えないので縦も引いた)。 */

.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: 1px; }
.row.int-row { grid-template-columns: var(--gutter) 1fr; }
/* 縦を曜日にしたとき。行の見出しは曜日の1字だけなので細くする(時刻は列の見出しへ移る)。 */
.grid.tr { --gutter: 30px; }
/* 振り替え実施日のある週は「月曜授業」が入るぶん広げる。 */
.grid.tr.has-sub { --gutter: 44px; }
.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); }
/* **外枠の角に当たるマスは、角を外枠と同じ丸みにする。** 四角のままだと
   5限の縁取り(`.ax.next`)やいまのコマの縁(`.cell.now`)の角が外枠の丸角で切られて欠ける。 */
.grid > .row:first-child > :first-child { border-top-left-radius: var(--radius); }
.grid > .row:first-child > :last-child { border-top-right-radius: var(--radius); }
.grid > .row:last-child > :first-child { border-bottom-left-radius: var(--radius); }
.grid > .row:last-child > :last-child,
.grid > .row.int-row:last-child .int-cells > :last-child { border-bottom-right-radius: var(--radius); }

/* 升目。**名前は上、教室は下端。**
   名前の次の要素を `margin-top: auto` で下端へ押す(アプリの maxHeight: .infinity)。
   名前のすぐ下に置くと、行ごとに教室の高さが揃わない。
   **名前の箱そのものは伸ばさない。** 伸ばすと line-clamp の4行目より後ろも箱の下端まで描かれ、
   途中で切れた5行目が教室の字に被る。 */
.cell {
  position: relative; display: flex; flex-direction: column;
  width: 100%; text-align: center; height: 84px;
  justify-content: center; align-items: center;
  padding: 3px 6px;                  /* アプリと同じ 上下3・左右6 */
  border: 0; border-radius: 0; background: var(--card); overflow: hidden;
}
.cell .nm {
  flex: 0 1 auto; min-height: 0; max-width: 100%;
  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; max-width: 100%; font-size: 9.5px; font-weight: 500; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 教室変更の日は元の教室の代わりに字で(アプリの `Color.warn`)。 */
.cell .rm.rc { color: var(--warn); font-weight: 700; }
/* 授業をしない日(祝日・11月祭など)。列ごと塞いで、一番上に理由。押せない。 */
.cell.closed { background: var(--axis); color: var(--axis-ink); cursor: default; }
.cell .sub {
  flex: 0 0 auto; max-width: 100%; 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;
}
/* 最下段。欠席の数は左下、課題の数は右下(アプリの `SemesterGrid.cell`)。教室はその上の段。 */
.cell .ft {
  flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; justify-content: space-between;
  font-size: 8.5px; line-height: 1.3; min-height: 11px;
}
.cell .ft .ab { font-weight: 600; margin-right: auto; }
/* 名前は残りの高さの真ん中、教室と最下段はマスの下端。 */
.cell.taken .nm { margin-top: auto; }
.cell.taken .marks { margin-top: auto; }
/* 未読のお知らせ。課題の数(塗り)と数字だけで並ばないよう「未読」の字を添え、縁取りにする。 */
.cell .marks .un {
  color: var(--brand); border: 1px solid var(--brand); font-weight: 700; padding: 0 2px; white-space: nowrap;
}
.cell .ft .todo {
  flex: 0 0 auto; 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, .rg-cell.taken { color: #111; }
@media (prefers-color-scheme: dark) {
  .cell.taken, .cell.int, .rg-cell.taken { 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;
}
/* 休講の授業は取消線(アプリの `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; }
.notice-section { margin-top: 20px; }
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 4px 8px; flex-wrap: wrap;
}
.section-toggle-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 見出しそのものが開閉のボタン。印は閉じて「›」、開いて「∨」(›を90度回す)。 */
.section-toggle { border: 0; background: none; padding: 0; margin: 0; min-height: 44px; font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; }
.section-toggle::after { content: '›'; display: inline-block; color: var(--brand-ink); transition: transform .2s; }
.section-toggle[aria-expanded="true"]::after { transform: rotate(90deg); }
.today-body-card[hidden], .day-nav[hidden] { display: none; }
.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: 0; }
.today-kind { margin: 10px 14px 0; font-size: calc(11.5 * var(--u)); color: var(--sub); font-weight: 600; }
.today-list { margin: 0; padding: 0; }
.notice-cards[hidden] { display: none; }
/* 日付の送りは見出しの下に右寄せ(アプリの `dayPicker`)。 */
.day-nav { justify-content: flex-end; margin: 0 0 8px; }
.day-nav .day-btn { background: var(--fill); width: 44px; height: 36px; font-size: calc(15 * var(--u)); }
@media (hover: hover) { .day-nav .day-btn:hover { background: var(--sep); } }
.day-label {
  border: 0; background: none; color: var(--sub); font-weight: 600; min-height: 36px;
  font-size: calc(12 * var(--u)); padding: 0 6px; font-variant-numeric: tabular-nums;
}
.day-label:not(.back) { cursor: default; }
.day-label.back { color: var(--brand-ink); }
/* 振り替え実施日の札(アプリの「○曜授業」)。 */
.sub-badge {
  background: var(--warn); color: #fff; border-radius: 999px; padding: 2px 7px;
  font-size: calc(11 * var(--u)); font-weight: 600;
}
.today-row { display: flex; flex-direction: column; gap: 8px; padding: 11px 14px; }
/* 区切り線は字の頭から(アプリの `Divider().padding(.leading, 14)`)。 */
.today-row + .today-row { background-image: linear-gradient(var(--sep), var(--sep)); background-repeat: no-repeat; background-position: 14px 0; background-size: calc(100% - 14px) 1px; }
.today-body {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer;
}
.today-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; }
.today-text { min-width: 0; flex: 1 1 auto; }
.today-body .n { display: block; font-size: calc(15 * var(--u)); line-height: 1.35; }
.today-body .r { display: block; font-size: calc(12 * var(--u)); color: var(--sub); margin-top: 2px; }
.today-body > .chev { flex: 0 0 auto; color: var(--sub); font-size: calc(17 * var(--u)); line-height: 1; }
.today-body .r.notice-count { color: var(--brand-ink); }
.today-body .r.notice-count.unread { font-weight: 600; }
/* その日の休講・教室変更。種類の色の薄い面に、同じ色の字(アプリの今日の授業の行)。 */
.today-row .ev {
  display: block; padding: 4px 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: 0; padding: 20px; text-align: center; font-size: calc(13 * var(--u)); color: var(--sub); line-height: 1.6; }

/* 出席の4つ(アプリの `AttendancePicker`)。付けたものだけ、その種類の色で塗る。 */
.att { display: flex; flex-wrap: wrap; gap: 6px; }
.att-cx { align-items: center; justify-content: space-between; padding: 8px 0; color: var(--sub); font-size: calc(12 * var(--u)); }  /* 休講の日 */
.att-cx .att-off { flex: none; min-height: 32px; border: 0; background: none; padding: 0; color: var(--danger); font: inherit; font-weight: 600; cursor: pointer; }
/* 狭い列でも字を縦に割らない。入りきらなければ2段にする。 */
.att button { position: relative; flex: 1 0 3.2em; white-space: nowrap; border: 0; border-radius: 999px; background: var(--fill); color: inherit;
  font-size: calc(12 * var(--u)); font-weight: 400; padding: 8px 0; min-height: 32px; }
/* 高さ 32px の札。当たりだけを上下に 44px へ(左右は隣もボタンなので広げない)。 */
.att button::after { content: ""; position: absolute; inset: -6px 0; }
.att button[aria-pressed=true] { font-weight: 600; color: var(--on-brand); background: var(--brand); }
.att [class^=st-][aria-pressed=true] { color: #fff; }
.att .st-present[aria-pressed=true] { background: var(--good); }
.att .st-late[aria-pressed=true] { background: var(--warn); }
.att .st-absent[aria-pressed=true] { background: var(--danger); }
.att .st-excused[aria-pressed=true] { background: #8e8e93; }
@media (hover: hover) { .att button[aria-pressed=false]:hover { background: var(--sep); } }

/* 未読のお知らせ。授業ごとに1枚の札(アプリの `courseNotices`)。 */
.notice-cards { display: flex; flex-direction: column; gap: 8px; }
.notice-card { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; padding: 14px;
  text-align: left; color: inherit; cursor: pointer; }
.notice-card .today-body { display: block; }
.notice-card .n { font-size: calc(14 * var(--u)); font-weight: 600; }
.notice-card .r:not(.notice-count) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notice-card .chev { color: var(--sub); font-size: calc(17 * var(--u)); }
@media (hover: hover) { .notice-card:hover { background: var(--fill); } }

.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 .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; }
/* 絞込み設定の札(search.js の `buildFilters`)。効いている条件を札の中に書く。 */
.cf-open {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left;
  background: var(--card); color: var(--ink); border: 0; border-radius: 10px; padding: 9px 12px;
}
.cf-open.on { box-shadow: inset 0 0 0 1.5px var(--brand-ink); }
.cf-open-t { flex: 0 0 auto; font-weight: 600; font-size: calc(13.5 * var(--u)); }
.cf-open.on .cf-open-t { color: var(--brand-ink); }
.cf-open-s { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
             color: var(--sub); font-size: calc(12.5 * var(--u)); }
.cf-open-go { flex: 0 0 auto; color: var(--sub); }
/* 絞込み設定のシート */
.cf-body { padding: 4px 18px 22px; }
.cf-sec { margin-top: 18px; }
.cf-h { margin: 0 0 8px; font-size: calc(12.5 * var(--u)); color: var(--sub); font-weight: 600; }
.cf-note { margin: 6px 0 0; font-size: calc(11.5 * var(--u)); color: var(--sub); }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-chip {
  border: 0; border-radius: 999px; padding: 7px 13px; background: var(--fill); color: var(--ink);
  font-size: calc(13 * var(--u));
}
.cf-chip.on { background: var(--brand); color: #fff; font-weight: 600; }
/* 曜時限の升目は時間割の表(`.grid`)そのもの。高さだけ選ぶ用に詰める。 */
.grid.cf-tt .cell { height: 44px; cursor: pointer; align-items: center; justify-content: center; }
.grid.cf-tt .cell.empty::after { content: none; }
.grid.cf-tt .cell.on { background: var(--brand); }
.cf-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: calc(14 * var(--u)); }
.cf-check input { width: 18px; height: 18px; accent-color: var(--brand); }
.cf-acts { display: flex; justify-content: space-between; margin-top: 6px; }
.cf-acts .linkish { margin-left: 0; }
.cf-select {
  width: 100%; background: var(--fill); border: 0; border-radius: 10px; padding: 9px 10px;
  font-size: calc(13.5 * var(--u));
}
.cf-free { margin: 0; }
.cf-reset[hidden] { display: none; }
.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: flex; align-items: baseline; gap: 8px; font-size: calc(11.5 * var(--u)); color: var(--sub); margin-top: 2px; }
.todo-body .m .course { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-body .m .due { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.todo-body .m .late { color: var(--danger); font-weight: 700; }
.todo-body .m .soon { color: var(--warn); font-weight: 700; }
/* 教科書一覧の行(アプリの `TextbookListSheet`)。本文は長い説明文になるので細字、授業は1行ずつ。 */
.tb-note { margin: 0 4px 4px; font-size: calc(12 * var(--u)); color: var(--sub); }
.tb-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tb-body .t { font-size: calc(15 * var(--u)); font-weight: 400; white-space: pre-line; overflow-wrap: anywhere; }
.tb-body .m { display: block; margin: 0; font-size: calc(12 * var(--u)); line-height: 1.45; white-space: pre-line; }
.tb-syllabus { font-size: calc(13 * var(--u)); color: var(--brand-ink); text-decoration: none; padding: 2px 0; }
.tb-syllabus:hover { text-decoration: underline; }

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


/* 月の表は**既存のカレンダーアプリの形**: マスの中に予定の札(`docs/決めごと_時間割と課題.md`「カレンダーの月の表」)。
   前の 560px の頭打ちはやめた。札で中身が埋まるので、広い画面でも数字だけが浮いた表にはならない。 */
:root {
  --chip-cal-bg: #dbe6fb; --chip-cal-ink: #1d3f8a;
  --cal-exam-bg: #f8c9cd; --cal-sub-bg: #f7d9b0;
}
@media (prefers-color-scheme: dark) {
  :root { --chip-cal-bg: #22365e; --chip-cal-ink: #c9d8f7; --cal-exam-bg: #5c2027; --cal-sub-bg: #5a3d12; }
}

.cal-months {
  position: relative; display: flex; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none; margin: 0 -16px 8px; padding: 2px 16px;
}
.cal-months::-webkit-scrollbar { display: none; }
.cal-year { flex: 0 0 auto; font-size: calc(12.5 * var(--u)); font-weight: 700; color: var(--sub); padding: 0 2px 0 6px; }
.cal-mo {
  flex: 0 0 auto; min-height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--sep); background: var(--card); color: var(--ink);
  font-size: calc(13.5 * var(--u)); font-variant-numeric: tabular-nums;
}
.cal-mo[aria-current] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 700; }
/* 返事待ちの招待があるとき、右上の ⋯ に付ける点。 */
.nav-btn.has-dot::before { content: ""; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger-fill); }

.cal-month { background: var(--card); border-radius: var(--radius-lg); overflow: hidden; }
.cal-wds { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--sep); }
.cal-wd { text-align: center; font-size: calc(11.5 * var(--u)); font-weight: 600; color: var(--sub); padding: 6px 0 4px; }
.cal-wd.sun { color: var(--sun); }
.cal-wd.sat { color: var(--sat-ink); }
.cal-week {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px;
  min-height: 74px; border-bottom: 1px solid var(--sep); padding-bottom: 3px;
}
.cal-week:last-child { border-bottom: 0; }
/* マス。週の行の高さいっぱいに敷き、札はその上に重ねる(札を押してもマスが選ばれる)。 */
.cal-day {
  grid-row: 1 / -1; position: relative; border: 0; border-right: 1px solid var(--sep); border-radius: 0;
  background: transparent; color: inherit; padding: 4px 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  font-variant-numeric: tabular-nums;
}
.cal-day:nth-child(7) { border-right: 0; }
.cal-day .num {
  min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: calc(13 * var(--u));
}
.cal-day.sun .num { color: var(--sun); }
.cal-day.sat .num { color: var(--sat-ink); }
.cal-day.klass { background: var(--fill); }
.cal-day.exam { background: var(--cal-exam-bg); }
.cal-day.sub { background: var(--cal-sub-bg); }
.cal-day.out .num { opacity: .45; }
.cal-day.today .num { background: var(--brand); color: var(--on-brand); font-weight: 700; }
/* 選んだ日の枠。札より上に重ねる(マスに描くと札がはみ出して見える)。 */
.cal-sel { grid-row: 1 / -1; pointer-events: none; position: relative; z-index: 2; box-shadow: inset 0 0 0 2px var(--brand); }
/* 最後の週は下の余白まで枠を伸ばし、表の角丸に沿わせて切れ目を防ぐ。 */
.cal-week:last-child .cal-day, .cal-week:last-child .cal-sel { margin-bottom: -3px; }
.cal-week:last-child .cal-day.sun, .cal-week:last-child:has(.cal-day.sun.sel) .cal-sel { border-bottom-left-radius: var(--radius-lg); }
.cal-week:last-child .cal-day.sat, .cal-week:last-child:has(.cal-day.sat.sel) .cal-sel { border-bottom-right-radius: var(--radius-lg); }
@media (hover: hover) { .cal-day:hover { box-shadow: inset 0 0 0 2px var(--sep); } }
.cal-chip, .cal-more { pointer-events: none; position: relative; z-index: 1; min-width: 0; }
.cal-chip {
  margin: 0 2px; padding: 1px 4px; border-radius: 4px;
  font-size: calc(10.5 * var(--u)); line-height: 1.35; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.cal-chip.cal { background: var(--chip-cal-bg); color: var(--chip-cal-ink); }
.cal-chip.me { background: var(--good); color: #fff; }
.cal-chip.exam { background: var(--danger); color: #fff; }
.cal-chip.todo { background: var(--card); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand-ink); }
/* 返事待ちの招待は**点線の枠と「?」**(Google カレンダーが未返事を白抜きにするのと同じ考え)。色だけで分けない。 */
.cal-chip.inv { background: var(--card); color: var(--good); outline: 1px dashed var(--good); outline-offset: -1px; }
.cal-chip.lec { background: color-mix(in srgb, var(--warn) 12%, var(--card)); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.cal-more { font-size: calc(10.5 * var(--u)); color: var(--sub); text-align: center; align-self: start; }

/* 表示する予定(色の見本を兼ねる)。 */
.cal-show { display: flex; flex-direction: column; gap: 2px; }
.cal-show-row { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: calc(14 * var(--u)); }
.cal-show-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.cal-sw { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.cal-sw.cal { background: var(--chip-cal-bg); box-shadow: inset 0 0 0 1px var(--chip-cal-ink); }
.cal-sw.me { background: var(--good); }
.cal-sw.exam { background: var(--danger); }
.cal-sw.todo { box-shadow: inset 0 0 0 1.5px var(--brand-ink); }
.cal-sw.inv { outline: 1.5px dashed var(--good); outline-offset: -1.5px; }
.cal-sw.lec { background: color-mix(in srgb, var(--warn) 12%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--warn); }
.cal-show-note { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; font-size: calc(12 * var(--u)); color: var(--sub); }
.cal-cell-sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; box-shadow: inset 0 0 0 1px var(--sep); }
.cal-cell-sw.klass { background: var(--fill); }
.cal-cell-sw.exam { background: var(--cal-exam-bg); }
.cal-cell-sw.sub { background: var(--cal-sub-bg); }
.mini-cal .cal-show-head { margin-top: 18px; }
.mini-cal .cal-show { padding: 4px 8px 0; }
.mini-cal .cal-show-row { font-size: 13px; min-height: 30px; }

.cal-side > .sec-title { margin-top: 18px; }
.btn.cal-add { display: none; }
@media (min-width: 980px) {
  #pane-calendar:not([hidden]) {
    display: grid; grid-template-columns: minmax(0, 1fr) 365px; column-gap: 24px; align-items: start; padding-bottom: 0;
  }
  /* 右の列の左に縦の線(時間割の右の欄と同じ)。 */
  .cal-side { border-left: 1px solid var(--sep); padding-left: 24px; align-self: stretch; }
  .cal-months { margin: 0 0 8px; padding: 2px 0; }
  .cal-week { min-height: 104px; }
  .cal-side > .sec-title { margin-top: 0; }
  .cal-plus { display: none; }
  .btn.cal-add { display: flex; width: 100%; justify-content: center; margin: 0 0 16px; }
}

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

/* シート。**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;
}
/* メモの添付ファイル(アプリの授業の頁と同じ形)。見出し「メモ」の右に「写真を添付」「ファイルを添付」、
   本文の下に白い札で一覧。行は種類の絵・名前(押すと開く)・「名前を変える」・赤字の「消す」。 */
.sheet-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                  flex-wrap: wrap; margin: 0 0 6px; }
.sheet-sec-head h3 { margin: 0; }
.attach-adds { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; }
.attach-add { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 6px 0;
              min-height: 36px; color: var(--brand-ink); font-size: calc(13 * var(--u)); font-weight: 600; cursor: pointer; }
.attach-add svg { width: 19px; height: 19px; flex: 0 0 auto; }
.attach-add:disabled { cursor: default; opacity: .5; }
.attach { margin-top: 8px; }
.attach-list { background: var(--fill); border-radius: 10px; }
.attach-row { display: flex; align-items: center; gap: 2px; min-height: 44px; padding-right: 6px; }
.attach-row + .attach-row { box-shadow: inset 0 1px 0 var(--sep); }
.attach-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left;
               background: none; border: 0; color: inherit; padding: 10px 12px; min-height: 44px; cursor: pointer; }
.attach-open svg { width: 20px; height: 20px; flex: 0 0 auto; }
.attach-label { min-width: 0; }
.attach-name { display: block; font-size: calc(14 * var(--u)); overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; }
.attach-sub { display: block; font-size: calc(12 * var(--u)); color: var(--sub); margin-top: 2px; }
.attach-act { flex: 0 0 auto; white-space: nowrap; background: none; border: 0; color: var(--brand-ink); cursor: pointer;
              font-size: calc(13 * var(--u)); font-weight: 600; padding: 0 8px; min-height: 44px; }
.attach-act.destructive { color: var(--danger); }
.attach-note { margin: 6px 0 0; font-size: calc(12 * var(--u)); color: var(--sub); }
.attach-note.warn { color: var(--warn); }
.attach-rename { width: 100%; background: var(--fill); border: 0; border-radius: 10px; padding: 9px 10px;
                 font-size: calc(15 * var(--u)); color: inherit; }
/* 授業の札(時間割タブで入れた授業)。**アプリの授業の頁と同じ並び。**
   地が白いシートなので、区画は灰の面(--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 .d-unread { color: var(--brand-ink); font-size: calc(11 * var(--u)); }
.d-notice .s { margin: 3px 0 0; font-size: calc(14 * var(--u)); }
.d-notice .d-cancel-day { font-weight: 600; }
.d-notice .d-notice-body { font-size: calc(13 * var(--u)); white-space: pre-line; overflow-wrap: anywhere; }
.d-notice-open-able { cursor: pointer; }
.d-notice .d-chev { margin-left: auto; color: var(--brand-ink); }
.d-notice .d-chev + .d-notice-rm { margin-left: 0; }
.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[hidden] { display: none; }
/* 題の右の鉛筆(アプリの `ClassDetailView` と同じ濃青)。押せる広さは 32px 角。 */
.d-title-row { display: inline; }
.d-rename { display: inline-flex; align-items: center; justify-content: center; vertical-align: -6px;
  width: 32px; height: 32px; margin-left: 2px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--brand-ink); }
.d-rename svg { width: 18px; height: 18px; }
.d-original { display: block; margin-top: 2px; font-size: calc(12 * var(--u)); font-weight: 400; color: var(--sub); }
.d-rename-box { display: flex; flex-direction: column; gap: 6px; }
.d-rename-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px;
  border: 0; background: var(--fill); font-size: calc(16 * var(--u)); }
.d-rename-note { margin: 0; font-size: calc(12 * var(--u)); font-weight: 400; color: var(--sub); }
.d-rename-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.d-rename-acts button { border: 0; border-radius: 999px; min-height: 36px; padding: 0 14px;
  font-size: calc(14 * var(--u)); font-weight: 600; background: var(--fill); color: var(--brand-ink); }
.d-rename-acts .d-rename-ok { background: var(--brand); color: #fff; }
/* 時間割の上の「教科書一覧」。アプリの壁紙の知らせと同じ形。 */
.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[hidden] { display: none; }
.d-date .d-when { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.d-date input, .d-date select { 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-rec.cx .s { color: var(--danger); font-weight: 600; }  /* 休講のあった日 */
.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, #tBody .d-date select { 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); }
/* 成績表の PDF から入れる前の一覧(`confirmGradeReport`)。ダイアログの中で縦に送る。 */
.report-list { max-height: 50vh; overflow-y: auto; margin: 4px -20px 0; }
.report-sem { margin: 10px 20px 2px; font-size: calc(12 * var(--u)); font-weight: 600; color: var(--sub); }
.report-list .grade-row { padding: 9px 20px; flex-wrap: nowrap; }
.report-grade { font-size: calc(15 * var(--u)); font-variant-numeric: tabular-nums; }
.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; max-width: 180px;
}
.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) {
  .toast { bottom: 24px; }
}

/* ── キーボード ─────────────────────────────────────────── */
/* **焦点の縁を太く、見える色で。** ブラウザ既定の 1px は白いカードの上でほとんど見えない。 */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
dialog:focus, dialog:focus-visible { outline: none; }
.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; }
}

/* ── 長い1行を流す(app.js の `marquee`。アプリの `MarqueeText`) ──
   入りきる行は今まで通り「…」で切る。はみ出す行だけ、中身を2枚並べて左へ流す。 */
.mq-run { text-overflow: clip; }
.mq-track { display: inline-flex; will-change: transform; }
.mq-in { flex: 0 0 auto; white-space: nowrap; }
.mq-in.mq-copy { padding-left: 38px; }
.mq-in:not(.mq-copy) { padding-right: 0; }

/* ── 動きを減らす設定 ───────────────────────────────────── */
@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;
  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 > .btn { flex: none; white-space: nowrap; }
.plan-course .d-syllabus { margin: 6px 0 0; }
.plan-courses > .row-link { padding-left: 0; padding-right: 0; }
.plan-pick-course + .plan-pick-course { box-shadow: inset 0 1px 0 var(--sep); }
.plan-pick-course .d-syllabus { display: inline-flex; gap: 4px; background: none; padding: 0; min-height: 0;
  margin: 0 14px 12px 52px; font-size: calc(12.5 * var(--u)); color: var(--sub); }
.plan-course-t { display: block; font-size: calc(13.5 * var(--u)); }
/* 画面幅に収め、表の中では横に送らない。罫線と色はメインの表(`.grid`)と同じ。 */
.plan-time-scroll { margin: 0 14px 14px; }
.plan-time-table { border-collapse: separate; border-spacing: 1px; background: var(--sep); border-radius: var(--radius); overflow: hidden; width: 100%; table-layout: fixed; overflow-wrap: anywhere; font-size: calc(11 * var(--u)); }
.plan-time-table caption { text-align: left; font-size: calc(13.5 * var(--u)); font-weight: 600; padding-bottom: 6px; }
.plan-time-table th:first-child { width: 28px; }
.plan-time-table td { background: var(--card); vertical-align: top; height: 44px; padding: 4px; }
.plan-time-table td p { margin: 0 0 4px; }
.plan-time-table th { background: var(--axis); color: var(--axis-ink); font-weight: 600; }
.plan-time-table td.free, .plan-time-table td.nogroup { background: var(--fill); color: var(--ink); }
.archive-time-table td { padding: 0; height: 76px; }
.archive-slot { display: block; width: 100%; min-height: 76px; padding: 8px 4px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.archive-time-table tr:last-child td:last-child .archive-slot { border-bottom-right-radius: var(--radius); }
.archive-slot:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.archive-slot:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.archive-slot[aria-pressed="true"] { outline: 2px solid var(--brand); outline-offset: -2px; }
.archive-slot-info { scroll-margin-top: 120px; margin-bottom: 20px; }
/* 学期の計画: 時間割を主に、要件は横の短い列に置く。 */
.plan-semester-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.plan-semester-layout .plan-time-scroll { margin: 0; min-width: 0; }
.plan-semester-layout .plan-time-table td { height: 76px; }
.plan-requirements { min-width: 0; }
.plan-requirements .req-row { flex-wrap: nowrap; gap: 8px; padding: 12px 14px; }
.plan-bucket + .plan-bucket { box-shadow: inset 0 1px 0 var(--sep); }
.plan-requirements .req-ctl label { flex-direction: row; align-items: center; gap: 6px; }
.plan-progress { display: block; }
.plan-requirements .plan-gap { color: var(--ink); font-weight: 600; }
.plan-requirements .req-n.met { color: var(--good); font-weight: 600; }
/* 選んだ科目は区分の見出しの下に字下げで並べ、「外す」は科目の題と同じ高さに置く。 */
.plan-requirements .plan-courses { padding: 0 14px 6px 26px; gap: 0; align-items: stretch; }
.plan-requirements .plan-course { align-items: flex-start; padding: 8px 0; }
.plan-requirements .plan-course + .plan-course { box-shadow: inset 0 1px 0 var(--sep); }
.plan-requirements .plan-course > .btn { min-height: 32px; padding: 6px 12px; }
.plan-requirements .plan-course .d-syllabus { display: inline-flex; gap: 4px; background: none; padding: 0;
  min-height: 0; margin: 4px 0 0; font-size: calc(12.5 * var(--u)); }
.plan-requirements .plan-courses > .row-link { padding: 10px 0; }
.plan-requirements .plan-courses > .row-link .rl-t { font-size: calc(14 * var(--u)); color: var(--brand-ink); }
@media (min-width: 1100px) {
  .plan-semester-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .plan-semester-layout .plan-time-table { font-size: calc(13 * var(--u)); }
  .plan-semester-layout .plan-time-table td { height: clamp(84px, calc((100dvh - 220px) / 5), 144px); padding: 8px; }
}
.plan-pick-sum { margin: 0 4px 10px; font-weight: 600; font-size: calc(13.5 * var(--u)); }
.plan-scope { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.plan-scope select {
  flex: 1 1 auto; min-width: 0; background: var(--card); border: 0;
  border-radius: 10px; padding: 9px 10px; 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; }
.exam-kind { margin: 0 0 10px; }
.exam-kind button { background: var(--fill); }
.exam-day, .exam-time-on { margin-bottom: 10px; }

/* 卒業までの単位: 残りの棒と、過去から卒業までの学期を1枚に並べる。 */
#pane-me.credit-overview { max-width: 720px; }
.credit-hub .card-note { text-align: left; }
.credit-progress-heading { display: flex; justify-content: space-between; gap: 12px; font-size: calc(15.5 * var(--u)); font-weight: 600; }
.credit-progress-heading b { color: var(--brand-ink); white-space: nowrap; }
.credit-progress-bar { display: flex; height: 8px; margin: 8px 0; overflow: hidden; border-radius: var(--radius); background: var(--fill); }
.credit-progress-bar span { height: 100%; }
.credit-progress .req-n { display: block; }
.credit-inner { padding-left: 30px; }
.credit-inner .credit-progress-heading { font-size: calc(13.5 * var(--u)); }
.credit-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 4px; font-size: calc(12.5 * var(--u)); }
.credit-legend span { display: flex; align-items: center; gap: 4px; }
.credit-legend i { width: 8px; height: 8px; border-radius: var(--radius); }
.credit-progress-bar .earned, .credit-legend .earned { background: var(--good); }
.credit-progress-bar .current, .credit-legend .current { background: var(--brand); }
.credit-progress-bar .planned, .credit-legend .planned { background: var(--warn); }
.credit-progress-bar .short, .credit-legend .short { background: var(--fill); }
/* 「不足」の色は白地に近いので、凡例は縁で形を見せる。 */
.credit-legend .short { box-shadow: inset 0 0 0 1px var(--sep); }
.credit-timeline { margin-top: 12px; }
.credit-timeline .plan-now { display: inline-block; margin-left: 8px; }
#credit-current-semester { scroll-margin-top: 100px; }

/* 外国語(アプリの `ProfileEditor.languageSection`)。2つ目からは行の右に「外す」。 */
.lang-box { margin-top: 16px; }
.lang-head { margin: 0 4px 8px; font-size: calc(14 * var(--u)); font-weight: 700; }
.lang-row { display: flex; align-items: center; gap: 8px; padding-right: 12px; }
.lang-row .select-row { flex: 1 1 auto; min-width: 0; }
.lang-row .btn { flex: none; white-space: nowrap; }
.lang-add { color: var(--brand-ink); }

/* 興味・関心(アプリの `ProfileEditor.interestSection`)。「あなたのこと」の節の中のカード。選んだ分野は地を塗り、字も太くする。 */
.interest-card { padding: 14px; margin-top: 10px; }
.interest-head {
  display: flex; align-items: center; margin: 0 0 10px;
  font-size: calc(14 * var(--u)); font-weight: 700;
}
.interest-head .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;
}
.interest-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.interest-chip {
  border: 0; border-radius: 999px; padding: 5px 11px;
  background: var(--fill); color: var(--ink); font: inherit; font-size: calc(12 * var(--u));
}
.interest-chip.on { background: var(--brand); color: #fff; font-weight: 600; }
.interest-why { margin: 0; color: var(--sub); font-size: calc(11 * var(--u)); line-height: 1.6; }

/* コマの内容は、PCでは表の右、スマホでは下からのシート。 */
.archive-slot-layout { display: grid; gap: 16px; align-items: start; }
.archive-slot-panel { min-width: 0; }
.slot-detail { padding: 12px 0; }
@media (min-width: 980px) {
  .archive-slot-layout:has(.archive-slot-panel:not(:empty)) { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
  .archive-slot-panel { position: sticky; top: 12px; }
}
@media (max-width: 979px) {
  #sheet, #archiveSlotSheet { max-height: 72dvh; }
}

#sidePick .meta { color: var(--sub); font-size: calc(12.5 * var(--u)); margin: 0 0 12px; }
#sidePick dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0 0 12px; }
#sidePick dt { color: var(--sub); }
#sidePick dd { margin: 0; }
#sidePick .acts[hidden] { display: none; }
/* 授業の詳細の題と「閉じる」の帯は濃青(2026-10-13)。右の列のカードでも、シートで開いても同じ。 */
:is(#sidePick.course-card, #sheet.course-sheet) > .sheet-head { background: var(--brand); color: var(--on-brand); padding-bottom: 12px; }
:is(#sidePick.course-card, #sheet.course-sheet) > .sheet-head .sheet-close { background: rgba(255,255,255,.2); color: var(--on-brand); }
:is(#sidePick.course-card, #sheet.course-sheet) > .sheet-head .d-rename { color: var(--on-brand); }
:is(#sidePick.course-card, #sheet.course-sheet) > .sheet-head .d-original,
:is(#sidePick.course-card, #sheet.course-sheet) > .sheet-head .d-rename-note { color: var(--on-brand); opacity: .8; }
:is(#sidePick.course-card, #sheet.course-sheet) > .sheet-head .d-rename-input { background: var(--card); color: var(--ink); }
:is(#sidePick.course-card, #sheet.course-sheet) > .sheet-head .d-rename-acts button { background: rgba(255,255,255,.2); color: var(--on-brand); }
:is(#sidePick.course-card, #sheet.course-sheet) > .sheet-head .d-rename-acts .d-rename-ok { background: var(--card); color: var(--brand-ink); }
/* 横に並べる幅で開いた授業の詳細。**1枚のカードにまとめ、右の列の下からせり上げる**(2026-10-13、利用者の頼み)。
   中の並びはシートと同じまま。題と「閉じる」の帯だけ濃青にする。カードは右の列の高さいっぱいで、巻くのはカードの中。
   **本当に下から出たシートにする**(同日): 下端は丸めず、`main` の下の余白(20px)ぶん伸ばして画面の縁に付ける。
   上に白いつまみを描き、つまみと題の帯を下へなぞるとしまえる(`dragToDismiss`)。 */
@media (min-width: 980px) {
  /* **今日の授業の上に重ねる**(2026-10-18): 後ろの今日の授業は残し、カードを右の欄いっぱいに置く。 */
  #pane-timetable .col-side:has(#sidePick.course-card) { overflow: hidden; margin-bottom: -20px; position: relative; }
  #sidePick.course-card {
    position: absolute; top: 0; bottom: 0; left: 16px; right: 0; z-index: 2;
    display: flex; flex-direction: column; box-sizing: border-box;
    overflow: auto; overscroll-behavior: contain;
    background: var(--card); border-radius: 22px 22px 0 0; box-shadow: 0 6px 24px rgba(0,0,0,.12);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  }
  #sidePick.course-card.dragging { transition: none; user-select: none; }
  #sidePick.course-card.rising { animation: sheet-up .3s cubic-bezier(.2, .8, .2, 1); }
  #sidePick.course-card > .card-grab {
    position: sticky; top: 0; z-index: 3; flex: 0 0 auto; height: 16px;
    background: var(--brand); cursor: grab; touch-action: none;
  }
  #sidePick.course-card > .card-grab::after {
    content: ""; position: absolute; left: 50%; top: 6px; width: 36px; height: 5px; margin-left: -18px;
    border-radius: 999px; background: var(--on-brand); opacity: .55;
  }
  #sidePick.course-card > .sheet-head { top: 16px; padding-top: 4px; cursor: grab; touch-action: none; }
  #sidePick.course-card.dragging, #sidePick.course-card.dragging > .sheet-head { cursor: grabbing; }
  #sidePick.course-card > .body { flex: 1 0 auto; padding: 12px 18px 4px; }
  #sidePick.course-card > .acts {
    display: flex; gap: 8px; padding: 6px 18px 18px; flex-wrap: wrap;
    position: sticky; bottom: 0; background: inherit;
  }
  #sidePick.course-card > .acts[hidden] { display: none; }
}
@media (max-width: 979px) {
  #sheet, #pickSheet, #archiveSlotSheet { margin: auto 0 0; width: 100%; max-width: none; border-radius: 22px 22px 0 0; }
}

/* ── スマホの縦: 今日の授業はシートへ ─────────────────────────
   アプリの iPhone の縦と同じ(`TimetableTab.usesDaySheet`)。**表を画面の残りいっぱいに伸ばし、**
   今日の授業・お知らせ・広告は、下のタブの上に浮く帯から開くシートへ移す(`renderTodayBand`)。 */
.today-band {
  position: fixed; left: 50%; transform: translateX(-50%);
  /* **タブ(高さ 64px)から 10px 離す。影は短く(ぼかし 8px)して、その間に収める。**
     前は 62px 上に置いて 2px 重なり、タブと同じ長い影がタブのカプセルに落ちて、帯の下だけ黒ずんで見えた。
     影を消すと押せる帯に見えなかった(2026-10-13)。 */
  bottom: calc(14px + 64px + 10px + env(safe-area-inset-bottom));
  width: calc(100vw - 24px); max-width: 400px; min-height: 44px;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  border: 0; border-radius: 999px; text-align: left;
  background: var(--card); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.12);
  z-index: 40;
}
.today-band[hidden] { display: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .today-band {
    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) {
  .today-band { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.today-band svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--brand-ink); }
.today-band-t { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-band-u { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--brand-ink); }
@media (hover: hover) { .today-band:hover { background: var(--fill); } }

/* 表を画面の残りいっぱいに。時限の行だけが高さを分け合う(PC の形と同じ組み方)。
   下は帯とタブのぶんを空ける。
   **画面は縦に送らない**(アプリの `fixedBody` と同じ)。高さを画面ちょうどに決め、背の低い端末では
   コマの方を縮める —— 前は1コマ 64px を下回らなかったので、375×667 では表が 89px はみ出して送れた。 */
html:has(body.day-sheet-mode), body.day-sheet-mode { overflow: hidden; overscroll-behavior: none; }
body.day-sheet-mode .app { height: 100dvh; display: flex; flex-direction: column; }
body.day-sheet-mode header#nav { width: 100%; }
body.day-sheet-mode main {
  flex: 1 1 auto; display: flex; flex-direction: column; width: 100%;
  padding-bottom: calc(14px + 64px + 10px + 44px + 12px + env(safe-area-inset-bottom));
}
body.day-sheet-mode main, body.day-sheet-mode #pane-timetable .two-col,
body.day-sheet-mode #pane-timetable .col-main, body.day-sheet-mode #pane-timetable .grid { min-height: 0; }
body.day-sheet-mode #pane-timetable:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
body.day-sheet-mode #pane-timetable .two-col,
body.day-sheet-mode #pane-timetable .col-main { flex: 1 1 auto; }
body.day-sheet-mode #pane-timetable .col-side { display: none; }
body.day-sheet-mode #pane-timetable .grid { flex: 1 1 auto; }
body.day-sheet-mode #pane-timetable .grid > .row:not(:first-child):not(.int-row) {
  flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr);
}
body.day-sheet-mode #pane-timetable .cell { height: auto; min-height: 0; overflow: hidden; }

/* シートの高さは決めておく —— 日を送るたびに背が伸び縮みしない。 */
#daySheet { height: 72dvh; margin: auto 0 0; width: 100%; max-width: none; border-radius: 22px 22px 0 0; }
/* 地を灰にして、中の白いカードと分ける(候補のシートと同じ)。 */
#daySheet, #daySheet .sheet-head { background: var(--screen); }
#daySheet .body { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
#daySheet .day-nav { margin-top: 0; }

/* 個人予定。既存の締切・試験の点と同じ行へ並べる。 */
.personal-row { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: none; }
.personal-row span { font-size: calc(12 * var(--u)); color: var(--sub); }
/* カレンダーの選んだ日の時間軸(アプリの `CalendarDayTimeline`)。終日の行は左に緑の線(返事待ちは点線)。 */
.cal-allday { border-left: 4px solid var(--good); }
.cal-allday.dashed { border-left-style: dashed; }
.cal-tl { position: relative; margin: 16px 14px 14px; }
.cal-tl-hour { position: absolute; left: 0; right: 0; height: 12px; margin-top: -6px; display: flex; align-items: center; gap: 6px; }
.cal-tl-hour span { flex: 0 0 32px; text-align: right; font-size: calc(10 * var(--u)); color: var(--sub); font-variant-numeric: tabular-nums; }
.cal-tl-hour::after { content: ""; flex: 1; height: 1px; background: var(--sep); }
.cal-tl-lanes { position: absolute; top: 0; bottom: 0; left: 42px; right: 0; }
.cal-tl-ev { position: absolute; display: flex; align-items: flex-start; gap: 4px; box-sizing: border-box; margin: 0;
  padding: 3px 4px 3px 9px; border: 0; border-radius: 6px; overflow: hidden; text-align: left; font: inherit; color: var(--ink);
  background: color-mix(in srgb, var(--c) 16%, var(--card)); box-shadow: inset 3px 0 var(--c); }
button.cal-tl-ev { cursor: pointer; }
.cal-tl-ev.dashed { background: none; box-shadow: none; border: 1px dashed var(--c); }
.cal-tl-ev.outline { background: var(--card); box-shadow: none; border: 1px solid var(--c); }
.cal-tl-lanes.tappable { cursor: copy; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* なぞっている範囲(アプリと同じ、自分の予定の緑の点線)。 */
.cal-tl-pick { position: absolute; left: 0; right: 0; box-sizing: border-box; padding: 3px 9px; border-radius: 6px; pointer-events: none;
  border: 1.5px dashed var(--good); background: color-mix(in srgb, var(--good) 16%, transparent);
  color: var(--good); font-size: calc(12 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
/* 選んだ日の欄(アプリの `dayColumn`)。上の欄は 260px で頭打ち、時間軸だけをその下で転がす。 */
#pane-calendar { overflow-x: clip; }
.cal-daycol { display: flex; flex-direction: column; min-height: 320px; position: relative; }
.cal-day-top { flex: 0 0 auto; max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--sep); }
.cal-day-top > * { margin: 0; flex: 0 0 auto; }
.cal-day-hint { font-size: calc(11 * var(--u)); color: var(--sub); }
.cal-day-axis { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cal-day-axis .cal-tl { margin-top: 14px; }
.cal-day-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.cal-day-sr:focus { position: static; width: auto; height: auto; margin: 4px 0; clip: auto; }
.todo-hm { flex: 0 0 auto; min-width: 34px; white-space: nowrap; align-self: center; font-size: calc(11 * var(--u)); color: var(--sub); font-variant-numeric: tabular-nums; }
.cal-daycol.enter-next { animation: cal-day-next .25s ease-out; }
.cal-daycol.enter-prev { animation: cal-day-prev .25s ease-out; }
@keyframes cal-day-next { from { transform: translateX(30%); opacity: 0; } }
@keyframes cal-day-prev { from { transform: translateX(-30%); opacity: 0; } }
@keyframes cal-day-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cal-daycol.enter-next, .cal-daycol.enter-prev { animation: cal-day-fade .2s ease-out; }
}
.cal-tl-ev .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cal-tl-ev .n { font-size: calc(12 * var(--u)); font-weight: 600; line-height: 1.3; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cal-tl-ev.short .n { -webkit-line-clamp: 1; }
.cal-tl-ev.short .r { display: none; }
.cal-tl-ev .r { font-size: calc(10 * var(--u)); color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-tl-ev.cx .n { text-decoration: line-through; text-decoration-color: var(--danger); color: var(--sub); }
.cal-tl-ev .x { font-size: calc(10 * var(--u)); font-weight: 600; color: var(--danger); }
.cal-tl-ev .chev { flex: 0 0 auto; color: var(--sub); font-size: calc(13 * var(--u)); line-height: 1.2; }
.cal-tl-now { position: absolute; left: -4px; right: 0; height: 1.5px; background: var(--danger); pointer-events: none; }
.cal-tl-now::before { content: ""; position: absolute; left: -3.5px; top: -2.75px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.me-embedded { padding: 0 16px 16px; }
.personal-form { display: flex; flex-direction: column; gap: 14px; }
.personal-form textarea { min-height: 80px; background: var(--card); border: 1px solid var(--sep); border-radius: 12px; padding: 10px; }
.personal-form input { min-height: 44px; min-width: 0; }
.personal-form input[type=checkbox] { width: 24px; }
/* 終日は iOS のトグルと同じく、名前と印を1行に並べる(行を1つ減らす)。 */
.personal-form .form-field:has(> input[type=checkbox]) { flex-direction: row; justify-content: space-between; align-items: center; }
/* 5 予定日投票の詳細。候補ごとの札は左に揃え、縁から離す(poll-ui.js)。 */
.poll-detail .card-note { text-align: left; padding: 2px 14px; }
.poll-detail .card { padding: 4px 0; border: 1px solid var(--sep); }
.poll-detail .card > strong { display: block; padding: 10px 14px 4px; }
.poll-cand { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; padding: 10px 14px; }
.poll-cand > .form-field:first-child { grid-column: 1 / 3; }
.personal-form .form-field > input[type=checkbox] { min-height: 24px; height: 24px; margin: 0; }
.personal-error { color: var(--danger); font-size: calc(13 * var(--u)); }

.personal-confirm { padding: 14px; }
.personal-confirm[hidden] { display: none; }

.personal-fields { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }


/* 今週 / 通常。横送りはブラウザ標準のスクロールとスナップを使う。 */
.tt-switch[hidden], .tt-carousel > .grid[hidden] { display: none; }
.tt-switch { margin-bottom: 8px; display: flex; gap: 4px; padding: 3px; border-radius: var(--radius); background: var(--fill); }
.tt-switch button {
  flex: 1; min-height: 36px; border: 0; border-radius: calc(var(--radius) - 3px);
  background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600;
}
.tt-switch button[aria-pressed="true"] { background: var(--card); }
.tt-switch button:disabled { cursor: default; opacity: .6; }
.tt-carousel {
  display: flex; min-width: 0; overflow: hidden; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.tt-carousel.has-difference { overflow-x: auto; }
.tt-carousel::-webkit-scrollbar { display: none; }
body #pane-timetable .tt-carousel > .grid { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
@media (min-width: 980px) { #pane-timetable .tt-carousel { flex: 1 1 auto; min-height: 0; } }
body.day-sheet-mode #pane-timetable .tt-carousel { flex: 1 1 auto; min-height: 0; }