/*
 * SST.NYC — Student Dashboard Styles
 * Theme: Obsidian Gold
 * Version: 12.6.0 — Sidebar + Panel Redesign
 *
 * Required Google Fonts (enqueued by PHP shortcode class):
 *   Outfit: wght@300;400;500;600;700;800
 *   DM Sans: ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700
 *
 * All classes prefixed with sst-dash- to avoid WP theme conflicts.
 */

/* ─────────────────────────────────────────────────────
   SCOPED DESIGN TOKENS — Obsidian Gold (student dashboard)
   The student dashboard runs a warm gold-on-near-black palette,
   distinct from the Control Room blue-gray --sst-* tokens. These
   --sstdash-* tokens are the single source of truth for this
   surface; collapse the historical near-duplicate grays/darks
   onto this scale instead of reintroducing raw hex literals.
───────────────────────────────────────────────────── */

.sst-dashboard,
body.page-id-460,
body.woocommerce-account {
  /* Surfaces — LIGHT THEME (matches the light upload portal + marketing site;
     was dark #0e0e0e/#111/#141414/#1c1c1c/#1e1e1e/#252525-#262626). */
  --sstdash-bg: #f6f5f2;
  --sstdash-surface: #ffffff;
  --sstdash-surface-raised: #ffffff;
  --sstdash-surface-rail: #f0efe9;
  --sstdash-border: #e7e5dd;
  --sstdash-border-strong: #d8d6cc;
  --sstdash-border-card: #e7e5dd;
  --sstdash-border-control: #cfcdc3;

  /* Text — dark-on-light (was light-on-dark #f2f0eb/#9a9588/#666/#5a5850). */
  --sstdash-text: #1b1b1a;
  --sstdash-text-muted: #6c685e;
  --sstdash-text-dim: #8b887e;
  --sstdash-text-faint: #a6a399;
  --sstdash-text-on-gold: #0a0a0a; /* dark text on the gold button fill */
  --sstdash-text-on-accent: #fff; /* white text/icon on a saturated fill (badges) */

  /* Gold accent. --sstdash-gold stays the brand FILL (gold buttons read with
     text-on-gold). --sstdash-gold-hi is only ever accent TEXT/border, so it's
     darkened to stay readable on the light surface (was #e8c56d, too pale on white). */
  --sstdash-gold: #d4a843;
  --sstdash-gold-hi: #9c7016;
  --sstdash-gold-rail: #c9a84c;
  --sstdash-gold-deep: #8b6f2a;
  --sstdash-gold-wash: rgba(212, 168, 67, 0.08);
  --sstdash-gold-wash-soft: rgba(212, 168, 67, 0.06);
  --sstdash-gold-wash-strong: rgba(212, 168, 67, 0.12);
  --sstdash-gold-wash-faint: rgba(212, 168, 67, 0.03);
  --sstdash-gold-wash-bare: rgba(212, 168, 67, 0.05);
  --sstdash-gold-wash-mid: rgba(212, 168, 67, 0.1);
  --sstdash-gold-wash-hover: rgba(212, 168, 67, 0.18);
  --sstdash-gold-wash-active: rgba(212, 168, 67, 0.15);
  --sstdash-gold-border: rgba(212, 168, 67, 0.2);
  --sstdash-gold-ring: rgba(212, 168, 67, 0.25);
  --sstdash-gold-shadow: rgba(212, 168, 67, 0.25);
  --sstdash-gold-shadow-strong: rgba(212, 168, 67, 0.3);
  --sstdash-gold-focus-glow: rgba(212, 168, 67, 0.45);

  /* Status (was #34d399 / #6ee7b7 / #e5534b / #fb923c) */
  --sstdash-success: #34d399;
  --sstdash-danger: #e5534b;
  --sstdash-warn: #fb923c;

  /* Status washes + borders — mirror the --sstdash-gold-wash family so the
     tint and the solid stay linked to one source of truth (no raw rgba in
     component styles per DESIGN.md). Alpha precision normalized to one digit. */
  --sstdash-success-wash: rgba(52, 211, 153, 0.08);
  --sstdash-success-wash-mid: rgba(52, 211, 153, 0.1);
  --sstdash-success-wash-strong: rgba(52, 211, 153, 0.15);
  --sstdash-success-border: rgba(52, 211, 153, 0.2);
  --sstdash-success-border-strong: rgba(52, 211, 153, 0.25);
  --sstdash-success-border-solid: rgba(52, 211, 153, 0.3);
  --sstdash-success-border-hover: rgba(52, 211, 153, 0.4);
  --sstdash-success-border-active: rgba(52, 211, 153, 0.5);
  --sstdash-warn-wash: rgba(251, 146, 60, 0.06);
  --sstdash-warn-wash-strong: rgba(251, 146, 60, 0.12);
  --sstdash-warn-wash-active: rgba(251, 146, 60, 0.15);
  --sstdash-warn-border: rgba(251, 146, 60, 0.2);
  --sstdash-warn-border-hover: rgba(251, 146, 60, 0.4);
  --sstdash-warn-glow: rgba(251, 146, 60, 0.3);
  --sstdash-warn-glow-strong: rgba(251, 146, 60, 0.4);
  --sstdash-danger-wash: rgba(229, 83, 75, 0.08);
  --sstdash-danger-wash-mid: rgba(229, 83, 75, 0.1);
  --sstdash-danger-border: rgba(229, 83, 75, 0.3);

  /* Neutral overlays for the photo frame (light ring + dark inset well on the
     near-black surface; silhouette glyph). Kept as tokens so the frame tints
     don't reintroduce raw rgba in component styles. */
  --sstdash-frame-ring: rgba(255, 255, 255, 0.2);
  --sstdash-frame-inset: rgba(0, 0, 0, 0.25);
  --sstdash-frame-glyph: rgba(255, 255, 255, 0.6);

  /* Dots (was #a78bfa / #60a5fa) */
  --sstdash-purple: #a78bfa;
  --sstdash-blue: #60a5fa;

  /* Radius scale (collapses 6/7/8/10/12/14/99px ad-hoc set) */
  --sstdash-r-sm: 6px;
  --sstdash-r-md: 10px;
  --sstdash-r-lg: 14px;
  --sstdash-r-pill: 99px;

  /* Type scale — single source of truth for student-dashboard surfaces
     (wallet, documents tab, upload portal). Collapses the ad-hoc
     10/11/12/13/14/15/16/18/20px set onto a shared step ladder so sibling
     panels read with one type rhythm. */
  --sstdash-font-nano: 11px;   /* uppercase labels, pills, table headers */
  --sstdash-font-micro: 12px;  /* dense meta */
  --sstdash-font-small: 13px;  /* secondary / button text */
  --sstdash-font-base: 14px;   /* body, completed titles */
  --sstdash-font-md: 15px;     /* course / credential titles */
  --sstdash-font-lg: 18px;     /* hero subtitle, section heads */
  --sstdash-font-xl: 20px;     /* name / display */

  /* Font families — single source of truth so the two stacks (body + display)
     can't drift from raw string literals scattered through the file.
     --sstdash-font-body  = DM Sans  (paragraph / meta / long-form)
     --sstdash-font-display = Outfit (names, titles, section heads, buttons) */
  --sstdash-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --sstdash-font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Icon scale — single source of truth for inline SVG sizing, mirroring the
     admin --sst-icon-* ladder. Step markers / doc-status glyphs use -sm;
     button + control glyphs use -md; empty-state / camera glyphs use -lg.
     Stops the free-handed 14/16/18px one-offs that drifted the stepper row. */
  --sstdash-icon-sm: 14px;
  --sstdash-icon-md: 16px;
  --sstdash-icon-lg: 18px;

  /* Spacing scale — mirrors the admin --sst-space-1..6 4px ladder.
     Collapses the wallet/documents ad-hoc 4/8/12/16/24/32/48px set. */
  --sstdash-space-1: 4px;
  --sstdash-space-1h: 6px;   /* half-step between -1 (4) and -2 (8) */
  --sstdash-space-2: 8px;
  --sstdash-space-2h: 10px;  /* half-step between -2 (8) and -3 (12) */
  --sstdash-space-3: 12px;
  --sstdash-space-3h: 14px;  /* half-step between -3 (12) and -4 (16) */
  --sstdash-space-4: 16px;
  --sstdash-space-4h: 18px;  /* half-step between -4 (16) and -5 (24) */
  --sstdash-space-5: 24px;
  --sstdash-space-6: 32px;
  --sstdash-space-7: 48px;
}

/* ─────────────────────────────────────────────────────
   PAGE-LEVEL OVERRIDES
   Hide WooCommerce sidebar, let dashboard go full-width

   ⚠ LOAD-BEARING ELEMENTOR IDs — DO NOT EDIT TEMPLATE 362 WITHOUT UPDATING HERE
   The hashed element IDs below (.elementor-element-f9bcdd7 / -0b06930 / -dc1552f)
   are generated by Elementor template 362 (the my-account / page-id-460 layout).
   Re-editing that template regenerates these IDs, which silently breaks the
   dark-mode enforcement (white flashes / light containers on the student
   dashboard). If you touch template 362, re-capture the new IDs and update the
   three rules below. The .elementor .e-con fallback rules are the safety net
   that keeps containers dark even if a hashed ID drifts.
───────────────────────────────────────────────────── */

body.page-id-460 .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-navigation {
  display: none !important;
}

body.page-id-460 .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  background: var(--sstdash-bg) !important;
  padding: 0 !important;
}

body.page-id-460 .entry-content,
body.page-id-460 .elementor-widget-container {
  background-color: transparent !important;
}

body.page-id-460,
body.woocommerce-account {
  background: var(--sstdash-bg) !important;
}

/* Hide the Elementor sidebar column on my-account page (template 362) */
body.page-id-460 .elementor-element-f9bcdd7 {
  display: none !important;
}

/* Make the Elementor parent container single-column */
body.page-id-460 .elementor-element-0b06930 {
  --e-con-grid-template-columns: 1fr !important;
}

/* Also hide the old WP dashboard-menu nav if it renders anywhere */
body.page-id-460 .elementor-nav-menu.sm-vertical {
  display: none !important;
}

/* Kill Elementor content wrapper padding and light background */
body.page-id-460 .elementor-element-dc1552f {
  background: var(--sstdash-bg) !important;
  padding: 0 !important;
}

/* Nuclear option: force ALL Elementor containers on this page dark + no padding */
body.page-id-460 .elementor .e-con {
  background-color: var(--sstdash-bg) !important;
}

body.page-id-460 .elementor .e-con > .e-con {
  padding: 0 !important;
}

/* ─────────────────────────────────────────────────────
   RESET / ROOT WRAPPER
───────────────────────────────────────────────────── */

.sst-dashboard {
  font-family: var(--sstdash-font-body);
  color: var(--sstdash-text);
  -webkit-font-smoothing: antialiased;
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────
   LAYOUT — sidebar + content
───────────────────────────────────────────────────── */

.sst-dash-layout {
  display: flex;
  min-height: 100vh;
  background: var(--sstdash-bg) !important;
}

.sst-dash-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--sstdash-surface-rail);
  border-right: 1px solid var(--sstdash-border);
  padding: var(--sstdash-space-5) var(--sstdash-space-4);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sst-dash-sidebar-logo {
  display: block;
  margin-bottom: var(--sstdash-space-6);
  padding: 0 var(--sstdash-space-2);
  text-decoration: none;
}

.sst-dash-sidebar-logo img {
  height: 28px;
  width: auto;
}

.sst-dash-logo-text {
  font-family: var(--sstdash-font-display);
  font-size: var(--sstdash-font-xl);
  font-weight: 800;
  color: var(--sstdash-text);
  letter-spacing: 1px;
}

.sst-dash-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sst-dash-nav-item,
.sst-dash-sidebar a.sst-dash-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sstdash-space-2h) var(--sstdash-space-3h);
  border-radius: var(--sstdash-r-sm);
  color: var(--sstdash-gold) !important;
  font-family: var(--sstdash-font-display);
  font-size: var(--sstdash-font-base);
  font-weight: 500;
  text-decoration: none !important;
  transition: color 0.15s, background-color 0.15s;
}

.sst-dash-nav-item:hover,
.sst-dash-sidebar a.sst-dash-nav-item:hover {
  color: var(--sstdash-gold-hi) !important;
  background: var(--sstdash-gold-wash-soft);
  text-decoration: none !important;
}

.sst-dash-nav-item--active,
.sst-dash-sidebar a.sst-dash-nav-item--active {
  color: var(--sstdash-gold-hi) !important;
  background: var(--sstdash-gold-wash-active);
  font-weight: 700;
  /* Inset left-rail marker so the active tab is unmistakable on the light
     surface (the translucent gold wash alone reads faint on white). Inset
     shadow avoids any layout shift vs a real border. */
  box-shadow: inset 3px 0 0 var(--sstdash-gold);
}

.sst-dash-nav-item:focus-visible,
.sst-dash-sidebar a.sst-dash-nav-item:focus-visible {
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
  text-decoration: none !important;
}

.sst-dash-nav-badge {
  background: var(--sstdash-danger);
  color: var(--sstdash-text-on-accent);
  font-size: 10px; /* bespoke — below the --sstdash-font-nano (11px) ladder floor by design (tight count pill) */
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--sstdash-r-md);
  line-height: 1.2;
}

/* Attention dot for the My Info tab when the mailing address is missing.
   Uses the warn (amber) accent rather than danger to read as "action needed"
   not "error", and is a compact circular pill distinct from the doc count. */
.sst-dash-nav-badge--dot {
  background: var(--sstdash-warn);
  color: var(--sstdash-bg);
  min-width: 16px;
  height: 16px;
  padding: 0 var(--sstdash-space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sstdash-r-pill);
}

.sst-dash-sidebar-sep {
  height: 1px;
  background: var(--sstdash-border);
  margin: var(--sstdash-space-4) 0;
}

.sst-dash-sidebar-bottom {
  margin-top: auto;
  padding-top: var(--sstdash-space-4);
  border-top: 1px solid var(--sstdash-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sst-dash-nav-util,
.sst-dash-sidebar a.sst-dash-nav-util {
  display: block;
  padding: var(--sstdash-space-2) var(--sstdash-space-3h);
  color: var(--sstdash-gold-rail) !important;
  font-size: var(--sstdash-font-small);
  text-decoration: none !important;
  border-radius: var(--sstdash-r-sm);
  transition: color 0.15s;
}

.sst-dash-nav-util:hover,
.sst-dash-sidebar a.sst-dash-nav-util:hover {
  color: var(--sstdash-gold-hi) !important;
  text-decoration: none !important;
}

/* Content area */
.sst-dash-content {
  flex: 1;
  min-width: 0;
  padding: var(--sstdash-space-6);
  max-width: 1000px;
  background: var(--sstdash-bg) !important;
}

/* Panel switching */
.sst-dash-panel {
  display: none;
}

.sst-dash-panel--active {
  display: block;
}

/* ─────────────────────────────────────────────────────
   CARD BASE
───────────────────────────────────────────────────── */

.sst-dashboard .sst-dash-card {
  background: var(--sstdash-surface);
  border: 1px solid var(--sstdash-border);
  border-radius: var(--sstdash-r-lg);
  padding: var(--sstdash-space-5);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--sstdash-space-4);
}

/* ─────────────────────────────────────────────────────
   RENEWAL READINESS (display-only panel)
   Proactive card: card expiry + 2026-05-03 LL10 pivot consequence + one
   state-appropriate CTA. Built from the same card/token system. A left accent
   encodes urgency: success = renew now, warn = grace / needs action, gold =
   informational (valid, too early to renew).
───────────────────────────────────────────────────── */

.sst-dashboard .sst-dash-renewal {
  border-left-width: 4px;
  border-left-style: solid;
}
.sst-dashboard .sst-dash-renewal--action { border-left-color: var(--sstdash-success); }
.sst-dashboard .sst-dash-renewal--attention { border-left-color: var(--sstdash-warn); }
.sst-dashboard .sst-dash-renewal--info { border-left-color: var(--sstdash-gold); }

.sst-dashboard .sst-dash-renewal-head {
  margin-bottom: var(--sstdash-space-3);
}

.sst-dashboard .sst-dash-renewal-eyebrow {
  display: block;
  font-family: var(--sstdash-font-display);
  font-size: var(--sstdash-font-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sstdash-text-dim);
  margin-bottom: var(--sstdash-space-1);
}

.sst-dashboard .sst-dash-renewal-title {
  font-family: var(--sstdash-font-display);
  font-size: var(--sstdash-font-lg);
  font-weight: 700;
  color: var(--sstdash-text);
  margin: 0;
}

.sst-dashboard .sst-dash-renewal-expiry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sstdash-space-2);
  align-items: baseline;
  margin: 0 0 var(--sstdash-space-2h);
  font-size: var(--sstdash-font-base);
}

.sst-dashboard .sst-dash-renewal-expiry-label {
  color: var(--sstdash-text-muted);
}

.sst-dashboard .sst-dash-renewal-expiry-date {
  font-family: var(--sstdash-font-display);
  font-weight: 700;
  color: var(--sstdash-text);
}

.sst-dashboard .sst-dash-renewal-consequence {
  margin: 0 0 var(--sstdash-space-4);
  font-size: var(--sstdash-font-base);
  line-height: 1.55;
  color: var(--sstdash-text-muted);
}

.sst-dashboard .sst-dash-renewal-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sstdash-space-3);
}

.sst-dashboard .sst-dash-renewal-price {
  font-family: var(--sstdash-font-display);
  font-weight: 700;
  font-size: var(--sstdash-font-base);
  color: var(--sstdash-text);
}

/* ─────────────────────────────────────────────────────
   MISSING-ADDRESS BANNER
   Prominent callout above the panels prompting the student to add a mailing
   address. Amber warn accent (action needed, not error). Built from the same
   tokens as the cards so it reads as part of the surface, not bolted on.
───────────────────────────────────────────────────── */

.sst-dashboard .sst-dash-banner {
  display: flex;
  align-items: center;
  gap: var(--sstdash-space-3);
  padding: var(--sstdash-space-3) var(--sstdash-space-4);
  border-radius: var(--sstdash-r-lg);
  margin-bottom: var(--sstdash-space-5);
  font-size: var(--sstdash-font-base);
  color: var(--sstdash-text);
}

.sst-dashboard .sst-dash-banner--warn {
  background: var(--sstdash-warn-wash-strong);
  border: 1px solid var(--sstdash-warn-border);
}

/* Session dismissal — JS toggles this class instead of an inline display style
   so the hide is driven by state, not imperative inline CSS. */
.sst-dashboard .sst-dash-banner--dismissed {
  display: none;
}

.sst-dashboard .sst-dash-banner-icon {
  flex-shrink: 0;
  color: var(--sstdash-warn);
}

.sst-dashboard .sst-dash-banner-text {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.sst-dashboard .sst-dash-banner-cta,
.sst-dashboard a.sst-dash-banner-cta {
  flex-shrink: 0;
  background: var(--sstdash-warn);
  color: var(--sstdash-bg) !important;
  padding: var(--sstdash-space-2) var(--sstdash-space-4);
  border-radius: var(--sstdash-r-sm);
  font-size: var(--sstdash-font-small);
  font-weight: 700;
  text-decoration: none !important;
  transition: filter 0.15s;
}

.sst-dashboard .sst-dash-banner-cta:hover,
.sst-dashboard a.sst-dash-banner-cta:hover {
  filter: brightness(1.08);
  text-decoration: none !important;
}

.sst-dashboard .sst-dash-banner-cta:focus-visible {
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
}

.sst-dashboard .sst-dash-banner-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--sstdash-text-muted);
  font-size: var(--sstdash-font-xl);
  line-height: 1;
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 0;
  transition: color 0.15s;
}

.sst-dashboard .sst-dash-banner-close:hover {
  color: var(--sstdash-text);
}

.sst-dashboard .sst-dash-banner-close:focus-visible {
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .sst-dashboard .sst-dash-banner {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 44px;
    align-items: start;
    column-gap: var(--sstdash-space-2);
    row-gap: var(--sstdash-space-3);
  }
  .sst-dashboard .sst-dash-banner-icon {
    grid-column: 1;
    margin-top: var(--sstdash-space-1);
  }
  .sst-dashboard .sst-dash-banner-text {
    grid-column: 2;
  }
  .sst-dashboard .sst-dash-banner-close {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 44px;
    height: 44px;
  }
  .sst-dashboard .sst-dash-banner-cta,
  .sst-dashboard a.sst-dash-banner-cta {
    grid-column: 1 / -1;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-align: center;
  }
}

/* ─────────────────────────────────────────────────────
   CARD LABEL (section heading inside card)
───────────────────────────────────────────────────── */

.sst-dashboard .sst-dash-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sstdash-space-2);
  font-size: var(--sstdash-font-nano);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--sstdash-text-muted);
  margin-bottom: var(--sstdash-space-4);
}

/* ── Heading reset ──
   Section titles are real headings (h2/h3) so screen-reader users can
   navigate the dashboard by headings (WCAG 1.3.1). Visuals stay driven
   by the existing classes; these rules only neutralize theme heading
   margins/faces at higher specificity than any `.entry-content h2`. */
.sst-dashboard h2.sst-dash-label,
.sst-dashboard h3.sst-dash-field-label {
  margin-top: 0;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
}

/* Group-header/cert-title base rules are single-class (0,1,0) — a theme's
   `.entry-content h2` (0,1,1) would now beat them, so restate their visual
   props here at (0,2,1). */
.sst-dashboard h2.sst-dash-group-header {
  display: flex;
  align-items: center;
  gap: var(--sstdash-space-2);
  margin: 28px 0 var(--sstdash-space-4);
  padding: 0;
  color: var(--sstdash-text-muted);
  font-family: inherit;
  font-size: var(--sstdash-font-nano);
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: inherit;
  text-transform: uppercase;
}

.sst-dashboard h2.sst-dash-group-header:first-child {
  margin-top: 0;
}

.sst-dashboard h2.sst-dash-cert-title {
  margin: 0;
  padding: 0;
  font-family: var(--sstdash-font-display);
  font-size: var(--sstdash-font-md);
  font-weight: 700;
  color: var(--sstdash-text);
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.sst-dashboard .sst-dash-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sstdash-gold);
  flex-shrink: 0;
}

.sst-dashboard .sst-dash-dot--gold   { background: var(--sstdash-gold-hi); }
.sst-dashboard .sst-dash-dot--purple { background: var(--sstdash-purple); }
.sst-dashboard .sst-dash-dot--blue   { background: var(--sstdash-blue); }
.sst-dashboard .sst-dash-dot--green  { background: var(--sstdash-success); }
.sst-dashboard .sst-dash-dot--dim    { background: var(--sstdash-text-faint); }

/* ─────────────────────────────────────────────────────
   COURSE PANEL — GROUP HEADERS
───────────────────────────────────────────────────── */

.sst-dash-group-header {
  display: flex;
  align-items: center;
  gap: var(--sstdash-space-2);
  margin-bottom: var(--sstdash-space-4);
  margin-top: 28px;
  color: var(--sstdash-text-muted);
  font-size: var(--sstdash-font-nano);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.sst-dash-group-header:first-child {
  margin-top: 0;
}

/* ─────────────────────────────────────────────────────
   HERO CARD — in-progress courses
───────────────────────────────────────────────────── */

.sst-dash-hero-card {
  background: var(--sstdash-surface);
  border: 1px solid var(--sstdash-border-card);
  border-left: 3px solid var(--sstdash-gold);
  border-radius: var(--sstdash-r-md);
  padding: var(--sstdash-space-5);
  margin-bottom: var(--sstdash-space-3);
}

.sst-dash-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sstdash-space-4);
  margin-bottom: var(--sstdash-space-4);
}

.sst-dash-hero-info {
  min-width: 0;
  flex: 1;
}

.sst-dash-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--sstdash-space-2h);
  margin-bottom: var(--sstdash-space-1h);
}

.sst-dash-hero-subtitle {
  color: var(--sstdash-text);
  font-family: var(--sstdash-font-display);
  font-size: var(--sstdash-font-lg);
  font-weight: 700;
}

.sst-dash-hero-lesson {
  /* --sstdash-text-muted (not -text-dim #666) — body meta must clear WCAG AA
     (4.5:1) on --sstdash-surface; #666 only hits ~3.2:1. Keep -text-dim for
     non-text decorative use only. */
  color: var(--sstdash-text-muted);
  font-size: var(--sstdash-font-small);
}

/* ─────────────────────────────────────────────────────
   COMPLETED COURSE ROWS
───────────────────────────────────────────────────── */

.sst-dash-completed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sstdash-surface);
  border: 1px solid var(--sstdash-border);
  border-radius: var(--sstdash-r-md);
  padding: var(--sstdash-space-4) 20px;
  margin-bottom: var(--sstdash-space-2);
}

.sst-dash-completed-left {
  display: flex;
  align-items: center;
  gap: var(--sstdash-space-3);
  min-width: 0;
}

.sst-dash-completed-title {
  color: var(--sstdash-text);
  font-size: var(--sstdash-font-base);
  font-weight: 600;
}

.sst-dash-completed-date {
  color: var(--sstdash-text-muted);
  font-size: var(--sstdash-font-micro);
}

.sst-dash-completed-right {
  display: flex;
  align-items: center;
  gap: var(--sstdash-space-2h);
  flex-shrink: 0;
}

.sst-dash-completed-check {
  color: var(--sstdash-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sst-dash-btn-outline {
  border: 1px solid var(--sstdash-border-control);
  color: var(--sstdash-text-muted);
  padding: var(--sstdash-space-1h) var(--sstdash-space-3h);
  border-radius: var(--sstdash-r-sm);
  font-size: var(--sstdash-font-micro);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.sst-dash-btn-outline--chevron {
  display: inline-flex;
  align-items: center;
  gap: var(--sstdash-space-1);
}

.sst-dash-btn-outline:hover {
  border-color: var(--sstdash-gold);
  color: var(--sstdash-gold);
  text-decoration: none;
}

.sst-dash-btn-outline:focus-visible {
  border-color: var(--sstdash-gold);
  color: var(--sstdash-gold);
  text-decoration: none;
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────
   NOT-STARTED COURSES — 2-column grid
───────────────────────────────────────────────────── */

.sst-dash-course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sstdash-space-3);
}

/* Entrance animation */
@keyframes sst-card-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Individual course card */
.sst-dashboard .sst-dash-course-item {
  background: var(--sstdash-surface);
  border: 1px solid var(--sstdash-border-card);
  border-radius: var(--sstdash-r-md);
  padding: var(--sstdash-space-4h);
  position: relative;
  display: flex;
  flex-direction: column;
  animation: sst-card-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

/* Calm the grid: only the first row of cards animates in, so a panel
   switch doesn't shimmer every tile. */
.sst-dashboard .sst-dash-course-item:nth-child(n + 3) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .sst-dashboard .sst-dash-course-item {
    animation: none;
  }
}

.sst-dashboard .sst-dash-course-item:hover {
  border-color: var(--sstdash-gold);
  box-shadow: 0 0 0 1px var(--sstdash-gold-border);
  transform: translateY(-2px);
}

/* Course header: badge + info */
.sst-dashboard .sst-dash-course-header {
  display: flex;
  gap: var(--sstdash-space-3h);
  align-items: flex-start;
  margin-bottom: var(--sstdash-space-3h);
}

/* Course badge */
.sst-dash-course-badge {
  font-family: var(--sstdash-font-display);
  font-size: var(--sstdash-font-nano);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--sstdash-gold);
  background: var(--sstdash-gold-wash);
  border: 1px solid var(--sstdash-gold-border);
  border-radius: var(--sstdash-r-sm);
  padding: 5px var(--sstdash-space-2h);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.sst-dash-course-badge--green {
  color: var(--sstdash-success);
  background: var(--sstdash-success-wash);
  border-color: var(--sstdash-success-border);
}

/* Course info (title + meta) */
.sst-dashboard .sst-dash-course-info {
  min-width: 0;
  flex: 1;
}

/* Course title */
.sst-dashboard .sst-dash-course-title {
  font-family: var(--sstdash-font-display);
  font-size: var(--sstdash-font-md);
  font-weight: 700;
  color: var(--sstdash-text);
  margin-bottom: 3px;
  letter-spacing: -0.2px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Course meta */
.sst-dashboard .sst-dash-course-meta {
  font-size: var(--sstdash-font-micro);
  color: var(--sstdash-text-muted);
  display: flex;
  gap: var(--sstdash-space-2);
  flex-wrap: wrap;
}

/* Footer: action */
.sst-dashboard .sst-dash-course-footer {
  display: flex;
  align-items: center;
  gap: var(--sstdash-space-3);
  margin-top: auto;
  padding-top: var(--sstdash-space-3h);
  border-top: 1px solid var(--sstdash-border);
}

/* ─────────────────────────────────────────────────────
   PROGRESS BAR
───────────────────────────────────────────────────── */

.sst-dash-progress-track {
  height: 4px;
  background: var(--sstdash-border);
  border-radius: var(--sstdash-r-pill);
  overflow: hidden;
  margin-bottom: var(--sstdash-space-1);
}

.sst-dash-progress-fill {
  height: 100%;
  border-radius: var(--sstdash-r-pill);
  /* Solid fill — a two-stop same-hue gradient is invisible at 4px tall. */
  background: var(--sstdash-gold);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.sst-dash-progress-meta {
  font-size: var(--sstdash-font-nano);
  color: var(--sstdash-text-muted);
  margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────
   LEARNDASH COURSE RESUME BUTTON — override LD styles
───────────────────────────────────────────────────── */

.sst-dashboard .ld-course-resume.ld-button,
.sst-dashboard a.ld-course-resume {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--sstdash-space-2) !important;
  background: var(--sstdash-gold) !important;
  color: var(--sstdash-text-on-gold) !important;
  font-family: var(--sstdash-font-display) !important;
  font-size: var(--sstdash-font-small) !important;
  font-weight: 700 !important;
  padding: var(--sstdash-space-2h) 20px !important;
  border: none !important;
  border-radius: var(--sstdash-r-sm) !important;
  cursor: pointer !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: none !important;
}

.sst-dashboard .ld-course-resume.ld-button:hover,
.sst-dashboard a.ld-course-resume:hover {
  background: var(--sstdash-gold-hi) !important;
  /* Tight functional lift, not a 30px diffuse glow. */
  box-shadow: 0 2px 8px var(--sstdash-gold-shadow) !important;
  transform: translateY(-1px) !important;
  color: var(--sstdash-text-on-gold) !important;
}

.sst-dashboard .ld-course-resume.ld-button:focus-visible,
.sst-dashboard a.ld-course-resume:focus-visible {
  background: var(--sstdash-gold-hi) !important;
  color: var(--sstdash-text-on-gold) !important;
  outline: 2px solid var(--sstdash-text-on-gold) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--sstdash-gold-focus-glow) !important;
}

/* ─────────────────────────────────────────────────────
   CERTIFICATES — CARD TRACKER
───────────────────────────────────────────────────── */

.sst-dash-cert-section {
  background: var(--sstdash-surface);
  border: 1px solid var(--sstdash-border);
  border-radius: var(--sstdash-r-md);
  padding: 20px var(--sstdash-space-5);
  margin-bottom: var(--sstdash-space-3);
}

.sst-dash-cert-header {
  display: flex;
  align-items: center;
  gap: var(--sstdash-space-2h);
  margin-bottom: var(--sstdash-space-4);
}

.sst-dash-cert-title {
  font-family: var(--sstdash-font-display);
  font-size: var(--sstdash-font-md);
  font-weight: 700;
  color: var(--sstdash-text);
}

/* Credential summary — status pill + card expiry beside the cert title.
   Status colors mirror the wallet tab's pill semantics: issued/mailed/
   delivered = success, expired = danger, everything in-flight = gold. */
.sst-dash-cred-summary {
  display: flex;
  align-items: center;
  gap: var(--sstdash-space-2);
  margin-left: auto;
  flex-wrap: wrap;
}

.sst-dash-cred-pill {
  font-size: var(--sstdash-font-nano);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--sstdash-r-pill);
  background: var(--sstdash-gold-wash-strong);
  border: 1px solid var(--sstdash-gold-border);
  color: var(--sstdash-gold-hi);
  white-space: nowrap;
}

.sst-dash-cred-pill--tc_issued,
.sst-dash-cred-pill--mailed,
.sst-dash-cred-pill--delivered {
  background: var(--sstdash-success-wash-strong);
  border-color: var(--sstdash-success-border-solid);
  color: var(--sstdash-success);
}

.sst-dash-cred-pill--expired {
  background: var(--sstdash-danger-wash);
  border-color: var(--sstdash-danger-border);
  color: var(--sstdash-danger);
}

.sst-dash-cred-expiry {
  font-size: var(--sstdash-font-micro);
  color: var(--sstdash-text-muted);
  white-space: nowrap;
}

/* Step tracker */
.sst-dash-tracker {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: var(--sstdash-space-4) 0;
}

.sst-dash-tracker-step {
  display: flex;
  align-items: center;
}

.sst-dash-tracker-step-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sstdash-space-1h);
}

.sst-dash-tracker-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--sstdash-border-control);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sstdash-font-nano);
  color: var(--sstdash-text-muted);
  flex-shrink: 0;
}

.sst-dash-tracker-dot--active {
  border-color: var(--sstdash-gold);
  background: var(--sstdash-gold-wash-active);
  color: var(--sstdash-gold);
}

.sst-dash-tracker-dot--done {
  border-color: var(--sstdash-success);
  background: var(--sstdash-success-wash-strong);
  color: var(--sstdash-success);
}

/* Uniform stepper marker: every step renders the same centered glyph box
   (done = check SVG, otherwise = numeral) so the row reads as one system. */
.sst-dash-tracker-dot svg,
.sst-dash-tracker-dot .sst-dash-tracker-num {
  width: var(--sstdash-icon-sm);
  height: var(--sstdash-icon-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sstdash-icon-sm);
  line-height: 1;
}

.sst-dash-tracker-line {
  flex: 1;
  height: 2px;
  background: var(--sstdash-border-control);
  min-width: 40px;
  margin-top: var(--sstdash-space-3h);
}

.sst-dash-tracker-line--done {
  background: var(--sstdash-success);
}

.sst-dash-tracker-label {
  font-size: var(--sstdash-font-nano);
  color: var(--sstdash-text-muted);
  white-space: nowrap;
}

.sst-dash-tracker-label--active {
  color: var(--sstdash-gold);
  font-weight: 600;
}

/* Cert tracking link */
.sst-dash-cert-tracking {
  margin-bottom: var(--sstdash-space-3);
}

/* Cert download buttons */
.sst-dash-cert-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sstdash-space-2);
  padding-top: var(--sstdash-space-3);
  border-top: 1px solid var(--sstdash-border);
}

.sst-dashboard .sst-dash-cert-downloads .sst-dash-btn-sm {
  min-height: 44px;
}

.sst-dash-wallet-panel {
  flex-basis: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  gap: var(--sstdash-space-3);
  padding: var(--sstdash-space-4);
  border: 1px solid var(--sstdash-gold);
  border-radius: var(--sstdash-r-md);
  background: var(--sstdash-gold-wash);
  box-shadow: var(--sstdash-shadow-sm);
}

.sst-dash-wallet-panel-head {
  display: flex;
  flex-direction: column;
  gap: var(--sstdash-space-1);
}

.sst-dash-wallet-panel-head strong {
  color: var(--sstdash-text);
  font-size: var(--sstdash-font-md);
  line-height: 1.2;
}

.sst-dash-wallet-kicker {
  color: var(--sstdash-gold);
  font-size: var(--sstdash-font-nano);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sst-dash-wallet-panel-note {
  max-width: 760px;
  margin: 0;
  color: var(--sstdash-text-muted);
  font-size: var(--sstdash-font-small);
  line-height: 1.45;
}

.sst-dash-wallet-list {
  display: grid;
  gap: var(--sstdash-space-2);
}

/* Fixed 3-bucket panel rows (Worker / Supervisor / Worker Wallet) — replaces
   the old per-course wallet-button sprawl. One row per bucket: a photo (or a
   grayed empty placeholder when locked), a label, and — only when earned —
   the shared Wallet install control. */
.sst-dash-wallet-bucket {
  display: flex;
  align-items: center;
  gap: var(--sstdash-space-3);
  padding: var(--sstdash-space-2) 0;
  border-bottom: 1px solid var(--sstdash-border);
}

.sst-dash-wallet-bucket:last-child {
  border-bottom: none;
}

.sst-dash-wallet-bucket--locked {
  opacity: 0.55;
}

.sst-dash-wallet-bucket-photo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--sstdash-r-sm);
  border: 1px solid var(--sstdash-border-strong);
  object-fit: cover;
  background: var(--sstdash-surface);
}

.sst-dash-wallet-bucket-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sstdash-text-muted);
  background: var(--sstdash-border);
}

.sst-dash-wallet-bucket-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 96px;
}

.sst-dash-wallet-bucket-label {
  color: var(--sstdash-text);
  font-size: var(--sstdash-font-small);
  font-weight: 700;
}

.sst-dash-wallet-bucket-reason {
  color: var(--sstdash-text-muted);
  font-size: var(--sstdash-font-nano);
}

/* The install control renders inline in the bucket row, not as its own
   bordered card (that chrome belongs to .sst-dash-wallet-bucket now) —
   right-align it and drop the group-copy column since the label already
   lives to its left. */
.sst-dash-wallet-bucket .sst-wallet-control--dashboard {
  grid-template-columns: auto auto;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
}

.sst-wallet-control--dashboard {
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: var(--sstdash-space-2);
  padding: var(--sstdash-space-3);
  border: 1px solid var(--sstdash-border);
  border-radius: var(--sstdash-r-sm);
  background: var(--sstdash-surface);
}

.sst-wallet-control-copy {
  min-width: 0;
}

.sst-wallet-control-label {
  color: var(--sstdash-text);
  font-size: var(--sstdash-font-small);
  font-weight: 700;
  line-height: 1.25;
}

.sst-wallet-control-note {
  margin-top: var(--sstdash-space-1);
  color: var(--sstdash-text-muted);
  font-size: var(--sstdash-font-micro);
  line-height: 1.35;
}

.sst-dash-cert-pending {
  font-size: var(--sstdash-font-micro);
  color: var(--sstdash-warn);
  font-style: italic;
}

/* Neutral card-status note (no tracker yet / unknown status). */
.sst-dash-card-status-note {
  font-size: var(--sstdash-font-micro);
  color: var(--sstdash-text-muted);
  margin: 0 0 var(--sstdash-space-3);
}

/* Small action buttons */
.sst-dashboard .sst-dash-btn-sm {
  box-sizing: border-box;
  font-family: var(--sstdash-font-body);
  font-size: var(--sstdash-font-micro);
  font-weight: 600;
  line-height: 1.2;
  min-height: 36px;
  padding: 8px var(--sstdash-space-4);
  border-radius: var(--sstdash-r-sm);
  border: 1px solid;
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
  font-variant: normal;
  font-variant-caps: normal;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sst-dashboard .sst-dash-btn-sm--green {
  color: var(--sstdash-success);
  border-color: var(--sstdash-success-border-strong);
  background: var(--sstdash-success-wash);
}

.sst-dashboard .sst-dash-btn-sm--green:hover {
  background: var(--sstdash-success-wash-strong);
  border-color: var(--sstdash-success-border-hover);
  text-decoration: none;
  color: var(--sstdash-success);
}

.sst-dashboard .sst-dash-btn-sm--green:focus-visible {
  background: var(--sstdash-success-wash-strong);
  border-color: var(--sstdash-success-border-hover);
  text-decoration: none;
  color: var(--sstdash-success);
  outline: 2px solid var(--sstdash-success);
  outline-offset: 2px;
}

.sst-dashboard .sst-dash-btn-sm--orange {
  color: var(--sstdash-warn);
  border-color: var(--sstdash-warn-border);
  background: var(--sstdash-warn-wash);
}

.sst-dashboard .sst-dash-btn-sm--orange:hover {
  background: var(--sstdash-warn-wash-strong);
  border-color: var(--sstdash-warn-border-hover);
  text-decoration: none;
  color: var(--sstdash-warn);
}

.sst-dashboard .sst-dash-btn-sm--orange:focus-visible {
  background: var(--sstdash-warn-wash-strong);
  border-color: var(--sstdash-warn-border-hover);
  text-decoration: none;
  color: var(--sstdash-warn);
  outline: 2px solid var(--sstdash-warn);
  outline-offset: 2px;
}

.sst-dashboard .sst-dash-btn-sm--wallet {
  color: var(--sstdash-text-on-gold);
  border-color: var(--sstdash-gold);
  background: var(--sstdash-gold);
  min-height: 44px;
}

.sst-dashboard .sst-dash-btn-sm--wallet:hover,
.sst-dashboard .sst-dash-btn-sm--wallet:focus-visible {
  color: var(--sstdash-text-on-gold);
  border-color: var(--sstdash-gold-hi);
  background: var(--sstdash-gold-hi);
  text-decoration: none;
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
}

.sst-dashboard .sst-dash-btn-sm--wallet-secondary {
  color: var(--sstdash-text);
  border-color: var(--sstdash-border-strong);
  background: var(--sstdash-surface);
  font-family: var(--sstdash-font-body);
  text-transform: none !important;
  letter-spacing: 0 !important;
  min-height: 44px;
}

.sst-dashboard .sst-dash-btn-sm--wallet-secondary:hover,
.sst-dashboard .sst-dash-btn-sm--wallet-secondary:focus-visible {
  color: var(--sstdash-text);
  border-color: var(--sstdash-gold);
  background: var(--sstdash-gold-wash);
  text-decoration: none;
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
}

.sst-dashboard .sst-dash-btn-sm[disabled] {
  opacity: 0.62;
  cursor: wait;
}

.sst-dash-wallet-status {
  align-self: center;
  font-size: var(--sstdash-font-micro);
  color: var(--sstdash-text-muted);
}

.sst-dash-wallet-status[data-state="success"] {
  color: var(--sstdash-success);
}

.sst-dash-wallet-status[data-state="error"] {
  color: var(--sstdash-danger);
}

/* Empty state */
.sst-dashboard .sst-dash-empty {
  text-align: center;
  padding: 28px var(--sstdash-space-4);
  color: var(--sstdash-text-muted);
  font-size: var(--sstdash-font-base);
  border: 1px dashed var(--sstdash-border-strong);
  border-radius: var(--sstdash-r-md);
}

/* ─────────────────────────────────────────────────────
   DOCUMENTS PANEL — PHOTO SECTION
───────────────────────────────────────────────────── */

.sst-dash-photo-section {
  text-align: center;
}

.sst-dash-photo-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sst-dashboard .sst-dash-cropper-sub {
  font-size: var(--sstdash-font-micro);
  color: var(--sstdash-text-muted);
  margin-bottom: var(--sstdash-space-2);
}

/* Photo guidance hint — help students upload a centered, card-quality photo. */
.sst-dashboard .sst-dash-photo-guidance {
  font-size: var(--sstdash-font-micro);
  color: var(--sstdash-text-muted);
  line-height: 1.5;
  max-width: 30rem;
  margin: 0 auto var(--sstdash-space-4);
}

/* Actual-card preview shell. Ratios are from rendered SST card PDFs
   (153.12pt x 242.4pt, 638px x 1010px at 300dpi). */
.sst-dashboard .sst-dash-card-preview {
  --sst-card-accent: #f2a900;
  --sst-card-photo-left: 15.99%;
  --sst-card-photo-top: 17.52%;
  --sst-card-photo-size: 67.71%;
  width: min(100%, 318px);
  aspect-ratio: 153.12 / 242.4;
  position: relative;
  overflow: hidden;
  margin: 0 auto var(--sstdash-space-4);
  border: 1px solid rgba(8, 11, 18, 0.42);
  border-radius: 4px;
  background:
    linear-gradient(to bottom, var(--sst-card-accent) 0 53.2%, #f7f7f3 53.2% 100%);
  color: #050505;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
}

.sst-dashboard .sst-dash-card-preview--site-safety {
  --sst-card-accent: #1486bf;
}

.sst-dashboard .sst-dash-card-preview--supervisor {
  --sst-card-accent: #f2a900;
}

.sst-dashboard .sst-dash-card-preview-head {
  position: absolute;
  left: 4.2%;
  right: 4.2%;
  top: 5.2%;
  color: #fff;
  font-family: var(--sstdash-font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.sst-dashboard .sst-dash-card-divider {
  position: absolute;
  left: 0;
  right: 0;
  top: 53.2%;
  height: 3px;
  background: #080808;
}

.sst-dashboard .sst-dash-card-photo-aperture.sst-dash-photo-circle {
  position: absolute;
  left: var(--sst-card-photo-left);
  top: var(--sst-card-photo-top);
  width: var(--sst-card-photo-size);
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 50%;
  border: 2px solid rgba(8, 8, 8, 0.82);
  background: #c8cfde;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 2px 5px rgba(0, 0, 0, 0.34);
  color: rgba(45, 60, 80, 0.38);
  cursor: pointer;
  overflow: hidden;
  z-index: 3;
}

.sst-dashboard .sst-dash-card-photo-aperture:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
  box-shadow:
    0 0 0 2px rgba(8, 8, 8, 0.8),
    0 0 0 6px var(--sst-card-accent);
}

.sst-dashboard .sst-dash-photo-section--editing .sst-dash-card-photo-aperture {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.96),
    0 0 0 6px rgba(8, 8, 8, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.24);
}

.sst-dashboard .sst-dash-card-photo-aperture img,
.sst-dashboard .sst-dash-card-photo-aperture canvas {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.sst-dashboard .sst-dash-card-photo-aperture .cropper-container {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  overflow: hidden;
}

.sst-dashboard .sst-dash-card-photo-aperture .cropper-view-box,
.sst-dashboard .sst-dash-card-photo-aperture .cropper-face {
  border-radius: 50%;
}

/* Silhouette placeholder SVG */
.sst-dashboard .sst-dash-silhouette {
  width: 52%;
  height: 52%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: currentColor;
}

/* Focal-point guide lines inside the printed photo aperture */
.sst-dashboard .sst-dash-guide-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: rgba(20, 32, 48, 0.42);
}

.sst-dashboard .sst-dash-card-contactless {
  position: absolute;
  right: 4.8%;
  top: 39.2%;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  transform: scaleX(0.65);
}

.sst-dashboard .sst-dash-card-role {
  position: absolute;
  left: 7.5%;
  right: 7.5%;
  top: 59.6%;
  color: #111;
  font-family: var(--sstdash-font-display);
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 #fff,
    1px 1px 0 var(--sst-card-accent);
}

.sst-dashboard .sst-dash-card-name {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 65.3%;
  font-family: var(--sstdash-font-body);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sst-dashboard .sst-dash-card-meta {
  position: absolute;
  left: 7.4%;
  right: 36.8%;
  top: 75.2%;
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.7;
  text-align: left;
  white-space: nowrap;
}

.sst-dashboard .sst-dash-card-meta span {
  display: inline-block;
  min-width: 4.35em;
}

.sst-dashboard .sst-dash-card-qr {
  position: absolute;
  right: 6.2%;
  bottom: 7.3%;
  width: 25%;
  aspect-ratio: 1 / 1;
  background-color: #fff;
  border: 2px solid #111;
  background-image:
    linear-gradient(90deg, #111 12.5%, transparent 12.5% 25%, #111 25% 37.5%, transparent 37.5% 50%, #111 50% 62.5%, transparent 62.5% 75%, #111 75% 87.5%, transparent 87.5%),
    linear-gradient(#111 12.5%, transparent 12.5% 25%, #111 25% 37.5%, transparent 37.5% 50%, #111 50% 62.5%, transparent 62.5% 75%, #111 75% 87.5%, transparent 87.5%);
  background-size: 32% 32%, 28% 28%;
  background-position: 0 0, 18% 13%;
  image-rendering: pixelated;
}

.sst-dashboard .sst-dash-card-qr::before,
.sst-dashboard .sst-dash-card-qr::after {
  content: '';
  position: absolute;
  width: 28%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 4px solid #111;
}

.sst-dashboard .sst-dash-card-qr::before {
  left: 6%;
  top: 6%;
}

.sst-dashboard .sst-dash-card-qr::after {
  right: 6%;
  top: 6%;
}

/* Photo action button (Change/Upload Photo) */
.sst-dashboard .sst-dash-photo-actions {
  margin-top: 0;
  margin-bottom: var(--sstdash-space-3);
}

.sst-dashboard .sst-dash-crop-btn.sst-dash-crop-btn--upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-height: 36px;
  max-width: 100%;
  padding: var(--sstdash-space-2) 20px;
  font-family: var(--sstdash-font-display);
  font-size: var(--sstdash-font-small);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: var(--sstdash-r-sm);
  border: 1px solid var(--sstdash-gold);
  background: transparent;
  color: var(--sstdash-gold);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.sst-dashboard .sst-dash-crop-btn.sst-dash-crop-btn--upload:hover {
  background: var(--sstdash-gold-wash-mid);
  color: var(--sstdash-gold-hi);
}

.sst-dashboard .sst-dash-crop-btn.sst-dash-crop-btn--upload:focus-visible {
  background: var(--sstdash-gold-wash-mid);
  color: var(--sstdash-gold-hi);
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
}

/* ── Primary upload button (prominent, used when no photo/doc exists) ── */
.sst-dashboard .sst-dash-upload-btn--primary {
  display: inline-flex;
  align-items: center;
  gap: var(--sstdash-space-2);
  padding: var(--sstdash-space-3) var(--sstdash-space-5);
  font-family: var(--sstdash-font-display);
  font-size: var(--sstdash-font-md);
  font-weight: 700;
  border-radius: var(--sstdash-r-md);
  border: none;
  background: var(--sstdash-gold);
  color: var(--sstdash-text-on-gold);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
  letter-spacing: 0.01em;
}
.sst-dashboard .sst-dash-upload-btn--primary:hover {
  background: var(--sstdash-gold-hi);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--sstdash-gold-shadow-strong);
}
.sst-dashboard .sst-dash-upload-btn--primary:active {
  transform: translateY(0);
}
.sst-dashboard .sst-dash-upload-btn--primary:focus-visible {
  background: var(--sstdash-gold-hi);
  outline: 2px solid var(--sstdash-text-on-gold);
  outline-offset: 2px;
}
.sst-dashboard .sst-dash-upload-btn--primary svg {
  flex-shrink: 0;
}

/* ── Inline doc upload button (inside doc row when missing) ── */
.sst-dashboard .sst-dash-upload-btn--doc {
  display: inline-flex;
  align-items: center;
  gap: var(--sstdash-space-1h);
  padding: var(--sstdash-space-2) var(--sstdash-space-4);
  font-family: var(--sstdash-font-display);
  font-size: var(--sstdash-font-micro);
  font-weight: 600;
  border-radius: var(--sstdash-r-sm);
  border: 1px solid var(--sstdash-gold);
  background: var(--sstdash-gold-wash);
  color: var(--sstdash-gold);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.sst-dashboard .sst-dash-upload-btn--doc:hover {
  background: var(--sstdash-gold-wash-hover);
  color: var(--sstdash-gold-hi);
  border-color: var(--sstdash-gold-hi);
}
.sst-dashboard .sst-dash-upload-btn--doc:focus-visible {
  background: var(--sstdash-gold-wash-hover);
  color: var(--sstdash-gold-hi);
  border-color: var(--sstdash-gold-hi);
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
}
.sst-dashboard .sst-dash-upload-btn--doc svg {
  flex-shrink: 0;
}

/* Doc row highlight when upload needed */
.sst-dash-doc-row--needs-upload {
  border-color: var(--sstdash-gold-ring);
}

/* Cropper control buttons (shown during crop only) */
.sst-dashboard .sst-dash-cropper-controls {
  display: none;
  gap: var(--sstdash-space-2);
  justify-content: center;
  margin-top: var(--sstdash-space-2h);
}

.sst-dashboard .sst-dash-cropper-controls--active {
  display: flex;
}

.sst-dashboard .sst-dash-crop-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--sstdash-r-sm);
  border: 1px solid var(--sstdash-border-strong);
  background: var(--sstdash-surface);
  color: var(--sstdash-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sstdash-font-md);
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.sst-dashboard .sst-dash-crop-btn:hover {
  border-color: var(--sstdash-gold-deep);
  color: var(--sstdash-gold);
  background: var(--sstdash-gold-wash-bare);
}

.sst-dashboard .sst-dash-crop-btn:focus-visible {
  border-color: var(--sstdash-gold);
  color: var(--sstdash-gold);
  background: var(--sstdash-gold-wash-bare);
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
}

.sst-dashboard .sst-dash-crop-btn--save {
  width: auto;
  padding: 0 var(--sstdash-space-4);
  font-size: var(--sstdash-font-small);
  font-weight: 600;
  color: var(--sstdash-success);
  border-color: var(--sstdash-success-border-solid);
}

.sst-dashboard .sst-dash-crop-btn--save:hover {
  background: var(--sstdash-success-wash);
  border-color: var(--sstdash-success-border-active);
  color: var(--sstdash-success);
}

/* ─────────────────────────────────────────────────────
   DOCUMENTS PANEL — REQUIRED DOCUMENTS LIST
───────────────────────────────────────────────────── */

.sst-dash-doc-list {
  display: flex;
  flex-direction: column;
  gap: var(--sstdash-space-2);
  margin-bottom: var(--sstdash-space-4);
}

.sst-dash-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sstdash-space-3) var(--sstdash-space-4);
  background: var(--sstdash-surface-raised);
  border: 1px solid var(--sstdash-border-strong);
  border-radius: var(--sstdash-r-sm);
}

.sst-dash-doc-info {
  display: flex;
  align-items: center;
  gap: var(--sstdash-space-2h);
}

.sst-dash-doc-status {
  font-size: var(--sstdash-font-base);
  font-weight: 700;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.sst-dash-doc-status--ok {
  color: var(--sstdash-success);
  background: var(--sstdash-success-wash-mid);
}

.sst-dash-doc-status--missing {
  color: var(--sstdash-danger);
  background: var(--sstdash-danger-wash-mid);
}

/* Empty OPTIONAL slot (existing SST card): an offer, not a deficiency —
   neutral plus, no danger wash. */
.sst-dash-doc-status--optional {
  color: var(--sstdash-text-muted);
  background: var(--sstdash-surface-rail);
}

.sst-dash-doc-name {
  font-size: var(--sstdash-font-base);
  color: var(--sstdash-text);
  font-weight: 500;
}

.sst-dash-doc-actions {
  display: flex;
  align-items: center;
  gap: var(--sstdash-space-2);
}

.sst-dashboard .sst-dash-doc-file-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--sstdash-space-3);
  border: 1px solid var(--sstdash-border-strong);
  border-radius: var(--sstdash-r-sm);
  color: var(--sstdash-text-muted);
  background: var(--sstdash-surface);
  font-family: var(--sstdash-font-display);
  font-size: var(--sstdash-font-micro);
  font-weight: 600;
}

/* Upload drop zone */
.sst-dashboard .sst-dash-upload-zone {
  border: 1px dashed var(--sstdash-border-control);
  border-radius: var(--sstdash-r-md);
  padding: var(--sstdash-space-5) var(--sstdash-space-4);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s;
  background: var(--sstdash-surface-raised);
}

.sst-dashboard .sst-dash-upload-zone:hover {
  border-color: var(--sstdash-gold-deep);
  background: var(--sstdash-gold-wash-faint);
}

.sst-dashboard .sst-dash-upload-zone:focus-visible {
  border-color: var(--sstdash-gold);
  background: var(--sstdash-gold-wash-faint);
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
}

.sst-dashboard .sst-dash-uz-icon {
  margin-bottom: var(--sstdash-space-2h);
  display: flex;
  justify-content: center;
}

.sst-dashboard .sst-dash-uz-icon svg {
  width: 28px;
  height: 28px;
  color: var(--sstdash-text-muted);
}

.sst-dashboard .sst-dash-uz-title {
  font-size: var(--sstdash-font-base);
  font-weight: 600;
  margin-bottom: var(--sstdash-space-1);
  color: var(--sstdash-text);
}

.sst-dashboard .sst-dash-uz-desc {
  font-size: var(--sstdash-font-micro);
  color: var(--sstdash-text-muted);
  line-height: 1.5;
}

.sst-dashboard .sst-dash-uz-formats {
  display: inline-block;
  margin-top: var(--sstdash-space-2);
  font-size: 10px; /* bespoke — below the --sstdash-font-nano (11px) ladder floor by design (format-hint chip) */
  color: var(--sstdash-text-muted);
  background: var(--sstdash-border-strong);
  padding: 3px var(--sstdash-space-2h);
  border-radius: var(--sstdash-r-sm);
  letter-spacing: 0.5px;
}

/* Hidden file input — visually hidden but FOCUSABLE (sr-only clip pattern).
   Never display:none — that removes it from the tab order (WCAG 2.1.1). */
.sst-dash-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus ring on the doc upload label when its hidden input is
   focused (native input is sr-only — same approach as the toggle track).
   Mirrors .sst-dash-upload-btn--doc:focus-visible. */
.sst-dashboard .sst-dash-upload-btn--doc:has(.sst-dash-file-input:focus-visible) {
  background: var(--sstdash-gold-wash-hover);
  color: var(--sstdash-gold-hi);
  border-color: var(--sstdash-gold-hi);
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
}

/* Inline upload status (replaces native alert / title-overwrite) */
.sst-dashboard .sst-dash-upload-status {
  display: none;
  align-items: flex-start;
  gap: var(--sstdash-space-1h);
  margin-top: var(--sstdash-space-2h);
  padding: var(--sstdash-space-2) var(--sstdash-space-3);
  border: 1px solid transparent;
  border-radius: var(--sstdash-r-sm);
  font-size: var(--sstdash-font-micro);
  line-height: 1.4;
  text-align: left;
}

.sst-dashboard .sst-dash-upload-status--visible {
  display: flex;
}

.sst-dashboard .sst-dash-upload-status svg {
  margin-top: 1px;
}

/* JS-injected status/check icons — size + spacing from the token ladder so the
   icon scale stays in lockstep with the rest of the surface (no JS magic numbers). */
.sst-dash-status-ic {
  width: var(--sstdash-icon-sm);
  height: var(--sstdash-icon-sm);
  flex: 0 0 auto;
  vertical-align: middle;
}

/* Check-mark on the Save button is one step up the icon ladder, with a small
   trailing gap before the "Saved!" label. */
.sst-dash-status-ic--check {
  width: var(--sstdash-icon-md);
  height: var(--sstdash-icon-md);
  margin-right: var(--sstdash-space-1);
}

.sst-dashboard .sst-dash-upload-status--success {
  color: var(--sstdash-success);
  border-color: var(--sstdash-success-border-solid);
  background: var(--sstdash-success-wash);
}

.sst-dashboard .sst-dash-upload-status--error {
  color: var(--sstdash-danger);
  border-color: var(--sstdash-danger-border);
  background: var(--sstdash-danger-wash);
}

/* ─────────────────────────────────────────────────────
   INFO FORM — GRID LAYOUTS
───────────────────────────────────────────────────── */

.sst-dashboard .sst-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sstdash-space-3);
}

.sst-dashboard .sst-dash-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.sst-dashboard .sst-dash-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.sst-dashboard .sst-dash-grid--1 {
  grid-template-columns: 1fr;
}

/* ZIP row: half-width field in the left column, alignment from the grid
   itself rather than an empty filler cell. */
.sst-dashboard .sst-dash-grid--zip {
  grid-template-columns: 1fr 1fr;
}
.sst-dashboard .sst-dash-grid--zip > .sst-dash-field {
  grid-column: 1;
}

/* Full-span inside any grid */
.sst-dashboard .sst-dash-grid .sst-dash-field--full {
  grid-column: 1 / -1;
}

/* ─────────────────────────────────────────────────────
   FIELD GROUP
───────────────────────────────────────────────────── */

.sst-dashboard .sst-dash-field {
  margin-bottom: 0;
}

.sst-dashboard .sst-dash-field label,
.sst-dashboard .sst-dash-field .sst-dash-field-label {
  display: block;
  font-size: var(--sstdash-font-nano);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sstdash-text-muted);
  margin-bottom: var(--sstdash-space-1h);
}

.sst-dashboard .sst-dash-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sstdash-text-muted);
  font-size: var(--sstdash-font-nano);
  margin-top: var(--sstdash-space-1);
  display: block;
}

.sst-dashboard .sst-dash-warn {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sstdash-warn);
}

.sst-dashboard .sst-dash-opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sstdash-text-muted);
}

.sst-dashboard .sst-dash-field input,
.sst-dashboard .sst-dash-field .sst-dash-field-input,
.sst-dashboard .sst-dash-info-form input[type="text"],
.sst-dashboard .sst-dash-info-form input[type="tel"],
.sst-dashboard .sst-dash-info-form input[type="email"] {
  width: 100%;
  padding: 11px var(--sstdash-space-3h);
  background: var(--sstdash-surface-raised) !important;
  border: 1px solid var(--sstdash-border-strong) !important;
  border-radius: var(--sstdash-r-sm);
  color: var(--sstdash-text) !important;
  font-family: var(--sstdash-font-body);
  font-size: var(--sstdash-font-base);
  transition: border-color 0.2s;
  outline: none;
}

/* Override Chrome autofill white background */
.sst-dashboard input:-webkit-autofill,
.sst-dashboard input:-webkit-autofill:hover,
.sst-dashboard input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px var(--sstdash-surface-raised) inset !important;
  -webkit-text-fill-color: var(--sstdash-text) !important;
  border: 1px solid var(--sstdash-border-strong) !important;
  caret-color: var(--sstdash-text);
}

.sst-dashboard .sst-dash-field input:focus,
.sst-dashboard .sst-dash-field .sst-dash-field-input:focus,
.sst-dashboard .sst-dash-info-form input:focus {
  border-color: var(--sstdash-gold) !important;
  box-shadow: 0 0 0 3px var(--sstdash-gold-ring) !important;
}

.sst-dashboard .sst-dash-field input::placeholder,
.sst-dashboard .sst-dash-field .sst-dash-field-input::placeholder {
  color: var(--sstdash-text-muted);
}

.sst-dashboard .sst-dash-field input:disabled,
.sst-dashboard .sst-dash-field .sst-dash-field-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sst-dashboard .sst-dash-field input[readonly] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────
   FIELD VALIDATION ERRORS
───────────────────────────────────────────────────── */

.sst-dashboard .sst-dash-field-error {
  color: var(--sstdash-danger);
  font-size: var(--sstdash-font-nano);
  margin-top: var(--sstdash-space-1);
  line-height: 1.3;
}

.sst-dashboard .sst-dash-field--invalid input,
.sst-dashboard .sst-dash-field--invalid select {
  border-color: var(--sstdash-danger) !important;
}

/* ─────────────────────────────────────────────────────
   SELECT DROPDOWN (state pickers)
───────────────────────────────────────────────────── */

.sst-dashboard .sst-dash-field select {
  width: 100%;
  padding: 11px var(--sstdash-space-3h);
  background: var(--sstdash-surface-raised);
  border: 1px solid var(--sstdash-border-strong);
  border-radius: var(--sstdash-r-sm);
  color: var(--sstdash-text);
  font-family: var(--sstdash-font-body);
  font-size: var(--sstdash-font-base);
  transition: border-color 0.2s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  /* Encoded SVG fill mirrors --sstdash-text-faint (#5a5850); var() cannot be
     interpolated inside a url() data-URI, so keep the literal here. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235a5850'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

.sst-dashboard .sst-dash-field select:focus {
  border-color: var(--sstdash-gold);
  box-shadow: 0 0 0 3px var(--sstdash-gold-ring);
}

.sst-dashboard .sst-dash-field select option {
  background: var(--sstdash-surface-raised);
  color: var(--sstdash-text);
}

/* ─────────────────────────────────────────────────────
   SECTION LABEL (Shipping Address / License Address headings)
───────────────────────────────────────────────────── */

.sst-dashboard .sst-dash-field--section-label {
  margin-top: var(--sstdash-space-4);
  margin-bottom: var(--sstdash-space-1);
}

.sst-dashboard .sst-dash-field--section-label .sst-dash-field-label {
  font-size: var(--sstdash-font-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--sstdash-text-muted);
}

/* ─────────────────────────────────────────────────────
   ADDRESS TOGGLE (DOB vs shipping)
───────────────────────────────────────────────────── */

.sst-dashboard .sst-dash-toggle {
  display: flex;
  align-items: center;
  margin-top: var(--sstdash-space-4);
  margin-bottom: var(--sstdash-space-3);
  cursor: pointer;
  user-select: none;
}

.sst-dashboard .sst-dash-toggle label {
  display: inline-flex;
  align-items: center;
  gap: var(--sstdash-space-2h);
  min-width: 0;
  max-width: 100%;
  cursor: pointer;
}

.sst-dashboard .sst-dash-toggle input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sst-dashboard .sst-dash-toggle-track {
  width: 38px;
  height: 20px;
  background: var(--sstdash-border-control);
  border-radius: var(--sstdash-r-pill);
  position: relative;
  transition: background 0.25s;
  flex-shrink: 0;
}

.sst-dashboard .sst-dash-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sstdash-text-faint);
  transition: left 0.25s, background-color 0.25s;
}

.sst-dashboard .sst-dash-toggle input:checked + .sst-dash-toggle-track {
  background: var(--sstdash-gold-deep);
}

.sst-dashboard .sst-dash-toggle input:checked + .sst-dash-toggle-track::after {
  left: 20px;
  background: var(--sstdash-gold);
}

/* Keyboard focus ring on the toggle (native checkbox is visually hidden) */
.sst-dashboard .sst-dash-toggle input:focus-visible + .sst-dash-toggle-track {
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
}

.sst-dashboard .sst-dash-toggle-text {
  font-size: var(--sstdash-font-small);
  color: var(--sstdash-text-muted);
  line-height: 1.35;
  min-width: 0;
  text-align: left;
}

/* DOB address collapsible section */
.sst-dashboard .sst-dash-dob-address {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.25s ease, visibility 0s linear 0.35s;
  margin-top: 0;
}

.sst-dashboard .sst-dash-dob-address--open {
  /* Generous cap so tall content (long fields + inline validation errors)
     never clips. The 0fr/1fr grid-rows technique would need a single wrapper
     element in the markup (class-student-dashboard.php ~L1147 has multiple
     direct child grids) — kept CSS-only here by raising the cap instead. */
  max-height: 1500px;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  margin-top: var(--sstdash-space-3);
}

/* ─────────────────────────────────────────────────────
   SAVE BUTTON
───────────────────────────────────────────────────── */

.sst-dashboard .sst-dash-btn-save {
  display: inline-flex;
  align-items: center;
  gap: var(--sstdash-space-2);
  margin-top: var(--sstdash-space-4);
  padding: var(--sstdash-space-2h) 28px;
  background: transparent;
  color: var(--sstdash-gold);
  border: 1px solid var(--sstdash-gold-deep);
  border-radius: var(--sstdash-r-sm);
  font-family: var(--sstdash-font-body);
  font-size: var(--sstdash-font-small);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  /* A server-supplied error message rendered as the button label must degrade
     gracefully rather than wrap or stretch the pill out of the form's rhythm. */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sst-dashboard .sst-dash-btn-save:hover {
  background: var(--sstdash-gold-wash);
  border-color: var(--sstdash-gold);
}

.sst-dashboard .sst-dash-btn-save:focus-visible {
  background: var(--sstdash-gold-wash);
  border-color: var(--sstdash-gold);
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
}

/* Save-button feedback states — use the dashboard's own success/error colors */
.sst-dashboard .sst-dash-btn-save.is-saved {
  color: var(--sstdash-success);
}

.sst-dashboard .sst-dash-btn-save.is-error {
  color: var(--sstdash-danger);
}

/* ─────────────────────────────────────────────────────
   MOBILE — 768px breakpoint
───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .sst-dash-layout {
    flex-direction: column;
  }

  .sst-dash-sidebar {
    width: 100%;
    max-width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;
    padding: var(--sstdash-space-3) var(--sstdash-space-4);
    gap: var(--sstdash-space-1);
    overflow: hidden;
    border-right: none;
    border-bottom: 1px solid var(--sstdash-border);
  }

  .sst-dash-sidebar-logo {
    margin-bottom: 0;
    margin-right: var(--sstdash-space-4);
    flex-shrink: 0;
  }

  /* Astra forces a responsive header-logo size (height:72px/max-width:100%) onto
     this <img> on mobile — override hard so it stays a small inline mark and never
     spans the viewport (which clipped the wordmark + crowded the nav). */
  .sst-dashboard .sst-dash-sidebar-logo img {
    height: 24px !important;
    width: auto !important;
    max-width: 55vw !important;
  }

  /* The nav gets its OWN full-width row below the logo (flex-basis 100% forces a
     wrap), horizontally scrollable so every tab is reachable on a phone — the
     prior single-row layout pushed "Documents"/"My Info" off the right edge. */
  .sst-dash-sidebar-nav {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sstdash-space-1);
    overflow: visible;
    scroll-padding-inline: var(--sstdash-space-4);
    -webkit-overflow-scrolling: touch;
  }

  .sst-dash-sidebar-nav .sst-dash-nav-item {
    flex: 0 0 auto;
  }

  .sst-dash-nav-item {
    white-space: nowrap;
    padding: var(--sstdash-space-2) var(--sstdash-space-3);
    font-size: var(--sstdash-font-small);
  }

  .sst-dash-sidebar-bottom {
    flex-direction: row;
    margin-top: 0;
    margin-left: auto;
    border-top: none;
    padding-top: 0;
    flex-shrink: 0;
  }

  .sst-dash-sidebar-sep {
    display: none;
  }

  .sst-dash-content {
    padding: 20px var(--sstdash-space-4);
  }

  .sst-dash-course-grid {
    grid-template-columns: 1fr;
  }

  .sst-dash-hero-top {
    flex-direction: column;
  }

  .sst-dash-completed-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sstdash-space-3);
  }

  .sst-dashboard .sst-dash-grid,
  .sst-dashboard .sst-dash-grid--2,
  .sst-dashboard .sst-dash-grid--3,
  .sst-dashboard .sst-dash-grid--zip {
    grid-template-columns: 1fr;
  }

  /* LD resume button full-width on mobile */
  .sst-dashboard .ld-course-resume.ld-button,
  .sst-dashboard a.ld-course-resume {
    width: 100% !important;
    justify-content: center !important;
    padding: var(--sstdash-space-3) 20px !important;
  }

  .sst-dashboard .sst-dash-photo-circle {
    width: 100px;
    height: 100px;
  }

  .sst-dash-tracker {
    gap: var(--sstdash-space-1);
  }

  .sst-dash-tracker-line {
    min-width: 20px;
  }

  .sst-dash-cert-downloads {
    flex-direction: column;
  }

  .sst-dash-wallet-panel {
    padding: var(--sstdash-space-3);
  }

  .sst-dash-wallet-bucket {
    flex-wrap: wrap;
  }

  .sst-dash-wallet-bucket .sst-wallet-control--dashboard {
    grid-template-columns: 1fr;
    flex-basis: 100%;
    margin-left: 0;
    gap: var(--sstdash-space-2);
  }

  .sst-wallet-control--dashboard {
    grid-template-columns: 1fr;
    gap: var(--sstdash-space-2);
  }

  .sst-dashboard .sst-wallet-control--dashboard .sst-dash-btn-sm {
    width: 100%;
    min-height: 46px;
    text-align: center;
  }

  .sst-dash-wallet-status {
    min-height: 20px;
  }

  .sst-dash-cert-downloads .sst-dash-btn-sm {
    width: 100%;
  }

  /* Per-doc upload button is the ONLY doc-upload path (the general zone
     rejects untyped files) — meet the 44px touch-target floor on mobile. */
  .sst-dashboard .sst-dash-upload-btn--doc {
    min-height: 44px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   THEME — auto (OS) + manual toggle override.
   Light is the default (token block above). The inline pre-paint script in
   render_shortcode resolves `localStorage override ?? OS prefers-color-scheme`
   and stamps data-sst-theme on <html> before paint (no FOUC). Only surface /
   text / accent-text tokens flip here; the gold fill, washes, and status hues
   are theme-agnostic and stay as defined above.
   ───────────────────────────────────────────────────────────────────── */
html[data-sst-theme="dark"] .sst-dashboard,
html[data-sst-theme="dark"] body.page-id-460,
html[data-sst-theme="dark"] body.woocommerce-account {
  --sstdash-bg: #0e0e0e;
  --sstdash-surface: #141414;
  --sstdash-surface-raised: #1c1c1c;
  --sstdash-surface-rail: #111;
  --sstdash-border: #1e1e1e;
  --sstdash-border-strong: #262626;
  --sstdash-border-card: #252525;
  --sstdash-border-control: #333;
  --sstdash-text: #f2f0eb;
  --sstdash-text-muted: #9a9588;
  --sstdash-text-dim: #666;
  --sstdash-text-faint: #5a5850;
  --sstdash-gold-hi: #e8c56d; /* light gold reads on dark; reverts the light-mode darkening */
}

/* Theme toggle button — shows the icon for the CURRENT theme (sun = light, moon
   = dark). Icons are CSS-driven off the pre-paint <html> attribute, so they're
   correct on first paint. */
/* The toggle is a <button>, so the theme (Astra) forces its amber button fill
   on it — override hard so it reads like the sibling nav-util links (text only),
   not a gold pill. */
.sst-dashboard .sst-dash-theme-toggle.sst-dash-nav-util {
  display: inline-flex;
  align-items: center;
  gap: var(--sstdash-space-1h);
  width: 100%;
  text-align: left;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  font: inherit;
  color: var(--sstdash-text-muted);
}
.sst-dashboard .sst-dash-theme-toggle.sst-dash-nav-util:hover,
.sst-dashboard .sst-dash-theme-toggle.sst-dash-nav-util:focus-visible {
  background: none !important;
  color: var(--sstdash-gold-hi) !important;
}
/* Standard focus ring — keyboard users get the same gold outline as every
   other nav control (resting box-shadow:none was swallowing any ring). */
.sst-dashboard .sst-dash-theme-toggle.sst-dash-nav-util:focus-visible {
  outline: 2px solid var(--sstdash-gold);
  outline-offset: 2px;
}
.sst-dash-theme-icon { display: none; width: 15px; height: 15px; }
html[data-sst-theme="dark"] .sst-dash-theme-icon--moon { display: inline-block; }
html[data-sst-theme="light"] .sst-dash-theme-icon--sun,
html:not([data-sst-theme]) .sst-dash-theme-icon--sun { display: inline-block; }

/* ─────────────────────────────────────────────────────
   LIVE COHORT CARD
   Live-Zoom registrations are never LearnDash enrollments, so they carry
   no progress bar. The schedule replaces it as the primary content.
   ───────────────────────────────────────────────────── */

.sst-dash-live-sessions {
  list-style: none;
  margin: 0 0 var(--sstdash-space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sstdash-space-1h);
}

.sst-dash-live-session {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sstdash-space-3);
  padding: var(--sstdash-space-2) 0;
  border-bottom: 1px solid var(--sstdash-border);
}

.sst-dash-live-session:last-child { border-bottom: none; }

/* Past sessions stay legible — dimmed, never hidden. A student checking
   which Fridays they have already attended needs to read them. */
.sst-dash-live-session.is-past .sst-dash-live-date,
.sst-dash-live-session.is-past .sst-dash-live-time {
  color: var(--sstdash-text-muted);
  text-decoration: line-through;
}

.sst-dash-live-date {
  color: var(--sstdash-text);
  font-weight: 600;
  text-transform: capitalize;
}

.sst-dash-live-time {
  color: var(--sstdash-text-muted);
  font-size: var(--sstdash-font-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sst-dash-live-join {
  background: var(--sstdash-gold);
  border-radius: var(--sstdash-r-sm);
  color: var(--sstdash-text-on-gold);
  display: inline-block;
  font-weight: 700;
  padding: var(--sstdash-space-2) var(--sstdash-space-4);
  text-decoration: none;
  white-space: nowrap;
}

.sst-dash-live-join:hover { color: var(--sstdash-text-on-gold); opacity: .9; }

/* Matches the sibling gold CTAs in this file — a keyboard user must see the
   focus ring on the most important control on the card. */
.sst-dash-live-join:focus-visible {
  outline: 2px solid var(--sstdash-text-on-gold);
  outline-offset: 2px;
}

.sst-dash-live-note {
  color: var(--sstdash-text-muted);
  font-size: var(--sstdash-font-small);
  line-height: 1.5;
}

@media (max-width: 480px) {
  .sst-dash-live-session { flex-direction: column; gap: 2px; }
  .sst-dash-live-join { display: block; text-align: center; }
}