/* ==========================================================================
   CapabilityNext CMS — admin & portal design system
   Light, spacious, pastel. Self-hosted, no framework, no build.
   Separate from the public site's styles.css — do not cross-import.
   ========================================================================== */

:root {
  /* ---- neutrals ---- */
  --canvas:      #fbfaff;
  --surface:     #ffffff;
  --surface-2:   #f6f5fc;
  --ink:         #26233a;
  --ink-soft:    #56526e;
  --ink-faint:   #8b8798;
  --border:      #e9e6f4;
  --border-2:    #ded9ee;
  --focus:       #7c3aed;

  /* ---- bold families: tint (pale bg, e.g. dashboard cards) / mid (borders,
     icons) / ink (the solid, saturated fill used for buttons, links, pills) ---- */
  --lavender-tint:#efeafc; --lavender-mid:#a78bfa; --lavender-ink:#6d28d9;
  --mint-tint:    #e3f6ee; --mint-mid:   #34d399; --mint-ink:   #047857;
  --peach-tint:   #fdeee2; --peach-mid:  #fb923c; --peach-ink:  #c2410c;
  --sky-tint:     #e5f0fb; --sky-mid:    #60a5fa; --sky-ink:    #1d4ed8;
  --rose-tint:    #fdeaf1; --rose-mid:   #f472b6; --rose-ink:   #be185d;
  --butter-tint:  #fbf3d9; --butter-mid: #fbbf24; --butter-ink: #b45309;
  --periwinkle-tint:#eaecfb; --periwinkle-mid:#818cf8; --periwinkle-ink:#4338ca;
  --sage-tint:    #ecf3e6; --sage-mid:   #4ade80; --sage-ink:   #15803d;
  --neutral-tint: #f0eef7; --neutral-mid:#94a3b8; --neutral-ink:#334155;

  /* ---- scale ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(38,35,58,.05), 0 1px 3px rgba(38,35,58,.05);
  --shadow-2: 0 4px 12px -2px rgba(38,35,58,.10), 0 2px 6px -2px rgba(38,35,58,.06);
  --sidebar-w: 244px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-cms-theme="light"]) {
    --canvas:#17161d; --surface:#1e1d26; --surface-2:#24222e; --ink:#ecebf2;
    --ink-soft:#b7b3c6; --ink-faint:#8b869c; --border:#2f2d3a; --border-2:#3a3748;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--lavender-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 var(--s3); font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 var(--s3); color: var(--ink-soft); }
.icon { display: inline-block; vertical-align: -0.15em; flex: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  padding: var(--s5) var(--s3); position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s2);
  /* keep it scrollable for long nav, but no visible scrollbar chrome */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sidebar__brand {
  display: flex; align-items: center; gap: var(--s3);
  font-weight: 700; font-size: 1rem; color: var(--ink); padding: 0 var(--s2) var(--s4);
}
.sidebar__mark {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--lavender-mid), var(--periwinkle-mid));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .8rem;
}
.nav-link {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  color: var(--ink-soft); font-weight: 550; font-size: .875rem;
}
.nav-link:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.nav-link.is-active { background: var(--lavender-tint); color: var(--lavender-ink); }
.nav-link .icon { opacity: .8; }
.nav-group-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); padding: var(--s4) var(--s3) var(--s2);
}
.sidebar__spacer { flex: 1; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s6); border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 20;
}
.topbar .crumbs { flex: 1; font-size: .85rem; color: var(--ink-faint); display: flex; gap: var(--s2); flex-wrap: wrap; }
.topbar .crumbs a { color: var(--ink-soft); }
.topbar .crumbs .sep { color: var(--border-2); }
.usermenu { display: flex; align-items: center; gap: var(--s3); font-size: .85rem; color: var(--ink-soft); }
.avatar {
  width: 30px; height: 30px; border-radius: var(--r-pill); flex: none;
  background: var(--periwinkle-tint); color: var(--periwinkle-ink);
  display: grid; place-items: center; font-weight: 700; font-size: .78rem;
}
.content { padding: var(--s6); width: 100%; max-width: 100%; }
@media (min-width: 1600px) { .content { padding: var(--s6) var(--s7); } }

/* ---------- page header ---------- */
.page-header { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap; }
.page-header__text { flex: 1; min-width: 260px; }
.page-header h1 { margin-bottom: var(--s2); }
.page-header .lede { color: var(--ink-faint); font-size: .95rem; margin: 0; }
.page-header__actions { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4); border-radius: var(--r-pill);
  font: inherit; font-weight: 600; font-size: .875rem; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--ink);
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--lavender-ink); border-color: var(--lavender-ink); color: #fff; }
.btn--primary:hover { background: #5b21b6; }
.btn--ghost { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn--ghost:hover { background: var(--surface-2); }

/* In-page jump navigation (anchors to sections on the same page) — reads as
   a real link, not a button, since that's what it is. */
.jump-link { color: var(--lavender-ink); font-weight: 650; font-size: .85rem; text-decoration: none; padding: 2px 0; border-bottom: 1px solid transparent; }
.jump-link:hover { border-bottom-color: var(--lavender-ink); text-decoration: none; }
.btn--danger { color: var(--rose-ink); border-color: var(--rose-mid); background: var(--rose-tint); }
.btn--sm { padding: var(--s1) var(--s3); font-size: .8rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- pills / capsules ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; margin: 2px; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 650; letter-spacing: .01em; line-height: 1.5;
  background: var(--neutral-tint); color: var(--neutral-ink); white-space: nowrap;
}
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.pill--lavender  { background: var(--lavender-ink);  color: #fff; }
.pill--mint      { background: var(--mint-ink);      color: #fff; }
.pill--peach     { background: var(--peach-ink);     color: #fff; }
.pill--sky       { background: var(--sky-ink);       color: #fff; }
.pill--rose      { background: var(--rose-ink);      color: #fff; }
.pill--butter    { background: var(--butter-ink);    color: #fff; }
.pill--periwinkle{ background: var(--periwinkle-ink);color: #fff; }
.pill--sage      { background: var(--sage-ink);      color: #fff; }
.pill--neutral   { background: var(--neutral-ink);   color: #fff; }

/* ---------- cards / sections ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.section { margin-bottom: var(--s6); }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s4);
}
.section__head h2 { margin: 0; }
.section__body { padding: var(--s5); }

/* collapsible card (a <details> styled like a .card section) */
.meta-collapse { padding: 0; }
.meta-collapse > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); }
.meta-collapse > summary::-webkit-details-marker { display: none; }
.meta-collapse > summary h2 { margin: 0; }
.meta-collapse > summary:hover h2 { color: var(--lavender-ink); }
.meta-collapse__chev { color: var(--ink-faint); font-size: .8rem; transition: transform .15s ease; align-self: center; }
.meta-collapse[open] > summary .meta-collapse__chev { transform: rotate(90deg); }
.meta-collapse[open] > summary { border-bottom: 1px solid var(--border); }
.meta-collapse > .section__body { padding-top: var(--s4); }

/* ---------- stat tiles ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s5); box-shadow: var(--shadow-1); position: relative; overflow: hidden;
}
.stat::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px;
  border-radius: 50%; background: var(--accent-tint, var(--lavender-tint)); opacity: .8;
}
.stat__label { position: relative; font-size: .78rem; color: var(--ink-faint); font-weight: 600; }
.stat__value { position: relative; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; margin: var(--s2) 0 0; }
.stat__meta  { position: relative; font-size: .78rem; color: var(--ink-soft); margin-top: var(--s2); }
.stat[data-accent="lavender"]  { --accent-tint: var(--lavender-tint); }
.stat[data-accent="mint"]      { --accent-tint: var(--mint-tint); }
.stat[data-accent="peach"]     { --accent-tint: var(--peach-tint); }
.stat[data-accent="sky"]       { --accent-tint: var(--sky-tint); }
.stat[data-accent="rose"]      { --accent-tint: var(--rose-tint); }
.stat[data-accent="butter"]    { --accent-tint: var(--butter-tint); }
.stat[data-accent="periwinkle"]{ --accent-tint: var(--periwinkle-tint); }
.stat[data-accent="sage"]      { --accent-tint: var(--sage-tint); }

/* ---------- tables ---------- */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.table-toolbar { display: flex; gap: var(--s3); align-items: center; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.table-toolbar .field { margin: 0; }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data thead th {
  position: sticky; top: 0; background: var(--surface-2); text-align: left;
  padding: var(--s3) var(--s5); font-size: .74rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--border-2);
}
table.data thead th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.data thead th.is-sortable:hover { color: var(--lavender-ink); background: var(--lavender-tint); }
table.data thead th .sort-arrow { display: inline-block; margin-left: 4px; opacity: .35; font-size: .7em; }
table.data thead th.is-sorted { color: var(--lavender-ink); }
table.data thead th.is-sorted .sort-arrow { opacity: 1; }
table.data tbody td { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); color: var(--ink-soft); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { cursor: pointer; transition: background .1s ease; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data th.num, table.data td.num { text-align: center; font-variant-numeric: tabular-nums; }
table.data td .t-primary { color: var(--ink); font-weight: 600; }
table.data td .t-sub { color: var(--ink-faint); font-size: .8rem; }

/* ---------- forms ---------- */
/* Base control styling is admin-wide (bare element selectors), not scoped to
   .field, so the many inline mini-forms on detail pages match the main form
   screens. .field only adds layout: spacing, label, hint, error text. */
input:not([type]), input[type=text], input[type=email], input[type=password],
input[type=search], input[type=number], input[type=date], input[type=datetime-local],
input[type=time], input[type=month], input[type=week], input[type=url], input[type=tel],
input[type=file], select, textarea {
  width: 100%; max-width: 100%; font: inherit; font-size: .9rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-sm);
  padding: var(--s3) var(--s3); box-sizing: border-box;
}
input[type=file] { padding: var(--s2) var(--s3); }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent);
}
input[type=checkbox], input[type=radio] { width: auto; max-width: none; }

.field { margin-bottom: var(--s4); }
.row > .field { min-width: 0; }         /* let inline mini-form fields shrink, not overflow */
.row > .field:only-of-type { flex: 1; }
.field label { display: block; font-weight: 600; font-size: .82rem; color: var(--ink); margin-bottom: var(--s2); }
.field .hint { font-size: .78rem; color: var(--ink-faint); margin-top: var(--s2); }
.field.error input, .field.error select, .field.error textarea { border-color: var(--rose-mid); }
.field .err { color: var(--rose-ink); font-size: .78rem; margin-top: var(--s2); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s5); align-items: start; }
.form-grid .field--checks { margin-bottom: var(--s3); }
.checks { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); padding: 2px 0; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .9rem; color: var(--ink); cursor: pointer; }
.check-inline input { flex: none; width: auto; margin: 0; }
.form-actions { display: flex; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--border); }

/* ---------- empty state ---------- */
.empty { text-align: center; padding: var(--s7) var(--s5); color: var(--ink-faint); }
.empty__glyph { width: 56px; height: 56px; border-radius: var(--r-lg); background: var(--lavender-tint); color: var(--lavender-ink); display: grid; place-items: center; margin: 0 auto var(--s4); }
.empty h3 { color: var(--ink-soft); }

/* ---------- flashes / toasts ---------- */
.flashes { position: fixed; top: var(--s4); right: var(--s4); z-index: 100; display: flex; flex-direction: column; gap: var(--s2); max-width: 360px; }
.toast { background: var(--surface); border: 1px solid var(--border-2); border-left: 4px solid var(--neutral-mid); border-radius: var(--r-sm); box-shadow: var(--shadow-2); padding: var(--s3) var(--s4); font-size: .85rem; }
.toast--success { border-left-color: var(--mint-mid); }
.toast--error   { border-left-color: var(--rose-mid); }
.toast--info    { border-left-color: var(--sky-mid); }

/* ---------- login ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--s5); background:
  radial-gradient(60% 50% at 20% 10%, var(--lavender-tint), transparent 70%),
  radial-gradient(50% 50% at 90% 90%, var(--sky-tint), transparent 70%), var(--canvas); }
.auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--s6); }
.auth-card .sidebar__mark { width: 40px; height: 40px; font-size: 1rem; margin-bottom: var(--s4); }
.auth-card h1 { font-size: 1.25rem; }

/* ---------- misc ---------- */
.muted { color: var(--ink-faint); }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.chips { display: flex; gap: 12px 12px; flex-wrap: wrap; padding: 4px 0; margin-bottom: 20px; }
.chips:last-child { margin-bottom: 0; }
.seat-meter { height: 8px; border-radius: var(--r-pill); background: var(--neutral-tint); overflow: hidden; }
.seat-meter > i { display: block; height: 100%; background: var(--mint-mid); }
.seat-meter[data-tone="rose"] > i   { background: var(--rose-mid); }
.seat-meter[data-tone="butter"] > i { background: var(--butter-mid); }
.seat-meter[data-tone="sky"] > i    { background: var(--sky-mid); }

/* ---------- depth-pass utilities ---------- */
/* key/value pairs — label faint left, value right */
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--s2) var(--s4); font-size: .9rem; }
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; color: var(--ink); }
.kv--wide { grid-template-columns: minmax(160px, max-content) 1fr; }

/* compact divided list — activity feeds, health checks, nested rows */
.mini { display: flex; flex-direction: column; }
.mini__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.mini__row:last-child { border-bottom: 0; }
.mini__row > :first-child { min-width: 0; }
.mini__main { color: var(--ink); }
.mini__sub { color: var(--ink-faint); font-size: .8rem; margin-top: 2px; }
.mini__meta { color: var(--ink-faint); font-size: .8rem; white-space: nowrap; flex-shrink: 0; }

/* left-rail timeline — week-by-week, history */
.tl { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.tl li { position: relative; padding: 0 0 var(--s4) var(--s5); }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--lavender-mid); }
.tl li[data-tone="mint"]::before   { border-color: var(--mint-mid); }
.tl li[data-tone="peach"]::before  { border-color: var(--peach-mid); }
.tl li[data-tone="sky"]::before    { border-color: var(--sky-mid); }
.tl__when { color: var(--ink-faint); font-size: .8rem; }

/* inline proportion bar — difficulty mix, skill coverage */
.bars { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--neutral-tint); }
.bars > span { display: block; height: 100%; }
.bars > .b-easy   { background: var(--mint-mid); }
.bars > .b-medium { background: var(--butter-mid); }
.bars > .b-hard   { background: var(--rose-mid); }
.bars > .b-on     { background: var(--sky-mid); }
.bars-key { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: .78rem; color: var(--ink-faint); margin-top: var(--s2); }
.bars-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* status dot for health lists */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--s2); vertical-align: middle; background: var(--neutral-mid); }
.dot--ok   { background: var(--mint-mid); }
.dot--warn { background: var(--butter-mid); }
.dot--bad  { background: var(--rose-mid); }

/* two-column detail body */
.split { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s5); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* section sub-heading with count */
.section__body h2 .count { color: var(--ink-faint); font-weight: 400; font-size: .85rem; margin-left: var(--s2); }

/* hamburger — hidden on desktop, appears in the topbar on narrow screens */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
}
.nav-toggle:active { background: var(--surface-2); }
.scrim {
  display: none; position: fixed; inset: 0; z-index: 190;
  background: rgba(20,18,30,.42); opacity: 0; transition: opacity .2s ease;
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }

  .nav-toggle { display: inline-flex; }

  /* sidebar becomes an off-canvas drawer — stays a vertical list, never a
     wrapped strip of icons across the top */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    height: 100vh; height: 100dvh; width: min(82vw, 300px);
    z-index: 200; transform: translateX(-100%);
    transition: transform .24s ease; box-shadow: var(--shadow-2);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; opacity: 1; }
  body.nav-open { overflow: hidden; }

  .topbar { padding: var(--s3) var(--s4); gap: var(--s3); }
  .topbar .crumbs { font-size: .8rem; }
  .usermenu .muted { display: none; }

  .content { padding: var(--s4); }

  .page-header { gap: var(--s3); margin-bottom: var(--s5); }
  .page-header__text { min-width: 0; }

  .form-grid, .re-grid, .cal-form__grid, .split, .kv, .kv--wide { grid-template-columns: 1fr; }
  .form-actions { flex-wrap: wrap; }

  .section__body { padding: var(--s4); }
  .table-scroll { -webkit-overflow-scrolling: touch; }
  table.data { font-size: .82rem; }
  table.data thead th { padding-left: var(--s3); padding-right: var(--s3); }
  table.data tbody td { padding: var(--s3); }

  .doc-tab { min-width: 0; flex: 1 1 44%; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr; }
  .doc-tab { flex-basis: 100%; }
  .content { padding: var(--s3); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- inline markdown preview ---------- */
.md-preview { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); font-size: .9rem; line-height: 1.6; }
.md-preview > :first-child { margin-top: 0; }
.md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4 { margin: 12px 0 6px; line-height: 1.3; }
.md-preview h1 { font-size: 1.2rem; } .md-preview h2 { font-size: 1.05rem; } .md-preview h3 { font-size: .95rem; }
.md-preview p { margin: 6px 0; }
.md-preview ul, .md-preview ol { margin: 6px 0; padding-left: 20px; }
.md-preview code { background: var(--canvas); padding: 1px 5px; border-radius: 4px; font: 12px/1.5 ui-monospace, monospace; }
.md-preview pre { background: var(--canvas); padding: 10px; border-radius: 6px; overflow: auto; }
.md-preview pre code { background: none; padding: 0; }
.md-preview blockquote { margin: 6px 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--ink-soft); }

/* ---------- /help documents ---------- */
.doc-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.doc-tab { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); text-decoration: none; color: var(--ink); min-width: 180px; }
.doc-tab small { color: var(--ink-faint); font-weight: 400; }
.doc-tab.is-active { border-color: var(--lavender-mid); background: var(--lavender-tint); }
.doc-tab[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.doc { font-size: .95rem; line-height: 1.65; color: var(--ink); max-width: 900px; }
.doc > :first-child { margin-top: 0; }
.doc h1 { font-size: 1.5rem; margin: 0 0 var(--s3); }
.doc h2 { font-size: 1.2rem; margin: var(--s6) 0 var(--s3); padding-top: var(--s4); border-top: 1px solid var(--border); scroll-margin-top: var(--s4); }
.doc h3 { font-size: 1.03rem; margin: var(--s5) 0 var(--s2); scroll-margin-top: var(--s4); }
.doc h4 { font-size: .95rem; margin: var(--s4) 0 var(--s2); }
.doc p { margin: var(--s3) 0; }
.doc ul, .doc ol { margin: var(--s3) 0; padding-left: 22px; }
.doc li { margin: 3px 0; }
.doc li > ul, .doc li > ol { margin: 3px 0; }
.doc a { color: var(--lavender-ink); }
.doc code { background: var(--canvas); padding: 1px 5px; border-radius: 4px; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.doc pre { background: var(--canvas); padding: 12px 14px; border-radius: var(--r); overflow-x: auto; margin: var(--s3) 0; }
.doc pre code { background: none; padding: 0; font-size: 12.5px; }
.doc blockquote { margin: var(--s3) 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--lavender-mid); color: var(--ink-soft); }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: var(--s5) 0; }
.doc table.data { margin: var(--s3) 0; width: 100%; }
.doc .table-wrap { overflow-x: auto; }

.doc-toc { position: sticky; top: var(--s4); font-size: .85rem; }
.doc-toc .section__body { padding: var(--s4); }
.doc-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-toc a { display: block; padding: 4px 8px; border-radius: 6px; text-decoration: none; color: var(--ink-soft); }
.doc-toc a:hover { background: var(--lavender-tint); color: var(--ink); }
.doc-toc a.lvl-3 { padding-left: 20px; font-size: .8rem; }
@media (max-width: 900px) { .doc-toc { position: static; } }

/* ---------- inline row editors (relation tables on detail pages) ---------- */
tr.rowedit { display: none; }
tr.rowedit.open { display: table-row; }
tr.rowedit > td { background: var(--surface-2); padding: var(--s4) var(--s4) var(--s5); border-bottom: 1px solid var(--border); }
.re-open { display: none; }
.re-open.open { display: block; margin: 6px 0 4px; padding: var(--s4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.re-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3) var(--s4); align-items: end; }
.re-grid .full { grid-column: 1 / -1; }
.re-grid label { display: block; font-weight: 600; font-size: .76rem; color: var(--ink); margin-bottom: 4px; }
.re-actions { display: flex; gap: var(--s2); margin-top: var(--s3); }
.row-actions { display: inline-flex; gap: var(--s1); justify-content: flex-end; white-space: nowrap; }
.row-actions form { display: inline; }

/* ---------- checkbox list (one item per row — replaces cramped multi-selects) ---------- */
.check-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 6px; background: var(--surface); }
.check-list.is-empty { padding: 10px 12px; margin: 0; color: var(--ink-faint); font-size: .85rem; }
.check-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px;
  font-weight: 400; font-size: .875rem; color: var(--ink); cursor: pointer; }
.check-row:hover { background: var(--surface-2); }
.check-row input[type=checkbox] { flex: none; margin: 0; }

/* ---------- calendar-row form ---------- */
.cal-form { max-width: 780px; }
.cal-form__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3) var(--s4); margin: var(--s3) 0; }
.cal-form .field { margin-bottom: var(--s3); }
.wk-range { display: flex; align-items: center; gap: 8px; }
.wk-range input { width: 72px; }
.wk-range span { color: var(--ink-faint); font-size: .85rem; }
.cal-add > summary { list-style: none; cursor: pointer; display: inline-block; margin-top: var(--s3); }
.cal-add > summary::-webkit-details-marker { display: none; }
.cal-add[open] > summary { margin-bottom: var(--s2); }
@media (max-width: 720px) { .cal-form__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- course reader preview ---------- */
.reader-layout { display: grid; grid-template-columns: 520px 1fr; gap: var(--s7); align-items: start; }
.reader-sidebar { position: sticky; top: var(--s5); max-height: calc(100vh - var(--s6)); overflow-y: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s5); font-size: .86rem; }
.reader-sidebar__course { font-size: .8rem; font-weight: 650; padding: 0 8px var(--s4); border-bottom: 1px solid var(--border); margin-bottom: var(--s4); line-height: 1.4; }
.reader-nav-group { margin: var(--s5) 8px var(--s2); font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.reader-nav-group:first-of-type { margin-top: 0; }
.reader-nav-link { display: block; padding: 10px 12px; margin-bottom: 2px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; line-height: 1.4; }
.reader-nav-link:hover { background: var(--surface); color: var(--ink); }
.reader-nav-link.is-active { background: var(--lavender-tint); color: var(--lavender-ink); font-weight: 600; }

/* collapsible module group in the reader sidebar */
.reader-nav-mod { margin: var(--s4) 0 2px; }
.reader-nav-mod:first-of-type { margin-top: var(--s2); }
.reader-nav-mod > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint);
}
.reader-nav-mod > summary::-webkit-details-marker { display: none; }
.reader-nav-mod > summary:hover { background: var(--surface); color: var(--ink-soft); }
.reader-nav-mod__chev { flex: none; font-size: .8rem; transition: transform .15s ease; }
.reader-nav-mod[open] > summary .reader-nav-mod__chev { transform: rotate(90deg); }
.reader-nav-mod > .reader-nav-link { margin-left: 6px; }
@media (max-width: 1320px) { .reader-layout { grid-template-columns: 340px 1fr; gap: var(--s6); } }
@media (max-width: 960px) {
  .reader-layout { display: block; }
  .reader-sidebar { position: static; max-height: none; margin-bottom: var(--s6); }
}

.reader { max-width: 100%; }
.reader__hero { padding-bottom: var(--s6); margin-bottom: var(--s6); border-bottom: 1px solid var(--border); }
.reader__hero h1 { margin: var(--s4) 0 var(--s3); font-size: 1.9rem; line-height: 1.3; }
.reader__hero .pill { margin-bottom: 4px; }
.reader__lede { font-size: 1.08rem; color: var(--ink-soft); margin: 0 0 var(--s5); line-height: 1.65; }
.reader__meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--s6); margin-top: var(--s5); }
.reader__meta-grid h4 { margin: 0 0 var(--s3); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.reader__meta-grid ul { margin: 0; padding-left: 18px; font-size: .9rem; color: var(--ink-soft); line-height: 1.7; }
.reader__meta-grid li { margin: var(--s2) 0; }

/* reader prose — full available width, generous leading; scoped to the reader
   only so other admin screens that reuse .doc (help, notes, marketing) are untouched */
.reader .doc { max-width: none; line-height: 1.85; font-size: 1rem; }
.reader .doc p { margin: var(--s5) 0; text-align: justify; hyphens: auto; }
.reader .doc ul, .reader .doc li > ul, .reader .doc li > ol { margin: var(--s4) 0; }
.reader .doc li { margin: var(--s2) 0; line-height: 1.75; }
.reader .doc h2, .reader .doc h3, .reader .doc h4 { line-height: 1.4; margin-top: var(--s6); }
.reader .doc blockquote { margin: var(--s5) 0; padding: var(--s3) 0 var(--s3) var(--s4); }

.reader-module { margin: var(--s7) 0; padding-top: var(--s6); border-top: 1px solid var(--border); }
.reader-module:first-of-type { border-top: 0; padding-top: 0; }
.reader-module > h2 { font-size: 1.35rem; margin-bottom: var(--s4); }

.reader-topic__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--s5); }
.reader-topic__head h1 { margin: 0; font-size: 1.55rem; line-height: 1.35; }
.reader-topic__eyebrow { font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin-bottom: var(--s2); }
.reader-empty { font-style: italic; }
.reader-empty-state { padding: var(--s7) var(--s6); text-align: center; background: var(--surface-2); border: 1px dashed var(--border-2); border-radius: var(--r); color: var(--ink-soft); line-height: 1.6; }
.reader-empty-state .btn { margin-top: var(--s4); }

/* lens tabs (Full read / Business & use-cases / Code & architecture) —
   visually distinct (sky) from the student/faculty doc-tabs (lavender) above */
.doc-tab--lens.is-active { border-color: var(--sky-mid); background: var(--sky-tint); }

.reader-block { margin: var(--s5) 0; padding: var(--s5); background: var(--surface-2); border-radius: var(--r); }
.reader-block__tag { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3); font-size: .85rem; flex-wrap: wrap; }
.reader-block h4 { margin: 0 0 var(--s3); }

/* code blocks + copy button — same treatment whether the code came from a
   content_item snippet or was pulled straight out of a topic's body_md */
.reader-snippet { margin: var(--s4) 0; }
.reader-snippet__bar, .code-card__bar { display: flex; gap: 10px; align-items: center; font-size: .78rem; color: var(--ink-faint); margin-bottom: var(--s2); }
.reader-block pre, .reader-snippet pre, .code-card pre { background: #1e2230; color: #e7eaf3; border: 1px solid var(--border); padding: var(--s4) var(--s5); border-radius: var(--r-sm); overflow-x: auto; font-size: 12.5px; line-height: 1.7; }
.reader-block pre code, .reader-snippet pre code, .code-card pre code { color: inherit; }
.code-card { margin: var(--s5) 0; }
.code-card__lang { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--periwinkle-tint); color: var(--periwinkle-ink); padding: 3px 10px; border-radius: 999px; font-size: .72rem; }
.code-copy-btn { margin-left: auto; }
.code-copy-btn.is-copied { background: var(--mint-tint); border-color: var(--mint-mid); color: var(--mint-ink); }
.code-wrap { position: relative; margin: var(--s5) 0; }
.code-copy-btn--floating { position: absolute; top: 10px; right: 10px; }

.reader-hints { margin-top: var(--s4); font-size: .9rem; line-height: 1.6; }
.reader-hints ol { margin: var(--s3) 0 0; padding-left: 20px; }
.reader-hints li { margin: var(--s2) 0; }
.reveal-box { margin-top: var(--s3); border: 1px dashed var(--border-2); border-radius: var(--r-sm); padding: var(--s4) var(--s5); background: var(--surface); }
.reveal-box > summary { cursor: pointer; font-weight: 600; color: var(--lavender-ink); font-size: .85rem; }
.reveal-box[open] > summary { margin-bottom: var(--s3); }

.reader-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--s5); margin: var(--s5) 0; }
.reader-card { padding: var(--s5); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.reader-card h4 { margin: 0 0 var(--s3); }

/* hands-on "take action" styling for exercises/labs — a stronger accent so
   they read as a task to *do*, not more text to read */
.reader-exercise { border-left: 4px solid var(--sky-mid); background: var(--sky-tint); padding: var(--s5) var(--s5) var(--s5) calc(var(--s5) - 4px); }
.reader-exercise .reader-block__tag { color: var(--sky-ink); }
.reader-exercise__eyebrow { font-weight: 700; color: var(--sky-ink); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--s3); }
.reader-done-toggle { margin-top: var(--s4); }
.reader-done-toggle.is-done { background: var(--mint-tint); border-color: var(--mint-mid); color: var(--mint-ink); }

/* business/use-case digest cards (the "Business & use-cases" lens) */
.callout-card { display: flex; gap: var(--s4); padding: var(--s5); border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); margin: var(--s4) 0; line-height: 1.6; }
.callout-card__icon { font-size: 1.3rem; line-height: 1; }
.callout-card__label { font-weight: 700; font-size: .82rem; margin-bottom: var(--s2); }
.callout-card--business { border-color: var(--peach-mid); background: var(--peach-tint); }
.callout-card--wild { border-color: var(--sky-mid); background: var(--sky-tint); }
.callout-card--warn { border-color: var(--rose-mid); background: var(--rose-tint); }
.callout-card--tip { border-color: var(--mint-mid); background: var(--mint-tint); }

.reader-pagenav { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--border); }
.reader-pagenav__spacer { flex: 1; }

/* Mermaid diagrams (flowcharts, sequence, UML, mindmaps) embedded in body copy */
.reader-figure { margin: var(--s6) 0; padding: var(--s5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); text-align: center; overflow-x: auto; }
.reader-figure figcaption { margin-top: var(--s3); font-size: .82rem; color: var(--ink-faint); font-style: italic; }
.reader-figure pre.mermaid { margin: 0; }
.reader-figure pre.mermaid svg { max-width: 100%; height: auto; }
/* before the library swaps it for SVG, show the source as a plain code block */
.reader-figure pre.mermaid:not([data-processed]) { display: block; text-align: left; white-space: pre; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); border: 1px dashed var(--border-2); border-radius: var(--r-sm); padding: var(--s4); color: var(--ink-soft); }

/* ---------- infrastructure / component stack ---------- */
.infra-band { }
.infra-band__title { font-size: 1.1rem; }
.infra-layer { margin: var(--s4) 0; }
.infra-layer__head { display: flex; align-items: center; gap: 8px; font-size: .9rem; margin-bottom: 6px; }
.infra-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--ink-faint); }
.infra-dot--required { background: #e5121f; }
.infra-dot--recommended { background: #ffd21a; }
.infra-dot--optional { background: var(--ink-faint); }
.infra-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.infra-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--ink); font-size: .82rem; line-height: 1; }
.infra-chip:hover { border-color: var(--sky-mid); background: var(--sky-tint); }
.infra-chip--used { border-color: var(--mint-mid); }
.infra-chip__logo { width: 16px; height: 16px; object-fit: contain; flex: none; }
.infra-chip__badge { background: var(--mint-tint); color: var(--mint-ink); border-radius: 999px; padding: 0 6px; font-size: .7rem; font-weight: 700; }

/* the layered stack shown in the reader's "Infra & dependencies" lens */
/* ---------- prospect dashboard bar lists ---------- */
.pbars { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s3); }
.pbars--tight { gap: 2px; }
.pb-row { display: grid; grid-template-columns: minmax(90px, 42%) 1fr auto; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 6px; text-decoration: none; color: var(--ink-soft); font-size: .82rem; }
.pb-row:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.pb-row__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-row__n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.pb-track { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.pb-fill { display: block; height: 100%; background: var(--lavender-mid); border-radius: 999px; }

/* the reader's "Infra & dependencies" lens — a layered service-model stack */
.infra-summary { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s3); font-size: .85rem; color: var(--ink-soft); margin: var(--s3) 0 var(--s5); }
.infra-legend { display: flex; gap: var(--s4); font-size: .8rem; flex-wrap: wrap; }
.infra-legend span { display: inline-flex; align-items: center; gap: 5px; }

.infra-stack { display: flex; flex-direction: column; gap: var(--s3); }
.infra-stratum { display: flex; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.infra-stratum__rail { flex: none; width: 158px; padding: var(--s4); background: var(--surface-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.infra-stratum__swatch { width: 22px; height: 5px; border-radius: 3px; }
.infra-stratum__layer { font-size: .85rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.infra-stratum__sm { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.infra-stratum__body { flex: 1; display: flex; flex-wrap: wrap; gap: var(--s3); padding: var(--s4); }

.infra-tile { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); text-decoration: none; }
.infra-tile:hover { border-color: var(--sky-mid); }
.infra-tile__logo { width: 28px; height: 28px; flex: none; border-radius: 6px; background: var(--surface-2); display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--ink-faint); }
.infra-tile__logo img { width: 20px; height: 20px; object-fit: contain; }
.infra-tile__text { display: flex; flex-direction: column; gap: 1px; }
.infra-tile__name { font-size: .9rem; color: var(--ink); }
.infra-tile__dep { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; }
.infra-tile__dep--required { color: #e5121f; }
.infra-tile__dep--recommended { color: #b7860b; }
.infra-tile__dep--optional { color: var(--ink-faint); }

.infra-deps { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.infra-deps__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.infra-deps__arrow { color: var(--ink-faint); }
.infra-deps__type { font-size: .75rem; color: var(--ink-faint); }

@media (max-width: 640px) {
  .infra-stratum { flex-direction: column; }
  .infra-stratum__rail { width: auto; border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; align-items: center; flex-wrap: wrap; }
  .infra-stratum__swatch { width: 14px; }
}

/* the "first 5 minutes" demo/teaser at the top of a course's overview page —
   deliberately more vivid than the rest of the reader so it reads as a hook,
   not just another info box */
.reader-demo { margin: var(--s6) 0 0; padding: var(--s6) var(--s7); border-radius: var(--r-lg, var(--r)); background: linear-gradient(155deg, var(--lavender-tint), var(--sky-tint)); border: 1px solid var(--lavender-mid); }
.reader-demo__badge { display: inline-block; font-weight: 700; font-size: .82rem; letter-spacing: .01em; color: var(--lavender-ink); background: var(--surface); border: 1px solid var(--lavender-mid); border-radius: 999px; padding: 7px 16px; margin-bottom: var(--s5); }
.reader-demo h2 { margin: 0 0 var(--s4); font-size: 1.3rem; }
.reader-demo .doc { max-width: none; }
.reader-demo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--s4); margin: var(--s5) 0; }
.reader-demo__item { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); }

/* ---- WYSIWYG editor (campaign email composer) ---- */
.wysiwyg-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); border-bottom: none; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.wysiwyg-btn { font: inherit; font-weight: 600; font-size: .82rem; padding: 5px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--ink); }
.wysiwyg-btn:hover { background: var(--lavender-tint, var(--surface-2, var(--surface))); }
.wysiwyg-sep { width: 1px; margin: 2px 4px; background: var(--border); }
.wysiwyg-editor { min-height: 260px; padding: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: 0 0 var(--r-sm) var(--r-sm); line-height: 1.6; }
.wysiwyg-editor:focus { outline: 2px solid var(--lavender-mid, var(--border)); outline-offset: -1px; }
.wysiwyg-editor p { margin: 0 0 .8em; }
.wysiwyg-editor h2 { margin: .4em 0; font-size: 1.2rem; }
.wysiwyg-editor ul, .wysiwyg-editor ol { margin: 0 0 .8em; padding-left: 1.4em; }

/* ==========================================================================
   Dashboards & charts (inline SVG/CSS, no library). Colour by tone class.
   ========================================================================== */
[class*="viz-t-"] { --c: var(--lavender-ink); --c-tint: var(--lavender-tint); }
.viz-t-mint { --c: var(--mint-ink); --c-tint: var(--mint-tint); }
.viz-t-peach { --c: var(--peach-ink); --c-tint: var(--peach-tint); }
.viz-t-sky { --c: var(--sky-ink); --c-tint: var(--sky-tint); }
.viz-t-rose { --c: var(--rose-ink); --c-tint: var(--rose-tint); }
.viz-t-butter { --c: var(--butter-ink); --c-tint: var(--butter-tint); }
.viz-t-periwinkle { --c: var(--periwinkle-ink); --c-tint: var(--periwinkle-tint); }
.viz-t-sage { --c: var(--sage-ink); --c-tint: var(--sage-tint); }
.viz-t-neutral { --c: var(--neutral-ink); --c-tint: var(--neutral-tint); }

@keyframes viz-rise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes viz-grow  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes viz-fillx { from { width: 0; } to { width: var(--w); } }
@keyframes viz-draw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes viz-ringgo{ from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: var(--off); } }
@keyframes viz-pop   { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes viz-shine { from { background-position: -160% 0; } to { background-position: 260% 0; } }

/* staggered entrance for anything on a dashboard */
.dash > * { animation: viz-rise .5s cubic-bezier(.2,.7,.2,1) both; }
.dash > *:nth-child(2) { animation-delay: .06s; } .dash > *:nth-child(3) { animation-delay: .12s; }
.dash > *:nth-child(4) { animation-delay: .18s; } .dash > *:nth-child(5) { animation-delay: .24s; }
.dash > *:nth-child(6) { animation-delay: .30s; } .dash > *:nth-child(7) { animation-delay: .36s; }
.stat-grid > .stat { animation: viz-rise .5s cubic-bezier(.2,.7,.2,1) both; }
.stat-grid > .stat:nth-child(2) { animation-delay: .05s; } .stat-grid > .stat:nth-child(3) { animation-delay: .10s; }
.stat-grid > .stat:nth-child(4) { animation-delay: .15s; } .stat-grid > .stat:nth-child(5) { animation-delay: .20s; }
.stat-grid > .stat:nth-child(6) { animation-delay: .25s; } .stat-grid > .stat:nth-child(n+7) { animation-delay: .30s; }
a.stat { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent-mid, var(--lavender-mid)); text-decoration: none; }
.stat[data-accent="lavender"]  { --accent-mid: var(--lavender-mid); --accent-ink: var(--lavender-ink); }
.stat[data-accent="mint"]      { --accent-mid: var(--mint-mid);     --accent-ink: var(--mint-ink); }
.stat[data-accent="peach"]     { --accent-mid: var(--peach-mid);    --accent-ink: var(--peach-ink); }
.stat[data-accent="sky"]       { --accent-mid: var(--sky-mid);      --accent-ink: var(--sky-ink); }
.stat[data-accent="rose"]      { --accent-mid: var(--rose-mid);     --accent-ink: var(--rose-ink); }
.stat[data-accent="butter"]    { --accent-mid: var(--butter-mid);   --accent-ink: var(--butter-ink); }
.stat[data-accent="periwinkle"]{ --accent-mid: var(--periwinkle-mid); --accent-ink: var(--periwinkle-ink); }
.stat[data-accent="sage"]      { --accent-mid: var(--sage-mid);     --accent-ink: var(--sage-ink); }
/* solid accent stripe so each card owns a colour */
.stat { border-top: 4px solid var(--accent-mid, var(--lavender-mid)); }
.stat--viz { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s3); align-items: center; }
.stat--viz .stat__label, .stat--viz .stat__value, .stat--viz .stat__meta { grid-column: 1; }
.stat--viz .stat__viz { grid-column: 2; grid-row: 1 / span 3; position: relative; display: flex; align-items: center; }
.stat__value b { font-weight: 800; }
.stat__ico { position: absolute; right: var(--s4); top: var(--s4); color: var(--accent-ink, var(--lavender-ink)); opacity: .9; z-index: 1; }
.stat--hero .stat__value { font-size: 2.3rem; }

/* sparkline */
.viz-spark { width: 96px; height: 30px; overflow: visible; display: block; }
.viz-spark__line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: viz-draw 1.1s ease-out .2s both; }
.viz-spark__area { fill: var(--c); opacity: .10; }
.viz-spark__dot { fill: var(--c); stroke: var(--surface); stroke-width: 2; animation: viz-pop .4s ease-out 1.1s both; transform-box: fill-box; transform-origin: center; }

/* ring */
.viz-ring { position: relative; flex: none; }
.viz-ring svg { width: 100%; height: 100%; display: block; }
.viz-ring__track { fill: none; stroke: var(--c-tint); stroke-width: 10; }
.viz-ring__bar { fill: none; stroke: var(--c); stroke-width: 10; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--off); animation: viz-ringgo 1.2s cubic-bezier(.3,.7,.2,1) .15s both; }
.viz-ring__txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.viz-ring__txt b { font-size: 1.15rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.viz-ring__txt span { font-size: .62rem; color: var(--ink-faint); font-weight: 600; margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }

/* columns */
.viz-fig { margin: 0; }
.viz-cols { width: 100%; height: auto; display: block; overflow: visible; }
.viz-grid { stroke: var(--border); stroke-width: 1; }
.viz-axis { fill: var(--ink-faint); font-size: 10px; font-family: var(--font); }
.viz-bar { fill: var(--c); animation: viz-grow .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 18ms + .15s); transform-box: view-box; }
.viz-col { outline: none; }
.viz-hit { fill: transparent; }
.viz-col:hover .viz-bar, .viz-col:focus .viz-bar { filter: brightness(1.18); }
.viz-col:hover .viz-hit, .viz-col:focus .viz-hit { fill: var(--c-tint); opacity: .55; }
.viz-table { margin-top: var(--s3); font-size: .82rem; }
.viz-table > summary { cursor: pointer; color: var(--ink-faint); font-weight: 600; }
.viz-table > summary:hover { color: var(--ink); }
.viz-table table { margin-top: var(--s2); }

/* horizontal bars */
.viz-hbars { display: flex; flex-direction: column; gap: 11px; }
.viz-hbar { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: var(--s3); animation: viz-rise .45s ease both; animation-delay: calc(var(--i, 0) * 60ms); }
.viz-hbar__label { font-size: .86rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-hbar__track { height: 10px; background: var(--c-tint); border-radius: 6px; overflow: hidden; }
.viz-hbar__fill { height: 100%; width: var(--w); background: var(--c); border-radius: 6px; animation: viz-fillx 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms + .2s); }
.viz-hbar__val { font-size: .82rem; font-weight: 700; color: var(--ink); min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }

/* stacked bar + legend */
.viz-stack { display: flex; gap: 2px; height: 16px; border-radius: 8px; overflow: hidden; }
.viz-seg { background: var(--c); min-width: 4px; transform-origin: left; animation: viz-fillx 1s ease both; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: var(--s3); }
.viz-leg { font-size: .8rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.viz-leg i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); display: inline-block; }
.viz-leg b { color: var(--ink); font-weight: 700; }

/* delta chip */
.viz-delta { font-size: .75rem; font-weight: 700; color: var(--ink-faint); }
.viz-delta--good { color: var(--mint-ink); }
.viz-delta--bad  { color: var(--rose-ink); }
.viz-delta--up   { color: var(--sky-ink); }

/* chart cards */
.viz-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.viz-card__head h2 { margin: 0; }
.viz-card__sub { font-size: .78rem; color: var(--ink-faint); font-weight: 600; }
.viz-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s5); margin-bottom: var(--s6); align-items: stretch; }
.viz-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); margin-bottom: var(--s6); align-items: stretch; }
@media (max-width: 480px) { .viz-grid-2 { grid-template-columns: 1fr; } }

/* hero band */
.dash-hero { display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center; padding: var(--s5) var(--s6); margin-bottom: var(--s6);
  border-radius: var(--r-lg); color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--lavender-ink), var(--periwinkle-ink) 55%, var(--sky-ink)); box-shadow: var(--shadow-2); }
.dash-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%); background-size: 60% 100%; background-repeat: no-repeat; animation: viz-shine 4.5s ease-in-out 1s 2; }
.dash-hero h1 { color: #fff; margin: 0 0 4px; font-size: 1.6rem; }
.dash-hero p { color: rgba(255,255,255,.88); margin: 0; }
.dash-hero__roles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--s3); }
.dash-hero__roles span { background: rgba(255,255,255,.2); border-radius: var(--r-pill); padding: 2px 10px; font-size: .74rem; font-weight: 700; }
.dash-hero__stats { display: flex; gap: var(--s5); position: relative; z-index: 1; }
.dash-hero__stat { text-align: center; min-width: 64px; }
.dash-hero__stat b { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.dash-hero__stat span { font-size: .72rem; font-weight: 600; opacity: .9; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 720px) { .dash-hero { grid-template-columns: 1fr; padding: var(--s5); } }

/* health + achievements */
.viz-health { display: flex; gap: var(--s5); align-items: center; }
.viz-health__note { color: var(--ink-soft); font-size: .88rem; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
.badge { display: flex; gap: var(--s3); align-items: center; padding: var(--s3); border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-2); }
.badge__ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--c-tint); color: var(--c); }
.badge b { display: block; font-size: .82rem; color: var(--ink); line-height: 1.25; }
.badge span { font-size: .72rem; color: var(--ink-faint); }
.badge.is-earned { border-color: var(--c); background: var(--c-tint); animation: viz-pop .5s ease both; }
.badge.is-earned .badge__ico { background: var(--c); color: #fff; }
.badge.is-locked { opacity: .62; filter: grayscale(.7); }

/* tooltip */
.viz-tip { position: fixed; z-index: 9999; pointer-events: none; background: var(--ink); color: var(--surface); padding: 5px 9px; border-radius: 8px;
  font-size: .78rem; font-weight: 600; box-shadow: var(--shadow-2); opacity: 0; transition: opacity .12s; max-width: 260px; }
.viz-tip.is-on { opacity: 1; }
[data-tip] { cursor: default; }

/* card mini-viz on hubs */
.stat__foot { position: relative; margin-top: var(--s3); display: flex; align-items: center; gap: var(--s3); }
.stat__bar { flex: 1; height: 8px; border-radius: 6px; background: var(--accent-tint, var(--lavender-tint)); overflow: hidden; }
.stat__bar i { display: block; height: 100%; width: var(--w); background: var(--accent-ink, var(--lavender-ink)); border-radius: 6px; animation: viz-fillx 1s cubic-bezier(.2,.7,.2,1) .25s both; }
.stat__foot em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
.stat__go { position: relative; margin-top: var(--s3); font-size: .78rem; font-weight: 700; color: var(--accent-ink, var(--lavender-ink)); opacity: 0; transform: translateX(-4px); transition: all .18s ease; }
a.stat:hover .stat__go { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .dash > *, .stat-grid > .stat, .viz-bar, .viz-hbar, .viz-hbar__fill, .viz-seg, .viz-spark__line, .viz-spark__dot, .viz-ring__bar, .badge.is-earned, .dash-hero::after, .stat__bar i { animation: none !important; }
  .viz-spark__line { stroke-dasharray: none; }
}

/* ---------- section tab bar: wraps within the page width; grouped dropdowns ---------- */
.tabbar { position: sticky; top: 57px; z-index: 15; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; margin: 0 0 var(--s5);
  background: linear-gradient(var(--canvas) 80%, transparent); }
.tab { --t: var(--lavender-ink); --tt: var(--lavender-tint); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer; list-style: none;
  padding: 7px 14px; border-radius: var(--r-pill); font-size: .84rem; font-weight: 650; color: var(--ink-soft);
  background: var(--surface); border: 1.5px solid var(--border-2); text-decoration: none; transition: all .15s ease; }
.tab::-webkit-details-marker { display: none; }
.tab .icon { color: var(--t); }
.tab:hover { background: var(--tt); border-color: var(--t); color: var(--t); text-decoration: none; }
.tab.is-active, .tabgroup.is-active > .tab { background: var(--t); border-color: var(--t); color: #fff; box-shadow: var(--shadow-2); }
.tab.is-active .icon, .tabgroup.is-active > .tab .icon { color: #fff; }
.tab__cur { font-weight: 500; opacity: .9; }
.tabgroup { --t: var(--lavender-ink); --tt: var(--lavender-tint); position: relative; }
.tabgroup > .tab { --t: inherit; --tt: inherit; }
.tabgroup[open] > .tab { border-color: var(--t); }
.tabgroup > summary .icon:last-child { transition: transform .15s ease; }
.tabgroup[open] > summary .icon:last-child { transform: rotate(90deg); }
.tabmenu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 210px; padding: 6px; background: var(--surface);
  border: 1px solid var(--border-2); border-radius: var(--r); box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 2px; }
.tabmenu a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink); font-size: .86rem; font-weight: 600; text-decoration: none; }
.tabmenu a .icon { color: var(--t); }
.tabmenu a:hover { background: var(--tt); text-decoration: none; }
.tabmenu a.is-active { background: var(--tt); color: var(--t); }
.tab--mint { --t: var(--mint-ink); --tt: var(--mint-tint); } .tab--peach { --t: var(--peach-ink); --tt: var(--peach-tint); }
.tab--sky { --t: var(--sky-ink); --tt: var(--sky-tint); } .tab--rose { --t: var(--rose-ink); --tt: var(--rose-tint); }
.tab--butter { --t: var(--butter-ink); --tt: var(--butter-tint); } .tab--periwinkle { --t: var(--periwinkle-ink); --tt: var(--periwinkle-tint); }
.tab--sage { --t: var(--sage-ink); --tt: var(--sage-tint); } .tab--neutral { --t: var(--neutral-ink); --tt: var(--neutral-tint); }
.content [id] { scroll-margin-top: 130px; }
@media (max-width: 720px) { .tabbar { top: 53px; } }

/* ---------- course marketing profile ---------- */
.mkt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.mkt-fact { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3) var(--s4); }
.mkt-fact--wide { grid-column: 1 / -1; }
.mkt-fact > span { display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--lavender-ink); margin-bottom: 4px; }
.mkt-fact b { font-size: 1.05rem; color: var(--ink); }
.mkt-fact p { margin: 0; color: var(--ink); }
.mkt-fact p.is-empty { color: var(--ink-faint); font-style: italic; }
.bullet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.bullet-col { --bc: var(--mint-ink); --bt: var(--mint-tint); border: 1px solid var(--border); border-top: 4px solid var(--bc); border-radius: var(--r); padding: var(--s3) var(--s4) var(--s4); background: var(--surface); }
.bullet-col--peach { --bc: var(--peach-ink); --bt: var(--peach-tint); } .bullet-col--sky { --bc: var(--sky-ink); --bt: var(--sky-tint); }
.bullet-col h3 { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--bc); margin: 0 0 var(--s3); }
.bullet-col h3 .count { margin-left: auto; background: var(--bt); color: var(--bc); border-radius: var(--r-pill); padding: 0 9px; font-size: .75rem; font-weight: 800; }
.bullet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bullet-list li { position: relative; padding: 8px 10px 8px 26px; background: var(--bt); border-radius: var(--r-sm); font-size: .88rem; }
.bullet-list li::before { content: ""; position: absolute; left: 10px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--bc); }
.bullet-list li.bullet-empty { background: transparent; border: 1.5px dashed var(--border-2); color: var(--ink-faint); font-style: italic; }
.bullet-list li.bullet-empty::before { display: none; }
.bullet-add { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r); background: var(--lavender-tint); border: 1px solid var(--lavender-mid); }
.bullet-add__title { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lavender-ink); margin-bottom: var(--s3); }
.bullet-add__row { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.bullet-add__row .field { margin: 0; }
.bullet-add__text { flex: 1; min-width: 240px; }
.bullet-add__row .btn { height: 42px; }

/* ==========================================================================
   Course page layout: summary strip, section bands, roomy cards, collapsible
   ========================================================================== */
.course-stats { margin-bottom: var(--s4); }
.course-stats .stat { min-height: 132px; }
.course-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--s6); }
.course-tools { margin-left: auto; display: flex; gap: 4px; }

.course-page .band { margin: 56px 0 20px; padding-left: 14px; border-left: 5px solid var(--lavender-ink); }
.course-page .band:first-child { margin-top: 8px; }
.course-page .band h2 { margin: 0; font-size: 1.35rem; }
.course-page .band p { margin: 2px 0 0; color: var(--ink-faint); font-size: .9rem; }

.course-page .card.section { margin-bottom: 28px; scroll-margin-top: 130px; }
.course-page .section__body { padding: 28px 32px 32px; }
.course-page .section__body > h2:first-child,
.course-page .section__body > .spread:first-child { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); align-items: center; }
.course-page .section__body > .spread:first-child h2 { margin: 0; }
.course-page .section__body > h2:first-child { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.course-page .section__body > .spread:first-child h2 { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.course-page h2 .count { font-size: .78rem; font-weight: 700; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 10px; }
.sec-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--c-tint); color: var(--c); flex: none; }
.sec-ico .icon { width: 18px; height: 18px; }
.sec-chev { margin-left: auto; color: var(--ink-faint); transition: transform .18s ease; display: inline-flex; }
.card.section.is-collapsed .sec-chev { transform: rotate(-90deg); }
.spread .sec-chev { margin-left: 8px; }
.card.section.is-collapsed .section__body > :not(:first-child) { display: none !important; }
.card.section.is-collapsed .section__body > h2:first-child, .card.section.is-collapsed .section__body > .spread:first-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* inner rhythm */
.course-page .section__body > h3, .course-page .section__body > .spread + h3 { margin: 32px 0 14px; padding-top: 24px; border-top: 1px dashed var(--border-2); }
.course-page .section__body > .spread:not(:first-child) { margin-top: 32px; padding-top: 24px; border-top: 1px dashed var(--border-2); }
.course-page .mini__row { padding: 14px 4px; }
.course-page .mini__row:hover { background: var(--surface-2); border-radius: var(--r-sm); }
.course-page table.data th, .course-page table.data td { padding-top: 14px; padding-bottom: 14px; }
.course-page .section__body p { max-width: 78ch; line-height: 1.65; }
.course-page .section__body p.t-sub, .course-page .section__body p.muted { max-width: 88ch; }
.course-page .chips { gap: 8px; }
.course-page .kv { gap: 12px 24px; }
.course-page .re-grid { gap: 18px; }
.course-page .field, .course-page .re-grid > div { margin-bottom: 4px; }
.course-page .btn + .btn { margin-left: 6px; }

.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--lavender-ink); color: #fff; font-size: 1.2rem; font-weight: 800; box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.to-top.is-on { opacity: 1; pointer-events: auto; }
.to-top:hover { transform: translateY(-2px); background: #5b21b6; }
@media (max-width: 720px) { .course-page .section__body { padding: 20px; } .course-tools { margin-left: 0; } }

/* breathing room around capsules everywhere */
.row { gap: 12px; }
.course-meta { gap: 12px; }
.pill + .pill { margin-left: 4px; }
td .pill, .mini__main .pill { margin: 2px 6px 2px 0; }

/* ---------- audience badges: faculty only vs faculty + students ---------- */
.aud { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; margin: 2px; border-radius: var(--r-pill); font-size: .72rem; font-weight: 700; line-height: 1.4; white-space: nowrap; border: 1.5px solid transparent; }
.aud--faculty { background: var(--rose-tint); color: var(--rose-ink); border-color: var(--rose-mid); }
.aud--both { background: var(--mint-tint); color: var(--mint-ink); border-color: var(--mint-mid); }
.aud .icon { flex: none; }
.aud--btn { cursor: pointer; font-family: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.aud--btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.aud-form { display: inline; margin: 0; }
.aud-sum { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: 8px; vertical-align: middle; }
.aud-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 18px; margin: 0 0 var(--s5); background: var(--surface); border: 1px dashed var(--border-2); border-radius: var(--r); font-size: .84rem; color: var(--ink-soft); }
.aud-legend b { color: var(--ink); }

/* ---------- readability on the course page: less congested text ---------- */
.course-page .section__body { font-size: 15px; line-height: 1.7; }
.course-page .section__body ul, .course-page .section__body ol { padding-left: 26px; margin: 10px 0 20px; }
.course-page .section__body li { margin: 0 0 10px !important; line-height: 1.65; }
.course-page .section__body li:last-child { margin-bottom: 0 !important; }
/* the small grey captions that introduce a list/table read as sub-headings */
.course-page .section__body > p.muted, .course-page .section__body > p.t-sub {
  margin: 28px 0 10px !important; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.course-page .section__body > p.muted:first-of-type { margin-top: 0 !important; }
.course-page .section__body > p.muted:only-child, .course-page .section__body > h2 + p.muted { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .92rem; }
.course-page .section__body > p { margin-bottom: 16px; }
.course-page label { display: block; margin-bottom: 8px; font-size: .82rem; font-weight: 700; color: var(--ink); }
.course-page .row, .course-page form.row { gap: 16px !important; align-items: flex-end; margin-top: 16px; }
.course-page select, .course-page input:not([type=checkbox]), .course-page textarea { font-size: .95rem; padding: 11px 14px; }
.course-page .field { margin-bottom: 8px; }
.course-page .t-sub { font-size: .84rem; line-height: 1.6; }
.course-page table.data td, .course-page table.data th { padding-left: 16px; padding-right: 16px; line-height: 1.6; }
.course-page .mini__sub { margin-top: 4px; line-height: 1.55; }
.course-page .re-actions { margin-top: 18px; gap: 12px; }

/* ---------- course flow strip: Program → Course → Modules → Topics → Assessments → Infrastructure ---------- */
.flow { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; counter-reset: step; }
.flow__step { position: relative; animation: viz-rise .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); padding-right: 22px; }
.flow__step:last-child { padding-right: 0; }
.flow__step::after { content: ""; position: absolute; right: 2px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: var(--c); opacity: .55; clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 50%); }
.flow__step:last-child::after { display: none; }
.flow__step a { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ico label n" "sub sub sub" "fac fac fac"; align-items: center; gap: 4px 12px;
  height: 100%; padding: 16px 18px; background: var(--surface); border: 1.5px solid var(--border-2); border-top: 5px solid var(--c); border-radius: var(--r-lg);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .15s ease; }
.flow__step a:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); text-decoration: none; }
.flow__ico { grid-area: ico; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--c-tint); color: var(--c); }
.flow__label { grid-area: label; font-weight: 800; font-size: .95rem; }
.flow__n { grid-area: n; font-size: 1.5rem; font-weight: 800; color: var(--c); letter-spacing: -.02em; }
.flow__sub { grid-area: sub; font-size: .8rem; color: var(--ink-faint); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.flow__fac { grid-area: fac; margin-top: 4px; justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; color: var(--rose-ink); background: var(--rose-tint); border-radius: var(--r-pill); padding: 2px 10px; }
@media (max-width: 1100px) { .flow { grid-template-columns: repeat(3, 1fr); row-gap: 16px; } .flow__step:nth-child(3n)::after { display: none; } .flow__step:nth-child(3n) { padding-right: 0; } }
@media (max-width: 640px) { .flow { grid-template-columns: 1fr 1fr; } .flow__step::after { display: none; } .flow__step { padding-right: 0; } }

/* band tones */
.course-page .band--sage { border-left-color: var(--sage-ink); } .course-page .band--periwinkle { border-left-color: var(--periwinkle-ink); }
.course-page .band--peach { border-left-color: var(--peach-ink); } .course-page .band--rose { border-left-color: var(--rose-ink); }
.course-page .band--mint { border-left-color: var(--mint-ink); }
.course-page .band + .aud-legend { margin-top: 0; }

/* assessment rows */
.assess-list { display: flex; flex-direction: column; gap: 10px; }
.assess-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.assess-row:hover { border-color: var(--border-2); background: var(--surface); }
.assess-kind { display: inline-flex; align-items: center; gap: 8px; color: var(--c); font-size: .82rem; }
.assess-title { font-weight: 600; color: var(--ink); }
@media (max-width: 720px) { .assess-row { grid-template-columns: 1fr; gap: 6px; } }

.prog-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -4px 0 22px; }
.prog-line__label { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-right: 4px; }
.aud-mix { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: -8px 0 28px; padding: 14px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); font-size: .86rem; }
.aud-mix__item b { margin-right: 6px; }

/* portal syllabus */
.pmod { border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 14px; background: var(--surface); }
.pmod > summary { cursor: pointer; padding: 14px 18px; font-size: 1rem; }
.pmod[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--r) var(--r) 0 0; }
.ptopic { padding: 16px 20px; border-bottom: 1px dashed var(--border-2); }
.ptopic:last-child { border-bottom: 0; }
.ptopic__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.ptopic__title { font-weight: 700; }
.ptopic__item { padding: 6px 0 6px 18px; font-size: .9rem; line-height: 1.7; }

/* compact summary strip on the course page */
.course-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.course-stats .stat { min-height: 0; padding: 14px 16px; border-top-width: 3px; border-radius: var(--r); }
.course-stats .stat::after { width: 54px; height: 54px; right: -18px; top: -18px; }
.course-stats .stat__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.course-stats .stat__value { font-size: 1.15rem; line-height: 1.3; margin-top: 4px; }
.course-stats .stat__meta { font-size: .76rem; margin-top: 4px; }
.course-stats .stat__ico { right: 12px; top: 10px; }
.course-stats .stat__ico .icon { width: 16px; height: 16px; }
.course-stats .viz-ring__txt b { font-size: .7rem; }
.course-stats .viz-ring__txt span { display: none; }
.course-stats .stat--viz .stat__viz { grid-row: 1 / span 3; }

/* key/value lists as a bordered table: bold dark labels, ruled rows */
.kv { gap: 0; border: 1.5px solid var(--border-2); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.kv dt { color: var(--ink); font-weight: 700; background: var(--surface-2); padding: 12px 18px; border-bottom: 1px solid var(--border-2); border-right: 1px solid var(--border-2); }
.kv dd { padding: 12px 18px; border-bottom: 1px solid var(--border-2); color: var(--ink); }
.kv dt:nth-last-of-type(1), .kv dd:nth-last-of-type(1) { border-bottom: 0; }
.kv dd .muted { color: var(--ink-faint); }
@media (max-width: 640px) { .kv { grid-template-columns: 1fr; } .kv dt { border-right: 0; border-bottom: 0; padding-bottom: 2px; } .kv dd { padding-top: 2px; } }

/* item boxes inside topic/course sections (content items, snippets, exercises) */
.course-page .stack { gap: 16px; }
.course-page .stack > div[style*="border"] { padding: 18px 22px !important; background: var(--surface); border-color: var(--border-2) !important; box-shadow: var(--shadow-1); }
.course-page .stack > div[style*="border"] .spread { gap: 12px 16px; flex-wrap: wrap; }
.course-page .stack > div[style*="border"] .mini__main { line-height: 1.9; }
.course-page .doc { max-width: 78ch; line-height: 1.75; }
.course-page .doc h1, .course-page .doc h2, .course-page .doc h3 { margin-top: 1.4em; }

/* role path steps + modifiers */
.path-steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.path-steps > li:not(.path-steps__edit) { counter-increment: st; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 12px 52px; position: relative;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.path-steps > li:not(.path-steps__edit)::before { content: counter(st); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%;
  background: var(--periwinkle-ink); color: #fff; font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.path-steps__body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 600; }
.path-steps__edit { list-style: none; }
.mod-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.mod-row__main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* ---------- campaign email: audience, composer, report ---------- */
.camp-search { position: relative; }
.camp-search__input { width: 100%; padding: 12px 16px; font-size: .98rem; border: 1.5px solid var(--border-2); border-radius: var(--r); background: var(--surface); }
.camp-search__input:focus { border-color: var(--lavender-ink); outline: none; box-shadow: 0 0 0 3px var(--lavender-tint); }
.camp-search__results { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.camp-search__empty { padding: 12px 16px; color: var(--ink-faint); font-size: .9rem; }
.camp-list { display: flex; flex-direction: column; gap: 8px; }
.camp-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); flex-wrap: wrap; }
.camp-row.is-added { background: var(--mint-tint); border-color: var(--mint-mid); }
.camp-row--link { text-decoration: none; color: var(--ink); }
.camp-row--link:hover { background: var(--lavender-tint); border-color: var(--lavender-mid); text-decoration: none; }
.camp-preview { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 16px 20px; border-radius: var(--r); background: var(--lavender-tint); border: 1px solid var(--lavender-mid); }
.camp-compose { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); align-items: start; }
.camp-compose__side { position: sticky; top: 72px; }
.camp-compose__side h3 { margin: 0 0 8px; }
.camp-pick { margin-top: 14px; }
.camp-pick label { display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 6px; }
.camp-preview-frame { width: 100%; height: 320px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: #fff; }
@media (max-width: 1100px) { .camp-compose { grid-template-columns: 1fr; } .camp-compose__side { position: static; } }
.wysiwyg-editor { min-height: 260px; padding: 16px 18px; border: 1.5px solid var(--border-2); border-radius: 0 0 var(--r) var(--r); background: #fff; line-height: 1.6; }

/* recipient timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--border-2); }
.timeline__item { position: relative; display: flex; gap: 16px; padding: 0 0 22px; }
.timeline__dot { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--c-tint); color: var(--c); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--c); position: relative; z-index: 1; }
.timeline__body { padding-top: 5px; min-width: 0; }
.timeline__title { font-weight: 700; }
.timeline__when { font-size: .78rem; color: var(--ink-faint); margin-top: 3px; }

.camp-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.camp-steps a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border: 1.5px solid var(--border-2); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; }
.camp-steps a:hover { border-color: var(--lavender-ink); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-2); }
.camp-steps span { font-size: .8rem; color: var(--ink-faint); line-height: 1.4; }
.camp-steps li.is-done a { border-color: var(--mint-mid); background: var(--mint-tint); }
.camp-steps li.is-done b::after { content: " ✓"; color: var(--mint-ink); }
@media (max-width: 900px) { .camp-steps { grid-template-columns: 1fr 1fr; } }
.day-toggle { cursor: pointer; }
.day-toggle input { position: absolute; opacity: 0; }
.day-toggle span { display: inline-block; padding: 6px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--border-2); font-weight: 700; font-size: .82rem; background: var(--surface); }
.day-toggle input:checked + span { background: var(--lavender-ink); border-color: var(--lavender-ink); color: #fff; }
.day-toggle input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.camp-estimate { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--r); background: var(--sky-tint); color: var(--sky-ink); font-weight: 600; }
.camp-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.camp-check li::before { content: "○"; margin-right: 10px; color: var(--ink-faint); }
.camp-check li.ok::before { content: "●"; color: var(--mint-ink); }

/* format comparison editor */
.mx-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 18px 20px; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface); }
.mx-row__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.mx-row__name { font-weight: 800; font-size: 1rem; max-width: 380px; }
.mx-row__cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.mx-row__side { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 720px) { .mx-row { grid-template-columns: 1fr; } .mx-row__side { flex-direction: row; } }
.ex-assets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-2); font-size: .88rem; }
.ex-asset { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- badges: medals and shelves ---------- */
.medal { position: relative; width: var(--sz, 84px); height: var(--sz, 84px); flex: none; }
.medal .viz-ring { position: absolute; inset: 0; }
.medal__ico { position: absolute; inset: 14%; border-radius: 50%; display: grid; place-items: center; background: var(--c-tint); color: var(--c); }
.medal.is-locked .medal__ico { filter: grayscale(1); opacity: .55; }
.medal--bronze.is-earned .viz-ring__bar { stroke: #b45f2b; } .medal--silver.is-earned .viz-ring__bar { stroke: #8792a2; }
.medal--gold.is-earned .viz-ring__bar { stroke: #d99a0b; } .medal--platinum.is-earned .viz-ring__bar { stroke: #6d28d9; }
.medal.is-earned .viz-ring__track { stroke: transparent; }
.medal.is-earned { animation: viz-pop .5s ease both; }
.medal .viz-ring__txt { display: none; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.shelf__item { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.shelf__item.is-earned { border-color: var(--border-2); box-shadow: var(--shadow-1); }
.shelf__item.is-locked { background: var(--surface-2); }
.shelf__name { font-weight: 800; }
.shelf__tier { font-size: .78rem; color: var(--ink-faint); margin: 2px 0 6px; }
.shelf__next { font-size: .78rem; color: var(--ink-soft); }
.shelf__next .seat-meter { margin: 4px 0; }
.tier { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; padding: 1px 8px; border-radius: var(--r-pill); color: #fff; }
.tier--bronze { background: #b45f2b; } .tier--silver { background: #8792a2; } .tier--gold { background: #d99a0b; } .tier--platinum { background: #6d28d9; }
.leader { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.leader:last-child { border-bottom: 0; }
.leader__rank { width: 28px; height: 28px; border-radius: 50%; background: var(--butter-tint); color: var(--butter-ink); display: grid; place-items: center; font-weight: 800; font-size: .82rem; flex: none; }
.leader:nth-child(1) .leader__rank { background: #d99a0b; color: #fff; }
.leader__pts { margin-left: auto; font-weight: 800; }
.camp-check li.warn::before { content: "▲"; color: var(--butter-ink); }
.camp-check li.bad::before { content: "✕"; color: var(--rose-ink); font-weight: 800; }
.camp-check li.warn { color: var(--ink); } .camp-check li.bad { color: var(--rose-ink); font-weight: 600; }