/* =============================================================================
   ScillintED_components.css — Canonical component layer (Phase 3B Block A.2)
   -----------------------------------------------------------------------------
   Industry-standard BEM-lite naming (Janardhan locked Phase 3A):
     .block             — component root
     .block__elem       — element inside the component
     .block--modifier   — variant / state

   Consumes tokens from ScillintED_tokens.css; emits NO hex literals or raw
   px values. Every rule references a --token. To add a new component or
   variant, define the token first; if there's no fitting token, add one to
   tokens.css and reference it here.

   Load order (in every HTML file):
     <link rel="stylesheet" href="ScillintED_tokens.css">
     <link rel="stylesheet" href="ScillintED_components.css">
     <link rel="stylesheet" href="ScillintED_utilities.css">

   Table of contents:
     1. Content shell + container width modifiers
     2. Button
     3. Card
     4. Alert
     5. Badge / Pill / Chip
     6. Input / Select / Textarea / Form group
     7. Table
     8. Modal / Drawer
     9. Navigation — Sidebar / Topbar / Nav item / Tab / Breadcrumb / Pagination
    10. Tooltip / Popover
    11. Empty state / Skeleton loader
    12. Avatar / Icon button
    13. Toast / Snackbar
    14. Divider / Kbd / Code
============================================================================= */


/* ────────────────────────────────────────────────────────────────────────────
   1 — CONTENT SHELL  (the setContent wrapper)
   ──────────────────────────────────────────────────────────────────────────── */

.content-inner {
  width: 100%;
  max-width: var(--cw-medium);
  margin-inline: auto;
  padding: var(--cp-page-y) var(--cp-page-x);
}
.content-inner.cw-narrow { max-width: var(--cw-narrow); }
.content-inner.cw-wide   { max-width: var(--cw-wide); }
.content-inner.cw-full   { max-width: var(--cw-full); }


/* ────────────────────────────────────────────────────────────────────────────
   2 — BUTTON
   Variants: primary, secondary, ghost, success, warning, danger, coral
   Sizes:    sm, default, lg
   States:   hover, active, disabled, focus-visible (auto from tokens base)
   Modifiers: --icon (square), --full (block-width), --pill (full-rounded)
   ──────────────────────────────────────────────────────────────────────────── */

/* d430 #314 — Chevron button system (replaces the d200 tactile plate system).
   ONE silhouette (forward-arrow chevron frame), ONE motion (crisp 1px lift),
   ONE palette. Emphasis = fill + chevron richness, nothing else.
   The chevron is an inline SVG injected by ScillintED_buttons.js (a single
   mitered path, two-tone via a horizontal clip, uniform non-scaling stroke =
   sharp at any width). These rules own the fill, frame, label, lift, and the
   chevron's color/size; the engine only injects the <svg> + wraps the label.
   Variant -> look:
     .btn (base) / .btn--coral  = Brand    (white, single ink chevron — d434 mono)
     .btn--primary              = Primary  (solid ink, white chevron) — inverts in dark
     .btn--secondary            = Secondary(white, thin frame, single ink chevron)
     .btn--ghost                = Quiet    (transparent, hairline, NO chevron)
     .btn--danger/success/warning = semantic (white, colored frame + chevron + label)
   Opt out of the chevron with class .btn--icon, .btn--pill, or [data-no-chevron]. */
/* d442 #314 — DEFINITIVE crisp rebuild. No JS-measured SVG, no fractional
   transforms, no inset frame. Everything is a whole-pixel CSS primitive:
   a single 2px border, an integer coral "shelf" shadow, and a tiny static
   two-tone logo chevron. Scillint signature = the coral baseline + the
   coral/navy mark, both recolored per-variant via CSS vars (zero JS). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--min-tap-target);
  padding: var(--space-3) 22px;
  border: 2px solid var(--btn-frame);
  border-radius: var(--radius-lg);
  background: #FFFFFF;
  color: var(--btn-frame);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  box-shadow: 0 2px 0 var(--btn-shelf);
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  --btn-shelf: var(--ink);          /* ink tactile shelf (was coral) — d448 founder pref */
  --chev-a:    var(--chev-coral);   /* logo chevron top stroke (coral) */
  --chev-b:    var(--chev-navy);    /* logo chevron bottom stroke (navy) */
}
/* Integer-only press: lift 1px on hover, sink 2px onto the ink shelf on click. */
.btn:hover  { transform: translateY(-1px); box-shadow: 0 3px 0 var(--btn-shelf); }
.btn:active { transform: translateY(2px);  box-shadow: 0 0 0 var(--btn-shelf); }
.btn:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: 0 2px 0 var(--btn-shelf);
}

/* — Trailing two-tone logo chevron: static SVG, sized in em so it tracks the
     label. Diagonals AA like any icon; no stretched frame to fray. — */
.btn__chev { flex: 0 0 auto; width: 0.82em; height: 0.95em; display: block; }
.btn__chev .ca { stroke: var(--chev-a); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.btn__chev .cb { stroke: var(--chev-b); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* — Primary (solid ink + white chevron) · auto-inverts to a light fill in dark — */
.btn--primary {
  background: #0A1A4A;
  border-color: #0A1A4A;
  color: var(--color-text-on-brand);
  --chev-b: #FFFFFF;   /* navy bottom stroke would vanish on the ink fill → white */
  --btn-shelf: #050d26;   /* deeper navy so the ink shelf still reads under the ink fill */
}

/* — Secondary (white, thinner frame, single ink chevron) — */
.btn--secondary { border-width: 2px; }

/* — Coral (legacy hook → Brand look = base .btn two-tone) — */
.btn--coral { /* inherits base white + two-tone chevron */ }

/* — Ghost / Quiet (transparent, hairline, no chevron) — */
.btn--ghost {
  background: transparent;
  border: 2px solid var(--color-border-default);
  color: var(--color-text-primary);
  box-shadow: none;
}
.btn--ghost:hover  { transform: none; background: var(--color-bg-surface-3); box-shadow: none; }
.btn--ghost:active { transform: none; box-shadow: none; }

/* — Semantic (white fill, colored frame + chevron + label) — */
.btn--danger  { color: var(--color-danger);  border-color: var(--color-danger);  --btn-shelf: #7F1D1D; }
.btn--success { color: var(--color-success); border-color: var(--color-success); --btn-shelf: #14532D; }
.btn--warning { color: var(--color-warning); border-color: var(--color-warning); --btn-shelf: #78350F; }

/* — d432 #314 — Specificity guard. Several pages (parent / confirm / app101)
   still ship pre-foundation inline `.btn` + `.btn:hover{background}` rules in a
   page <style> block; with equal specificity but later source order they
   overrode the new fills — most visibly flipping the solid Primary to white on
   hover. Doubling the class (`.btn.btn…` is one weight stronger) re-asserts the
   new fills over those single-class inline-block rules, while element-level
   style="" attributes still win where a specific button sets its own color. */
.btn.btn          { background: #FFFFFF; }
.btn.btn:hover,
.btn.btn:active   { background: #FFFFFF; }
.btn.btn--primary,
.btn.btn--primary:hover,
.btn.btn--primary:active { background: #0A1A4A; }
.btn.btn--ghost,
.btn.btn--ghost:active   { background: transparent; }
.btn.btn--ghost:hover    { background: var(--color-bg-surface-3); }

/* — Sizes (each carries its own chevron inset + stroke) — */
.btn--sm { min-height: 34px; padding: var(--space-2) 16px; font-size: var(--fs-sm); border-width: 2px; border-radius: 10px; }
.btn--lg { min-height: 54px; padding: var(--space-4) 30px; font-size: var(--fs-lg); border-radius: var(--radius-xl); }

/* — Shape modifiers — */
.btn--icon { padding: var(--space-2); aspect-ratio: 1; }   /* no chevron — too narrow */
.btn--full { width: 100%; }
.btn--pill { border-radius: var(--radius-pill); }           /* no chevron — frame can't follow a pill */

/* — Icon inside button — */
.btn__icon { display: inline-flex; width: 1em; height: 1em; flex-shrink: 0; }

/* — Button group (equal widths regardless of label length) — */
/* Use when 2+ buttons sit beside each other and should read as the same size.
   Children stretch to fill the container equally. Stacked variant for mobile
   or when buttons sit vertically (e.g. hero CTAs in d173). */
.btn-group {
  display: flex;
  gap: var(--space-2);
}
.btn-group > .btn { flex: 1 1 0; min-width: 0; }
.btn-group--stacked { flex-direction: column; align-items: stretch; }
.btn-group--end     { justify-content: flex-end; }
.btn-group--end > .btn { flex: 0 0 auto; }  /* right-aligned: don't stretch */


/* ────────────────────────────────────────────────────────────────────────────
   3 — CARD
   Sub-elements: __head, __title, __meta, __body, __footer
   Modifiers:    --compact, --elevated, --accent, --on-cream
   ──────────────────────────────────────────────────────────────────────────── */

.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--cp-card-y) var(--cp-card-x);
  box-shadow: var(--shadow-xs);
}
.card--compact  { padding: var(--space-3) var(--space-4); }
.card--elevated { box-shadow: var(--shadow-md); border-color: transparent; }
.card--accent   { border-left: 4px solid var(--brand-coral); }
.card--on-cream { background: var(--color-bg-surface-2); }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  margin: 0;
}
.card__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-tertiary);
  font-family: var(--font-display);
  font-style: italic;
}
.card__body  { color: var(--color-text-secondary); line-height: var(--lh-normal); }
.card__footer {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}


/* ────────────────────────────────────────────────────────────────────────────
   4 — ALERT
   Variants: info (default), success, warning, danger
   Modifiers: --urgent (coral border-left), --dismissible
   ──────────────────────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-info-soft);
  color: var(--color-text-primary);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}
.alert__icon  { font-size: var(--fs-lg); line-height: 1; flex-shrink: 0; }
.alert__title { font-weight: 700; margin: 0 0 var(--space-1) 0; }
.alert__body  { margin: 0; color: inherit; }
.alert__close {
  margin-left: auto;
  background: transparent;
  border: 0;
  font-size: var(--fs-lg);
  cursor: pointer;
  color: inherit;
  opacity: var(--opacity-muted);
}
.alert__close:hover { opacity: 1; }

.alert--success { background: var(--color-success-soft); color: var(--color-success); }
.alert--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.alert--danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.alert--urgent  { border-left: 4px solid var(--brand-coral); border-radius: 0 var(--radius-md) var(--radius-md) 0; }


/* ────────────────────────────────────────────────────────────────────────────
   5 — BADGE / PILL / CHIP
   Variants: default, info, success, warning, danger, neutral
   Sizes:    sm, default
   Pill = full-rounded (radius-pill).
   ──────────────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface-3);
  color: var(--color-text-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.badge--info    { background: var(--color-info-soft);    color: var(--color-info); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.badge--neutral { background: var(--color-bg-surface-3); color: var(--color-text-tertiary); }
.badge--sm      { padding: 0 var(--space-1); font-size: 10px; }
.badge--pill    { border-radius: var(--radius-pill); padding-inline: var(--space-3); }

/* Chip — interactive variant (clickable tag). d200 #223 — tactile recipe
   so chips read as buttons (both selected and unselected). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: #F8F6F0;
  border: 2px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  top: 0;
  box-shadow: 0 var(--btn-thickness-px) 0 var(--btn-thickness-color-light);
  transition: top var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.chip:hover {
  background: #FFFFFF;
  top: -1px;
  box-shadow: 0 calc(var(--btn-thickness-px) + 1px) 0 var(--btn-thickness-color-light);
}
.chip:active {
  top: var(--btn-thickness-px);
  box-shadow: 0 0 0 var(--btn-thickness-color-light);
}
.chip--active {
  background: var(--brand-navy);
  border-color: var(--btn-thickness-color-dark);
  color: var(--color-text-on-brand);
  box-shadow: 0 var(--btn-thickness-px) 0 var(--btn-thickness-color-dark);
}
.chip--active:hover { box-shadow: 0 calc(var(--btn-thickness-px) + 1px) 0 var(--btn-thickness-color-dark); }
.chip--active:active { box-shadow: 0 0 0 var(--btn-thickness-color-dark); }
.chip__remove  { display: inline-flex; opacity: var(--opacity-muted); }
.chip__remove:hover { opacity: 1; }

/* #5 score visual language — official / accuracy / projected (audit enh #5).
   The three score types must never read as equivalent:
   official  = solid navy — a reported score
   accuracy  = neutral "N% accuracy" — a practice percentage (different unit)
   projected = dotted underline + native tooltip — an ESTIMATE, never mistaken
               for a reported score. currentColor keeps the dotted rule in step
               with whatever color the host stat-card assigns the number. */
.score-official  { color: var(--brand-navy); font-weight: 600; }
.score-accuracy  { color: var(--color-text-secondary); font-weight: 500; }
.score-projected { border-bottom: 2px dotted currentColor; cursor: help; }

/* Official Test Orchestration Part C/D (fourth score kind) — a real College
   Board Bluebook / ACT self-reported practice result. Same weight as
   .score-official (a real, trustworthy sitting) but --teal (theme-safe,
   flips light in dark mode per ScillintED_theme.css) + a thin dotted
   underline so it never reads as a Scillint-verified official score. */
.score-official-practice { color: var(--teal, #2A7F8F); font-weight: 600; border-bottom: 1px dotted currentColor; cursor: help; }


/* ────────────────────────────────────────────────────────────────────────────
   6 — FORM CONTROLS
   Input, select, textarea + label, helper, error.
   Group: .form-group wraps a label+input+helper triplet.
   ──────────────────────────────────────────────────────────────────────────── */

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: var(--min-tap-target);
  padding: var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--brand-navy);
  /* leverage shadow-focus so the ring matches the global focus pattern */
  box-shadow: var(--shadow-focus);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--color-bg-surface-2);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.input--error,
.select--error,
.textarea--error { border-color: var(--color-danger); }
.input--error:focus,
.select--error:focus,
.textarea--error:focus { box-shadow: 0 0 0 4px var(--color-danger-soft); }

.textarea { min-height: 96px; resize: vertical; }

.select {
  /* native select with a custom chevron */
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2315182A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px 8px;
}

.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.input-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}
.input-helper { font-size: var(--fs-xs); color: var(--color-text-tertiary); }
.input-error  { font-size: var(--fs-xs); color: var(--color-danger); font-weight: 500; }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}


/* ────────────────────────────────────────────────────────────────────────────
   7 — TABLE
   Default + striped + compact. Wrapper handles scroll on small screens.
   ──────────────────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
}
.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
}
.table th {
  background: var(--color-bg-surface-2);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-secondary);
}
.table tr:last-child td { border-bottom: 0; }
.table--striped tbody tr:nth-child(even) { background: var(--color-bg-surface-2); }
.table--compact th,
.table--compact td { padding: var(--space-2) var(--space-3); }


/* ────────────────────────────────────────────────────────────────────────────
   8 — MODAL / DRAWER
   Modal = centered dialog. Drawer = slide-in from edge.
   ──────────────────────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-4);
  animation: modal-fade-in var(--duration-normal) var(--ease-out);
}
.modal {
  background: var(--color-bg-surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modal-slide-up var(--duration-normal) var(--ease-out);
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
}
.modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  font-style: normal;  /* defense against cascaded italic; synthetic italic on Newsreader 600 reads blurred */
  line-height: var(--lh-tight);
  margin: 0;
}
.modal__close {
  background: transparent;
  border: 0;
  font-size: var(--fs-xl);
  cursor: pointer;
  color: var(--color-text-tertiary);
  width: var(--min-tap-target);
  height: var(--min-tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal__close:hover { color: var(--color-text-primary); }
.modal__body {
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  color: var(--color-text-secondary);
  line-height: var(--lh-normal);
}
.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface-2);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

.modal--lg { max-width: 760px; }
.modal--sm { max-width: 420px; }

/* Drawer — slides from right */
.drawer-overlay { position: fixed; inset: 0; background: var(--color-bg-overlay); z-index: var(--z-drawer); }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 90vw);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-xl);
  z-index: calc(var(--z-drawer) + 1);
  display: flex;
  flex-direction: column;
  animation: drawer-slide-in var(--duration-normal) var(--ease-out);
}
.drawer__header { padding: var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }
.drawer__body   { padding: var(--space-5); overflow-y: auto; flex: 1; }
.drawer__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border-subtle); }

@keyframes modal-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-slide-up  { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes drawer-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }


/* ────────────────────────────────────────────────────────────────────────────
   9 — NAVIGATION (sidebar, topbar, nav-item, tab, breadcrumb, pagination)
   ──────────────────────────────────────────────────────────────────────────── */

/* Shell — grid wrapper used by app pages */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width, 240px) 1fr;
  min-height: 100vh;
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }  /* below md — bottom nav takes over */
}

/* — Sidebar — */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
  background: var(--color-bg-surface-2);
  border-right: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-text-primary);
}
.sidebar__brand-mark {
  width: 28px;
  height: 28px;
  background: var(--brand-navy);
  color: var(--color-text-on-brand);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.sidebar__section {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2) var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-navy);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  border-top: 1px solid var(--color-border-subtle);
  margin-top: var(--space-2);
}
.sidebar__section:first-of-type { border-top: 0; margin-top: 0; }
.sidebar__section::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--brand-coral);
  border-radius: 1px;
}

/* — Topbar — */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--cp-page-x);
  background: var(--color-bg-skim);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-subtle);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.topbar__title  { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; margin: 0; }
.topbar__spacer { flex: 1; }

/* — Nav item — usable in sidebar, footer, drawer — */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: transparent;
  border: 0;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  width: 100%;
}
.nav-item:hover            { background: var(--color-bg-surface-3); color: var(--color-text-primary); }
/* d177 — also match legacy .active class so existing switchView() (which adds
   '.active' not '.is-active') hits this rule. Standardize to .is-active in a
   future Phase 3C pass; the legacy hook stays in the meantime. */
.nav-item.is-active,
.nav-item.active,
.nav-item[aria-current]    { background: var(--brand-navy-soft); color: var(--brand-navy); font-weight: 600; }
.nav-item.is-active i,
.nav-item.active i         { color: var(--brand-navy); }
.nav-item__icon            { display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; }
.nav-item__badge           { margin-left: auto; }

/* — Tab — */
.tabs        { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border-subtle); margin-bottom: var(--space-4); }
.tab         {
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--color-text-tertiary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.tab:hover     { color: var(--color-text-primary); }
.tab.is-active { color: var(--brand-navy); border-bottom-color: var(--brand-navy); font-weight: 600; }

/* — Breadcrumb — */
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-tertiary); }
.breadcrumb__item              { color: var(--color-text-tertiary); text-decoration: none; }
.breadcrumb__item:hover        { color: var(--color-text-primary); }
.breadcrumb__item[aria-current]{ color: var(--color-text-primary); font-weight: 600; }
.breadcrumb__sep               { opacity: var(--opacity-muted); }

/* — Pagination — */
.pagination { display: inline-flex; gap: var(--space-1); align-items: center; }
.pagination__item {
  min-width: var(--min-tap-target);
  height: var(--min-tap-target);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pagination__item:hover       { background: var(--color-bg-surface-3); }
.pagination__item.is-active   { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--color-text-on-brand); }
.pagination__item:disabled    { opacity: var(--opacity-disabled); cursor: not-allowed; }


/* ────────────────────────────────────────────────────────────────────────────
   10 — TOOLTIP / POPOVER
   CSS-only tooltip via [data-tooltip]. Popover is JS-driven; we provide styling.
   ──────────────────────────────────────────────────────────────────────────── */

[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: var(--space-2) var(--space-3);
  background: var(--color-text-primary);
  color: var(--color-text-on-dark);
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  z-index: var(--z-tooltip);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.popover {
  position: absolute;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  font-size: var(--fs-sm);
  z-index: var(--z-tooltip);
  min-width: 200px;
  max-width: 320px;
}


/* ────────────────────────────────────────────────────────────────────────────
   11 — EMPTY STATE / SKELETON
   ──────────────────────────────────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  color: var(--color-text-tertiary);
}
.empty-state__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface-3);
  color: var(--color-text-muted);
  font-size: var(--fs-2xl);
}
.empty-state__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}
.empty-state__body { font-size: var(--fs-base); margin: 0 auto var(--space-5); max-width: 40ch; line-height: var(--lh-normal); }
.empty-state__action { display: inline-flex; gap: var(--space-2); }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-surface-3) 0%, var(--color-bg-surface-2) 50%, var(--color-bg-surface-3) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton--text  { height: 12px; margin-bottom: var(--space-2); border-radius: var(--radius-sm); }
.skeleton--title { height: 24px; margin-bottom: var(--space-3); width: 60%; }
.skeleton--card  { height: 120px; margin-bottom: var(--space-4); }
.skeleton--avatar{ width: 40px; height: 40px; border-radius: var(--radius-full); }
.skeleton--button{ height: 40px; width: 120px; border-radius: var(--radius-md); }

/* d251 Colleges page header redesign. Title + categorized count pills on
   one row, [Add a school] [Compare costs] [More] on the right. Replaces
   the older two-row layout that duplicated counts in a separate
   cl-summary-row below the title. */
.cl-header-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.cl-pillbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-sm); }
.cl-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.cl-pill strong { font-weight: 700; }
.cl-pill--total    { background: var(--brand-cream, #F2ECD6); color: var(--ink); }
.cl-pill--reach    { background: var(--brand-coral-soft, #FBEAE0); color: var(--brand-coral, #C94E0A); }
.cl-pill--reach strong { color: var(--brand-coral-hover, #A8420A); }
.cl-pill--match    { background: var(--brand-navy-soft, #E8EBF7); color: var(--brand-navy, #1B2A8C); }
.cl-pill--match strong { color: var(--brand-navy-hover, #15217A); }
.cl-pill--safety   { background: #E1F5EE; color: #0F6E56; }
.cl-pill--safety strong { color: #085041; }
.cl-pill--submitted{ background: var(--brand-gold-soft, #F8EFD7); color: var(--brand-gold-hover, #9F7D33); }
.cl-pill--submitted strong { color: #633806; }
.cl-pill-link { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; font-size: var(--fs-sm); color: var(--brand-coral); text-decoration: none; margin-left: 2px; }
.cl-pill-link:hover { text-decoration: underline; }
.cl-pill-link i { font-size: var(--fs-sm); }
/* Secondary primary button — outline navy. Sits between [Add a school]
   solid primary and the [More] subtle kebab to give Compare costs
   primary-action real estate without competing with Add. */
.cl-btn-secondary { color: var(--brand-navy) !important; border: 1.5px solid var(--brand-navy) !important; background: var(--card-bg) !important; }
.cl-btn-secondary:hover { background: var(--brand-navy-soft) !important; }

@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ────────────────────────────────────────────────────────────────────────────
   12 — AVATAR / ICON BUTTON
   ──────────────────────────────────────────────────────────────────────────── */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--brand-navy);
  color: var(--color-text-on-brand);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 28px; height: 28px; font-size: var(--fs-xs); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--fs-md); }
.avatar--xl { width: 64px; height: 64px; font-size: var(--fs-lg); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--min-tap-target);
  height: var(--min-tap-target);
  border-radius: var(--radius-md);
  background: transparent;
  border: 0;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--color-bg-surface-3); color: var(--color-text-primary); }


/* ────────────────────────────────────────────────────────────────────────────
   13 — TOAST / SNACKBAR
   Container is positioned bottom-right; toasts animate in/out.
   ──────────────────────────────────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: var(--z-toast);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-base);
  color: var(--color-text-primary);
  min-width: 280px;
  max-width: 420px;
  pointer-events: auto;
  animation: toast-slide-in var(--duration-normal) var(--ease-spring);
}
.toast--success { border-left: 4px solid var(--color-success); }
.toast--warning { border-left: 4px solid var(--color-warning); }
.toast--danger  { border-left: 4px solid var(--color-danger); }
.toast--info    { border-left: 4px solid var(--brand-navy); }
.toast__icon    { font-size: var(--fs-lg); flex-shrink: 0; }
.toast__body    { flex: 1; }
.toast__close   { background: transparent; border: 0; cursor: pointer; opacity: var(--opacity-muted); }
.toast__close:hover { opacity: 1; }

@keyframes toast-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}


/* ────────────────────────────────────────────────────────────────────────────
   14 — DIVIDER / KBD / CODE
   ──────────────────────────────────────────────────────────────────────────── */

.divider {
  height: 1px;
  background: var(--color-border-subtle);
  border: 0;
  margin: var(--space-5) 0;
}
.divider--vertical { width: 1px; height: auto; align-self: stretch; margin: 0 var(--space-3); }

.kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface-3);
  border: 1px solid var(--color-border-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface-3);
  color: var(--color-text-primary);
}

/* ────────────────────────────────────────────────────────────────────────────
   15 — ICON SYSTEM  (Scillint brand icons)
   d228 #169 — Three tiers. See Non Deploy Items/Icon_System/ for the
   locked design mockups (hero_blobs_stamped.html is the spec).

     .icon-chip            — Utility (95% of icons). Solid rounded square 40px.
     .icon-chip--spark     — Notable. Chip + gold/coral signature dot.
     .icon-blob            — Hero. Circular gradient blob, 72px.
     .icon-blob--stamped   — Stamped. Adds white-gap ring + halo glow.
     .icon-blob--spark     — Adds signature dot (use with --stamped on heroes).

   Color modifiers (apply to both chip + blob):
     --coral / --navy / --green / --gold / --orange / --cream / --admit
   Size modifiers (chip only):
     --sm (28px) / default (40px) / --lg (52px)
   ──────────────────────────────────────────────────────────────────────────── */

/* Utility chip — solid rounded square */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--brand-navy);
  color: var(--color-text-on-brand);
  position: relative;
  flex-shrink: 0;
  /* d237 — Phosphor glyphs render with a baseline offset that makes
     them sit slightly low/right inside the chip. Forcing centered
     line-height + flex on the <i> removes baseline gap so the glyph's
     bounding box matches the visual center. */
  line-height: 1;
}
.icon-chip i {
  font-size: var(--fs-lg);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chip sizes */
.icon-chip--sm { width: 28px; height: 28px; border-radius: var(--radius-sm); }
.icon-chip--sm i { font-size: var(--fs-sm); }
.icon-chip--lg { width: 52px; height: 52px; border-radius: var(--radius-lg); }
.icon-chip--lg i { font-size: var(--fs-xl); }

/* Chip color variants */
.icon-chip--coral { background: var(--brand-coral); }
.icon-chip--navy  { background: var(--brand-navy); }
.icon-chip--green { background: var(--color-success); }
.icon-chip--gold  { background: var(--brand-gold); }
.icon-chip--orange{ background: var(--color-warning); }
.icon-chip--cream { background: var(--brand-cream); color: var(--color-text-primary); }

/* Spark dot signature — Scillint's smallest brand mark.
   Gold dot by default; flips to coral on gold/admit backgrounds for contrast. */
.icon-chip--spark::after,
.icon-blob--spark::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-gold);
  box-shadow: 0 0 0 2px var(--color-bg-surface);
  z-index: 2;
}
.icon-chip--gold.icon-chip--spark::after,
.icon-blob--gold.icon-blob--spark::after,
.icon-blob--admit.icon-blob--spark::after {
  background: var(--brand-coral);
}

/* Hero blob — circular gradient. Default = coral. */
.icon-blob {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: var(--color-text-on-brand);
  position: relative;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-coral) 0%, var(--brand-coral-light) 100%);
}
.icon-blob i {
  font-size: var(--fs-3xl);
  line-height: 1;
  /* d237 — same flex-center pattern as icon-chip i so Phosphor glyphs
     stay visually centered inside the circular blob. */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero blob color variants — each has its own 135° gradient */
.icon-blob--coral { background: linear-gradient(135deg, var(--brand-coral) 0%, var(--brand-coral-light) 100%); }
.icon-blob--navy  { background: linear-gradient(135deg, var(--brand-navy)  0%, var(--brand-navy-light)  100%); }
.icon-blob--green { background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-light) 100%); }
.icon-blob--gold  { background: linear-gradient(135deg, var(--brand-gold)  0%, var(--brand-gold-light)  100%); }
.icon-blob--orange{ background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-light) 100%); }
/* --admit is the unique coral→gold gradient reserved for the "Admitted!" moment */
.icon-blob--admit { background: linear-gradient(135deg, var(--brand-coral) 0%, var(--brand-gold) 100%); }

/* Stamped — concentric ring (3px white gap + 2px colored ring) + halo glow.
   Default is coral; color variants override the ring + halo to match. */
.icon-blob--stamped {
  box-shadow:
    0 0 0 3px var(--color-bg-surface),
    0 0 0 5px var(--brand-coral),
    0 0 0 11px var(--icon-glow-coral-ring),
    0 10px 28px var(--icon-glow-coral);
}
.icon-blob--navy.icon-blob--stamped {
  box-shadow:
    0 0 0 3px var(--color-bg-surface),
    0 0 0 5px var(--brand-navy),
    0 0 0 11px var(--icon-glow-navy-ring),
    0 10px 28px var(--icon-glow-navy);
}
.icon-blob--green.icon-blob--stamped {
  box-shadow:
    0 0 0 3px var(--color-bg-surface),
    0 0 0 5px var(--color-success),
    0 0 0 11px var(--icon-glow-success-ring),
    0 10px 28px var(--icon-glow-success);
}
.icon-blob--gold.icon-blob--stamped,
.icon-blob--admit.icon-blob--stamped {
  box-shadow:
    0 0 0 3px var(--color-bg-surface),
    0 0 0 5px var(--brand-gold),
    0 0 0 11px var(--icon-glow-gold-ring),
    0 10px 28px var(--icon-glow-gold);
}
.icon-blob--orange.icon-blob--stamped {
  box-shadow:
    0 0 0 3px var(--color-bg-surface),
    0 0 0 5px var(--color-warning),
    0 0 0 11px var(--icon-glow-warning-ring),
    0 10px 28px var(--icon-glow-warning);
}

/* Sidebar nav integration — chip is the icon container.
   Default state: cream chip (subtle). Hover: navy-soft tint. Active: coral fill. */
.nav-item .icon-chip {
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-item:hover .icon-chip {
  background: var(--brand-navy-soft);
  color: var(--brand-navy);
}
.nav-item.active .icon-chip {
  background: var(--brand-coral);
  color: var(--color-text-on-brand);
}

/* =============================================================================
   END components.css
   Next deliverable: ScillintED_utilities.css (15–25 single-purpose utilities)
============================================================================= */