/* The Academic Workspace layout (lib/workspace.js, docs/site-design.md).
   Loaded only on pages of a course with "layout": "workspace", and every rule
   is under body.ws, so no other course can pick any of it up. The course's own
   accent (--accent, set per course in the page head) marks progress, the
   current topic and the logo tile, so a student always knows which course
   they are in. */

.ws {
  --ws-navy: #0F1B2D;
  --ws-side-w: 288px;
  /* Prose measure. The brief said 68ch, but a ch is the width of a zero, and
     in this 17px system font 68ch holds 88 to 94 characters of running text.
     52ch holds 67 on a typical line and 73 at most on Precalc 1.2, inside the
     50 to 75 a reader manages best (docs/site-design.md). */
  --ws-measure: 52ch;
  --ws-head-h: 64px;
  --ws-foot-h: 64px;
  --ws-chip: #EEF0F3;
  --ws-chip-ink: #334155;
  --ws-strong: #0F1B2D;
  --ws-strong-ink: #FFFFFF;
  --ws-hover: #F1F3F6;
  --ws-current: #E9ECF1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ws {
    --ws-chip: #1E293B; --ws-chip-ink: #CBD5E1; --ws-strong: #E2E8F0; --ws-strong-ink: #0B1120;
    --ws-hover: #172036; --ws-current: #1E293B;
  }
}
:root[data-theme="dark"] .ws {
  --ws-chip: #1E293B; --ws-chip-ink: #CBD5E1; --ws-strong: #E2E8F0; --ws-strong-ink: #0B1120;
  --ws-hover: #172036; --ws-current: #1E293B;
}

.ws .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ws .ws-icon { flex: none; }

/* Header ------------------------------------------------------------------ */
.ws .ws-header {
  display: flex; align-items: center; gap: 12px; min-height: var(--ws-head-h); padding: 0 20px;
  padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right));
  background: var(--ws-navy); color: #fff;
}
.ws .ws-header a { color: #fff; text-decoration: none; }
.ws .ws-menu { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; border-radius: 10px; }
.ws .ws-menu:hover { background: rgba(255, 255, 255, 0.1); }
.ws .ws-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; font-size: 1.08rem; white-space: nowrap; }
.ws .ws-logo {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--accent);
}
.ws .ws-logo::after {
  content: ""; position: absolute; left: 7px; bottom: 8px; width: 20px; height: 18px;
  background:
    linear-gradient(to top, #fff 0 30%, transparent 30%) 1px 100% / 4px 100% no-repeat,
    linear-gradient(to top, #fff 0 70%, transparent 70%) 8px 100% / 4px 100% no-repeat,
    linear-gradient(to top, #fff 0 50%, transparent 50%) 15px 100% / 4px 100% no-repeat;
  border-bottom: 2px solid #fff;
}
.ws .ws-course { color: #CBD5E1 !important; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ws .ws-course:hover .ws-cname, .ws .ws-course:hover .ws-cshort { text-decoration: underline; }
.ws .ws-cshort { display: none; }
.ws .ws-header-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ws .ws-header .progress-chip { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); padding: 6px 12px; white-space: nowrap; }
.ws .ws-header .site-search { flex: 0 1 360px; min-width: 0; margin-left: 16px; }
.ws .ws-menu, .ws .ws-brand, .ws .ws-course, .ws .ws-header-end { flex: 0 0 auto; }
.ws .ws-header .site-search-input { min-width: 0; }
@media (max-width: 999px) {
  .ws .ws-header .site-search { flex: 1 1 100px; max-width: 220px; margin-left: 4px; }
  .ws .ws-header .ws-course { flex: 0 0 auto; white-space: nowrap; }
}

/* Sidebar ------------------------------------------------------------------ */
.ws .ws-side {
  background: var(--card); border-right: 1px solid var(--line); padding: 16px 14px 32px;
  display: flex; flex-direction: column; gap: 16px; font-size: 0.93rem;
}
.ws .ws-side:focus { outline: none; }
.ws .ws-side-head { display: none; align-items: center; justify-content: space-between; }
.ws .ws-side-head .ws-label { margin: 0; }
.ws .ws-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--ink); }
.ws .ws-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }

.ws .ws-resume {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px;
  background: var(--ws-navy); color: #fff; text-decoration: none; line-height: 1.35;
}
.ws .ws-resume[hidden] { display: none; }
.ws .ws-resume-k { font-weight: 700; font-size: 0.92rem; }
.ws .ws-resume-t { font-size: 0.84rem; color: #CBD5E1; }
.ws .ws-resume:hover { filter: brightness(1.15); }

.ws .ws-progress[hidden] { display: none; }
.ws .ws-bar-track { height: 8px; border-radius: 999px; background: var(--ws-chip); overflow: hidden; }
.ws .ws-bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); }
.ws .ws-progress-t { margin: 6px 0 0; font-size: 0.84rem; color: var(--muted); }
.ws .ws-solid { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }

.ws .ws-dest ul, .ws .ws-panel ul, .ws .ws-unit ol { list-style: none; margin: 0; padding: 0; }
.ws .ws-dest li + li, .ws .ws-panel li + li, .ws .ws-unit li + li { margin-top: 2px; }
.ws .ws-dest a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 650;
}
.ws .ws-dest a:hover { background: var(--ws-hover); }
.ws .ws-dest a[aria-current] { background: var(--ws-current); }
.ws .ws-dest a[aria-current] .ws-icon { color: var(--accent); }

/* This lesson: the seven steps, the bar, and where finishing leads. */
.ws .ws-lesson { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ws .ws-lesson-t { margin: 0 0 10px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.ws .ws-steps { list-style: none; margin: 10px 0 12px; padding: 0; }
.ws .ws-steps li + li { margin-top: 2px; }
.ws .ws-steps a {
  display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding: 9px 10px; border-radius: 8px;
  color: var(--body); text-decoration: none; line-height: 1.35;
}
.ws .ws-steps a:hover { background: var(--ws-hover); color: var(--ink); }
.ws .ws-steps a[aria-current] { background: var(--ws-current); color: var(--ink); font-weight: 700; }
.ws .ws-steps .ws-st[data-state="current"] { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 7px var(--accent); }
.ws .ws-steps .ws-st[data-state="done"] { border-color: var(--good); }
.ws .ws-steps .ws-st[data-state="done"]::after { content: ""; position: absolute; left: 3.5px; top: 1.5px; width: 3px; height: 6px; border-right: 1.5px solid var(--good); border-bottom: 1.5px solid var(--good); transform: rotate(45deg); }
.ws .ws-grad {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; min-height: 44px;
  border: 1px solid var(--line-strong); color: var(--body); text-decoration: none; line-height: 1.35;
}
.ws .ws-grad-k { font-size: 0.8rem; color: var(--muted); }
.ws .ws-grad-t { font-weight: 650; color: var(--ink); }
.ws .ws-grad:hover { background: var(--ws-hover); }
.ws .ws-grad[data-ready] { border-color: var(--accent); background: var(--ws-current); }
.ws .ws-grad[data-ready] .ws-grad-k { color: var(--ink); font-weight: 700; }

.ws .ws-panel, .ws .ws-outline { border-top: 1px solid var(--line); padding-top: 16px; }
.ws .ws-panel h2.ws-label { margin-top: 0; }
.ws .ws-panel h2.ws-label + ul { margin-bottom: 14px; }
.ws .ws-panel .ws-teacher { border-top: 1px dashed var(--line-strong); padding-top: 14px; }
.ws .ws-panel a, .ws .ws-unit a {
  display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding: 9px 10px; border-radius: 8px;
  color: var(--body); text-decoration: none; line-height: 1.35; overflow-wrap: anywhere;
}
.ws .ws-panel .ws-sub a { padding-left: 24px; font-size: 0.9rem; min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
.ws .ws-panel a:hover, .ws .ws-unit a:hover { background: var(--ws-hover); color: var(--ink); }
.ws .ws-panel a[aria-current], .ws .ws-unit a[aria-current] { background: var(--ws-current); color: var(--ink); font-weight: 700; }

.ws .ws-unit { margin: 0 0 4px; }
.ws .ws-unit summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 44px;
  padding: 10px; border-radius: 8px; cursor: pointer; list-style: none; color: var(--ink); font-weight: 700; line-height: 1.3;
}
.ws .ws-unit summary::-webkit-details-marker { display: none; }
.ws .ws-unit summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: 5px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 0.15s; }
.ws .ws-unit[open] summary::after { transform: rotate(45deg); }
.ws .ws-unit summary:hover { background: var(--ws-hover); }
.ws .ws-unit ol { margin: 2px 0 6px; }
.ws .ws-tn { font-variant-numeric: tabular-nums; }
.ws .ws-tt { min-width: 0; }
.ws .ws-pending { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; color: var(--muted); line-height: 1.35; }
.ws .ws-ucheck { font-weight: 650; color: var(--brand-text) !important; }

/* Status icons: a ring until the script reads progress. Check for solid, half
   circle for in progress, ring for not started. */
.ws .ws-st { flex: none; position: relative; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--line-strong); box-sizing: border-box; }
.ws .ws-st[data-state="progress"] { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.ws .ws-st[data-state="solid"] { border-color: var(--good); }
.ws .ws-st[data-state="solid"]::after { content: ""; position: absolute; left: 3.5px; top: 1.5px; width: 3px; height: 6px; border-right: 1.5px solid var(--good); border-bottom: 1.5px solid var(--good); transform: rotate(45deg); }
.ws a[aria-current] .ws-st[data-state="none"], .ws a[aria-current] .ws-st:not([data-state]) { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 7px var(--accent); }

/* Main column --------------------------------------------------------------- */
.ws .ws-main { min-width: 0; max-width: 1040px; padding: 24px 20px 56px; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.ws .ws-wide .ws-main { max-width: 1180px; margin: 0 auto; }
.ws .ws-scrim { display: none; }

/* Prose stops at about 68 characters a line; figures, tables, labs, choices
   and card grids keep the column's full width. */
.ws .ws-main :is(p, h1, h2, h3, h4, blockquote, ul:not([class]), ol:not([class]), dl) { max-width: var(--ws-measure); }
.ws .ws-main :is(table, figure, [data-lab], .lab-grid, .choices, .casebox, .card-grid, .chart) :is(p, h2, h3, h4, ul, ol, dl) { max-width: none; }
.ws .ws-main .spine-nav ol { max-width: none; }

/* The course home is one column of one width: the hero text, the exam card,
   the buttons and the unit list line up instead of a narrow text column
   above full-width cards. */
.ws[data-page="home"] .ws-main > :is(.hero, .section) { max-width: 680px; margin-inline: auto; }
.ws[data-page="home"] .ws-main > :is(.hero, .section) :is(p, h1, h2) { max-width: none; }
.ws[data-page="home"] .exam-chip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; box-sizing: border-box; width: 100%; }

.ws .page-head h1 { font-size: 1.85rem; line-height: 1.2; }
.ws .page-head .eyebrow { line-height: 1.5; }

/* The lesson's parts strip, as chips: gray, the part in view dark. */
.ws .spine-nav { margin: 0 0 12px; padding: 10px 0; background: var(--page); border-bottom: 1px solid var(--line); }
.ws .spine-nav a { background: var(--ws-chip); color: var(--ws-chip-ink); border-radius: 8px; min-height: 36px; padding: 6px 12px; font-weight: 600; }
.ws .spine-nav a:hover { color: var(--ink); }
.ws .spine-nav a.is-done { background: var(--ws-chip); color: var(--good); }
.ws .spine-nav a[aria-current] { background: var(--ws-strong); color: var(--ws-strong-ink); }
.ws .spine-nav a[aria-current] .spine-n { color: inherit; opacity: 0.75; }
.ws .spine-nav::after { background: linear-gradient(to right, transparent, var(--page) 55%); }
@media (min-width: 1000px) { .ws .spine-nav ol { flex-wrap: wrap; overflow: visible; } }
/* The parts strip sticks to the top and wraps to two rows on a laptop, so a
   point brought into view must land below it, not under it. */
html:has(body.ws) { scroll-padding-top: 104px; }

/* Primary answer buttons. */
.ws .btn-check, .ws .btn-compare {
  background: var(--ws-strong); border-color: var(--ws-strong); color: var(--ws-strong-ink);
  border-radius: 10px; min-height: 44px; padding: 10px 18px;
}
.ws .btn-check:hover, .ws .btn-compare:hover { border-color: var(--ws-strong); filter: brightness(1.2); }

/* Key vocabulary: the first eight rows, then a control for the rest. Every
   row stays in the HTML, and the checkbox works without the script
   (workspace.js adds .is-all for browsers without :has). */
.ws .vocab-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ws .vocab-long tbody tr:nth-child(n+9) { display: none; }
.ws .vocab-long:has(.vocab-toggle:checked) tbody tr:nth-child(n+9), .ws .vocab-long.is-all tbody tr:nth-child(n+9) { display: table-row; }
.ws .vocab-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--ink); font-weight: 650; cursor: pointer; }
.ws .vocab-more:hover { border-color: var(--ink); }
.ws .vocab-toggle:focus-visible + .vocab-more { outline: 3px solid var(--focus); outline-offset: 2px; }
.ws .vocab-less, .ws .vocab-toggle:checked + .vocab-more .vocab-all { display: none; }
.ws .vocab-toggle:checked + .vocab-more .vocab-less { display: inline; }
@media (max-width: 640px) {
  .ws .vocab-long tbody tr:nth-child(n+9) { display: none; }
  .ws .vocab-long:has(.vocab-toggle:checked) tbody tr:nth-child(n+9), .ws .vocab-long.is-all tbody tr:nth-child(n+9) { display: block; }
}

/* Bar at the foot of a phone screen ------------------------------------------- */
.ws .ws-foot { display: none; }

/* Desktop: the sidebar sits beside the page and scrolls on its own. */
@media (min-width: 1000px) {
  .ws .ws-shell:not(.ws-wide) { display: grid; grid-template-columns: var(--ws-side-w) minmax(0, 1fr); }
  .ws .ws-shell:not(.ws-wide) > .ws-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
  .ws .ws-shell:not(.ws-wide) > .ws-main { padding: 28px 48px 64px; width: 100%; margin: 0 auto; box-sizing: border-box; }
  .ws.ws-widepage .ws-menu { display: inline-flex; }
}

/* The drawer: under 1000px, and on wide pages at any width. Without the
   script, the menu link targets the sidebar and :target opens it. */
@media (max-width: 999.98px) {
  .ws { --ws-head-h: 56px; }
  .ws .ws-menu { display: inline-flex; }
  .ws .ws-shell > .ws-side { width: min(320px, 88vw); }
}
@media (max-width: 999.98px) { .ws .ws-shell > .ws-side { position: fixed; } }
@media (min-width: 1000px) { .ws .ws-shell.ws-wide > .ws-side { position: fixed; width: var(--ws-side-w); } }
@media (max-width: 999.98px) {
  .ws .ws-shell > .ws-side { z-index: 40; top: 0; bottom: 0; left: 0; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; transform: translateX(-102%); visibility: hidden; transition: transform 0.2s ease, visibility 0.2s; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); padding-left: max(14px, env(safe-area-inset-left)); box-shadow: 0 0 40px rgba(15, 23, 42, 0.25); }
  .ws .ws-side-head { display: flex; }
}
@media (min-width: 1000px) {
  .ws .ws-shell.ws-wide > .ws-side { z-index: 40; top: 0; bottom: 0; left: 0; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; transform: translateX(-102%); visibility: hidden; transition: transform 0.2s ease, visibility 0.2s; box-shadow: 0 0 40px rgba(15, 23, 42, 0.25); }
  .ws .ws-shell.ws-wide > .ws-side .ws-side-head { display: flex; }
}
.ws.ws-open .ws-shell > .ws-side, .ws .ws-shell > .ws-side:target { transform: none; visibility: visible; }
.ws.ws-open .ws-scrim, .ws .ws-side:target ~ .ws-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(15, 23, 42, 0.45); }
@media (min-width: 1000px) { .ws.ws-open .ws-shell:not(.ws-wide) .ws-scrim { display: none; } }

@media (max-width: 999.98px) {
  .ws { --ws-foot-h: 64px; }
  .ws .ws-cname { display: none; }
  .ws .ws-cshort { display: inline; }
  .ws .ws-main { padding-bottom: calc(var(--ws-foot-h) + env(safe-area-inset-bottom) + 32px); }
  /* A field or choice scrolled to by focus or a click lands above the bar. */
  html:has(body.ws) { scroll-padding-bottom: calc(var(--ws-foot-h) + env(safe-area-inset-bottom) + 16px); }
  .ws .ws-foot {
    display: flex; align-items: center; gap: 10px; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    min-height: var(--ws-foot-h); box-sizing: border-box;
    padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
  }
  .ws .ws-foot a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 10px; font-weight: 700; text-decoration: none; white-space: nowrap; }
  .ws .ws-foot-outline { border: 1.5px solid var(--line-strong); color: var(--ink); background: var(--card); }
  .ws .ws-foot-next { background: var(--ws-strong); color: var(--ws-strong-ink); }
  .ws .ws-foot-next[hidden] { display: none; }
  .ws .ws-foot-now { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .ws .ws-foot-t { font-weight: 700; color: var(--ink); font-size: 0.92rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ws .ws-foot-part { font-size: 0.8rem; color: var(--muted); }
  .ws.ws-typing .ws-foot, .ws.ws-open .ws-foot { display: none; }
  .ws.ws-typing .ws-main { padding-bottom: 56px; }
  .ws .spine-nav { margin: 0 -20px 12px; padding: 8px 20px; }
}
@media (max-width: 560px) {
  .ws .ws-brand-t { display: none; }
  .ws .ws-header .chip-streak { display: none; }
}
@media (max-width: 480px) { .ws .ws-header:not([data-xp-phone]) .progress-chip { display: none; } }
/* Option B for the XP chip (board 984, flag workspace.xp_chip_phone in
   sites/allapcourses.json, off until Tanner decides): the chip stays on a
   phone as a bare XP count and the search box gives up width for it. */
@media (max-width: 480px) {
  .ws .ws-header[data-xp-phone] .progress-chip { padding: 4px 9px; font-size: 0.8rem; }
  .ws .ws-header[data-xp-phone] .site-search { flex: 1 1 56px; max-width: 120px; }
}
@media (prefers-reduced-motion: reduce) { .ws .ws-side { transition: none !important; } }

@media print {
  .ws .ws-header, .ws .ws-side, .ws .ws-foot, .ws .ws-scrim { display: none !important; }
  .ws .ws-shell { display: block !important; }
  .ws .ws-main { max-width: none; padding: 0; }
  .ws .vocab-long tbody tr:nth-child(n+9) { display: table-row !important; }
  .ws .vocab-more { display: none !important; }
}