:root {
  /* Departure board: in the light theme a plain white one (2026-10-27: "白天应该是纯白色的"); the dark theme keeps the navy board */
  --board: #ffffff;
  --board-2: #f6f8fb; /* white with the faintest cool tint toward the list (2026-10-27: "不要太寡淡 底色微微有一点") */
  --board-line: #e1e5eb;
  --board-ink: #141821;
  --board-muted: #5e6572;
  --board-accent: #141821; /* the board's chosen values: ink (2026-10-29: amber is kept for the logo, the main button, the cart count and ＋) */
  --amber: #f5b544;
  --on-amber: #0e1726; /* words on an amber fill */
  --glass: 20, 24, 33; /* the tint of a fill or a hover on the board: ink on white, white on navy */
  --card-edge: #dfe3ea;
  --board-text: #2b313c; /* the board's sentence and notes */
  --board-edge: #c9ced8; /* an outlined button on the board */

  /* Page */
  --bg: #f3f5f8; /* a cool, barely-there tint under white cards: the cards and their words stand out */
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --ink: #0f131a;
  --muted: #4b5261; /* 7:1 on white, 6:1 on the tinted fills the small grey text sits on */
  --line: #e1e5eb;
  --accent: #0f131a; /* links and small accents: ink, underlined (2026-10-29) */
  --focus: #2563eb;

  /* Verdicts */
  --ok: #13703d;
  --ok-bg: #dcf3e5;
  --ok-solid: #22a05a;
  --ok-fill: #13703d; /* a fill that carries white text (6:1); the dot greens above are for marks, not for words, and neither theme changes it */
  --check: #2459a6; /* "Check first": blue on a pale blue (2026-10-29) */
  --check-bg: #e4ecf8;
  --check-solid: #4a7bd0;
  --no: #a8434a; /* "Doesn't fit": a soft red, quieter than a warning */
  --no-bg: #fbecee;
  --no-solid: #e0868b;
  --no-fill: #b0232f; /* the same for a red button */

  /* 24-hour bars */
  --track: #eef0f3;
  --night: #dfe2e7;
  --window: rgba(34, 160, 90, 0.16);
  --window-edge: rgba(34, 160, 90, 0.55);
  --sec-s: 62%; /* shortlist week chart: one hue per section */
  --sec-l: 46%;

  --shadow: 0 1px 2px rgba(20, 24, 33, 0.05), 0 6px 20px rgba(20, 24, 33, 0.06);
  --radius: 16px;
  --display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

/* dark: follows the system unless the visitor picked light (html[data-theme]); the copy after it is their own pick */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --board-line: #24324d;
    --board-ink: #f3efe6;
    --board-muted: #93a0b8;
    --board-accent: #f3efe6;
    --on-amber: #0a111e;
    --glass: 255, 255, 255;
    --card-edge: transparent;
    --board-text: #d9dfea;
    --board-edge: rgba(243, 239, 230, 0.6);
    --board: #0a111e;
    --board-2: #121c30;
    --bg: #0d1119;
    --surface: #151b27;
    --surface-2: #1a2130;
    --ink: #ece9e2;
    --muted: #98a0ad;
    --line: #262e3d;
    --accent: #ece9e2;
    --focus: #7aa2ff;
    --ok: #6fd69a;
    --ok-bg: #12301f;
    --check: #9dbdf2;
    --check-bg: #172640;
    --check-solid: #5b8be0;
    --no: #f68b91;
    --no-bg: #3a1619;
    --track: #232b3a;
    --night: #1b2230;
    --window: rgba(34, 160, 90, 0.22);
    --window-edge: rgba(111, 214, 154, 0.6);
    --sec-l: 60%;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --board-line: #24324d;
    --board-ink: #f3efe6;
    --board-muted: #93a0b8;
    --board-accent: #f5b544;
    --on-amber: #0a111e;
    --glass: 255, 255, 255;
    --card-edge: transparent;
    --board-text: #d9dfea;
    --board-edge: rgba(243, 239, 230, 0.6);
    --board: #0a111e;
    --board-2: #121c30;
    --bg: #0d1119;
    --surface: #151b27;
    --surface-2: #1a2130;
    --ink: #ece9e2;
    --muted: #98a0ad;
    --line: #262e3d;
    --accent: #4fc3b5;
    --focus: #7aa2ff;
    --ok: #6fd69a;
    --ok-bg: #12301f;
    --check: #f3c46a;
    --check-bg: #33270f;
    --no: #f68b91;
    --no-bg: #3a1619;
    --track: #232b3a;
    --night: #1b2230;
    --window: rgba(34, 160, 90, 0.22);
    --window-edge: rgba(111, 214, 154, 0.6);
    --sec-l: 60%;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) body { background: radial-gradient(1400px 700px at 70% 520px, rgba(80, 120, 255, 0.07), transparent 70%), var(--bg); }
  :where(:root:not([data-theme="light"])) .card, :where(:root:not([data-theme="light"])) .panel, :where(:root:not([data-theme="light"])) .blocker, :where(:root:not([data-theme="light"])) .search input { border-color: rgba(255, 255, 255, 0.06); }
  :where(:root:not([data-theme="light"])) .card { border: 1px solid rgba(255, 255, 255, 0.06); }
  :where(:root:not([data-theme="light"])) .card:hover { border-color: rgba(255, 255, 255, 0.14); }
  :where(:root:not([data-theme="light"])) .panel { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), var(--shadow); }
}
:where(:root[data-theme="dark"]) body { background: radial-gradient(1400px 700px at 70% 520px, rgba(80, 120, 255, 0.07), transparent 70%), var(--bg); }
  :where(:root[data-theme="dark"]) .card, :where(:root[data-theme="dark"]) .panel, :where(:root[data-theme="dark"]) .blocker, :where(:root[data-theme="dark"]) .search input { border-color: rgba(255, 255, 255, 0.06); }
  :where(:root[data-theme="dark"]) .card { border: 1px solid rgba(255, 255, 255, 0.06); }
  :where(:root[data-theme="dark"]) .card:hover { border-color: rgba(255, 255, 255, 0.14); }
  :where(:root[data-theme="dark"]) .panel { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), var(--shadow); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Board (header) ---------- */
.board {
  background: linear-gradient(180deg, var(--board) 0%, var(--board-2) 100%);
  color: var(--board-ink);
  border-bottom: 1px solid var(--board-line);
}
.board-inner { max-width: 1280px; margin: 0 auto; padding: 22px 28px 26px; }

.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; cursor: pointer; border-radius: 12px; }
.brand:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
/* the mark: three blocks that make a tick (public/icons/mark.svg), the same on light and dark */
.logo { width: 34px; height: 34px; flex: none; display: block; }
.name { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.for {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--board-muted);
  border: 1px solid var(--board-line); border-radius: 999px; padding: 2px 9px;
}

.clocks { display: flex; gap: 10px; flex-wrap: wrap; }

.board h1 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
  font-size: clamp(28px, 3.6vw, 44px); margin: 30px 0 14px; max-width: 26ch; text-wrap: balance;
}
.board h1:lang(zh) { word-break: keep-all; }

.situation {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px; row-gap: 4px;
  font-size: clamp(17px, 1.9vw, 22px); line-height: 1.9; color: var(--board-text); max-width: 1000px;
}
.situation .break { flex-basis: 100%; height: 0; }
.field select {
  field-sizing: content; max-width: 70vw;
  font: inherit; font-weight: 600; color: var(--board-accent); background: transparent;
  border: none; border-bottom: 2px dashed rgba(245, 181, 68, 0.7); border-radius: 0;
  padding: 0 22px 0 2px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--amber) 50%), linear-gradient(135deg, var(--amber) 50%, transparent 50%);
  background-position: calc(100% - 9px) 58%, calc(100% - 4px) 58%; background-size: 5px 5px; background-repeat: no-repeat;
}
.field select:hover { border-bottom-style: solid; }
.field select option, .field select optgroup { color: #141821; background: #fff; }

/* World map: a quiet backdrop in the right ~42% of the header, fading out to the left, never behind the text and form on the left.
   Land is faint (10% of one flat colour: the header's dimmest text, #93a0b8, still reads at 4.5:1 on a lit dot); the one bright dot is where the student will be. It does not animate. */
.board { position: relative; }
.board-inner { position: relative; z-index: 1; }

/* The text and the form keep to the left of the map: the left edge of .board-inner's content to 16px short of the map */
@media (min-width: 768px) {
  .board-inner { --board-left: max(28px, calc(50vw - 612px)); }
  .board h1,
.situation,
.busy-row,
.about-row { max-width: min(1000px, calc(58vw - var(--board-left) - 16px)); }
  .board h1 { max-width: min(26ch, calc(58vw - var(--board-left) - 16px)); }

  .board h1 { margin-top: 6px; }
}

/* Scoreboard tiles */
.scoreboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }

.board-note { grid-column: 1 / -1; font-size: 13px; color: var(--board-muted); margin-top: 2px; }
.loading { grid-column: 1 / -1; display: grid; gap: 10px; padding: 14px 0 4px; color: var(--board-text); }
.loading .hint { font-size: 13px; color: var(--board-muted); }
.loading progress {
  width: 100%; max-width: 420px; height: 6px; border-radius: 999px; overflow: hidden;
  appearance: none; -webkit-appearance: none; border: none; background: var(--board-line);
}
.loading progress::-webkit-progress-bar { background: var(--board-line); }
.loading progress::-webkit-progress-value { background: var(--amber); border-radius: 999px; }
.loading progress::-moz-progress-bar { background: var(--amber); }

/* ---------- Banner ---------- */
.banner {
  max-width: 1224px; margin: 16px auto 0; padding: 11px 16px; border-radius: 12px;
  background: var(--check-bg); color: var(--check); font-weight: 600;
}

/* ---------- Layout ---------- */
.layout {
  max-width: 1280px; margin: 0 auto; padding: 12px 28px 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start;
}
.side { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow: auto; border-radius: var(--radius); }

.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* The filters above the list (filters-ui.js, core/list-filters.js): the bar of four, the chips, and the "More filters" panel */
.sec-filters { flex: 1 1 100%; display: grid; gap: 10px; min-width: 0; }
.sec-filters[hidden] { display: none; }
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fsel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 100%; padding: 0 8px 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow);
  font-size: 13px; font-weight: 650; color: var(--muted);
}
.fsel:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.fsel-k { white-space: nowrap; }
.fsel select {
  min-width: 0; max-width: 250px; min-height: 40px; padding: 0 18px 0 2px; font: inherit; font-size: 14px; font-weight: 650; color: var(--ink);
  -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; border: 0; outline: none; border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%238a909c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 4px center;
  field-sizing: content; /* as wide as the option shown, not the longest one (browsers without it use the longest) */
}
.fsel select option:disabled { color: var(--muted); }
.fbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; font: inherit; font-size: 14px; font-weight: 650;
  white-space: nowrap; cursor: pointer; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
}
.fbtn:hover:not(:disabled) { border-color: var(--muted); }
.fbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fbtn .fn { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.fbtn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.fbtn[aria-pressed="true"] .fn { color: inherit; }
.fbtn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.fmore { margin-inline-start: auto; }
.fbtn-gpa .fl-long { display: none; } /* "低考试占比": half a phone's width cannot hold the full words (below) */
.fcount {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: var(--surface); font: 700 12px/1 var(--mono);
}
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fchip { display: inline-flex; align-items: center; max-width: 100%; min-height: 30px; padding: 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink); background: none; border: 0; }
.fchip-in {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; max-width: 100%; padding: 0 8px 0 12px; font-size: 12.5px; font-weight: 650; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.fchip:focus-visible { outline: none; }
.fchip:focus-visible .fchip-in { outline: 2px solid var(--focus); outline-offset: 2px; }
.fchip:hover .fchip-in { border-color: var(--accent); }
.flink:focus-visible, .fp-close:focus-visible, .fp-opt:focus-visible, .fp-show:focus-visible, .fp-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fchip .x { font-size: 16px; line-height: 1; color: var(--muted); }
.fchip:hover .x { color: var(--no); }
.fchip .vdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vdot.takeable { background: var(--ok-solid); }
.vdot.check { background: var(--check-solid); }
.vdot.no { background: var(--no-solid); }
.flink { font: inherit; font-size: 13px; font-weight: 650; color: var(--accent); background: none; border: 0; padding: 6px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.flink[hidden] { display: none; }
/* "More filters": a panel that slides in from the right and leaves the cards beside it; a full-height sheet on a phone */
.filters-panel {
  /* a card floating at the right: it ends above the "Ask Takeable" button, which stays in reach, and leaves the cards beside it */
  position: fixed; top: 76px; right: 16px; bottom: 82px; z-index: 28; width: min(380px, calc(100vw - 32px)); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(14, 23, 38, 0.28); overflow: hidden;
  transform: translateX(calc(100% + 32px)); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.filters-panel.open { transform: none; visibility: visible; transition: transform 0.22s ease; }
.fp-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.fp-head h2 { flex: 1; margin: 0; font-family: var(--display); font-size: 18px; }
.fp-close {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 50%;
}
.fp-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; }
.fp-group { padding: 14px 0 2px; border-bottom: 1px solid var(--line); }
.fp-group > h3 { margin: 0 0 10px; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.fp-field { margin: 0 0 14px; min-width: 0; }
.fp-label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 650; }
.fp-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.fp-opt {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; padding: 4px 12px; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.fp-opt .n { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fp-opt:hover:not(:disabled) { border-color: var(--muted); }
.fp-opt[aria-pressed="true"] { font-weight: 650; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.fp-opt[aria-pressed="true"] .n { color: inherit; }
.fp-opt:disabled { opacity: 0.45; cursor: not-allowed; background: var(--surface-2); }
.fp-select {
  width: 100%; min-height: 42px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-overflow: ellipsis;
}
.fp-select option:disabled { color: var(--muted); }
.fp-note { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.fp-hint { margin: -4px 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.fp-hint + .fp-hint { margin-top: -6px; }
.fp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--surface);
}
.fp-show { flex: 1 1 auto; min-height: 44px; padding: 0 18px; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--board-ink); cursor: pointer; background: var(--board); border: 1px solid var(--board-line); border-radius: 12px; }
.fp-foot .flink[hidden] + .fp-show { margin-inline-start: auto; }
.filter-note:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .filters-panel, .filters-panel.open { transition: none; } }
@media (pointer: coarse) { .fchips { gap: 0 6px; } .fsel select, .fbtn, .fsel, .fchip, .fp-opt, .flink, .fp-show { min-height: 44px; } .fp-close { width: 44px; height: 44px; } }
@media (max-width: 640px) {
  .fbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fsel { min-width: 0; }
  .fsel select { flex: 1 1 auto; max-width: none; width: 100%; }
  .fmore { margin-inline-start: 0; justify-content: center; }
  .fbtn { justify-content: center; }
  .filters-panel { top: 0; right: 0; bottom: 0; width: 100vw; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; transform: translateY(105%); }
  html.fp-open .chat-launcher { display: none; } /* the sheet is the screen: the chat button comes back when it closes */
  .filters-panel.open { transform: none; }
  html.fp-open { overflow: hidden; }
}
.search { position: relative; flex: 1 1 320px; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-52%); color: var(--muted); font-size: 18px; }
.search input {
  width: 100%; font: inherit; padding: 12px 14px 12px 40px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
.filter-note { font-size: 14px; color: var(--muted); }
.filter-note button {
  border: none; background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 12px;
  box-shadow: var(--shadow); cursor: pointer; font-weight: 600;
}

/* ---------- Groups and cards ---------- */
.group { margin-top: 26px; }
.group-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; }
.group-head h2 {
  margin: 0; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.group-head .dot { width: 10px; height: 10px; border-radius: 50%; }
.group-head.takeable .dot { background: var(--ok-solid); }
.group-head.check .dot { background: var(--check-solid); }
.group-head.no .dot { background: var(--no-solid); }
.group-head .n { color: var(--muted); font-family: var(--mono); font-size: 13px; }
.group-head.school h2 { text-transform: none; letter-spacing: 0; font-size: 16px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 270px auto; gap: 8px 22px; align-items: center;
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px 14px 20px; cursor: pointer;
  border: 1px solid var(--card-edge); transition: border-color 0.12s ease, transform 0.12s ease;
}
.card:hover { border-color: var(--line); transform: translateY(-1px); }
.card.open { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow); }
.card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.info { min-width: 0; display: grid; gap: 4px; }
.meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.code {
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; white-space: nowrap;
}
/* a course's name, the line read first: larger and heavier than the lines under it (2026-10-27: "课程字体可以更清晰一些") */
.title { font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta .sec { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.why { display: flex; gap: 7px; align-items: baseline; font-size: 14.5px; color: var(--muted); }
.why .mark { font-weight: 800; font-size: 12px; }
.why.fail { color: var(--no); }
.why.check { color: var(--check); }
.why.pass { color: var(--ok); }
.why.info { color: var(--muted); }
.why.info .mark { font-style: italic; font-family: var(--mono); }
/* the next step after a reason, and the one-tap change that settles it */
.why .step, .reason-item .step { color: var(--muted); font-weight: 400; }
.why-action { margin-left: 8px; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; vertical-align: baseline; }
.why-action:hover { background: var(--board-2); }
@media (pointer: coarse) { .why-action { min-height: 44px; margin: 6px 0 0; display: inline-flex; align-items: center; } }

.when { display: grid; gap: 5px; min-width: 0; }
.when-text { font-size: 13.5px; min-width: 0; }
.when-text .local { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.ny-line { font-size: 12.5px; color: var(--muted); }
/* a class on another clock than the student's: its own clock's time first, the student's second, one line each so the names and the times
   line up (app.js clocksHtml, schedule-ui.js whenLine). The "·" between them is for lines that are not stacked. */
.when-text.clocks, .week-when { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 8px; align-items: baseline; }
.week-when { display: inline-grid; vertical-align: top; }
.clock-pair { display: contents; }
.clock-name { font-size: 11.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.when-text .site { font-family: var(--mono); color: var(--ink); }
.when-text.clocks .line-sep, .week-when .line-sep { display: none; }
.detail-clocks { font-size: 14px; } /* the details' time line on two clocks: the class's own, then the student's */

.right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; white-space: nowrap; letter-spacing: 0.01em; border: 1px solid transparent;
}
/* a verdict reads first on the card: its own colour, a tinted fill and an edge in that colour */
.chip.takeable { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.chip.check { color: var(--check); background: var(--check-bg); border-color: color-mix(in srgb, var(--check) 28%, transparent); }
.chip.no { color: var(--no); background: var(--no-bg); border-color: color-mix(in srgb, var(--no) 28%, transparent); }

.star {
  border: none; background: transparent; cursor: pointer; font-size: 20px; line-height: 1; color: var(--muted);
  padding: 5px 7px; border-radius: 8px;
}
.star:hover { color: var(--ink); background: var(--surface-2); }
.star.on { color: var(--check); } /* the amber of the dots is 2.4:1 on white; the text amber is 6:1 */
.star.labelled {
  font-size: 13px; font-weight: 650; border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; color: var(--ink);
}
.star.labelled.on { color: var(--check); border-color: var(--check-solid); background: var(--check-bg); }

/* ---------- 24-hour bar ---------- */
.dial { position: relative; height: 20px; border-radius: 6px; background: var(--track); overflow: hidden; }
.dial .night { position: absolute; top: 0; bottom: 0; background: var(--night); }
.dial .window {
  position: absolute; top: 0; bottom: 0; background: var(--window);
  border-left: 1.5px dashed var(--window-edge); border-right: 1.5px dashed var(--window-edge);
}
.dial .block { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; min-width: 3px; }
.dial .block.fit { background: linear-gradient(180deg, #34c06e, var(--ok-solid)); box-shadow: 0 0 10px rgba(34, 160, 90, 0.55); }
.dial .block.miss { background: linear-gradient(180deg, #f2646a, var(--no-solid)); box-shadow: 0 0 10px rgba(224, 72, 79, 0.55); }
.dial .block.anytime {
  left: 0; right: 0; top: 7px; bottom: 7px; border-radius: 999px; opacity: 0.85;
  background: repeating-linear-gradient(90deg, var(--ok-solid) 0 6px, transparent 6px 10px);
}
.dial .block.unknown { left: 0; right: 0; top: 8px; bottom: 8px; background: repeating-linear-gradient(90deg, var(--check-solid) 0 4px, transparent 4px 9px); }
.dial .now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--focus); opacity: 0.7; }
.ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: -2px; }

/* ---------- Side panels ---------- */
.panel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.panel-head h3 { margin: 6px 0 0; font-family: var(--display); font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.icon-btn {
  border: none; background: var(--surface-2); color: var(--ink); width: 34px; height: 34px; border-radius: 50%;
  font-size: 20px; line-height: 1; cursor: pointer; flex: none;
}
.icon-btn:hover { background: var(--line); }
.icon-btn.small { width: 28px; height: 28px; font-size: 16px; }
.panel-verdict { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0 12px; }
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.reason-item { display: grid; grid-template-columns: 22px 1fr; gap: 9px; font-size: 14px; align-items: start; }
.reason-item .mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.reason-item.pass .mark { color: var(--ok); background: var(--ok-bg); }
.reason-item.check .mark { color: var(--check); background: var(--check-bg); }
.reason-item.fail .mark { color: var(--no); background: var(--no-bg); }
.reason-item.info { color: var(--muted); }
.reason-item.info .mark { color: var(--muted); background: var(--track); font-style: italic; font-family: var(--mono); }
.reason-item a, .links a, .footer a { color: var(--accent); }
.checked { color: var(--muted); font-size: 12px; }
.detail h4, .shortlist h4 {
  margin: 22px 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700;
}
.week { display: grid; grid-template-columns: 34px 1fr; gap: 6px 10px; align-items: center; }
.week .day { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.week .day.on { color: var(--ink); font-weight: 700; }
.week .dial { height: 16px; }
.week .ticks { grid-column: 2; }
.week-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; }
.week-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 1px; }
.dial .block.sec, .week-key i.sec { background: hsl(var(--h) var(--sec-s) var(--sec-l)); }
.dial .block.sec { box-shadow: none; opacity: 0.88; }
.dial .block.clash, .week-legend i.clash {
  background: repeating-linear-gradient(135deg, var(--no-solid) 0 3px, transparent 3px 6px), color-mix(in srgb, var(--no-solid) 28%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--no-solid);
}
.dial .block.clash { z-index: 1; top: 1px; bottom: 1px; border-radius: 3px; }
.week-key { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.week-key i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.meetings { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; }
.meetings th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 4px 0; }
.meetings td, .meetings th { padding-right: 12px; }
.meetings td { padding-top: 6px; padding-bottom: 6px; border-top: 1px solid var(--line); }
.mono-num { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.muted { color: var(--muted); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 0; font-size: 14px; }
.facts-key { margin: 14px 0 6px; }
/* the details' folded sections: a heading row that opens, with a gist beside it */
.fold { border-top: 1px solid var(--line); }
.fold summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 42px; font-weight: 650; font-size: 14px; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform 0.15s; }
.fold[open] > summary::before { transform: rotate(90deg); }
.fold-gist { color: var(--muted); font-weight: 400; font-size: 13px; }
.fold-body { padding: 0 0 14px; }
.fold-body > h4:first-child { margin-top: 4px; }
@media (pointer: coarse) { .fold summary { min-height: 44px; } }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; }
.mono { font-family: var(--mono); }
blockquote {
  margin: 0; padding: 11px 14px; border-left: 3px solid var(--check-solid); background: var(--surface-2);
  border-radius: 0 10px 10px 0; font-size: 14px;
}
.description { font-size: 14px; color: var(--muted); margin: 0; white-space: pre-line; }
.spinner {
  display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent); animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.links { margin: 18px 0 0; font-size: 14px; font-weight: 600; }

/* Shortlist as a boarding pass */
.shortlist { padding: 0; overflow: hidden; }
.pass-head { background: var(--board); color: var(--board-ink); padding: 16px 20px 14px; }
.pass-head .kicker { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--board-accent); font-weight: 700; }
.pass-head .pass-title { display: block; margin-top: 2px; font-family: var(--display); font-size: 20px; font-weight: 700; }
.sheet-toggle {
  all: unset; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; cursor: default;
}
.badge {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--amber); color: var(--on-amber); font-size: 12.5px; font-weight: 800; font-family: var(--mono);
}
.pass-body { padding: 8px 20px 18px; }
.pass-body > p { margin: 12px 0 4px; font-size: 14px; }
.short-items { list-style: none; margin: 0; padding: 0; }
.short-item { display: flex; align-items: center; gap: 6px; border-bottom: 1px dashed var(--line); }
.short-open {
  flex: 1; min-width: 0; text-align: left; border: none; background: transparent; color: inherit;
  padding: 11px 4px; cursor: pointer; display: grid; gap: 4px; border-radius: 8px;
}
.short-open:hover { background: var(--surface-2); }
.short-open .code { justify-self: start; }
.short-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.short-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; }
.short-item.clash { box-shadow: inset 3px 0 0 var(--no-solid); }
.short-item.clash .short-open { padding-left: 10px; }
.clash-tag { font-size: 11.5px; font-weight: 700; color: var(--no); background: var(--no-bg); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.clashes { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--no-bg); color: var(--no); font-size: 13px; }
.clashes > ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.clashes details ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.clashes summary { cursor: pointer; list-style: none; }
.clashes summary::-webkit-details-marker { display: none; }
.more-count { font-weight: 700; white-space: nowrap; text-decoration: underline dotted; }
.more-count::after { content: " ▾"; }
details[open] .more-count::after { content: " ▴"; }
.short-meta .chip { font-size: 11.5px; padding: 2px 8px; }
.perforation { position: relative; height: 0; border-top: 2px dashed var(--line); margin: 14px -20px 0; }
.perforation::before, .perforation::after {
  content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg);
}
.perforation::before { left: -10px; }
.perforation::after { right: -10px; }
.short-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 2px 12px; }
.short-total span { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.short-total b { font-family: var(--mono); font-size: 24px; }
.primary {
  width: 100%; border: none; border-radius: 12px; padding: 13px 14px; font-weight: 700; cursor: pointer;
  background: var(--board); color: var(--board-ink); letter-spacing: 0.01em;
}
.primary:hover { background: var(--board-2); }
.primary.done { background: var(--ok-fill); color: #fff; }
.pass-actions { display: grid; gap: 8px; }
.secondary {
  width: 100%; border: 1.5px solid var(--ink); border-radius: 12px; padding: 11px 14px; font-weight: 650; cursor: pointer;
  background: transparent; color: var(--ink); letter-spacing: 0.01em;
}
.secondary:hover { background: var(--surface-2); }
.secondary.done { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.small { font-size: 12.5px !important; }
.pass-body .small { margin: 10px 0 0; }

/* Registration day: backups, permission numbers and the steps (collapsed until asked for) */
.regday { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.reg-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px;
  border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 12px;
}
.reg-toggle b { display: block; font-family: var(--display); font-size: 15px; }
.reg-hint { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); }
.reg-chev::after { content: "▾"; color: var(--muted); }
.reg-toggle[aria-expanded="true"] .reg-chev::after { content: "▴"; }
.reg-body { padding: 2px 14px 14px; border-top: 1px dashed var(--line); }
.reg-body > .small { margin: 10px 0 0; }
.regday .code { background: var(--surface); }
.reg-body > .secondary { margin-top: 14px; }
.reg-items { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 16px; }
.reg-item { display: grid; gap: 6px; min-width: 0; }
.reg-item > p { margin: 0; }
.reg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.reg-open { border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; min-width: 0; }
.reg-head .reg-open { font-weight: 600; font-size: 14px; }
.reg-head .reg-open:hover .code { text-decoration: underline; }
.reg-crn { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.reg-flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.reg-flag { font-size: 13px; }
.reg-quote { color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
.flag-tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: var(--check); background: var(--check-bg);
}
.flag-tag.corequisite { color: var(--ink); background: var(--track); }
.reg-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; margin-top: 2px; }
.reg-backups { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.reg-backup { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.reg-backup .reg-open { flex: 1; display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; }
.reg-backup .reg-open:hover { background: var(--surface-2); }
.reg-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.reg-line .chip { font-size: 11.5px; padding: 2px 8px; }
.reg-time { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.reg-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.reg-backup .star { margin-right: 4px; }
.reg-steps { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; }
.reg-steps a, .reg-links a { color: var(--accent); white-space: nowrap; }
.reg-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; font-size: 13.5px; font-weight: 600; }

/* Blocker and empty states */
.blocker {
  margin-top: 22px; padding: 16px 18px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  border: 1px solid var(--no-bg);
}
.blocker .icon { font-size: 22px; }
.blocker p { margin: 0; flex: 1 1 320px; }
.ghost {
  border: 1.5px solid var(--ink); color: var(--ink); background: transparent; font-weight: 650;
  padding: 8px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.ghost:hover { background: var(--ink); color: var(--surface); }
.more {
  margin-top: 10px; width: 100%; padding: 12px; border-radius: 12px; border: 1px dashed var(--line);
  background: transparent; color: var(--ink); font-weight: 600; cursor: pointer;
}
.more:hover { background: var(--surface); }
.skeleton { margin-top: 26px; }
.ghost-card { height: 108px; cursor: default; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.ghost-card::before { display: none; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ghost-card, .spinner { animation: none; } .card { transition: none; } }

.empty {
  margin-top: 22px; padding: 30px; text-align: center; color: var(--muted);
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
}

/* Footer */
.footer { max-width: 1280px; margin: 0 auto; padding: 0 28px 36px; color: var(--muted); font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .card { grid-template-columns: minmax(0, 1fr) auto; }
  .when { grid-column: 1 / -1; grid-row: 2; }
  .right { grid-row: 1; grid-column: 2; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; }
  body.detail-open .side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 20; max-height: 86vh; overflow: auto;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.3); border-radius: 20px 20px 0 0;
  }
  body.detail-open .side .panel { border-radius: 20px 20px 0 0; }
  body:not(.detail-open) .side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 15; max-height: 72vh; overflow: auto;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25); border-radius: 20px 20px 0 0;
  }
  body:not(.detail-open) .side .panel { border-radius: 20px 20px 0 0; }
  body:not(.detail-open):not(.sheet-open) .pass-body { display: none; }
  .sheet-toggle { cursor: pointer; }
  .sheet-toggle::after { content: "▴"; color: var(--board-muted); margin-left: auto; }
  body.sheet-open .sheet-toggle::after { content: "▾"; }
  .footer { padding-bottom: 110px; }
}

@media (max-width: 640px) {
  .board-inner { padding: 18px 16px 20px; }

  .board h1 { margin-top: 12px; max-width: none; }
  :lang(zh) .board h1 { word-break: keep-all; } /* the Chinese line breaks at its comma, not inside a phrase */
  .scoreboard { gap: 8px; }

  .layout { padding: 16px 16px 48px; }
  .footer { padding-left: 16px; padding-right: 16px; }
  .card { padding: 13px 13px 13px 17px; gap: 8px 12px; }
}

/* ---------- Ask Takeable: chat launcher and drawer (public/chat.js) ---------- */
.chat-launcher[hidden], .chat [hidden] { display: none !important; }
.chat-launcher {
  position: fixed; right: calc(var(--dock-w) + 20px); bottom: 20px; z-index: 12;
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px 0 14px;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--amber); color: var(--on-amber); font-weight: 700; font-size: 14.5px; letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(14, 23, 38, 0.25), 0 8px 24px rgba(14, 23, 38, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.launcher-yields .chat-launcher { visibility: hidden; } /* landing-ui.js: it would cover the home page's main buttons */
.chat-launcher:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(14, 23, 38, 0.25), 0 12px 28px rgba(14, 23, 38, 0.34); }
.chat-launcher.unread::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--no-solid); border: 2px solid var(--amber);
  box-sizing: content-box; position: absolute; top: -3px; right: -1px;
}
/* the side panel and footer end above the launcher instead of running under it */
@media (min-width: 901px) {
  .side { max-height: calc(100vh - 36px - 62px); }
  .footer { padding-bottom: 84px; }
}

.chat {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(var(--chat-eff), 100vw);
  display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  border-left: 1px solid var(--line); box-shadow: -14px 0 44px rgba(14, 23, 38, 0.22);
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.chat.open { transform: none; visibility: visible; transition: transform 0.22s ease; }
.chat-head {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 14px 13px 20px;
  background: var(--board); color: var(--board-ink); border-bottom: 1px solid var(--board-line);
}
.chat-title { flex: 1; min-width: 0; }
.chat-title .kicker { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--board-accent); font-weight: 700; }
.chat-title h2 { margin: 1px 0 0; font-family: var(--display); font-size: 20px; line-height: 1.2; font-weight: 700; }
.chat-title .chat-model { margin: 2px 0 0; font-size: 12px; line-height: 1.3; color: var(--board-muted); }
.chat-new {
  border: 1px solid var(--board-line); background: rgba(var(--glass), 0.05); color: var(--board-ink);
  font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.chat-new:hover { background: rgba(var(--glass), 0.12); }
.chat-head .icon-btn { background: rgba(var(--glass), 0.08); color: var(--board-ink); }

/* the history panel (chat-history-ui.js): over the conversation, which comes back as it was */
.chat.history-open .chat-log, .chat.history-open .chat-composer, .chat.history-open .chat-activity, .chat.history-open .chat-notice { display: none; }
.chat-history { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-history-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-history-head h3 { margin: 0; font-family: var(--display); font-size: 17px; }
.chat-new.dark, .chat-history-head .chat-new { border-color: var(--line); background: var(--surface); color: var(--ink); }
.chat-new.dark:hover, .chat-history-head .chat-new:hover { background: var(--surface-2); }
.chat-history-note { margin: 0; font-size: 13.5px; color: var(--muted); }
.chat-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chat-history-item { display: flex; align-items: stretch; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.chat-history-item.current { border-color: var(--accent); }
.chat-history-open { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; border: none; background: transparent; color: inherit; font: inherit; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.chat-history-open:hover { background: var(--surface-2); }
.chat-history-title { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-history-when { font-size: 12px; color: var(--muted); }
.chat-history-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.chat-history-act { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 650; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.chat-history-act:hover { background: var(--surface-2); color: var(--ink); }
.chat-history-act.danger:hover { color: var(--no); }
.chat-history-form { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; }
.chat-history-rename { flex: 1 1 160px; min-width: 0; min-height: 36px; padding: 0 10px; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.chat-history-clear { align-self: flex-start; border: none; background: transparent; color: var(--no); font: inherit; font-size: 13px; font-weight: 650; padding: 6px 0; cursor: pointer; text-decoration: underline; }
.chat-import { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 16px 0; padding: 10px 12px; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.chat-import span { flex: 1 1 100%; }
.chat-head .icon-btn:hover { background: rgba(var(--glass), 0.18); }

.chat-log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 10px;
  display: flex; flex-direction: column; gap: 12px;
}
.chat-log:focus { outline: none; }
/* "Plan my next semester" asked in the chat (plan-ui.js): Takeable's questions on the left, the answers on the right, the choices
   as buttons under the question; the conversation and the composer wait until it ends */
.chat-plan { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.chat-plan[hidden] { display: none; }
body.planning .chat-log, body.planning .chat-composer, body.planning .chat-notice, body.planning .chat-activity { display: none !important; }
.cp-msg { display: flex; align-items: flex-start; gap: 8px; }
.cp-msg.me { justify-content: flex-end; align-items: center; }
.cp-ava { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); }
.cp-ava svg { width: 17px; height: 17px; }
.cp-bubble { max-width: 84%; padding: 9px 13px; border-radius: 4px 16px 16px 16px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.cp-msg.me .cp-bubble { border-radius: 16px 4px 16px 16px; border-color: transparent; background: var(--amber); color: #0e1726; }
.cp-edit { min-height: 32px; font-size: 12.5px; color: var(--muted); }
.chat-plan .plan-step .plan-q { margin: 0; font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
.chat-plan .plan-q:focus { outline: none; }
.chat-plan .plan-ask, .chat-plan .plan-done { display: grid; gap: 10px; }
.cp-answers { display: grid; gap: 8px; padding-left: 36px; }
.chat-plan .cp-answers .plan-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; grid-template-columns: none; }
.chat-plan .cp-answers .plan-choice { width: auto; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 40px; padding: 7px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s, background-color .15s; }
.chat-plan .plan-choice b { font-weight: 650; }
.chat-plan .plan-choice span { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.chat-plan .plan-choice:hover { border-color: var(--amber); transform: translateY(-1px); }
.chat-plan .plan-choice.on { background: color-mix(in srgb, var(--amber) 22%, var(--surface)); border-color: var(--amber); }
.chat-plan .plan-majors { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chat-plan .plan-major { min-height: 40px; padding: 7px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.chat-plan .plan-major:hover { border-color: var(--amber); }
.chat-plan .plan-major.on { background: color-mix(in srgb, var(--amber) 22%, var(--surface)); border-color: var(--amber); }
.chat-plan .plan-search { margin: 0; }
.cp-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--check-bg); color: var(--check); font-size: 11.5px; font-weight: 700; }
.cp-minor { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 650; }
.cp-minor .link-btn { min-width: 32px; min-height: 32px; font-size: 18px; text-decoration: none; color: var(--muted); }
.chat-plan .plan-actions .hero-primary { min-height: 44px; }
.chat-plan p { margin: 0; }
@media (pointer: coarse), (max-width: 767px) { /* a finger's target */
  .chat-plan .cp-answers .plan-choice, .chat-plan .plan-major { min-height: 44px; }
  .cp-edit, .chat-plan .cp-answers .link-btn { min-height: 44px; min-width: 44px; }
}
.chat-plan .plan-choice:focus-visible, .chat-plan .plan-major:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .chat-plan .plan-ask:last-child, .chat-plan .plan-done:last-child { animation: cp-in 0.35s cubic-bezier(.2,.8,.2,1) both; }
  .chat-plan .plan-ask:last-child .cp-answers > * { animation: cp-in 0.35s 0.12s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes cp-in { from { opacity: 0; transform: translateY(10px); } }
}
.chat-msg { display: flex; flex-direction: column; gap: 6px; max-width: 94%; min-width: 0; }
.chat-msg.user { align-self: flex-end; align-items: flex-end; max-width: 86%; }
.chat-msg.assistant { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
.chat-msg.user .chat-bubble {
  background: var(--board); color: var(--board-ink); border: 1px solid var(--board-line);
  border-bottom-right-radius: 5px; white-space: pre-wrap;
}
.chat-msg.assistant .chat-bubble {
  background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: var(--shadow);
}
.chat-bubble p { margin: 0; }
.chat-bubble p + p, .chat-bubble ul, .chat-bubble ol, .chat-bubble :is(ul, ol) + p { margin-top: 8px; }
.chat-bubble :is(ul, ol) { margin-bottom: 0; padding-left: 20px; }
.chat-bubble li + li { margin-top: 3px; }
/* the assistant's course tables (chat.js fillTable): a row per course, scrolled sideways in a narrow chat */
.chat-msg.assistant:has(.md-table) { align-self: stretch; align-items: stretch; max-width: 100%; }
.chat-msg.assistant:has(.md-table) > .chat-bubble { width: 100%; } /* a definite width: the table scrolls inside it, the bubble never grows past the chat */
.chat-bubble .md-table { max-width: 100%; overflow-x: auto; margin: 6px 0 0; }
.chat-bubble .md-table + p, .chat-bubble p + .md-table { margin-top: 8px; }
.chat-bubble table { border-collapse: collapse; width: 100%; font-size: 13px; line-height: 1.4; overflow-wrap: normal; }
.chat-bubble :is(th, td) { padding: 5px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.chat-bubble th { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.chat-bubble td:first-child { min-width: 6.5em; }
.chat-bubble td code { white-space: nowrap; font-size: 12px; padding: 0 4px; }
.chat-bubble tbody tr:last-child td { border-bottom: 0; }
.chat-bubble .md-notes { margin-top: 8px; font-size: 13px; color: var(--muted); }
.chat-bubble .md-notes summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; font-weight: 650; color: var(--ink); }
.chat-bubble .md-notes summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chat-bubble .md-notes p + p, .chat-bubble .md-notes :is(ul, ol) { margin-top: 6px; }
.chat-bubble code {
  font-family: var(--mono); font-size: 0.88em; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 0 5px;
}
.chat-chip {
  font: inherit; font-family: var(--mono); font-size: 0.86em; font-weight: 700; line-height: 1.4; white-space: nowrap;
  color: var(--accent); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 0 6px; margin: 0 1px; cursor: pointer;
}
.chat-chip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }

.chat-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.chat-note.error {
  align-self: stretch; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13.5px; line-height: 1.4;
  color: var(--no); background: var(--no-bg); padding: 9px 13px; border-radius: 12px;
}
.chat-note.error button {
  border: 1.5px solid currentColor; background: transparent; color: inherit; font-weight: 650; font-size: 13px;
  padding: 3px 11px; border-radius: 999px; cursor: pointer;
}

.chat-empty { display: grid; gap: 9px; }
.chat-empty p { margin: 0 0 4px; font-size: 14.5px; color: var(--muted); }
.chat-starter {
  text-align: left; font: inherit; font-size: 14.5px; font-weight: 550; line-height: 1.35; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; box-shadow: var(--shadow);
}
.chat-starter:hover { border-color: var(--accent); }

.chat-notice { flex: 0 1 auto; min-height: 0; overflow-y: auto; margin: 16px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); align-self: stretch; font-size: 14.5px; }
.chat-notice h3 { margin: 0 0 8px; font-family: var(--display); font-size: 17px; }
.chat-notice p { margin: 0 0 10px; color: var(--muted); }
.chat-notice code { font-family: var(--mono); font-size: 0.88em; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; }
.chat-notice .secondary { width: auto; padding: 8px 16px; margin-top: 4px; }

.chat-activity { flex: none; min-height: 26px; padding: 2px 20px 4px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.chat-activity:not(:empty)::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; animation: chat-pulse 1.1s ease-in-out infinite;
}
@keyframes chat-pulse { 50% { opacity: 0.25; transform: scale(0.7); } }

.chat-composer {
  flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: end;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg);
}
.chat-composer textarea {
  font: inherit; font-size: 15px; line-height: 1.4; color: var(--ink); resize: none; min-height: 44px; max-height: calc(6 * 1.4em + 22px); overflow-y: auto; /* grows to six lines */
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow);
}
.chat-composer textarea:disabled { opacity: 0.6; }
.chat-composer textarea::placeholder { color: var(--muted); }
.chat-send, .chat-stop { height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 700; cursor: pointer; }
.chat-send { border: none; background: var(--amber); color: var(--on-amber); }
.chat-send:hover { filter: brightness(1.05); }
.chat-stop { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.chat-stop:hover { background: var(--surface-2); }
.chat-add {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-bottom: 2px; padding: 0; border-radius: 50%;
  color: var(--accent); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer;
}
.chat-add:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.chat-add:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-mic {
  position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  color: var(--accent); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer;
}
.chat-mic[hidden] { display: none; }
.chat-mic:hover:not(:disabled) { border-color: var(--accent); }
.chat-mic:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-mic[aria-pressed="true"] { color: #fff; background: #d92d20; border-color: #d92d20; }
.chat-mic[aria-pressed="true"]::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .chat-mic[aria-pressed="true"] { animation: chat-mic-pulse 1.4s ease-out infinite; }
}
@keyframes chat-mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0.5); } 100% { box-shadow: 0 0 0 12px rgba(217, 45, 32, 0); } }
.chat-voice-note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--no); }
.chat-voice-note[hidden] { display: none; }
.chat-attached { grid-column: 1 / -1; min-width: 0; }
.chat-count { grid-column: 1 / -1; justify-self: end; margin-top: -2px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.chat-count.full { color: var(--no); font-weight: 700; }

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .chat { border-left-color: rgba(255, 255, 255, 0.08); box-shadow: -14px 0 44px rgba(0, 0, 0, 0.5); }
  :where(:root:not([data-theme="light"])) .chat-msg.assistant .chat-bubble, :where(:root:not([data-theme="light"])) .chat-starter, :where(:root:not([data-theme="light"])) .chat-notice, :where(:root:not([data-theme="light"])) .chat-composer textarea, :where(:root:not([data-theme="light"])) .chat-add { border-color: rgba(255, 255, 255, 0.08); }
  :where(:root:not([data-theme="light"])) .chat-chip, :where(:root:not([data-theme="light"])) .chat-bubble code { border-color: rgba(255, 255, 255, 0.14); }
  :where(:root:not([data-theme="light"])) .chat-msg.user .chat-bubble { background: var(--board-2); border-color: rgba(255, 255, 255, 0.1); }
}
:where(:root[data-theme="dark"]) .chat { border-left-color: rgba(255, 255, 255, 0.08); box-shadow: -14px 0 44px rgba(0, 0, 0, 0.5); }
  :where(:root[data-theme="dark"]) .chat-msg.assistant .chat-bubble, :where(:root[data-theme="dark"]) .chat-starter, :where(:root[data-theme="dark"]) .chat-notice, :where(:root[data-theme="dark"]) .chat-composer textarea, :where(:root[data-theme="dark"]) .chat-add { border-color: rgba(255, 255, 255, 0.08); }
  :where(:root[data-theme="dark"]) .chat-chip, :where(:root[data-theme="dark"]) .chat-bubble code { border-color: rgba(255, 255, 255, 0.14); }
  :where(:root[data-theme="dark"]) .chat-msg.user .chat-bubble { background: var(--board-2); border-color: rgba(255, 255, 255, 0.1); }

@media (max-width: 900px) {
  /* above the shortlist's collapsed bottom sheet; the open sheet and the details panel cover it instead */
  .chat-launcher { right: calc(var(--dock-w) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); z-index: 14; }
  .footer { padding-bottom: 170px; }
}
@media (max-width: 767px) {
  .chat {
    top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: var(--chat-height, 100dvh);
    border-left: none; box-shadow: none; transform: translateY(100%);
  }
  .chat-head { padding-left: 16px; }
  .chat-log { padding: 14px 12px 8px; }
  .chat-composer { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .chat-composer textarea { font-size: 16px; } /* 16px keeps iOS from zooming the page on focus */
  .chat-composer textarea::placeholder { font-size: 14px; } /* the + takes room: the hint stays on one line at 375px */
  .chat-notice { margin: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat, .chat.open, .chat-launcher { transition: none; }
  .chat-activity:not(:empty)::before { animation: none; }
}

/* ---------- Your record (public/record-ui.js) ---------- */
/* the small pills under the header's sentence ("About you") */
.record-pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 13px 3px 10px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--board-ink);
  background: rgba(var(--glass), 0.04); border: 1px dashed var(--board-line); border-radius: 999px;
}
.record-pill::before { content: "+"; font-weight: 700; font-size: 15px; line-height: 1; color: var(--board-accent); }
.record-pill:hover { background: rgba(var(--glass), 0.09); border-color: rgba(245, 181, 68, 0.6); }
.record-pill.set { border-style: solid; border-color: rgba(245, 181, 68, 0.5); }
.record-pill.set::before { content: "✓"; font-size: 13px; }
/* ---------- The header's buttons: one primary, one secondary with the import menu (record-ui.js) ---------- */

.hero-primary, .hero-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px;
  border-radius: 999px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.hero-primary { background: var(--amber); color: #1b1404; border: 1px solid var(--amber); box-shadow: 0 4px 16px rgba(245, 181, 68, 0.22); }
.hero-primary:hover { filter: brightness(1.07); }
.hero-secondary { background: transparent; color: var(--board-ink); border: 1.5px solid var(--board-edge); font-weight: 650; }
.hero-secondary:hover, .hero-secondary[aria-expanded="true"] { background: rgba(var(--glass), 0.08); border-color: var(--board-ink); }
.hero-secondary.set::before { content: "✓"; color: var(--board-accent); font-weight: 800; }
.hero-secondary svg { flex: none; }
.hero-secondary[aria-expanded="true"] svg { transform: rotate(180deg); }
.hero-primary:focus-visible, .hero-secondary:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.import-wrap { position: relative; }
.import-menu {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 100%; width: max-content; max-width: min(340px, calc(100vw - 32px));
  display: grid; gap: 2px; padding: 6px; border-radius: 14px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.import-menu[hidden] { display: none; }
.import-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 0 14px;
  border: none; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 14.5px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.import-menu button:hover, .import-menu button:focus-visible { background: var(--surface-2); }
.import-menu button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.import-count { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.import-count:empty { display: none; }
@media (max-width: 560px) {

  .hero-primary, .hero-secondary { width: 100%; }
  .import-menu { right: 0; width: auto; max-width: none; }
}

dialog.record {
  padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--ink);
  width: min(580px, calc(100vw - 24px)); max-height: min(90vh, 780px); overflow: hidden;
  box-shadow: 0 24px 80px rgba(14, 23, 38, 0.4);
}
dialog.record[open] { display: flex; }
dialog.record::backdrop { background: rgba(10, 17, 30, 0.62); }
.record-panel { display: grid; align-content: start; gap: 14px; width: 100%; padding: 0 22px; overflow-y: auto; overscroll-behavior: contain; }
.record-head {
  display: flex; align-items: center; gap: 10px; margin: 0 -22px; padding: 14px 14px 13px 22px;
  background: var(--board); color: var(--board-ink); border-bottom: 1px solid var(--board-line);
}
.record-head > div { flex: 1; min-width: 0; }
.record-head .kicker { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--board-accent); font-weight: 700; }
.record-head h2 { margin: 1px 0 0; font-family: var(--display); font-size: 20px; line-height: 1.2; font-weight: 700; }
.record-head .icon-btn { background: rgba(var(--glass), 0.08); color: var(--board-ink); }
.record-head .icon-btn:hover { background: rgba(var(--glass), 0.18); }
.record-privacy { margin: 0; font-size: 13.5px; color: var(--muted); }

.record-drop {
  display: grid; gap: 3px; justify-items: center; text-align: center; padding: 20px 16px; cursor: pointer;
  border: 2px dashed var(--line); border-radius: 14px; background: var(--surface);
}
.record-drop strong { font-size: 15px; }
.record-drop span { font-size: 13px; color: var(--muted); }
.record-drop:hover, .record-drop.over { border-color: var(--accent); background: var(--surface-2); }
.record-drop:has(:focus-visible), .record-drop:focus-within { border-color: var(--focus); }
.record-drop.busy { opacity: 0.6; cursor: progress; }
#recordFile:focus-visible + * { outline: none; }
.record-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: -8px; }
#recordText, #albertText, .record-add input, .record-add select {
  font: inherit; font-size: 15px; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 10px 12px;
}
#recordText, #albertText { width: 100%; resize: vertical; min-height: 84px; line-height: 1.4; font-family: var(--mono); font-size: 13px; }
#recordText::placeholder, #albertText::placeholder, .record-add input::placeholder { color: var(--muted); font-family: var(--sans); }
.record-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: -4px; }
.record-find, .record-add button {
  height: 40px; padding: 0 16px; border-radius: 12px; font-weight: 650; cursor: pointer;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
}
.record-find:hover, .record-add button:hover { background: var(--surface-2); }
.record-status { flex: 1 1 200px; font-size: 13.5px; color: var(--muted); min-height: 20px; }
.record-status[data-tone="ok"] { color: var(--ok); }
.record-status[data-tone="warn"] { color: var(--check); }

.record-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.record-list { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; min-width: 0; }
.record-list h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--display); font-size: 14.5px; }
.record-list h3 span { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 0 8px; }
.record-empty { margin: 0; font-size: 13.5px; color: var(--muted); }
.rchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; }
.rchip {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px 3px 2px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ok); background: var(--ok-bg);
}
.record-list:nth-child(2) .rchip { color: var(--check); background: var(--check-bg); }
.rchip button {
  width: 22px; height: 22px; border: none; border-radius: 50%; background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; opacity: 0.75;
}
.rchip button:hover { opacity: 1; background: rgba(127, 127, 127, 0.22); }
.record-list.needed { grid-column: 1 / -1; }
.rreqs { list-style: none; margin: 0; padding: 0; }
.rreq { display: grid; gap: 6px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.rreq:first-child { padding-top: 0; }
.rreq:last-child { padding-bottom: 0; border-bottom: none; }
.rreq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; font-size: 14px; }
.rreq-head strong { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rreq-need { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.rreq-head button {
  align-self: center; width: 22px; height: 22px; border: none; border-radius: 50%; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
}
.rreq-head button:hover { background: rgba(127, 127, 127, 0.22); color: var(--ink); }
.rreq .rchips { max-height: 96px; }
.rreq .rchip { padding: 2px 10px; color: var(--ink); background: var(--surface-2); }
.rreq.done .rreq-head strong { color: var(--muted); font-weight: 600; }
.rreq.done .rreq-need { color: var(--ok, #15803d); }
.rreq.done .rchips { opacity: 0.6; }
.runread { margin-top: 10px; font-size: 13px; color: var(--check); }
.runread summary { cursor: pointer; font-weight: 650; }
.runread ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; color: var(--muted); font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }

.record-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.record-add input { min-width: 0; text-transform: uppercase; }
.record-add input::placeholder { text-transform: none; }
.record-add select { height: 40px; padding: 0 10px; }
.record-add input { height: 40px; padding-top: 0; padding-bottom: 0; }

.record-foot {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; margin: 0 -22px; padding: 12px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--bg); border-top: 1px solid var(--line);
}
.record-dirty { flex: 1; text-align: right; font-size: 13px; color: var(--check); }
.record-foot .record-save { margin-left: auto; }
.record-dirty:not([hidden]) + .record-save { margin-left: 0; }
.record-save { height: 42px; padding: 0 24px; border: none; border-radius: 12px; font-weight: 700; cursor: pointer; background: var(--amber); color: var(--on-amber); }
.record-save:hover { filter: brightness(1.05); }
.record-clear { height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--no); font-weight: 650; cursor: pointer; }
.record-clear:hover:not(:disabled) { background: var(--no-bg); }
.record-clear:disabled { opacity: 0.4; cursor: default; }

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) dialog.record, :where(:root:not([data-theme="light"])) .record-list, :where(:root:not([data-theme="light"])) .record-drop, :where(:root:not([data-theme="light"])) #recordText, :where(:root:not([data-theme="light"])) #albertText, :where(:root:not([data-theme="light"])) .record-add input, :where(:root:not([data-theme="light"])) .record-add select { border-color: rgba(255, 255, 255, 0.1); }
}
:where(:root[data-theme="dark"]) dialog.record, :where(:root[data-theme="dark"]) .record-list, :where(:root[data-theme="dark"]) .record-drop, :where(:root[data-theme="dark"]) #recordText, :where(:root[data-theme="dark"]) #albertText, :where(:root[data-theme="dark"]) .record-add input, :where(:root[data-theme="dark"]) .record-add select { border-color: rgba(255, 255, 255, 0.1); }
@media (max-width: 560px) {
  .record-panel { padding: 0 16px; }
  .record-head { margin: 0 -16px; padding-left: 16px; }
  .record-foot { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .record-lists { grid-template-columns: 1fr; }
  .record-add { grid-template-columns: minmax(0, 1fr) auto; }
  .record-add input { grid-column: 1 / -1; }
}

/* ---- assistant cards, suggestions, proposals ---- */
.chat-extras { display: grid; gap: 8px; min-width: 0; width: 100%; }
.chat-unverified { margin: 0; color: var(--check); font-size: 12.5px; overflow-wrap: anywhere; }
.chat-section-card, .chat-proposal {
  min-width: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); overflow-wrap: anywhere;
}
.chat-section-open {
  display: grid; gap: 4px; width: 100%; padding: 12px 12px 6px; text-align: left;
  font: inherit; font-size: 13px; color: inherit; background: none; border: 0; border-radius: 12px; cursor: pointer;
}
.chat-section-open strong { font-family: var(--mono); font-size: 13px; }
.chat-section-time { color: var(--muted); font-size: 12px; }
.chat-section-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 8px 12px; }
.chat-section-meta .star { min-width: 44px; min-height: 44px; }
.chat-section-card.compact { display: flex; align-items: center; gap: 4px; }
.chat-section-card.compact .chat-section-open { flex: 1; min-width: 0; min-height: 44px; padding: 6px 12px; align-content: center; }
.chat-section-card.compact .chat-course-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.chat-section-card.compact .chat-section-meta { padding: 0 4px 0 0; }
.chat-proposal { padding: 12px; font-size: 13px; }
.chat-proposal p { margin: 0 0 8px; }
.chat-proposal-actions, .chat-suggestions { display: flex; flex-wrap: wrap; gap: 7px; }
.chat-proposal-actions button, .chat-suggestions button, .chat-undo button {
  min-height: 40px; padding: 8px 12px; font: inherit; font-size: 12.5px; font-weight: 650;
  color: var(--accent); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; max-width: 100%; overflow-wrap: anywhere;
}
.chat-proposal-actions button:first-child { background: var(--amber); color: var(--on-amber); border-color: transparent; }
.chat-extras button:hover, .chat-undo button:hover { outline: 1px solid var(--accent); }
.chat-extras button:focus-visible, .chat-undo button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-extras button:disabled { opacity: 0.55; cursor: wait; }
.chat-undo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; padding: 8px 16px; font-size: 13px; background: var(--surface-2); border-top: 1px solid var(--line); }
/* A card of another term than the page's (chat.js otherTermCard): it says its term */
.chat-section-card.other-term .chat-section-open { cursor: default; }
.term-chip { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); font-weight: 650; }

/* A course card's two lines: how it is assessed, and the instructor's Rate My Professors rating (app.js assessHtml, professorHtml) */
.card-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.card-line .line-label { flex: none; font-size: 12.5px; font-weight: 650; color: var(--muted); margin-right: 2px; }
.card-line .line-sep { color: var(--muted); }
:is(.card-line, .instructors) .prof { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
:is(.card-line, .instructors) .prof + .prof::before { content: "；"; color: var(--muted); }
/* the name is a button that opens the professor's details (professors-ui.js); it still reads as the name, on a card, in the details and in the cart */
:is(.card-line, .instructors) .prof-name {
  padding: 0; border: none; background: transparent; font: inherit; font-weight: 650; color: var(--ink); cursor: pointer;
  text-decoration: underline dotted; text-decoration-color: var(--muted); text-underline-offset: 2px;
}
:is(.card-line, .instructors) .prof-name:hover { color: var(--accent); }
:is(.card-line, .instructors) .prof-name:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* "4.0/5 · 87 ratings": the score and its number of ratings read the same size and weight; the words where there is no score are quiet */
:is(.card-line, .instructors) .prof-rate { font-weight: 700; font-variant-numeric: tabular-nums; }
:is(.card-line, .instructors) .prof-state { font-size: 11.5px; color: var(--muted); }

/* The line at the top of a conversation whose earlier part was folded (chat.js summaryNote) */
.chat-summary { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.chat-summary summary { cursor: pointer; }
.chat-summary p { white-space: pre-wrap; margin: 6px 0 0; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.chat-history-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }

/* "Was this helpful?" under an answer (chat.js renderRating) */
.chat-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.chat-rate button {
  min-height: 34px; padding: 5px 10px; font: inherit; font-weight: 600; color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.chat-rate button:hover { outline: 1px solid var(--accent); }
.chat-rate button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-rate button:disabled { opacity: 0.55; cursor: wait; }
.chat-rate-why { display: flex; gap: 6px; flex: 1 1 100%; }
.chat-rate-why input { flex: 1; min-width: 0; min-height: 34px; padding: 5px 10px; font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
@media (max-width: 640px) {
  .chat-proposal-actions button, .chat-suggestions button, .chat-undo button { min-height: 44px; }
  .chat-rate button, .chat-rate-why input { min-height: 44px; }
}

/* ---- share link, prerequisites ---- */
/* The bar above the page: a shared plan being looked at (public/share-ui.js), or a note about a link */
.shared-bar[hidden] { display: none; }
.shared-bar {
  width: min(1224px, calc(100% - 32px)); margin: 16px auto 0; padding: 12px 16px; border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.shared-bar p { margin: 0; flex: 1 1 260px; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.shared-bar.error { background: var(--no-bg); color: var(--no); border-color: transparent; }
.shared-bar.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.shared-ro {
  display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; vertical-align: 1px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.shared-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.shared-actions .primary, .shared-actions .secondary { width: auto; padding: 9px 16px; }
.shared-actions .secondary { color: inherit; border-color: currentColor; }
.shared-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
/* a shared plan is read-only: nothing here changes the student's own situation, shortlist or record */
body.sharing [data-action="star"],
body.sharing .about-row,
body.sharing .chat-launcher { display: none; }
body.sharing .field select { border-bottom-style: solid; cursor: default; }
.share-link {
  width: 100%; margin-top: 8px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); font-family: var(--mono); font-size: 12px;
}
.share-gone { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--check-bg); color: var(--check); font-size: 13px; }
.share-gone ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.share-gone .muted { color: inherit; opacity: 0.85; }
.share-gone p { margin: 8px 0 0; }

/* Prerequisites: the dialog, and the block in a section's detail panel */
.record-link {
  justify-self: start; border: none; background: transparent; padding: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 13.5px; font-weight: 650; color: var(--accent); text-decoration: underline;
}
.prereq-body { display: grid; gap: 14px; padding-bottom: 22px; min-width: 0; }
.prereq-lead, .prereq-cover { margin: 0; font-size: 13.5px; color: var(--muted); }
.prereq-cover { color: var(--ink); }
.prereq-prompt { display: grid; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; }
.prereq-prompt p { margin: 0; font-size: 14px; }
.prereq-prompt .record-find { justify-self: start; }
.prereq-group { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; min-width: 0; }
.prereq-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--display); font-size: 14.5px; }
.prereq-group h3 span { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 0 8px; }
.prereq-hint { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.prereq-empty { margin: 0; font-size: 13.5px; color: var(--muted); }
.prereq-item { border-top: 1px dashed var(--line); }
.prereq-hint + .prereq-item, .prereq-group h3 + .prereq-item { border-top: none; }
.prereq-item > summary, .prereq-all > summary { cursor: pointer; list-style: none; }
.prereq-item > summary::-webkit-details-marker, .prereq-all > summary::-webkit-details-marker { display: none; }
.prereq-item > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 0; }
.prereq-item > summary::before, .prereq-all > summary::before { content: "▸"; color: var(--muted); font-size: 11px; }
.prereq-item[open] > summary::before, .prereq-all[open] > summary::before { content: "▾"; }
.prereq-count { font-size: 12.5px; color: var(--muted); }
.prereq-all > summary { padding: 4px 2px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.prereq-all[open] > summary { margin-bottom: 8px; }
.prereq-all .prereq-group { margin: 0; }
.prereq-secs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.prereq-sec {
  display: grid; gap: 2px; width: 100%; padding: 9px 12px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.prereq-sec:hover { border-color: var(--accent); }
.prereq-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.prereq-title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.prereq-star { font-size: 11.5px; font-weight: 700; color: var(--check); background: var(--check-bg); border-radius: 999px; padding: 1px 8px; }
.prereq-need { font-size: 12.5px; font-weight: 600; color: var(--ok); }
.prereq-other { font-size: 12.5px; color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
.prereq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.prereq-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; overflow-wrap: anywhere; }
.prereq-list li.check { display: grid; gap: 3px; }
.check-tag { font-size: 11.5px; font-weight: 800; color: var(--check); background: var(--check-bg); border-radius: 999px; padding: 1px 8px; }
.rec { font-size: 13px; font-weight: 650; }
.rec.yes { color: var(--ok); }
.rec.no { color: var(--no); }
.rec-list { font-size: 12.5px; color: var(--muted); }
.prereq-ask { margin: 8px 0 0; }
.prereq-status { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.prereq-status.met { color: var(--ok); }
.prereq-status.missing { color: var(--no); }
.prereq-status.check { color: var(--check); }
.prereq-more { margin: 8px 0 0; font-size: 13.5px; }
.plan-pick-prereq { margin: 3px 0 0 !important; font-size: 12.5px; font-weight: 650; }
.plan-pick-prereq.met { color: var(--ok); }
.plan-pick-prereq.missing { color: var(--no); }
.plan-pick-prereq.check, .plan-pick-prereq.pending { color: var(--check); }
.record-hint { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.record-hint[hidden] { display: none; }
.link-btn { border: none; background: transparent; padding: 0; cursor: pointer; font: inherit; font-weight: 650; color: var(--accent); text-decoration: underline; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .prereq-group, :where(:root:not([data-theme="light"])) .prereq-sec, :where(:root:not([data-theme="light"])) .prereq-prompt, :where(:root:not([data-theme="light"])) .share-link { border-color: rgba(255, 255, 255, 0.1); }
}
:where(:root[data-theme="dark"]) .prereq-group, :where(:root[data-theme="dark"]) .prereq-sec, :where(:root[data-theme="dark"]) .prereq-prompt, :where(:root[data-theme="dark"]) .share-link { border-color: rgba(255, 255, 255, 0.1); }

/* ---- registration: slots, countdown, changes ---- */
/* "A, else B": alternatives under a shortlisted class */
.reg-alts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.reg-alt { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding-left: 10px; }
.reg-alt-rank { flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.reg-alt-main { flex: 1; min-width: 0; display: grid; gap: 3px; padding: 8px 4px; border-radius: 10px; }
button.reg-alt-main:hover { background: var(--surface-2); }
.reg-alt.clash { box-shadow: inset 3px 0 0 var(--no-solid); }
.reg-alt.missing { border-style: dashed; background: transparent; }
.reg-alt-tools { display: flex; flex: none; gap: 2px; padding-right: 4px; }
.reg-alt-tools .icon-btn:disabled { opacity: 0.35; cursor: default; }
.reg-add {
  justify-self: start; border: 1.5px dashed var(--line); border-radius: 10px; background: transparent; color: var(--accent);
  font-weight: 650; font-size: 13.5px; padding: 7px 12px; cursor: pointer;
}
.reg-add:hover { background: var(--surface); }
.alt-picker { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.alt-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.alt-query, .appt-fields input {
  width: 100%; min-width: 0; font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink);
}
.alt-results { display: grid; gap: 6px; }
.alt-results > p { margin: 0; }
.alt-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.alt-option {
  width: 100%; display: grid; gap: 3px; text-align: left; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: inherit; font: inherit; padding: 8px 10px; cursor: pointer;
}
.alt-option:hover { background: var(--track); }
.alt-title { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }

/* Enrollment appointment and its countdown */
.appt { margin-top: 14px; display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.appt .reg-label { margin-top: 0; }
.appt .small { margin: 0; }
.appt-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.appt-fields label { display: grid; gap: 3px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.appt-readout:empty { display: none; }
.appt-readout { display: grid; gap: 8px; }
.appt-count { margin: 0; font-size: 13.5px; }
.appt-count b { margin-right: 6px; font-family: var(--mono); font-size: 18px; }
.appt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.appt-actions .secondary { width: auto; padding: 8px 14px; }
.appt-clear { border: none; background: transparent; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px 4px; }

/* Changes since the last visit */
.changes { padding: 12px 20px 14px; background: var(--check-bg); color: var(--ink); font-size: 13px; border-bottom: 1px solid var(--line); }
.changes-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.changes-head .icon-btn { background: transparent; margin: -4px -6px 0 0; }
.changes-head .icon-btn:hover { background: rgba(127, 127, 127, 0.2); }
.changes ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.changes .reg-open { font-weight: 700; text-decoration: underline dotted; }
.changes-new { margin: 6px 0 0; font-weight: 650; }
@media (max-width: 420px) {
  .changes { padding-left: 16px; padding-right: 16px; }
  .reg-alt { flex-wrap: wrap; padding: 6px 8px; }
  .reg-alt-main { flex-basis: calc(100% - 52px); order: 1; }
  .reg-alt-rank { order: 0; }
  .reg-alt-tools { order: 2; margin-left: auto; padding-right: 0; }
}

/* ---- schedules: compare, busy times ---- */

/* Busy times: a pill, a chip for each, and the gap between classes, under the situation sentence */
.busy-row { margin: 2px 0 0; }
.busy-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.busy-pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 13px 3px 10px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--board-ink);
  background: rgba(var(--glass), 0.04); border: 1px dashed var(--board-line); border-radius: 999px;
}
.busy-pill::before { content: "+"; font-weight: 700; font-size: 15px; line-height: 1; color: var(--board-accent); }
.busy-pill:hover:not(:disabled) { background: rgba(var(--glass), 0.09); border-color: rgba(245, 181, 68, 0.6); }
.busy-pill[aria-expanded="true"] { border-style: solid; border-color: rgba(245, 181, 68, 0.5); }
.busy-pill:disabled { opacity: 0.5; cursor: default; }
.busy-chips { display: contents; list-style: none; margin: 0; padding: 0; }
.busy-chip {
  display: inline-flex; align-items: center; gap: 2px; min-height: 30px; padding: 2px 3px 2px 12px; border-radius: 999px;
  font-size: 13.5px; color: var(--board-ink); background: rgba(245, 181, 68, 0.14); border: 1px solid rgba(245, 181, 68, 0.45);
}
.busy-chip b { font-weight: 700; color: var(--board-accent); }
.busy-chip button {
  width: 24px; height: 24px; border: none; border-radius: 50%; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0.75;
}
.busy-chip button:hover { opacity: 1; background: rgba(var(--glass), 0.16); }
/* the gap between classes reads like the sentence above it: the same words and the same menu as the class hours */
.gap-field { font-size: clamp(17px, 1.9vw, 22px); line-height: 1.9; color: var(--board-text); white-space: nowrap; }
.busy-form, .about-form {
  display: grid; gap: 12px; margin-top: 10px; max-width: 620px; padding: 14px 16px;
  background: rgba(var(--glass), 0.05); border: 1px solid var(--board-line); border-radius: 14px; font-size: 14px; color: var(--board-text);
}
.busy-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: none; min-width: 0; }
.busy-days legend { float: left; margin: 0 8px 0 0; padding: 0; line-height: 32px; color: var(--board-muted); font-size: 13px; }
.daychip { position: relative; }
.daychip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.daychip span {
  display: inline-grid; place-items: center; min-width: 46px; height: 32px; padding: 0 8px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 650; border: 1px solid var(--board-line); background: rgba(var(--glass), 0.04);
}
.daychip input:checked + span { background: var(--amber); border-color: var(--board-accent); color: var(--on-amber); }
.daychip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.busy-times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.busy-times label { display: inline-flex; align-items: center; gap: 8px; color: var(--board-muted); font-size: 13px; }
.busy-times select, .busy-label input {
  height: 34px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--board-ink); background: var(--board); border: 1px solid var(--board-line); border-radius: 10px;
}
.busy-label { flex: 1 1 180px; }
.busy-label input { flex: 1; min-width: 0; }
.busy-label input::placeholder { color: var(--board-muted); }
.busy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.busy-save, .busy-cancel { height: 36px; padding: 0 16px; border-radius: 10px; font-weight: 650; cursor: pointer; }
.busy-save { border: none; background: var(--amber); color: var(--on-amber); }
.busy-save:hover { filter: brightness(1.05); }
.busy-cancel { border: 1px solid var(--board-line); background: transparent; color: var(--board-ink); }
.busy-cancel:hover { background: rgba(var(--glass), 0.08); }
.busy-error { flex: 1 1 180px; font-size: 13px; color: #ff9ba0; }

/* Busy times in the week charts, and a tight gap in the clash box */
.dial .block.busy, .week-legend i.busy {
  background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 5px), color-mix(in srgb, var(--muted) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 55%, transparent);
}
.dial .block.busy { top: 1px; bottom: 1px; border-radius: 3px; }
.clashes.gaps-only { background: var(--check-bg); color: var(--check); }
.compare-open { margin-top: 12px; }
.short-needs { font-size: 12.5px; font-weight: 400; color: var(--muted); }

/* Compare schedules: a dialog with two or three columns, stacked on a phone */
dialog.compare {
  padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--ink);
  width: min(1040px, calc(100vw - 24px)); max-height: min(92vh, 900px); overflow: hidden;
  box-shadow: 0 24px 80px rgba(14, 23, 38, 0.4);
}
dialog.compare[open] { display: flex; }
dialog.compare::backdrop { background: rgba(10, 17, 30, 0.62); }
.compare-panel { display: block; width: 100%; padding: 0 22px 22px; overflow-y: auto; overscroll-behavior: contain; }
.compare-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0 -22px; padding: 14px 14px 13px 22px;
  background: var(--board); color: var(--board-ink); border-bottom: 1px solid var(--board-line);
}
.compare-head > div { flex: 1; min-width: 0; }
.compare-head .kicker { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--board-accent); font-weight: 700; }
.compare-head h2 { margin: 1px 0 0; font-family: var(--display); font-size: 20px; line-height: 1.2; font-weight: 700; outline: none; }
.compare-head .icon-btn { background: rgba(var(--glass), 0.08); color: var(--board-ink); }
.compare-head .icon-btn:hover { background: rgba(var(--glass), 0.18); }
.compare-sub { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.compare-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; align-items: start; }
.compare-cols[data-count="1"] { grid-template-columns: minmax(0, 420px); }
.compare-cols[data-count="2"], .compare-cols[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.pref { position: relative; }
.pref input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pref span {
  display: inline-block; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 650;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
}
.pref:hover span { background: var(--surface-2); }
.pref input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pref input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.pref-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--line); }
.compare-note { margin: 10px 0 0; padding: 8px 12px; font-size: 13px; color: var(--check); background: var(--check-bg); border-radius: 10px; }
.plan { display: grid; gap: 12px; min-width: 0; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.plan.current { border-color: var(--accent); }
.plan header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.plan h3 { margin: 0 auto 0 0; font-family: var(--display); font-size: 16px; }
.plan-tag { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: var(--ok); background: var(--ok-bg); white-space: nowrap; }
.plan-tag.mine { color: var(--ink); background: var(--track); }
.plan-sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan-sections li { display: grid; gap: 2px; min-width: 0; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.plan-sections li:last-child { border-bottom: none; padding-bottom: 0; }
.plan-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; }
.plan-line .chip { font-size: 11.5px; padding: 2px 8px; }
.plan-title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.plan-when { font-size: 13px; color: var(--muted); }
.plan-metrics { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; padding: 10px 12px; font-size: 13px; background: var(--surface-2); border-radius: 12px; }
.plan-metrics dt { color: var(--muted); }
.plan-metrics dd { margin: 0; font-weight: 600; text-align: right; font-family: var(--mono); font-size: 12.5px; }
.plan-metrics dd.best { color: var(--ok); }
.plan-metrics dd.best::after { content: " ✓"; }
.plan-week { gap: 4px 8px; }
.plan-week .dial { height: 10px; }
.plan-week .dial .block { top: 1px; bottom: 1px; }
.plan-key { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.plan-action .primary { width: 100%; }
.plan-note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.plan-confirm { display: grid; gap: 8px; }
.plan-confirm p { margin: 0; font-size: 13.5px; }

/* When nothing fits: what is in the way, and buttons for the smallest changes */
.nofit h4 { margin: 20px 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.nofit-why, .nofit-fixes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nofit-why li { padding: 10px 12px; font-size: 14px; background: var(--no-bg); color: var(--no); border-radius: 10px; }
.fix {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; width: 100%; padding: 12px 14px; text-align: left; font-size: 14px; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 1.5px solid var(--ink); border-radius: 12px;
}
.fix:hover { background: var(--surface-2); }
.fix .arrow { color: var(--muted); }

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) dialog.compare, :where(:root:not([data-theme="light"])) .plan { border-color: rgba(255, 255, 255, 0.1); }
  :where(:root:not([data-theme="light"])) .busy-form, :where(:root:not([data-theme="light"])) .about-form { border-color: rgba(255, 255, 255, 0.12); }
}
:where(:root[data-theme="dark"]) dialog.compare, :where(:root[data-theme="dark"]) .plan { border-color: rgba(255, 255, 255, 0.1); }
  :where(:root[data-theme="dark"]) .busy-form, :where(:root[data-theme="dark"]) .about-form { border-color: rgba(255, 255, 255, 0.12); }
@media (max-width: 860px) {
  .compare-cols, .compare-cols[data-count] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  dialog.compare { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: none; }
  .compare-panel { padding: 0 16px 24px; }
  .compare-head { margin: 0 -16px; padding-left: 16px; }
  .pref-sep { display: none; }
  .busy-form, .about-form { padding: 12px; }
}

/* Language controls remain usable with a keyboard and on narrow Chinese layouts. */
.language-switch { display:flex; align-items:center; gap:5px; margin-left:auto; font-size:12px; }
.language-switch button { color:inherit; background:transparent; border:1px solid transparent; border-radius:5px; padding:5px 7px; cursor:pointer; font:inherit; }
.language-switch button[aria-pressed="true"] { border-color:currentColor; font-weight:700; }
.language-switch button:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
html[lang="zh-CN"] { word-break:normal; overflow-wrap:anywhere; }
html[lang="zh-CN"] .situation { gap:8px; }
html[lang="zh-CN"] .situation .field { max-width:100%; }
html[lang="zh-CN"] select { max-width:100%; }
html[lang="zh-CN"] .week { grid-template-columns:32px minmax(0,1fr); }
@media (max-width: 420px) {

  html[lang="zh-CN"] .clocks { flex-wrap:wrap; }

  html[lang="zh-CN"] .busy-times, html[lang="zh-CN"] .appt-fields { flex-wrap:wrap; }
  html[lang="zh-CN"] .reg-alt-main, html[lang="zh-CN"] .reg-line { min-width:0; }
}

/* ---------- The 水课／保 GPA button beside the search box (gpa-picks-ui.js) and the marks of the older Grading facts (gpa-ui.js) ---------- */
.gpa-toggle {
  font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 9px 16px; box-shadow: var(--shadow);
}
.gpa-toggle:hover { border-color: var(--muted); }
.gpa-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gpa-toggle[hidden] { display: none; }
.gpa-marks { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.gpa-badge {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px; padding: 2px 9px;
}
.gpa-line { font-size: 12.5px; color: var(--muted); cursor: help; }
/* A section copied from Albert (lib/albert-sections.mjs): NYU's public class search does not list it. */
.albert-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; color: var(--check); cursor: help;
  background: var(--check-bg); border-radius: 999px; padding: 1px 8px;
}
/* Albert's word on whether a class has room (core/seats.js): shown only when it is not open. */
.seats-chip {
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; cursor: help; align-self: center;
  border-radius: 999px; padding: 1px 8px; color: var(--check); background: var(--check-bg);
}
.seats-chip.cancelled { color: var(--no); background: var(--no-bg); }
.panel-verdict .seats-chip, .short-meta .seats-chip { font-size: 11.5px; padding: 2px 8px; }
.class-tag { font-family: var(--mono); cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }
.reg-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.missing-badge { color: var(--no); background: var(--no-bg); }
.law-badge { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.albert-note { margin: 0; font-size: 13.5px; line-height: 1.45; }
.albert-note .albert-badge { margin-right: 4px; }
.card .gpa-marks { margin-top: 1px; }
.short-open .gpa-marks { margin-top: 1px; }
.panel .gpa-line { cursor: auto; font-size: 13.5px; }

/* ---------- Instructors: "Instructor: J. Yeo", from NYU departments' public schedules ---------- */
.instructors { font-size: 12.5px; color: var(--muted); }
.instructors .inst-label::after { content: ":"; }
:lang(zh) .instructors .inst-label::after { content: "："; }
.inst > [translate="no"] { color: var(--ink); font-weight: 600; }
.facts .instructors { font-size: inherit; color: inherit; }
.facts .inst > [translate="no"] { font-weight: 500; }
.facts .inst-course { grid-column: 1 / -1; }
.facts .inst-course .inst-label { color: var(--muted); font-weight: 400; }
.short-item { flex-wrap: wrap; }
.short-instructors { flex: 1 0 100%; padding: 0 4px 10px; margin-top: -4px; }
.short-item.clash .short-instructors { padding-left: 10px; }

/* ---------- About you: under the record pills ---------- */
.about-row { margin: 8px 0 0; }
.about-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; color: var(--board-muted); }
.about-label { font-weight: 650; color: var(--board-ink); }
.about-parts { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.about-parts li + li::before { content: "·"; margin: 0 7px; }
/* the student's limit on days on campus, as a small chip with its own × */
.campus-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 3px 1px 9px; border-radius: 999px; border: 1px solid rgba(245, 181, 68, 0.55); color: var(--board-ink); }
.campus-chip button { position: relative; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; line-height: 1; cursor: pointer; }
.campus-chip button::after { content: ""; position: absolute; inset: -12px; } /* a 44px touch target around the small ×, which would otherwise stretch the chip */
.campus-chip button:hover { background: rgba(var(--glass), 0.14); }
.campus-chip button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.about-edit {
  min-height: 26px; padding: 0 12px; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  color: var(--board-ink); background: transparent; border: 1px solid var(--board-line); border-radius: 999px;
}
.about-edit:hover { background: rgba(var(--glass), 0.08); border-color: rgba(245, 181, 68, 0.6); }
.about-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.about-fields label { display: inline-flex; align-items: center; gap: 8px; color: var(--board-muted); font-size: 13px; }
.about-fields select, .about-fields input {
  height: 34px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--board-ink); background: var(--board); border: 1px solid var(--board-line); border-radius: 10px;
}
.about-fields input[type="number"] { width: 84px; }
.about-fields input::placeholder { color: var(--board-muted); }
.about-major { flex: 1 1 200px; }
.about-major input { flex: 1; min-width: 0; }
.about-check { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 14px; color: var(--board-ink); cursor: pointer; }
.about-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--board-accent); }
.about-hint { margin: -6px 0 0; font-size: 12.5px; color: var(--board-muted); }

/* ---------- Rate My Professors scores and "Paste from Albert" (public/rmp-ui.js, public/albert-ui.js) ---------- */
.instructors:has(.scored) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.inst.scored { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 3px; }
/* not a link: the numbers are shown here, the score and its number of ratings (.rmp-main) in the same weight, the rest quieter */
.rmp-score { display: inline-block; max-width: 100%; margin-left: 3px; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.inst.scored .rmp-score { margin-left: 0; }
.rmp-parts > span + span::before { content: " · "; white-space: pre; }
.rmp-main { font-weight: 700; }
.rmp-parts > span:not(.rmp-main) { color: var(--muted); }
.rmp-score.several, .rmp-score.none, .rmp-score.unrated, .rmp-score.unavailable { font-size: 11.5px; color: var(--muted); }
.rmp-source { margin: 6px 0 0; }

.albert-out { display: grid; gap: 10px; min-width: 0; }
.albert-out:empty { display: none; }
.albert-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.albert-facts div { display: grid; gap: 1px; min-width: 0; }
.albert-facts dt { font-size: 11.5px; color: var(--muted); }
.albert-facts dd { margin: 0; font-size: 14.5px; font-weight: 700; }
.albert-warn { margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--check-bg); color: var(--check); font-size: 13.5px; overflow-wrap: anywhere; }
.albert-switch {
  margin-left: 4px; padding: 3px 12px; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  color: inherit; background: transparent; border: 1.5px solid currentColor; border-radius: 999px;
}
.albert-secs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.albert-sec { display: grid; gap: 3px; min-width: 0; padding: 9px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.albert-sec.unmatched { border-style: dashed; }
.albert-sec-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13px; }
.albert-sec-line .code { font-family: var(--mono); font-weight: 700; }
.albert-tag { padding: 0 8px; font-size: 11px; font-weight: 700; color: var(--check); background: var(--check-bg); border-radius: 999px; cursor: help; }
.albert-sec-title { font-size: 13.5px; overflow-wrap: anywhere; }
.albert-names { display: grid; gap: 2px; font-size: 13px; }
.albert-names .inst { display: block; }
.albert-names .inst > [translate="no"] { color: var(--ink); font-weight: 600; }
.albert-row { margin: 10px 0 0; }
.chat-msg.has-albert { align-self: stretch; align-items: stretch; max-width: 100%; }
.chat-albert { display: grid; gap: 8px; min-width: 0; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.chat-albert .kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.chat-albert .albert-card { display: grid; gap: 8px; }
.chat-albert .albert-secs { max-height: 280px; }
.chat-albert .albert-sec { background: var(--surface-2); }

/* a file added in the chat: the chip over the text box, the same chip under the question, the audit card, the drop hint */
.chat-file-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 4px 6px 4px 10px;
  font-size: 12.5px; line-height: 1.3; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
}
.chat-file-chip .file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.chat-file-chip .file-size { flex: none; color: var(--muted); white-space: nowrap; }
.chat-file-chip button {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; font: inherit; font-size: 16px; line-height: 1;
  color: var(--muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.chat-file-chip button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.chat-file-chip.sent { padding-right: 10px; }
.chat-attached .chat-file-chip { margin-bottom: 2px; }
.chat-msg.has-card { align-self: stretch; align-items: stretch; max-width: 100%; }
.chat-audit { display: grid; gap: 8px; min-width: 0; padding: 12px; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.chat-audit .kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.chat-audit .audit-counts { margin: 0; font-weight: 650; }
.chat-audit .audit-reqs { margin: 0; padding-left: 18px; color: var(--muted); }
.chat-audit .audit-reqs li + li { margin-top: 2px; }
.chat-audit .audit-reqs .audit-more { list-style: none; margin-left: -18px; }
.chat-audit .audit-status { margin: 0; color: var(--muted); }
.chat-audit .audit-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.chat-audit .audit-actions button {
  min-height: 40px; padding: 8px 12px; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; max-width: 100%;
  color: var(--accent); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.chat-audit .audit-actions button:first-child { background: var(--amber); color: var(--on-amber); border-color: transparent; }
.chat-audit .audit-actions button:hover { outline: 1px solid var(--accent); }
.chat-drop {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 24px; text-align: center; pointer-events: none;
  font-size: 16px; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: 2px dashed var(--accent); border-radius: 12px; margin: 8px;
}
@media (max-width: 640px) {
  .chat-add { width: 44px; height: 44px; margin-bottom: 0; }
  .chat-file-chip button { width: 32px; height: 32px; }
  .chat-audit .audit-actions button { min-height: 44px; }
}
@media (max-width: 560px) {
  .albert-facts { gap: 6px 14px; padding: 9px 12px; }
  .albert-secs { max-height: 260px; }
}

/* ---------- Cart and account (public/cart-ui.js) ---------- */
/* The top bar: brand, language, account and cart stay in view on every screen. */
.topbar { position: sticky; top: 0; z-index: 25; background: var(--board); color: var(--board-ink); border-bottom: 1px solid var(--board-line); }
.topbar-inner { max-width: 1280px; margin: 0 auto; padding: 8px 28px; min-height: 60px; display: flex; align-items: center; gap: 10px; }
.topbar .language-switch { margin-left: auto; }

.topbar-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  min-width: 44px; min-height: 44px; padding: 0 13px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 650; color: var(--board-ink);
  background: rgba(var(--glass), 0.05); border: 1px solid var(--board-line);
}
.topbar-btn:hover { background: rgba(var(--glass), 0.12); border-color: rgba(245, 181, 68, 0.6); }
.topbar-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.topbar-btn.signed-in svg { color: var(--board-accent); }
/* light or dark (public/theme.js): the moon offers dark, the sun offers light */
.theme-btn .theme-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .theme-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .theme-moon { display: none; }
}
:root[data-theme="dark"] .theme-btn .theme-sun { display: block; }
:root[data-theme="dark"] .theme-btn .theme-moon { display: none; }
.topbar-label { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--amber); color: var(--on-amber); font: 800 12.5px/1 var(--mono);
}
.cart-badge[data-count="0"] { background: rgba(var(--glass), 0.16); color: var(--board-muted); }
/* Find classmates (找课友): only its ways in are styled here; its page brings its own stylesheet (buddies.css) when it is opened */
.buddy-dot {
  position: absolute; top: -7px; right: -7px; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border: 2px solid var(--board); border-radius: 999px; background: var(--no-fill); color: #fff; font: 800 11.5px/1 var(--mono);
}
body:has(#sharedBar.viewing) .buddy-dot { display: none; } /* a shared plan on screen shows nothing of it */
.buddy-entry-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 2px 0 0; }
.buddy-entry { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0; border: none; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: underline; cursor: pointer; }
.buddy-entry-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--no-fill); color: #fff; font: 800 11.5px/1 var(--mono); text-decoration: none; }
.buddy-entry:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.links.buddy-link { margin-top: 6px; }
@keyframes cart-bump { 0% { transform: scale(1); } 35% { transform: scale(1.6); } 70% { transform: scale(0.92); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .cart-badge.bump { animation: cart-bump 0.45s ease; transform-origin: 100% 0; } /* grows toward the page, not past its right edge */
  .cart-toast { transition: opacity 0.18s ease, transform 0.18s ease; }
}
@media (max-width: 640px) {
  .topbar-inner { padding: 6px 12px; gap: 6px; }
  .topbar .brand { gap: 7px; min-width: 0; }
  .topbar .brand .for, .topbar-btn:not(.signed-in) .topbar-label { display: none; }
  .topbar .name { font-size: 20px; }
}
/* a narrow phone: the logo alone, so the language, light/dark, account and cart buttons keep their 44 px in one row */
@media (max-width: 420px) {
  .topbar .name { display: none; }
  .topbar .brand { min-width: 44px; justify-content: center; }
  .cart-badge { position: absolute; top: -7px; right: -7px; border: 2px solid var(--board); box-sizing: content-box; }
  .topbar-btn { padding: 0; }
}

/* the sticky bar covers the top 60px: the side panel starts below it */
@media (min-width: 901px) {
  .side { top: 78px; max-height: calc(100vh - 78px - 18px - 62px); }
}

/* Add to cart, on a card and in the detail panel */
.cart-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--board); background: var(--board); color: var(--board-ink);
  font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.cart-add svg { color: var(--board-accent); }
.cart-add:hover { background: var(--board-2); }
.cart-add.added { background: var(--ok-bg); border-color: var(--ok-solid); color: var(--ok); }
.cart-add.large { min-height: 44px; padding: 0 18px; font-size: 14px; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .cart-add:not(.added) { background: var(--amber); border-color: var(--board-accent); color: var(--on-amber); }
  :where(:root:not([data-theme="light"])) .cart-add:not(.added) svg { color: var(--on-amber); }
  :where(:root:not([data-theme="light"])) .cart-add:not(.added):hover { background: var(--amber); filter: brightness(1.07); }
}
:where(:root[data-theme="dark"]) .cart-add:not(.added) { background: var(--amber); border-color: var(--board-accent); color: var(--on-amber); }
  :where(:root[data-theme="dark"]) .cart-add:not(.added) svg { color: var(--on-amber); }
  :where(:root[data-theme="dark"]) .cart-add:not(.added):hover { background: var(--amber); filter: brightness(1.07); }
body.sharing [data-action="cart-add"], body.sharing [data-action="cart-toggle"] { display: none; }

/* The toast under the top bar */
.cart-toast {
  position: fixed; z-index: 40; top: 70px; right: calc(var(--dock-w) + 20px); max-width: min(480px, calc(100vw - 24px)); /* beside an open panel, never over it */
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 10px 10px 16px;
  border-radius: 14px; background: var(--board); color: var(--board-ink); border: 1px solid var(--board-line);
  box-shadow: 0 12px 40px rgba(14, 23, 38, 0.4); font-size: 14px;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
}
.cart-toast:empty { display: none; }
.cart-toast.show { opacity: 1; pointer-events: auto; transform: none; }
.cart-toast-text { flex: 1 1 180px; font-weight: 650; white-space: pre-line; }
/* the school and the major disagree: a warning line with its two answers */
.school-conflict { margin: 4px 0 14px; max-width: 760px; padding: 12px 16px; border: 1px solid var(--check-solid); border-radius: 12px; background: #fcefd2; color: #6b4500; }
.school-conflict[hidden] { display: none; }
.school-conflict p { margin: 0 0 8px; font-weight: 650; }
.school-conflict-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.school-conflict-actions button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #b07a12; background: #fff8e8; color: #4a3000; font-weight: 650; cursor: pointer; }
.school-conflict-actions button:first-child { background: #e3a21a; border-color: #e3a21a; color: #241600; }
@media (pointer: coarse) { .school-conflict-actions button { min-height: 44px; } }
/* another section of the course is in the cart: said in words on the card, so a ✓ is never read as this section's */
.cart-other-line, .chat-cart-other { margin: 4px 0 0; font-size: 12.5px; color: var(--check, var(--muted)); font-weight: 600; }
.chat-cart-other { flex-basis: 100%; }
.cart-add.cart-quick.other { border-style: dashed; }
.cart-toast-btn {
  min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 13.5px;
  color: inherit; background: rgba(var(--glass), 0.1); border: 1px solid var(--board-line);
}
.cart-toast-btn:hover { background: rgba(var(--glass), 0.18); }
.cart-toast-btn.primary-action { background: var(--amber); color: var(--on-amber); border-color: transparent; }
.cart-toast-x { width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: var(--board-muted); font-size: 20px; cursor: pointer; }
.cart-toast-x:hover { background: rgba(var(--glass), 0.12); color: var(--board-ink); }
.cart-toast button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (max-width: 640px) { .cart-toast { top: 64px; left: 12px; right: 12px; max-width: none; } }

/* The cart view: replaces the page body while the address is #cart */
.cart-view[hidden] { display: none; }
.cart-inner { max-width: 920px; margin: 0 auto; padding: 18px 28px 40px; }
.cart-head { display: grid; gap: 4px; }
.cart-back {
  justify-self: start; min-height: 44px; margin-left: -6px; padding: 0 12px 0 6px; border: none; background: transparent;
  color: var(--accent); font-size: 14.5px; font-weight: 650; cursor: pointer;
}
.cart-back:hover { text-decoration: underline; }
.cart-title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 18px; }
.cart-title-row .kicker { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.cart-title { margin: 2px 0 0; font-family: var(--display); font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; }
.cart-title:focus { outline: none; }
.cart-sync { margin: 0; font-size: 13.5px; color: var(--muted); }
.cart-sync.saved::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.cart-link { border: none; background: transparent; padding: 0; min-height: 32px; font: inherit; font-weight: 650; color: var(--accent); text-decoration: underline; cursor: pointer; }
.cart-link.danger { color: var(--no); }
.cart-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 14px; }
.cart-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px; border-radius: 12px; background: var(--no-bg); color: var(--no); font-weight: 650; }
.cart-danger { min-height: 40px; padding: 0 14px; border: none; border-radius: 10px; background: var(--no-fill); color: #fff; font-weight: 700; cursor: pointer; }
.cart-confirm .secondary { width: auto; min-height: 40px; padding: 0 14px; color: var(--ink); }
.cart-items { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.cart-item { position: relative; display: grid; gap: 8px; padding: 14px 8px 14px 16px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.cart-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 40px; min-height: 36px; } /* the × sits in the corner: chips that fill the row wrap beside it, not under it */
.cart-item-credits { font-family: var(--mono); font-size: 13px; }
.cart-remove { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; font-size: 24px; }
.cart-item-title { justify-self: start; max-width: 100%; margin-top: -4px; padding: 0; border: none; background: transparent; text-align: left; font: 650 17px/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.cart-item-title:hover { text-decoration: underline; }
.cart-item .instructors { font-size: 13px; }
.cart-secs { list-style: none; margin: 4px 8px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; }
.cart-sec { display: grid; gap: 6px; min-width: 0; align-content: start; }
.cart-sec-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 12.5px; }
.cart-foot {
  position: sticky; bottom: 0; z-index: 3; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(20, 24, 33, 0.14);
}
.cart-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.cart-total > span:first-child { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.cart-total b { font-family: var(--mono); font-size: 26px; }
.primary.cart-generate { width: auto; min-height: 56px; padding: 0 30px; font-size: 17px; background: var(--amber); color: var(--on-amber); }
.primary.cart-generate:hover { background: var(--amber); filter: brightness(1.07); }
.cart-empty { display: grid; justify-items: center; gap: 6px; padding: 64px 16px 80px; text-align: center; }
.cart-empty-title { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 700; }
.cart-empty p { margin: 0; }
.primary.cart-find { width: auto; min-height: 48px; margin-top: 14px; padding: 0 26px; }
.cart-view button:focus-visible, .cart-view .cart-item-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) {
  .cart-inner { padding: 8px 16px 28px; }
  .cart-title { font-size: 25px; }
  .cart-secs { grid-template-columns: minmax(0, 1fr); }
  .cart-foot { margin-left: -4px; margin-right: -4px; }
  .primary.cart-generate { width: 100%; }
  .cart-tools { flex-wrap: wrap; }
}

/* Sign in / create an account: the record dialog's frame, a short form */
.account-body { display: grid; gap: 14px; padding-bottom: 22px; }
.auth-form { display: grid; gap: 12px; }
.auth-field { display: grid; gap: 5px; font-size: 13px; font-weight: 650; color: var(--muted); }
.auth-field small { font-weight: 500; }
.auth-field textarea { width: 100%; min-height: 120px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; resize: vertical; }
.auth-ok { margin: 0; color: var(--ok); font-size: 13px; font-weight: 650; }
.footer .link-btn { font-size: inherit; min-height: 44px; }
/* the ICP filing number: centred at the very bottom, a 44 px target like the rest */
.footer .icp { margin: 10px 0 0; text-align: center; font-size: 12px; }
.footer .icp a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.footer .icp a:hover { text-decoration: underline; }
.auth-field input { width: 100%; min-height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.auth-error { min-height: 20px; margin: 0; font-size: 13.5px; font-weight: 650; color: var(--no); }
dialog.account { --auth-amber: #edb458; --auth-on-amber: #141821; --auth-ink: #141821; --auth-no: #b0232f; font-family: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) dialog.account { --auth-ink: #ece9e2; --auth-no: #f08a90; } }
:where(:root[data-theme="dark"]) dialog.account { --auth-ink: #ece9e2; --auth-no: #f08a90; }
dialog.account .record-head h2 { font-family: inherit; font-size: 22px; color: var(--auth-ink); }
dialog.account .auth-error { color: var(--auth-no); }
dialog.account .auth-error:empty { display: none; }
dialog.account .auth-error.ok { color: var(--ok); }
.auth-back { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 2px; padding: 0 10px 0 0; border: none; background: none; color: var(--auth-ink); font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer; }
.auth-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; color: var(--auth-ink); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
dialog.account { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: var(--surface); }
dialog.account .record-panel { gap: 14px; padding: 0 24px; background: var(--surface); }
dialog.account .record-head { align-items: flex-start; margin: 0; padding: 18px 0 2px; border: none; background: none; }
dialog.account .record-head h2 { margin-top: 4px; font-size: 26px; line-height: 1.25; font-weight: 800; }
dialog.account .icon-btn { flex: none; width: 44px; height: 44px; background: var(--surface-2); color: var(--auth-ink); }
dialog.account .account-body { padding-bottom: 24px; }
.auth-back[hidden], .auth-brand[hidden] { display: none; }
dialog.account input:not([type="checkbox"]):focus { outline: none; border-color: var(--auth-ink); box-shadow: 0 0 0 1px var(--auth-ink); }
dialog.account .auth-coderow input:focus { box-shadow: none; }
.auth-coderow input::selection { background: transparent; color: inherit; }
dialog.account .auth-terms a, dialog.account .auth-foot a { color: inherit; font-weight: 400; }
dialog.account .auth-field .auth-phone { display: flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
dialog.account .auth-field .auth-phone:focus-within { border-color: var(--auth-ink); box-shadow: 0 0 0 1px var(--auth-ink); }
dialog.account .auth-field .auth-phone select { width: 84px; border: none; border-right: 1px solid var(--line); border-radius: 0; background: none; }
dialog.account .auth-field .auth-phone input, dialog.account .auth-field .auth-phone input:focus { border: none; border-radius: 0; box-shadow: none; }
@media (max-width: 560px) {
  dialog.account, dialog.account[open] { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: none; border-radius: 0; }
  dialog.account .record-panel { min-height: 100%; padding: 0 22px; }
}
.auth-lead { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.auth-go { width: 100%; height: auto; min-height: 50px; border-radius: 14px; background: var(--auth-amber); color: var(--auth-on-amber); font-size: 15.5px; }
.auth-go:disabled { opacity: 0.6; cursor: default; }
.auth-go-danger { background: var(--auth-no); color: #fff; border: none; font-weight: 700; cursor: pointer; }
.auth-go-danger:disabled { opacity: 0.45; }
.auth-or { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--auth-ink); color: var(--surface); font-weight: 700; font-size: 15px; }
.auth-last { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 1.5px solid var(--auth-ink); border-radius: 14px; background: color-mix(in srgb, var(--auth-amber) 9%, var(--surface)); color: var(--auth-ink); font: inherit; text-align: left; cursor: pointer; }
.auth-last:disabled { opacity: 0.6; cursor: default; }
.auth-last-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.auth-last-text b { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.auth-last-text small { font-size: 12.5px; color: var(--muted); }
.auth-last-go { flex: none; font-size: 18px; }
/* The channel: two tabs under one line, amber under the one chosen. */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.auth-tabs button { min-height: 44px; padding: 0; border: none; border-bottom: 3px solid var(--line); background: none; color: var(--muted); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.auth-tabs button[aria-selected="true"] { border-bottom-color: var(--auth-amber); color: var(--auth-ink); font-weight: 700; }
.auth-field-bare { gap: 0; }
.auth-coderow { display: flex; align-items: stretch; min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.auth-coderow:focus-within { border-color: var(--auth-ink); box-shadow: 0 0 0 1px var(--auth-ink); }
.auth-coderow.bad, .auth-coderow.bad:focus-within { border-color: var(--auth-no); box-shadow: 0 0 0 1px var(--auth-no); }
.auth-coderow input { flex: 1; min-width: 0; padding: 0 14px; border: none; outline: none; background: none; color: var(--auth-ink); font: inherit; font-size: 16px; font-weight: 600; letter-spacing: 0.14em; }
.auth-coderow input::placeholder { color: var(--muted); font-weight: 400; letter-spacing: 0; }
.auth-send { flex: none; min-width: 112px; padding: 0 14px; border: none; border-left: 1px solid var(--line); background: none; color: var(--auth-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.auth-send:disabled { color: var(--muted); font-weight: 500; cursor: default; }
.auth-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.auth-note .cart-link { font-size: inherit; }
.auth-terms-hint { margin: -8px 0 0 30px; font-size: 13px; font-weight: 650; color: var(--auth-no); }
.auth-terms-hint:empty { display: none; }
.auth-keep { flex: 1; min-width: 0; }
.auth-alt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--auth-ink); font: inherit; font-weight: 650; font-size: 14.5px; cursor: pointer; }
.auth-foot { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; text-align: center; color: var(--muted); }
.auth-secret { position: relative; display: block; }
.auth-field .auth-secret input { padding-right: 52px; }
.auth-secret.bad input, .auth-secret.bad input:focus { border-color: var(--auth-no); box-shadow: 0 0 0 1px var(--auth-no); }
.auth-eye { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 100%; min-height: 44px; border: none; background: none; color: var(--muted); cursor: pointer; }
.auth-eye[aria-pressed="true"] { color: var(--auth-ink); }
.auth-outline { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--auth-ink); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.auth-outline:disabled { color: var(--muted); cursor: default; }
.auth-outline-strong { border-color: var(--auth-ink); }
.auth-outline-big { width: 100%; min-height: 48px; font-size: 15px; }
.auth-pair { display: flex; gap: 10px; }
.auth-hint-card { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.auth-help { display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: 16px; background: var(--surface-2); }
.auth-help > p { margin: 0; font-size: 15px; font-weight: 700; color: var(--auth-ink); }
.auth-nopass { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--auth-amber) 16%, var(--surface)); color: var(--auth-ink); }
.auth-nopass b { font-size: 15px; }
.auth-nopass p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.auth-danger { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--no-bg); }
.auth-danger b { font-size: 15px; color: var(--auth-no); }
.auth-danger p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.account-menu { position: fixed; z-index: 70; width: 240px; padding: 8px; border-radius: 16px; background: var(--surface); box-shadow: 0 14px 40px rgba(10, 17, 30, 0.22); }
.account-menu-who { display: grid; gap: 1px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); }
.account-menu-who b { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.account-menu-who small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.account-menu button { display: block; width: 100%; min-height: 44px; padding: 0 12px; border: none; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.account-menu button:hover, .account-menu button:focus-visible { background: var(--surface-2); }
.account-menu hr { margin: 2px 8px; border: none; border-top: 1px solid var(--line); }
.auth-welcome { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 72px); right: max(16px, env(safe-area-inset-right, 0px)); z-index: 60; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 88px); overflow-y: auto; display: grid; gap: 8px; padding: 8px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.auth-welcome-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 16px; background: #141821; color: #f6f4ef; }
.auth-welcome-head svg { flex: none; color: var(--amber); }
.auth-welcome-head > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.auth-welcome-head b { font-size: 15px; font-weight: 700; }
.auth-welcome-head span { font-size: 13px; line-height: 1.45; color: #cfd3da; }
.auth-welcome-close { flex: none; width: 44px; height: 44px; margin: -10px -10px -10px 0; border: none; background: none; color: #cfd3da; font-size: 20px; cursor: pointer; }
.auth-welcome-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.auth-welcome-term { margin: 0; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.auth-welcome-course { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.auth-welcome-course small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); }
.auth-welcome-next p { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.auth-welcome-next > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink); }
.auth-welcome-next .cart-link { flex: none; min-height: 44px; min-width: 44px; font-size: 13.5px; }
.auth-welcome-go { flex: none; min-height: 44px; padding: 0 18px; border: none; border-radius: 99px; background: #edb458; color: #141821; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.auth-row { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.auth-row .cart-link { font-size: 13.5px; }
.auth-row .cart-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.auth-row-spread { justify-content: space-between; }
.auth-row-center { justify-content: center; }
.auth-row-links { display: inline-flex; gap: 14px; }
.auth-row-bottom { margin-top: 8px; }
dialog.account .danger { color: var(--auth-no); }
.topbar-btn.signed-in { padding-inline: 5px; }
.topbar-btn.signed-in svg { display: none; }
.topbar-btn.signed-in .topbar-label { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #141821; color: #fff; font-weight: 700; }
.set-rows-plain { border: none; border-radius: 0; }
.set-rows-plain > div { padding-inline: 0; background: none; border-top: none; border-bottom: 1px solid var(--line); }
.set-rows { display: grid; gap: 0; }
.set-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.set-rows > div:empty { display: none; }
.set-rows p { margin: 0; min-width: 0; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.set-rows small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }
.set-ok { color: var(--ok); font-weight: 650; }
.auth-note .cart-link, .set-rows .cart-link { flex: none; min-width: 44px; text-align: center; }
.auth-note { margin: 0; min-height: 0; font-size: 13.5px; color: var(--muted); }
.auth-note:empty { display: none; }
.auth-account-actions { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.auth-account-actions .cart-link { font-size: 13.5px; }
.auth-actions .cart-danger { flex: 1; min-height: 42px; }
.auth-actions .cart-danger:disabled { opacity: 0.6; cursor: default; }
.auth-phone { display: flex; gap: 8px; align-items: stretch; }
.auth-field .auth-phone select { flex: none; width: 88px; min-height: 44px; padding: 0 8px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.auth-phone .auth-cc { flex: none; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--ink); font-weight: 650; }
.auth-field .auth-phone input { flex: 1; width: auto; min-width: 0; }
.auth-error.ok { color: var(--ok); }
.auth-terms { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.auth-terms input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.auth-terms a { color: var(--accent); font-weight: 650; }
@media (pointer: coarse) { .auth-terms { min-height: 44px; align-items: center; } }
.auth-actions { display: flex; gap: 10px; }
.auth-actions .record-save { width: 100%; }
.auth-actions .secondary { width: auto; min-height: 42px; padding: 0 20px; }
.auth-line { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) dialog.account { border-color: rgba(255, 255, 255, 0.1); } }
:where(:root[data-theme="dark"]) dialog.account { border-color: rgba(255, 255, 255, 0.1); }
@keyframes cart-bump-soft { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) { .record-pill.cart-pill.bump { animation: cart-bump-soft 0.35s ease; } }
/* ---------- The panels from the right: the chat sidebar and the cart drawer (chat.js, cart-ui.js, dock.js) ----------
   One is open at a time. On a desktop the page makes room for it (body padding), so the course list is never covered; below 768px
   the panel is the whole screen. --chat-w is the sidebar's width (35% of the window, at least 420px, or what the student dragged). */
:root {
  --chat-w: max(420px, 35vw);
  --chat-eff: min(var(--chat-w), max(420px, calc(100vw - 360px))); /* the list keeps at least 360px beside it */
  --cart-w: 440px;
  --dock-w: 0px; /* the width of the panel that is open */
}
@media (min-width: 768px) {
  body.chat-open:not(.chat-full) { --dock-w: var(--chat-eff); }
  body.cart-open { --dock-w: var(--cart-w); }
  body { padding-right: var(--dock-w); }
}
@media (prefers-reduced-motion: no-preference) {
  body { transition: padding-right 0.22s ease; }
  body.chat-resizing { transition: none; }
}
body.chat-resizing { user-select: none; cursor: col-resize; }
body.chat-resizing .chat { transition: none; }

/* a card narrower than its desktop layout (the panel takes room): the 24-hour bar drops under the text */
body.dock-open .card { grid-template-columns: minmax(0, 1fr) auto; }
body.dock-open .when { grid-column: 1 / -1; grid-row: 2; }
body.dock-open .right { grid-row: 1; grid-column: 2; }
/* what is left is too narrow for the list and the side panel side by side: the layout of a small screen (the 900px rules above) */
body.dock-narrow .layout { grid-template-columns: 1fr; }
body.dock-narrow .side { position: static; max-height: none; }
body.dock-narrow.detail-open .side {
  position: fixed; left: 0; right: var(--dock-w); bottom: 0; top: auto; z-index: 20; max-height: 86vh; overflow: auto;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.3); border-radius: 20px 20px 0 0;
}
body.dock-narrow.detail-open .side .panel { border-radius: 20px 20px 0 0; }
body.dock-narrow:not(.detail-open) .side {
  position: fixed; left: 0; right: var(--dock-w); bottom: 0; top: auto; z-index: 15; max-height: 72vh; overflow: auto;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25); border-radius: 20px 20px 0 0;
}
body.dock-narrow:not(.detail-open) .side .panel { border-radius: 20px 20px 0 0; }
body.dock-narrow:not(.detail-open):not(.sheet-open) .pass-body { display: none; }
body.dock-narrow .sheet-toggle { cursor: pointer; }
body.dock-narrow .sheet-toggle::after { content: "▴"; color: var(--board-muted); margin-left: auto; }
body.dock-narrow.sheet-open .sheet-toggle::after { content: "▾"; }
body.dock-narrow .footer { padding-bottom: 170px; }
body.dock-narrow .chat-launcher { bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); z-index: 14; }

/* the launcher: the chat sidebar has its own close button; the cart drawer leaves the launcher beside it; a phone's panel is the screen */
body.chat-open .chat-launcher { display: none; }
@media (max-width: 767px) { body.cart-open .chat-launcher { display: none; } }

/* ---- the chat sidebar ---- */
.chat-resize {
  position: absolute; left: -5px; top: 0; bottom: 0; z-index: 3; width: 11px; cursor: col-resize; touch-action: none;
}
.chat-resize::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 3px; background: transparent; transition: background 0.12s ease; }
.chat-resize:hover::after, .chat-resize:focus-visible::after, body.chat-resizing .chat-resize::after { background: var(--amber); }
.chat-resize:focus-visible { outline: none; }
.chat-full svg { display: block; margin: auto; }
.chat-full[aria-pressed="true"] { background: rgba(var(--glass), 0.22); }
body.chat-full .chat { width: 100vw; border-left: none; }
body.chat-full .chat-resize { display: none; }
/* full screen on a wide monitor: the conversation keeps a readable width in the middle */
body.chat-full .chat-head, body.chat-full .chat-log, body.chat-full .chat-composer, body.chat-full .chat-activity {
  padding-left: max(20px, calc(50vw - 460px)); padding-right: max(20px, calc(50vw - 460px));
}
body.chat-full .chat-history, body.chat-full .chat-notice { margin-left: max(16px, calc(50vw - 460px)); margin-right: max(16px, calc(50vw - 460px)); }
@media (max-width: 767px) {
  .chat-resize, .chat-full { display: none; }
  .chat-launcher { right: 16px; }
}

/* the sections the assistant recommends: cards like the course list's, with ＋ Add to cart on each */
.chat-section-card { position: relative; overflow: hidden; box-shadow: var(--shadow); }
.chat-section-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line); }
.chat-section-card.takeable::before { background: var(--ok-solid); }
.chat-section-card.check::before { background: var(--check-solid); }
.chat-section-card.no::before { background: var(--no-solid); }
.chat-section-card .chat-section-open { padding-left: 16px; }
.chat-section-card .chat-section-meta { padding-left: 16px; }
.chat-section-meta .chat-cart:not(.on):not(.other):not(:disabled)::before { content: "＋"; margin-right: 5px; font-weight: 800; }

/* ---- the course card's ＋ / ✓ ---- */
.card:has(> .cart-quick) { padding-right: 62px; }
.cart-add.cart-quick {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%;
  transition: transform 0.12s ease, background 0.12s ease;
}
.cart-add.cart-quick svg { display: block; color: inherit; }
.cart-add.cart-quick:not(.added) svg { color: var(--board-accent); }
.cart-add.cart-quick:hover { transform: scale(1.08); }
/* 11-05 「购物车按键和加入购物车微微明显一些」: ＋ and Add to cart in the amber of the cart count, the cart in the bar tinted */
/* Monet's water-lily blues (owner: 「莫奈的油画颜色 蓝色印象派」): a deep cornflower into a lilac blue, white on it at 6:1 */
:root { --monet-1: #3f5f95; --monet-2: #5b7db8; --monet-3: #7a73b0; --monet-mist: rgba(110, 146, 200, 0.18); }
.cart-add:not(.added) { background: linear-gradient(135deg, var(--monet-1), var(--monet-2) 60%, var(--monet-3)); border-color: var(--monet-1); color: #fff; box-shadow: 0 1px 2px rgba(20, 24, 33, 0.18), 0 4px 12px rgba(63, 95, 149, 0.25); }
.cart-add:not(.added) svg, .cart-add.cart-quick:not(.added) svg, :where(:root[data-theme="dark"]) .cart-add.cart-quick:not(.added) svg { color: #fff; }
.cart-add:not(.added):hover { filter: brightness(1.08); }
.cart-add.cart-quick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .cart-add.cart-quick:not(.added) svg { color: var(--on-amber); } }
:where(:root[data-theme="dark"]) .cart-add.cart-quick:not(.added) svg { color: var(--on-amber); }
@media (pointer: coarse), (max-width: 767px) {
  .cart-add.cart-quick { width: 44px; height: 44px; top: 8px; right: 8px; }
}
/* a card laid out in two columns (a small screen, or the page made narrower by a panel): the verdict chip sits under the corner button */
@media (max-width: 1060px) {
  .card:has(> .cart-quick) { padding-right: 16px; }
  .card:has(> .cart-quick) .right { align-self: start; padding-top: 42px; }
}
body.dock-open .card:has(> .cart-quick) { padding-right: 16px; }
body.dock-open .card:has(> .cart-quick) .right { align-self: start; padding-top: 42px; }

/* ---- the small hint under the cart icon, and the +1 ---- */
.cart-toast.compact { top: 62px; padding: 7px 16px; gap: 6px 10px; border-radius: 999px; font-size: 13.5px; box-shadow: 0 6px 22px rgba(14, 23, 38, 0.32); }
.cart-toast.compact:has(button) { padding: 6px 6px 6px 16px; border-radius: 16px; flex-wrap: nowrap; }
.cart-toast.compact .cart-toast-text { flex: 0 1 auto; }
.cart-toast.compact:has(button) .cart-toast-text { flex: 1 1 0; min-width: 0; } /* a question: the words wrap, the buttons stay on one line */
.cart-btn { position: relative; }
.cart-plus {
  position: absolute; left: 50%; top: 50%; z-index: 3; margin: -11px 0 0 -16px; padding: 3px 8px; border-radius: 999px; pointer-events: none;
  background: var(--ok-fill); color: #fff; font: 800 13px/1.2 var(--mono); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  animation: cart-plus 1.1s ease-out both;
}
@keyframes cart-plus { 0% { opacity: 0; transform: scale(0.5); } 20% { opacity: 1; transform: scale(1.2); } 40% { opacity: 1; transform: translateY(-2px) scale(1); } 100% { opacity: 0; transform: translateY(-16px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .cart-plus { animation: none; } }
@media (max-width: 640px) {
  .cart-toast.compact { left: auto; right: 12px; top: 60px; }
}
/* a phone's panel is the whole screen: the hint sits under its header instead of over its close button */
@media (max-width: 767px) {
  body.chat-open .cart-toast { top: 76px; }
  body.cart-open .cart-toast { top: 104px; }
}

/* ---- the cart drawer ---- */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(var(--cart-w), 100vw);
  display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  border-left: 1px solid var(--line); box-shadow: -14px 0 44px rgba(14, 23, 38, 0.22);
}
.cart-drawer[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .cart-drawer:not([hidden]) { animation: drawer-in 0.22s ease; } }
@keyframes drawer-in { from { transform: translateX(100%); } }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .cart-drawer { border-left-color: rgba(255, 255, 255, 0.08); box-shadow: -14px 0 44px rgba(0, 0, 0, 0.5); } }
:where(:root[data-theme="dark"]) .cart-drawer { border-left-color: rgba(255, 255, 255, 0.08); box-shadow: -14px 0 44px rgba(0, 0, 0, 0.5); }
.cart-drawer .cart-inner { flex: 1; min-height: 0; max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cart-drawer .cart-head {
  flex: none; gap: 4px; padding: 14px 14px 12px 20px; background: var(--board); color: var(--board-ink); border-bottom: 1px solid var(--board-line);
}
.cart-drawer .cart-title-row { flex-wrap: nowrap; align-items: center; gap: 10px; }
.cart-drawer .cart-title-row > div { min-width: 0; }
.cart-drawer .cart-title-row .kicker { color: var(--board-accent); }
.cart-drawer .cart-title { margin: 1px 0 0; font-size: 21px; line-height: 1.2; font-weight: 700; color: var(--board-ink); }
.cart-drawer .cart-back {
  flex: none; justify-self: auto; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border-radius: 50%;
  background: rgba(var(--glass), 0.08); color: var(--board-ink); font-size: 20px; line-height: 1;
}
.cart-drawer .cart-back:hover { background: rgba(var(--glass), 0.18); text-decoration: none; }
@media (pointer: coarse) { .cart-drawer .cart-back { width: 44px; height: 44px; padding: 5px; background-clip: content-box; } } /* 44px to touch, the circle stays 34px */
.cart-drawer .cart-sync { color: var(--board-muted); font-size: 13px; }
.cart-drawer .cart-sync.saved::before { color: var(--board-accent); }
.cart-drawer .cart-sync .cart-link { color: var(--board-accent); }
.cart-drawer .cart-sync .muted { color: var(--board-ink); }
.cart-drawer .cart-head button:focus-visible { outline-color: var(--board-accent); }
.cart-drawer .buddy-entry { color: var(--board-accent); }
.cart-drawer .buddy-entry-row .muted { color: var(--board-muted); font-size: 12.5px; }
.cart-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; }
.cart-drawer .cart-tools { margin-top: 12px; }
.cart-drawer .cart-items { margin-top: 10px; }
.cart-drawer .cart-item { padding: 12px 6px 12px 14px; }
.cart-drawer .cart-item.clash { box-shadow: inset 3px 0 0 var(--no-solid), var(--shadow); }
.cart-drawer .cart-item-head .clash-tag { margin-left: 2px; }
.cart-drawer .clashes { margin-top: 12px; }
.cart-drawer .cart-foot {
  position: static; flex: none; margin: 0; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; border-radius: 0; border: none;
  border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(20, 24, 33, 0.08); padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
.cart-drawer .primary.cart-generate { width: 100%; min-height: 52px; padding: 0 20px; font-size: 16.5px; }
.cart-drawer .cart-empty { padding: 48px 12px 56px; }
@media (max-width: 767px) {
  /* below the top bar (60px and its border), so the logo and the cart button stay there to press */
  .cart-drawer { width: 100%; top: 61px; }
  .cart-drawer .cart-head { padding-top: 14px; padding-left: 16px; }
  .cart-scroll { padding: 0 12px 12px; }
}

/* ---------- One-click timetable (schedule-ui.js) ---------- */
.tt-body { display: block; }
.tt-empty { margin: 18px 0 0; color: var(--muted); }
.tt-empty .tt-actions { margin-top: 14px; max-width: 320px; }
.tt-notes { list-style: none; margin: 0; padding: 0; }
/* the student's limit on days on campus: theirs to set, changed or removed right here */
.tt-campus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.tt-campus.set { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.tt-campus-label { font-size: 13px; font-weight: 650; color: var(--ink); }
.tt-campus select { height: 34px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.tt-campus-hint { flex: 1 1 100%; margin: 0; font-size: 12.5px; color: var(--muted); }
.tt-campus:not(.set) .tt-campus-hint { display: none; }
.tt-campus-none .tt-conflict p { font-weight: 500; }
.tt-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tt-tab {
  display: grid; gap: 1px; text-align: left; cursor: pointer; padding: 8px 16px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
}
.tt-tab b { font-size: 14.5px; }
.tt-tab span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tt-tab:hover { background: var(--surface-2); }
.tt-tab.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tt-tab.on span { color: inherit; opacity: 0.85; }
.tt-tags { margin: 14px 0 0; display: flex; gap: 6px; }
.tt-tag { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: var(--ok); background: var(--ok-bg); white-space: nowrap; }
.tt-tag.mine { color: var(--ink); background: var(--track); }
/* the option's numbers as labelled tiles: what it is, the number, what it covers */
.tt-stats { margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tt-stats div { padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.tt-stats dt { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tt-stats dd { margin: 2px 0 0; font-size: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tt-stats small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 500; color: var(--muted); }

.tt-conflicts { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--no-bg); border: 1.5px solid var(--no-solid); }
.tt-conflicts h3 { margin: 0 0 4px; font-size: 15px; color: var(--no); }
.tt-conflicts h4 { margin: 14px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.tt-conflicts p { margin: 0; font-size: 13.5px; }
.tt-conflict-list, .tt-fixes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.tt-conflict { padding: 8px 10px; background: var(--surface); border-radius: 10px; }
.tt-conflict > p { color: var(--no); }
.tt-conflict .tt-fixes { margin-top: 6px; }
.tt-fix {
  display: block; width: 100%; padding: 9px 12px; text-align: left; font-size: 13.5px; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 1.5px solid var(--ink); border-radius: 10px;
}
.tt-fix:hover { background: var(--surface-2); }

.tt-grid { --row: 32px; margin-top: 14px; padding: 0 8px 10px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.tt-line { display: flex; }
.tt-corner, .tt-ruler { flex: 0 0 52px; }
.tt-heads {
  position: sticky; top: 61px; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0;
}
.tt-dayhead { flex: 1 1 0; min-width: 0; padding: 9px 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink); }
.tt-dayhead.off { color: var(--muted); font-weight: 500; }
.tt-main { padding-top: 10px; }
.tt-ruler { position: relative; height: calc(var(--rows) * var(--row)); }
.tt-ruler span { position: absolute; right: 8px; transform: translateY(-50%); font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.tt-col {
  position: relative; flex: 1 1 0; min-width: 0; height: calc(var(--rows) * var(--row)); border-left: 1px solid var(--line);
  background-image:
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px calc(var(--row) * 2)),
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--line) 45%, transparent) 0 1px, transparent 1px var(--row));
}
.tt-block {
  position: absolute; z-index: 1; display: flex; flex-direction: column; overflow: hidden; container-type: size; text-align: left;
  padding: 5px 6px 4px 8px; font: inherit; color: var(--ink); cursor: pointer;
  background: hsl(var(--h) 70% 91%); border: 0; border-left: 4px solid hsl(var(--h) 60% 42%); border-radius: 6px;
}
.tt-block:hover { filter: brightness(0.97); }
.tt-block.on { z-index: 3; outline: 2px solid var(--focus); outline-offset: 1px; }
/* a block: the English title first (two lines at most), then code and kind, then the time */
.tt-name {
  font-size: 13.5px; font-weight: 700; line-height: 1.25; overflow: hidden; overflow-wrap: break-word; hyphens: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.tt-code, .tt-time { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.tt-code { opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-time { font-weight: 600; font-variant-numeric: tabular-nums; }
@container (max-height: 60px) { .tt-code { display: none; } }
@container (max-height: 40px) { .tt-time { display: none; } .tt-name { -webkit-line-clamp: 1; } }
@container (max-width: 90px) { .tt-name { font-size: 12px; -webkit-line-clamp: 3; } .tt-code { display: none; } .tt-time { font-size: 11.5px; } }
.tt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
@container (max-width: 44px) { .tt-text { writing-mode: vertical-rl; } .tt-code, .tt-time { display: none; } .tt-name { font-size: 11.5px; -webkit-line-clamp: 1; } } /* two classes side by side on a phone: the title reads sideways */
.tt-block.clash {
  border-left-color: var(--no-solid); box-shadow: inset 0 0 0 1.5px var(--no-solid);
  background-color: color-mix(in srgb, var(--no-solid) 16%, hsl(var(--h) 70% 91%));
}
.tt-overlap {
  position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1.5px var(--no-solid);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--no-solid) 40%, transparent) 0 2px, transparent 2px 7px), color-mix(in srgb, var(--no-solid) 8%, transparent);
}

.tt-detail {
  position: sticky; bottom: 8px; z-index: 4; margin-top: 12px; padding: 12px 14px; background: var(--surface);
  border: 1.5px solid hsl(var(--h, 215) 55% 45%); border-radius: 14px; box-shadow: var(--shadow);
}
.tt-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tt-detail-name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.tt-detail-sub { margin: 2px 0 8px; font-size: 13.5px; color: var(--muted); }
.tt-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 0; font-size: 13.5px; }
.tt-detail dt { color: var(--muted); }
.tt-detail dd { margin: 0; }
.tt-detail-clashes { margin: 8px 0 0; padding-left: 18px; color: var(--no); font-size: 13.5px; }
/* every course of the week: name, kind and Albert's numbers, when, credits */
.tt-key-box h3, .tt-agenda h3 { margin: 20px 0 8px; font-family: var(--display); font-size: 16px; }
.tt-key { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.tt-key > li { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.tt-key i { flex: none; width: 5px; border-radius: 3px; background: hsl(var(--h) 60% 45%); }
.tt-key p { margin: 0; }
.tt-key-name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.tt-key-sub { margin-top: 2px !important; font-size: 13px; color: var(--muted); }
.tt-when { margin-top: 4px !important; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tt-key-why { margin-top: 4px !important; font-size: 12.5px; color: var(--ok); }
.tt-key .tt-tag { margin-left: 8px; vertical-align: 1px; cursor: help; }
/* the week day by day: shown on a phone, where the grid's columns are narrow */
.tt-agenda { display: none; }
.tt-agenda > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tt-agenda h4 { margin: 0 0 6px; font-size: 14px; }
.tt-agenda ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tt-agenda ol li { display: grid; gap: 1px; padding: 9px 12px; border-radius: 10px; background: hsl(var(--h) 70% 95%); border-left: 4px solid hsl(var(--h) 60% 42%); }
.tt-agenda ol li.clash { border-left-color: var(--no-solid); background: var(--no-bg); }
.tt-ag-time { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tt-ag-name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.tt-ag-sub { font-size: 12.5px; color: var(--muted); }
.tt-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 18px; }
.tt-saved { margin: 8px 0 0; }
/* A switch of section (schedule-swaps.js, swap-view.js): this class -> that class, what changes in it, and the locks that keep a section as it is */
.lock-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.lock-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.lock-btn:hover { color: var(--ink); background: var(--surface-2); }
@media (pointer: coarse) { .lock-btn { min-height: 44px; padding: 3px 14px; } } /* 44px to touch on a phone */
.lock-btn.on { color: var(--ink); background: var(--track); border-color: var(--ink); }
.lock-btn[aria-disabled="true"] { cursor: default; opacity: 0.75; }
.lock-btn svg { flex: none; }
.cart-sec .lock-btns { margin-top: 2px; }
.tt-swaps { margin-top: 14px; padding: 12px 14px 14px; border-radius: 14px; background: var(--check-bg); border: 1.5px solid var(--check-solid); }
.tt-swaps h3 { margin: 0 0 2px; font-size: 15px; color: var(--check); }
.tt-swaps-intro { margin: 0; font-size: 13.5px; color: var(--ink); }
.tt-swap-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.tt-swap { padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.tt-swap p { margin: 0; }
.tt-swap-course { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.tt-swap-move { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tt-from { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.tt-to { color: var(--ink); }
.tt-swap-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.tt-swap-lines li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.tt-swap-lines li.same { color: var(--muted); }
.tt-swap-lines li.chg { color: var(--ink); font-weight: 600; }
.tt-chg { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: var(--check); background: var(--check-bg); border: 1px solid var(--check-solid); white-space: nowrap; }
.tt-swap-warn { display: flex; gap: 6px; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--no); background: var(--no-bg); }
.tt-swap-warn span:first-child { flex: none; }
.tt-swap-keep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--muted); }
.tt-swaps-more { margin: 8px 0 0; font-size: 13px; }
.tt-applied { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--ok-bg); border: 1px solid var(--ok-solid); color: var(--ok); }
.tt-applied h3 { margin: 0 0 4px; font-size: 14px; }
.tt-applied ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
.tt-locked-note { display: flex; align-items: center; gap: 6px; margin: 6px 0 0 !important; font-weight: 600; color: var(--ink); }
.tt-fix-changes { list-style: none; margin: 2px 0 0; padding: 0 0 0 12px; display: grid; gap: 1px; font-size: 12.5px; color: var(--muted); }
.tt-fix-changes .warn { color: var(--no); }
.tt-key-locks { margin-top: 6px; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .tt-block { background: hsl(var(--h) 35% 24%); border-left-color: hsl(var(--h) 55% 62%); }
  :where(:root:not([data-theme="light"])) .tt-block.clash { border-left-color: var(--no-solid); background-color: color-mix(in srgb, var(--no-solid) 24%, hsl(var(--h) 35% 24%)); }
  :where(:root:not([data-theme="light"])) .tt-key i { background: hsl(var(--h) 55% 60%); }
  :where(:root:not([data-theme="light"])) .tt-agenda ol li { background: hsl(var(--h) 30% 20%); border-left-color: hsl(var(--h) 55% 62%); }
  :where(:root:not([data-theme="light"])) .tt-grid, :where(:root:not([data-theme="light"])) .tt-conflict { border-color: rgba(255, 255, 255, 0.1); }
}
:where(:root[data-theme="dark"]) .tt-block { background: hsl(var(--h) 35% 24%); border-left-color: hsl(var(--h) 55% 62%); }
  :where(:root[data-theme="dark"]) .tt-block.clash { border-left-color: var(--no-solid); background-color: color-mix(in srgb, var(--no-solid) 24%, hsl(var(--h) 35% 24%)); }
  :where(:root[data-theme="dark"]) .tt-key i { background: hsl(var(--h) 55% 60%); }
  :where(:root[data-theme="dark"]) .tt-agenda ol li { background: hsl(var(--h) 30% 20%); border-left-color: hsl(var(--h) 55% 62%); }
  :where(:root[data-theme="dark"]) .tt-grid, :where(:root[data-theme="dark"]) .tt-conflict { border-color: rgba(255, 255, 255, 0.1); }
@media (max-width: 640px) {
  .tt-dayhead.off, .tt-col.off { display: none; } /* a phone shows only the days with classes: the tiles above name them */
  .tt-grid { --row: 32px; padding-right: 4px; }
  .tt-block { padding: 3px 3px 3px 5px; border-left-width: 3px; }
  .tt-corner, .tt-ruler { flex-basis: 42px; }
  .tt-ruler span { right: 5px; font-size: 11.5px; }
  .tt-dayhead { font-size: 13px; }
  .tt-name { font-size: 12px; }
  .tt-time { font-size: 11.5px; }
  .tt-key { grid-template-columns: minmax(0, 1fr); }
  .tt-agenda { display: block; }
  .tt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tt-stats div { padding: 8px 10px; }
  .tt-stats dt { font-size: 11.5px; }
  .tt-stats dd { font-size: 15.5px; }
  .tt-stats small { font-size: 11.5px; }
}
/* ---------- The older Grading facts (gpa-ui.js): the basis line, the three conditions ---------- */
.gpa-marks .gpa-line, .gpa-notes .gpa-line { cursor: default; }
.gpa-facts-line { display: flex; flex-wrap: wrap; align-items: baseline; font-size: 12.5px; color: var(--muted); }
.gpa-sep { white-space: pre; }
.gpa-via { margin-inline-start: 0.3em; }
.gpa-source { color: var(--accent); font-weight: 600; text-underline-offset: 2px; }
a.gpa-source:hover { text-decoration: underline; }
.gpa-unofficial { font-style: italic; }
.gpa-tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; border-radius: 999px; padding: 2px 9px;
  color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent);
}
.gpa-tag.ok { color: var(--ok); background: var(--ok-bg); }
.gpa-tag.pending { color: var(--check); background: var(--check-bg); }
.gpa-tag.out { color: var(--no); background: var(--no-bg); }
.gpa-neutral { font-size: 12.5px; color: var(--muted); cursor: help; }
.gpa-status { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.gpa-facts { margin: 0 0 6px; padding: 8px 12px; display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.gpa-facts div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 2px 10px; align-items: baseline; }
.gpa-facts dt { font-size: 12px; color: var(--muted); }
.gpa-facts dd { margin: 0; font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: baseline; }
.gpa-notes { margin: 0 0 6px; display: grid; gap: 2px; }
.gpa-tag.ref { color: var(--muted); }
.gpa-syl { margin: 8px 0 6px; }
.gpa-syl h4 { margin-bottom: 4px; }
.gpa-syl-line { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; }
.gpa-refs { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.gpa-ref { font-size: 13px; line-height: 1.5; }
.gpa-ref .gpa-line { cursor: default; }
.chat-syllabus-quotes { margin: 6px 0 8px; padding: 6px 10px; border-left: 3px solid var(--line); font-size: 12px; color: var(--muted); display: grid; gap: 3px; }
.chat-syllabus-quotes q { quotes: none; }
.chat-syllabus-why { margin: 0 0 8px; color: var(--check); font-size: 12.5px; }
@media (max-width: 560px) {
  .gpa-facts div { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Files added in the chat: the paperclip menu, a card for each file over the text box, thumbnails in a message (public/chat.js) ---------- */
.chat-composer { position: relative; }
.chat-add svg { display: block; }
.chat-add-menu {
  position: absolute; left: 14px; bottom: calc(100% + 2px); z-index: 4; min-width: 200px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 32px rgba(14, 23, 38, 0.24);
}
.chat-add-menu button {
  display: block; width: 100%; min-height: 48px; padding: 0 18px; text-align: left; font: inherit; font-size: 15px; font-weight: 550;
  color: var(--ink); background: transparent; border: 0; cursor: pointer;
}
.chat-add-menu button + button { border-top: 1px solid var(--line); }
.chat-add-menu button:hover, .chat-add-menu button:focus-visible { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

.chat-attached { display: grid; gap: 5px; }
.chat-file-row { display: flex; gap: 8px; overflow-x: auto; padding: 1px 0 4px; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.chat-file-card {
  flex: 0 0 min(230px, 84%); display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px 4px 6px 6px; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.chat-file-card.error { background: var(--no-bg); border-color: color-mix(in srgb, var(--no) 45%, var(--line)); }
.chat-file-card .file-thumb {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 9px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent);
  background: var(--surface-2); border: 1px solid var(--line);
}
.chat-file-card .file-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chat-file-card .file-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.chat-file-card .file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }
.chat-file-card .file-sub { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.chat-file-card .file-sub.problem { color: var(--no); font-weight: 550; }
.chat-file-card .file-ready { color: var(--ok); font-weight: 700; }
.file-progress { width: 100%; height: 4px; margin-top: 1px; appearance: none; border: 0; border-radius: 2px; overflow: hidden; background: var(--track); }
.file-progress::-webkit-progress-bar { background: var(--track); }
.file-progress::-webkit-progress-value { background: var(--accent); transition: width 0.15s linear; }
.file-progress::-moz-progress-bar { background: var(--accent); }
.chat-file-card .file-remove, .chat-file-card .file-retry { flex: none; cursor: pointer; font: inherit; }
.chat-file-card .file-remove { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; font-size: 18px; line-height: 1; color: var(--muted); background: transparent; border: 0; border-radius: 50%; }
.chat-file-card .file-remove:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.chat-file-card .file-retry { min-height: 32px; padding: 0 11px; font-size: 12.5px; font-weight: 650; color: var(--no); background: transparent; border: 1.5px solid currentColor; border-radius: 999px; }
.chat-attach-note { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--muted); }

.chat-files { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chat-msg.assistant .chat-files { justify-content: flex-start; }
.chat-file-thumb { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }

@media (pointer: coarse), (max-width: 640px) {
  .chat-add { width: 44px; height: 44px; margin-bottom: 0; }
  .chat-file-card .file-remove { width: 44px; height: 44px; }
  .chat-file-card .file-retry { min-height: 44px; padding: 0 14px; }
  .chat-add-menu button { min-height: 52px; }
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .chat-add-menu, :where(:root:not([data-theme="light"])) .chat-file-card, :where(:root:not([data-theme="light"])) .chat-file-thumb { border-color: rgba(255, 255, 255, 0.1); }
  :where(:root:not([data-theme="light"])) .chat-file-card.error { border-color: color-mix(in srgb, var(--no) 55%, transparent); }
}
:where(:root[data-theme="dark"]) .chat-add-menu, :where(:root[data-theme="dark"]) .chat-file-card, :where(:root[data-theme="dark"]) .chat-file-thumb { border-color: rgba(255, 255, 255, 0.1); }
  :where(:root[data-theme="dark"]) .chat-file-card.error { border-color: color-mix(in srgb, var(--no) 55%, transparent); }

/* ---------- The cart in the chat: "Add to cart" on a section card, and the line that points to the cart (public/chat.js) ---------- */
.chat-section-meta .chat-cart {
  margin-left: auto; min-height: 36px; padding: 0 12px; font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer;
  color: var(--on-amber); background: var(--amber); border: 0; border-radius: 999px;
}
.chat-section-meta .chat-cart:hover:not(:disabled) { filter: brightness(1.06); }
.chat-section-meta .chat-cart.on { color: var(--ok); background: var(--ok-bg); cursor: default; }
.chat-cart-open {
  align-self: flex-start; min-height: 40px; padding: 0 16px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  color: var(--on-amber); background: var(--amber); border: 0; border-radius: 999px;
}
.chat-cart-open:hover { filter: brightness(1.06); }
@media (pointer: coarse), (max-width: 640px) {
  .chat-section-meta .chat-cart, .chat-cart-open { min-height: 44px; }
}

/* ---------- 水课／保 GPA: the reviewed list as a page of its own, like the cart (#picks, public/gpa-picks-ui.js) ---------- */
.picks-toggle { white-space: normal; text-align: left; line-height: 1.25; display: inline-flex; flex-direction: column; justify-content: center; }
.picks-toggle .pk-main { font-weight: 700; }
.picks-toggle .pk-sub { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.picks-view[hidden] { display: none; }
body.picks-open .board, body.picks-open .banner, body.picks-open .shared-bar, body.picks-open .layout, body.picks-open .footer { display: none; }
/* ---------- Plan my next term (plan-ui.js): major, year, what is done, what to take ---------- */
body.plan-open .board, body.plan-open .banner, body.plan-open .shared-bar, body.plan-open .layout, body.plan-open .footer { display: none; }
@media (max-width: 900px) { body.plan-open .chat-launcher { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } }
.plan-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--muted); }
.plan-steps li { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.plan-steps span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; background: var(--track); color: var(--muted); }
@media (max-width: 640px) { .plan-steps { gap: 6px 10px; font-size: 12.5px; } .plan-steps li { gap: 5px; } .plan-steps span { width: 20px; height: 20px; } }
.plan-steps li.on { color: var(--ink); }
.plan-steps li.on span { background: var(--ink); color: var(--bg); }
.plan-steps li.done span { background: var(--ok-fill); color: #fff; }
.plan-chosen { margin: 12px 0 0; font-size: 14px; }
.plan-step { margin-top: 18px; }
.plan-q { margin: 0 0 4px; font-family: var(--display); font-size: 22px; }
.plan-step > .muted { margin: 0 0 12px; font-size: 14px; }
.plan-status { margin-top: 18px; }
.plan-search { max-width: none; margin: 4px 0 14px; }
.plan-school h3 { margin: 18px 0 8px; font-size: 14.5px; }
.plan-school .n { font-weight: 500; color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.plan-majors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.plan-majors > li { display: grid; } /* the two cards of a row stand equally tall */
.plan-major, .plan-choice {
  display: grid; gap: 2px; width: 100%; min-height: 48px; padding: 10px 14px; text-align: left; cursor: pointer; font: inherit; font-size: 14.5px;
  color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
}
.plan-major:hover, .plan-choice:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); }
.plan-major.on, .plan-choice.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.plan-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.plan-choices.tracks { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.plan-choice b { font-size: 16px; }
.plan-choice span { font-size: 13px; color: var(--muted); }
.plan-choice.muted-choice { border-style: dashed; color: var(--muted); }
.plan-record { width: auto; padding: 9px 16px; font-size: 13.5px; }
.plan-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; align-items: start; }
.plan-col { padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.plan-col h4 { margin: 0 0 8px; font-size: 14.5px; }
.plan-col .n, .plan-checks .n { font-weight: 600; color: var(--muted); margin-left: 4px; }
.plan-col.needed { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface); }
/* a guess from the student's year: its own colour, apart from what they gave, until they answer it */
.plan-col.inferred { border-color: color-mix(in srgb, var(--check-solid) 55%, var(--line)); background: var(--check-bg); }
.plan-item.inferred { border-style: dashed; border-color: color-mix(in srgb, var(--check-solid) 60%, var(--line)); }
.plan-confirm { display: flex; gap: 8px; }
.plan-confirm button { flex: 1; min-height: 36px; padding: 6px 10px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.plan-yes { border: 1.5px solid var(--ok-fill); background: var(--ok-fill); color: #fff; } /* white on the dot green was 3.4:1 */
.plan-no { border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.plan-yes:hover { filter: brightness(1.06); }
.plan-no:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); }
.plan-by { font-weight: 650; color: var(--ok); }
.plan-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 4px 0 6px; padding: 10px 14px; border-radius: 12px; background: var(--check-bg); border: 1px solid color-mix(in srgb, var(--check-solid) 55%, var(--line)); }
.plan-banner p { margin: 0; flex: 1 1 260px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--check); }
.plan-banner .secondary { width: auto; padding: 8px 16px; font-size: 13.5px; }
.plan-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-item { border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
/* one line a requirement: the box, then the name; the whole row is the box's label (44 px to tap) */
.plan-row { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 7px 12px; box-sizing: border-box; }
label.plan-row { cursor: pointer; }
.plan-box { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ok-solid); cursor: pointer; }
.plan-box:disabled { cursor: default; }
.plan-item-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.plan-item-head { display: inline; }
.plan-options { flex-basis: 100%; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin: 0 !important; }
.plan-step > p.plan-preticked { color: var(--ink); }
.plan-area { margin: 6px 2px -2px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); }
.plan-area:first-child { margin-top: 0; }
.plan-by.inferred { color: var(--check); }
/* the step's next button stays in reach at the foot of a phone screen */
@media (max-width: 760px) {
  .plan-actions.plan-sticky { position: sticky; bottom: 0; z-index: 2; margin: 12px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 94%, transparent); border-top: 1px solid var(--line); backdrop-filter: blur(6px); }
}
.plan-item-main { min-width: 0; }
.plan-item p { margin: 0; }
.plan-item-head { font-size: 14px; font-weight: 650; line-height: 1.35; }
.plan-options { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.plan-item-meta { display: flex !important; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--muted); }
.plan-term { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.plan-need { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.plan-tick { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.plan-tick input { width: 17px; height: 17px; accent-color: var(--ok-solid); }
.plan-none { margin: 0; font-size: 13px; }
.plan-checks { margin-top: 14px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.plan-checks > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 650; font-size: 14px; }
.plan-checks .plan-items { padding-bottom: 12px; }
.plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.plan-actions .primary, .plan-actions .secondary { width: auto; min-height: 46px; padding: 0 22px; }
.plan-goal { margin: 6px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.plan-goal p { margin: 8px 0 0; font-size: 14px; }
.plan-incart { margin: 8px 0 4px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.plan-incart summary { cursor: pointer; font-weight: 650; font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.plan-incart > p { margin: 4px 0 8px; font-size: 13px; }
.plan-incart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-incart li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.plan-incart-name { min-width: 0; overflow-wrap: anywhere; }
.plan-goal-bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.plan-goal-bar span { display: block; height: 100%; background: var(--ok-solid); border-radius: inherit; }
.plan-group h4 { margin: 22px 0 8px; font-family: var(--display); font-size: 16px; }
.plan-group.now h4 { color: var(--accent); }
.plan-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan-req { padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.plan-req > p { margin: 0; }
.plan-req-head { font-size: 15px; font-weight: 700; line-height: 1.35; }
.plan-covered { margin-top: 6px !important; font-size: 13px; color: var(--ok); font-weight: 600; }
.plan-picks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.plan-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.plan-pick p { margin: 0; }
.plan-pick-name { font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.plan-pick-meta { margin-top: 3px !important; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: var(--muted); }
.plan-pick-why { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.plan-verdict { font-weight: 700; }
.plan-verdict.takeable { color: var(--ok); }
.plan-verdict.check { color: var(--check); }
.plan-verdict.no { color: var(--no); }
.plan-more { margin: 6px 0 0 !important; font-size: 12.5px; }
.plan-blocked > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 14px; color: var(--muted); }
.plan-blocked > summary::-webkit-details-marker { display: none; }
.plan-blocked > summary::after { content: "▾"; transition: transform 0.15s; }
.plan-blocked:not([open]) > summary::after { transform: rotate(-90deg); }
.plan-blocked > .plan-reqs { margin-top: 6px; }
.plan-years { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; font-size: 13px; color: var(--muted); }
.plan-year { border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 650; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.plan-year.on { border-color: var(--accent); color: var(--accent); }
.plan-status-line { margin: 6px 0; font-size: 13px; font-weight: 600; }
.plan-status-line.verified { color: var(--ok); }
.plan-status-line.partial { color: var(--muted); }
.plan-status-line.conflict { color: var(--no); }
.plan-majors.ranked { grid-template-columns: 1fr; }
@media (pointer: coarse) { .plan-year { min-height: 44px; } }
.plan-source { margin: 26px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.plan-source p { margin: 0 0 4px; }
.plan-source a { color: var(--accent); font-weight: 600; }
@media (max-width: 760px) {
  .plan-columns { grid-template-columns: minmax(0, 1fr); }
  .plan-pick { flex-direction: column; align-items: stretch; }
  .plan-q { font-size: 19px; }
}
.picks-inner { max-width: 1400px; padding-bottom: 96px; } /* as wide as the course list, so the cards sit three to a row like its own */
.picks-head { margin-bottom: 4px; }
.picks-lead { display: grid; gap: 6px; margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); font-size: 14px; }
.picks-lead p, .picks-head .picks-meaning { margin: 0; }
.picks-policy b { display: block; font-weight: 700; margin-bottom: 2px; }
.picks-meaning { color: var(--muted); font-size: 13.5px; }
.picks-meta { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 8px; }
@media (max-width: 640px) { .picks-meta { flex-direction: column; } .picks-meta [aria-hidden="true"] { display: none; } }
.picks-counts { font-size: 13.5px; font-weight: 600; }
.picks-head .picks-meaning { margin-top: 6px; }
.picks-status { margin-top: 18px; }
.picks-filters { display: grid; gap: 10px; margin-top: 16px; }
.picks-search { max-width: none; flex: none; }
.picks-more { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 0 14px; }
.picks-more > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 650; font-size: 14px; list-style: none; }
.picks-more > summary::-webkit-details-marker { display: none; }
.picks-more > summary::after { content: "▾"; margin-inline-start: auto; color: var(--muted); }
.picks-more[open] > summary::after { content: "▴"; }
.picks-more > summary:focus-visible, .picks-open:focus-visible, .pick-chip:focus-visible, .pick-see:focus-visible, .picks-view .link-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.picks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; padding: 4px 0 14px; }
.picks-field { display: grid; gap: 5px; font-size: 13px; font-weight: 650; color: var(--muted); align-content: start; }
.picks-field select, .picks-field input[type="search"] {
  width: 100%; min-height: 44px; padding: 0 10px; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.picks-field input:focus-visible, .picks-field select:focus-visible, .picks-search input:focus-visible, .picks-exam input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.picks-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.picks-exam { grid-column: span 2; }
.picks-exam input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--accent); }
.picks-exam small { font-weight: 400; font-size: 12px; }
.picks-clear { justify-self: start; min-height: 36px; }
.picks-shown { margin: 0; font-size: 13.5px; color: var(--muted); }
/* a heading or the count on the left, the copy button on the right */
.picks-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 14px 2px 0; }
.picks-secs .picks-tools { margin: 20px 2px 10px; }
.picks-secs .picks-tools h3 { margin: 0; }
/* copying: a quiet icon beside a code or a class number, a small pill beside a heading, a tick once it is on the clipboard */
.copy-btn {
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -6px 0 -6px 3px; padding: 0; vertical-align: middle;
  border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.15s, background-color 0.15s;
}
@media (hover: hover) { .copy-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--muted) 14%, transparent); } }
.copy-text-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 13px; white-space: nowrap; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 650; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
@media (hover: hover) { .copy-text-btn:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); } }
.copy-text-btn[hidden] { display: none; }
.copy-btn .ic, .copy-text-btn .ic { display: block; flex: none; }
.copy-btn .ic-done, .copy-text-btn .ic-done, .copy-text-btn .when-done { display: none; }
.copy-btn.copied, .copy-text-btn.copied { color: var(--ok); }
.copy-text-btn.copied { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); background: var(--ok-bg); }
.copy-btn.copied .ic-copy, .copy-text-btn.copied .ic-copy, .copy-text-btn.copied .when-idle { display: none; }
.copy-btn.copied .ic-done, .copy-text-btn.copied .ic-done { display: block; }
.copy-text-btn.copied .when-done { display: inline; }
.pick-code-wrap { display: inline-flex; align-items: center; }
.cart-title-row .kicker .copy-btn { margin-block: -8px; }
@media (pointer: coarse) {
  .copy-btn { width: 36px; height: 36px; margin: -11px -5px -11px 0; }
  .copy-text-btn { min-height: 40px; }
}
/* says what was copied, low in the middle of the screen, then fades */
.picks-toast {
  position: fixed; z-index: 45; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); max-width: min(420px, calc(100vw - 32px));
  padding: 9px 18px; border-radius: 999px; background: var(--board); color: var(--board-ink); border: 1px solid var(--board-line);
  box-shadow: 0 12px 40px rgba(14, 23, 38, 0.32); font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 0.18s, transform 0.18s;
}
.picks-toast:empty { display: none; }
.picks-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) { .picks-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); } } /* above the chat button */
@media (prefers-reduced-motion: reduce) { .copy-btn, .copy-text-btn, .picks-toast { transition: none; } }
.picks-group { margin-top: 20px; }
/* the same columns, gap and equal heights as the course list's cards (.cards), the last line of each card on one baseline */
.picks-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: stretch; }
.picks-cards > .pick-card { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.picks-cards > .pick-card > .pick-card-meta { margin-top: auto; padding-top: 4px; }
.pick-card { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); border: 1px solid transparent; cursor: pointer; }
.pick-card:hover { border-color: var(--line); }
.pick-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pick-card-title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 650; min-width: 0; }
.pick-open { padding: 0; border: none; background: transparent; text-align: left; font: inherit; font-weight: 650; color: var(--ink); cursor: pointer; }
.pick-open:hover { text-decoration: underline; }
.pick-topic, .pick-topic-h { font-size: 13.5px; font-weight: 500; color: var(--muted); margin-inline-start: 0.4em; }
.pick-credits { margin: 0; font-size: 13px; white-space: nowrap; }
.pick-card-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--muted); }
.pick-code { font-weight: 600; color: var(--ink); }
.pick-profs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pick-prof { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 13.5px; }
.pick-prof-name { font-weight: 650; }
.pick-exam b { font-family: var(--mono); font-weight: 700; margin-inline-start: 0.15em; }
.pick-term { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.pick-more { font-size: 12.5px; color: var(--muted); }
.pick-see { justify-self: start; width: auto; min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.pick-tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; border-radius: 999px; padding: 2px 9px;
  color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent);
}
.pick-tag.current { color: var(--ok); background: var(--ok-bg); }
.pick-tag.undated, .pick-tag.draft { color: var(--check); background: var(--check-bg); }
.pick-tag.conflict { color: var(--no); background: var(--no-bg); }
.pick-tag.upload { color: var(--check); background: var(--check-bg); }
.pick-quote-at { font-size: 11.5px; white-space: nowrap; }
.pick-tag.private { color: #6d28d9; background: color-mix(in srgb, #7c3aed 13%, transparent); }
.pick-tag.variation { color: color-mix(in srgb, var(--accent) 78%, var(--ink)); background: color-mix(in srgb, var(--accent) 13%, transparent); cursor: help; }
.pick-chip {
  font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; border: none; border-radius: 999px; padding: 3px 10px;
  color: color-mix(in srgb, var(--accent) 78%, var(--ink)); background: color-mix(in srgb, var(--accent) 13%, transparent); /* the tint under the text is 4.5:1 with it */
}
.pick-chip:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
@media (pointer: coarse) { .pick-chip { min-height: 44px; padding: 6px 12px; } }
/* The chip's evidence in brief (gpa-picks-ui.js popHtml): a small card over the list, placed beside the chip */
.pick-pop {
  position: fixed; z-index: 40; max-height: calc(100dvh - 24px); overflow-y: auto; display: grid; gap: 8px; padding: 12px 14px 14px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(14, 23, 38, 0.28);
}
.pick-pop[hidden] { display: none; }
.pick-pop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pick-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pick-pop-head h3 { margin: 4px 0 0; font-family: var(--display); font-size: 15px; color: var(--accent); }
.pick-pop-x {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; font-size: 20px; line-height: 1; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 50%;
}
.pick-pop-x:focus-visible, .pick-pop-foot button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pick-pop-course { margin: 0; font-size: 13px; color: var(--muted); }
.pick-pop-facts div { grid-template-columns: 6.5em minmax(0, 1fr); font-size: 13.5px; }
.pick-pop-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pick-pop-foot { margin: 2px 0 0; }
.pick-pop-foot button { min-height: 40px; }
@media (pointer: coarse) { .pick-pop-x { width: 44px; height: 44px; } .pick-pop-foot button { min-height: 44px; } }
.picks-secs h3 { margin: 20px 2px 10px; font-family: var(--display); font-size: 17px; }
.picks-sec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pick-sec { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); border-left: 5px solid var(--ok-solid); }
.pick-sec.is-other { border-left-color: var(--line); background: var(--surface-2); box-shadow: none; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pick-sec { scroll-margin-top: 76px; } /* below the top bar when a chip or a link lands on one */
.pick-sec:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pick-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.pick-mark { margin: 0; font-weight: 700; font-size: 15px; }
.pick-mark.ok { color: var(--ok); }
.pick-mark.no { color: var(--no); }
.pick-sec-line { margin: 0; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.pick-facts { margin: 0; display: grid; gap: 6px; }
.pick-facts div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 2px 14px; align-items: baseline; font-size: 14px; }
.pick-facts dt { color: var(--muted); font-size: 13px; }
.pick-facts dd { margin: 0; overflow-wrap: anywhere; }
.pick-meetings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pick-h { margin: 8px 0 0; font-family: var(--display); font-size: 14px; }
.pick-h5 { margin: 8px 0 4px; font-size: 13px; color: var(--muted); font-weight: 700; }
.pick-notes { margin: 0; font-size: 13.5px; }
.pick-warn, .pick-warn-line { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--check-bg); color: var(--check); font-size: 13.5px; }
.pick-warn p { margin: 4px 0 0; }
.pick-variation { margin: 0; font-size: 13.5px; }
.pick-evidence { border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--surface); }
.pick-evidence > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 650; font-size: 14px; }
.pick-evidence > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pick-ev-list { display: grid; gap: 10px; padding: 4px 0 12px; }
.pick-ev { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; }
.pick-ev.reject { border-color: var(--no); background: var(--no-bg); }
.pick-ev.pending { border-color: var(--check); }
.pick-ev p { margin: 0; }
.pick-ev-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.pick-ev-share b { font-size: 20px; }
.pick-verdict { font-weight: 700; font-size: 13px; }
.pick-verdict.pass { color: var(--ok); }
.pick-verdict.reject { color: var(--no); }
.pick-verdict.pending { color: var(--check); }
.pick-ev-labels { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pick-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pick-table th { text-align: left; font-weight: 650; color: var(--muted); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); }
.pick-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; overflow-wrap: anywhere; }
.pick-total { font-size: 12.5px; color: var(--muted); }
.pick-quote { margin: 0 0 6px; padding: 6px 10px; font-size: 12.5px; }
.pick-sources { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.pick-sources a { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.pick-panel { display: grid; gap: 6px; }
.pick-panel p { margin: 0; }
.pick-panel-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13.5px; }
.pick-sec-foot { margin: 0; }
.pick-sec.is-private { border-left-color: #8b5cf6; }
.pick-basis { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; }
.pick-basis p { margin: 0; }
.picks-route-rule { margin: 4px 0 0; font-size: 13.5px; }
.picks-more-btn { margin-top: 16px; }
:is(.picks-conditional, .picks-pending) { margin-top: 28px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--check); background: var(--surface); }
:is(.picks-conditional, .picks-pending) h3 { margin: 0 0 4px; font-family: var(--display); font-size: 16px; }
:is(.picks-conditional, .picks-pending) > p { margin: 0 0 8px; font-size: 13px; }
.pick-cond-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pick-cond { display: grid; gap: 6px; }
.pick-cond-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 650; }
.pick-cond-list { margin: 0; padding-left: 1.2em; font-size: 13.5px; }
.picks-view button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 900px) { body.picks-open .chat-launcher { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } }
@media (max-width: 640px) {
  .picks-inner { padding: 8px 16px 96px; }
  .picks-grid { grid-template-columns: minmax(0, 1fr); }
  .picks-exam { grid-column: auto; }
  .pick-facts div { grid-template-columns: minmax(0, 1fr); }
  .pick-card { padding: 12px 14px; }
  .pick-see { width: 100%; }
  .pick-ev { padding: 10px 12px; }
}

/* ---------- All professors, a page of its own like the picks (#professors), and a professor's details (professors-ui.js) ---------- */
.profs-toggle { white-space: normal; text-align: left; line-height: 1.25; }
body.profs-open .board, body.profs-open .banner, body.profs-open .shared-bar, body.profs-open .layout, body.profs-open .footer { display: none; }
@media (max-width: 900px) { body.profs-open .chat-launcher { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } }
.profs-coverage { line-height: 1.5; }
.profs-note { margin: 10px 0 0; font-size: 13px; }
.profs-note:empty { display: none; }
.profs-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.prof-row {
  display: grid; gap: 3px; width: 100%; min-height: 48px; padding: 10px 14px; text-align: left; cursor: pointer; font: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.prof-row:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.prof-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.prof-row-name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.prof-chip { font-size: 12px; font-weight: 650; padding: 1px 8px; border-radius: 999px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.prof-chip.possible, .prof-chip.verified { color: var(--accent); }
.prof-row-meta, .prof-row-teach { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.profs-filters .picks-clear { min-width: 44px; min-height: 44px; }
.profs-more { margin-top: 12px; }
.profs-more-btn { width: auto; min-height: 44px; padding: 0 20px; }
dialog.prof-detail { width: min(640px, calc(100vw - 24px)); }

/* ---------- "More cities…": the searchable list behind the city menu (public/city-picker.js) ---------- */
dialog.city-picker { height: min(82vh, 600px); }
.city-picker .record-panel { grid-template-rows: auto auto auto auto minmax(0, 1fr); padding-bottom: 16px; overflow: hidden; }
.city-count { margin: 0; min-height: 1.3em; }
.city-list { list-style: none; margin: 0 -22px; padding: 0 22px 2px; display: grid; align-content: start; gap: 6px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.city-pick {
  display: grid; gap: 1px; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.city-pick:hover { border-color: var(--muted); }
.city-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.city-pick.is-current { border-color: var(--accent); }
.city-pick-name { font-weight: 650; }
.city-pick-now { margin-left: 6px; font-size: 12px; font-weight: 650; color: var(--accent); }
.city-pick-sub { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.city-none { padding: 12px 0; color: var(--muted); }
.prof-detail .record-panel { gap: 12px; }
.prof-status { display: grid; gap: 4px; justify-items: start; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; }
.prof-status p { margin: 0; }
.prof-status.possible, .prof-status.verified { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.prof-cards { display: grid; gap: 10px; }
.prof-card { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.prof-card h3 { margin: 0; font-size: 15.5px; }
.prof-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; }
.prof-facts div { display: grid; gap: 1px; min-width: 0; }
.prof-facts dt { font-size: 12px; font-weight: 650; color: var(--muted); }
.prof-facts dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.prof-facts .prof-rating dd b { font-size: 17px; }
.prof-see { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; color: var(--accent); }
.prof-partial h3, .prof-teach h3 { margin: 0 0 6px; font-size: 14.5px; }
.prof-teach h3 .muted { margin-left: 6px; font-size: 12.5px; font-weight: 500; }
.prof-partial ul { margin: 0; padding-left: 1.2em; font-size: 13.5px; }
.prof-notes { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--check-bg); font-size: 13px; }
.prof-notes p { margin: 0; }
.prof-secs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prof-sec {
  display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; cursor: pointer; font: inherit;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.prof-sec:hover { border-color: var(--muted); }
.prof-sec-head { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.prof-sec-title { font-weight: 500; }
.prof-sec-meta { font-size: 12.5px; color: var(--muted); }
.prof-teach > p { margin: 6px 0 0; font-size: 13px; }
.prof-wait { margin: 0; }
.prof-foot .prof-to-page { min-height: 44px; }
.prof-detail button:focus-visible, .prof-detail a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Touch screens: every control at least 44x44 CSS px (launch acceptance B) ---------- */
@media (pointer: coarse) {
  /* round icon buttons keep their 34px look; the button around them is 44px (the fill is clipped to the old circle) */
  .icon-btn { width: 44px; height: 44px; padding: 5px; background-clip: content-box; }
  .icon-btn.small { width: 44px; height: 44px; padding: 8px; }
  .cart-toast-x { width: 44px; height: 44px; }
  .language-switch button { min-width: 44px; min-height: 44px; }
  /* buttons that have a box of their own: taller */
  .record-pill, .hero-primary, .hero-secondary, .busy-pill, .gpa-toggle, .about-edit, .chat-new, .cart-add, .cart-toast-btn, .busy-save, .busy-cancel, .copy-text-btn,
  .pick-see, .cart-danger, .cart-confirm .secondary, .record-find, .record-add button, .record-save, .record-clear, .auth-tabs button,
  .auth-actions .secondary, .auth-row .cart-link, .auth-note .cart-link, .set-rows .cart-link, .auth-account-actions .cart-link, .plan-record, .prereq-item > summary { min-height: 44px; }
  .record-pill.cart-pill { min-height: 44px; }
  /* text fields and menus: an explicit height (WebKit on a Mac or phone ignores min-height on a <select>) */
  .busy-times select, .busy-label input, .about-fields select, .about-fields input, .record-add input, .record-add select,
  .picks-field select, .picks-pair select, .tt-campus select { height: 44px; }
  /* the menus inside the "I'm ... and I'll be in ..." sentence: the hit area grows upward, the text and its dashed underline stay where they are */
  .situation .field select, #busyRow .field select { padding-top: 10px; margin-top: -10px; background-position: right 9px bottom 12px, right 4px bottom 12px; }
  .gap-field select { padding-top: 10px; margin-top: -10px; background-position: right 9px bottom 12px, right 4px bottom 12px; }
  .more-settings .gap-field select { height: 44px; }
  /* links and link-looking buttons that stand on their own line */
  .cart-tools .cart-link, .cart-item-title, .pick-open, .links a, .pick-sources a, .gpa-facts a.gpa-source, :is(.card-line, .instructors) .prof-name, p > .link-btn:only-child, :is(.plan-actions, .pick-sec-foot) > .link-btn {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .cart-item-title { display: flex; }
  /* the small "x" and copy buttons: 44px to touch, the layout around them unchanged */
  .copy-btn { width: 44px; height: 44px; margin: -15px -9px -15px 0; }
  .rchip button { width: 44px; height: 44px; margin: -11px -3px -11px -11px; }
  .busy-chip button { width: 44px; height: 44px; margin: -10px -9px -10px -10px; }
  .chat-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
  .chat-history-act, .chat-history-clear, .chat-history-rename { min-height: 44px; }
  .chat-history-open { min-height: 44px; }
  .plan-tick, .about-check, .plan-confirm button, .plan-banner .secondary { min-height: 44px; }
  /* the timetable's fix buttons, "try these hours", the clash lines that open and "sign in to sync" */
  .ghost, .tt-fix, .clashes summary { min-height: 44px; }
  .cart-sync .cart-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- the tour for a new account (public/tour.js): the ring and the card ---------- */
.tour-shield { position: fixed; inset: 0; z-index: 1000; }
.tour-ring { position: fixed; z-index: 1001; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 3px var(--amber), 0 0 0 9999px rgba(6, 10, 18, 0.58); }
.tour-card {
  position: fixed; z-index: 1002; width: min(380px, calc(100vw - 24px)); padding: 12px 18px 14px; border-radius: 16px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.tour-card:focus { outline: none; }
.tour-head { display: flex; align-items: center; justify-content: space-between; }
.tour-count { color: var(--muted); font-size: 13px; font-weight: 650; }
.tour-x { width: 44px; height: 44px; margin-right: -12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; }
.tour-card h2 { margin: 0 0 6px; font: 700 19px/1.3 var(--display); }
.tour-card p { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.tour-more { margin-top: -6px !important; }
.tour-more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 650; }
.tour-actions { display: flex; justify-content: space-between; gap: 10px; }
.tour-back, .tour-next { min-height: 44px; padding: 0 18px; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; }
.tour-back { border: 1px solid var(--line); background: transparent; color: var(--ink); }
.tour-next { border: 1px solid var(--amber); background: var(--amber); color: #0e1726; }
.tour-back:focus-visible, .tour-next:focus-visible, .tour-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) { .tour-card { top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; } }
@media (prefers-reduced-motion: no-preference) { .tour-ring { transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease; } }

/* ---- phones (2026-10-29): the cart is one slim bar until it is opened; the chat button is a round icon above it that steps
   aside while the page scrolls, so neither covers the form or the cards ---- */
@media (max-width: 767px) {
  body:not(.detail-open):not(.sheet-open) .pass-head { padding: 9px 16px; }
  .sheet-toggle { min-height: 44px; }
  body:not(.detail-open):not(.sheet-open) .sheet-toggle > span:first-child { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  body:not(.detail-open):not(.sheet-open) .pass-head .kicker { display: inline; }
  body:not(.detail-open):not(.sheet-open) .pass-head .pass-title { margin-top: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-launcher { right: 12px; min-height: 48px; padding: 0 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); }
  body:is(.landing-open, .home-early > *) .chat-launcher { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .chat-launcher { transition: opacity 0.18s ease, transform 0.18s ease; }
  body.page-scrolling .chat-launcher { opacity: 0; transform: translateY(14px); } /* a tap in those 0.7 s still opens the chat, never the card under it */
  .footer { padding-bottom: 130px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .chat-launcher { transition: none; } }

/* ---------- The home page (landing-ui.js): the words and the settings on the left, a picture on the right, three real numbers under them ---------- */
/* html.home-early (index.html's head line) stands for body.landing-open until landing-ui.js has run, so the first screen does not wait for the bundle */
.home-early #landing[hidden] { display: block; }
body:is(.landing-open, .home-early > *) .board, body:is(.landing-open, .home-early > *) .banner, body:is(.landing-open, .home-early > *) .shared-bar, body:is(.landing-open, .home-early > *) .layout, body:is(.landing-open, .home-early > *) .footer-data, body:is(.landing-open, .home-early > *) #restartBtn { display: none; }
body:is(.landing-open, .home-early > *) .cart-btn:has(.cart-badge[data-count="0"]) { display: none; } /* a cart with something in it stays within reach */
.footer-browse { display: none; }
body:is(.landing-open, .home-early > *) .footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; max-width: 1288px; padding: 8px 24px 36px; }
body:is(.landing-open, .home-early > *) .footer-body { display: contents; }
body:is(.landing-open, .home-early > *) .footer .link-btn { display: inline-flex; align-items: center; font-weight: 500; color: var(--muted); text-decoration: none; }
body:is(.landing-open, .home-early > *) .footer .link-btn:hover { color: var(--ink); text-decoration: underline; }
body:is(.landing-open, .home-early > *) .footer .footer-browse { font-weight: 650; color: var(--ink); }
body:is(.landing-open, .home-early > *) .footer .footer-browse::after { content: "\2192"; margin-left: 6px; }
body:is(.landing-open, .home-early > *) .footer .icp { flex-basis: 100%; margin: 6px 0 0; }
.landing { padding: clamp(28px, calc((100vh - 781px) / 2), 120px) 24px 8px; } /* on a tall screen the panel stands in the middle, not at the top */
.landing-panel { max-width: 1240px; margin: 0 auto; padding: 52px 56px 26px; border-radius: 28px; background: var(--surface); border: 1px solid var(--card-edge); box-shadow: var(--shadow); }
.landing-inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 44px; align-items: center; }
.landing h1 { margin: 0 0 14px; font-family: var(--display); font-size: clamp(32px, 3.6vw, 50px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.landing h1 span { display: block; text-wrap: balance; } /* a line for each sentence */
.landing h1:lang(zh) { word-break: keep-all; }
.landing-sub { margin: 0 0 24px; max-width: 48ch; font-size: 17px; line-height: 1.5; color: var(--muted); }
.landing-settings .situation { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; max-width: none; font-size: 15px; line-height: 1.4; }
.set-field { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); }
.set-field label { display: inline-flex; }
.set-field select {
  field-sizing: content; max-width: 62vw; min-height: 44px; padding: 0 16px 0 0; border: none; border-radius: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 7px) 55%, calc(100% - 3px) 55%; background-size: 4px 4px; background-repeat: no-repeat;
}
.landing-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.landing-go, .landing-import { min-height: 54px; padding: 0 26px; font-size: 16px; }
.landing-import { color: var(--ink); border-color: var(--board-edge); }
.landing-more { margin: 10px 0 0; font-size: 14px; }
.landing-more .link-btn { min-height: 32px; }

.landing-art { position: relative; min-height: 372px; }
.landing-art::before { content: ""; position: absolute; inset: 4% -2% 2% 4%; border-radius: 48% 52% 50% 50% / 56% 50% 50% 44%; background: color-mix(in srgb, var(--amber) 14%, var(--surface)); }
.art-cal, .art-list { position: absolute; isolation: isolate; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(15, 19, 26, 0.09); }
.art-cal { left: 0; top: 4%; width: 76%; padding: 14px 14px 12px; border-radius: 16px; }
.art-list { right: 0; bottom: 4%; width: 54%; padding: 14px; border-radius: 14px; }
.art-title { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
/* Each card is one big button: the button is the card's title and its ::after covers the card, over the blocks and rows */
.art-go { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; padding: 0; border: none; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.art-go::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 14px; }
.art-cal .art-go::after { border-radius: 16px; }
.art-go:focus-visible { outline: none; }
.art-go:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.art-arrow { color: var(--muted); font-weight: 600; }
.art-cal:active, .art-list:active { border-color: var(--muted); }
@media (hover: hover) {
  .art-cal:hover, .art-list:hover { border-color: var(--muted); box-shadow: 0 14px 34px rgba(15, 19, 26, 0.15); }
  .art-cal:hover .art-arrow, .art-list:hover .art-arrow { color: var(--ink); }
}
.art-week { display: grid; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 3px; }
.art-rail { display: flex; flex-direction: column; justify-content: space-between; height: 222px; margin-top: 20px; font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.art-day > span { display: block; height: 20px; font-size: 10.5px; color: var(--muted); text-align: center; }
.art-col { position: relative; height: 222px; border-left: 1px solid var(--line); }
.art-block { position: absolute; left: 2px; right: 1px; padding: 2px 3px; border-radius: 5px; overflow: hidden; font-style: normal; font-size: 9.5px; line-height: 1.15; color: var(--ink); }
.art-block b { font-weight: 600; }
.art-block.a { background: color-mix(in srgb, var(--amber) 28%, var(--surface)); }
.art-block.b { background: var(--check-bg); }
.art-block.c { background: var(--ok-bg); }
.art-block.d { background: var(--no-bg); }
.art-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.art-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 7px; font-size: 12px; }
.art-list b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-tick { width: 14px; height: 14px; border-radius: 4px; background: var(--ok-fill); }
.art-tag { padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.art-tag.takeable { color: var(--ok); background: var(--ok-bg); }
.art-tag.check { color: var(--check); background: var(--check-bg); }

.landing-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.landing-stats > div { text-align: center; border-left: 1px solid var(--line); }
.landing-stats > div:first-child { border-left: none; }
.landing-stats dd { margin: 0; font-size: 30px; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.landing-stats dt { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.landing-source { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); text-wrap: balance; }
@media (max-width: 900px) {
  .landing { padding: 14px 12px 8px; }
  body:is(.landing-open, .home-early > *) .footer { padding: 6px 14px 84px; gap: 0 16px; }
  .landing-panel { padding: 26px 18px 20px; border-radius: 20px; }
  .landing-inner { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .landing-settings .situation { flex-direction: column; }
  .set-field { width: 100%; }
  .set-field.set-hours select { max-width: 40vw; }
  .set-school select, .set-term select { flex: 1; field-sizing: auto; width: 100%; max-width: none; }
  .set-school, .set-term { display: flex; }
  .landing-actions { flex-direction: column; }
  .landing-go, .landing-import { width: 100%; padding: 0 12px; font-size: clamp(14px, 4.2vw, 16px); }
  .landing-go { white-space: nowrap; } /* the arrow stays with the words */
  .landing h1:lang(en) { font-size: clamp(26px, 7.4vw, 32px); } /* "See what you can take." on one line */
  /* the picture under the buttons, its two cards one under the other: a card over the calendar read as a sheet to swipe away */
  .landing-art { min-height: 0; padding-bottom: 12px; }
  .landing-art::before { inset: 0 -8px; }
  .art-cal, .art-list { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; }
  .art-list { margin-top: 12px; }
  .art-rail, .art-col { height: 176px; }
  .landing-stats { margin-top: 18px; padding-top: 16px; }
  .landing-stats dd { font-size: 22px; }
  .landing-stats dt { font-size: 12px; padding: 0 4px; text-wrap: balance; }
}
/* four numbers on a phone: two by two */
@media (max-width: 640px) {
  .landing-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .landing-stats > div:nth-child(3) { border-left: none; }
}
/* A laptop's window is short: what can give way does, so the whole panel and the line under it fit without scrolling. --h is how far the
   window stands above 540 px: 0 there, 360 px from 900 px up, where this is the layout above. */
@media (min-width: 901px) {
  .landing { --h: clamp(0px, calc(100vh - 540px), 360px); padding-top: max(calc(10px + var(--h) * 0.05), min(calc((100vh - 781px) / 2), 120px)); }
  .landing-panel { padding: calc(20px + var(--h) * 0.089) clamp(32px, 3.9vw, 56px) calc(10px + var(--h) * 0.044); }
  .landing-inner { gap: clamp(26px, 3vw, 44px); }
  .landing h1 { margin-bottom: calc(8px + var(--h) * 0.017); font-size: min(3.6vw, calc(34px + var(--h) * 0.044)); }
  .landing-sub { margin-bottom: calc(12px + var(--h) * 0.033); font-size: calc(15px + var(--h) * 0.0056); }
  .landing .landing-settings .situation { margin-bottom: calc(14px + var(--h) * 0.028); }
  .landing .set-field { min-height: calc(40px + var(--h) * 0.017); }
  .landing .set-field select { min-height: calc(38px + var(--h) * 0.017); }
  .landing-go, .landing-import { min-height: calc(46px + var(--h) * 0.022); }
  .landing-art { min-height: min(372px, calc(300px + var(--h) * 0.6)); }
  .landing .art-rail, .landing .art-col { height: min(222px, calc(172px + var(--h) * 0.42)); }
  .landing-stats { margin-top: calc(12px + var(--h) * 0.061); padding-top: calc(10px + var(--h) * 0.033); }
  .landing-stats dd { font-size: calc(24px + var(--h) * 0.0167); }
  .landing-stats dt { margin-top: 0; }
}
/* the three settings keep to one line on a narrow laptop */
@media (min-width: 901px) and (max-width: 1240px) {
  .landing-inner { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
  .landing .landing-settings .situation { gap: 8px; }
  .landing .set-field { gap: 6px; padding: 0 10px; }
  .landing .set-field select { padding-right: 14px; font-size: 14px; }
  .landing-go, .landing-import { padding: 0 20px; font-size: 15px; }
  .art-list { width: 60%; }
}

/* the intro film at the head of the tour (landing-ui.js) */
.tour-film { max-width: min(1000px, calc((100vh - 170px) * 16 / 9)); margin: 0 auto clamp(40px, 7vw, 80px); text-align: center; }
.tour-film h2 { margin: 0 0 18px; font: 700 clamp(24px, 2.6vw, 34px)/1.15 var(--display); letter-spacing: -0.02em; }
.film-frame { position: relative; aspect-ratio: 16 / 9; } /* keeps the film's place while it floats */
.tour-film video { display: block; width: 100%; height: 100%; border-radius: 20px; background: #0b0f17; box-shadow: 0 30px 80px rgba(15, 19, 26, 0.18); }
.film-x { display: none; }
/* scrolled past while watching: a small window in the bottom-left corner (the chat button has the right) that keeps playing; × stops it */
.film-frame.floating video { position: fixed; z-index: 40; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(360px, 62vw); height: auto; aspect-ratio: 16 / 9; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
.film-frame.floating .film-x { display: grid; place-items: center; position: fixed; z-index: 41; left: 8px; bottom: calc(8px + min(360px, 62vw) * 9 / 16 + env(safe-area-inset-bottom, 0px)); width: 32px; height: 32px; border: 0; border-radius: 50%; background: #0b0f17; color: #fff; font-size: 18px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
@media (pointer: coarse) { .film-frame.floating .film-x { width: 44px; height: 44px; bottom: calc(4px + min(360px, 62vw) * 9 / 16 + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: no-preference) { .film-frame.floating video { animation: film-float 0.28s cubic-bezier(.2,.8,.2,1); } @keyframes film-float { from { opacity: 0; transform: translateY(16px) scale(0.92); } } }
@media (max-width: 640px) {
  .tour-film video { border-radius: 14px; }
  /* on a phone the chat button is wide: the small window sits above it */
  .film-frame.floating video { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .film-frame.floating .film-x { bottom: calc(64px + min(360px, 62vw) * 9 / 16 + env(safe-area-inset-bottom, 0px)) !important; }
}

/* the demo (public/landing-demo.js): a window of Takeable on a fixed canvas, scaled; the course list on the left, the chat box on the right */
.dm { display: grid; justify-items: center; gap: 12px; }
.dm-fit { position: relative; }
.dm-window {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; border-radius: 16px; background: var(--bg);
  border: 1px solid var(--card-edge); box-shadow: 0 30px 80px rgba(15, 19, 26, 0.16), 0 4px 14px rgba(15, 19, 26, 0.06); font-family: var(--sans); color: var(--ink);
  display: flex; flex-direction: column; text-align: left;
}
.dm-window.can-try :is(.dm-opt, .dm-btn, .dm-field, .dm-send) { cursor: pointer; }
.dm-top { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; flex: none; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.dm-top i { width: 11px; height: 11px; border-radius: 50%; background: #e2e5ea; }
.dm-url { margin: 0 auto; padding: 3px 40px; border-radius: 7px; background: var(--surface); font-size: 11.5px; color: var(--muted); }
.dm-screen { position: relative; flex: 1; display: flex; min-height: 0; }
.dm-page { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; }
.dm-pagehead { display: grid; }
.dm-h { grid-area: 1 / 1; font: 700 19px var(--display); }
.dm-pills { display: flex; gap: 6px; min-height: 26px; }
.dm-pill { padding: 4px 11px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 700; }
.dm-lists { display: grid; }
.dm-list { grid-area: 1 / 1; display: grid; gap: 9px; align-content: start; }
.dm-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; }
.dm-card small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.dm-tag { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--amber) 26%, var(--surface)); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dm-chatbox { position: relative; width: 390px; flex: none; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 30px rgba(15, 19, 26, 0.06); }
.dm-chathead { display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 14px; flex: none; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.dm-x { margin-left: auto; color: var(--muted); font-size: 20px; }
.dm-chatbody { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.dm-thread { display: grid; gap: 10px; padding: 14px; }
.dm-msg { display: flex; align-items: flex-start; gap: 8px; }
.dm-msg.me { justify-content: flex-end; }
.dm-ava { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); }
.dm-ava svg { width: 16px; height: 16px; }
.dm-bubble { display: grid; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--surface-2); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.dm-msg.me .dm-bubble { border-radius: 14px 4px 14px 14px; background: var(--amber); color: #0e1726; }
.dm-q { display: grid; gap: 7px; }
.dm-opts { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 34px; }
.dm-opt { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.dm-answer, .dm-reply { display: grid; gap: 8px; }
.dm-think, .dm-said, .dm-think2, .dm-said2 { grid-area: 1 / 1; }
.dm-think { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--muted); }
.dm-typing { display: inline-flex; gap: 4px; padding: 5px 0; }
.dm-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.dm-table { margin-left: 34px; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 11.5px; }
.dm-table th { padding: 6px 7px; text-align: left; font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--surface-2); }
.dm-table td { padding: 6px 7px; border-top: 1px solid var(--line); white-space: nowrap; }
.dm-star { display: inline-block; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--amber) 26%, var(--surface)); font-weight: 700; font-size: 0.92em; }
.dm-btn { justify-self: start; display: inline-flex; align-items: center; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--amber); color: #0e1726; font: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 6px 16px rgba(245, 181, 68, 0.35); }
.dm-look { margin-left: 34px; }
.dm-input { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex: none; border-top: 1px solid var(--line); }
.dm-field { position: relative; flex: 1; display: grid; align-items: center; height: 38px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-2); font-size: 13.5px; }
.dm-ph, .dm-typed { grid-area: 1 / 1; white-space: nowrap; }
.dm-ph { color: var(--muted); }
.dm-typed { font-weight: 600; }
.dm-caret { position: absolute; left: 12px; top: 10px; width: 2px; height: 18px; background: var(--ink); }
.dm-send { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--surface); }
.dm-send svg { width: 16px; height: 16px; }
.dm-tip { position: absolute; z-index: 3; padding: 7px 11px; border-radius: 10px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.dm-ttview { position: absolute; left: 0; top: 0; bottom: 0; right: 390px; display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; background: var(--bg); }
.dm-tthead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dm-tthead b { font: 700 17px var(--display); }
.dm-badge { padding: 5px 12px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 12px; font-weight: 700; white-space: nowrap; }
.dm-week { flex: 1; display: grid; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 5px; min-height: 0; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.dm-day { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.dm-day > span { min-height: 15px; font-size: 11.5px; font-weight: 650; color: var(--muted); text-align: center; }
.dm-col { position: relative; flex: 1; border-radius: 8px; background: var(--surface-2); }
.dm-rail .dm-col { background: none; }
.dm-rail .dm-col span { position: absolute; right: 3px; translate: 0 -50%; font-size: 10px; color: var(--muted); }
.dm-block { position: absolute; left: 2px; right: 2px; padding: 3px 5px; border-radius: 6px; overflow: hidden; transform-origin: 50% 0; font-style: normal; font-size: 10.5px; line-height: 1.2;
  background: hsl(var(--h) 75% 90%); border-left: 3px solid hsl(var(--h) 60% 45%); color: hsl(var(--h) 50% 20%); }
.dm-block b { font-weight: 700; }
.dm-free { position: absolute; inset: 40% 0 auto; text-align: center; font-style: normal; font-size: 11px; font-weight: 650; color: var(--ok); }
.dm-ttfoot { display: flex; align-items: center; gap: 12px; }
.dm-toast { padding: 7px 12px; border-radius: 10px; background: var(--ink); color: var(--surface); font-size: 12.5px; font-weight: 650; }
.dm-cursor { position: absolute; left: 0; top: 0; z-index: 5; display: flex; align-items: flex-start; pointer-events: none; }
.dm-cursor svg { width: 20px; height: 22px; margin: -2px 0 0 -2px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.dm-cursor b { margin: 16px 0 0 -4px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.dm-cursor.you svg { color: #1f9d63; } .dm-cursor.you b { background: #1f9d63; }
.dm-cursor.bot svg { color: #0e1726; } .dm-cursor.bot b { background: #0e1726; }
.dm-ripple { position: absolute; left: -30px; top: -30px; z-index: 4; width: 60px; height: 60px; border-radius: 50%; border: 3px solid #1f9d63; pointer-events: none; }
.dm-player { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--card-edge); box-shadow: var(--shadow); }
.dm-part { display: grid; gap: 5px; width: 140px; min-height: 40px; align-content: center; padding: 0 4px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; }
.dm-part.on { color: var(--ink); }
.dm-bar { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.dm-bar i { display: block; height: 100%; background: #1f9d63; transform-origin: 0 50%; transform: scaleX(0); }
.dm-pause { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); cursor: pointer; }
.dm-pause svg { width: 14px; height: 14px; fill: currentColor; }
.dm-part:focus-visible, .dm-pause:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the phone canvas: only the chat box, the timetable over it at the end */
.dm.narrow .dm-window { border-radius: 30px; border-width: 6px; border-color: #11151c; }
.dm.narrow .dm-top { height: 26px; justify-content: center; background: var(--surface); border: 0; }
.dm.narrow .dm-top i { display: none; }
.dm.narrow .dm-top::before { content: ""; width: 90px; height: 18px; border-radius: 12px; background: #11151c; }
.dm.narrow .dm-chatbox { width: 100%; border: 0; box-shadow: none; }
.dm.narrow .dm-ttview { right: 0; padding: 14px 10px; }
.dm.narrow .dm-table { margin-left: 0; font-size: 10.5px; }
.dm.narrow .dm-table th, .dm.narrow .dm-table td { padding: 5px 4px; }
.dm.narrow .dm-table td:last-child, .dm.narrow .dm-table th:last-child { display: none; }
.dm.narrow .dm-opts { padding-left: 0; }
.dm.narrow .dm-tthead { flex-direction: column; align-items: flex-start; gap: 6px; }
.dm.narrow .dm-week { grid-template-columns: 24px repeat(5, minmax(0, 1fr)); gap: 3px; padding: 6px; }
.dm.narrow .dm-block { font-size: 8px; padding: 2px; left: 1px; right: 1px; }
.dm.narrow .dm-rail .dm-col span { font-size: 8px; right: 1px; }
.dm.narrow .dm-free { font-size: 9px; }
@media (max-width: 640px) { .dm-part { width: auto; flex: 1; } .dm-player { width: 100%; box-sizing: border-box; } }

/* ---------- The plan (plan-ui.js): the upload beside the majors, folding lists ---------- */
.plan-start { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.plan-upload { position: sticky; top: 84px; padding: 18px; border-radius: 16px; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--amber) 60%, var(--line)); }
.plan-upload h4 { margin: 8px 0 4px; font-size: 17px; }
.plan-upload p { margin: 0 0 14px; font-size: 14px; }
.plan-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--ink); font-size: 12.5px; font-weight: 700; }
details.plan-col > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
details.plan-col > summary::-webkit-details-marker { display: none; }
details.plan-col > summary::after { content: "▾"; color: var(--muted); transition: transform 0.15s; }
details.plan-col:not([open]) > summary::after { transform: rotate(-90deg); }
details.plan-col > summary h4 { margin: 0; }
details.plan-col[open] > summary { margin-bottom: 8px; }
.plan-tag { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; }
@media (max-width: 860px) {
  .plan-start { grid-template-columns: minmax(0, 1fr); }
  .plan-upload { position: static; order: -1; }
}

/* ---------- The header's "Start over / Change major" ---------- */
.topbar-link { border: none; background: transparent; padding: 0 6px; min-height: 44px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.topbar-link[hidden] { display: none; }
@media (max-width: 767px) { .topbar-link { display: none; } }

.plan-actions .hero-primary[disabled] { opacity: 0.5; cursor: default; filter: none; }

/* ---------- A course card in four lines at most (app.js cardHtml, 2026-10-29) ---------- */
.cards > .card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; padding: 12px 62px 12px 20px; }
.c-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.c-head .title { font-size: 16.5px; -webkit-line-clamp: 1; line-clamp: 1; }
.c-head .code { flex: none; }
.c-time, .list-ticks { display: grid; grid-template-columns: 236px minmax(140px, 300px) auto; gap: 14px; align-items: center; }
.c-time .when-text { font-size: 13.5px; }
.c-time .dial { height: 16px; }
.c-time .chip { justify-self: start; padding: 3px 10px; font-size: 13px; }
/* the list narrower than a card's row (an open chat, a small window): the time says it, without the bar or the hours above it, and nothing sticks out */
#list { container-type: inline-size; }
@container (max-width: 580px) {
  .c-time { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .c-time .dial { display: none; }
  .c-time .when-text { font-size: 12.5px; }
  .list-ticks { display: none; }
}
.list-ticks { padding: 0 62px 0 20px; }
.list-ticks .ticks { margin: 0; }
.c-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13.5px; color: var(--muted); }
.c-facts .prof-name { border: none; background: none; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.c-star { color: var(--ink); font-weight: 650; }
.c-facts .gpa-marks { margin: 0 0 0 4px; }
.c-now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13.5px; }
.c-now .cart-other-line { margin: 0; }
.c-now .why { font-size: 13.5px; }
body.dock-open .cards > .card { grid-template-columns: minmax(0, 1fr); }
body.dock-open .list-ticks { display: none; } /* the cards drop their 24-hour bar under the text: the hours above it stand aside */
@media (max-width: 767px) {
  .cards > .card { padding: 12px 56px 12px 18px; }
  .c-time { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .c-time .dial { display: none; } /* a phone has no room for the bar beside the time: the time says it */
  .c-time .when-text { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .c-time .when-text.clocks { white-space: normal; }
  .c-time .chip { padding: 2px 8px; font-size: 12.5px; }
  .list-ticks { display: none; }
}

/* ---------- The workspace's one line and the fold under it (the settings have one place) ---------- */
.board { padding: 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.board-inner { padding: 10px 28px; }
.ws-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; }
.ws-settings { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.ws-settings:hover, .ws-settings[aria-expanded="true"] { background: var(--surface-2); }
.ws-settings svg { flex: none; color: var(--muted); }
.ws-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.ws-link { min-height: 44px; padding: 0; border: none; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ws-link.set::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.more-settings { display: grid; gap: 10px; margin: 8px 0 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.more-settings[hidden] { display: none; }
.more-settings .situation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; max-width: none; font-size: 15px; line-height: 1.4; }
.more-settings .set-term { display: none; } /* the term is in the filter bar */
.more-settings .busy-row, .more-settings .about-row { margin: 0; max-width: none; }
.more-settings .gap-field { font-size: 15px; }
.scoreboard { display: block; margin: 0; }
.scoreboard:empty { display: none; }
.scoreboard .loading { margin-top: 8px; }
.board-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 767px) {
  .board-inner { padding: 6px 12px; }
  .ws-settings { width: 100%; }
}
.c-time .when-text .local { white-space: nowrap; }
@media (max-width: 767px) {
  .c-time .when-text .local { font-family: inherit; font-weight: 650; }

}

/* ---------- Colours (2026-10-29): amber only on the logo, the main buttons, the cart count and ＋ ---------- */
.field select { border-bottom-color: color-mix(in srgb, var(--board-ink) 35%, transparent); background-image: linear-gradient(45deg, transparent 50%, var(--board-muted) 50%), linear-gradient(135deg, var(--board-muted) 50%, transparent 50%); }
.primary { background: var(--amber); color: var(--on-amber); }
.primary:hover { background: var(--amber); filter: brightness(1.07); }

.loading progress::-webkit-progress-value { background: var(--ok-solid); }
.loading progress::-moz-progress-bar { background: var(--ok-solid); }
:is(.record-pill,
.busy-pill,
.about-edit,
.topbar-btn):hover { border-color: var(--board-edge); }
.record-pill.set, .busy-pill[aria-expanded="true"] { border-color: var(--board-edge); }
.busy-chip { background: var(--surface-2); border-color: var(--line); }
.daychip input:checked + span { background: var(--board-ink); border-color: var(--board-ink); color: var(--board); }

.plan-upload { border-color: color-mix(in srgb, var(--ok-solid) 55%, var(--line)); }
.plan-badge { background: var(--ok-bg); color: var(--ok); }
.chat-launcher { background: var(--ink); color: var(--surface); }
.chat-launcher svg path[stroke] { stroke: var(--amber); }
a:not([class]), .link-btn { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- The chat's welcome card (chat.js welcome) ---------- */
.chat-welcome { padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.chat-welcome h3 { margin: 0 0 10px; font-size: 17px; }
.chat-empty .chat-welcome-label { margin: 10px 0 4px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.chat-welcome .chat-welcome-label:first-of-type { margin-top: 0; }
.chat-know, .chat-can { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.chat-know li { display: flex; flex-wrap: wrap; gap: 0 4px; color: var(--ink); font-weight: 600; }
.chat-can li { color: var(--ink); }
.chat-can li::before { content: "✓"; margin-right: 8px; color: var(--ok); font-weight: 800; }

/* ---------- Plan A and Plan B in the timetable (schedule-ui.js plansHtml) ---------- */
.tt-plans { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tt-plan { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.tt-plan:hover { background: var(--surface-2); }
.tt-plan.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* The plan, from a file: the codes it read */
.plan-codes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; font-family: var(--mono); font-size: 12.5px; }
.plan-codes li { padding: 2px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.list-ticks { margin-top: 4px; }

/* ---------- The timetable, a page of its own under the top bar: the choices in a rail, the week filling the rest of the window ---------- */
/* whatever the cart was opened over (the plan, 高GPA, classmates) waits behind it, so the page is always the first thing in the window */
body.schedule-open .board, body.schedule-open .banner, body.schedule-open .shared-bar, body.schedule-open .layout, body.schedule-open .footer, body.schedule-open .landing, body.schedule-open .cart-view { display: none; }
body.schedule-open { transition: none; } /* the room the cart took comes back at once */
@media (max-width: 900px) { body.schedule-open .chat-launcher { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } }
dialog.compare.schedule { position: static; display: none; width: 100%; max-width: 1288px; height: auto; max-height: none; margin: 0 auto; padding: 0 24px 28px; overflow: visible; color: var(--ink); background: transparent; border: none; border-radius: 0; box-shadow: none; }
dialog.compare.schedule[open] { display: block; }
.schedule-panel { padding: 0; overflow: visible; }
.tt-head { position: static; flex-wrap: wrap; gap: 2px 14px; margin: 0; padding: 6px 0; color: var(--ink); background: transparent; border-bottom: none; }
.tt-head > div { flex: 0 1 auto; }
.tt-head .kicker { color: var(--accent); }
.tt-head .compare-sub { margin: 0 0 0 auto; font-size: 13px; }
.tt-rail { min-width: 0; }
.tt-cue { align-self: flex-start; justify-self: start; font-size: 13px; }
@media (max-width: 900px) { .tt-cue { display: inline-flex; align-items: center; min-height: 44px; } }
.tt-page { display: flex; flex-direction: column; gap: 12px; }
.tt-page .tt-rail { display: contents; } /* on a phone: which week, the week, then what to do with it */
.tt-plans { order: 1; }
.tt-tabs { order: 2; margin-top: 0; }
.tt-rail .tt-tags, .tt-cue { order: 3; margin: 0; }
.tt-option { order: 4; min-width: 0; }
.tt-actions { order: 5; margin-top: 0; }
.tt-saved { order: 6; }
.tt-rail .tt-campus { order: 7; margin-top: 0; }
.tt-export { position: relative; }
.tt-export summary { display: flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; list-style: none; text-align: center; }
.tt-export summary::-webkit-details-marker { display: none; }
.tt-export summary::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.tt-export-menu { display: grid; gap: 6px; margin-top: 6px; }
@media (max-width: 900px) {
  dialog.compare.schedule { padding: 0 14px 88px; }
  .tt-head .compare-sub { flex-basis: 100%; margin-left: 0; }
  /* one line of options to swipe through, the week right under it, its numbers after */
  .tt-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tt-tab { flex: 0 0 auto; }
  .tt-option { display: contents; }
  .tt-page .tt-stats { order: 5; margin-top: 0; }
  .tt-page .tt-actions { order: 6; }
  .tt-page .tt-saved { order: 7; margin: 0; }
  .tt-rail .tt-campus { order: 8; }
  .tt-page .tt-swaps { order: 9; margin-top: 0; }
  .tt-page .tt-agenda { order: 10; }
  .tt-page .tt-key-box { order: 11; }
  .tt-page .tt-scroll, .tt-page .tt-applied, .tt-page .tt-conflicts, .tt-page .tt-notes, .tt-page .tt-detail { order: 4; margin-top: 0; }
  .tt-page .tt-grid { margin-top: 0; }
}
@media (min-width: 901px) {
  .tt-page { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 16px; align-items: start; }
  .tt-page .tt-rail { position: sticky; top: 69px; z-index: 5; display: grid; gap: 10px; }
  .tt-rail .tt-plans { margin: 0; }
  .tt-rail .tt-tabs { display: grid; gap: 6px; }
  .tt-rail .tt-tab { padding: 6px 12px; border-radius: 12px; }
  .tt-rail .tt-tab b { font-size: 13.5px; }
  .tt-rail .tt-tab span { font-size: 12.5px; }
  /* save and export side by side, the three exports in a small menu, the cart under them */
  .tt-rail .tt-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .tt-rail .tt-actions > button, .tt-rail .tt-export summary { min-height: 38px; padding: 5px 8px; font-size: 13.5px; line-height: 1.2; }
  .tt-rail .tt-actions > [data-tt="usecart"] { grid-column: 1 / -1; }
  .tt-export-menu { position: absolute; z-index: 5; top: 100%; right: 0; width: 200px; margin-top: 4px; padding: 6px; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
  .tt-export-menu button { min-height: 36px; padding: 6px 10px; font-size: 13.5px; font-weight: 600; text-align: left; border: none; border-radius: 8px; }
  .tt-rail .tt-saved { margin: -4px 0 0; font-size: 12px; }
  .tt-rail .tt-campus { padding: 6px 10px; }
  /* the option's numbers on one line above the week */
  .tt-stats { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; padding: 6px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
  .tt-stats div { display: flex; align-items: baseline; gap: 6px; padding: 0; background: none; border: none; border-radius: 0; }
  .tt-stats dt { font-size: 12px; }
  .tt-stats dd { margin: 0; font-size: 14px; }
  .tt-stats small { display: none; }
  /* a half hour's height: what the window leaves for the week */
  .tt-grid { --row: clamp(12px, calc((100dvh - 218px) / var(--rows)), 38px); margin-top: 8px; }
  .tt-dayhead { padding: 6px 0; font-size: 13px; }
  .tt-dayhead.weekend.off, .tt-col.weekend.off { flex: 0 0 40px; }
  .tt-main { padding-top: 8px; }
}

/* Plan A and Plan B side by side: the numbers in one table, the two weeks on one clock; what differs stands out, what both hold fades */
.tt-body > .tt-plans { margin: 0 0 8px; }
.tt-cmp-table { display: grid; grid-template-columns: auto var(--cols); gap: 0 14px; padding: 6px 14px; font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.tt-cmp-row { display: contents; }
.tt-cmp-table [role="cell"], .tt-cmp-table [role="rowheader"], .tt-cmp-table [role="columnheader"] { padding: 3px 0; min-width: 0; }
.tt-cmp-head { font-size: 12px; font-weight: 600; color: var(--muted); }
.tt-cmp-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.tt-cmp-val.differs { color: var(--ink); font-weight: 700; }
.tt-cmp-link { font-size: inherit; font-weight: 700; }
.tt-cmp-note { margin: 6px 0 0; }
.tt-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; align-items: start; }
.tt-cmp-col { min-width: 0; }
.tt-cmp-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.tt-compare .tt-grid { margin-top: 4px; --row: clamp(12px, calc((100dvh - 372px) / var(--rows)), 30px); }
.tt-compare .tt-heads { position: static; }
.tt-compare .tt-dayhead.weekend.off, .tt-compare .tt-col.weekend.off { display: none; } /* an empty weekend gives its room to the names */
.tt-compare .tt-block.same { opacity: 0.42; }
.tt-compare .tt-block.same:hover { opacity: 0.7; }
.tt-cmp-only { margin-top: 8px; padding: 8px 12px; font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.tt-cmp-only ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 2px; color: var(--muted); }
@media (max-width: 900px) {
  /* a phone reads the table by number, not by plan: the same cells, one number to a line */
  .tt-cmp-table { grid-auto-flow: column; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); grid-template-rows: var(--lines); gap: 0 8px; }
  .tt-compare { grid-template-columns: minmax(0, 1fr); }
  .tt-compare .tt-grid { --row: 24px; }
}


/* ---------- Email reminders (reminders-ui.js): one quiet line in the timetable's rail, a switch on a full class in the cart ---------- */
.tt-remind { margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
.tt-remind .link-btn { font-size: 13px; }
.remind-ny, .remind-here { margin: 0; }
.seat-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.seat-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.seat-switch .seat-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.seat-switch.on { color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.seat-switch.on .seat-dot { background: var(--accent); border-color: var(--accent); }
.seat-switch:focus-visible, .tt-remind .link-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (pointer: coarse) { .seat-switch, .tt-remind .link-btn { min-height: 44px; } }
.auth-field select { width: 100%; min-height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }

/* ---------- Side navigation (public/sidenav.js) ----------
   From 900px the top bar stands down the left edge, dark in both themes: the mark, every way in (home, the plan and its steps,
   the course list, High GPA, the cart, the timetable, the course history, find classmates, the assistant), then the language,
   the theme and the account at its foot. Its own buttons keep their ids and handlers; only their places change (CSS order, the
   links' box is display: contents). The chat opens beside it on the left; the cart still comes from the right. Below 900px the
   top bar stays and the same links open from the menu button as a drawer. */
:root { --side-w: 236px; --side-bg: #141821; --side-ink: #e9ecf2; --side-muted: #9aa3b2; --side-hover: rgba(255, 255, 255, 0.07); --side-on: rgba(255, 255, 255, 0.14); }
.side-links, .side-label, .side-backdrop { display: none; }
.side-link {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 0 12px; box-sizing: border-box;
  border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer;
}
.side-link .side-icon { flex: none; opacity: 0.85; }
.side-link:hover { background: var(--side-hover); }
.side-link[aria-current="page"] { background: var(--side-on); color: #fff; }
.side-link[aria-current="page"] .side-icon { opacity: 1; }
.side-link:focus-visible, .side-step:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.side-steps { list-style: none; margin: 0 0 4px; padding: 0 0 0 20px; display: grid; gap: 0; }
.side-steps[hidden] { display: none !important; }
.side-step {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 0 10px; box-sizing: border-box;
  border: 0; border-radius: 9px; background: transparent; color: var(--side-muted); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer;
}
.side-step:hover:not(:disabled) { background: var(--side-hover); color: var(--side-ink); }
.side-step.todo { opacity: 0.6; }
.side-step-n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; font-size: 11px; font-weight: 800; line-height: 1; }
.side-step.done { color: var(--side-ink); }
.side-step.done .side-step-n { background: #4aa383; border-color: #4aa383; color: #fff; }
.side-step.on { color: #fff; }
.side-step.on .side-step-n { background: var(--amber); border-color: var(--amber); color: #141821; }
.side-sep { height: 1px; margin: 10px 10px; background: rgba(255, 255, 255, 0.1); }
.side-ask { background: rgba(255, 255, 255, 0.93); color: #141821; }
.side-ask:hover { background: #fff; }
.side-ask[aria-current="page"] { background: var(--amber); color: #141821; }
.side-ask .side-icon { opacity: 1; }

/* a laptop: the bar down the left edge, a little narrower below 1440px */
@media (min-width: 900px) and (max-width: 1199px) { :root { --side-w: 184px; } }
@media (min-width: 1200px) and (max-width: 1439px) { :root { --side-w: 204px; } }
/* beside the bar the home page has 1,000 to 1,450px: the words get the wider column so the three settings stay on one line */
@media (min-width: 1200px) and (max-width: 1679px) {
  .landing-panel { padding: 44px 40px 24px; }
  .landing-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 28px; }
}
@media (min-width: 900px) {
  body { padding-left: calc(var(--side-w) + var(--dock-left, 0px)); }
  .topbar {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--side-w); z-index: 26; overflow-y: auto; overscroll-behavior: contain;
    background: var(--side-bg); color: var(--side-ink); border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, 0.06);
  }
  .topbar-inner { flex-direction: column; align-items: stretch; gap: 2px; min-height: 100%; max-width: none; margin: 0; padding: 18px 12px 14px; box-sizing: border-box; }
  .topbar .brand { order: 0; padding: 0 6px 14px; color: #fff; flex-wrap: wrap; row-gap: 6px; }
  .topbar .brand .name { color: #fff; }
  .topbar .for { color: var(--side-muted); border-color: rgba(255, 255, 255, 0.18); }
  .nav-toggle { display: none !important; }
  .topbar .topbar-link { justify-content: flex-start; padding: 0 12px 0 52px; min-height: 36px; color: var(--side-muted); font-size: 13px; text-align: left; }
  .topbar .topbar-link:hover { color: var(--side-ink); }
  .side-links { display: contents; }
  /* top to bottom: home, the plan with its steps and the way to start over, the course list, High GPA, the cart, the rest */
  .side-link[data-nav="home"] { order: 1; }
  .side-link[data-nav="plan"] { order: 2; }
  .side-steps { order: 3; }
  .topbar .topbar-link { order: 4; }
  .side-link[data-nav="browse"] { order: 5; }
  .side-link[data-nav="picks"] { order: 6; }
  .side-link[data-nav="schedule"] { order: 8; }
  .side-link[data-nav="record"] { order: 9; }
  .side-link[data-nav="buddies"] { order: 10; }
  .side-sep { order: 11; }
  .side-link[data-nav="chat"] { order: 12; }
  .topbar .topbar-btn {
    width: 100%; justify-content: flex-start; gap: 11px; padding: 0 12px; border: 0; border-radius: 10px;
    background: transparent; color: inherit; font-size: 14.5px; font-weight: 600;
  }
  .topbar .topbar-btn:hover { background: var(--side-hover); border-color: transparent; }
  .topbar .side-label, .topbar .topbar-label { display: inline; }
  .topbar .topbar-label { max-width: none; flex: 1; text-align: left; }
  #cartBtn { order: 7; }
  #cartBtn .cart-badge { margin-left: auto; }
  #cartBtn { background: var(--monet-mist); color: #fff; box-shadow: inset 3px 0 0 var(--monet-2); }
  #cartBtn:hover { background: rgba(110, 146, 200, 0.28); }
  #cartBtn[aria-expanded="true"] { background: var(--side-on); color: #fff; }
  .cart-badge[data-count="0"] { background: rgba(255, 255, 255, 0.1); color: var(--side-muted); }
  #languageSwitch { order: 20; margin: auto 0 0; padding: 12px 12px 6px; font-size: 13px; color: var(--side-muted); }
  #themeBtn { order: 21; }
  #accountBtn { order: 22; }
  .topbar-btn.signed-in svg { color: #6fd69a; }
  .buddy-dot { border-color: var(--side-bg); }
  /* the assistant opens beside the bar, on the left, and the page makes room for it there */
  body.chat-open:not(.chat-full) { --dock-w: 0px; --dock-left: var(--chat-eff); }
  .chat { left: var(--side-w); right: auto; z-index: 24; border-left: 0; border-right: 1px solid var(--line); box-shadow: 14px 0 44px rgba(14, 23, 38, 0.16); transform: translateX(-100%); }
  .chat.open { transform: none; }
  body.chat-full .chat { left: 0; z-index: 30; } /* full screen covers the bar too */
  .chat-resize { left: auto; right: -5px; }
  .chat-resize::after { left: auto; right: 4px; }
  /* no top bar above the page any more: what stuck under it sticks to the top */
  .tt-heads { top: 0; }
  .tt-page .tt-rail { top: 12px; }
  .pick-sec { scroll-margin-top: 16px; }
  .cart-toast { top: 18px; }
  .cart-drawer { top: 0; }
  body.dock-narrow .side { left: calc(var(--side-w) + var(--dock-left, 0px)) !important; }
  .plan-steps { display: none; } /* the plan's steps are in the bar */
}
/* the home page is the first thing a visitor sees: no side bar there, a plain top bar (11-04) */
@media (min-width: 900px) {
  body:is(.landing-open, .home-early > *) { padding-left: 0; }
  body:is(.landing-open, .home-early > *) .topbar {
    position: sticky; top: 0; bottom: auto; width: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); color: var(--ink);
  }
  body:is(.landing-open, .home-early > *) .topbar-inner { flex-direction: row; align-items: center; min-height: 64px; max-width: 1240px; margin: 0 auto; padding: 0 28px; gap: 6px; }
  body:is(.landing-open, .home-early > *) .side-links, body:is(.landing-open, .home-early > *) .topbar .side-label { display: none; }
  body:is(.landing-open, .home-early > *) .topbar .brand { padding: 0; margin-right: auto; color: var(--ink); flex-wrap: nowrap; }
  body:is(.landing-open, .home-early > *) .topbar .brand .name { color: var(--ink); }
  body:is(.landing-open, .home-early > *) .topbar .for { color: var(--muted); border-color: var(--line); }
  body:is(.landing-open, .home-early > *) #languageSwitch { margin: 0 6px 0 0; padding: 0; color: var(--muted); }
  body:is(.landing-open, .home-early > *) .topbar .topbar-btn { width: auto; padding: 0 12px; color: var(--ink); }
  body:is(.landing-open, .home-early > *) .topbar .topbar-btn:hover { background: rgba(var(--glass), 0.08); }
  body:is(.landing-open, .home-early > *) .topbar .topbar-label { flex: none; }
  body:is(.landing-open, .home-early > *) .chat { left: 0; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  body { transition: padding-right 0.22s ease, padding-left 0.22s ease; }
}

/* a phone or a tablet: the same links in a drawer from the menu button */
@media (max-width: 899px) {
  .nav-toggle { order: -1; }
  .side-links {
    display: flex; flex-direction: column; gap: 2px; position: fixed; top: 0; bottom: 0; left: 0; z-index: 46;
    width: min(300px, 84vw); padding: calc(16px + env(safe-area-inset-top, 0px)) 12px calc(16px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
    overflow-y: auto; background: var(--side-bg); color: var(--side-ink); box-shadow: 14px 0 44px rgba(0, 0, 0, 0.35);
    transform: translateX(-104%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  body.nav-open .side-links { transform: none; visibility: visible; transition: transform 0.22s ease; }
  body.nav-open .topbar { z-index: 47; } /* the drawer lives in the top bar: above the backdrop with it */
  .side-step { min-height: 44px; }
  .side-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(14, 23, 38, 0.45); }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .side-links, body.nav-open .side-links { transition: none; }
}

/* ---------- The four questions (plan-ui.js): school, major, year, term, one tap each ---------- */
.plan-ask .plan-q { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; margin-bottom: 14px; }
.plan-choices.schools, .plan-choices.terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.plan-choices.schools .plan-choice, .plan-choices.terms .plan-choice { justify-content: flex-start; text-align: left; }
.plan-done .plan-answers { display: grid; gap: 0; margin: 14px 0 20px; padding: 4px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.plan-answers > div { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--line); }
.plan-answers > div:first-child { border-top: 0; }
.plan-answers dt { font-size: 13px; font-weight: 650; color: var(--muted); }
.plan-answers dd { margin: 0; font-size: 15px; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.plan-answers .link-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }

/* ---------- The course list by course (app.js renderList, core/course-rows.js) ----------
   A course is one card with its other sections folded under it; the order is the student's pick, above the list. */
.group-head .nc { color: var(--muted); font-size: 13px; margin-left: -4px; }
.group-head .list-sort { margin-left: auto; min-height: 34px; box-shadow: none; }
.group-head .list-sort select { min-height: 34px; }
.c-sections {
  margin-left: 4px; min-height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2);
  color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; white-space: nowrap;
}
.c-sections:hover { border-color: var(--accent); }
.c-sections:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.c-sections[aria-expanded="true"] { background: transparent; }
.card.sub { margin-left: 24px; }
.card.sub::after {
  content: ""; position: absolute; left: -16px; top: -9px; height: 50%; width: 10px;
  border-left: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); border-bottom-left-radius: 8px;
}
@media (max-width: 760px) {
  .group-head { flex-wrap: wrap; }
  .group-head .list-sort, .group-head .list-sort select { min-height: 44px; }
  .chat-bubble .md-notes summary { min-height: 44px; }
  .c-sections { min-height: 44px; }
  .card.sub { margin-left: 14px; }
  .card.sub::after { left: -10px; width: 6px; }
}

.landing-next { margin: 14px 0 0; text-align: center; }
.landing-next .link-btn { min-height: 44px; padding: 0 12px; color: var(--muted); font-weight: 650; }
.landing-next .link-btn:hover { color: var(--ink); }

/* ---------- The home page's tour (index.html #landingTour, app.js renderLandingTour) ----------
   Under the first screen, as stellic.com shows its product: a row for each strength, the words beside a framed piece of the app on a
   soft field of the logo's colours; then the three steps, the questions and one last button. */
.tour { max-width: 1240px; margin: 0 auto; padding: 72px 24px 40px; display: grid; gap: 104px; }
.tour-row { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 64px; align-items: center; }
.tour-row.flip .tour-copy { order: 2; }
.tour-kicker { margin: 0 0 12px; font-size: 13px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ok); }
.tour-copy h2, .tour-steps h2, .tour-faq h2, .tour-end h2 { margin: 0; font-size: clamp(28px, 3.3vw, 44px); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.tour-text { margin: 16px 0 26px; max-width: 44ch; font-size: 17px; line-height: 1.6; color: var(--muted); }
.tour-go { min-height: 46px; }
.tour-stage { margin: 0; padding: clamp(18px, 3vw, 40px); border-radius: 32px; }
.tour-stage.stage-rmp { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--amber) 34%, transparent), transparent 62%), radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, var(--ok-solid) 22%, transparent), transparent 60%), var(--surface-2); }
.tour-stage.stage-tt { background: radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, #3b6fd8 26%, transparent), transparent 62%), radial-gradient(90% 90% at 0% 100%, color-mix(in srgb, var(--amber) 26%, transparent), transparent 60%), var(--surface-2); }
.tour-stage.stage-ask { background: radial-gradient(110% 90% at 0% 100%, color-mix(in srgb, var(--ok-solid) 24%, transparent), transparent 62%), radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, #3b6fd8 20%, transparent), transparent 60%), var(--surface-2); }
.tour-shot { overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 30px 70px -30px rgba(16, 24, 40, 0.35), var(--shadow); }
.shot-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; font-weight: 650; color: var(--muted); }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.shot-bar span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the best-rated professors the student can take, as the course list shows them */
.shot-cards { list-style: none; margin: 0; padding: 14px; display: grid; gap: 10px; }
.shot-card { display: grid; gap: 6px; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--card-edge); background: var(--surface); box-shadow: var(--shadow); }
.shot-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.shot-head .code { flex: none; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; font-weight: 650; }
.shot-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.shot-head .art-tag { margin-left: auto; }
.shot-time { font-size: 13px; font-weight: 600; color: var(--ink); }
.shot-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.shot-star { font-weight: 750; color: var(--ink); }
.shot-star::before { content: "★ "; color: var(--amber); }
.shot-ghost { height: 86px; border-radius: 12px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--line) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.shot-empty { padding: 18px; color: var(--muted); font-size: 14px; }

/* the one-click timetable, a picture */
.shot-tt { padding: 14px 16px 18px; }
.shot-tt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.shot-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 650; }
.shot-seg > * { padding: 4px 12px; border-radius: 999px; color: var(--muted); }
.shot-seg b { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.shot-build { padding: 7px 14px; border-radius: 999px; background: var(--amber); color: #1d1606; font-size: 12.5px; font-weight: 750; }
.shot-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.shot-day { display: grid; gap: 6px; font-size: 12px; font-weight: 650; color: var(--muted); text-align: center; }
.shot-col { position: relative; height: 230px; border-radius: 10px; background: repeating-linear-gradient(to bottom, var(--surface-2) 0 45px, var(--surface) 45px 46px); border: 1px solid var(--line); }
.shot-col .art-block { font-size: 11px; padding: 4px 5px; text-align: left; }

/* the assistant's answer: a table and a line */
.shot-chat { display: grid; gap: 12px; padding: 16px; }
.shot-ask { justify-self: end; max-width: 80%; margin: 0; padding: 9px 13px; border-radius: 16px 16px 5px 16px; background: var(--board); color: var(--board-ink); border: 1px solid var(--line); font-size: 14px; }
.shot-answer { justify-self: stretch; padding: 12px 14px; border-radius: 16px 16px 16px 5px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); font-size: 14px; }
.shot-answer table { width: 100%; border-collapse: collapse; font-size: 13px; }
.shot-answer :is(th, td) { padding: 6px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.shot-answer th { font-size: 11.5px; font-weight: 650; color: var(--muted); }
.shot-answer td:first-child { font-family: var(--mono); font-size: 12px; font-weight: 650; white-space: nowrap; }
.shot-answer tbody tr:last-child td { border-bottom: 0; }
.shot-answer p { margin: 10px 0 0; }
.shot-line { display: block; height: 12px; border-radius: 6px; background: var(--surface-2); }

/* the three steps */
.tour-steps { text-align: center; }
.tour-steps ol { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left; }
.tour-steps li { display: grid; gap: 8px; align-content: start; padding: 26px; border-radius: 20px; border: 1px solid var(--card-edge); background: var(--surface); box-shadow: var(--shadow); }
.tour-steps li b { font-size: 18px; color: var(--ink); }
.tour-steps li > span:last-child { font-size: 15px; line-height: 1.55; color: var(--muted); }
.tour-n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--amber) 30%, var(--surface)); color: var(--ink); font-weight: 800; }

/* the questions */
.tour-faq { max-width: 820px; width: 100%; margin: 0 auto; }
.tour-faq h2 { margin-bottom: 22px; text-align: center; }
.tour-faq details { border-bottom: 1px solid var(--line); }
.tour-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 6px 2px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 650; color: var(--ink); }
.tour-faq summary::-webkit-details-marker { display: none; }
.tour-faq summary::after { content: "+"; flex: none; font-size: 22px; font-weight: 500; color: var(--muted); }
.tour-faq details[open] summary::after { content: "–"; }
.tour-faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tour-faq details p { margin: 0 0 18px; max-width: 70ch; font-size: 15.5px; line-height: 1.6; color: var(--muted); }

/* one last button */
.tour-end { display: grid; justify-items: center; gap: 22px; padding: clamp(40px, 6vw, 72px) 24px; border-radius: 32px; background: var(--ink); text-align: center; }
.tour-end h2 { color: var(--surface); }

@media (max-width: 900px) {
  .tour { padding-top: 48px; gap: 72px; }
  .tour-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tour-row.flip .tour-copy { order: 0; }
  .tour-steps ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .tour { padding: 40px 16px 24px; gap: 60px; }
  .tour-stage { border-radius: 22px; padding: 14px; }
  .shot-col { height: 180px; }
  .tour-end { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .shot-ghost { animation: none; } }

/* ---------- The chat as a small window (2026-11-04: 「对话框右下角浮动小窗」) ----------
   From 768px the chat is a card in the bottom-right corner: it never takes half the page or room from it, it stays open beside the
   cart drawer and the timetable, and its full-screen button still fills the window. A phone keeps the whole screen. */
@media (min-width: 768px) {
  body.chat-open:not(.chat-full) { --dock-left: 0px; }
  body.chat-open:not(.chat-full):not(.cart-open) { --dock-w: 0px; }
  .chat {
    top: auto; left: auto; right: 18px; bottom: 18px; width: min(400px, calc(100vw - 36px)); height: min(640px, calc(100vh - 96px)); /* the top bar stays free */
    border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(14, 23, 38, 0.28);
    transform: translateY(14px) scale(0.97); opacity: 0; transform-origin: 100% 100%;
    transition: transform 0.22s cubic-bezier(.2,.8,.2,1), opacity 0.18s ease, visibility 0s linear 0.22s;
  }
  .chat.open { transform: none; opacity: 1; transition: transform 0.22s cubic-bezier(.2,.8,.2,1), opacity 0.18s ease; }
  body.cart-open .chat { right: calc(var(--cart-w) + 18px); }
  .chat-resize { display: none; }
  body.chat-full .chat { inset: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; border: 0; border-radius: 0; }
}
@media (min-width: 900px) {
  .chat { left: auto; right: 18px; border-right: 1px solid var(--line); box-shadow: 0 24px 60px rgba(14, 23, 38, 0.28); }
  body.cart-open .chat { right: calc(var(--cart-w) + 18px); }
  body.chat-full .chat { left: 0; right: 0; }
  body:is(.landing-open, .home-early > *) .chat { left: auto; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) { .chat, .chat.open { transition: none; } }

/* ---------- Browsing as stellic.com shows courses, and simpler (2026-11-04: 「每一行多个课」「点击课程出来介绍分数」) ----------
   The course list takes the page's width with several cards a row; a course opens in a panel that slides in from the right over the
   list (a sheet on a phone), its glance tiles first. The old column beside the list (the cart's summary) is gone: the cart lives in
   the top bar and in My timetable. */
.layout { grid-template-columns: minmax(0, 1fr); max-width: 1400px; }
body:not(.detail-open) .side { display: none !important; }
.side {
  position: fixed; z-index: 26; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); max-height: none; overflow: auto; border-radius: 0;
  background: var(--bg); box-shadow: -18px 0 44px rgba(14, 23, 38, 0.16); overscroll-behavior: contain;
}
@media (prefers-reduced-motion: no-preference) { body.detail-open .side { animation: side-in 0.28s cubic-bezier(.2,.8,.2,1); } @keyframes side-in { from { transform: translateX(40px); opacity: 0; } } }
body.detail-open .side .panel { border-radius: 0; min-height: 100%; }
@media (max-width: 900px) {
  body.detail-open .side { top: auto; left: 0; width: 100vw; max-height: 88vh; border-radius: 20px 20px 0 0; }
  body.detail-open .side .panel { border-radius: 20px 20px 0 0; min-height: 0; }
  .footer { padding-bottom: 40px; }
}
body.cart-open .side { right: var(--cart-w); }
/* several cards a row: each card lays itself out by its own width */
.cards:not(.skeleton) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.cards > .card { container-type: inline-size; align-content: start; }
@container (max-width: 580px) {
  .c-time { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .c-time .dial { display: none; }
  .c-time .when-text { font-size: 12.5px; }
}
.list-ticks { display: none; }
.c-head { flex-wrap: wrap; row-gap: 2px; }
.c-head .title { flex-basis: 100%; -webkit-line-clamp: 2; line-clamp: 2; }
/* the panel's first look: three tiles, then the term's sections */
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 4px 0 14px; }
.glance-tile { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.glance-tile b { font-size: 19px; font-weight: 750; }
.glance-tile span { font-size: 12px; color: var(--muted); }
.glance-h { margin: 6px 0 6px; }
.glance-secs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.glance-sec { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 0; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.glance-sec.on { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(245, 181, 68, 0.25); }
.glance-open { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 6px 10px; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.glance-open .code { grid-row: span 2; }
.glance-when { font-size: 13px; font-weight: 600; } .glance-prof { font-size: 12.5px; color: var(--muted); }
.glance-sec .cart-add.cart-quick { position: static; flex: none; }

/* ---------- My timetable: the cart and the week in one page, edited in place (schedule-ui.js, 2026-11-04) ---------- */
.tt-mine-box { display: grid; gap: 8px; margin-bottom: 12px; }
.tt-mine-box h3 { margin: 0; font-size: 15px; }
.tt-mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tt-mine { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 7px 4px 7px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13px; }
.tt-mine i { align-self: stretch; border-radius: 12px 0 0 12px; background: hsl(var(--h) 60% 45%); }
.tt-mine b { font-weight: 750; }
.tt-mine small { display: block; color: var(--muted); font-size: 12px; }
.tt-mine .icon-btn.small { width: 32px; height: 32px; font-size: 14px; }
.tt-add { position: relative; }
.tt-add input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; box-sizing: border-box; }
.tt-add-list:empty { display: none; }
.tt-add-list { position: absolute; z-index: 6; left: 0; right: 0; top: 44px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); max-height: 320px; overflow: auto; }
.tt-add-list ul, .tt-slot ul, .tt-alts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tt-add-list button, .tt-slot button[data-tt="add"], .tt-alts button { display: flex; justify-content: space-between; gap: 10px; width: 100%; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.tt-add-list button:hover:not(:disabled), .tt-slot button[data-tt="add"]:hover, .tt-alts button:hover { background: color-mix(in srgb, var(--amber) 18%, var(--surface)); }
.tt-add-list button:disabled { opacity: 0.55; cursor: default; }
/* a block: an x shows on hover (always on a touch screen), the block lifts, and it can be dragged */
.tt-block { touch-action: none; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.tt-block .tt-x { position: absolute; z-index: 2; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(15, 19, 26, 0.78); color: #fff; font-size: 12px; line-height: 1; opacity: 0; transition: opacity 0.15s ease; cursor: pointer; }
.tt-block:hover .tt-x, .tt-block:focus-visible .tt-x { opacity: 1; }
@media (pointer: coarse) { .tt-block .tt-x { opacity: 1; width: 24px; height: 24px; } }
@media (hover: hover) { .tt-block[data-tt="block"]:hover { box-shadow: 0 8px 18px rgba(14, 23, 38, 0.18); transform: translateY(-1px); z-index: 3; } }
.tt-block.dragging { z-index: 8; opacity: 0.92; box-shadow: 0 18px 34px rgba(14, 23, 38, 0.3); cursor: grabbing; transition: none; }
/* the tapped course's other sections, dashed in their columns */
.tt-ghost { position: absolute; z-index: 1; left: 2px; right: 2px; display: grid; align-content: start; gap: 1px; padding: 4px 6px; border: 1.5px dashed hsl(215 60% 50%); border-radius: 8px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink); font: inherit; font-size: 11px; text-align: left; cursor: pointer; overflow: hidden; }
.tt-ghost b { font-size: 11.5px; }
.tt-ghost:hover, .tt-ghost.hot { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 22%, var(--surface)); }
.tt-edit-h { margin: 10px 0 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.tt-edit-actions { display: flex; gap: 8px; margin-top: 10px; }
.tt-edit-actions .secondary { flex: 1; min-height: 40px; }
.tt-edit-actions .danger { color: var(--no); }
/* a pressed empty slot */
.tt-slot { position: fixed; z-index: 40; width: min(330px, calc(100vw - 24px)); padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 44px rgba(14, 23, 38, 0.2); }
.tt-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tt-slot p { margin: 2px 0 8px; }
.tt-col { cursor: cell; }
/* what was done, with Undo */
.tt-toast { position: fixed; z-index: 45; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 12px; background: #0f131a; color: #fff; font-weight: 650; opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity 0.2s ease, transform 0.2s ease; }
.tt-toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.tt-toast button { border: 0; background: none; color: var(--amber); font: inherit; font-weight: 800; cursor: pointer; min-height: 32px; }
@media (prefers-reduced-motion: no-preference) { .tt-slot, .tt-detail { animation: tt-pop 0.18s ease-out; } @keyframes tt-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } } }
@media (min-width: 768px) {
  .tt-page .tt-detail { position: fixed; z-index: 30; width: 330px; max-height: min(72vh, 600px); overflow: auto; margin: 0; box-shadow: 0 18px 44px rgba(14, 23, 38, 0.22); }
}

/* The first screen's words in the middle of the window, room above them (2026-11-04: 「留出空间 字居中在整个屏幕里面」): the hero is one
   window tall under the top bar and centres its words; the demo starts on the next screen. */
.landing { padding-top: 0; }
.landing-hero { min-height: calc(100svh - 64px); align-content: center; padding: 32px 0 48px; box-sizing: border-box; }
.landing-stage { margin-top: 0; }
@media (max-width: 640px) { .landing-hero { min-height: calc(72svh - 60px); padding: 24px 0 20px; } } /* a phone's first screen shows the top of the demo under the buttons, so it reads as more below */

/* the course list in the rail scrolls on its own in a short window, so Save and Export stay on the first screen */
.tt-mine-list { max-height: max(140px, calc(100vh - 430px)); overflow: auto; overscroll-behavior: contain; }

/* a shared plan is read in its cart panel */
body.sharing:not(.detail-open) .side { display: block !important; }
.tt-tools { display: grid; gap: 8px; margin: 10px 0; }
.tt-more-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tt-more-actions .albert-row { margin: 0; }
/* a finger's targets on the timetable page */
@media (pointer: coarse), (max-width: 767px) {
  .tt-add input { height: 44px; }
  .tt-mine .icon-btn.small { width: 44px; height: 44px; }
  .tt-alts button, .tt-add-list button, .tt-slot button[data-tt="add"] { min-height: 44px; }
  .tt-toast button { min-width: 44px; min-height: 44px; }
}
/* the rail's order on a laptop: the courses, Save and Export, then the options, then the cart's tools */
.tt-rail .tt-mine-box { order: -3; }
.tt-rail .tt-actions, .tt-rail .tt-saved { order: -2; }
.tt-rail .tt-tools { order: 30; }
@media (pointer: coarse), (max-width: 767px) { .tt-tools .record-link { display: inline-flex; align-items: center; min-height: 44px; } }

/* Chinese type on the first screen (2026-11-04: 「注意大小字体间距」): Han characters need air, not the tight tracking of a Latin
   headline; two short lines without end punctuation sit centred; one step between title, line, button and link. */
:lang(zh) .landing .landing-hero h1 { font-size: clamp(36px, 4.6vw, 62px); line-height: 1.24; letter-spacing: 0.02em; font-weight: 800; margin-bottom: 20px; }
:lang(zh) .landing-what { font-size: clamp(15px, 1.25vw, 18px); letter-spacing: 0.03em; line-height: 1.7; margin-bottom: 32px; }
:lang(zh) .landing .landing-go > span:first-child { letter-spacing: 0.12em; }
:lang(zh) .landing .landing-more { margin-top: 20px; letter-spacing: 0.02em; }
@media (min-width: 901px) and (max-height: 720px) {
  :lang(zh) .landing .landing-hero h1 { font-size: min(4.6vw, 50px); margin-bottom: 16px; }
  :lang(zh) .landing-what { margin-bottom: 26px; }
}
:lang(zh) .landing-what { word-break: keep-all; } /* lines break at the commas, never inside a word such as 每门课 */
.plan-choice .plan-en { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; opacity: 0.6; }

.course-ask { padding: 16px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; }
.course-ask label { display: block; font-weight: 600; margin-bottom: 8px; }
.course-ask-row { display: flex; gap: 8px; }
.course-ask-row input { flex: 1; min-width: 0; min-height: 44px; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }
.course-ask-row button { min-width: 44px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; }
#courseAskExamples button, #studentContext { min-height: 44px; min-width: 44px; text-align: left; }
.filter-chip { min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; }
#courseAskExamples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#courseAskAnswer:empty { display: none; }
#courseAskAnswer { margin-top: 12px; }
.course-reason { font-size: 12px; color: var(--muted); margin: 6px 0; }
.campus-choice { padding: 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; }
.credit-counter { padding: 8px 0; }
.credit-counter small { display: block; color: var(--muted); }
.clock-toggle { font-size: 11px; min-height: 44px; min-width: 44px; }
.campus-choice button { min-height: 44px; min-width: 44px; }
.tt-clock-grid > p { margin: 0; font-size: 11px; line-height: 16px; }
@media (min-width: 901px) {
  .tt-page .tt-clock-grid .tt-grid { --row: clamp(12px, calc((100dvh - 250px) / var(--rows)), 38px); }
}

/* Audit B3: quiet surfaces and a consistent spacing scale. */
.landing { font-size: 17px; }
.landing .landing-panel, .landing .tour { max-width: 1100px; margin-inline: auto; padding-inline: 40px; }
.landing-panel { padding-top: 0; }
.landing .landing-hero { min-height: calc(100svh - 64px); max-width: 100%; padding: 48px 0; display: grid; align-content: center; justify-items: center; gap: 24px; }
.landing .landing-hero h1, .landing .landing-hero h1:lang(en), :lang(zh) .landing .landing-hero h1 { max-width: 940px; margin: 0; font-size: clamp(56px, 5vw, 72px); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; color: var(--ink); }
:lang(zh) .landing .landing-hero h1 { letter-spacing: 0; line-height: 1.35; } /* the gap between its two lines 30% wider (owner, 11-05) */
.landing .landing-what, :lang(zh) .landing .landing-what { margin: 0; font-size: 18px; line-height: 1.6; }
.landing .landing-actions { margin: 0; gap: 16px; }
.landing .landing-stage { margin: 0 auto 104px; } /* centred: on a short window its max-width shrinks it */
.landing .tour { display: grid; gap: 104px; }
.landing .tour-text, .landing .tour-steps p, .landing .tour-faq p { font-size: 17px; }
.landing-worksheet { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin: 104px 0; text-align: center; }
.landing-worksheet p { flex-basis: 100%; font-size: 18px; }
#recordPickMajor, #worksheetMajor { min-width: 44px; min-height: 44px; }
.landing .landing-stats { margin-block: 104px; }
.flow-progress { display: flex; justify-content: center; gap: 24px; max-width: 1100px; padding: 8px 24px; margin: 0 auto 16px; font-size: 13px; color: var(--muted); }
.flow-progress[hidden] { display: none; }
.flow-progress span { flex: 1; max-width: 220px; padding-block: 8px; border-top: 2px solid var(--line); }
.flow-progress .reached { border-color: var(--accent); }
.flow-progress [aria-current] { color: var(--ink); font-weight: 700; }
.tt-page { gap: 24px; }
.tt-page .tt-rail { gap: 24px; }
.tt-page .tt-mine-box, .tt-options { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); min-width: 0; }
.tt-options { order: 8; }
.tt-options > summary { display: flex; align-items: center; cursor: pointer; font-weight: 650; min-height: 44px; }
.tt-options > summary::before { content: "▸"; margin-right: 8px; }
.tt-options[open] > summary::before { content: "▾"; }
.tt-options > :not(summary) { margin-top: 16px; }
.tt-options .tt-export-menu { gap: 8px; }
.tt-page .tt-rail .tt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-build { order: -2; min-height: 44px; }
.tt-page .tt-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; padding: 0; border: 0; background: transparent; }
.tt-stats > div { display: block; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.tt-stats dt { color: var(--muted); font-size: 12px; }
.tt-stats dd { color: var(--ink); font-size: 17px; font-weight: 700; margin: 4px 0 0; }
.tt-stats small { display: none; }
.tt-table-scroll { overflow-x: auto; }
.tt-key-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tt-key-table th { color: var(--muted); font-weight: 500; }
.tt-key-table th, .tt-key-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.tt-key-table p { margin: 0 0 4px; }
.tt-key-table .tt-key-name { font-size: 13px; }
.tt-block .tt-code { display: none; }
.tt-block .tt-name { font-size: 12px; line-height: 1.25; }
.cart-items { gap: 24px; }
.cart-item { padding: 16px; }
.reviews-content { max-width: 1100px; margin: auto; padding: 40px; font-size: 17px; }
.reviews-head { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 64px; }
.reviews-content h1 { font-size: clamp(36px, 5vw, 56px); }
.student-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block: 32px; }
.student-review { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow-wrap: anywhere; }
.student-review p { margin: 0 0 16px; white-space: pre-wrap; }
.review-stars { color: var(--accent); letter-spacing: 3px; }
.review-verified { color: var(--muted); }
.review-strip { margin-block: 104px; }
.review-compose { max-width: 600px; margin-top: 64px; }
#reviewForm { display: grid; gap: 24px; }
#reviewForm[hidden] { display: none; }
#reviewForm label { display: grid; gap: 8px; }
#reviewForm :is(input, textarea, select) { width: 100%; box-sizing: border-box; padding: 12px; font: inherit; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); }
.review-prompt { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 80; width: min(440px, calc(100% - 64px)); padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 32px #0002; }
.review-prompt p { margin: 0 0 16px; }
.review-prompt a { margin-right: 24px; }
@media (prefers-color-scheme: dark) {
}
@media (max-width: 900px) {
  .tt-page .tt-rail { display: grid; position: static; }
  .tt-page .tt-option { display: block; }
  .tt-page .tt-options { order: 8; }
  .tt-stats > div { padding: 8px; }
  .tt-stats dd { font-size: 15px; }
}
@media (max-width: 640px) {
  .landing .landing-panel, .landing .tour { padding-inline: 24px; }
  .landing .landing-hero h1, .landing .landing-hero h1:lang(en), :lang(zh) .landing .landing-hero h1 { font-size: 40px; }
  .landing .landing-hero { min-height: calc(100svh - 64px); padding-block: 40px; }
  .landing .landing-what, :lang(zh) .landing .landing-what { font-size: 17px; }
  .landing .landing-actions { width: 100%; }
  .flow-progress { gap: 8px; padding-inline: 16px; font-size: 12px; }
  .tt-page .tt-scroll { display: none; }
  .tt-page .tt-agenda { display: block; margin-top: 24px; }
  .tt-agenda ol li { padding: 16px; overflow-wrap: anywhere; }
  .tt-page .tt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-key-table { font-size: 12px; table-layout: fixed; }
  .tt-key-table th, .tt-key-table td { padding: 8px 4px; }
  .tt-key-table .sw-row { flex-wrap: wrap; }
  .reviews-content { padding: 24px; }
  .student-reviews { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  /* only when the page or the drawer opens: data arriving later redraws them, and a replay on every redraw reads as flicker (11-05) */
  .arriving .cart-item, .arriving .tt-mine { animation: cart-arrive 180ms ease-out both; }
  .arriving .tt-block { animation: calendar-arrive 200ms ease-out; }
  li.card { animation: filter-arrive 180ms ease-out both; }
  @keyframes cart-arrive { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
  @keyframes calendar-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes filter-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

body.reviews-page { padding-left: 0; }

.tt-mine-list { gap: 24px; max-height: max(208px, calc(100vh - 392px)); }
.tt-mine { padding: 16px; }

@media (min-width: 901px) {
  .tt-mine-list { max-height: max(104px, calc(100dvh - 490px)); }
  .tt-grid { --row: clamp(6px, calc((100dvh - 360px) / var(--rows)), 38px); }
}

.tt-ag-open { display: grid; gap: 4px; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: #17212b; text-align: left; font: inherit; cursor: pointer; }
@media (max-width: 640px) {
  .tt-page .tt-detail { position: fixed; inset: auto 16px 16px; z-index: 60; max-height: calc(100dvh - 120px); overflow: auto; box-shadow: var(--shadow); }
}

/* Laptop windows: the stat chips, the steps and the campus label give the week its height back */
@media (min-width: 901px) {
  .tt-page .tt-stats { margin: 0 0 8px; }
  .tt-stats > div { display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; }
  .tt-stats dd { margin: 0; font-size: 15px; }
  body:has(dialog.schedule[open]) .flow-progress { display: none; }
  .tt-clock-grid { position: relative; }
  .tt-clock-grid > p { position: absolute; z-index: 2; top: 8px; left: 6px; margin: 0; font-size: 11px; }
}

/* Export sits at the foot of the Options panel: its menu opens upward so every item stays on screen */
@media (min-width: 901px) {
  .tt-options .tt-export-menu { top: auto; bottom: 100%; margin: 0 0 4px; }
}

/* The AI box in the course list is one line, so five cards still show at 1440x900 */
.course-ask { padding: 0; margin-bottom: 12px; border: 0; }
.course-ask label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.course-ask-row input, .course-ask-row button { min-height: 40px; padding-block: 8px; }
#courseAskExamples { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; }
@media (max-width: 640px) {
  .landing .landing-panel, .landing .tour { padding-inline: 16px; }
  .landing .landing-actions { flex-direction: column; align-items: stretch; }
  .landing .landing-actions > * { width: 100%; justify-content: center; }
}

/* My timetable, 11-05: the courses as a list the whole page scrolls with, one line each, their actions in view */
.tt-mine-list { max-height: none; overflow: visible; gap: 4px; }
.tt-mine { grid-template-columns: 5px minmax(0, 1fr) auto; gap: 8px; padding: 6px 6px 6px 0; border-radius: 10px; transition: box-shadow 150ms, opacity 150ms; }
.tt-mine.on { box-shadow: 0 0 0 2px var(--focus); }
.tt-mine-main { min-width: 0; }
.tt-mine-line { display: flex; align-items: baseline; gap: 6px; margin: 0; min-width: 0; white-space: nowrap; }
.tt-mine-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.tt-mine-credits { margin-left: auto; padding-left: 6px; color: var(--muted); font-size: 12px; }
.tt-mine .tt-mine-label { display: inline; margin-right: 6px; }
.tt-mine .tt-section-time { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tt-req { font-size: 11px; }
.tt-mine-actions { display: flex; align-items: center; gap: 2px; }
.tt-mine-swap { font-size: 12.5px; font-weight: 600; padding: 4px 6px; white-space: nowrap; }
/* the credits as a bar: 12 the full-time floor, the student's target, 18 the usual limit */
.credit-counter b { font-size: 15px; }
.tt-credit-bar { position: relative; height: 8px; margin: 8px 0 18px; border-radius: 999px; background: var(--line); }
.tt-credit-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ok-solid, #2f9e6b); transition: width 200ms; }
.credit-counter.over .tt-credit-fill { background: #e0a100; }
.tt-credit-mark { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: var(--ink); opacity: 0.45; }
.tt-credit-bar .tt-credit-mark::before { position: absolute; top: 16px; left: 50%; translate: -50% 0; font-size: 10.5px; line-height: 1; white-space: nowrap; color: var(--muted); content: attr(data-n); }
.credit-counter small.tt-credit-warn { padding: 6px 8px; border-radius: 8px; background: #fff4d6; color: #6b4e00; }
/* the week's facts as one quiet line; a warning line only when something needs a look */
.tt-page .tt-stats { display: none; }
.tt-sumline { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.tt-issues { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tt-issues button { padding: 4px 10px; border: 0; border-radius: 8px; background: #fff4d6; color: #6b4e00; font: inherit; font-size: 13px; cursor: pointer; }
:where(:root[data-theme="dark"]) .tt-issues button, :where(:root[data-theme="dark"]) .credit-counter small.tt-credit-warn { background: #3d3317; color: #f3d98b; }
/* the rail and the week point at each other */
.tt-page.hl .tt-block:not(.hl) { opacity: 0.3; }
.tt-block.hl { z-index: 2; box-shadow: 0 0 0 2px hsl(var(--h) 60% 42%); }
.tt-block.minor { background: hsl(var(--h) 70% 96%); border-left-style: dashed; }
.tt-block .tt-name { -webkit-line-clamp: 1; }
.tt-block .tt-code { font-weight: 500; }
@keyframes tt-flash { 0%, 100% { box-shadow: none; } 30%, 70% { box-shadow: 0 0 0 3px #e0a100; } }
.tt-block.flash { animation: tt-flash 1.2s ease 2; }
@media (prefers-reduced-motion: reduce) { .tt-block.flash { animation: none; box-shadow: 0 0 0 3px #e0a100; } }
/* a short block keeps the course's short name and lets the time go: the ruler says the time */
@container (max-height: 60px) { .tt-block .tt-code { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tt-block .tt-time { display: none; } }
.tt-mine .tt-mine-label { display: block; }

/* 高GPA, 11-05: one line on top, the rules folded away, each card as the course list's: code and credits, the name, each teacher
   with the exam share in plain words */
.picks-oneline { font-size: 15px; }
.picks-how summary { cursor: pointer; font-size: 13px; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.picks-how[open] { display: grid; gap: 6px; }
.pick-card { gap: 6px; }
.pick-card-top .pick-code { font-size: 12.5px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; }
.pick-card .pick-profs { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pick-card .pick-prof { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; }
.pick-card .pick-exam { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ok-solid, #2f9e6b) 14%, transparent); color: var(--ok-ink, #1d6b47); font-size: 12.5px; font-weight: 600; }
p.pick-card-meta { margin: 0; display: block; }

/* the Ask Takeable button can be dragged (launcher-drag.js); while it moves it follows the pointer exactly */
.chat-launcher { touch-action: none; }
.chat-launcher.dragging { transition: none; cursor: grabbing; box-shadow: 0 2px 4px rgba(14, 23, 38, 0.25), 0 16px 36px rgba(14, 23, 38, 0.36); }
/* on My timetable the chat stands as a column on the right and the page makes room for it: nothing of the week is covered */
@media (min-width: 900px) {
  body.schedule-open { --tt-chat-w: clamp(340px, 28vw, 400px); }
  body.schedule-open:not(.chat-full) .chat { top: 12px; bottom: 12px; right: 12px; height: auto; width: var(--tt-chat-w); }
  body.schedule-open.chat-open:not(.chat-full) dialog.schedule { padding-right: calc(var(--tt-chat-w) + 24px); box-sizing: border-box; }
  body.schedule-open.chat-open:not(.chat-full) .chat-launcher { visibility: hidden; }
}

/* ---------- Monet's blues, site-wide (owner, 11-05: 「莫奈的油画颜色 蓝色印象派 全站都可以微调」) ----------
   Only the tokens move: the page a water-lily mist, the lines and fills a little bluer, the side bar a night blue, the focus ring
   cornflower. Dark mode moves to deep blues and lifts the grey text so it reads (「深色模式字我看不清」). */
:root { --bg: #eef2f8; --surface-2: #f2f5fa; --line: #dde4ee; --board-2: #f3f6fb; --card-edge: #d9e1ec; --focus: #4a6fb0; --side-bg: #1b2740; --side-hover: rgba(169, 196, 226, 0.1); --side-on: rgba(169, 196, 226, 0.2); --side-muted: #b6c3d8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0e1422; --surface: #172036; --surface-2: #1c2742; --line: #2b3754; --ink: #eef1f7; --muted: #b3bccb; --board: #0e1525; --board-2: #162039; --board-muted: #a9b5ca; --board-text: #e1e7f1; --focus: #8fb0e8; --side-bg: #121b2e; }
}
:root[data-theme="dark"] { --bg: #0e1422; --surface: #172036; --surface-2: #1c2742; --line: #2b3754; --ink: #eef1f7; --muted: #b3bccb; --board: #0e1525; --board-2: #162039; --board-muted: #a9b5ca; --board-text: #e1e7f1; --focus: #8fb0e8; --side-bg: #121b2e; }
.chat-launcher { background: linear-gradient(135deg, var(--monet-1), var(--monet-2) 60%, var(--monet-3)); color: #fff; }
.chat-launcher.unread::after { border-color: var(--monet-2); }
/* dark mode: the exam share and a recitation's lighter block keep their words readable */
:where(:root[data-theme="dark"]) .pick-card .pick-exam { background: var(--ok-bg); color: var(--ok); }
:where(:root[data-theme="dark"]) .tt-block.minor { background: hsl(var(--h) 30% 19%); }
:where(:root[data-theme="dark"]) .tt-issues button, :where(:root[data-theme="dark"]) .credit-counter small.tt-credit-warn { background: #3d3317; color: #f3d98b; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .pick-card .pick-exam { background: var(--ok-bg); color: var(--ok); }
  :where(:root:not([data-theme="light"])) .tt-block.minor { background: hsl(var(--h) 30% 19%); }
  :where(:root:not([data-theme="light"])) .tt-issues button, :where(:root:not([data-theme="light"])) .credit-counter small.tt-credit-warn { background: #3d3317; color: #f3d98b; }
}
/* the week's words stay horizontal however narrow it gets (owner, 11-05: 「依旧要横着不要竖着显示 大不了把周六日吞了 或者缩小字体」):
   a very narrow block shows its code on one line and lets the rest go */
@container (max-width: 44px) {
  .tt-block .tt-text { writing-mode: horizontal-tb; }
  .tt-block .tt-name { font-size: 10px; -webkit-line-clamp: 1; overflow: hidden; white-space: nowrap; text-overflow: clip; }
}
@container (max-width: 90px) { .tt-block .tt-name { -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; } }
/* with the chat open beside My timetable, empty weekends give their room to the week, and the words get a size smaller */
@media (min-width: 900px) {
  body.schedule-open.chat-open:not(.chat-full) .tt-dayhead.weekend.off, body.schedule-open.chat-open:not(.chat-full) .tt-col.weekend.off { display: none; }
  body.schedule-open.chat-open:not(.chat-full) .tt-block .tt-name { font-size: 12px; }
  body.schedule-open.chat-open:not(.chat-full) .tt-block .tt-code, body.schedule-open.chat-open:not(.chat-full) .tt-block .tt-time { font-size: 11px; }
}
.chat-title h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* My timetable with the chat open on a laptop: every empty day folds, the course list keeps its codes, names and buttons */
@media (min-width: 900px) and (max-width: 1399px) {
  body.schedule-open.chat-open:not(.chat-full) .tt-dayhead.off, body.schedule-open.chat-open:not(.chat-full) .tt-col.off { display: none; }
  body.schedule-open.chat-open:not(.chat-full) .tt-page { grid-template-columns: 200px minmax(0, 1fr); }
  body.schedule-open.chat-open:not(.chat-full) .tt-mine .tt-section-time, body.schedule-open.chat-open:not(.chat-full) .tt-mine .clock-toggle { display: none; }
  body.schedule-open.chat-open:not(.chat-full) .tt-mine-swap { padding-inline: 2px; }
}
/* the home page never opens the side bar (owner, 11-05: 「首页不能点开左侧边」): no menu button there at any width */
body:is(.landing-open, .home-early > *) .nav-toggle { display: none !important; }
body:is(.landing-open, .home-early > *) .side-backdrop { display: none !important; }

/* My timetable, 11-05 (tt2): the rail is only the courses (in the timetable, then the backups), the credit bar and the add box,
   wider so a row shows the code and a few words of the title; the plans, another arrangement, save and export stand by the title;
   another arrangement is a preview until "Use this"; on a phone the course list is a sheet at the foot of the screen */
.tt-head { align-items: center; gap: 6px 12px; }
.tt-head .tt-bar { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.tt-bar > * { order: 0; margin: 0; }
.tt-bar .tt-plans { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.tt-bar .tt-plan { min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 650; white-space: nowrap; }
.tt-bar .tt-plan:hover { background: var(--surface-2); }
.tt-bar .tt-plan.on { background: var(--ink); color: var(--bg); }
.tt-bar .tt-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.tt-bar .tt-actions > button, .tt-bar .tt-export summary, .tt-bar .tt-build { width: auto; min-height: 36px; padding: 0 12px; border-width: 1px; border-radius: 10px; font-size: 13.5px; line-height: 1.2; white-space: nowrap; }
.tt-bar .tt-build.on { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--surface)); }
.tt-bar .tt-export { position: relative; }
.tt-bar .tt-export-menu { position: absolute; z-index: 20; top: 100%; right: 0; bottom: auto; width: 210px; margin: 4px 0 0; padding: 6px; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.tt-bar .tt-export-menu button { width: 100%; min-height: 36px; padding: 6px 10px; font-size: 13.5px; font-weight: 600; text-align: left; border: none; border-radius: 8px; }
.tt-clock-note { margin: 12px 0 0; }
/* the options fold under the week, at its width */
.tt-option > .tt-options { margin-top: 16px; }

/* the rail: courses in the timetable, backups under them */
.tt-page .tt-mine-box { padding: 12px; }
.tt-mine-box > h3 { font-size: 14px; }
.tt-mine { grid-template-columns: 4px minmax(0, 1fr); column-gap: 8px; align-items: stretch; padding: 4px 2px 6px 0; }
.tt-mine > i { align-self: stretch; }
.tt-mine-top, .tt-mine-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tt-mine-top { min-height: 28px; }
.tt-mine .tt-mine-line { flex: 1; min-width: 0; font-size: 13px; }
.tt-mine .tt-mine-x { flex: 0 0 auto; }
.tt-mine-info { display: flex; flex: 1; min-width: 0; color: var(--muted); font-size: 12px; white-space: nowrap; }
.tt-mine .tt-mine-label { display: inline; flex: 0 0 auto; margin: 0; }
.tt-mine .tt-mine-label:not(:empty) + .tt-section-time::before { content: "\00a0·\00a0"; }
.tt-mine-info .tt-section-time { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tt-mine-secs .clock-toggle { font-size: 12px; }
.tt-mine .tt-mine-actions { flex: 0 0 auto; margin-left: auto; gap: 0; }
.tt-mine-secs { min-width: 0; }
.tt-mine .icon-btn.small { width: 26px; height: 26px; font-size: 13px; }
.tt-mine-actions .link-btn { padding: 3px 7px; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: 6px; }
.tt-mine-actions .link-btn:hover { background: var(--surface-2); text-decoration: underline; }
.tt-backups { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line); }
.tt-mine-box .tt-mine-sub { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.tt-backup-hint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.tt-mine.backup { background: transparent; border-style: dashed; }
.tt-mine.backup > i { background: var(--line); }
.tt-mine.backup .tt-mine-title { color: var(--muted); }
.tt-mine-actions .tt-mine-in { color: var(--accent); }
.tt-credit-bar .tt-credit-mark::before { white-space: nowrap; }

/* another arrangement, before it is taken */
.tt-preview { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 8px; padding: 6px 8px 6px 14px; border: 1px solid color-mix(in srgb, var(--amber) 60%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--amber) 14%, var(--surface)); }
.tt-preview p { margin: 0; font-size: 13.5px; }
.tt-preview-actions { display: flex; gap: 6px; }
.tt-preview-actions button { width: auto; min-height: 34px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; }
.tt-preview-actions .secondary { border-width: 1px; }
.tt-block.moved { box-shadow: 0 0 0 2px var(--amber); }
.tt-sumrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; }
.tt-sumrow .tt-sumline { margin: 0; }
.tt-sumrow .tt-tags { display: inline-flex; margin: 0; }
.tt-sumrow .tt-cue { font-size: 13px; }
/* the facts line and the preview's banner share the room above the week */
@media (min-width: 901px) {
  .tt-option:has(.tt-preview) .tt-grid { --row: clamp(6px, calc((100dvh - 410px) / var(--rows)), 38px); }
}

/* the drawer's handle and its scrim are a phone's */
.tt-drawer-handle, .tt-scrim { display: none; }
@media (min-width: 901px) {
  .tt-page { grid-template-columns: 300px minmax(0, 1fr); }
  .tt-page.no-rail { grid-template-columns: minmax(0, 1fr); }
  /* the rail keeps to the window: in a short one it scrolls by itself, the week stays */
  .tt-page .tt-rail { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (min-width: 1200px) {
  .tt-page { grid-template-columns: 340px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .tt-head .tt-bar { flex-basis: 100%; margin-left: 0; justify-content: flex-start; }
  .tt-bar .tt-plans { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tt-bar .tt-export-menu { left: auto; right: 0; }
  .tt-page { padding-bottom: 8px; }
  .tt-page .tt-rail { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; top: auto; display: flex; flex-direction: column; gap: 0; max-height: min(80dvh, 680px); margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); overflow: hidden; background: var(--surface); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(14, 23, 38, 0.16); }
  .tt-drawer-handle { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; width: 100%; min-height: 60px; padding: 8px 16px 10px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
  .tt-drawer-grip { width: 36px; height: 4px; border-radius: 999px; background: var(--line); }
  .tt-drawer-text { display: flex; align-items: center; gap: 8px; }
  .tt-drawer-chev::after { content: "▴"; color: var(--muted); }
  .tt-page.drawer-open .tt-drawer-chev::after { content: "▾"; }
  .tt-rail-body { display: none; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; }
  .tt-page.drawer-open .tt-rail-body { display: block; }
  .tt-rail-body .tt-mine-box { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .tt-rail-body .tt-mine-box > h3 { display: none; } /* the handle says it */
  .tt-page.drawer-open .tt-scrim { display: block; position: fixed; inset: 0; z-index: 54; background: rgba(15, 19, 26, 0.42); }
  .tt-mine .icon-btn.small { width: 44px; height: 44px; }
  .tt-mine-actions .link-btn { min-height: 44px; padding: 0 10px; }
  /* the Ask button and the toasts stand above the handle */
  body.schedule-open .chat-launcher { bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); }
  .tt-toast { z-index: 62; bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); } /* Undo stays within reach over the open sheet */
  body.schedule-open:has(.tt-page.drawer-open) .chat-launcher { display: none; }
}
/* a phone: every control by the title, in the preview and in the sheet is a full tap target */
@media (max-width: 900px), (pointer: coarse) {
  .tt-bar .tt-plan, .tt-bar .tt-actions > button, .tt-bar .tt-export summary, .tt-bar .tt-build, .tt-bar .tt-export-menu button, .tt-preview-actions button { min-height: 44px; }
  .tt-bar .tt-plans { padding: 0; border-width: 0; background: transparent; gap: 4px; }
  .tt-bar .tt-plan { border: 1px solid var(--line); background: var(--surface); }
}

/* ---------- Home v4: logo colours, serif type and progressive motion ---------- */
:is(body.landing-open, .home-early body), .landing {
  --hv4-page: #eef2f8; --hv4-surface: #fff; --hv4-ink: #14213d; --hv4-muted: #4a5878;
  --hv4-line: rgba(20, 33, 61, .14); --hv4-mist: rgba(238, 242, 248, .86);
  --hv4-primary: #14213d; --hv4-on-primary: #fff; --hv4-light-opacity: 1;
  --hv4-green: #2f7d61; --hv4-blue: #2f5bb3; --hv4-amber: #9a6a0e;
  --hv4-serif: 'Instrument Serif', 'Songti SC', 'STSong', 'Noto Serif SC', Georgia, serif;
  background: var(--hv4-page); color: var(--hv4-ink);
}
:root[data-theme="dark"] :is(body.landing-open, .home-early body, .landing) {
  --hv4-page: #0e1422; --hv4-surface: #172036; --hv4-ink: #eef1f7; --hv4-muted: #b3bccb;
  --hv4-line: rgba(179, 188, 203, .24); --hv4-mist: rgba(14, 20, 34, .86);
  --hv4-primary: #f5b64e; --hv4-on-primary: #14213d; --hv4-light-opacity: .45;
  --hv4-green: #4aa383; --hv4-blue: #b3bccb; --hv4-amber: #f5b64e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(body.landing-open, .home-early body, .landing) {
    --hv4-page: #0e1422; --hv4-surface: #172036; --hv4-ink: #eef1f7; --hv4-muted: #b3bccb;
    --hv4-line: rgba(179, 188, 203, .24); --hv4-mist: rgba(14, 20, 34, .86);
    --hv4-primary: #f5b64e; --hv4-on-primary: #14213d; --hv4-light-opacity: .45;
    --hv4-green: #4aa383; --hv4-blue: #b3bccb; --hv4-amber: #f5b64e;
  }
}
:is(body.landing-open, .home-early body) .topbar { background: var(--hv4-mist); border-bottom-color: var(--hv4-line); backdrop-filter: blur(12px); }
body.landing-open .chat-launcher { background: #14213d; }
.landing { position: relative; isolation: isolate; overflow-x: clip; padding: 0 24px 8px; }
.landing .landing-panel { position: relative; max-width: 1160px; padding: 0; border: 0; background: none; box-shadow: none; }
.landing .landing-hero { position: relative; display: grid; justify-items: center; align-content: center; min-height: 0; padding: 136px 0 60px; gap: 22px; text-align: center; }
#landingTitle { position: relative; z-index: 1; display: grid; justify-items: center; width: 100%; max-width: 1040px; margin: 0 0 .14em; padding: 0; color: var(--hv4-ink); font: 400 clamp(66px, 7vw, 106px)/1.02 var(--hv4-serif); letter-spacing: -.02em; }
#landingTitle > span { display: block; position: relative; width: fit-content; max-width: 100%; min-width: 0; white-space: normal; text-wrap: balance; }
:lang(zh) #landingTitle { font-weight: 700; font-size: clamp(54px, 5.8vw, 84px); line-height: 1.24; letter-spacing: .03em; }
:lang(zh) #landingTitle > span { margin-right: -.03em; }
#landingTitle .hv4-ai { display: inline-block; position: relative; margin-right: .08em; font-style: normal; color: #3e6cc9; }
#landingTitle .hv4-ai::after { content: ""; position: absolute; top: .03em; right: -.07em; width: .2em; height: .2em; background: #f5b64e; clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); pointer-events: none; }
:root[data-theme="dark"] #landingTitle .hv4-ai { color: #8fb0e8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #landingTitle .hv4-ai { color: #8fb0e8; }
}
/* Clone the bar per inline fragment; bottom padding leaves .06em below the text advance box. */
.landing .title-glow { --hv4-bar-height: .07em; display: inline; padding: 0 0 calc(.06em + var(--hv4-bar-height)); font: inherit; color: inherit; background: linear-gradient(90deg, #f5b64e, #f7c873) left bottom / 100% var(--hv4-bar-height) no-repeat; box-decoration-break: clone; -webkit-box-decoration-break: clone; -webkit-text-fill-color: currentColor; }
:lang(zh) .landing .title-glow { --hv4-bar-height: .09em; }
:lang(zh) .landing :is(h1, h2, h3, .landing-what, .tour-kicker, .tour-faq summary, .tour-steps li b) { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.landing .landing-what, :lang(zh) .landing .landing-what { max-width: 36em; margin: 0; font-size: 21px; line-height: 1.6; color: var(--hv4-muted); opacity: 1; text-wrap: balance; }
.landing .landing-actions { display: flex; justify-content: center; margin: 0; gap: 14px; }
.landing .landing-go { display: inline-flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 8px 0 26px; border: 0; background: var(--hv4-primary); color: var(--hv4-on-primary); font-size: 16px; box-shadow: none; filter: none; }
.landing .go-ring { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #f5b64e; border: 1px solid #f5b64e; color: #14213d; }
.landing .go-ring svg { width: 16px; height: 16px; }
.landing .landing-go:hover { filter: none; background: var(--hv4-primary); box-shadow: 0 12px 28px -14px rgba(20, 33, 61, .3); }
.landing .landing-stage { position: relative; isolation: isolate; max-width: min(1080px, calc((100vh - 110px) * 1.62)); margin: 0 auto 48px; padding: clamp(14px, 3vw, 36px) clamp(10px, 3vw, 40px) 18px; border-radius: 22px; background: var(--hv4-surface); box-shadow: 0 50px 100px -40px rgba(20, 33, 61, .3), 0 0 0 1px var(--hv4-line); transform-origin: 50% 0; }
.landing-stage .landing-demo { max-width: 1000px; margin: 0 auto; }
.landing-stage .dm-chatbox { background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(16px); }
.landing .dm-window { box-shadow: 0 0 0 1px var(--hv4-line); }
/* Decorations occupy their own edge lanes, outside both title lines. */
.hv4-backdrop { position: absolute; z-index: -1; inset: 0 0 auto; height: 980px; pointer-events: none; overflow: hidden; }
.hv4-aura { position: absolute; inset: 0; opacity: var(--hv4-light-opacity); }
.hv4-aura i { position: absolute; border-radius: 50%; filter: blur(70px); }
.hv4-aura i:nth-child(1) { width: 620px; height: 520px; left: -6%; top: -40px; background: rgba(62, 108, 201, .26); }
.hv4-aura i:nth-child(2) { width: 560px; height: 500px; right: -5%; top: 40px; background: rgba(74, 163, 131, .22); }
.hv4-aura i:nth-child(3) { width: 520px; height: 300px; left: 38%; top: 420px; background: rgba(245, 182, 78, .22); }
.hv4-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(20, 33, 61, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 33, 61, .07) 1px, transparent 1px); background-size: calc(100% / 7) 64px; mask-image: radial-gradient(70% 60% at 50% 42%, #000, transparent 75%); }
.hv4-courses { position: absolute; z-index: 0; inset: 0 0 auto; height: 680px; pointer-events: none; translate: 0 var(--hv4-lag, 0px); }
.hv4-course { --hv4-rotation: -7deg; --hv4-delay: .5s; position: absolute; width: 140px; padding: 11px 13px; box-sizing: border-box; border-radius: 12px; border-left: 4px solid var(--hv4-colour); background: var(--hv4-tint); color: #14213d; box-shadow: 0 16px 34px -18px rgba(20, 33, 61, .38); font: 600 12px/1.2 Inter, system-ui, sans-serif; transform: rotate(var(--hv4-rotation)); }
.hv4-course small { display: block; margin-top: 4px; color: #4a5878; font-size: 11px; font-weight: 500; white-space: nowrap; }
.hv4-green { --hv4-colour: #4aa383; --hv4-tint: #e3f1ea; }
.hv4-blue { --hv4-colour: #3e6cc9; --hv4-tint: #e2eaf8; }
.hv4-amber { --hv4-colour: #f5b64e; --hv4-tint: #fcefd6; }
.hv4-course-1 { left: 2%; top: 28px; }
.hv4-course-2 { left: 1%; top: 345px; --hv4-delay: .65s; --hv4-rotation: 6deg; }
.hv4-course-3 { left: 4%; top: 440px; --hv4-delay: .8s; --hv4-rotation: -4deg; }
.hv4-course-4 { left: 1%; top: 545px; --hv4-delay: 1s; --hv4-rotation: 5deg; }
.hv4-course-5 { right: 2%; top: 38px; --hv4-delay: .55s; --hv4-rotation: 8deg; }
.hv4-course-6 { right: 1%; top: 345px; --hv4-delay: .7s; --hv4-rotation: -6deg; }
.hv4-course-7 { right: 4%; top: 440px; --hv4-delay: .85s; --hv4-rotation: 4deg; }
.hv4-course-8 { right: 1%; top: 545px; --hv4-delay: .95s; --hv4-rotation: -5deg; }
/* One large review count, then three equal columns; the original ids still receive the live counts. */
.landing .landing-stats { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 860px; margin: 0 auto; padding: 84px 0 0; border: 0; }
.landing-stats::before { content: ""; position: absolute; z-index: -1; inset: 0 -140px -80px; background: radial-gradient(40% 60% at 35% 45%, rgba(74, 163, 131, .13), transparent 70%), radial-gradient(40% 60% at 65% 50%, rgba(62, 108, 201, .14), transparent 70%); opacity: var(--hv4-light-opacity); }
.landing .landing-stats > div { min-width: 0; padding: 22px 8px 0; text-align: center; border: 0; border-top: 1px solid var(--hv4-line); }
.landing .landing-stats > div:nth-child(n+3) { border-left: 1px solid var(--hv4-line); }
.landing .landing-stats > .hv4-stat-main { grid-column: 1 / -1; padding: 0 0 48px; border: 0; }
.landing .landing-stats dd { font: 400 44px/1 var(--hv4-serif); letter-spacing: -.02em; }
.landing #statReviews { font-size: clamp(130px, 15vw, 220px); line-height: .88; letter-spacing: -.045em; color: var(--hv4-ink); }
.landing-stats .hv4-stat-main dt { margin-top: 22px; font-size: 18px; }
.landing .landing-stats dt { color: var(--hv4-muted); }
.landing #statCourses { color: var(--hv4-green); }
.landing #statSyllabi { color: var(--hv4-blue); }
.landing #statTakeable { color: var(--hv4-amber); }
.landing .landing-source { margin: 30px auto 0; color: var(--hv4-muted); font-size: 13px; }
.landing :is(.tour-copy, .tour-steps, .tour-faq, .tour-end, .tour-film) h2 { font: 400 clamp(42px, 4.4vw, 64px)/1.04 var(--hv4-serif); letter-spacing: -.015em; color: var(--hv4-ink); }
:lang(zh) .landing :is(.tour-copy, .tour-steps, .tour-faq, .tour-end, .tour-film) h2 { font-weight: 700; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.3; letter-spacing: .03em; }
/* the strengths' headings sit in a half-width column: sized so each phrase between commas fits on one line with its full stop */
:lang(zh) .landing .tour-copy h2 { font-size: clamp(28px, 2.8vw, 40px); }
.landing .tour-copy > * { margin-left: 0; padding-left: 0; text-align: left; }
.landing .tour-copy p { color: var(--hv4-muted); }
.landing .tour-kicker { display: flex; align-items: center; gap: 8px; letter-spacing: .1em; font-weight: 600; }
.landing .tour-kicker::before { content: ""; flex: none; width: 18px; height: 3px; border-radius: 2px; background: currentColor; }
.landing .tour-row:has(.stage-rmp) .tour-kicker { color: var(--hv4-green); }
.landing .tour-row:has(.stage-tt) .tour-kicker { color: var(--hv4-blue); }
.landing .tour-row:has(.stage-ask) .tour-kicker { color: var(--hv4-amber); }
.landing .tour-stage { border: 0; box-shadow: none; }
.landing .stage-rmp { background: linear-gradient(150deg, #d8ece2, #e3f1ea 60%); }
.landing .stage-tt { background: linear-gradient(150deg, #d4e1f6, #e2eaf8 60%); }
.landing .stage-ask { background: linear-gradient(150deg, #fae3b8, #fcefd6 60%); }
.landing .tour-shot .art-block b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing .tour-shot { box-shadow: 0 34px 70px -34px rgba(20, 33, 61, .3), 0 0 0 1px var(--hv4-line); }
.landing .tour-go { min-height: 46px; padding: 8px 20px; border: 1px solid var(--hv4-ink); background: transparent; color: var(--hv4-ink); box-shadow: none; }
.landing .tour-go:hover { background: var(--hv4-surface); color: var(--hv4-ink); }
.landing #tourFilm { box-shadow: 0 40px 90px -40px rgba(20, 33, 61, .45); }
.landing .tour-steps li { position: relative; padding: 22px 0 0; border: 0; border-top: 1px solid var(--hv4-line); border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
.landing .tour-steps li:nth-child(1) { --hv4-step: #4aa383; }
.landing .tour-steps li:nth-child(2) { --hv4-step: #3e6cc9; }
.landing .tour-steps li:nth-child(3) { --hv4-step: #f5b64e; }
.landing .tour-steps li::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--hv4-step); transform-origin: left; }
.landing .tour-n { display: block; width: auto; height: auto; margin-bottom: 14px; border: 0; background: none; box-shadow: none; color: var(--hv4-step); font: 400 64px/1 var(--hv4-serif); }
.landing .tour-steps li b, .landing .tour-faq summary { color: var(--hv4-ink); }
.landing .tour-steps li > span:last-child, .landing .tour-faq details p { color: var(--hv4-muted); }
.landing .tour-faq details { border-color: var(--hv4-line); background: transparent; box-shadow: none; }
.landing .tour-end { position: relative; isolation: isolate; overflow: hidden; padding-block: 88px; border: 0; background: #14213d; box-shadow: none; }
.landing .tour-end::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(45% 80% at 10% 0%, rgba(62, 108, 201, .45), transparent 70%), radial-gradient(40% 70% at 95% 100%, rgba(74, 163, 131, .35), transparent 70%); opacity: var(--hv4-light-opacity); pointer-events: none; }
.landing .tour-end h2 { max-width: 780px; color: #eef1f7; }
.landing .tour-end .hero-primary { position: relative; min-height: 48px; background: #f5b64e; color: #14213d; border: 0; box-shadow: none; }
.hv4-end-courses { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .45; }
.hv4-end-courses .hv4-course-1 { left: -25px; top: 16px; }
.hv4-end-courses .hv4-course-2 { left: 16px; top: auto; bottom: 20px; }
.hv4-end-courses .hv4-course-3 { left: auto; right: -24px; top: 26px; }
.hv4-end-courses .hv4-course-4 { left: auto; right: 18px; top: auto; bottom: 20px; }
.hv4-footer { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; max-width: 1100px; margin: 40px auto 0; padding: 64px 24px 32px; border-top: 1px solid var(--hv4-line); }
.hv4-footer > div { min-width: 0; }
.hv4-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hv4-brand b { font: 400 34px/1 var(--hv4-serif); }
.hv4-brand p { max-width: 260px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--hv4-muted); }
.hv4-footer h3 { min-height: 34px; margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--hv4-muted); }
.hv4-footer :is(a, button) { display: flex; align-items: center; min-height: 44px; min-width: 44px; width: fit-content; max-width: 100%; padding: 4px 0; border: 0; background: none; color: var(--hv4-ink); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
.hv4-footer :is(a, button):hover { text-decoration: underline; text-underline-offset: 4px; }
.hv4-footer :is(a, button):focus-visible { outline: 2px solid #3e6cc9; outline-offset: 3px; }
/* These actions stay visible for existing footer journeys; the new home footer is primary. */
body.landing-open #footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px clamp(6px, 1.4vw, 16px); padding-inline: 12px; font-size: 11px; }
body.landing-open #footer .footer-body { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px clamp(6px, 1.4vw, 16px); }
body.landing-open #footer .footer-body a, body.landing-open #footer .footer-browse { white-space: nowrap; }
body.landing-open #footer .footer-browse { font-weight: 500; color: var(--muted); }
body.landing-open #footer .footer-browse::after { content: none; }
body.landing-open #footer .icp { flex-basis: 100%; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  #landingTitle > span { animation: hv4-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
  #landingTitle > span + span { animation-delay: .15s; }
  #landingTitle .hv4-ai::after { animation: hv4-ai-twinkle 3s ease-in-out infinite; }
  .landing .title-glow { animation: hv4-underline .9s cubic-bezier(.6, 0, .2, 1) 1.1s both; }
  .landing:not([hidden]) .landing-hero > h1 { animation: none; }
  .landing:not([hidden]) .landing-hero > .landing-what { animation: hv4-rise .9s cubic-bezier(.2, .8, .2, 1) .35s both; }
  .landing:not([hidden]) .landing-hero > .landing-actions { animation: hv4-rise .9s cubic-bezier(.2, .8, .2, 1) .5s both; }
  .landing .go-ring svg { animation: hv4-nudge 3.2s ease-in-out 2.4s infinite; }
  .hv4-aura i:nth-child(1) { animation: hv4-drift 19s ease-in-out infinite alternate; }
  .hv4-aura i:nth-child(2) { animation: hv4-drift 23s ease-in-out -6s infinite alternate-reverse; }
  .hv4-aura i:nth-child(3) { animation: hv4-drift 17s ease-in-out -3s infinite alternate; }
  .hv4-courses .hv4-course { animation: hv4-drop 1s cubic-bezier(.2, .8, .2, 1) var(--hv4-delay) both, hv4-float 7s ease-in-out calc(var(--hv4-delay) + 1s) infinite; }
  .hv4-end-courses .hv4-course { animation: hv4-float 7s ease-in-out var(--hv4-delay) infinite; }
  .landing .landing-stage { transform: perspective(1400px) rotateX(var(--hv4-tilt, 14deg)) scale(var(--hv4-scale, .94)); }
  .landing .hv4-in { animation: hv4-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
  .landing .tour-steps li.hv4-await::before { transform: scaleX(0); }
  .landing .tour-steps li.hv4-in::before { animation: hv4-bar 1.2s cubic-bezier(.6, 0, .2, 1) .3s both; }
}
@keyframes hv4-rise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes hv4-ai-twinkle { 0%, 100% { transform: scale(.8); opacity: .7; } 50% { transform: scale(1); opacity: 1; } }
@keyframes hv4-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hv4-underline { from { background-size: 0% var(--hv4-bar-height); } to { background-size: 100% var(--hv4-bar-height); } }
@keyframes hv4-nudge { 0%, 70%, 100% { translate: 0; } 80% { translate: 5px; } 90% { translate: 0; } }
@keyframes hv4-drift { to { transform: translate(60px, 40px) scale(1.08); } }
@keyframes hv4-drop { from { opacity: 0; transform: translateY(-48px) rotate(calc(var(--hv4-rotation) * 3)); } to { opacity: 1; transform: rotate(var(--hv4-rotation)); } }
@keyframes hv4-float { 0%, 100% { translate: 0; } 50% { translate: 0 -12px; } }
@media (max-width: 1100px) and (min-width: 641px) {
  .hv4-courses .hv4-course { width: 120px; padding: 10px 8px; font-size: 11px; }
  .hv4-courses .hv4-course:nth-child(4n+2) { top: 390px; }
  .hv4-courses .hv4-course:nth-child(4n+3) { top: 480px; }
  .hv4-courses .hv4-course:nth-child(4n+4) { top: 575px; }
}
@media (max-width: 640px) {
  .landing { padding-inline: 16px; }
  .landing .landing-panel { padding-inline: 0; }
  .landing .landing-hero { padding: 104px 0 36px; gap: 22px; }
  #landingTitle { font-size: 42px; line-height: 1.2; }
  :lang(zh) #landingTitle { font-size: 44px; }
  .landing .landing-what, :lang(zh) .landing .landing-what { font-size: 18px; }
  .landing .landing-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .landing .landing-go { justify-content: center; width: 100%; }
  .landing .landing-stage { margin-bottom: 20px; }
  .hv4-courses .hv4-course { display: none; scale: .8; transform-origin: top left; }
  .hv4-courses .hv4-course-1 { display: block; top: 14px; left: 12px; }
  .hv4-courses .hv4-course-5 { display: block; top: 18px; right: -14px; }
  .hv4-aura i:nth-child(1) { width: 320px; height: 300px; }
  .hv4-aura i:nth-child(2) { width: 300px; height: 280px; top: 120px; }
  .hv4-aura i:nth-child(3) { width: 280px; height: 200px; left: 20%; top: 360px; }
  .landing .landing-stats { padding-top: 60px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .landing #statReviews { font-size: 104px; }
  .landing .landing-stats dd { font-size: 30px; }
  .landing .landing-stats dt { font-size: 12px; }
  .landing .landing-stats .hv4-stat-main dt { font-size: 16px; }
  .landing .tour { padding-inline: 0; }
  .landing :is(.tour-copy, .tour-steps, .tour-faq, .tour-end, .tour-film) h2,
  :lang(zh) .landing :is(.tour-copy, .tour-steps, .tour-faq, .tour-end, .tour-film) h2 { font-size: 30px; }
  .landing .tour-copy, .landing .tour-stage { min-width: 0; }
  .landing .tour-end { padding-inline: 20px; }
  .hv4-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding: 48px 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing .landing-stage { transform: none; }
  .hv4-courses { translate: none; }
  .landing .hv4-in { opacity: 1; transform: none; }
  .landing .tour-steps li::before { transform: scaleX(1); }
}

/* ---------- 11-05 (owner): the cart is a small icon at the top right again; the list's two links live in the side bar ----------
   「购物车还是放在右上角有个小图标」: on laptops the cart leaves the side bar for a round icon with its count, fixed at the top right
   (left of a panel that is open on the right). "Help me plan" and "Upload course worksheet" repeat the side bar's 规划下学期 and
   上传课程清单, so they are not shown there; phones keep them, having no side bar on screen. */
@media (min-width: 900px) {
  .ws-links { display: none; }
  /* a 44px round icon, right edge in line with the cards, centred on the settings line; the count is a small Monet badge, gone at 0 */
  body:not(.landing-open) .topbar #cartBtn, body:not(.landing-open) .topbar #cartBtn:hover, body:not(.landing-open) .topbar #cartBtn[aria-expanded="true"] {
    position: fixed; top: 10px; right: calc(var(--dock-w, 0px) + 29px); z-index: 27; width: 44px; height: 44px; min-height: 44px; padding: 0;
    justify-content: center; gap: 0; border: 1px solid color-mix(in srgb, var(--monet-2) 30%, var(--line)); border-radius: 999px;
    background: var(--surface); color: var(--monet-1); box-shadow: 0 8px 20px -12px rgba(43, 79, 156, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }
  body:not(.landing-open) .topbar #cartBtn svg { width: 21px; height: 21px; }
  body:not(.landing-open) .topbar #cartBtn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(43, 79, 156, 0.7); background: var(--surface); }
  body:not(.landing-open) .topbar #cartBtn[aria-expanded="true"] { background: var(--monet-1); color: #fff; border-color: transparent; }
  body:not(.landing-open) .topbar #cartBtn .side-label { display: none; }
  body:not(.landing-open) .topbar #cartBtn .cart-badge {
    position: absolute; top: -5px; right: -5px; margin: 0; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border: 2px solid var(--surface); border-radius: 999px; background: var(--monet-1); color: #fff; font-size: 11px; font-weight: 700; line-height: 14px; text-align: center;
  }
  body:not(.landing-open) .topbar #cartBtn .cart-badge[data-count="0"] { display: none; }
  :where(:root[data-theme="dark"]) body:not(.landing-open) .topbar #cartBtn:not([aria-expanded="true"]) { color: #b9cdf0; }
  body:not(.landing-open) .ws-bar { padding-right: 60px; } /* the settings line never runs under the icon */
  /* the line with the settings stays at the top as the list scrolls, so the icon always sits in it, never over a course's + */
  body:not(.landing-open) .board { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(12px); }
}

/* a copy icon on each course of My timetable: a small menu with its class numbers and its name (owner, 11-05: 「一键复制课名字或课号」) */
.tt-copy { position: relative; flex: 0 0 auto; }
.tt-copy > summary { list-style: none; display: inline-grid; place-items: center; cursor: pointer; color: var(--muted); }
.tt-copy > summary::-webkit-details-marker { display: none; }
.tt-copy > summary:hover, .tt-copy[open] > summary { color: var(--monet-1); background: var(--monet-mist); }
.tt-copy.done > summary { color: #2f8f5b; }
.tt-copy-menu {
  position: absolute; z-index: 5; top: calc(100% + 4px); right: 0; display: grid; gap: 2px; min-width: 220px; max-width: 300px; padding: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 34px -12px rgba(27, 39, 64, 0.4);
}
.tt-copy-item { display: grid; gap: 1px; padding: 7px 10px; min-height: 44px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tt-copy-item:hover, .tt-copy-item:focus-visible { background: var(--monet-mist); }
.tt-copy-item span { font-size: 12px; color: var(--muted); }
.tt-copy-item b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; } /* the whole name: it is what gets copied */
/* the course description above a row of "In the timetable" while the pointer rests on it: small, four lines at most */
.tt-about {
  position: fixed; z-index: 40; width: 300px; max-width: calc(100vw - 16px); padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); box-shadow: 0 16px 36px -14px rgba(27, 39, 64, 0.45); pointer-events: none; font-size: 13px; line-height: 1.45;
}
.tt-about b { display: block; margin-bottom: 4px; font-size: 13px; }
.tt-about p { margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }
.tt-about p.muted { font-style: italic; }
@media (prefers-reduced-motion: no-preference) { .tt-about:not([hidden]) { animation: tt-about-in 0.16s ease-out; } }
@keyframes tt-about-in { from { opacity: 0; transform: translateY(4px); } }
/* "Plan next term" folds its steps on a second press (laptops): a small chevron says which way it goes */
@media (min-width: 900px) {
  .side-link[data-nav="plan"][aria-expanded]::after {
    content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin: 0 4px 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); opacity: 0.7; transition: transform 0.18s ease;
  }
  .side-link[data-nav="plan"][aria-expanded="false"]::after { transform: rotate(-45deg); }
}
@media (min-width: 900px) and (prefers-color-scheme: dark) {
  :where(:root:not([data-theme])) body:not(.landing-open) .topbar #cartBtn:not([aria-expanded="true"]) { color: #b9cdf0; }
}

/* ---------- More filters, simpler (owner, 11-05: 「优化按键位置和里面的按键内容 简化凝练」) ----------
   Each label sits beside its options (one line a field where they fit), short option words with small counts, the hints under the
   options in one short line, and one Monet button at the foot beside Clear all. */
.fp-group { padding: 12px 0 4px; }
.fp-group > h3 { margin: 0 0 8px; color: var(--monet-1); letter-spacing: 0.04em; }
.fp-field { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; column-gap: 10px; margin: 0 0 10px; }
:lang(en) .fp-field { grid-template-columns: 96px minmax(0, 1fr); }
.fp-field > .fp-label { margin: 9px 0 0; font-size: 13px; line-height: 1.3; }
.fp-opts { gap: 6px; }
.fp-opt { gap: 6px; padding: 3px 11px; font-size: 13px; }
.fp-opt .n { font-size: 11.5px; }
.fp-opt[aria-pressed="true"] { border-color: var(--monet-1); background: var(--monet-mist); color: var(--monet-1); }
.fp-hint { margin: -2px 0 10px 86px; font-size: 11.5px; }
:lang(en) .fp-hint { margin-left: 106px; }
.fp-hint + .fp-hint { margin-top: -6px; }
.fp-note { font-size: 11.5px; }
.fp-foot .fp-show { flex: 1; min-height: 44px; border: 0; border-radius: 12px; background: linear-gradient(100deg, var(--monet-1), var(--monet-2)); color: #fff; font-weight: 700; }
.fp-foot .fp-show:hover { filter: brightness(1.06); }
.fp-foot .flink { flex: none; }
@media (max-width: 420px) {
  .fp-field, :lang(en) .fp-field { grid-template-columns: 1fr; }
  .fp-field > .fp-label { margin: 0 0 6px; }
  .fp-hint, :lang(en) .fp-hint { margin-left: 0; }
}
@media (min-width: 900px) {
  /* a little wider on laptops, so a field's options mostly fit on one line */
  .filters-panel { width: min(420px, calc(100vw - 32px)); }
}
/* the days: compact, no counts (a count per weekday says little) */
.fp-field[data-key="day"] .fp-opt { padding: 3px 9px; }
.fp-field[data-key="day"] .fp-opt .n { display: none; }

/* ---------- 11-05 phone fixes from the owner's screenshots ---------- */
/* a chat card under a table: the course code and title keep their line; the actions wrap under it on a phone, the reason
   (the table already says why) is left out */
.chat-section-card.compact { flex-wrap: wrap; }
.chat-section-card.compact .chat-section-open { flex: 1 1 180px; }
.chat-section-card.compact .course-reason { display: none; }
.chat-section-card.compact .chat-section-meta { margin-left: auto; }
/* the notes folded under a chat table read as a toggle, not as an empty heading */
.md-notes > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--monet-1); font-weight: 600; font-size: 13.5px; }
.md-notes > summary::-webkit-details-marker { display: none; }
.md-notes > summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s ease; }
.md-notes[open] > summary::before { transform: rotate(45deg); }
:where(:root[data-theme="dark"]) .md-notes > summary { color: #b9cdf0; }
/* My timetable's phone sheet never shows over the chat */
@media (max-width: 899px) {
  body.chat-open .tt-drawer-handle, body.chat-open dialog.schedule .tt-rail { visibility: hidden; pointer-events: none; } /* the sheet, open or folded, never covers the chat's input */
}
/* phones up to 480px wide (most iPhones are 390–430): the logo alone in the top bar, the cart count on its icon, so nothing overlaps */
@media (max-width: 480px) {
  .topbar .name { display: none; }
  .topbar .brand { min-width: 44px; justify-content: center; }
  .cart-badge { position: absolute; top: -7px; right: -7px; border: 2px solid var(--board); box-sizing: content-box; }
  .topbar-btn { padding: 0; }
  .topbar .language-switch { flex: none; }
}
/* the home page's beam reads as a smudge on a phone: phones keep the sky and the grid */
@media (max-width: 600px) {
  .landing .landing-hero h1::before { display: none; }
}
/* the side bar's way back to the first question: one quiet line with an arrow, not an underlined link */
@media (min-width: 900px) {
  .topbar .topbar-link { min-height: 34px; padding: 0 12px 0 52px; white-space: nowrap; text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--side-muted); opacity: 0.85; }
  .topbar .topbar-link:hover { opacity: 1; color: var(--side-ink); text-decoration: underline; text-underline-offset: 3px; }
  .topbar .topbar-link span { display: inline-block; margin-right: 4px; font-size: 14px; }
}
/* phones: the list's two ways back into planning sit side by side as small pills, not two underlined lines */
@media (max-width: 899px) {
  .ws-links { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .ws-link {
    flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--monet-2) 30%, var(--line)); border-radius: 999px;
    background: var(--surface); color: var(--monet-1); font-size: 13px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  :where(:root[data-theme="dark"]) .ws-link { color: #b9cdf0; }
  /* the cart count in the same Monet blue as on laptops; no 0 */
  .topbar #cartBtn .cart-badge { background: var(--monet-1); color: #fff; }
  .topbar #cartBtn .cart-badge[data-count="0"] { display: none; }
}

/* ---------- 11-05 QA pass fixes ---------- */
/* a filter pill never spills its words */
.fbtn { max-width: 100%; }
.fbtn .t, .fbtn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* the signed-in initial in the side bar stays a circle */
@media (min-width: 900px) {
  .topbar .topbar-btn.signed-in .topbar-label { flex: none; width: 30px; height: 30px; background: var(--monet-1); }
  /* 900–1199: a little wider, and labels on one line */
  .topbar .side-link span, .topbar .topbar-btn .side-label, .topbar .topbar-btn .topbar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 900px) and (max-width: 1199px) { :root { --side-w: 200px; } }
/* a chat card's requirement line keeps clear of its coloured edge */
.chat-section-card .course-reason { padding-left: 14px; padding-right: 12px; }
/* phones: Ask Takeable is a round button (its words stay for screen readers), so it covers less of the page */
@media (max-width: 480px) {
  .chat-launcher { width: 56px; height: 56px; min-height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
  .chat-launcher span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chat-launcher svg { width: 24px; height: 24px; }
}
/* the home demo's step names stay on one line */
.dm-plabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* phones: the settings line is one line, cut with … */
@media (max-width: 899px) {
  .ws-settings { max-width: 100%; min-width: 0; }
  .ws-settings #moreSum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
/* the planning list's Minor tag is a small pill, not a bar */
.plan-major.minor .cp-tag { display: inline-block; width: auto; margin: 0 6px 0 0; padding: 1px 8px; border-radius: 999px; font-size: 11px; vertical-align: 1px; }
@media (min-width: 900px) and (max-width: 1199px) { .topbar .side-link, .topbar .topbar-btn { font-size: 14px; } }

/* ---------- 11-05 (owner): "Plan next term" is a page of its own on laptops, so the answers are collected first, then the course list ----------
   The questions take the whole space beside the side navigation, in a centred column; the chat docks again once they are done. */
@media (min-width: 900px) {
  body.planning.plan-full .chat.open { top: 0; bottom: 0; left: var(--side-w); right: 0; width: auto; height: auto; z-index: 25; /* over the list and its sticky line (20), under the side bar and its cart icon (26) */ border: 0; border-radius: 0; box-shadow: none; background: var(--bg); transform: none; }
  body.planning.plan-full .chat-resize, body.planning.plan-full #chatFull { display: none; }
  body.planning.plan-full.chat-open:not(.chat-full) { --dock-left: 0px; --dock-w: 0px; }
  body.planning.plan-full #chatPlan { width: min(780px, 100%); margin: 0 auto; padding: 28px 24px 40px; box-sizing: border-box; }
  body.planning.plan-full #chatPlan .plan-q { font-size: 20px; }
  body.planning.plan-full .chat-head { padding-inline: max(24px, calc((100% - 780px) / 2 + 24px)); }
}
/* the courses-taken question: three clear choices, the hint under the question */
.plan-choices.record { display: grid; gap: 8px; }
.plan-choices.record .plan-choice { justify-content: flex-start; text-align: left; }
.plan-choices.record .plan-choice span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.plan-hint { margin: 0 0 10px; font-size: 13px; }

/* ---------- The plan's conversation moves (owner 11-05: 「对话的形式 ui要做动画」, then 「问答动画再好看一些」) ----------
   The question being asked: the avatar breathes while three Monet dots type, the bubble then grows out of the avatar (a soft
   overshoot, a blur that clears), the choices spring up one after another. A pressed choice lights in Monet blue for a moment,
   the answer then pops in from the right with one sweep of light. Only when the step changes ([data-anim="1"]); never with reduced
   motion. */
.cp-typing { display: none; align-items: center; gap: 5px; max-width: 70px; padding: 12px 15px; border-radius: 4px 16px 16px 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 18px -10px rgba(43, 79, 156, 0.35); overflow: hidden; transform-origin: 0 0; }
.cp-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--monet-1); animation: cp-dot 1s cubic-bezier(.45,0,.55,1) infinite; }
.cp-typing i:nth-child(2) { background: var(--monet-2); animation-delay: 0.14s; }
.cp-typing i:nth-child(3) { background: var(--monet-3); animation-delay: 0.28s; }
@keyframes cp-dot { 0%, 70%, 100% { opacity: 0.35; transform: translateY(0) scale(0.85); } 35% { opacity: 1; transform: translateY(-4px) scale(1); } }
@keyframes cp-typing-in { from { opacity: 0; transform: scale(0.6); } }
@keyframes cp-typing-out { to { opacity: 0; max-width: 0; padding: 0; margin: 0; border-width: 0; } }
@keyframes cp-grow { 0% { opacity: 0; transform: translateY(6px) scale(0.86); filter: blur(5px); } 65% { opacity: 1; transform: translateY(-1px) scale(1.02); filter: blur(0); } 100% { transform: none; } }
@keyframes cp-spring { 0% { opacity: 0; transform: translateY(14px) scale(0.94); } 60% { opacity: 1; transform: translateY(-3px) scale(1.01); } 100% { transform: none; } }
@keyframes cp-fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes cp-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 125, 184, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(91, 125, 184, 0); } }
@keyframes cp-pop-me { 0% { opacity: 0; transform: translateX(22px) scale(0.88); } 60% { opacity: 1; transform: translateX(-3px) scale(1.03); } 100% { transform: none; } }
@keyframes cp-sheen { from { transform: translateX(-120%) skewX(-18deg); opacity: 1; } 80% { opacity: 1; } to { transform: translateX(320%) skewX(-18deg); opacity: 0; } } /* it leaves no band at the edge */
@keyframes cp-pick { 0% { transform: scale(1); } 40% { transform: scale(0.95); } 100% { transform: scale(1.02); } }
.plan-choice.picked, .plan-major.picked { border-color: var(--monet-1) !important; background: var(--monet-1) !important; color: #fff !important; box-shadow: 0 8px 22px -10px rgba(43, 79, 156, 0.7); transition: none !important; } /* at once: a fading background under white words read blank */
.plan-choice.picked span, .plan-major.picked span { color: rgba(255, 255, 255, 0.8) !important; }
.cp-msg.me .cp-bubble { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .plan-choice.picked, .plan-major.picked { animation: cp-pick 0.17s ease-out both; }
  [data-anim="1"] .plan-ask .cp-msg.asking .cp-ava { animation: cp-breathe 0.9s ease-out 0s 1; }
  [data-anim="1"] .plan-ask .cp-msg.asking .cp-typing { display: inline-flex; animation: cp-typing-in 0.18s cubic-bezier(.2,.9,.25,1.2) both, cp-typing-out 0.01s linear 0.55s forwards; }
  [data-anim="1"] .plan-ask .cp-msg.asking .cp-bubble { transform-origin: 0 100%; animation: cp-grow 0.46s cubic-bezier(.2,.8,.2,1) 0.55s both; }
  [data-anim="1"] .plan-ask .cp-answers > :not(.plan-choices):not(#planMajors) { animation: cp-fade-up 0.32s ease-out 0.72s both; }
  [data-anim="1"] .plan-ask .plan-choices > *, [data-anim="1"] .plan-ask .plan-majors > li { animation: cp-spring 0.46s cubic-bezier(.2,.8,.2,1) 0.76s both; }
  [data-anim="1"] .cp-msg.me.just .cp-bubble { transform-origin: 100% 0; animation: cp-pop-me 0.42s cubic-bezier(.2,.8,.2,1) both; }
  [data-anim="1"] .cp-msg.me.just .cp-bubble::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: cp-sheen 0.7s ease-out 0.25s both; pointer-events: none; }
  [data-anim="1"] .cp-msg.me.just .cp-edit { animation: cp-fade-up 0.3s ease-out 0.3s both; }
  [data-anim="1"] .plan-ask .plan-choices > :nth-child(2), [data-anim="1"] .plan-ask .plan-majors > li:nth-child(2) { animation-delay: 0.815s; }
  [data-anim="1"] .plan-ask .plan-choices > :nth-child(3), [data-anim="1"] .plan-ask .plan-majors > li:nth-child(3) { animation-delay: 0.870s; }
  [data-anim="1"] .plan-ask .plan-choices > :nth-child(4), [data-anim="1"] .plan-ask .plan-majors > li:nth-child(4) { animation-delay: 0.925s; }
  [data-anim="1"] .plan-ask .plan-choices > :nth-child(5), [data-anim="1"] .plan-ask .plan-majors > li:nth-child(5) { animation-delay: 0.980s; }
  [data-anim="1"] .plan-ask .plan-choices > :nth-child(6), [data-anim="1"] .plan-ask .plan-majors > li:nth-child(6) { animation-delay: 1.035s; }
  [data-anim="1"] .plan-ask .plan-choices > :nth-child(7), [data-anim="1"] .plan-ask .plan-majors > li:nth-child(7) { animation-delay: 1.090s; }
  [data-anim="1"] .plan-ask .plan-choices > :nth-child(8), [data-anim="1"] .plan-ask .plan-majors > li:nth-child(8) { animation-delay: 1.145s; }
  [data-anim="1"] .plan-ask .plan-choices > :nth-child(9), [data-anim="1"] .plan-ask .plan-majors > li:nth-child(9) { animation-delay: 1.200s; }
  [data-anim="1"] .plan-ask .plan-choices > :nth-child(10), [data-anim="1"] .plan-ask .plan-majors > li:nth-child(10) { animation-delay: 1.255s; }
  [data-anim="1"] .plan-ask .plan-choices > :nth-child(11), [data-anim="1"] .plan-ask .plan-majors > li:nth-child(11) { animation-delay: 1.310s; }
  [data-anim="1"] .plan-ask .plan-choices > :nth-child(12), [data-anim="1"] .plan-ask .plan-majors > li:nth-child(12) { animation-delay: 1.365s; }
}
/* one line a school: its name and how many majors, the official English name in the tooltip; "more" in the Monet blue */
.plan-choices.schools { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-choices.schools .plan-choice { flex-direction: row; align-items: baseline; gap: 6px; min-height: 44px; }
.plan-choices.schools .plan-choice span { display: inline; font-size: 12px; color: var(--muted); }
.plan-choice.plan-more, .plan-major.plan-more { border-style: dashed; color: var(--monet-1); background: transparent; }
:where(:root[data-theme="dark"]) .plan-choice.plan-more, :where(:root[data-theme="dark"]) .plan-major.plan-more { color: #b9cdf0; }
/* majors as compact pills in two columns, not a long list */
.plan-majors.ranked { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.plan-majors.ranked .plan-major { min-height: 44px; }
.plan-alt { margin: 10px 0 0; font-size: 13px; }
.plan-alt .link-btn { color: var(--monet-1); }
/* folded "Plan next term": its steps and its Start over line go together (owner 11-05: 「第二次点击 规划下学期时 重新规划也要回收」) */
body.plan-steps-folded #restartBtn { display: none !important; }
/* With the cart drawer or My timetable open, a hint (an add, a clash with its switch) waits at the foot of the screen, not over
   the drawer's first row or the timetable's Export menu at the top right (11-05) */
@media (min-width: 641px) {
  body:is(.cart-open, .schedule-open) .cart-toast, body:is(.cart-open, .schedule-open) .cart-toast.compact {
    top: auto; bottom: 24px; left: 0; right: var(--dock-w, 0px); margin-inline: auto; width: max-content; max-width: min(560px, calc(100vw - 32px));
  }
}

/* Already in the cart (My timetable, or the cart drawer): no cart button on top of it (owner 11-05: 「如果已经进入购物车就没必要在课表页面显示了」) */
body:is(.schedule-open, .cart-open) .topbar #cartBtn { visibility: hidden; pointer-events: none; }
/* a picked course: remove it here, or with the Delete key (shown only where there is a keyboard) */
.tt-detail-del { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; }
.tt-detail-del .link-btn { display: inline-flex; align-items: center; min-height: 44px; color: #c0392b; font-weight: 600; }
.tt-kbd { color: var(--muted); font-size: 12px; }
@media (hover: none) { .tt-kbd { display: none; } }

/* ---------- Plan conversation, UI only (owner 11-05 via the 简呆 session: 「只优化动画ui 不改流程」) ---------- */
/* the typing dots float over the bubble's place instead of taking a flex slot, so the question lines up with the greeting and its choices */
.chat-plan .cp-msg.asking { position: relative; }
.chat-plan .cp-msg.asking .cp-typing { position: absolute; left: 36px; top: 0; }
/* the close button shows its ring only for keyboard focus, not when the plan opens */
#chatClose:focus:not(:focus-visible) { outline: none; box-shadow: none; }
/* Step n of 6, under the title */
.plan-progress { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 8px 0 10px; background: var(--bg); font-size: 12.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.plan-progress i { position: relative; flex: 1; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.plan-progress i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--monet-1), var(--monet-2)); }
.plan-progress .pp-short { display: none; }
@media (max-width: 600px) { .plan-progress .pp-long { display: none; } .plan-progress .pp-short { display: inline; } }
/* the question at 20px, choices as roomier cards that lift a little on hover; "37 个专业" stays on one line */
.chat-plan .plan-step .plan-q { font-size: 20px; line-height: 1.35; }
@media (max-width: 600px) { .chat-plan .plan-step .plan-q { font-size: 18px; } }
.chat-plan .cp-answers .plan-choice, .chat-plan .plan-major { min-height: 48px; padding: 10px 16px; border-radius: 14px; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.chat-plan .cp-answers .plan-choice:hover, .chat-plan .plan-major:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--monet-2) 45%, var(--line)); box-shadow: 0 10px 22px -14px rgba(43, 79, 156, 0.55); }
.plan-choices.schools .plan-choice span { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .chat-plan .cp-answers .plan-choice:hover, .chat-plan .plan-major:hover { transform: none; } }
/* the sticky "Step n of 6" line never covers what is scrolled to under it */
#chatPlan { scroll-padding-top: 56px; }

/* The first screen keeps its words in the middle of the window (owner, 11-04: 「留出空间 字居中在整个屏幕里面」); on a tall window the demo
   rises into the space under the buttons, so its top shows on the first screen (v4, approved 11-05). */
@media (min-width: 641px) {
  .landing .landing-hero { min-height: calc(100svh - 64px); padding: 32px 0; }
  .landing .landing-stage { margin-top: calc(-1 * max(0px, 50svh - 330px)); }
}
/* ---------- 学位进度 (#progress, public/progress-ui.js): a page of its own in the site's cards ---------- */
body.progress-open .board, body.progress-open .banner, body.progress-open .shared-bar, body.progress-open .layout, body.progress-open .footer { display: none; }
@media (max-width: 900px) { body.progress-open .chat-launcher { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } }
.progress-view { padding: 0 24px 40px; }
.pg-inner { max-width: 920px; margin: 0 auto; display: grid; gap: 14px; }
.pg-head { padding: 18px 0 2px; }
.pg-head .kicker { margin: 10px 0 2px; }
.pg-head h2 { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; color: var(--ink); }
.pg-back { font-size: 13.5px; }
.pg-sub { margin: 6px 0 0; font-size: 14px; color: var(--ink); }
.pg-source { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.pg-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.pg-summary p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 10px 0 0; font-size: 14px; }
.pg-summary p span { color: var(--muted); }
.pg-bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pg-bar i { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--monet-1), var(--monet-2)); }
.pg-first { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); background: color-mix(in srgb, var(--amber) 9%, var(--surface)); }
.pg-first p { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-tools { justify-content: flex-end; }
.pg-btn { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pg-btn:hover { border-color: color-mix(in srgb, var(--monet-2) 45%, var(--line)); }
.pg-btn.primary { border-color: transparent; background: linear-gradient(100deg, var(--monet-1), var(--monet-2)); color: #fff; }
.pg-btn.quiet { color: var(--muted); }
.pg-btn.find { color: var(--monet-1); border-color: color-mix(in srgb, var(--monet-2) 35%, var(--line)); }
.pg-group h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 15px; color: var(--ink); }
.pg-group h3 small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pg-group ul { list-style: none; margin: 0; padding: 0; display: grid; }
.pg-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.pg-row:first-child { border-top: 0; }
.pg-what { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pg-label { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pg-what small { font-size: 12px; color: var(--muted); }
.pg-right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; flex: none; max-width: 55%; }
.pg-state { font-size: 13px; font-weight: 650; }
.pg-state.done { color: #2f8f5b; }
.pg-state.going { color: var(--monet-1); }
.pg-state.muted { color: var(--muted); font-weight: 500; }
.pg-mini { font-size: 12.5px; min-height: 32px; }
.pg-dot { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 800; }
.pg-dot.done { background: #2f8f5b; color: #fff; }
.pg-dot.going { background: var(--monet-mist); color: var(--monet-1); }
.pg-dot.guess { background: color-mix(in srgb, var(--amber) 30%, var(--surface)); color: #8a5a00; }
.pg-dot.need { border: 2px solid var(--line); }
.pg-dot.check { background: var(--line); color: var(--muted); }
.pg-row.done .pg-label { color: var(--muted); }
.pg-empty p { margin: 0 0 12px; font-size: 14px; }
@media (max-width: 640px) {
  .progress-view { padding: 0 14px 90px; }
  .pg-row { flex-wrap: wrap; }
  .pg-right { max-width: none; width: 100%; justify-content: flex-start; padding-left: 32px; }
  .pg-btn, .pg-mini { min-height: 44px; }
}
@media (min-width: 900px) { .side-link[data-nav="progress"] { order: 8; } } /* after My timetable, as in the markup */
.pg-btn { width: auto; flex: 0 0 auto; }
/* the page short and readable (owner 11-05: 「简介 足够大小 不要列的长片大论」): one big number, what is still open per group,
   the done ones folded, the ones to check in one line, 15–16px rows */
.pg-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; }
.pg-big b { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--ink); }
.pg-big b small { font-size: 22px; color: var(--muted); font-weight: 600; }
.pg-big span { font-size: 16px; font-weight: 600; color: var(--ink); }
.pg-big em { margin-left: auto; font-style: normal; font-size: 14px; color: var(--muted); }
.pg-gbar { height: 6px; margin: -2px 0 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pg-gbar i { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: #2f8f5b; }
.pg-group h3 { font-size: 17px; }
.pg-label { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-what small { display: none; }
.pg-alldone { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: #2f8f5b; }
.pg-fold { margin-top: 6px; border-top: 1px dashed var(--line); }
.pg-fold > summary { cursor: pointer; padding: 8px 0 2px; font-size: 14px; font-weight: 600; color: #2f8f5b; }
.pg-checkline { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .pg-big b { font-size: 34px; } .pg-big em { margin-left: 0; width: 100%; } .pg-label { white-space: normal; } }
.pg-summary .pg-big { justify-content: flex-start; }
/* full screen on a laptop: the history is a column on the left and the conversation stays beside it, like a chat app
   (owner 11-05: 「chat box对话框点开历史会话 全面屏依旧奇怪」); chat-history-ui.js keeps it open while a chat is picked */
@media (min-width: 768px) {
  body.chat-full .chat.history-open { --hist-w: 300px; padding-left: var(--hist-w); }
  body.chat-full .chat.history-open .chat-history {
    position: absolute; left: 0; top: 0; bottom: 0; width: var(--hist-w); box-sizing: border-box; margin: 0;
    padding: 18px 14px 20px; gap: 10px; background: var(--surface); border-right: 1px solid var(--line);
  }
  body.chat-full .chat.history-open .chat-log { display: flex; }
  body.chat-full .chat.history-open .chat-activity { display: flex; }
  body.chat-full .chat.history-open .chat-composer:not([hidden]) { display: grid; }
  body.chat-full .chat.history-open .chat-notice:not([hidden]) { display: block; }
  /* the conversation keeps its readable width in what is left of the screen */
  body.chat-full .chat.history-open :is(.chat-head, .chat-log, .chat-composer, .chat-activity) {
    padding-left: max(20px, calc((100vw - var(--hist-w)) / 2 - 440px)); padding-right: max(20px, calc((100vw - var(--hist-w)) / 2 - 440px));
  }
  body.chat-full .chat.history-open .chat-notice { margin-left: max(16px, calc((100vw - var(--hist-w)) / 2 - 440px)); margin-right: max(16px, calc((100vw - var(--hist-w)) / 2 - 440px)); }
  body.chat-full .chat-history.beside [data-hist="close"] { display: none; } /* 历史 in the header folds the column */
  body.chat-full .chat-history.beside .chat-history-head h3 { font-size: 16px; }
  body.chat-full .chat-history.beside .chat-history-tools { display: flex; flex-wrap: wrap; gap: 6px; }
  body.chat-full .chat-history.beside .chat-history-tools .chat-new { font-size: 12.5px; padding: 5px 10px; }
  body.chat-full .chat-history.beside .chat-history-note { font-size: 13px; line-height: 1.5; }
  body.chat-full .chat-history.beside .chat-history-item { border-color: transparent; background: transparent; padding: 2px; }
  body.chat-full .chat-history.beside .chat-history-item:hover { background: var(--surface-2); }
  body.chat-full .chat-history.beside .chat-history-item.current { background: var(--surface-2); border-color: var(--line); }
  /* rename and delete float over the end of the row on hover, so the titles keep the whole width */
  body.chat-full .chat-history.beside .chat-history-item { position: relative; }
  body.chat-full .chat-history.beside .chat-history-actions { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding-left: 16px; border-radius: 10px; background: linear-gradient(to right, transparent, var(--surface-2) 16px); opacity: 0; transition: opacity 0.12s ease; }
  body.chat-full .chat-history.beside .chat-history-item:is(:hover, :focus-within) .chat-history-actions { opacity: 1; }
  body.chat-full #chatHistoryBtn[aria-expanded="true"] { background: rgba(var(--glass), 0.18); }
}
/* the way back from the course list to the degree progress page (progress-ui.js) */
.pg-backpill { align-self: flex-start; margin: 0 0 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; box-shadow: var(--shadow); min-height: 40px; }
.pg-backpill:hover { background: var(--surface-2); }
.pg-row.pg-flash { animation: pg-flash 1.6s ease; }
@keyframes pg-flash { 0%, 40% { background: color-mix(in srgb, var(--accent) 14%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .pg-row.pg-flash { animation: none; } }
/* "Continue with Google" with Google's own mark, as its sign-in branding asks (white button, the four-colour G, dark text) */
.auth-google { background: #fff; color: #1f1f1f; border-color: #747775; font-weight: 600; }
.auth-google:hover { background: #f8faff; }
.auth-google .auth-g { flex: none; }
:root[data-theme="dark"] .auth-google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-google { background: #131314; color: #e3e3e3; border-color: #8e918f; } }
/* the empty timetable: one clean card (schedule-ui.js emptyCardHtml; owner 11-05, his mock-up) */
.tt-emptycard { box-sizing: border-box; width: min(880px, calc(100% - 32px)); margin: clamp(24px, 8vh, 96px) auto 40px; padding: clamp(22px, 4vw, 36px); border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(14, 23, 38, 0.06); display: grid; gap: 18px; }
.tt-ec-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tt-ec-term { display: inline-block; padding: 8px 16px; border-radius: 999px; background: color-mix(in srgb, var(--amber) 28%, var(--surface)); color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.tt-ec-more { width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--surface-2); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.tt-ec-more:hover, .tt-ec-more[aria-expanded="true"] { background: var(--line); }
.tt-emptycard h2 { margin: 0; font-family: var(--display); font-size: clamp(34px, 5vw, 48px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.tt-emptycard .tt-add { margin: 4px 0 0; }
.tt-emptycard .tt-add input { box-sizing: border-box; width: 100%; min-height: 56px; padding: 0 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 17px; color: var(--ink); }
.tt-emptycard .tt-add input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.tt-ec-back { min-height: 56px; border: 0; border-radius: 18px; background: #161922; color: #fff; font: inherit; font-size: 17px; font-weight: 650; cursor: pointer; }
.tt-ec-back:hover { background: #262a36; }
:root[data-theme="dark"] .tt-ec-back { background: #f3f4f7; color: #161922; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tt-ec-back { background: #f3f4f7; color: #161922; } }
.tt-emptycard .tt-options { margin: 0; }
@media (max-width: 640px) { .tt-emptycard .tt-add input { font-size: 16px; padding: 0 14px; } .tt-emptycard { margin-top: 20px; } }
/* the tour's last step: one real question for the assistant, asked with a click (tour.js) */
.tour-ask { display: block; width: 100%; margin: 4px 0 12px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--amber); color: #1b1f2a; font: inherit; font-size: 15.5px; font-weight: 700; text-align: left; line-height: 1.35; cursor: pointer; box-shadow: 0 6px 18px rgba(245, 181, 68, 0.35); }
.tour-ask:hover { filter: brightness(1.04); }
.tour-next.quiet { background: transparent; color: var(--muted); box-shadow: none; }