/* ============================================================
   Admin v2 — Atelier console
   ------------------------------------------------------------
   Implementation of the "Admin Console" design handoff (Claude
   Design, 2026-05-16). Deep W&M forest navbar carries the brand;
   warm-canvas rail with sectioned register, course-code license
   plate, and live cohort status; Fraunces serif page titles;
   brass-edged KPI tiles and group plates; lined-paper warm-note
   editor. Outer .av-* class names are preserved so the existing
   admin templates don't need structural edits.
   ============================================================ */

/* ── Canonical admin design tokens at :root.
     ----------------------------------------------------------------
     This block is the SINGLE SOURCE OF TRUTH for admin design
     primitives. Roster (.ros-*), Student-performance (.sp-*) and
     Graduation (.grad-*) all draw from this set so the three pages
     read as one product. Previously the roster used raw hex
     literals (#003526, #B8965B, #fbf8ee, #7a6740) and the dossier
     declared local `--sp-*` tokens with a DIFFERENT brass (#B8965B
     vs the shared #B9975B). We reconciled to #B8965B — the brand
     spec brass that matches the email templates and the original
     handoff. The old `--brass`, `--canvas`, `--ink`, `--rule` token
     names are kept for back-compat; new code should prefer the
     fuller set (parchment / claret / vermilion / green-seal / ink-*
     / rule-*). */
:root{
  /* ── Parchment / canvas / cream — warm grounds */
  --parchment:#fbf8ee;
  --parchment-edge:#f1ebd6;
  --cream:#fbf8ee;
  --canvas:#f8f6f0;
  --canvas-edge:#efece2;
  --surface:#ffffff;
  --surface-sunken:#f4f1e6;
  --surface-hover:#faf8f2;

  /* ── Brass — W&M brand spec. #B8965B is canonical (matches
       email templates, chassis.css brand block, and the dossier
       register); the previous #B9975B in this file was drift.
       `--brass-deep` is the saturated emphasis brass (matches
       chassis); `--brass-warm` is the muted parchment-edge brass
       used by the roster eyebrows and dossier crumb labels. */
  --brass:#B8965B;
  --brass-bright:#e8c275;
  --brass-light:#e7d2a3;
  --brass-deep:#8a6b1f;
  --brass-warm:#7a6740;
  --brass-tint:#f3ead3;
  --brass-line:rgba(184,150,91,.30);
  --brass-line-soft:rgba(184,150,91,.15);

  /* ── Claret — wax-seal red, used for notarised stamps + alerts. */
  --claret:#7a1d2a;
  --claret-soft:#f4dde0;

  /* ── Vermilion — diverged / mismatch warning ramp. */
  --vermilion:#a64d1e;
  --vermilion-soft:#fbe4d3;

  /* ── Green-seal / brand greens — W&M forest hierarchy. */
  --green-seal:#1f5e2f;
  --green-deep:#003526;
  --wm-green:#115740;
  --wm-green-deep:#072e21;
  --wm-green-darker:#051d18;
  --wm-green-soft:#1c6f53;
  --wm-green-wash:rgba(17,87,64,.06);
  --wm-green-wash-2:rgba(17,87,64,.10);

  /* ── Ink hierarchy — five steps for body / soft / mute / faint. */
  --ink:#1a1f1c;
  --ink-soft:#3a4540;
  --ink-mute:#6d7771;
  --ink-faint:#9aa19c;

  /* ── Rule lines — three weights for borders / separators. */
  --rule:#e6e2d2;
  --rule-soft:#efebdc;
  --rule-strong:#d6d1bb;

  /* ── Status ramps (ok / warn / bad). */
  --ok:#0e5c28;   --ok-bg:#e6f0e3;   --ok-line:#bfd9b8;
  --warn:#7a4d00; --warn-bg:#fbf2d4; --warn-line:#ebd791;
  --bad:#8a2018;  --bad-bg:#f5e4e3;  --bad-line:#e0bdb8;

  /* ── Geometry. */
  --r-sm:6px;
  --r-md:8px;
  --r-lg:10px;
  --h-navbar:61px;
  --rail-w:236px;
}

.av-shell{
  /* ── .av-shell re-declares the same canonical tokens (a no-op for
       descendants of :root, but kept explicit because the shell
       block ALSO declares legacy aliases below — and grouping them
       in one place documents the contract). All values must match
       :root above; the single source of truth is :root. */
  --brass:#B8965B;
  --brass-bright:#e8c275;
  --brass-light:#e7d2a3;
  --brass-deep:#8a6b1f;
  --brass-warm:#7a6740;
  --brass-tint:#f3ead3;
  --brass-line:rgba(184,150,91,.30);
  --brass-line-soft:rgba(184,150,91,.15);

  --crimson:#8a2018;

  /* ── Legacy / convenience aliases. Existing templates use
       var(--cream), var(--cream-warm), var(--av-radius), etc. in
       inline styles. Map them so inline references continue to
       work without per-template edits. */
  --cream-warm:var(--canvas);
  --cream-edge:var(--canvas-edge);
  --green-dark:var(--wm-green-darker);
  --av-radius:var(--r-md);
  --av-radius-sm:var(--r-sm);
  --av-radius-xs:4px;
  --av-rail-w:var(--rail-w);
  --av-h-topbar:var(--h-navbar);
  --av-h-btn:34px;
  --av-h-btn-sm:28px;
  --av-h-input:34px;
  --av-h-chip:30px;
  --av-canvas:var(--canvas);
  --av-surface:var(--surface);
  --av-surface-hover:var(--surface-hover);
  --av-surface-sunken:var(--surface-sunken);
  --av-border:var(--rule);
  --av-border-soft:var(--rule-soft);
  --av-border-strong:var(--rule-strong);
  --av-ink:var(--ink);
  --av-ink-soft:var(--ink-soft);
  --av-ink-mute:var(--ink-mute);
  --av-ink-faint:var(--ink-faint);
  --av-ink-tint:var(--surface-sunken);
  --av-primary:var(--wm-green);
  --av-primary-hover:var(--wm-green-deep);
  --av-focus-ring:0 0 0 3px var(--wm-green-wash);
}

/* Full-bleed body on admin routes only. base.html drops the
   .main wrapper for /admin/* so the topbar + .av-shell are direct
   <body> children; nuke the browser default 8px body margin here
   too so the chrome runs edge-to-edge on every viewport. The
   :has() selector keeps this rule limited to pages that actually
   render the admin topbar — public pages are unaffected. */
body:has(> .av-topbar.nav),
body:has(> .nv.v8){margin:0;background:var(--canvas)}

.av-shell *,.av-shell *::before,.av-shell *::after{box-sizing:border-box}

/* Hide the browser-native number spinner across the admin console.
   The default WebKit/Firefox stepper buttons eat ~16px of the input's
   right edge — on the dense grade-editor inputs the value visibly
   overlaps the arrows ("94.5(" instead of "94.50"). Operators key
   grades from the number row, not by clicking arrows, so dropping
   the steppers makes the inputs read as clean tabular cells. */
.av-shell input[type=number]::-webkit-inner-spin-button,
.av-shell input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance:none;appearance:none;margin:0;
}
.av-shell input[type=number]{
  -moz-appearance:textfield;
  appearance:textfield;
}
.av-shell{
  display:flex;min-height:calc(100vh - var(--h-navbar));width:100%;
  font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink);
  background:var(--canvas);
  position:relative;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.av-shell::before{
  content:"";position:absolute;top:0;bottom:0;
  left:var(--rail-w);width:1px;
  background:linear-gradient(180deg, var(--brass-line) 0%, var(--brass-line-soft) 100%);
  pointer-events:none;z-index:1;
}

.av-main{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.av-main .av-toolbar__title,
.av-main .av-toolbar__title small,
.av-main [data-serif]{
  font-family:"Fraunces", "Iowan Old Style", Georgia, serif !important;
}
.av-main em,
.av-main i{font-style:italic}
.av-main code,
.av-main kbd,
.av-main samp,
.av-main pre{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* ============================================================
   ADMIN TOPBAR — atelier band (the "fixed" admin navbar).
   ------------------------------------------------------------
   Carried back from the commit before the V8 Tribe swap. Used on
   every /admin/* route and on public pages when an admin is logged
   in. The V8 Tribe block below is the public-anon variant only.
   ============================================================ */
.av-topbar.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--h-navbar);
  display:flex;align-items:stretch;
  background:linear-gradient(180deg, var(--wm-green-deep) 0%, var(--wm-green-darker) 100%);
  color:#fff;
  border-bottom:1px solid rgba(0,0,0,.4);
  box-shadow:0 1px 0 rgba(185,151,91,.45);
  padding:0;
  font:500 13px var(--sans);
}
/* Body compensation for the now-fixed navbar so page content doesn't
   slide underneath it. Pinned to --h-navbar so the offset always tracks.
   Selector uses :has() to cover both base.html-rendered pages AND admin
   templates that include the topbar directly. */
body:has(> .av-topbar.nav){padding-top:var(--h-navbar)}
.av-topbar.nav .nav__brand{
  display:flex;align-items:center;gap:11px;
  padding:0 22px;
  border-right:1px solid rgba(185,151,91,.22);
  min-width:0;
  text-decoration:none;color:inherit;
  transition:background .15s ease;
}
.av-topbar.nav .nav__brand:hover{background:rgba(255,255,255,.03)}
.av-topbar.nav .nav__brand:focus-visible{outline:2px solid var(--brass-bright);outline-offset:-3px}
.av-topbar.nav .nav__monogram{
  height:26px;width:auto;display:block;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.3));
}
.av-topbar.nav .nav__brand-meta{display:flex;flex-direction:column;gap:1px;line-height:1.1}
.av-topbar.nav .nav__brand-school{
  font:600 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-bright);
  white-space:nowrap;
}
.av-topbar.nav .nav__brand-product{
  font:500 12px var(--sans);letter-spacing:-.005em;
  color:rgba(255,255,255,.88);
  white-space:nowrap;
}
.av-topbar.nav .nav__crumbs{
  display:flex;align-items:center;gap:10px;
  padding:0 22px;flex:1;min-width:0;
}
.av-topbar.nav .crumb{
  display:inline-flex;align-items:center;gap:8px;
  font:500 12.5px var(--sans);letter-spacing:-.005em;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  white-space:nowrap;
}
.av-topbar.nav .crumb--term{
  padding:5px 11px 5px 9px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(185,151,91,.28);
  border-radius:999px;
  color:rgba(255,255,255,.88);
}
.av-topbar.nav .crumb--term .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--brass-bright);
  box-shadow:0 0 0 3px rgba(212,182,119,.18);
}
.av-topbar.nav .crumb__sep{
  width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.32);
}
.av-topbar.nav .crumb__sep svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.av-topbar.nav .crumb--page{color:#fff;font-weight:500}
.av-topbar.nav .nav__actions{display:flex;align-items:center;gap:10px;padding:0 24px}
.av-topbar.nav .nav__btn{
  display:inline-flex;align-items:center;gap:7px;
  height:32px;padding:0 11px;
  font:500 12.5px var(--sans);letter-spacing:-.005em;
  color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:var(--r-sm);text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
  cursor:pointer;
}
.av-topbar.nav .nav__btn:hover{background:rgba(255,255,255,.08);border-color:rgba(185,151,91,.4);color:#fff}
.av-topbar.nav .nav__btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.av-topbar.nav .nav__btn--icon{padding:0;width:32px;justify-content:center}
.av-topbar.nav .nav__identity{
  display:inline-flex;align-items:center;gap:9px;
  height:32px;padding:3px 14px 3px 4px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.92);
}
.av-topbar.nav .nav__avatar{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg, var(--brass-bright), var(--brass));
  color:var(--wm-green-darker);
  display:inline-flex;align-items:center;justify-content:center;
  font:700 10px var(--sans);letter-spacing:0;
}
.av-topbar.nav .nav__email{
  font:500 12.5px var(--sans);
  max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ============================================================
   PUBLIC TOPBAR — Tribe variant 08f ("Two-row · YEAR & TERM").
   ------------------------------------------------------------
   Direct implementation of the design handoff at
   02-tribe-navbar-variants.html → V8 with rightContent 08f. Deep
   --green-dark band, 2px brass bottom rule, two stacked rows.
   ============================================================ */
.nv{
  position:relative;overflow:hidden;
  background:var(--green-dark);
  color:var(--cream);
  font-family:var(--sans);
  position:sticky;top:0;z-index:50;
}
.nv.v8{
  padding:0;
  border-bottom:2px solid var(--brass);
  background:var(--green-dark);
}

/* Top utility strip. */
.nv.v8 .top{
  padding:6px clamp(28px, 4vw, 56px);
  background:rgba(0,0,0,.28);
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--brass-light);
  border-bottom:1px solid rgba(184,150,91,.18);
  line-height:1;
}
.nv.v8 .top .l,
.nv.v8 .top .r{
  display:flex;gap:18px;align-items:center;
  flex-wrap:wrap;
}
.nv.v8 .top b{color:var(--cream);font-weight:600}
.nv.v8 .top .r span{
  display:inline-flex;align-items:baseline;gap:6px;
}

/* Pulsing live dot (Today indicator). */
.nv .dot{
  width:7px;height:7px;border-radius:50%;
  background:#5fd49a;
  box-shadow:0 0 12px #5fd49a;
  display:inline-block;
  align-self:center;
  animation:nv-pulse 2.2s ease-in-out infinite;
}
@keyframes nv-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.86)}
}

/* Identity chip in the top utility strip — tiny brass-rim avatar
   + email so the logged-in operator is always visible. */
.nv.v8 .top .who{
  display:inline-flex;align-items:center;gap:7px;
  padding:0 2px 0 0;
}
.nv.v8 .top .who__av{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:linear-gradient(135deg, var(--brass-bright), var(--brass));
  color:var(--green-dark);
  font:700 8.5px var(--sans);letter-spacing:0;
}
.nv.v8 .top .who b{
  font-family:var(--mono);
  letter-spacing:.06em;
  text-transform:none;
  max-width:220px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Main row — three flex tracks (1fr auto 1fr) so the centered title
   is VISUALLY centered in the viewport regardless of how wide the
   left mark or right CTA happen to be. */
.nv.v8 .main{
  padding:14px clamp(28px, 4vw, 56px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(20px, 4vw, 40px);
  align-items:center;
}
.nv.v8 .main .mk{
  display:inline-flex;align-items:center;justify-self:start;
}
.nv.v8 .main .mk img{
  height:24px;width:auto;display:block;
}
.nv.v8 .main .c{justify-self:center}
.nv.v8 .main .auth,
.nv.v8 .main .cta{justify-self:end}

/* Identity chip + logout group sits to the right of the title on
   the main row, the chip's "AM" disc and email both in cream/brass
   so they read against the dark green band. */
.nv.v8 .main .auth{
  display:inline-flex;align-items:center;gap:12px;
}
.nv.v8 .main .who{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--cream);
  font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:none;
}
.nv.v8 .main .who__av{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg, var(--brass-bright), var(--brass));
  color:var(--green-dark);
  font:700 11px var(--sans);letter-spacing:0;
  flex-shrink:0;
}
.nv.v8 .main .who b{
  font-family:var(--mono);font-weight:600;
  text-transform:none;letter-spacing:.03em;
  font-size:12px;color:var(--cream);
}
.nv.v8 .main .c{
  font-family:var(--display);
  font-weight:600;font-size:22px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--cream);
  text-align:center;
  line-height:1;
}
.nv.v8 .main .c em{
  font-family:var(--serif);
  font-style:italic;
  color:var(--brass-bright);
  font-weight:800;
  text-transform:none;
}
.nv.v8 .main .cta{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass-bright);
  padding:8px 14px;
  border:1.5px solid var(--brass);
  font-weight:700;
  background:transparent;
  line-height:1;
  text-decoration:none;
  display:inline-block;
  transition:background .15s ease,color .15s ease;
}
.nv.v8 .main .cta:hover{
  background:var(--brass);
  color:var(--green-dark);
}

@media (max-width:760px){
  .nv.v8 .top{font-size:8.5px;letter-spacing:.22em;gap:10px}
  .nv.v8 .top .l,
  .nv.v8 .top .r{gap:10px}
  .nv.v8 .top .who b{max-width:120px}
  .nv.v8 .main{grid-template-columns:auto 1fr auto;gap:14px;padding:12px 18px}
  .nv.v8 .main .c{font-size:16px;letter-spacing:.01em}
  .nv.v8 .main .cta{padding:6px 10px;font-size:9.5px}
}

/* ============================================================
   RAIL — sectioned bench register on the warm canvas.
   ============================================================ */
.av-rail.rail{
  flex:0 0 var(--rail-w);width:var(--rail-w);
  background:var(--canvas);
  position:sticky;top:var(--h-navbar);
  align-self:flex-start;
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--h-navbar));
  z-index:2;
  border-right:none;
  color:var(--ink);
}

/* Course-code "license plate" tile at the top of the rail. */
.rail__course{
  margin:18px 16px 14px;
  padding:11px 14px 12px;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  position:relative;overflow:hidden;
  text-decoration:none;color:inherit;display:block;
  transition:border-color .15s ease,background .15s ease;
}
.rail__course:hover{border-color:var(--rule-strong);background:var(--surface-hover)}
.rail__course:focus-visible{outline:2px solid var(--brass-bright);outline-offset:-2px}
.rail__course::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg, var(--wm-green) 0%, var(--wm-green-soft) 100%);
}
.rail__course-code{
  display:flex;align-items:baseline;gap:6px;
  font:600 13px var(--mono);letter-spacing:-.01em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.rail__course-code .slash{color:var(--brass-deep);font-weight:500}
.rail__course-code .dot-sep{color:var(--ink-mute)}
.rail__course-term{
  margin-top:3px;
  font:500 11px var(--sans);letter-spacing:.005em;
  color:var(--ink-mute);
}
.rail__course-meta{
  margin-top:8px;padding-top:8px;border-top:1px dashed var(--rule);
  display:flex;justify-content:space-between;align-items:center;
  font:500 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);
}
.rail__course-meta strong{
  color:var(--wm-green);font:600 11px var(--mono);letter-spacing:0;
  text-transform:none;font-variant-numeric:tabular-nums;
}

/* Section heading — eyebrow + horizontal rule */
.rail__section-h{
  margin:14px 22px 4px;
  font:600 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;align-items:center;gap:8px;
}
.rail__section-h::after{
  content:"";flex:1;height:1px;background:var(--rule);
}

/* Course title — sits between the license-plate card and the nav,
   so the rail always announces what class is being graded. Italic
   serif for ledger-register feel; brass-deep tint to read against
   the cream rail without competing with the active-nav highlight. */
.rail__course-title{
  margin:14px 22px 6px;
  font:600 italic 13px var(--serif);
  letter-spacing:-.005em;line-height:1.25;
  color:var(--brass-deep);
}

.rail__nav{display:flex;flex-direction:column;gap:1px;padding:4px 0;margin:0;list-style:none}
.rail__nav a{
  position:relative;
  display:flex;align-items:center;gap:11px;
  height:34px;padding:0 22px;
  font:500 13px var(--sans);letter-spacing:-.005em;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color .15s ease,background .15s ease;
}
.rail__nav a::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:3px;background:transparent;
  border-radius:0 2px 2px 0;
  transition:background .15s ease;
}
.rail__nav a:hover{color:var(--ink);background:rgba(0,0,0,.025)}
.rail__nav a.is-active{
  color:var(--wm-green-deep);
  background:var(--wm-green-wash);
  font-weight:600;
}
.rail__nav a.is-active::before{
  background:linear-gradient(180deg, var(--brass-bright) 0%, var(--brass) 50%, var(--brass-deep) 100%);
}
.rail__nav a.is-active .rail__ico{color:var(--wm-green)}
.rail__nav a:focus-visible{outline:none;background:var(--wm-green-wash-2)}

.rail__ico{
  flex:0 0 16px;width:16px;height:16px;
  stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  color:var(--ink-mute);
}
.rail__count{
  margin-left:auto;
  font:500 11px var(--mono);letter-spacing:0;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
  padding:1px 6px;
  background:var(--surface-sunken);
  border:1px solid var(--rule);
  border-radius:999px;
  min-width:22px;text-align:center;
}
.rail__nav a.is-active .rail__count{
  color:var(--wm-green-deep);
  background:rgba(255,255,255,.85);
  border-color:var(--brass-line);
}

/* Status block — current term snapshot */
.rail__status{
  margin:auto 16px 18px;
  padding:12px 14px;
  background:var(--surface-sunken);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
}
.rail__status-h{
  display:flex;align-items:center;justify-content:space-between;
  font:600 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:8px;
}
.rail__status-pulse{
  width:7px;height:7px;border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 3px var(--ok-bg);
  animation:rail-pulse 2s ease-in-out infinite;
}
@keyframes rail-pulse{
  0%,100%{box-shadow:0 0 0 3px var(--ok-bg)}
  50%{box-shadow:0 0 0 5px rgba(14,92,40,.10)}
}
.rail__status-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font:500 12px var(--sans);
  color:var(--ink-soft);
  padding:3px 0;
}
.rail__status-row b{
  font:600 12px var(--mono);font-variant-numeric:tabular-nums;
  color:var(--ink);letter-spacing:-.01em;
}
.rail__status-row .lbl{color:var(--ink-mute);font-weight:500}

.rail__exit{
  padding:12px 22px 18px;
  border-top:1px solid var(--rule);
}
.rail__exit a{
  display:inline-flex;align-items:center;gap:6px;
  font:500 11.5px var(--sans);
  color:var(--ink-mute);text-decoration:none;
  transition:color .15s ease;
}
.rail__exit a:hover{color:var(--wm-green)}
.rail__exit svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   MAIN COLUMN
   ============================================================ */
.av-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--canvas)}
.av-page{padding:26px 36px 56px;max-width:1480px;width:100%}

/* ============================================================
   PAGE HEADER — title + primary on row 1, search + chips on row 2.
   Existing templates use .av-toolbar / .av-toolbar__title /
   .av-toolbar__sep / .av-search / .av-chip-row / .av-btn — those
   are styled as the design's .ph / .ph__title / .ph__sep / etc.
   ============================================================ */
.av-toolbar{
  display:grid;
  grid-template-columns:minmax(0,auto) 1fr auto;
  grid-auto-rows:auto;
  align-items:center;
  gap:14px;row-gap:16px;
  padding-bottom:18px;margin-bottom:20px;
  border-bottom:1px solid var(--rule);
}
.av-toolbar > *{min-width:0}
.av-toolbar > div:first-child{grid-column:1;grid-row:1}
.av-toolbar__sep{grid-column:2;grid-row:1;display:block}
.av-toolbar > .av-btn,
.av-toolbar > a.av-btn,
.av-toolbar > form{grid-column:3;grid-row:1;justify-self:end}
.av-toolbar > .av-search{
  grid-column:1 / span 2;grid-row:2;
  justify-self:start;max-width:340px;width:100%;
}
.av-toolbar > .av-chip-row{grid-column:3;grid-row:2;justify-self:end}
.av-toolbar:not(:has(.av-search)) > .av-chip-row{
  grid-column:1 / -1;justify-self:start;
}

.av-toolbar__title{
  font:700 22px var(--serif);
  color:var(--ink);letter-spacing:-.01em;line-height:1.15;
}
.av-toolbar__title small{
  display:block;margin-top:4px;
  font:500 12.5px var(--sans);letter-spacing:-.005em;
  color:var(--ink-mute);
  text-transform:none;font-weight:500;
}

/* ============================================================
   SEARCH
   ============================================================ */
.av-search{position:relative;display:flex;align-items:center;width:100%}
.av-search input{
  appearance:none;
  height:34px;padding:0 12px 0 34px;width:100%;
  font:500 13px var(--sans);color:var(--ink);
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.av-search input::placeholder{color:var(--ink-mute);font-weight:400}
.av-search input:hover{border-color:var(--rule-strong)}
.av-search input:focus{
  border-color:var(--wm-green);
  box-shadow:0 0 0 3px var(--wm-green-wash);
}
.av-search::before{
  content:"";position:absolute;left:11px;top:50%;width:14px;height:14px;
  transform:translateY(-50%);pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7771' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
}

/* ============================================================
   CHIPS — filter segments. Active = forest green fill.
   ============================================================ */
.av-chip-row{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.av-chip{
  display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 12px;
  font:500 12.5px var(--sans);letter-spacing:-.005em;
  color:var(--ink-soft);background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r-sm);
  cursor:pointer;text-transform:none;
  transition:all .15s ease;
}
.av-chip:hover{background:var(--surface-hover);border-color:var(--rule-strong);color:var(--ink)}
.av-chip.is-active{
  background:var(--wm-green-deep);color:#fff;
  border-color:var(--wm-green-deep);
}
.av-chip .ct,
.av-chip .av-chip__count,
.av-chip__ct{
  font:500 11px var(--mono);letter-spacing:0;
  padding:1px 6px;border-radius:999px;
  background:var(--surface-sunken);border:1px solid var(--rule);
  color:var(--ink-mute);min-width:22px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.av-chip.is-active .ct,
.av-chip.is-active .av-chip__count,
.av-chip.is-active .av-chip__ct{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.92);
}
.av-chip:focus-visible{outline:none;border-color:var(--wm-green);box-shadow:var(--av-focus-ring)}

/* ============================================================
   BUTTONS — W&M green primary; ghost; danger; small variants.
   ============================================================ */
.av-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:34px;padding:0 14px;
  font:500 13px var(--sans);letter-spacing:-.005em;
  color:#fff;background:var(--wm-green);
  border:1px solid var(--wm-green);border-radius:var(--r-sm);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:all .15s ease;
}
.av-btn:hover{background:var(--wm-green-deep);border-color:var(--wm-green-deep);color:#fff}
.av-btn:focus-visible{outline:none;box-shadow:var(--av-focus-ring)}
.av-btn[disabled]{opacity:.5;cursor:not-allowed}
.av-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.av-btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--rule)}
.av-btn--ghost:hover{background:var(--surface-hover);border-color:var(--rule-strong);color:var(--ink)}

.av-btn--danger{background:var(--surface);color:var(--bad);border-color:var(--bad-line)}
.av-btn--danger:hover{background:var(--bad);color:#fff;border-color:var(--bad)}

.av-btn--sm{height:28px;padding:0 11px;font-size:12.5px}

/* ============================================================
   KPI TILES — brass top accent, mono numerals.
   ============================================================ */
.av-kpi-row{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:12px;margin-bottom:22px;
}
.av-kpi{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  padding:14px 16px 16px;
  display:flex;flex-direction:column;gap:5px;
  position:relative;overflow:hidden;
}
.av-kpi::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:28px;
  background:var(--brass);opacity:.6;
}
.av-kpi__label{
  font:500 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);
}
.av-kpi__value{
  font:600 28px var(--mono);
  color:var(--ink);line-height:1.1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.av-kpi__value em{
  font-style:normal;font-weight:500;font-size:15px;
  color:var(--ink-faint);margin-left:1px;
}
.av-kpi__delta{
  margin-top:4px;
  font:500 12px var(--sans);letter-spacing:-.005em;
  color:var(--ink-mute);
  display:inline-flex;align-items:center;gap:6px;
  text-transform:none;
}
.av-kpi__delta::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ink-faint);
}
.av-kpi__delta--up{color:var(--ok)}
.av-kpi__delta--up::before{background:var(--ok)}
.av-kpi__delta--down{color:var(--bad)}
.av-kpi__delta--down::before{background:var(--bad)}

/* ============================================================
   TABLES
   ============================================================ */
.av-table-wrap{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  overflow:hidden;
}
.av-table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);font-size:13px;
}
.av-table thead th{
  background:var(--surface-sunken);
  font:600 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);text-align:left;
  padding:11px 16px;
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.av-table thead th.is-num{text-align:right}
.av-table tbody tr{transition:background .1s ease}
.av-table tbody tr:hover{background:var(--surface-hover)}
.av-table tbody tr+tr td{border-top:1px solid var(--rule-soft)}
.av-table td{
  padding:11px 16px;vertical-align:middle;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.av-table td.is-num{
  text-align:right;
  font:500 13px var(--mono);
  color:var(--ink);
  letter-spacing:-.005em;
}
.av-table td.is-num b{font-weight:600;color:var(--ink)}
.av-table td.is-grade{text-align:center;font-style:normal}

.av-cell-name{display:flex;align-items:center;gap:11px;min-width:0}
.av-cell-name__meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.av-cell-name__name{
  font:500 13px var(--sans);color:var(--ink);
  letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;
}
.av-cell-name__email{
  font:400 12px var(--mono);color:var(--ink-mute);letter-spacing:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;
}

/* ============================================================
   AVATAR — brass-tinted disc with initials, photo overlay.
   ============================================================ */
.av-avatar{
  position:relative;
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg, var(--brass-light), var(--brass));
  color:var(--wm-green-darker);
  display:inline-flex;align-items:center;justify-content:center;
  font:700 10.5px var(--sans);letter-spacing:0;
  border:1px solid var(--brass-line);
  overflow:hidden;
}
.av-avatar > img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  background:var(--brass-light);
}
.av-avatar > .av-avatar__init{position:relative;z-index:0;line-height:1}
.av-avatar--lg{width:42px;height:42px;font-size:13px;flex-basis:42px}
.av-avatar--sm{width:22px;height:22px;font-size:9.5px;flex-basis:22px}

/* ============================================================
   LETTER GRADE CHIPS
   ============================================================ */
.av-grade{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:24px;padding:0 8px;
  border-radius:var(--r-sm);
  font:600 12px var(--mono);letter-spacing:-.005em;
  border:1px solid transparent;font-variant-numeric:tabular-nums;
}
.av-grade--a{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.av-grade--b{background:#eef0e7;color:#4d5640;border-color:#d8dccb}
.av-grade--c{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.av-grade--d{background:#fde2cf;color:#7a3a08;border-color:#f4caa6}
.av-grade--f{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}

/* ============================================================
   PILLS — atelier status chips.
   ============================================================ */
.av-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 10px;height:22px;
  font:500 11.5px var(--sans);letter-spacing:-.005em;
  border-radius:999px;
  border:1px solid var(--rule);background:var(--surface-sunken);
  color:var(--ink-soft);
  text-transform:none;white-space:nowrap;
}
.av-pill--ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.av-pill--warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.av-pill--fail{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.av-pill--ghost{background:var(--surface);color:var(--ink-mute);border-color:var(--rule)}
.av-pill__dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}

/* Warm-notes roster — status column pills (col 2) are uniform width so
   the column reads as a tidy chip stack regardless of label length
   (N/A · banner vs. Draft vs. Approved). */
.av-table tbody td:nth-child(2) .av-pill{
  min-width:104px;justify-content:center;
}

/* ============================================================
   GENERIC CARD — section wrapper
   ============================================================ */
.av-shell .av-card{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  padding:18px 20px;margin-bottom:18px;
  display:flex;flex-direction:column;gap:14px;
}
.av-card__hd{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule-soft);
}
.av-card__title{
  font:600 15px var(--sans);
  color:var(--ink);letter-spacing:-.01em;
  font-style:normal;
}
.av-card__title small{
  display:block;margin-top:3px;
  font:500 12px var(--sans);letter-spacing:0;
  color:var(--ink-mute);text-transform:none;font-style:normal;
}
.av-card__meta{
  font:500 11.5px var(--sans);letter-spacing:-.005em;
  color:var(--ink-mute);text-transform:none;
}
.av-card__bd{display:flex;flex-direction:column;gap:12px}
.av-card__ft{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--rule-soft);
}
.av-card__ft .hint{
  font:400 12px var(--sans);
  color:var(--ink-mute);font-style:normal;
}

/* ============================================================
   ACTIONS (table-row controls)
   ============================================================ */
.av-actions{
  display:inline-flex;gap:6px;flex-wrap:nowrap;align-items:center;
  justify-content:flex-end;
}
.av-actions form{display:inline-flex;margin:0}
.av-actions .av-btn--sm{min-width:64px}

/* ============================================================
   FORMS (admin v2 inline)
   ============================================================ */
.av-form-row{display:flex;flex-direction:column;gap:5px}
.av-form-row label{
  font:500 11px var(--sans);letter-spacing:.10em;text-transform:uppercase;
  color:var(--ink-faint);
}
.av-form-row label .req{color:var(--bad);margin-left:2px}
.av-form-row input,
.av-form-row textarea,
.av-form-row select{
  appearance:none;
  font:500 13px var(--sans);color:var(--ink);
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  padding:0 12px;height:34px;outline:none;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.av-form-row textarea{
  font-family:var(--sans);
  min-height:96px;height:auto;
  padding:9px 12px;
  resize:vertical;line-height:1.55;
}
.av-form-row select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236d7771' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;
  background-size:12px 12px;padding-right:30px;
}
.av-form-row input:hover,
.av-form-row textarea:hover,
.av-form-row select:hover{border-color:var(--rule-strong)}
.av-form-row input:focus,
.av-form-row textarea:focus,
.av-form-row select:focus{
  border-color:var(--wm-green);
  box-shadow:var(--av-focus-ring);
}
.av-form-row .hint{
  font:400 12px var(--sans);
  color:var(--ink-mute);font-style:normal;
}
.av-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.av-textarea{
  appearance:none;display:block;width:100%;
  font:500 13.5px/1.55 var(--sans);color:var(--ink);
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  padding:10px 12px;outline:none;
  resize:vertical;min-height:120px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.av-textarea:hover{border-color:var(--rule-strong)}
.av-textarea:focus{
  border-color:var(--wm-green);
  box-shadow:var(--av-focus-ring);
}
.av-textarea::placeholder{color:var(--ink-faint);font-style:normal;font-weight:400}

/* ============================================================
   EMPTY / LOADING / FLASH
   ============================================================ */
.av-empty{
  text-align:center;padding:48px 24px;
  color:var(--ink-mute);
  background:var(--surface);
  border:1px dashed var(--rule);
  border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.av-empty__icon{
  width:36px;height:36px;border-radius:50%;
  background:var(--surface-sunken);color:var(--ink-mute);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;border:1px solid var(--rule);
}
.av-empty__title{font:600 14px var(--sans);color:var(--ink);letter-spacing:-.005em}
.av-empty__body{
  font:400 13px var(--sans);
  color:var(--ink-mute);
  max-width:42ch;line-height:1.55;
}

.av-loading{display:flex;flex-direction:column;gap:8px;padding:16px}
.av-skel{
  height:14px;
  background:linear-gradient(90deg,var(--rule-soft) 0%,var(--rule) 50%,var(--rule-soft) 100%);
  background-size:200% 100%;
  border-radius:var(--r-sm);
  animation:av-shimmer 1.4s ease-in-out infinite;
}
.av-skel.w-30{width:30%}.av-skel.w-50{width:50%}.av-skel.w-70{width:70%}.av-skel.w-100{width:100%}
@keyframes av-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

.av-flash{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;margin-bottom:16px;
  border:1px solid var(--rule);
  border-left-width:3px;border-radius:var(--r-sm);
  font:500 13px var(--sans);color:var(--ink);
  background:var(--surface);
}
.av-flash__icon{
  flex:0 0 18px;width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 11px var(--sans);
}
.av-flash--ok{background:var(--ok-bg);border-color:var(--ok-line);border-left-color:var(--ok);color:var(--ok)}
.av-flash--ok .av-flash__icon{background:var(--ok);color:#fff}
.av-flash--fail{background:var(--bad-bg);border-color:var(--bad-line);border-left-color:var(--bad);color:var(--bad)}
.av-flash--fail .av-flash__icon{background:var(--bad);color:#fff}
.av-flash--info{background:var(--surface-sunken);border-color:var(--rule);border-left-color:var(--wm-green);color:var(--ink-soft)}
.av-flash--info .av-flash__icon{background:var(--wm-green);color:#fff}

/* ============================================================
   TIME / TIMESTAMP
   ============================================================ */
.av-time{
  font:500 11.5px var(--mono);
  color:var(--ink-mute);letter-spacing:0;
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   SIDE PANEL (modal-like detail editor — keep as-is)
   ============================================================ */
.av-side-panel{
  position:fixed;top:0;right:0;height:100vh;width:420px;max-width:90vw;
  background:var(--surface);
  border-left:1px solid var(--rule);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .22s ease;
  z-index:80;
}
.av-side-panel.is-open{transform:translateX(0)}
.av-side-panel__hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--rule);
}
.av-side-panel__hd h2{
  font:600 16px var(--sans);color:var(--ink);
  letter-spacing:-.012em;
}
.av-side-panel__bd{
  flex:1;overflow-y:auto;padding:18px 20px;
  display:flex;flex-direction:column;gap:14px;
}
.av-side-panel__ft{
  padding:14px 20px;border-top:1px solid var(--rule);
  display:flex;gap:8px;justify-content:flex-end;
}

/* ============================================================
   NOTES — seed editor with brass-line "warm note paper."
   ============================================================ */
.av-shell .lh-desk{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  padding:20px 22px;
  margin-bottom:18px;
  box-shadow:none;
  position:relative;
}
.av-shell .lh-desk__lbl{
  font:600 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-deep);
  padding-bottom:8px;margin-bottom:14px;
  border-bottom:1px solid var(--brass-line);
  display:flex;align-items:center;gap:8px;
}
.av-shell .lh-desk__lbl::before{
  content:"";width:18px;height:1px;background:var(--brass);
}
/* Warm-note paper textarea — lined cream paper with brass rulings
   every 26px, italic Fraunces body aligned to the rulings. */
.av-shell .lh-desk textarea{
  width:100%;min-height:180px;resize:vertical;
  font:400 15px var(--serif);
  line-height:26px;color:var(--ink);
  border:1px solid var(--rule);outline:none;
  background:#fdfcf5;
  background-image:repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 25px,
    rgba(185,151,91,.08) 26px
  );
  background-size:100% 26px;
  background-position:0 28px;
  border-radius:var(--r-sm);
  padding:14px 16px;
}
.av-shell .lh-desk textarea::-webkit-scrollbar{width:8px}
.av-shell .lh-desk textarea::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:4px}
.av-shell .lh-desk textarea:focus{
  border-color:var(--wm-green);
  box-shadow:var(--av-focus-ring);
}
.av-shell .lh-desk textarea::placeholder{
  color:var(--ink-faint);font-style:italic;
}
.av-shell .lh-desk__foot{
  border-top:1px dashed var(--rule);
  padding-top:12px;margin-top:12px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.av-shell .lh-desk__hint{
  font:400 12px var(--sans);letter-spacing:0;
  color:var(--ink-mute);text-transform:none;
}
.av-shell .lh-preview{
  background:var(--surface-sunken);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  padding:18px 20px;
}

/* ============================================================
   PROJECT REVIEW — branded group plate + inline grade editor.
   ============================================================ */
.av-main .dash-bulk__phase{
  background:var(--surface) !important;
  border:1px solid var(--rule) !important;
  border-radius:var(--r-md) !important;
}
.av-main .dash-bulk__phase h4{
  font:600 14px var(--sans) !important;
  color:var(--ink) !important;
  letter-spacing:-.01em !important;
}
.av-main .dash-bulk__phase .blurb{
  font:400 12.5px/1.55 var(--sans) !important;
  color:var(--ink-mute) !important;
  font-style:normal !important;
}
.av-main .dash-bulk__phase .blurb--disclaimer{
  color:var(--ink-soft) !important;font-style:italic !important;
}

.av-main .dash-msg{
  font:400 12.5px/1.5 var(--sans) !important;
  font-style:normal !important;
  color:var(--ink-soft) !important;
}
.av-main code{
  background:var(--surface-sunken) !important;
  color:var(--ink-soft) !important;
  border:1px solid var(--rule);
  padding:1px 5px;border-radius:4px;
  font-size:.9em;
}
.av-main .dash-badge{
  font:500 11.5px var(--sans) !important;
  letter-spacing:-.005em !important;
  text-transform:none !important;
  border-radius:var(--r-sm) !important;
}
.av-main .dash-badge__time{
  font:500 10.5px var(--mono) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  opacity:.72;
}

/* ============================================================
   SHARED ADMIN TOOLBAR — unified page header across roster /
   student-performance / graduation.
   ------------------------------------------------------------
   Before this block the three pages each ran their own header
   pattern: the roster shipped a 38px italic Fraunces h1 with a
   raw-hex eyebrow; the dossier ran a 28px non-italic Fraunces h1
   with an inline italic small; graduation rolled its own 30px
   non-italic. The three pages read as three products.

   Canonical contract (this block):
     .admin-toolbar           — outer wrap (flex; bottom rule)
     .admin-toolbar__eyebrow  — uppercase mono 10px brass-deep
     .admin-toolbar__title    — 28px Fraunces italic, brand ink
     .admin-toolbar__sub      — italic 13px Fraunces ink-soft
     .admin-toolbar__meta     — right-aligned slot (e.g. crumb)

   Roster and dossier templates retain their .ros-toolbar /
   .sp-toolbar wrappers for layout; they should adopt these class
   names on their inner eyebrow / title / sub elements so the
   typographic identity reads the same on every page. New work
   should use .admin-toolbar directly.
   ============================================================ */
.admin-toolbar{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  padding:0 0 18px;margin:0 0 22px;
  border-bottom:1px solid var(--brass-line);
}
.admin-toolbar__title-block{
  display:flex;flex-direction:column;gap:6px;min-width:0;
}
.admin-toolbar__eyebrow{
  display:block;
  font:700 10px var(--mono);letter-spacing:.28em;text-transform:uppercase;
  color:var(--brass-deep);
}
.admin-toolbar__title{
  margin:0;
  font:600 italic 28px/1.05 var(--serif);
  letter-spacing:-.015em;
  color:var(--green-deep);
  font-style:italic;
}
.admin-toolbar__title small{
  display:block;margin-top:4px;
  font:400 italic 14px var(--serif);
  color:var(--ink-mute);
  letter-spacing:0;
}
.admin-toolbar__sub{
  margin:0;
  font:400 italic 13px var(--serif);
  color:var(--ink-soft);
  letter-spacing:0;
}
.admin-toolbar__meta{
  display:flex;align-items:center;gap:10px;padding-bottom:4px;
  font:500 12.5px var(--sans);color:var(--ink-soft);
}

/* ============================================================
   SHARED ADMIN CARD — canonical card shape used by both the
   roster (.ros-card) and the dossier (.sp-card). 8px radius,
   warm-white surface, brass-line border, 18-20px padding,
   hd / bd / ft structure. Pages keep their semantic class names
   (.ros-card, .sp-card) for grid layout but compose visual
   chrome from .admin-card so the cards read as one product.
   ============================================================ */
.admin-card{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  padding:18px 20px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  display:flex;flex-direction:column;gap:12px;
}
.admin-card__hd{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--rule-soft);
}
.admin-card__hd h2,
.admin-card__title{
  font:600 14px var(--sans);letter-spacing:.04em;
  color:var(--green-deep);margin:0;
}
.admin-card__hint{
  font:400 11px var(--mono);letter-spacing:.02em;
  color:var(--ink-mute);
}
.admin-card__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 8px;
  background:var(--parchment);border:1px solid var(--rule);
  border-radius:11px;
  font:700 11px var(--mono);color:var(--brass-deep);
}
.admin-card__bd{display:flex;flex-direction:column;gap:12px;min-width:0}
.admin-card__ft{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--rule-soft);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .av-shell{flex-direction:column;min-height:auto}
  .av-shell::before{display:none}
  .av-rail.rail{
    position:sticky;top:var(--h-navbar);width:100%;height:auto;flex:0 0 auto;
    flex-direction:row;align-items:stretch;
    border-bottom:1px solid var(--rule);min-height:auto;
    align-self:stretch;
  }
  .rail__course{margin:8px;padding:8px 12px;flex:0 0 auto}
  .rail__course-meta,.rail__course-term{display:none}
  .rail__course-title{display:none}
  .rail__section-h{display:none}
  .rail__nav{
    flex:1;flex-direction:row;gap:0;padding:0;overflow-x:auto;
    border-left:1px solid var(--rule-soft);
    align-items:stretch;
  }
  .rail__nav a{
    height:auto;padding:10px 14px;
    white-space:nowrap;font-size:12.5px;
  }
  .rail__nav a::before{
    left:0;top:auto;bottom:0;height:2px;width:100%;
    border-radius:0;
  }
  .rail__count{margin-left:6px}
  .rail__status{display:none}
  .rail__exit{
    flex:0 0 auto;border-top:none;border-left:1px solid var(--rule-soft);
    padding:8px 14px;
  }
  .av-topbar.nav{padding:0}
  .nav__crumbs{display:none}
  .nav__email{display:none}
  .av-page{padding:20px 20px 40px}
}

@media (max-width:640px){
  .av-toolbar{gap:10px}
  .av-toolbar__title{font-size:19px}
  .av-toolbar__title h1{font-size:20px;line-height:1.15}
  .av-toolbar__title h1 small{display:block;font-size:11px;margin-top:2px}
  .av-search input{min-width:0;width:100%}
  .av-search{flex:1;min-width:140px}
  .av-form-grid{grid-template-columns:1fr}
  .av-side-panel{width:100vw}

  /* ── PHONE TOPBAR — keep the band intact but ditch the verbose
       brand subtitle and the identity email pill so the brass-bar
       doesn't horizontally overflow on <640px. */
  .av-topbar.nav{font-size:12px}
  .av-topbar.nav .nav__brand{padding:0 12px;gap:8px;border-right:none}
  .av-topbar.nav .nav__brand-meta{display:none}
  .av-topbar.nav .nav__monogram{height:22px}
  .av-topbar.nav .nav__actions{padding:0 10px;gap:6px}
  .av-topbar.nav .nav__identity{padding:3px 3px 3px 3px;gap:0;border:0;background:transparent}
  .av-topbar.nav .nav__identity .nav__email{display:none}
  .av-topbar.nav .nav__btn{padding:0 8px;gap:5px;height:30px;font-size:11.5px}

  /* ── PHONE RAIL STRIP — compress horizontal scrolling rail. The
       license-plate course chip is the largest item, so collapse its
       padding; hide the cohort title to keep the rail single-row;
       slim the exit so all three rail-nav items fit comfortably. */
  .av-rail.rail{align-items:center}
  .rail__course{margin:6px;padding:6px 10px}
  .rail__course-code{font-size:11.5px}
  .rail__course-title{display:none}
  .rail__nav a{padding:8px 11px;font-size:12px;gap:8px}
  .rail__count{padding:1px 5px;font-size:10px;min-width:18px}
  .rail__exit{padding:6px 10px}
  .rail__exit a{font-size:11px}

  /* ── PHONE PAGE — tighten content gutter further. */
  .av-page{padding:16px 14px 32px}

  /* ── PHONE TABLES — admin-v2 tables are wide by design. Turn the
       .av-table-wrap into a horizontal-scroll container instead of
       cropping content so operators can swipe to see every column. */
  .av-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .av-table{min-width:560px}
  .av-table thead th,
  .av-table td{padding:9px 12px}
}

/* G / NG monogram tag — sits before the student's name in the warm-notes
   roster. Always visible; brass for graduating, ink-soft for not. */
.av-grad-tag{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:18px;padding:0 5px;margin-right:7px;
  border-radius:4px;
  font:700 10px/1 var(--sans);letter-spacing:.06em;
  vertical-align:1px;
}
.av-grad-tag--g{
  background:var(--brass);color:#fff;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18);
}
.av-grad-tag--ng{
  background:transparent;color:var(--ink-mute);
  border:1px solid var(--rule-strong);
}

/* Inline magic-link login URL cell in the warm-notes roster. Shows a
   truncated monospaced URL + a small Copy button that flashes "Copied"
   for 1.2s. Only rendered when the warm note is approved; otherwise the
   ghost "Hidden until approved" pill takes the slot. */
.av-url-cell{display:flex;align-items:center;gap:6px;max-width:280px}
.av-url-cell__txt{
  flex:1;min-width:0;
  font:500 11.5px var(--mono, ui-monospace);
  color:var(--ink-soft);
  background:var(--surface-sunken);
  padding:3px 8px;border-radius:var(--r-sm);
  border:1px solid var(--rule-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}