/* ── Visor home redesign (DP-122) ──────────────────────────────────────────────
   The app shell and the Plan page, restyled from scratch. Loaded LAST, after
   styles.css and the feature sheets, so it wins ties by source order; selectors
   repeat the specificity of the rules they replace rather than using !important.

   What changed and why, in one place:
   - Navigation moves to the top bar. #sidebar keeps its markup, ids and
     handlers (tests and js/core.js rely on them); above 768px it is laid out as
     a horizontal tab row inside the app bar. That frees a whole 240px column.
     Phones keep #mobile-nav exactly as before.
   - One quiet surface system: white cards on a pale canvas, one hairline, one
     radius, no nested boxes, no dashed chrome.
   - Headline figures stay figures (large number, small label, thin bar).
   - Row detail is compressed: neutral tags, plain grades, actions on hover.

   Tokens are namespaced --h-* so the rest of the app keeps its own palette.
   The styles.css rule "the 768px block stays last" is about THAT file; this
   sheet carries its own phone rules at the bottom. */

:root {
  --h-canvas:#eef1f5;
  --h-surface:#ffffff;
  --h-ink:#0f172a;
  --h-ink-2:#334155;
  --h-ink-3:#5b6a80;
  --h-ink-4:#94a3b8;
  --h-line:#e5e7eb;
  --h-line-2:#d5d9e0;
  --h-hover:#f3f5f8;
  --h-brand:#00205b;
  --h-accent:#1e4fd8;
  --h-accent-soft:#eef3fe;
  --h-accent-line:#c7d6fb;
  --h-ok:#15803d;
  --h-ok-soft:#eaf6ee;
  --h-warn:#a16207;
  --h-warn-soft:#fdf6e3;
  --h-bad:#b91c1c;
  /* DP-124/125: cards read as objects on the canvas — a firmer edge and a soft
     shadow — and hover on the canvas itself darkens rather than lightens. */
  --h-card-line:#dce1e8;
  --h-card-shadow:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.03);
  --h-accent-ring:rgba(30,79,216,.14);
  --h-canvas-hover:rgba(15,23,42,.06);
  --h-r:4px;
  --h-r-sm:3px;
  --h-ctl:34px;
  --h-gutter:40px;
  --h-max:1200px;
  --app-bar-h:56px;
  --course-browser-w:344px;
  --course-browser-rail-w:48px;
}

body { background:var(--h-canvas); color:var(--h-ink); }
#main { background:transparent; }

/* ── App bar ─────────────────────────────────────────────────────────────── */
#rice-brand { height:var(--app-bar-h); padding:0 20px; background:var(--h-surface); color:var(--h-ink);
  border-bottom:1px solid var(--h-line); }
#rice-brand .wordmark { color:var(--h-ink); font-size:16px; font-weight:700; letter-spacing:-.01em; gap:9px; }
#rice-brand .shield { width:26px; height:26px; border-radius:4px; background:var(--h-brand); color:#fff; font-size:13px; }
#rice-brand .sb-toggle-btn { display:none; }
#rice-brand :focus-visible { box-shadow:none; outline:2px solid var(--h-accent); outline-offset:2px; }
#rice-brand .notifications-bell { color:var(--h-ink-3); width:38px; height:38px; }
#rice-brand .notifications-bell:hover { background:var(--h-hover); color:var(--h-ink); }
#rice-brand .notifications-bell:focus-visible { outline-color:var(--h-accent); }
#rice-brand .mobile-settings { color:var(--h-ink-3); }

@media screen and (min-width:769px) {
  /* The rail becomes the tab row. It is positioned over the sticky app bar, so
     it scrolls with nothing and needs no JS; pointer-events pass through the
     empty stretch so the bell underneath stays clickable. */
  #sidebar, body.sb-collapsed #sidebar {
    position:fixed; top:0; left:124px; right:68px; bottom:auto; z-index:51;
    width:auto; height:var(--app-bar-h); padding:0; overflow:visible;
    display:flex; flex-direction:row; align-items:stretch;
    background:none; border:0; pointer-events:none; }
  body:has(#sec-mode-badge) #sidebar { left:206px; padding-bottom:0; }
  #sidebar > * { pointer-events:auto; }
  #sidebar .sb-section { display:flex; align-items:stretch; gap:2px; margin:0; }
  #sidebar .nav-btn, body.sb-collapsed #sidebar .nav-btn {
    width:auto; height:var(--app-bar-h); display:inline-flex; align-items:center; gap:0;
    padding:0 12px; border:0; border-bottom:2px solid transparent; border-radius:0;
    background:none; color:var(--h-ink-3); font-size:14px; font-weight:500; white-space:nowrap; }
  #sidebar .nav-btn:hover { background:none; color:var(--h-ink); }
  /* Same weight on every tab, so the row never shifts when the active tab changes. */
  #sidebar .nav-btn.active { background:none; color:var(--h-brand); border-bottom-color:var(--h-brand); }
  #sidebar .nav-btn:focus-visible { outline:2px solid var(--h-accent); outline-offset:-6px; border-radius:var(--h-r-sm); }
  #sidebar .nav-ico { display:none; }
  body.sb-collapsed #sidebar .nav-label { display:inline; }
  /* Settings sits at the far right, next to the bell, as a gear. */
  #sidebar .settings-nav { margin:0 0 0 auto; padding:0 10px; color:var(--h-ink-3); }
  #sidebar .settings-nav .nav-ico { display:inline-flex; width:auto; opacity:1; }
  #sidebar .settings-nav .nav-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  body.sb-collapsed #sidebar .settings-nav .nav-label { display:inline; }
  #sidebar .settings-nav .settings-badge { position:absolute; top:12px; right:2px; margin:0; width:14px; height:14px; font-size:10px; }

  /* The mode badge is a standing fact about the data world, so it sits beside
     the wordmark rather than floating over the content. */
  .sec-mode-badge { top:17px; left:106px; bottom:auto; right:auto; z-index:52;
    padding:3px 8px; font-size:10px; opacity:1; color:var(--h-ink-3); background:var(--h-hover);
    border:1px solid var(--h-line); }

  #layout, body.sb-collapsed #layout { grid-template-columns:minmax(0,1fr); background:none; }
  #main { grid-column:1; padding:28px var(--h-gutter) 56px; }
  body.plan-rail-active #main { padding-right:calc(var(--course-browser-rail-w) + var(--h-gutter)); }
  body.plan-rail-active.plan-rail-expanded #main { padding-right:calc(var(--course-browser-w) + var(--h-gutter)); }
  #layout ~ #site-footer, body.sb-collapsed #layout ~ #site-footer { padding-left:var(--h-gutter); }
  body.plan-rail-active #site-footer { padding-right:calc(var(--course-browser-rail-w) + var(--h-gutter)); }
  body.plan-rail-active.plan-rail-expanded #site-footer { padding-right:calc(var(--course-browser-w) + var(--h-gutter)); }
  body:has(#sec-mode-badge) #site-footer { padding-bottom:22px; }
}

/* ── Status notice ───────────────────────────────────────────────────────── */
/* DP-123: empty unless a save or migration failed, so it reads as an error. */
.private-storage-notice { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
  margin:0 0 20px; padding:9px 14px;
  background:#fdf5f5; border:1px solid #f3c9c9; border-radius:var(--h-r);
  color:#8a1c1c; font-size:13px; line-height:1.45; }
.private-storage-notice:empty { display:none; }
body.plan-rail-active #main > .private-storage-notice { max-width:var(--h-max); margin-left:auto; margin-right:auto; }

/* ── First-use account prompt (DP-140) ───────────────────────────────────── */
/* One quiet card above the view, never over it: what is true of the plan, then
   its actions, which wrap under the text on narrow screens. [hidden] until
   js/auth-ui.js has an offer to make; not printed, like the other prompts. */
.account-prompt { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin:0 0 20px; padding:12px 14px;
  background:var(--h-surface); border:1px solid var(--h-card-line); border-radius:var(--h-r);
  box-shadow:var(--h-card-shadow); color:var(--h-ink-2); font-size:13px; line-height:1.45; }
body.plan-rail-active #main > .account-prompt { max-width:var(--h-max); margin-left:auto; margin-right:auto; }
.account-prompt-text { flex:1 1 280px; min-width:0; }
.account-prompt-title { margin:0 0 2px; font-size:14px; font-weight:600; color:var(--h-ink); }
.account-prompt-body { margin:0; }
.account-prompt-note { margin:4px 0 0; color:var(--h-ink-3); }
.account-prompt-actions { display:flex; flex-wrap:wrap; gap:8px; }
.account-prompt .btn { min-height:var(--h-ctl); padding:0 12px; border-radius:var(--h-r-sm); font-size:13px; font-weight:500;
  background:var(--h-surface); border:1px solid var(--h-line-2); color:var(--h-ink); box-shadow:none; }
.account-prompt .btn:hover { background:var(--h-hover); border-color:var(--h-line-2); color:var(--h-ink); }
.account-prompt .btn.btn-primary { background:var(--h-brand); border-color:var(--h-brand); color:#fff; }
.account-prompt .btn.btn-primary:hover { background:#001640; border-color:#001640; color:#fff; }
.account-prompt .btn.btn-quiet { background:none; border-color:transparent; color:var(--h-ink-2); }
.account-prompt .btn.btn-quiet:hover { background:var(--h-hover); color:var(--h-ink); }
.account-prompt .btn[aria-disabled="true"] { opacity:.6; cursor:default; }
.account-prompt .btn:focus-visible { outline:2px solid var(--h-accent); outline-offset:2px; }
@media print { .account-prompt { display:none !important; } }

/* ── Buttons on the Plan page ────────────────────────────────────────────── */
#multiyear-view .btn, #plan-requirements-panel .btn, #semester-view .btn, #course-view .btn {
  min-height:var(--h-ctl); padding:0 12px; border-radius:var(--h-r-sm); font-size:13px; font-weight:500;
  background:var(--h-surface); border:1px solid var(--h-line-2); color:var(--h-ink); box-shadow:none; }
#multiyear-view .btn:hover, #plan-requirements-panel .btn:hover, #semester-view .btn:hover, #course-view .btn:hover { background:var(--h-hover); border-color:var(--h-line-2); color:var(--h-ink); }
#multiyear-view .btn.btn-quiet, #plan-requirements-panel .btn.btn-quiet, #semester-view .btn.btn-quiet, #course-view .btn.btn-quiet { background:none; border-color:transparent; color:var(--h-ink-2); }
#multiyear-view .btn.btn-quiet:hover, #plan-requirements-panel .btn.btn-quiet:hover, #semester-view .btn.btn-quiet:hover, #course-view .btn.btn-quiet:hover { background:var(--h-hover); color:var(--h-ink); }
#multiyear-view .btn.btn-primary, #semester-view .btn.btn-primary, #course-view .btn.btn-primary { background:var(--h-brand); border-color:var(--h-brand); color:#fff; }
#multiyear-view .btn.btn-primary:hover, #semester-view .btn.btn-primary:hover, #course-view .btn.btn-primary:hover { background:#001640; border-color:#001640; color:#fff; }
#multiyear-view .btn.btn-danger, #semester-view .btn.btn-danger, #course-view .btn.btn-danger { background:none; border-color:transparent; color:var(--h-bad); }
#multiyear-view .btn.btn-sm, #plan-requirements-panel .btn.btn-sm, #semester-view .btn.btn-sm, #course-view .btn.btn-sm { min-height:28px; padding:0 9px; font-size:12px; }
#multiyear-view .btn:focus-visible, #plan-requirements-panel .btn:focus-visible, #semester-view .btn:focus-visible, #course-view .btn:focus-visible { outline:2px solid var(--h-accent); outline-offset:2px; }

/* ── Page frame and title ────────────────────────────────────────────────── */
#multiyear-view { max-width:var(--h-max); margin:0 auto; }
#multiyear-view > .toolbar { min-height:0; margin:0 0 14px; padding:0; border:0; align-items:center; }
#multiyear-view > .toolbar h1 { font-size:26px; font-weight:650; letter-spacing:-.022em; color:var(--h-ink); line-height:1.2; }

/* ── Projected completion: one card, figures first ───────────────────────── */
#multiyear-view .my-projected-header { margin:0; }
#multiyear-view .my-projected-toggle { min-height:0; padding:14px 18px 0; border:1px solid var(--h-card-line); border-bottom:0;
  border-radius:var(--h-r) var(--h-r) 0 0; background:var(--h-surface); }
#multiyear-view .my-projected-toggle:hover { background:var(--h-surface); }
#multiyear-view .my-projected-title { font-size:12px; font-weight:600; color:var(--h-ink-3); letter-spacing:.02em; }
#multiyear-view .my-projected-expand { padding:3px 6px 3px 8px; border-radius:var(--h-r-sm); font-size:12px; color:var(--h-ink-3); background:none; }
#multiyear-view .my-projected-toggle:hover .my-projected-expand { background:var(--h-hover); color:var(--h-ink); }
#multiyear-view .my-summary-row { margin:0 0 28px; }
#multiyear-view .my-summary-row .my-projected-block { padding:10px 18px 16px; border:1px solid var(--h-card-line); border-top:0;
  border-radius:0 0 var(--h-r) var(--h-r); background:var(--h-surface); box-shadow:var(--h-card-shadow); }
#multiyear-view .headline-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px 32px; align-items:start; }
/* The label is a bare text node (tests pin "</span>credits"), so the figure is
   laid out as a grid: value, label and bar fall into rows by source order. */
#multiyear-view .headline { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; min-width:0;
  font-size:12.5px; font-weight:500; color:var(--h-ink-3); white-space:normal; line-height:1.35; }
/* "BS in Electrical and Computer Engineering · Photonics, …" stops at three lines. */
#multiyear-view .headline-label { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; overflow-wrap:anywhere; }
#multiyear-view .headline-val { font-size:22px; font-weight:650; letter-spacing:-.02em; color:var(--h-ink); line-height:1.15; }
#multiyear-view .headline-val.done, #multiyear-view .headline-val.warn { color:var(--h-ink); }
#multiyear-view .headline-bar { display:block; height:4px; margin-top:5px; border-radius:1px; background:#eceff3; overflow:hidden; }
#multiyear-view .headline-bar > span { display:block; height:100%; border-radius:1px; background:var(--h-brand); }
#multiyear-view .headline-val.done ~ .headline-bar > span { background:var(--h-ok); }
#multiyear-view .proj-detail.open { margin-top:16px; border-top:1px solid var(--h-line); }
#multiyear-view .proj-group + .proj-group { border-top-color:var(--h-line); }
#multiyear-view .proj-group-label { color:var(--h-ink-3); letter-spacing:.06em; }
#multiyear-view .proj-row-val.done { color:var(--h-ok); }
#multiyear-view .proj-row-val.warn { color:var(--h-warn); }

/* ── Toolbar: one row, no container box ──────────────────────────────────── */
#multiyear-view .plan-years-container { padding:0; background:none; border:0; border-radius:0; }
#multiyear-view .my-plan-actions { gap:8px; margin:0 0 6px; padding:0; background:none; border:0; border-radius:0; }
#my-plan-actions > .btn { background:var(--h-surface); border-color:var(--h-line-2); }
#my-plan-actions > .btn:hover, #my-plan-actions > .btn[aria-expanded="true"] { background:var(--h-hover); border-color:var(--h-line-2); }
#my-plan-actions .btn { min-height:var(--h-ctl); font-size:13px; }
#my-plan-actions .plan-requirements-btn svg { color:var(--h-ink-3); }
#my-plan-actions .plan-requirements-btn[aria-expanded="true"] { background:var(--h-accent-soft); border-color:var(--h-accent-line); color:var(--h-brand); }
#my-plan-actions .plan-requirements-btn[aria-expanded="true"] svg { color:var(--h-brand); }
#my-plan-actions .plan-grad-control { min-height:var(--h-ctl); gap:8px; font-size:13px; color:var(--h-ink-3); }
#my-plan-actions .plan-grad-control select { min-height:var(--h-ctl); padding:0 28px 0 10px; border:1px solid var(--h-line-2); border-radius:var(--h-r-sm);
  background-color:var(--h-surface); color:var(--h-ink); font-size:13px; font-weight:600; }
#my-plan-actions #plan-menu-btn { width:var(--h-ctl); min-width:var(--h-ctl); height:var(--h-ctl); border:1px solid transparent; background:none; color:var(--h-ink-3); font-size:18px; }
#my-plan-actions #plan-menu-btn:hover, #my-plan-actions #plan-menu-btn[aria-expanded="true"] { background:var(--h-canvas-hover); color:var(--h-ink); }
#multiyear-view .btn-menu-caret, #semester-view .btn-menu-caret { display:inline-block; width:7px; height:7px; margin:0 1px 3px 9px; font-size:0; opacity:.55;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
#multiyear-view .plan-bulk-group { gap:6px; }
#multiyear-view .plan-notice { margin:8px 0 0; font-size:13px; color:var(--h-ink-2); }

/* Pending placement: one clear strip above the grid. */
#pending-add-bar { margin:14px 0 0; padding:8px 8px 8px 14px; background:var(--h-accent-soft); border:1px solid var(--h-accent-line);
  border-radius:var(--h-r); color:var(--h-brand); font-size:13px; }
#pending-add-bar strong { font-weight:650; }

/* ── Academic years ──────────────────────────────────────────────────────── */
#multiyear-view .plan-year { margin-top:26px; }
#multiyear-view .plan-year-head { margin:0 0 10px; padding:0; border:0; }
#multiyear-view .plan-year-toggle { gap:10px; min-height:32px; padding:4px 6px 4px 2px; margin-left:-2px; border-radius:var(--h-r-sm); background:none; }
#multiyear-view .plan-year-toggle:hover { background:var(--h-canvas-hover); }
#multiyear-view .plan-year-label { font-size:15px; font-weight:650; letter-spacing:-.01em; color:var(--h-ink); font-variant-numeric:tabular-nums; }
#multiyear-view .plan-year-past .plan-year-label { color:var(--h-ink-2); }
#multiyear-view .plan-year-sub { font-size:13px; color:var(--h-ink-3); }
#multiyear-view .plan-year-meta { font-size:12.5px; color:var(--h-ink-3); }
#multiyear-view .plan-year-chevron { color:var(--h-ink-4); }
#multiyear-view .plan-year-terms { gap:16px; }
/* A collapsed year keeps its plain heading and drops the space below it: no
   heading margin, and the next item follows 12px behind instead of 58px. The
   grid's row gap is fixed (22px, 18px on phones), so the follower pulls itself up. */
#multiyear-view .plan-year:has(> .plan-year-terms.is-hidden) .plan-year-head { margin:0; }
#multiyear-view .plan-year:has(> .plan-year-terms.is-hidden) + * { margin-top:-10px; }

/* ── Semester cards ──────────────────────────────────────────────────────── */
#multiyear-view .sem-plan-card { position:relative; background:var(--h-surface); border:1px solid var(--h-card-line); border-radius:var(--h-r);
  box-shadow:var(--h-card-shadow); transition:border-color .15s, box-shadow .15s; }
#multiyear-view .sem-plan-card:hover { box-shadow:0 2px 8px rgba(15,23,42,.08); }
#multiyear-view .sem-plan-header { min-height:0; padding:12px 12px 8px 16px; background:none; border-bottom:0; }
#multiyear-view .sem-plan-card.sem-plan-current { border-color:var(--h-accent-line); box-shadow:0 0 0 3px var(--h-accent-ring); }
#multiyear-view .sem-plan-card.sem-plan-current .sem-plan-header,
#multiyear-view .sem-plan-card.sem-plan-past .sem-plan-header { background:none; }
#multiyear-view .sem-plan-title { font-size:15px; font-weight:650; letter-spacing:-.01em; color:var(--h-ink); min-height:28px; }
#multiyear-view .sem-plan-card.sem-plan-past .sem-plan-title { color:var(--h-ink); }
#multiyear-view .sem-plan-title-chev { color:var(--h-ink-4); font-size:18px; margin-left:4px; transition:transform .15s, color .15s; }
#multiyear-view .sem-plan-title:hover .sem-plan-title-chev { color:var(--h-ink); transform:translateX(2px); }
#multiyear-view .sem-plan-title:hover::after { background:none; box-shadow:none; }
#multiyear-view .sem-plan-title:focus-visible::after { outline:2px solid var(--h-accent); outline-offset:-2px; border-radius:var(--h-r); }
#multiyear-view .sem-plan-card.sem-plan-current .sem-plan-title::before { content:"Now"; order:2; margin:0 0 0 8px; padding:2px 7px; border-radius:var(--radius-sm);
  background:var(--h-accent-soft); color:var(--h-accent); font-size:11px; font-weight:600; letter-spacing:.01em; }
#multiyear-view .sem-plan-title { display:inline-flex; align-items:center; }
#multiyear-view .sem-plan-title-chev { order:1; }
#multiyear-view .sem-status-dot { display:none; }
#multiyear-view .sem-plan-meta { gap:6px; font-size:12.5px; color:var(--h-ink-3); }
#multiyear-view .sem-plan-meta .sem-cr { color:var(--h-ink-2); font-weight:600; }
#multiyear-view .sem-plan-meta .sem-cr-over { color:var(--h-bad); font-weight:650; }
#multiyear-view .sem-plan-meta > span + span::before { content:"·"; margin-right:6px; color:var(--h-ink-4); }
#multiyear-view .sem-conflict { color:var(--h-warn); font-size:12px; font-weight:600; }
#multiyear-view .sem-plan-header .sem-menu-btn { min-width:28px; min-height:28px; margin-left:2px; border-radius:var(--h-r-sm); font-size:16px; color:var(--h-ink-4); background:none; border:0; }
#multiyear-view .sem-plan-header .sem-menu-btn:hover,
#multiyear-view .sem-plan-header .sem-menu-btn[aria-expanded="true"] { background:var(--h-hover); color:var(--h-ink); }
#multiyear-view .sem-plan-actions-line { margin-top:6px; }
#multiyear-view .sem-sug-count { font-size:12px; color:var(--h-accent); }
#multiyear-view .sem-plan-body { padding:0 8px 8px; }
/* The load bar is redundant with the credit figure beside the title, which
   already turns red above 18. Only an overload keeps a bar, as a red foot line. */
#multiyear-view .sem-credits-bar { display:none; }
#multiyear-view .sem-credits-bar:has(.over) { display:block; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--h-bad); }

/* Rows (DP-71, DP-94): the code, then the whole title — never clipped — with its
   tags, grade, credits and any prerequisite note right after it, and the row's
   actions at its right end. The owner rejected "3cr" far to the right of a title
   and a warning forced onto a line of its own. The code is a column in the row's
   left padding, so a row that wraps in a narrow card continues under the title;
   everything sits on one 24px line, and a taller control reaches into the
   padding instead of pushing the line apart, which keeps the code level. */
#multiyear-view .sem-plan-body .planned-course-row { position:relative; flex-wrap:wrap; align-items:center; gap:2px 8px; min-height:40px; padding:8px 8px 8px 82px;
  border-radius:var(--h-r-sm); font-size:13px; }
#multiyear-view .planned-course-row:hover { background:var(--h-hover); }
#multiyear-view .planned-course-row.is-past-row { background:none; }
#multiyear-view .planned-course-row.is-past-row:hover { background:var(--h-hover); }
#multiyear-view .planned-course-code { min-width:66px; font-family:var(--font-sans); font-size:12.5px; font-weight:650; letter-spacing:.01em; color:var(--h-ink); font-variant-numeric:tabular-nums; }
#multiyear-view .sem-plan-body .planned-course-code { position:absolute; left:8px; top:8px; display:flex; align-items:center; height:24px; min-height:0; }
#multiyear-view .sem-plan-body .planned-course-name { flex:0 1 auto; min-width:0; color:var(--h-ink-2); line-height:1.45; }
#multiyear-view .row-course-link { color:inherit; }
#multiyear-view .row-course-link:hover { color:var(--h-accent); text-decoration:none; }
#multiyear-view .row-tag { padding:1px 5px; border-radius:var(--radius-sm); background:#f1f3f6; color:var(--h-ink-3); font-size:10.5px; font-weight:600; letter-spacing:.02em; }
#multiyear-view .pb-ad-tag.row-tag { background:#f6f0fb; color:#7c3a9e; }
#multiyear-view .pb-dist-plus { display:none; }
#multiyear-view .grade-pill, #multiyear-view .grade-pill[data-grade] { min-width:0; margin:0; padding:0; border-radius:0; background:none; color:var(--h-ink-2);
  font-size:12.5px; font-weight:600; }
#multiyear-view .grade-pill[data-grade="F"] { color:var(--h-bad); }
#multiyear-view .planned-course-cr { font-size:12.5px; color:var(--h-ink-3); }
#multiyear-view .past-badge { font-size:11px; color:var(--h-ink-3); background:none; }
#multiyear-view .planned-course-del { min-width:26px; min-height:26px; border-radius:var(--h-r-sm); color:var(--h-ink-4); }
#multiyear-view .sem-plan-body .planned-course-del, #multiyear-view .sem-plan-body .sug-row-actions { margin:-1px 0 -1px auto; }
#multiyear-view .planned-course-del:hover { background:var(--h-surface); color:var(--h-ink); }
#multiyear-view .planned-course-row:hover .planned-course-del,
#multiyear-view .planned-course-row:focus-within .planned-course-del { opacity:1; }
/* A row moves by dragging the row itself (a long press with touch). The reorder
   handle is the keyboard's way in, so it shows only while it has keyboard focus. */
#multiyear-view .sem-plan-body .plan-order-handle { position:absolute; right:4px; top:20px; margin:0; transform:translateY(-50%); }
#multiyear-view .plan-order-handle { color:var(--h-ink-4); background:none; }
#multiyear-view .planned-course-row:hover .plan-order-handle { color:var(--h-ink-2); }
/* With a fine pointer the reorder handle lives in the row's left margin and the
   remove control over its right end, shown on hover or focus, so planned and
   logged rows share one code column and an invisible control never holds a line
   of its own open in a narrow card. A logged course's edit shows only with
   keyboard focus (the mouse edits it from Degree Progress), clear of its remove. */
@media (hover:hover) and (pointer:fine) {
  #multiyear-view .sem-plan-body .planned-course-row { min-height:34px; padding:5px 8px 5px 82px; }
  #multiyear-view .sem-plan-body .planned-course-code { top:5px; }
  #multiyear-view .sem-plan-body .planned-course-del.op45 { opacity:0; pointer-events:none; }
  #multiyear-view .sem-plan-body .planned-course-del.op45:focus-visible { opacity:1; pointer-events:auto; }
  #multiyear-view .sem-plan-body .plan-order-handle { position:absolute; left:-9px; right:auto; top:17px; margin:0; transform:translateY(-50%);
    min-width:16px; width:16px; min-height:24px; padding:0; border:0; font-size:11px; opacity:0; transition:opacity .12s; }
  #multiyear-view .sem-plan-body .plan-order-handle:focus-visible { opacity:1; background:none; border:0; }
  #multiyear-view .sem-plan-body .planned-course-del { position:absolute; right:4px; top:17px; margin:0; transform:translateY(-50%); background:var(--h-hover); }
  #multiyear-view .sem-plan-body .planned-course-edit { right:32px; }
}
/* A logged row's edit and remove wrap together, never one without the other. */
#multiyear-view .sem-plan-body .logged-row-actions { display:inline-flex; flex-shrink:0; order:3; gap:2px; margin-left:auto; }
#multiyear-view .sem-plan-body .planned-course-cr ~ .logged-row-actions { margin-left:0; }
#multiyear-view .sem-plan-body .logged-row-actions > .planned-course-del { margin:-1px 0; }
@media (hover:hover) and (pointer:fine) {
  #multiyear-view .sem-plan-body .logged-row-actions { display:contents; }
  #multiyear-view .sem-plan-body .logged-row-actions > .planned-course-del { margin:0; }
}
#multiyear-view .planned-course-remove:hover { color:var(--h-bad); }
/* A closed prerequisite note stays on the row; opened, its explanation takes the
   line under the title and the row's action stays where it was. */
#multiyear-view .sem-plan-body .row-prereq-warn { flex:0 1 auto; min-width:0; margin:0; font-size:12px; }
#multiyear-view .sem-plan-body .row-prereq-warn[open] { order:8; flex:1 1 100%; margin:0 0 3px; }
#multiyear-view .row-prereq-need { color:var(--h-warn); }

/* Suggestions read as proposals: tinted, never bordered like chrome. */
#multiyear-view .planned-course-row.is-suggested { margin:2px 0; background:var(--h-accent-soft); border-left:0; }
#multiyear-view .planned-course-row.is-suggested .planned-course-code { color:var(--h-accent); font-weight:600; }
#multiyear-view .sug-act { min-width:26px; min-height:26px; border-radius:var(--h-r-sm); color:var(--h-ink-3); }
#multiyear-view .sug-act:hover { background:var(--h-surface); }

#multiyear-view .sug-alts-btn { min-height:26px; padding:0 6px 0 8px; gap:6px; border:0; border-radius:var(--h-r-sm); background:none; color:var(--h-ink-3); font-size:12px; font-weight:500; }
#multiyear-view .sug-alts-btn:hover, #multiyear-view .sug-alts-btn[aria-expanded="true"] { background:var(--h-surface); color:var(--h-ink); border:0; }
#multiyear-view .sug-alts-chevron { width:6px; height:6px; opacity:.7; }

/* "+ add course" is a quiet line, not a dashed box. */
#multiyear-view .add-planned-btn { display:block; width:auto; min-height:32px; margin:4px 0 0; padding:0 8px; border:0; border-radius:var(--h-r-sm);
  background:none; color:var(--h-ink-3); font-size:13px; text-align:left; }
#multiyear-view .add-planned-btn:hover { background:var(--h-hover); color:var(--h-ink); border:0; }

/* Placement targets while a course is waiting for a term. */
#multiyear-view .sem-plan-card.pending-pick-target { border-color:var(--h-accent); background:var(--h-surface); box-shadow:0 0 0 3px var(--h-accent-ring); }
#multiyear-view .pending-pick-target .sem-plan-body { background:none; }
#multiyear-view .pending-add-hint { background:rgba(238,243,254,.5); color:var(--h-brand); }
#multiyear-view .pending-add-hint span { padding:6px 14px; border:0; border-radius:var(--h-r-sm); background:var(--h-brand); color:#fff;
  font-size:13px; font-weight:600; box-shadow:0 2px 8px rgba(0,32,91,.18); }
#multiyear-view .pending-add-hint:hover span { background:#001640; }
#multiyear-view .sem-plan-body.plan-drop-target.plan-drop-active { outline:2px dashed var(--h-accent); outline-offset:-2px; background:var(--h-accent-soft); border-radius:var(--h-r-sm); }
#multiyear-view .sem-plan-card.sem-plan-revealed { border-color:var(--h-accent); box-shadow:0 0 0 4px var(--h-accent-ring); }

/* Add semester: one slim line under the last year. */
#multiyear-view .plan-add-row { grid-template-columns:minmax(0,1fr); margin-top:18px; }
#multiyear-view .sem-add-card { min-height:0; border:1px dashed var(--h-line-2); border-radius:var(--h-r); background:none; box-shadow:none; }
#multiyear-view .sem-add-card:hover { border-color:var(--h-ink-4); background:var(--h-surface); }
#multiyear-view .sem-add-card .sem-add-btn { width:100%; min-height:44px; border:0; color:var(--h-ink-3); font-size:13px; }
#multiyear-view .sem-add-card:hover .sem-add-btn { color:var(--h-ink); background:none; }

/* ── Course browser (right) ──────────────────────────────────────────────── */
.plan-requirements-sidebar { padding:0 16px max(14px, env(safe-area-inset-bottom, 0px)); border-left:1px solid var(--h-line); background:var(--h-surface); }
.plan-requirements-heading { margin:0 -16px 12px; padding:12px 10px 12px 16px; border-bottom:0; background:none; }
.plan-requirements-heading h2 { font-size:15px; font-weight:650; letter-spacing:-.01em; color:var(--h-ink); }
.plan-requirements-close { min-width:32px; min-height:32px; border-radius:var(--h-r-sm); font-size:20px; color:var(--h-ink-3); }
.plan-requirements-search-wrap { margin-bottom:8px; }
#plan-requirements-search { min-height:38px; padding:0 38px 0 34px; border:1px solid var(--h-line-2); border-radius:var(--h-r-sm); font-size:13px; color:var(--h-ink);
  background:var(--h-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 11px center/15px no-repeat; }
#plan-requirements-search:focus { outline:none; border-color:var(--h-accent); box-shadow:0 0 0 3px var(--h-accent-soft); }
.plan-browser-type, .plan-requirements-sidebar .plan-browser-type { min-height:34px; margin:0 0 12px; padding:0 30px 0 10px; border:1px solid var(--h-line-2); border-radius:var(--h-r-sm);
  background-color:var(--h-surface); color:var(--h-ink); font-size:13px; font-weight:500; }
#plan-requirements-list { scrollbar-gutter:auto; }
.plan-browser-actions { margin:0 0 4px; font-size:12px; color:var(--h-ink-3); }
#plan-requirements-selection { font-size:12.5px; color:var(--h-ink-2); }
.plan-browser-row { position:relative; padding:0; border-bottom:1px solid #f0f2f5; }
.plan-browser-row:last-of-type { border-bottom:0; }
.plan-requirements-sidebar .plan-browser-course { min-height:52px; padding:8px 40px 8px 2px; border:0; border-radius:var(--h-r-sm); gap:2px 6px; align-items:flex-start; }
.plan-requirements-sidebar .plan-browser-course:hover { background:var(--h-hover); }
.plan-requirements-sidebar .plan-browser-course:disabled { cursor:default; opacity:.6; }
.plan-requirements-sidebar .plan-browser-course:disabled:hover { background:none; }
.plan-browser-course .plan-drag-handle { flex:0 0 18px; width:18px; min-height:20px; color:#cbd2dc; font-size:12px; }
.plan-browser-course:hover .plan-drag-handle { color:var(--h-ink-3); }
.plan-requirements-sidebar .req-course-main { display:grid; gap:1px; font-size:13px; line-height:1.4; }
.plan-requirements-sidebar .req-course-main > span:not(.req-course-code-line) { color:var(--h-ink-2); white-space:normal; }
.plan-requirements-sidebar .req-course-code-line { display:flex; align-items:baseline; gap:8px; }
.plan-requirements-sidebar .req-course-code-line strong { font-weight:650; color:var(--h-ink); letter-spacing:.01em; }
.plan-browser-meta { font-size:12px; color:var(--h-ink-3); }
.plan-browser-warning { flex:1 1 100%; padding-left:24px; font-size:12px; color:var(--h-warn); }
/* "Why this course" becomes an info button on the row's right edge; its answer
   still opens in place underneath, so nothing is lost. */
.plan-browser-fit { margin:0; font-size:12px; color:var(--h-ink-2); }
.plan-browser-fit > summary { position:absolute; top:10px; right:4px; width:28px; height:28px; min-height:0; padding:0;
  display:flex; align-items:center; justify-content:center; border-radius:var(--h-r-sm); color:transparent; font-size:0; list-style:none; }
.plan-browser-fit > summary::-webkit-details-marker { display:none; }
.plan-browser-fit > summary::before { content:"i"; display:grid; place-items:center; width:16px; height:16px; border:1.5px solid var(--h-ink-4); border-radius:50%;
  color:var(--h-ink-3); font:italic 700 10px/1 Georgia, serif; }
.plan-browser-fit > summary:hover { background:var(--h-hover); }
.plan-browser-fit > summary:hover::before, .plan-browser-fit[open] > summary::before { border-color:var(--h-accent); color:var(--h-accent); }
.plan-browser-fit > summary:focus-visible { outline:2px solid var(--h-accent); outline-offset:0; }
.plan-browser-fit[open] { margin:0 0 10px 24px; padding:10px 12px; border-radius:var(--h-r-sm); background:#f8f9fb; }
.plan-browser-fit ul { margin:0; padding-left:16px; }
.plan-browser-fit li + li { margin-top:4px; }
.plan-browser-fit > :not(summary) { margin:4px 0; line-height:1.5; }
#plan-requirements-list > .btn { width:100%; margin-top:8px; justify-content:center; }
.plan-requirements-rail { width:var(--course-browser-rail-w); padding:10px 4px; border-left:1px solid var(--h-line); background:var(--h-surface); }
#multiyear-view #plan-requirements-expand.btn { width:40px; min-height:40px; border-radius:var(--h-r-sm); font-size:22px; color:var(--h-ink-3); }
#multiyear-view #plan-requirements-expand.btn:hover { background:var(--h-hover); color:var(--h-ink); }

/* ── Semester Focus (DP-124) ─────────────────────────────────────────────────
   One term on a page: a header that says which term and steps to its
   neighbours, then cards on the canvas. The main column is the term and what to
   add to it; the side column is reference (what the degree still needs, and
   saved courses). Card titles are sentence case: the owner found the uppercase
   eyebrow heads and hairline-only separation made the blocks bleed together. */
#semester-view { max-width:var(--h-max); margin:0 auto; padding-bottom:48px; }
/* Two rows. The first is navigation: the back link, and at the far end the steps
   to the neighbouring terms, where they stay put however long the term's name
   is. The second is the term, flush with the back link, and its actions.
   .toolbar-left is display:contents, so its children join the grid. (6.0.6: the
   steps used to be a boxed pair in front of the name, which gave the header
   three left edges.) */
#semester-view > .sem-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"back step" "head actions";
  align-items:start; gap:8px 16px; min-height:0; margin:0 0 20px; padding:0; border:0; }
#semester-view .sem-toolbar .toolbar-left { display:contents; }
#semester-view .sem-toolbar .toolbar-right { grid-area:actions; margin-top:-3px; }
#semester-view .sem-toolbar .btn-back { grid-area:back; justify-self:start; min-height:28px; margin-left:-6px; padding:0 8px 0 6px; border:0; border-radius:var(--h-r-sm);
  background:none; box-shadow:none; color:var(--h-ink-3); font-size:13px; font-weight:500; }
#semester-view .sem-toolbar .btn-back:hover { background:var(--h-canvas-hover); color:var(--h-ink); }
#semester-view .sem-heading { grid-area:head; display:grid; grid-template-columns:auto auto; grid-template-areas:"title now" "sub sub";
  align-items:center; justify-content:start; column-gap:10px; row-gap:2px; min-width:0; }
/* Quiet like the back link: no box, a hover wash, the edge of the ⋯ below. */
#semester-view .sem-step { grid-area:step; justify-self:end; display:flex; gap:2px; }
#semester-view .sem-step-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0;
  border:0; border-radius:var(--h-r-sm); background:none; color:var(--h-ink-3); font-size:0; cursor:pointer; }
#semester-view .sem-step-btn::before { content:""; width:7px; height:7px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateX(1.5px) rotate(45deg); }
#semester-view #sem-next-btn::before { transform:translateX(-1.5px) rotate(-135deg); }
#semester-view .sem-step-btn:hover:not(:disabled) { background:var(--h-canvas-hover); color:var(--h-ink); }
#semester-view .sem-step-btn:disabled { color:var(--h-ink-4); opacity:.5; cursor:default; }
#semester-view .sem-step-btn:focus-visible { outline:2px solid var(--h-accent); outline-offset:-2px; }
#semester-view #sem-title { grid-area:title; margin:0; font-size:24px; font-weight:650; letter-spacing:-.02em; line-height:1.2; color:var(--h-ink); }
#semester-view #sem-sub { grid-area:sub; margin:0; font-size:13px; color:var(--h-ink-3); }
#semester-view #sem-sub:empty { display:none; }
/* The Plan card's Now tag, tinted a step deeper: --h-accent-soft is all but the
   canvas colour, and an outline read as a button. */
#semester-view .sem-now-chip { grid-area:now; padding:2px 7px; border-radius:var(--radius-sm); background:rgba(30,79,216,.1);
  color:var(--h-accent); font-size:11px; font-weight:600; letter-spacing:.01em; line-height:16px; }
#semester-view .sem-toolbar .toolbar-right { gap:8px; }
#semester-view #sem-menu-btn { width:var(--h-ctl); min-width:var(--h-ctl); height:var(--h-ctl); padding:0; border:1px solid transparent;
  background:none; color:var(--h-ink-3); font-size:18px; }
#semester-view #sem-menu-btn:hover, #semester-view #sem-menu-btn[aria-expanded="true"] { background:var(--h-canvas-hover); color:var(--h-ink); }

/* Two columns of cards; the side column follows the main one below 1080px. */
#semester-view .sem-focus { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px); align-items:start; gap:20px; margin:0; }
#semester-view .sem-focus > * { margin-top:0; }
#semester-view .sem-main, #semester-view .sem-side { display:flex; flex-direction:column; gap:20px; min-width:0; }
/* No display here: #sem-saved:empty and .sem-reqs:empty must still take no room. */
#semester-view .sem-card { padding:14px 16px 12px; background:var(--h-surface); border:1px solid var(--h-card-line);
  border-radius:var(--h-r); box-shadow:var(--h-card-shadow); }
#semester-view .sem-block-head { align-items:center; gap:4px 12px; min-height:28px; margin:0; padding:0 0 10px; border:0; }
#semester-view .sem-block-title { font-size:14px; font-weight:650; letter-spacing:-.005em; text-transform:none; color:var(--h-ink); }
#semester-view .sem-block-meta { align-items:center; gap:10px; font-size:12.5px; color:var(--h-ink-3); }
#semester-view .sem-credits { font-size:12.5px; font-weight:600; color:var(--h-ink-2); }
#semester-view .sem-credits.sem-credits-full { color:var(--h-ok); }
#semester-view .sem-credits.sem-credits-over { color:var(--h-bad); }
#semester-view .sem-load { height:3px; margin:0 0 8px; border-radius:1px; background:#eceff3; overflow:hidden; }
#semester-view .sem-load-fill { display:block; width:0; height:100%; border-radius:1px; background:var(--h-brand); transition:width .3s; }
#semester-view .sem-load.is-full .sem-load-fill { background:var(--h-ok); }
#semester-view .sem-load.is-over .sem-load-fill { background:var(--h-bad); }
#semester-view .sem-empty { padding:14px 2px 6px; font-size:13.5px; color:var(--h-ink-2); }
#semester-view .sem-empty p { margin:0 0 2px; }
#semester-view .sem-empty .sem-empty-hint { color:var(--h-ink-3); font-size:13px; }
#semester-view .sem-empty-link { color:var(--h-accent); }

/* Rows (DP-94): the code, then the title with the facts about the course right
   after it (tags, grade, credits, a prerequisite note), and only the row's action
   at the right edge. "3cr" far to the right of its title and a warning forced
   onto a line of its own were the owner's complaint; the hairline between rows
   keeps a long list scannable instead.
   The code is a column of its own in the row's left padding, so when a narrow
   row wraps, its second line starts under the title rather than under the code.
   Everything sits on one 24px line; a control taller than that reaches into
   the padding instead of pushing the line apart, which keeps the code level
   with the title however the row wraps. */
#semester-view .sem-course-item { border-top:1px solid var(--h-line); }
#semester-view .sem-course-item:first-child { border-top:0; }
#semester-view #sem-rows .planned-course-row, #semester-view #sem-pending .planned-course-row {
  position:relative; flex-wrap:wrap; align-items:center; gap:4px 10px; min-height:40px; padding:8px 8px 8px 94px; border-radius:var(--h-r-sm); font-size:13.5px; }
#semester-view .planned-course-row:hover { background:var(--h-hover); }
#semester-view .planned-course-row.is-past-row { background:none; }
#semester-view .planned-course-row.is-past-row:hover { background:var(--h-hover); }
#semester-view #sem-rows .planned-course-code, #semester-view #sem-pending .planned-course-code { position:absolute; left:8px; top:8px;
  display:flex; align-items:center; height:24px; min-height:0; min-width:76px; font-family:var(--font-sans);
  font-size:13px; font-weight:650; letter-spacing:.01em; color:var(--h-ink); font-variant-numeric:tabular-nums; }
/* A long title wraps inside itself; the facts follow it and wrap after it. */
#semester-view #sem-rows .planned-course-name, #semester-view #sem-pending .planned-course-name { flex:0 1 auto; order:0; min-width:0;
  color:var(--h-ink-2); font-size:13.5px; line-height:1.45; }
#semester-view .row-course-link { color:inherit; }
#semester-view .row-course-link:hover { color:var(--h-accent); text-decoration:none; }
#semester-view .row-tag { padding:1px 5px; border-radius:var(--radius-sm); background:#f1f3f6; color:var(--h-ink-3); font-size:10.5px; font-weight:600; letter-spacing:.02em; }
#semester-view .pb-ad-tag.row-tag { background:#f6f0fb; color:#7c3a9e; }
#semester-view .pb-dist-plus { display:none; }
#semester-view .grade-pill, #semester-view .grade-pill[data-grade] { min-width:0; margin:0; padding:0; border-radius:0; background:none;
  color:var(--h-ink-2); font-size:13px; font-weight:600; }
#semester-view .grade-pill[data-grade="F"] { color:var(--h-bad); }
#semester-view #sem-rows .planned-course-cr, #semester-view #sem-pending .planned-course-cr { font-size:12.5px; color:var(--h-ink-3); }
#semester-view #sem-rows .planned-course-del { margin:-2px 0 -2px auto; min-height:28px; padding:0 8px; border-radius:var(--h-r-sm); color:var(--h-ink-3); font-size:12.5px; }
#semester-view #sem-rows .planned-course-del:hover { background:var(--h-surface); color:var(--h-bad); }
#semester-view #sem-rows .row-prereq-warn, #semester-view #sem-pending .row-prereq-warn { flex:0 1 auto; min-width:0; margin:0; font-size:12.5px; }
/* Opened, the note's explanation needs the width, so it takes the line under the
   title and the row's action stays where it was. */
#semester-view #sem-rows .row-prereq-warn[open], #semester-view #sem-pending .row-prereq-warn[open] { order:8; flex:1 1 100%; margin:0 0 4px; }
#semester-view .row-prereq-need { color:var(--h-warn); }
/* A row moves by a long press with touch; the reorder handle sits at the row's
   top-right corner and shows only with keyboard focus. */
#semester-view .plan-order-handle { color:var(--h-ink-4); background:none; }
#semester-view #sem-rows .plan-order-handle { position:absolute; right:4px; top:20px; margin:0; transform:translateY(-50%); }
#semester-view .plan-drag-handle.spacer { display:none; }
@media (hover:hover) and (pointer:fine) {
  /* Remove waits over the row's right end, so in a narrow window it never holds
     a line of its own open while it is invisible. */
  #semester-view #sem-rows .planned-course-del { position:absolute; right:6px; top:20px; margin:0; transform:translateY(-50%); background:var(--h-hover); opacity:0; }
  #semester-view #sem-rows .planned-course-row:hover .planned-course-del,
  #semester-view #sem-rows .planned-course-row:focus-within .planned-course-del { opacity:1; }
  /* The reorder handle waits in the card's padding, so every code starts at one x. */
  #semester-view #sem-rows .plan-order-row { padding-right:8px; }
  #semester-view #sem-rows .plan-order-handle { position:absolute; left:-13px; right:auto; top:20px; margin:0; transform:translateY(-50%);
    width:14px; min-width:14px; min-height:24px; padding:0; border:0; font-size:11px; opacity:0; transition:opacity .12s; }
  #semester-view #sem-rows .plan-order-handle:focus-visible { opacity:1; background:none; border:0; color:var(--h-ink-2); }
}

/* Autofill's proposals: one tinted panel under the term's courses, headed by
   the count and the two batch answers, so they read as a group to review. */
#semester-view .sem-sug-line:not(:empty) { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 12px;
  margin:12px 0 0; padding:8px 8px 8px 12px; background:var(--h-accent-soft); border:1px solid var(--h-accent-line); border-bottom:0;
  border-radius:var(--h-r) var(--h-r) 0 0; }
#semester-view .sem-sug-count { font-size:13px; font-weight:600; color:var(--h-brand); }
#semester-view .sem-sug-actions { display:inline-flex; flex-wrap:wrap; gap:6px; }
#semester-view #sem-pending:not(:empty) { padding:0 4px 4px; background:var(--h-accent-soft); border:1px solid var(--h-accent-line); border-top:0;
  border-radius:0 0 var(--h-r) var(--h-r); }
#semester-view #sem-pending .sem-course-item { border-top-color:var(--h-accent-line); background:none; box-shadow:none; }
#semester-view #sem-pending .planned-course-row.is-suggested { margin:0; background:none; border:0; }
#semester-view #sem-pending .planned-course-row.is-suggested:hover { background:rgba(255,255,255,.55); }
#semester-view #sem-pending .planned-course-code { color:var(--h-brand); }
#semester-view #sem-pending .sug-row-actions { margin:-2px 0 -2px auto; gap:6px; }
#semester-view .sug-act { width:auto; min-width:0; min-height:28px; padding:0 10px; border-radius:var(--h-r-sm); font-family:var(--font-sans); font-size:12.5px; font-weight:500; }
#semester-view .sug-act::after { content:none; }
#semester-view .sug-act-accept { background:var(--h-surface); border:1px solid var(--h-line-2); color:var(--h-ink); }
#semester-view .sug-act-accept:hover { background:var(--h-hover); color:var(--h-ink); }
#semester-view .sug-act-dismiss { background:none; border:1px solid transparent; color:var(--h-ink-3); }
#semester-view .sug-act-dismiss:hover { background:var(--h-canvas-hover); color:var(--h-ink); }
#semester-view .sug-alts-btn { min-height:28px; padding:0 8px; border:0; border-radius:var(--h-r-sm); background:none; color:var(--h-ink-3); font-size:12.5px; font-weight:500; }
#semester-view .sug-alts-btn:hover, #semester-view .sug-alts-btn[aria-expanded="true"] { background:rgba(255,255,255,.7); color:var(--h-ink); border:0; }
#semester-view .sug-alts { margin:0 8px 8px 94px; padding:4px 0 4px 12px; border-left:2px solid var(--h-accent-line); }

/* The suggestions card (6.0.6): the rails, headed by a line saying why they
   stand in for the requirements once those are met. A requirement's course
   choices use the same rows (.sem-req-options), so the two cards in the main
   column read as one list style. */
#semester-view .sem-rails-met { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px;
  margin:0 0 4px; padding:8px 8px; border-radius:var(--h-r-sm); background:var(--h-ok-soft); font-size:13px; }
#semester-view .sem-rails-met-label { font-weight:600; color:var(--h-ok); }
#semester-view .sem-rails-met-hours { display:inline-flex; flex-wrap:wrap; gap:4px 10px; font-size:12.5px; font-weight:600; color:var(--h-ink-2); font-variant-numeric:tabular-nums; }
#semester-view .sem-rails-dismissed { margin:10px 0 0; padding:8px 8px 0; border-top:1px solid var(--h-line); font-size:12px; color:var(--h-ink-3); }
#semester-view .sem-rails-count:empty { display:none; }
#semester-view .sem-rails .rail + .rail { margin-top:6px; }
#semester-view .sem-rails .rail-head { margin:14px 0 2px; padding:0 8px; font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--h-ink-3); }
#semester-view :is(#sem-rails, .sem-req-options) .rail-row { gap:2px 10px; min-height:40px; padding:4px 8px; border-bottom:0; border-top:1px solid var(--h-line); border-radius:0; }
#semester-view #sem-rails .rail-head + .rail-row, #semester-view .sem-req-options > .rail-row:first-child { border-top:0; }
#semester-view :is(#sem-rails, .sem-req-options) .rail-row:hover { background:var(--h-hover); }
#semester-view :is(#sem-rails, .sem-req-options) .rail-open { flex:1 1 14rem; gap:2px 10px; }
#semester-view :is(#sem-rails, .sem-req-options) .rail-code { min-width:76px; font-family:var(--font-sans); font-size:13px; font-weight:650; letter-spacing:.01em; color:var(--h-ink); font-variant-numeric:tabular-nums; }
#semester-view :is(#sem-rails, .sem-req-options) .rail-name { color:var(--h-ink-2); font-size:13.5px; line-height:1.45; }
#semester-view :is(#sem-rails, .sem-req-options) .rail-open:hover :is(.rail-code, .rail-name) { color:var(--h-accent); text-decoration:none; }
#semester-view :is(#sem-rails, .sem-req-options) .rail-meta { gap:8px; }
#semester-view .rail-dist { padding:1px 5px; border-radius:var(--radius-sm); background:#f1f3f6; color:var(--h-ink-3); font-size:10.5px; font-weight:600; letter-spacing:.02em; }
#semester-view .rail-cr { min-width:34px; text-align:right; font-size:12.5px; color:var(--h-ink-3); }
#semester-view .rail-off, #semester-view .rail-warn { padding:1px 5px; border-radius:var(--radius-sm); background:var(--h-warn-soft); color:var(--h-warn); font-size:10.5px; font-weight:600; }
#semester-view :is(#sem-rails, .sem-req-options) .rail-acts { gap:4px; }
#semester-view .rail-more { display:inline-flex; align-items:center; min-height:28px; margin:2px 0 0 2px; padding:0 6px; border:0; border-radius:var(--h-r-sm);
  background:none; color:var(--h-accent); font-family:var(--font-sans); font-size:12.5px; font-weight:500; cursor:pointer; }
#semester-view .rail-more:hover { background:var(--h-hover); }

/* Remaining requirements (6.0.6): the main column's second card, at full length.
   Each category is a titled group, and a requirement row reads label left,
   progress right. The list's text starts 8px in, titles included, so a one-line
   category (DP-127) and a row line up under one edge. */
#semester-view .sem-req-section + .sem-req-section { margin-top:10px; padding-top:2px; border-top:1px solid var(--h-line); }
#semester-view .sem-req-head { margin:10px 0 4px; padding:0 8px; }
#semester-view .sem-req-section:first-child .sem-req-head { margin-top:0; }
#semester-view .sem-req-head h3 { font-size:13.5px; font-weight:650; letter-spacing:0; text-transform:none; color:var(--h-ink); }
/* DP-127: a category that is one requirement (D1–D3, FWIS, AD, LPAP) is one
   line. Its heading is the button — title, count, caret — so the list does not
   name it twice; consecutive ones stack as a tight accordion. */
#semester-view .sem-req-section.is-single > .sem-req-head { margin:0; padding:0; }
#semester-view .sem-req-section + .sem-req-section.is-single { padding-top:4px; }
#semester-view .sem-req-section.is-single + .sem-req-section.is-single { margin-top:4px; }
#semester-view .sem-req-section.is-single h3 { flex:1 1 auto; min-width:0; }
#semester-view .sem-req-toggle { display:flex; align-items:baseline; justify-content:space-between; gap:4px 12px; width:100%;
  min-height:38px; padding:8px 8px 8px 7px; border:1px solid transparent; border-radius:var(--h-r-sm); background:none;
  font:inherit; line-height:1.4; color:inherit; text-align:left; cursor:pointer; }
#semester-view .sem-req-toggle:hover { background:var(--h-hover); }
#semester-view .sem-req-toggle.is-on { background:var(--h-accent-soft); border-color:var(--h-accent-line); color:var(--h-brand); }
#semester-view .sem-req-toggle:focus-visible { outline:2px solid var(--h-accent); outline-offset:-2px; }
#semester-view .sem-req-toggle.is-on .sem-req-count { color:var(--h-brand); }
#semester-view .sem-req-group { margin:8px 0 2px; padding:0 8px; font-size:12.5px; font-weight:500; color:var(--h-ink-3); }
/* A section's title, said once above the run of lines that share it — quiet,
   so the lines (each named by its course) are what reads. */
#semester-view .sem-req-sublabel { margin:10px 0 0; padding:0 8px; font-size:11px; font-weight:650; line-height:1.4; letter-spacing:.05em; text-transform:uppercase; color:var(--h-ink-3); }
#semester-view .sem-req-label .req-line-code { font-weight:650; color:var(--h-ink); font-variant-numeric:tabular-nums; }
#semester-view .sem-req-row.is-on .req-line-code { color:inherit; }
#semester-view .sem-req-row { align-items:baseline; gap:4px 12px; min-height:38px; padding:8px 8px; border-radius:var(--h-r-sm);
  font-size:13.5px; line-height:1.4; color:var(--h-ink-2); }
#semester-view .sem-req-row.is-bare, #semester-view .sem-req-row.in-section { padding-left:18px; }
#semester-view .sem-req-row:hover { background:var(--h-hover); color:var(--h-ink); }
#semester-view .sem-req-row.is-on { background:var(--h-accent-soft); border-color:var(--h-accent-line); color:var(--h-brand); }
#semester-view .sem-req-row:focus-visible { outline:2px solid var(--h-accent); outline-offset:-2px; }
#semester-view .sem-req-count { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--h-ink-3); }
/* Every requirement line opens its course choices, so every count ends in the
   card head's caret, and the counts keep one right edge. */
#semester-view .sem-req-count::after { content:""; flex:none; width:6px; height:6px; margin:0 2px 3px; opacity:.6;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
#semester-view [aria-expanded="true"] > .sem-req-count::after { margin:3px 2px 0; transform:rotate(-135deg); }
#semester-view .sem-req-row.is-on .sem-req-count { color:var(--h-brand); }
#semester-view .sem-req-courses { font-size:12.5px; color:var(--h-ink-3); }
#semester-view .sem-req-row.is-bare .sem-req-courses::before { content:none; }
#semester-view .sem-req-hours { justify-content:space-between; margin-top:12px; padding:10px 8px 0; border-top:1px solid var(--h-line);
  font-size:12.5px; font-weight:600; color:var(--h-ink-2); font-variant-numeric:tabular-nums; }
#semester-view .sem-req-hours-label { font-weight:500; color:var(--h-ink-3); }
#semester-view .sem-req-empty { padding:4px 0; font-size:13px; color:var(--h-ink-3); }
/* A requirement's courses open under its line as one inset list of the rows the
   suggestions card uses, each with its own Add; what a course still needs is
   written on its row. */
#semester-view .sem-req-options { margin:2px 0 10px 8px; padding:0 0 0 10px; border-left:2px solid var(--h-accent-line); }
#semester-view .sem-req-options .rail-more { margin-top:4px; }
#semester-view .sem-req-need { min-width:0; overflow-wrap:anywhere; font-size:12px; color:var(--h-warn); }
#semester-view .rail-meta .req-saved-indicator { display:inline-flex; color:var(--warning, #b7791f); }
#semester-view .rail-meta .req-saved-indicator svg { width:13px; height:13px; }

/* Saved courses: narrow column, so a row is the course on one line and its
   state and actions on the next. */
#semester-view .sem-saved-count { font-size:12.5px; color:var(--h-ink-3); }
#semester-view .sem-saved-row { position:relative; gap:4px 10px; padding:8px 8px; border-top:1px solid var(--h-line); }
#semester-view .sem-saved-row:first-child { border-top:0; }
#semester-view .sem-saved-open { flex:1 1 100%; gap:2px 10px; }
#semester-view .sem-saved-code { min-width:76px; font-family:var(--font-sans); font-size:13px; font-weight:650; letter-spacing:.01em; color:var(--h-ink); font-variant-numeric:tabular-nums; }
#semester-view .sem-saved-name { color:var(--h-ink-2); font-size:13.5px; }
#semester-view .sem-saved-open:hover .sem-saved-code, #semester-view .sem-saved-open:hover .sem-saved-name { color:var(--h-accent); text-decoration:none; }
#semester-view .sem-saved-meta { flex:1 1 auto; font-size:12px; color:var(--h-ink-3); }
#semester-view .sem-saved-actions { gap:4px; }
#semester-view .sem-saved-hint, #semester-view .sem-saved-notice { margin:4px 0 0; font-size:13px; color:var(--h-ink-3); }
#semester-view .sem-saved-notice { padding:0 4px; }
@media (hover:hover) and (pointer:fine) {
  #semester-view .sem-saved-row .plan-order-handle { position:absolute; left:-13px; top:19px; transform:translateY(-50%);
    width:14px; min-width:14px; min-height:24px; padding:0; border:0; font-size:11px; opacity:0; transition:opacity .12s; }
  #semester-view .sem-saved-row .plan-order-handle:focus-visible { opacity:1; background:none; border:0; color:var(--h-ink-2); }
}

@media (max-width:1080px) {
  #semester-view .sem-focus { grid-template-columns:minmax(0,1fr); }
}
/* Phones: the actions get their own line under the term's name. A course row
   wraps on its own (its title keeps the first line with the code); a suggestion
   rail takes two lines, the course and then its facts and answers lined up under
   the title (the ::after is a code-column spacer at the start of that line). The
   facts take the room left beside the answers and wrap inside it, so a long
   "Needs …" or "not offered" never pushes Add onto a third line. */
@media screen and (max-width:768px) {
  #semester-view > .sem-toolbar { grid-template-areas:"back step" "head head" "actions actions"; margin-bottom:16px; }
  #semester-view .sem-toolbar .toolbar-right { justify-content:flex-start; margin-top:6px; }
  #semester-view #sem-title { font-size:22px; }
  #semester-view .sem-main, #semester-view .sem-side, #semester-view .sem-focus { gap:14px; }
  #semester-view .sem-card { padding:12px 12px 10px; }
  #semester-view :is(#sem-rails, .sem-req-options) .rail-row::after { content:""; order:1; flex:0 0 76px; }
  #semester-view .rail-cr { min-width:0; text-align:left; }
  #semester-view :is(#sem-rails, .sem-req-options) .rail-open { flex:1 1 100%; }
  #semester-view :is(#sem-rails, .sem-req-options) .rail-meta { order:2; flex:1 1 0; flex-wrap:wrap; margin-left:0; }
  #semester-view :is(#sem-rails, .sem-req-options) .rail-acts { order:3; margin-left:auto; }
  #semester-view .sug-alts { margin-left:8px; }
}
@media print {
  #semester-view .sem-focus { display:block; }
  #semester-view .sem-card { margin:0 0 12px; box-shadow:none; border-color:#ccc; }
  #semester-view #sem-suggest, #semester-view .sem-req-options, #semester-view .sem-sug-line, #semester-view #sem-pending, #semester-view .sem-step, #semester-view .sem-load { display:none !important; }
}

/* ── Course page (DP-126) ────────────────────────────────────────────────────
   A header that is the course — code, title, facts, description — and cards
   under it: what decides whether and when to take it on the left, how it
   relates to this student on the right. The owner found the single 720px
   column of ruled sections clunky even with its detail compressed. */
#course-view { max-width:var(--h-max); margin:0 auto; padding-bottom:48px; }
/* .toolbar-left is display:contents so the title and the actions share a line. */
#course-view > .cp-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"back back" "title actions" "meta meta" "desc desc";
  align-items:end; gap:4px 24px; min-height:0; margin:0 0 20px; padding:0; border:0; }
#course-view .cp-toolbar .toolbar-left { display:contents; }
#course-view .cp-toolbar .cp-back { grid-area:back; justify-self:start; min-height:26px; margin:0 0 2px -6px; padding:0 8px 0 6px; border:0;
  border-radius:var(--h-r-sm); background:none; color:var(--h-ink-3); font-size:13px; font-weight:500; }
#course-view .cp-toolbar .cp-back:hover { background:var(--h-canvas-hover); color:var(--h-ink); }
/* The code is the eyebrow and the title the headline; a course the catalog has
   no title for keeps its code at headline size. */
#course-view .cp-title { grid-area:title; display:flex; flex-direction:column; gap:2px; min-width:0; margin:0;
  font-size:13px; font-weight:650; letter-spacing:.02em; line-height:1.3; color:var(--h-ink-3); font-variant-numeric:tabular-nums; }
#course-view .cp-title-name { font-size:26px; font-weight:650; letter-spacing:-.022em; line-height:1.2; color:var(--h-ink); overflow-wrap:anywhere; }
#course-view .cp-title.cp-title-bare { font-size:26px; letter-spacing:-.02em; color:var(--h-ink); }
#course-view .cp-title:focus-visible { outline:2px solid var(--h-accent); outline-offset:4px; border-radius:var(--h-r-sm); }
#course-view .cp-actions { grid-area:actions; gap:8px; }
#course-view .cp-no-terms { font-size:13px; color:var(--h-ink-3); }
#course-view .cp-meta { grid-area:meta; display:flex; flex-wrap:wrap; gap:2px 0; margin:4px 0 0; font-size:13.5px; color:var(--h-ink-3); }
#course-view .cp-meta > span + span::before { content:"·"; margin:0 8px; color:var(--h-ink-4); }
#course-view .cp-toolbar .course-description { grid-area:desc; margin:6px 0 0; }
#course-view .course-description > summary { display:inline-flex; align-items:center; gap:7px; min-height:28px; margin-left:-6px; padding:0 8px 0 6px;
  border-radius:var(--h-r-sm); color:var(--h-accent); font-size:13px; font-weight:600; list-style:none; }
#course-view .course-description > summary::-webkit-details-marker { display:none; }
#course-view .course-description > summary::after { content:""; width:6px; height:6px; margin-bottom:3px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
#course-view .course-description[open] > summary::after { margin:3px 0 0; transform:rotate(-135deg); }
#course-view .course-description > summary:hover { background:var(--h-canvas-hover); }
#course-view .course-description[open] > summary { margin-bottom:4px; }
#course-view .course-desc-text { max-width:72ch; margin:0; padding:0; border:0; font-style:normal; font-size:14px; line-height:1.6; color:var(--h-ink-2); }

#course-view .cp-wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); align-items:start; gap:20px; max-width:none; margin:0; padding:0; }
#course-view .cp-main, #course-view .cp-side { display:flex; flex-direction:column; gap:20px; min-width:0; }
#course-view .cp-card { margin:0; padding:14px 16px; background:var(--h-surface); border:1px solid var(--h-card-line); border-radius:var(--h-r); box-shadow:var(--h-card-shadow); }
#course-view .cp-h { margin:0 0 10px; font-size:14px; font-weight:650; letter-spacing:-.005em; text-transform:none; color:var(--h-ink); }
#course-view .cp-row { padding:7px 0; border-top:1px solid var(--h-line); font-size:13.5px; line-height:1.45; color:var(--h-ink-2); }
#course-view .cp-h + .cp-row, #course-view .cp-section-note + .cp-row { border-top:0; padding-top:0; }
#course-view .cp-absent, #course-view .cp-note { color:var(--h-ink-3); }
#course-view .cp-current-summary { justify-content:space-between; gap:8px 16px; font-size:14px; font-weight:600; color:var(--h-ink); }
#course-view .cp-current-summary .cp-link { min-height:32px; padding:0 8px; border:0; border-radius:var(--h-r-sm); background:none; color:var(--h-accent);
  font-family:var(--font-sans); font-size:13px; font-weight:600; }
#course-view .cp-current-summary .cp-link:hover { background:var(--h-hover); }
#course-view .cp-section-note { margin:-4px 0 8px; font-size:12.5px; color:var(--h-ink-3); }

/* Prerequisites: the verdict first, then one line per group, then where they come
   from. Met groups read as plain text; the ones still missing keep the warning colour. */
#course-view .cp-prereqs { display:flex; flex-direction:column; font-size:13.5px; line-height:1.45; color:var(--h-ink-2); }
#course-view .cp-prereqs .cp-h { order:-2; }
#course-view .cp-prereqs .bold-mb3 { display:none; }
#course-view .cp-prereqs .mt5-bold { order:-1; margin:0 0 4px; font-size:13.5px; font-weight:600; }
#course-view .cp-prereqs .my1 { margin:0; padding:7px 0; border-top:1px solid var(--h-line); font-size:13.5px; line-height:1.45; }
#course-view .cp-prereqs .bold-mb3 + .my1 { border-top:0; }
#course-view .cp-prereqs .my1 .prereq-met { color:var(--h-ink-2); font-weight:400; }
#course-view .cp-prereqs .my1 .prereq-missing { color:var(--h-warn); font-weight:500; }
#course-view .cp-prereqs .mt5-bold .prereq-met, #course-view .cp-prereqs > .prereq-met { color:var(--h-ok); font-weight:600; font-size:13.5px; }
#course-view .cp-prereqs .mt5-bold .prereq-missing { color:var(--h-warn); }
#course-view .cp-prereqs em { font-style:normal; color:var(--h-ink-3); }
#course-view .cp-prereqs .course-prerequisite-sources { display:flex; flex-direction:column; gap:3px; padding-top:9px; border-top:1px solid var(--h-line); }
#course-view .cp-prereqs .bold-mb3 + .course-prerequisite-sources { padding-top:0; border-top:0; }
#course-view .cp-prereqs .course-prerequisite-source { overflow-wrap:anywhere; }
#course-view .cp-prereqs .course-prerequisite-note,
#course-view .cp-prereqs .course-prerequisite-origin { font-size:12.5px; color:var(--h-ink-3); }
#course-view .cp-prereqs a { color:var(--h-accent); font-weight:500; text-decoration:none; }
#course-view .cp-prereqs a:hover { text-decoration:underline; }
#course-view .cp-prereqs a:focus-visible { outline:2px solid var(--h-accent); outline-offset:2px; border-radius:2px; }

/* Sections as a table. */
#course-view .cp-table { width:100%; border-collapse:collapse; font-size:13px; line-height:1.45; }
#course-view .cp-table th { padding:0 12px 6px 0; border-bottom:1px solid var(--h-line); text-align:left; font-size:11.5px; font-weight:600; color:var(--h-ink-3); }
#course-view .cp-table td { padding:7px 12px 7px 0; border-bottom:1px solid var(--h-line); vertical-align:top; color:var(--h-ink-2); font-variant-numeric:tabular-nums; }
#course-view .cp-table tr:last-child td { border-bottom:0; }
#course-view .cp-table td:nth-child(2), #course-view .cp-table td:nth-child(3) { white-space:nowrap; }
#course-view .cp-table th:last-child, #course-view .cp-table td:last-child { padding-right:0; }
#course-view .cp-table .cp-crn { width:1%; min-width:0; font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--h-ink); white-space:nowrap; }

/* Unlocks: each course with its title, two to a row where there is room. */
#course-view .cp-unlocks { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:0 24px; margin:0; }
#course-view .cp-unlocks .cp-link { display:flex; align-items:baseline; gap:10px; min-width:0; min-height:34px; padding:7px 6px; margin:0;
  border:0; border-top:1px solid var(--h-line); border-radius:0; background:none; box-shadow:none; font-family:var(--font-sans); font-size:13.5px;
  font-weight:400; text-align:left; color:var(--h-ink-2); white-space:normal; }
#course-view .cp-unlock-code { flex:0 0 auto; min-width:72px; font-weight:650; color:var(--h-ink); font-variant-numeric:tabular-nums; }
#course-view .cp-unlock-name { min-width:0; overflow-wrap:anywhere; }
#course-view .cp-unlocks .cp-link:hover { background:var(--h-hover); color:var(--h-accent); }
#course-view .cp-unlocks .cp-link:hover .cp-unlock-code { color:var(--h-accent); }
#course-view .cp-unlocks .cp-link:focus-visible { outline:2px solid var(--h-accent); outline-offset:-2px; }
#course-view .cp-unlocks .cp-more { grid-column:1 / -1; justify-self:start; margin:4px 0 0; }

/* Counts toward: the requirement leads, the program is the detail under it. */
#course-view .cp-sat { flex-direction:column; gap:2px; }
#course-view .cp-sat-group { font-weight:600; color:var(--h-ink); }
#course-view .cp-sat .cp-note { display:inline-block; max-width:calc(100% - 6px); box-sizing:border-box; margin-left:6px; padding:1px 6px; border-radius:var(--radius-sm); background:#f1f3f6; font-size:11px; font-weight:600; line-height:1.45; color:var(--h-ink-3); white-space:normal; overflow-wrap:anywhere; }
#course-view .cp-sat-prog { font-size:12.5px; color:var(--h-ink-3); }

/* Reviews summary (js/reviews.js) inside its card. */
#course-view #course-page-reviews .rv-heading { align-items:center; margin:0 0 8px; }
#course-view #course-page-reviews .rv-heading .cp-h { margin:0; }
#course-view #course-page-reviews .rv-view-btn { min-height:32px; padding:0 8px; margin-right:-8px; border-radius:var(--h-r-sm); color:var(--h-accent); font-size:13px; }
#course-view #course-page-reviews .rv-view-btn:hover { background:var(--h-hover); text-decoration:none; }
#course-view #course-page-reviews .rv-muted { border-top:0; padding-top:0; font-size:13px; color:var(--h-ink-3); }

@media (max-width:1080px) {
  #course-view .cp-wrap { grid-template-columns:minmax(0,1fr); }
}
@media screen and (max-width:768px) {
  #course-view > .cp-toolbar { grid-template-columns:minmax(0,1fr); grid-template-areas:"back" "title" "meta" "actions" "desc"; margin-bottom:16px; }
  #course-view .cp-actions { width:auto; justify-content:flex-start; margin-top:8px; }
  #course-view .cp-title-name, #course-view .cp-title.cp-title-bare { font-size:22px; }
  #course-view .cp-main, #course-view .cp-side, #course-view .cp-wrap { gap:14px; }
  #course-view .cp-card { padding:12px; }
  #course-view .cp-table th, #course-view .cp-table td { padding-right:8px; }
}
@media print {
  #course-view .cp-wrap { display:block; }
  #course-view .cp-card { margin:0 0 12px; box-shadow:none; border-color:#ccc; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
#site-footer { margin-top:24px; padding:20px var(--h-gutter); background:none; border-top:1px solid var(--h-line); }
#site-footer .footer-links a { color:var(--h-ink-2); font-size:12px; }
#site-footer .footer-main, #site-footer .footer-disclaimers { color:var(--h-ink-3); font-size:11.5px; }

/* ── Tablet: the browser floats as a drawer (js keeps the same breakpoint) ─ */
@media (max-width:900px) {
  .plan-requirements-sidebar { padding-top:0; border:1px solid var(--h-line); border-radius:var(--h-r); box-shadow:0 12px 32px rgba(15,23,42,.14); }
  .plan-requirements-heading { border-radius:var(--h-r) var(--h-r) 0 0; }
  /* The collapsed browser becomes a round button in the bottom corner, clear of
     the notice and the headline card, and reachable at any scroll depth. */
  .plan-requirements-rail { top:auto; bottom:20px; right:20px; width:48px; height:48px; padding:0; border:0; border-radius:var(--h-r); background:none; box-shadow:0 6px 18px rgba(0,32,91,.28); }
  #multiyear-view #plan-requirements-expand.btn { width:48px; min-height:48px; padding:0; border:0; border-radius:var(--h-r); font-size:0; color:transparent;
    background:var(--h-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/20px no-repeat; }
  #multiyear-view #plan-requirements-expand.btn:hover { background-color:#001640; }
  #multiyear-view #plan-requirements-expand.btn:focus-visible { outline:2px solid var(--h-accent); outline-offset:3px; }
  #multiyear-view .headline-row { grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
}
@media screen and (min-width:769px) and (max-width:900px) {
  body.plan-rail-active #main, body.plan-rail-active.plan-rail-expanded #main,
  body.plan-rail-active #site-footer, body.plan-rail-active.plan-rail-expanded #site-footer { padding-right:var(--h-gutter); }
}
@media (min-width:901px) and (max-width:1100px) {
  #multiyear-view .headline-row { grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ── Phones ──────────────────────────────────────────────────────────────── */
@media screen and (max-width:768px) {
  #rice-brand { padding:0 14px; }
  #multiyear-view > .toolbar { flex-direction:row; margin-bottom:12px; }
  #multiyear-view > .toolbar h1 { font-size:22px; }
  #multiyear-view .my-projected-toggle { padding:12px 14px 0; }
  #multiyear-view .my-summary-row .my-projected-block { padding:8px 14px 14px; }
  #multiyear-view .headline-row { grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 14px; }
  #multiyear-view .headline-val { font-size:18px; }
  .plan-requirements-rail { bottom:calc(72px + env(safe-area-inset-bottom, 0px)); right:16px; }
  #multiyear-view .my-summary-row { margin-bottom:20px; }
  #multiyear-view .plan-year { margin-top:20px; }
  #multiyear-view .plan-year:has(> .plan-year-terms.is-hidden) + * { margin-top:-6px; }
  #multiyear-view .plan-year-terms { gap:12px; }
  .plan-years-container { padding:0; }
  #mobile-nav { box-shadow:none; border-top:1px solid var(--h-line); }
  .mnav-btn.active { color:var(--h-brand); }
  #site-footer, #layout ~ #site-footer, body.sb-collapsed #layout ~ #site-footer { padding-left:16px; padding-right:16px; }
}

/* ── DP-123: hidden Chats tab, legacy tools in Settings ──────────────────── */
#nav-chats[hidden], #mnav-chats[hidden], .settings-legacy[hidden] { display:none; }
.settings-legacy { margin-top:14px; }
.settings-legacy .settings-actions { margin-top:8px; }