/* ============================================================
   Cascade / CCS Aspire skin - loaded AFTER brand.css.
   Source of truth: ../cascade-design-system/export/style-guide/
   (tokens/colors.css, typography.css, spacing.css, readme.md)

   Strategy: brand.css components read CSS custom properties, so
   this file remaps those properties to the Cascade palette, then
   patches the handful of rules that hardcode gradients/shadows
   (Cascade rule: flat color, no gradients, minimal shadows).

   IMPORTANT (from colors.css): the --status-* set encodes MEANING,
   not brand - progress/goal-status colors must never be re-skinned
   to teal. green/amber/red vars below map to those status tokens.
   ============================================================ */

/* Fonts are SELF-HOSTED (css/fonts/aspire-fonts.css, loaded from index.html)
   so the demo never depends on venue wifi, and so a district network that
   blocks font CDNs still renders correctly. */

/* Token definitions removed: every rule below reads an Aspire token from
   aspire-tokens.css directly. */

/* ---------- flat color: strip brand.css gradients & glows ---------- */
/* .brand .mark used to be patched here to strip brand.css's indigo gradient and
   glow. brand.css no longer draws either — it is a plain box around the ASPIRE
   artwork — so there is nothing left to override. */
.nav-item.active { background: var(--on-chrome); color: var(--chrome); box-shadow: none; }
.btn-primary { background: var(--brand); box-shadow: none; }
.btn-primary:hover { background: var(--brand-hover); }
.pbar > span { background: var(--brand); }
.pbar.green > span { background: var(--status-complete); }
.pbar.amber > span { background: var(--status-in-progress); }
.portal-bar .mark { background: none; box-shadow: none; }
.m-head { background: var(--brand-hover); }
.role-educator { background: var(--brand); }
.role-lea { background: var(--brand-hover); }
.role-state { background: var(--ink-strong); }
.lang span.on { background: var(--brand); }
.step.active .dot { box-shadow: 0 0 0 4px var(--brand-wash); }

/* ---------- hairline borders (defining Cascade trait) ---------- */
.card, .stat, .acc { border-width: 0.5px; }
table.tbl thead th { border-bottom-width: 0.5px; }
table.tbl tbody td { border-bottom-width: 0.5px; }
.topbar { border-bottom-width: 0.5px; }
.divider { height: 0.5px; }

/* ---------- casing: sentence case everywhere EXCEPT status chips ---------- */
.stat .label { text-transform: none; letter-spacing: 0; font-size:14px; }
table.tbl thead th { text-transform: none; letter-spacing: 0; font-size:14px; }
.nav .group-label { text-transform: none; letter-spacing: .2px; font-size:14px; }
/* status chips: UPPERCASE per the guide (the one exception) */
.badge { text-transform: uppercase; font-size:14px; letter-spacing: .5px; font-weight: 600; }

/* ---------- weights: body 400/600, 700 only for display ---------- */
body { font-weight: 400; }
.page-head .titles h1 { font-weight: 700; letter-spacing: -.2px; }
.card-head h3, .field label, .btn, .nav-item, .stat .value { font-weight: 600; }
.stat .value { font-weight: 700; }
table.tbl td .name, .side-foot .who { font-weight: 600; }

/* ---------- icons: Lucide-ish low stroke weight in chrome areas ---------- */
.nav-item svg *, .topbar svg *, .btn svg *, .stat .ic svg *,
.alert .ai *, .card-head svg * { stroke-width: 1.5; }

/* ---------- sand chip (Cascade reserves sand for status chip fill) ---------- */
.badge.slate { background: var(--surface-subtle); color: var(--brand-hover); }
.badge.slate .dot { background: var(--brand); }

/* ---------- restrained motion ---------- */
.btn, .nav-item, .tab, .tog { transition: background-color 160ms ease, color 160ms ease; }
@media (prefers-reduced-motion: reduce) { .brand { transition: none; } }

/* ---------- a count tile that opens to the records behind it ----------
   The affordance has to read as a link without becoming a button: same card,
   a quiet chevron, and the teal accent on hover. Status is never carried by
   colour alone here either — the chevron is the standing cue, present whether
   or not a pointer is over the tile. */
a.stat-link { display: block; position: relative; text-decoration: none; color: inherit; padding-inline-end: 42px; }
a.stat-link .stat-go { position: absolute; inset-block-start: 50%; inset-inline-end: 16px; transform: translateY(-50%);
  display: inline-flex; color: var(--ink-muted); transition: color 160ms ease, transform 160ms ease; }
a.stat-link .stat-go svg { width: 18px; height: 18px; }
a.stat-link:hover, a.stat-link:focus-visible { border-color: var(--brand); box-shadow: var(--shadow-raised); }
a.stat-link:hover .stat-go, a.stat-link:focus-visible .stat-go { color: var(--brand); transform: translateY(-50%) translateX(2px); }
a.stat-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- nested nav group ----------
   Reporting is a module, so the nav says so: a parent row that discloses the
   reports under it. Three things carry the hierarchy, none of them colour:
   indentation to the parent's label (12px padding + 18px icon + 11px gap = 41px),
   a hairline rail down the icon's centre line tying the children to their parent,
   and one step down the type scale. The active child keeps the same teal fill any
   nav item gets, so "you are here" does not change meaning at depth.

   Motion is the caret only, on the transition already declared for .nav-item, so
   the sidebar gains no new timing curve. */
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-parent { width: 100%; background: none; border: 0; font: inherit; text-align: start;
  font-size:15px; font-weight: 500; color: var(--on-chrome-muted); }
.nav-parent-static { cursor: default; }
/* The caret is taken out of flow rather than laid out beside the label. In flow
   it cost the row 29px (its own 18 plus the flex gap) that a plain nav item
   never pays, which left a group 6px short of "Configuration console" and
   wrapped it to two lines beside single-line siblings. Out of flow, the reserved
   padding is the only cost, and the label gets the same budget its siblings get.
   Vertical centring rides in the transform, so the collapsed rotation below has
   to restate it or the caret jumps on collapse. */
.nav-parent { position: relative; padding-inline-end: 24px; }
.nav-caret { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  display: inline-flex; opacity: .7; transition: transform 160ms ease; }
.nav-caret svg { width: 15px; height: 15px; }
.nav-group:not(.open) .nav-caret { transform: translateY(-50%) rotate(-90deg); }

/* The rail sits under the parent icon rather than at the pane edge, which reads as
   a line from the group to its members instead of a border on the sidebar. */
/* Must beat the `display: flex` below, or the hidden attribute does nothing: an
   author display rule wins over the UA stylesheet's [hidden] { display: none },
   so the caret rotated while the submenu stayed on screen. */
.nav-sub[hidden], .rowmenu-pop[hidden] { display: none; }
.nav-sub { display: flex; flex-direction: column; gap: 2px;
  margin-inline-start: 21px; padding-inline-start: 20px;
  border-inline-start: 1px solid var(--chrome-hairline); }
.nav-item.nav-child { padding-block: 7px; font-size:14px; }

/* A collapsed group still has to say it holds the page you are on, or collapsing it
   loses the only "you are here" cue on screen. Text is not available in a caret, so
   the parent takes the same soft fill a hovered item gets plus a teal marker —
   redundant with the open submenu, load-bearing when it is shut. */
.nav-group.holds-active:not(.open) .nav-parent { background: var(--chrome-hover); color: var(--on-chrome); }
.nav-group.holds-active:not(.open) .nav-parent::after { content: ""; width: 5px; height: 5px;
  border-radius: 50%; background: var(--on-chrome-label); margin-inline-start: 7px; order: 1; flex: 0 0 5px; }
/* Ordered so the marker sits beside the label and the caret keeps the far edge —
   the caret's auto start margin absorbs the space between them. */
.nav-caret { order: 2; }

@media (prefers-reduced-motion: reduce) { .nav-caret { transition: none; } }

/* ---------- row action menu ----------
   One control per row instead of a stack of buttons. Sized to the 32px touch target
   the tab bar already uses, and quiet until wanted: the caseload table is read far
   more often than it is acted on, so the actions should not out-weigh the data.

   The popover is fixed-positioned from JS (see UI.rowMenu) because a scrolling card
   would clip it. Everything else here is Cascade's existing surface: card radius,
   card shadow, hairline border, teal on hover. */
.rowmenu { display: inline-flex; position: relative; }
.rowmenu-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised); color: var(--ink-muted);
  cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.rowmenu-btn svg { width: 16px; height: 16px; }
.rowmenu-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--surface-subtle); }
.rowmenu-btn[aria-expanded="true"] { color: var(--surface-raised); background: var(--brand); border-color: var(--brand); }

.rowmenu-pop { position: fixed; z-index: 60; min-width: 194px; padding: 6px;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-overlay); }
.rowmenu-item { display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: inherit; font-size:15px; font-weight: 500; color: var(--ink-strong); text-align: start; text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease; }
.rowmenu-item svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--ink-muted); }
.rowmenu-item:hover { background: var(--surface-subtle); color: var(--brand-hover); }
.rowmenu-item:hover svg { color: var(--brand); }

/* A row's actions are irrelevant on paper, and a popover cannot be opened there. */
@media print { .rowmenu { display: none; } }