/* Plot45 — workspace.css (T2: the app shell)
   The Workspace room, per docs/plot45_ci.md: warm, bounded, personal — an app
   shell (ink sidebar · content views · panels), not a document. Broadsheet is
   the family DNA; the instrument's austerity stays in the Workbench.

   Brand mechanics here:
   · the rising 45° stroke on every lab plate (the brand mark in motion)
   · yellow #ffdb00 in its CI roles only: identity (logo), selection (the
     active nav marker), arrival (greeting name-swipe, paywall line)
   Zero dependency: system fonts + CSS gradients, no images beyond the logo. */

/* ── tokens ────────────────────────────────────────────────────────────── */
.ws-page {
  --ws-ground: #faf9f6;                 /* warm paper, this room only */
  --ws-hairline: #e8e6e0;
  --ws-grid: rgba(21, 23, 26, 0.055);   /* graph-paper lines inside plates */
  --ws-plate: #fdfdfb;
  --ws-yellow: #ffdb00;
  --ws-radius: 10px;                    /* CI: workspace panel radius */
  --ws-shadow:
    0 1px 2px rgba(24, 22, 14, 0.04),
    0 12px 28px -20px rgba(24, 22, 14, 0.25);
  /* The ink sidebar is ink in BOTH themes (it is the app's spine). It shares
     the --ink-spine-* tokens (site.css) with the Workbench rails — one source
     of truth so the two "navigate verticals" can never drift apart (CI §2). */
  --ws-side-bg: var(--ink-spine-bg);
  --ws-side-line: var(--ink-spine-line);
  --ws-side-text: var(--ink-spine-text);
  --ws-side-text-strong: var(--ink-spine-text-strong);
  --ws-side-hover: var(--ink-spine-hover);
  --ws-side-active: var(--ink-spine-active);
  /* Lab identity colours = the workbench fit family (honest tie). */
  --ws-tab-0: #d92020;
  --ws-tab-1: #1f5fd0;
  --ws-tab-2: #1a8a3a;
  background: var(--ws-ground);
}
[data-theme="dark"] .ws-page {
  --ws-ground: var(--bg);
  --ws-hairline: var(--line);
  --ws-grid: rgba(255, 255, 255, 0.05);
  --ws-plate: #202329;
  --ws-shadow: none;
  /* --ws-side-bg deepens in dark via the shared --ink-spine-bg override. */
  --ws-tab-0: #ff6060;
  --ws-tab-1: #5e9dff;
  --ws-tab-2: #3fd07a;
}

/* ── the shell ─────────────────────────────────────────────────────────── */
/* The shared light header (T9) sits above (full-bleed via the shared
   .site-header__inner--flush in site.css); the shell fills what's left. */
.ws-app {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: calc(100vh - var(--nav-height));
}
.ws-main {
  min-width: 0;
  padding: 40px clamp(24px, 4vw, 56px) 96px;
}
.ws-content { max-width: 1040px; }

/* ── sidebar (navigation only; brand + theme + account live in the header) ── */
.ws-side {
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  display: flex;
  flex-direction: column;
  background: var(--ws-side-bg);
  border-right: 1px solid var(--ws-side-line);
  padding: 16px 14px;
}

.ws-nav { display: flex; flex-direction: column; gap: 2px; }
.ws-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ws-side-text);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
.ws-nav__item[hidden] { display: none; }  /* [hidden] must beat display:flex */
.ws-nav__item:hover { background: var(--ws-side-hover); color: var(--ws-side-text-strong); }
.ws-nav__item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ws-yellow); }
.ws-nav__item.is-active {
  background: var(--ws-side-active);
  color: var(--ws-side-text-strong);
}
/* The selection mark — yellow, per CI. */
.ws-nav__item.is-active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 7px; bottom: 7px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--ws-yellow);
}
.ws-nav__icon { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.ws-nav__item.is-soon { cursor: default; opacity: 0.45; }
.ws-nav__item.is-soon:hover { background: none; color: var(--ws-side-text); }
.ws-nav__soon {
  margin-left: auto;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--ws-side-line);
  border-radius: 999px;
  padding: 1px 7px;
}
.ws-nav__sep {
  height: 1px;
  background: var(--ws-side-line);
  margin: 12px 10px;
}

/* ── masthead: greeting + lab log ─────────────────────────────────────── */
.ws-masthead { margin: 4px 0 28px; }
.ws-masthead__hi {
  margin: 0;
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 750;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text);
}
.ws-hl {
  background-image: linear-gradient(to top, var(--ws-yellow) 0.34em, transparent 0.34em);
  padding: 0 0.06em;
  margin: 0 -0.06em;
}
[data-theme="dark"] .ws-hl {
  background-image: linear-gradient(to top,
    color-mix(in srgb, var(--ws-yellow) 36%, transparent) 0.34em, transparent 0.34em);
}
.ws-masthead__sub {
  margin: 10px 0 0;
  font-size: var(--fs-body, 0.875rem);
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.ws-log {
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  font-size: var(--fs-caption);
  color: var(--muted);
}
.ws-log__item { display: inline-flex; align-items: baseline; gap: 5px; }
.ws-log__item + .ws-log__item:not(:empty) {
  border-left: 1px solid var(--ws-hairline);
  margin-left: 14px;
  padding-left: 14px;
}
.ws-log__n {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--text);
}

.ws-safety {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--ws-hairline);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: var(--fs-caption);
  color: var(--muted);
}
.ws-safety::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--success);
  flex: none;
}

/* ── panels (the bounded regions) ─────────────────────────────────────── */
.ws-panel {
  background: var(--panel);
  border: 1px solid var(--ws-hairline);
  border-radius: var(--ws-radius);
  box-shadow: var(--ws-shadow);
  overflow: hidden;
}
.ws-panel + .ws-panel { margin-top: 22px; }
.ws-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ws-hairline);
}
/* THE eyebrow (CI §5): 11px · 600 · 0.1em caps — one treatment across both
   rooms (the Workbench's section labels use the identical metrics). */
.ws-panel__title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ws-panel__title--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.ws-chip {
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: var(--bg-subtle);
  border-radius: 999px;
  padding: 2px 9px;
}
.ws-panel__body { padding: 20px; }
.ws-panel__body--scroll {
  padding: 0;
  max-height: min(58vh, 560px);
  overflow-y: auto;
}

/* seat indicator: figures + a real bar (not glyphs) */
.ws-seatbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.ws-seatbar__track {
  width: 84px;
  height: 5px;
  border-radius: 999px;
  background: var(--bg-subtle);
  overflow: hidden;
}
.ws-seatbar__fill {
  /* display:block is load-bearing — this is a <span>, and width on an
     inline element is silently ignored (the "stuck-empty seat bar" bug) */
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--text);
  transition: width 0.3s ease;
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.ws-btn {
  font: inherit;
  font-size: var(--fs-body, 0.875rem);
  font-weight: 600;
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  border: 1px solid transparent;
  /* 0.12s: the one shared micro-timing (site.css buttons use the same). */
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.ws-btn--primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.ws-btn--primary:hover { transform: translateY(-1px); }
.ws-btn--ghost { background: var(--panel); color: var(--text); border-color: var(--line-strong); }
.ws-btn--ghost:hover { background: var(--panel-hover); }
.ws-btn--sm { padding: 6px 11px; font-size: var(--fs-caption); }
.ws-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.ws-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ── lab cards ────────────────────────────────────────────────────────── */
.ws-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
}
.ws-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--ws-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.ws-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ws-shadow);
  border-color: var(--line-strong);
}
.ws-card:focus-within { border-color: var(--line-strong); }

/* The 45° plate — graph paper + one RISING stroke in the lab's colour.
   (CSS gotcha: 45deg draws a falling diagonal; 135deg rises.) */
.ws-card__plate {
  height: 82px;
  flex: none;
  background:
    linear-gradient(135deg,
      transparent calc(50% - 0.8px),
      var(--tab, var(--ws-tab-1)) calc(50% - 0.8px),
      var(--tab, var(--ws-tab-1)) calc(50% + 0.8px),
      transparent calc(50% + 0.8px)),
    repeating-linear-gradient(to right, var(--ws-grid) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to bottom, var(--ws-grid) 0 1px, transparent 1px 14px),
    var(--ws-plate);
  border-bottom: 1px solid var(--ws-hairline);
}
.ws-tab-0 { --tab: var(--ws-tab-0); }
.ws-tab-1 { --tab: var(--ws-tab-1); }
.ws-tab-2 { --tab: var(--ws-tab-2); }

/* A sketch's plate (E2b): the rising best-fit line belongs to LABS, so a
   sketch keeps the graph paper and wears its identity colour as an edge. */
.ws-card__plate--sketch {
  background:
    repeating-linear-gradient(to right, var(--ws-grid) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to bottom, var(--ws-grid) 0 1px, transparent 1px 14px),
    var(--ws-plate);
  box-shadow: inset 3px 0 0 var(--tab, var(--ws-tab-1));
}


.ws-card__body { padding: 12px 14px 4px; }
.ws-card__title {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.008em;
  color: var(--text);
  word-break: break-word;
}
.ws-card__meta {
  margin-top: 4px;
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.ws-card__row { display: flex; gap: 13px; padding: 8px 14px 12px; margin-top: auto; }
.ws-card__row button {
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ws-card__row button:hover { color: var(--text); }
.ws-card__row button.is-danger:hover { color: var(--danger); }
.ws-card__row button:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 2px; }

/* ── empty state ──────────────────────────────────────────────────────── */
.ws-empty { max-width: 520px; }
.ws-empty__plate {
  height: 116px;
  position: relative;
  border: 1px solid var(--ws-hairline);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background:
    linear-gradient(135deg,
      transparent calc(50% - 1px),
      var(--muted) calc(50% - 1px),
      var(--muted) calc(50% + 1px),
      transparent calc(50% + 1px)),
    repeating-linear-gradient(to right, var(--ws-grid) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to bottom, var(--ws-grid) 0 1px, transparent 1px 14px),
    var(--ws-plate);
}
.ws-empty__plate::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-left: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  opacity: 0.55;
}
.ws-empty__body {
  border: 1px solid var(--ws-hairline);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--panel);
  padding: 18px 20px 20px;
}
.ws-empty__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--text); }
.ws-empty__copy { margin: 0 0 14px; font-size: var(--fs-body); line-height: 1.5; color: var(--muted); }

/* ── the class ledger ─────────────────────────────────────────────────── */
.ws-roster__table { border-collapse: collapse; width: 100%; }
.ws-roster__table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel);
  padding: 12px 14px 10px 20px;
  /* The campus is warm — the header seam matches the body rules. */
  border-bottom: 1px solid var(--ws-hairline);
}
.ws-roster__table td {
  padding: 12px 14px 12px 20px;
  border-bottom: 1px solid var(--ws-hairline);
  font-size: var(--fs-body);
}
.ws-roster__table tbody tr:last-child td { border-bottom: none; }
.ws-roster__table tbody tr { transition: background 0.1s ease; }
.ws-roster__table tbody tr:hover { background: color-mix(in srgb, var(--panel-hover) 65%, transparent); }
.ws-roster__user {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
/* Display name leads (proportional face — it's a NAME); the login handle sits
   beneath in the roster's mono. The edit control stays quiet until hover. */
.ws-roster__name { display: block; font-family: inherit; font-size: 13.5px; font-weight: 650; }
.ws-roster__handle {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.ws-roster__edit {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  padding: 1px 4px;
  margin-top: 2px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
}
.ws-roster__table tr:hover .ws-roster__edit,
.ws-roster__edit:focus-visible { opacity: 1; }
.ws-roster__edit:hover { color: var(--text); background: var(--panel-hover); }
/* Password cell: masked value + the eye. */
.ws-roster__pass { white-space: nowrap; }
.ws-roster__passval {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--text);
  letter-spacing: 0.03em;
}
.ws-roster__passna { color: var(--muted); cursor: help; }
.ws-roster__eye {
  vertical-align: middle;
  margin-left: 7px;
  padding: 3px 5px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
}
.ws-roster__eye svg { width: 15px; height: 15px; display: block; }
.ws-roster__eye:hover { color: var(--text); background: var(--panel-hover); }
.ws-roster__eye[aria-pressed="true"] { color: var(--text); }
.ws-roster__count, .ws-roster__date { color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-roster__actions { text-align: right; white-space: nowrap; padding-right: 20px !important; }
.ws-roster__actions button {
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  margin-left: 16px;
  cursor: pointer;
}
.ws-roster__actions button:hover { color: var(--text); }
.ws-roster__actions button.is-danger:hover { color: var(--danger); }
.ws-roster__actions button:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 2px; }
.ws-roster__empty { padding: 24px 20px; color: var(--muted); font-size: var(--fs-body); }

/* ── drill-in (a student's work, inside the Class view) ───────────────── */
.ws-back {
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-bottom: 14px;
}
.ws-back:hover { color: var(--text); }
.ws-back:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 2px; }
.ws-readonly {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-caption);
  color: var(--muted);
}
.ws-readonly::before {
  content: "";
  width: 6px; height: 6px;
  border: 1.5px solid var(--muted);
  border-radius: var(--radius-full);
  flex: none;
}

/* ── credential slip ──────────────────────────────────────────────────── */
.ws-cred .plotlab-dialog__title { margin-bottom: 4px; }
.ws-cred__slip {
  margin: 12px 0 4px;
  border: 1px solid var(--ws-hairline);
  border-radius: var(--radius);
  background: var(--ws-plate);
  padding: 14px 16px;
}
.ws-cred__row { display: flex; align-items: baseline; gap: 14px; padding: 6px 0; }
.ws-cred__row + .ws-cred__row { border-top: 1px solid var(--ws-hairline); }
.ws-cred__key {
  width: 86px;
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ws-cred__val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  user-select: all;
}
.ws-cred__note {
  margin: 12px 0 4px;
  max-width: 340px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--muted);
}

/* ── name/rename prompt ───────────────────────────────────────────────── */
.ws-prompt__input {
  width: 100%;
  margin: 12px 0 2px;
  font: inherit;
  /* --fs-title (16px): the hero field — and ≥16px stops iOS zoom-on-focus. */
  font-size: var(--fs-title);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 9px 11px;
}
/* Text inputs focus with the soft accent glow (rings are for buttons/tabs). */
.ws-prompt__input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── paywall ──────────────────────────────────────────────────────────── */
.ws-paywall {
  max-width: 520px;
  margin: 6vh auto 0;
  border: 1px solid var(--ws-hairline);
  border-radius: var(--ws-radius);
  background: var(--panel);
  box-shadow: var(--ws-shadow);
  overflow: hidden;
}
.ws-paywall__plate {
  height: 96px;
  background:
    linear-gradient(135deg,
      transparent calc(50% - 1.5px),
      var(--ws-yellow) calc(50% - 1.5px),
      var(--ws-yellow) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)),
    repeating-linear-gradient(to right, var(--ws-grid) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to bottom, var(--ws-grid) 0 1px, transparent 1px 14px),
    var(--ws-plate);
  border-bottom: 1px solid var(--ws-hairline);
}
.ws-paywall__body { padding: 22px 26px 26px; }
.ws-paywall__title {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--text);
}
.ws-paywall__list { list-style: none; margin: 0 0 18px; padding: 0; }
.ws-paywall__list li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text);
}
.ws-paywall__list li + li { border-top: 1px solid var(--ws-hairline); }
.ws-paywall__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 14px;
  width: 8px; height: 5px;
  border-left: 1.5px solid var(--success);
  border-bottom: 1.5px solid var(--success);
  transform: rotate(-45deg);
}
.ws-paywall__foot { margin: 14px 0 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }

/* ── the Home dashboard ───────────────────────────────────────────────── */
/* The workspace front page: room cards, section cards, real figures, tips.
   Same plate/hairline grammar as the shelves; yellow only as the plate's
   rising stroke + the active nav marker. */
.ws-home__hero { max-width: 560px; margin: 0 0 26px; }
.ws-home__eyebrow {
  margin: 26px 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ws-home__eyebrow:first-child { margin-top: 0; }
.ws-home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.ws-appcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--ws-hairline);
  border-radius: var(--ws-radius);
  background: var(--panel);
  box-shadow: var(--ws-shadow);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.ws-appcard:hover { border-color: var(--line-strong); text-decoration: none; }
.ws-appcard__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 74px;
  color: var(--text);
  background:
    linear-gradient(135deg,
      transparent calc(50% - 1px),
      var(--ws-yellow) calc(50% - 1px),
      var(--ws-yellow) calc(50% + 1px),
      transparent calc(50% + 1px)),
    repeating-linear-gradient(to right, var(--ws-grid) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to bottom, var(--ws-grid) 0 1px, transparent 1px 14px),
    var(--ws-plate);
  border-bottom: 1px solid var(--ws-hairline);
}
.ws-appcard__plate svg { width: 30px; height: 30px; }
.ws-appcard__body { display: block; padding: 12px 14px 14px; }
.ws-appcard__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
}
.ws-appcard__chip {
  font-style: normal;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--ws-hairline);
  border-radius: 999px;
  padding: 1px 7px;
}
.ws-appcard__dek {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--muted);
}
.ws-seccard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 13px 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--ws-hairline);
  border-radius: var(--ws-radius);
  background: var(--panel);
  box-shadow: var(--ws-shadow);
  transition: border-color 0.15s ease;
}
.ws-seccard:hover { border-color: var(--line-strong); }
.ws-seccard__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
}
.ws-seccard__meta { font-size: var(--fs-caption); color: var(--muted); }
.ws-home__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 18px;
  border: 1px solid var(--ws-hairline);
  border-radius: var(--ws-radius);
  background: var(--panel);
  box-shadow: var(--ws-shadow);
  overflow: hidden;
}
.ws-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 18px;
  border-right: 1px solid var(--ws-hairline);
}
.ws-stat:last-child { border-right: none; }
.ws-stat__n {
  font-size: 22px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-stat__label { font-size: var(--fs-caption); color: var(--muted); }
.ws-home__tips {
  max-width: 560px;
  margin: 0 0 16px;
  padding-left: 20px;
}
.ws-home__tips li {
  padding: 4px 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
}
.ws-home__tips li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }

/* A lapsed plan's one honest line (never a wall). */
.ws-lapse {
  max-width: 640px;
  margin: 0 0 18px;
  padding: 10px 14px;
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--text);
  border: 1px solid var(--ws-hairline);
  border-left: 3px solid var(--ws-yellow);
  border-radius: var(--ws-radius);
  background: var(--panel);
}
.ws-lapse a { color: var(--text); font-weight: 650; }

/* ── misc ─────────────────────────────────────────────────────────────── */
.ws-msg { color: var(--muted); font-size: var(--fs-body); padding: 20px; }

/* ── entrance ─────────────────────────────────────────────────────────── */
/* Entrance: only elements visible at first paint animate. View panels shown
   on a later tab-switch appear instantly (animating a display:none element and
   then revealing it strands it mid-fill). */
@media (prefers-reduced-motion: no-preference) {
  .ws-masthead, .ws-paywall, .ws-empty, #viewHome > *, #viewLabs > * {
    animation: ws-rise 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .ws-masthead { animation-delay: 0.02s; }
  #viewHome > *, #viewLabs > * { animation-delay: 0.08s; }
  @keyframes ws-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── E1 · Assignments ──────────────────────────────────────────────────── */
/* Ledger rows for assignments (rides .ws-roster__table). */
.ws-icons { white-space: nowrap; text-align: right; padding-right: 20px !important; }
.ws-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  /* the site button primitive's 10px/16px padding must not squeeze a 30px
     box to zero content — it grew the box to 34px and flex-shrank the icon
     to nothing (every row icon rendered as an empty square) */
  padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); color: var(--muted);
  cursor: pointer; vertical-align: middle;
}
.ws-iconbtn:hover { background: var(--panel-hover); color: var(--text); }
.ws-iconbtn:focus-visible { outline: none; box-shadow: var(--focus); }
.ws-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.ws-iconbtn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ws-iconbtn + .ws-iconbtn { margin-left: 6px; }
.ws-iconbtn.is-open svg { transform: rotate(180deg); }
.ws-atitle { font-weight: 650; color: var(--text); }
.ws-ameta { margin-top: 2px; font-size: var(--fs-caption); color: var(--muted); }

/* Status pill — fully round (CI §5: campus status pills are round). */
.ws-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 650;
  border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.ws-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ws-status--todo      { color: var(--muted);    background: var(--bg-subtle); }
.ws-status--progress  { color: var(--warning);  background: var(--warning-soft); }
.ws-status--submitted { color: var(--accent-2); background: var(--accent-soft); }
.ws-status--marked    { color: var(--success);  background: var(--success-soft); }

/* Mini progress readout (the seatbar mechanics, assignment-sized). */
.ws-prog { display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--muted); }
.ws-prog__track { width: 88px; height: 5px; border-radius: 999px; background: var(--bg-subtle); overflow: hidden; }
.ws-prog__fill { height: 100%; border-radius: 999px; background: var(--text); }

/* Expandable detail row (comments/score for a student; marking for a teacher). */
.ws-drow { display: none; }
.ws-drow.is-open { display: table-row; }
.ws-drow > td { background: var(--ws-plate); padding: 0 20px; border-bottom: 1px solid var(--ws-hairline); }
.ws-detail { padding: 16px 0 18px; max-width: 660px; }
.ws-detail__key { margin: 14px 0 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ws-detail__key:first-child { margin-top: 0; }
.ws-detail__score { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text); }
.ws-detail__score small { font-size: 13px; font-weight: 600; color: var(--muted); }
.ws-detail__comment { margin: 6px 0 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.ws-detail__comment ul, .ws-detail__comment ol { margin: 6px 0; padding-left: 22px; }

/* Hand-in (E1 tile 2): the student's submit affordance + the teacher's stamp. */
.ws-handin { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: var(--fs-caption); font-weight: 600; }
.ws-handin--done, .ws-handin--in { color: var(--success); }
.ws-handin--done::before, .ws-handin--in::before { content: "✓"; font-weight: 700; }
.ws-handin__hint { color: var(--muted); }
.ws-handin__hint + .ws-btn { margin-top: 10px; }

/* The new-assignment form. */
.ws-field { margin-bottom: 18px; }
.ws-field:last-child { margin-bottom: 0; }
.ws-flabel { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ws-flabel small { margin-left: 8px; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--muted); opacity: 0.75; }
.ws-input {
  width: 100%; font: inherit; font-size: var(--fs-body); color: var(--text);
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 9px 11px;
}
.ws-input::placeholder { color: var(--muted); }
.ws-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ws-input--title { font-size: var(--fs-title); font-weight: 600; }
.ws-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ws-formfoot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--ws-hairline); }

/* The tiny rich-text editor (B · I · lists · link — nothing more). */
.ws-rte { border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.ws-rte:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ws-rte__bar { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--ws-hairline); background: var(--bg-subtle); }
.ws-rte__btn { min-width: 28px; height: 26px; padding: 0 7px; border: none; background: none; border-radius: 3px; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ws-rte__btn:hover { background: var(--panel); color: var(--text); }
.ws-rte__btn:focus-visible { outline: none; box-shadow: var(--focus); }
.ws-rte__area { min-height: 92px; padding: 11px 12px; font-size: var(--fs-body); line-height: 1.55; color: var(--text); }
.ws-rte__area:focus-visible { outline: none; }
.ws-rte__area ul, .ws-rte__area ol { margin: 6px 0; padding-left: 22px; }

/* Attachment links (uploads land with the Storage tile). */
.ws-attach { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 11px; border: 1px solid var(--ws-hairline); border-radius: var(--radius); background: var(--panel); font-size: var(--fs-caption); color: var(--text); }
.ws-attach a { color: var(--text); overflow-wrap: anywhere; }
.ws-attach svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; color: var(--muted); }
.ws-attach button { margin-left: auto; border: none; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 16px; line-height: 1; }
.ws-attach button:hover { color: var(--danger); }

/* Element picker (Workbench plot · Sketch E2 · Report E3). */
.ws-elem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ws-eopt { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--panel); cursor: pointer; }
.ws-eopt.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ws-eopt.is-soon { opacity: 0.55; cursor: default; }
.ws-eopt__ico { width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ws-eopt__name { font-size: var(--fs-body); font-weight: 650; color: var(--text); }
.ws-eopt__note { font-size: var(--fs-caption); color: var(--muted); }
.ws-soon { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 7px; color: var(--muted); }

/* Student picker (checkbox roster; editable any time). */
.ws-pick { border: 1px solid var(--ws-hairline); border-radius: var(--radius); overflow: hidden; }
.ws-pick__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--ws-hairline); background: var(--bg-subtle); font-size: var(--fs-caption); color: var(--muted); }
.ws-pick__all { font: inherit; font-size: var(--fs-caption); font-weight: 600; color: var(--muted); background: none; border: none; cursor: pointer; }
.ws-pick__all:hover { color: var(--text); }
.ws-pick__list { max-height: 236px; overflow: auto; }
.ws-pick__item { display: flex; align-items: center; gap: 11px; padding: 8px 12px; cursor: pointer; }
.ws-pick__item + .ws-pick__item { border-top: 1px solid var(--ws-hairline); }
.ws-pick__item:hover { background: var(--panel-hover); }
.ws-pick__name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; color: var(--text); }

/* Shared checkbox (picker + element options). */
.ws-check { width: 17px; height: 17px; border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--bg); flex: none; display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.ws-check svg { width: 11px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.is-on > .ws-check, .ws-check.is-on { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ── narrow: the sidebar folds into a nav strip under the header ───────── */
@media (max-width: 880px) {
  .ws-app { grid-template-columns: 1fr; min-height: 0; }
  .ws-side {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-right: none;
    border-bottom: 1px solid var(--ws-side-line);
  }
  .ws-nav { flex-direction: row; overflow-x: auto; width: 100%; }
  .ws-nav__item { width: auto; white-space: nowrap; padding: 7px 10px; }
  .ws-nav__item.is-active::before {
    left: 10px; right: 10px; top: auto; bottom: 0;
    width: auto; height: 2px;
    border-radius: 2px 2px 0 0;
  }
  .ws-nav__sep { display: none; }
  .ws-nav__item.is-soon { display: none; }
  .ws-main { padding: 24px 16px 72px; }
  .ws-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
  .ws-roster__table th:nth-child(3), .ws-roster__table .ws-roster__date { display: none; }
  .ws-panel__body { padding: 14px; }
  /* E1: form grids + the element picker stack on a phone. */
  .ws-fgrid, .ws-elem { grid-template-columns: 1fr; }
}

/* the Apps drawer tile pins to the sidebar's bottom (review tile B) */
.ws-side__spring { flex: 1; }

/* A doc's plate (tile C): the Write room's paper — heading + text lines in
   the identity colour, no graph paper (that belongs to labs/sketches). */
.ws-card__plate--doc {
  background:
    linear-gradient(to right, var(--tab, var(--ws-tab-1)) 0 34%, transparent 34%) 18px 18px / 100% 5px no-repeat,
    linear-gradient(var(--ws-grid) 0 1px, transparent 1px) 18px 34px / 62% 12px repeat-y,
    var(--ws-plate);
  background-origin: content-box;
  padding: 0 18px;
  box-sizing: border-box;
}

/* jump-nav above the file panels (Moey note 3) */
.ws-jump { display: flex; gap: 6px; margin-bottom: 14px; }
.ws-jump__link {
  font: inherit; font-size: var(--fs-caption); font-weight: 600;
  color: var(--muted); background: var(--panel);
  border: 1px solid var(--ws-hairline); border-radius: 999px;
  padding: 4px 13px; cursor: pointer;
}
.ws-jump__link:hover { color: var(--text); border-color: var(--line-strong); }
.ws-jump__link:focus-visible { outline: none; box-shadow: var(--focus); }

/* ── EM3 · rubrics (maker · grading · student view) ─────────────────────────── */
.ws-rubmaker { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 14px; }
.ws-rubcrit {
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--panel); padding: 12px 14px;
}
.ws-rubcrit__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ws-rubcrit__label { flex: 1 1 auto; font-weight: 650; }
.ws-rubcrit__out { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: var(--fs-caption); }
.ws-rubcrit__out input { width: 70px; }
.ws-rubcrit__drow { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ws-rubcrit__dscore { width: 74px; flex: none; font-variant-numeric: tabular-nums; text-align: center; }
.ws-rubcrit__dtext { flex: 1 1 auto; }
.ws-rubcrit__adddesc {
  font: inherit; font-size: var(--fs-caption); font-weight: 600; color: var(--muted);
  background: none; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 5px 12px; cursor: pointer; margin-top: 2px;
}
.ws-rubcrit__adddesc:hover:not(:disabled) { color: var(--text); border-color: var(--text); }
.ws-rubcrit__adddesc:disabled { opacity: 0.4; cursor: default; }
.ws-rubcrit .ws-iconbtn { font-size: 15px; line-height: 1; flex: none; }

/* the read-only descriptor grid (grading reference + student view) */
.ws-rubdesc { width: 100%; border-collapse: collapse; margin: 6px 0 2px; }
.ws-rubdesc td { border: 1px solid var(--ws-hairline); padding: 6px 10px; font-size: var(--fs-caption); vertical-align: top; }
.ws-rubdesc__score { width: 64px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-rubdesc__text { color: var(--text); }

/* the grading rows (teacher) / score rows (student) */
.ws-rubgrade { max-width: 560px; margin: 2px 0 4px; }
.ws-rubgrade__row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ws-rubgrade__label { flex: 1 1 auto; font-weight: 600; }
.ws-rubgrade__in { width: 78px; flex: none; text-align: center; }
.ws-rubgrade__max, .ws-rubgrade__got { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-rubgrade__got { color: var(--text); font-weight: 650; }
.ws-rubgrade__desc { margin: -2px 0 10px; }
.ws-rubgrade__desc summary {
  font-size: var(--fs-caption); color: var(--muted); cursor: pointer;
  list-style-position: inside;
}
.ws-rubgrade__desc summary:hover { color: var(--text); }
.ws-rubgrade__total {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line-strong);
  font-weight: 700; font-variant-numeric: tabular-nums;
}

/* the assignment form's marking picker */
.ws-markpick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ws-markpick .ws-eopt { user-select: none; text-align: left; font: inherit; color: inherit; }
.ws-markpick__sel { grid-column: 1 / -1; }
@media (max-width: 760px) { .ws-markpick { grid-template-columns: 1fr; } }