/* ═══════════════════════════════════════════════════════════════
   OL-UI-000110 — Premium design layer (Core 1.0.73.107, C-14)
   WHAT:  Brochure typography for every page (Cormorant Garamond
          headings, Montserrat text, one type scale) and the home page
          "gold card" look across the admin area.
   WHY:   The owner asked for screens that feel like his brochures.
          Doing it here, on top of the existing styles and tokens,
          changes the look without editing each screen.
   NOTE:  Colours come from tokens.css, so light, dark and "system"
          modes switch together. Card rules are scoped to .admin, so
          learner pages keep their own cards; only type and the phone
          menu change there.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Typography (all pages) ───────────────────────────────── */
body { font-family: var(--ol-font-body, var(--font-body)); font-size: var(--fs-16); }
h1, h2, h3 {
  font-family: var(--ol-font-heading, var(--font-display));
  font-variant-numeric: lining-nums;   /* "1.0.73.107", not old-style figures */
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.15;
}
h1 { font-size: var(--fs-36); }
h2 { font-size: var(--fs-28); }
h3 { font-size: var(--fs-22); }
/* Small headings stay in the text face: Cormorant is a display serif and
   loses clarity below 18px. */
html :is(h4, h5, h6) { font-family: var(--ol-font-body, var(--font-ui)); font-weight: 650; letter-spacing: 0; line-height: 1.3; }
h4 { font-size: var(--fs-18); }
h5, h6 { font-size: var(--fs-16); }
@media (max-width: 640px) {
  h1 { font-size: var(--fs-28); }
  h2 { font-size: var(--fs-22); }
  h3 { font-size: var(--fs-18); }
}
.btn, .input, .select, .textarea, .label, .badge, .table, .eyebrow, .stat-label,
.side-nav, .admin-bar, .public-nav, .public-drawer { font-family: var(--ol-font-body, var(--font-ui)); }
.input, .select, .textarea { font-size: var(--fs-16); }  /* 16px stops iOS zooming into fields */
.btn { font-size: var(--fs-14); letter-spacing: .01em; }
.btn-lg { font-size: var(--fs-16); }
.eyebrow { font-size: var(--fs-12); letter-spacing: .14em; color: var(--ol-kicker); }

/* Numbers line up and stay legible: Cormorant has old-style figures, so
   statistics and tables use the text face with tabular figures. */
.stat-value, .metric-value, .ol-plugins-summary__value, .credits-balance strong,
.credits-head-balance strong, .ova-kpi, .course-card-metrics b, .ol-player-stat,
.table td, .table th, .credits-delta, .mono {
  font-variant-numeric: tabular-nums lining-nums;
}
:root :is(.stat-value, .metric-value, .ol-plugins-summary__value, .credits-balance strong, .credits-head-balance strong,
  .course-card-metrics b, .ol-el-price) {
  font-family: var(--ol-font-body, var(--font-ui));
  font-variant-numeric: tabular-nums lining-nums;
}

/* The admin top-bar title and page intro titles are display headings. */
.admin-bar-title { font-family: var(--ol-font-heading, var(--font-display)); font-size: var(--fs-22); font-weight: 600; letter-spacing: 0; font-variant-numeric: lining-nums; }
:root .ol-upd-banner__title { font-variant-numeric: lining-nums; }
.page-intro h2, .page-intro h1 { font-family: var(--ol-font-heading, var(--font-display)); }

/* ─── 2. Logos on dark backgrounds (all pages) ─────────────────── */
/* When only a light-background logo is uploaded, it sits on a small cream
   plate on dark surfaces (dark mode, the navy admin sidebar) so it is never
   navy-on-navy. An uploaded dark-background logo is still preferred and
   shown as before (Settings → Branding). */
.ol-mode-dark .brand-logo-set.has-light-variant:not(.has-dark-variant),
.sidebar .brand-logo-set.has-light-variant:not(.has-dark-variant) {
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--ol-cream);
  box-shadow: 0 0 0 1px rgba(212,168,74,.35);
}
@media (prefers-color-scheme: dark) {
  .ol-mode-system .brand-logo-set.has-light-variant:not(.has-dark-variant) {
    padding: 6px 10px; border-radius: 12px; background: var(--ol-cream); box-shadow: 0 0 0 1px rgba(212,168,74,.35);
  }
}
/* The phone/tablet admin drawer in dark mode is already a light sheet. */
@media (max-width: 1023px) {
  .ol-mode-dark .admin.is-menu-open .sidebar .brand-logo-set { padding: 0; background: none; box-shadow: none; }
}

/* ─── 3. Public phone menu (drawer) ───────────────────────────── */
@media (max-width: 1023px) {
  .public-drawer {
    gap: var(--s-4);
    padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  }
  .public-drawer-main { flex: 1 0 auto; }
  .public-drawer-brand .brand-logo { max-height: 38px; }
  .public-menu-link-drawer, .public-menu-group-drawer > summary { min-height: 44px; font-size: var(--fs-16); }
  .public-drawer-section { font-size: var(--fs-12); }
  .public-drawer-user strong { font-size: var(--fs-16); font-weight: 600; }
  .public-drawer-user .xs { font-size: var(--fs-12); }
  .public-drawer-account-links a, .public-drawer-signout { min-height: 44px; font-size: var(--fs-14); }
  /* The theme switch sits in its own row with room for its shadow and
     focus ring, so it is never clipped at the bottom of the sheet. */
  .public-drawer-foot .ol-theme-toggle {
    flex: 0 0 auto;
    align-self: flex-start;
    margin: 2px 0 2px 2px;
    background: transparent;
    border-color: var(--c-pdrawer-border);
    color: var(--c-pdrawer-text);
    box-shadow: none;
  }
  .public-drawer-foot .ol-theme-toggle:hover { background: var(--c-pdrawer-hover-bg); }
  .public-drawer-cta { background: var(--ol-btn-gold); border-color: transparent; color: var(--ol-btn-gold-text); }
}

/* ─── 4. Admin: gold cards ────────────────────────────────────── */
/* :root raises these rules above the optional Refined Theme plugin's
   card treatments (same look intent, the owner chose this one). */
:root .admin :is(.card, .ol-card, .ol-plugin, .ol-plugins-summary, .ol-upd-facts, .ol-upd-fold,
  .credits-panel, .credits-head-balance, .ova-card, .stat-card, .assessment-create-card,
  .ol-player-form-card, .ol-studio-panel, .ol-disclosure) {
  background: var(--ol-card-bg);
  border: 1px solid var(--ol-card-border);
  border-radius: var(--ol-card-radius);
  box-shadow: var(--ol-card-shadow);
}
:root .admin :is(.card:not(.card-flush), .ol-card, .ol-plugin) { padding: var(--ol-card-pad); }
:root .admin .card :is(.card, .ol-card) { box-shadow: none; }

/* Dense tables: plain surface behind rows, gold edge kept. */
:root .admin :is(.card, .ol-card):has(table),
:root .admin .ol-upd-fold:has(table) { background: var(--ol-card-bg-plain); }

:root .admin .card-head { border-bottom-color: var(--ol-card-divider); padding: var(--s-4) var(--ol-card-pad); }
:root .admin .card-body { padding: var(--ol-card-pad); }
:root .admin .card-foot { border-top-color: var(--ol-card-divider); background: transparent; padding: var(--s-4) var(--ol-card-pad); }
:root .admin .card-head h2, :root .admin .card-head h3 { font-size: var(--fs-22); }
:root .admin .card > h3:first-child, :root .admin .card > h2:first-child { margin-bottom: 8px; }
:root .admin .card p { line-height: 1.6; }
:root .admin .card-hover:hover { box-shadow: var(--ol-card-shadow-hover); border-color: var(--ol-card-border-strong); }
:root .admin .ol-plugin.is-danger { border-color: color-mix(in srgb, var(--c-danger) 45%, var(--ol-card-border)); box-shadow: inset 3px 0 0 var(--c-danger), var(--ol-card-shadow); }

/* Stat tiles */
:root .admin .stat { gap: 6px; }
:root .admin .stat-label { color: var(--ol-kicker); font-size: var(--fs-12); font-weight: 700; letter-spacing: .14em; }
:root .admin .stat-value { font-size: var(--fs-28); font-weight: 700; letter-spacing: -.01em; color: var(--c-text); }
:root .admin .stat-note { font-size: var(--fs-14); color: var(--c-text-muted); }

/* Navy square badge with a gold glyph, wherever a card already has an
   icon slot. Status variants (problem / inactive plugin) keep their
   meaning. */
.ol-card-icon,
:root .admin :is(.ol-plugin__mark, .credits-wallet-icon, .feature-icon, .assessment-create-icon,
  .assessment-card-head__icon, .question-bank-index-intro__icon, .ol-upd-banner__icon) {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ol-badge-bg);
  border: 1px solid var(--ol-badge-border);
  color: var(--ol-badge-fg);
  font-weight: 800;
}
:root .admin .credits-wallet-icon-lg { flex-basis: 52px; width: 52px; height: 52px; border-radius: 14px; }
:root .admin .ol-plugin.is-neutral .ol-plugin__mark { background: var(--c-surface-2); border-color: var(--ol-card-border); color: var(--c-text-muted); }
:root .admin .ol-plugin.is-danger .ol-plugin__mark { background: var(--c-danger-bg); border-color: transparent; color: var(--c-danger-text); }
:root .admin .ol-upd-banner__icon { background: var(--tone-bg); color: var(--tone-text); border-color: transparent; }
.ol-card-icon svg { width: 20px; height: 20px; }
:root .admin .stat > .ol-card-icon { margin-bottom: 8px; }

/* Credits page stat tiles were stacked one per row (the row had no grid
   rule); four across on desktop, two on tablets and phones. */
:root .admin .credits-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { :root .admin .credits-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

:root .admin :is(.credits-balance strong, .credits-head-balance strong) { color: var(--c-text); }

/* Dashboard "Recent activity": the description column takes the space
   left by the badge and time (so the time is never pushed out of the
   card); on phones each entry stacks: badge, description, who, when. */
:root .admin .ol-activity { width: 100%; }
:root .admin .ol-activity td:nth-child(2) { width: 100%; max-width: 0; }
@media (max-width: 640px) {
  :root .admin .ol-activity, :root .admin .ol-activity tbody { display: block; }
  :root .admin .ol-activity tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 20px; border-bottom: 1px solid var(--ol-card-divider); }
  :root .admin .ol-activity tr:last-child { border-bottom: 0; }
  :root .admin .ol-activity td, :root .admin .ol-activity td:nth-child(2) { display: block; width: auto; max-width: none; padding: 0; border: 0; }
  :root .admin .ol-activity .badge { white-space: normal; }
  :root .admin .ol-activity td:nth-child(2) .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  :root .admin .ol-activity__time { white-space: normal; }
}

/* Small panel headings (under 18px) use the text face. */
:root .admin :is(.course-panel-heading, .assessment-card-head) :is(h2, h3) { font-family: var(--ol-font-body, var(--font-ui)); font-size: var(--fs-16); font-weight: 650; letter-spacing: 0; }

/* Kickers and headings inside cards */
:root .admin .ol-plugin__title h3 { font-size: var(--fs-18); font-family: var(--ol-font-body, var(--font-ui)); font-weight: 650; }
:root .admin .ol-upd-fact span, :root .admin .ol-plugins-summary__label { color: var(--ol-kicker); letter-spacing: .1em; text-transform: uppercase; font-size: var(--fs-12); font-weight: 700; }
:root .admin .ol-upd-fact { border-color: var(--ol-card-divider); }
:root .admin .ol-plugins-summary__item + .ol-plugins-summary__item,
:root .admin .ol-plugins-summary__core { border-left-color: var(--ol-card-divider); }
:root .admin .ol-plugins-summary__core { background: transparent; }
:root .admin .ol-plugin__foot { border-top-color: var(--ol-card-divider); }

/* Selected filter chip / course tab: same navy pill + gold text as the
   phone menu (the course tab was white on the Appearance "deep" colour,
   2.7:1 with a khaki setting). */
:root .admin .course-admin-tab.is-active,
:root .admin .ol-plugins-filter__chip.is-active { background: var(--c-pdrawer-active-bg); border-color: var(--c-pdrawer-active-border); color: var(--c-pdrawer-active-text); }
:root .admin .ol-plugins-filter__chip.is-active .ol-plugins-filter__count { background: rgba(241,212,138,.18); color: var(--c-pdrawer-active-text); }

/* Sidebar footer "Sign out" was faint grey on navy (2.9:1); now the
   sidebar's muted text colour (7:1+). */
.sidebar-foot .btn-quiet { --btn-fg: var(--c-nav-text-muted); color: var(--c-nav-text-muted); }
.sidebar-foot .btn-quiet:hover { --btn-fg: var(--c-nav-text); color: var(--c-nav-text); }

/* Primary buttons: the home page gold pill with navy text (7:1). */
:root .admin .btn-primary {
  --btn-bd: transparent;
  --btn-fg: var(--ol-btn-gold-text);
  background: var(--ol-btn-gold);
  border-color: transparent;
  color: var(--ol-btn-gold-text);
}
:root .admin .btn-primary:hover { background: var(--ol-btn-gold-hover); color: var(--ol-btn-gold-text); }

/* Spacing: generous on desktop, tighter on phones (no sideways scroll). */
@media (max-width: 1023px) {
  :root .admin { --ol-card-pad: 24px; }
}
@media (max-width: 767px) {
  :root .admin { --ol-card-pad: 20px; --ol-card-radius: 18px; }
  :root .admin .stat-value { font-size: var(--fs-22); }
}
/* Phones: stat tiles two across instead of a long single column. */
@media (max-width: 640px) {
  :root .admin .grid:has(> .card.stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  :root .admin .grid > .card.stat { padding: 16px; min-width: 0; }
  :root .admin .card.stat .ol-card-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; margin-bottom: 4px; }
  :root .admin .card.stat .stat-label { letter-spacing: .08em; }
  :root .admin .card.stat .stat-value { overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  :root .admin { --ol-card-pad: 16px; }
}

/* ─── 5. Sign-in, account and error pages (OL-UI-000113, 1.0.73.108) ── */
/* One look for layouts/auth (admin + learner sign-in, forgot / reset /
   set-up password, two-factor, group invitation, 403/404/419/429/500).
   Colours are brochure tokens, never the Appearance colours, so a site's
   own "signal" choice (the test site: khaki) no longer turns the sign-in button
   khaki. The page glow covers the full width: the old pages painted the
   glow on both <body> and <main> (both had class "auth"), which drew a
   hard-edged rectangle around the card. All text pairs are 4.5:1+. */
body.ol-auth-body {
  --auth-page: var(--ol-cream);
  --auth-glow: rgba(212,168,74,.18);
  --auth-card: #FFFFFF;
  --auth-card-border: rgba(160,122,34,.24);
  --auth-shadow: 0 1px 2px rgba(13,27,51,.04), 0 24px 48px -24px rgba(13,27,51,.22);
  --auth-title: var(--ol-brand-navy-deep);
  --auth-text: #16181D;
  --auth-muted: #4A5160;
  --auth-label: #14213D;
  --auth-link: var(--ol-brand-navy);
  --auth-kicker: var(--ol-gold-text);
  --auth-input-bg: #FFFFFF;
  --auth-input-border: #9C8C6E;
  --auth-readonly-bg: #F5EFE6;
  --auth-focus: var(--ol-gold-antique);
  --auth-focus-ring: rgba(191,143,0,.22);
  --auth-ok: #1F7A4D;
  --auth-bad: #B3261E;
  --auth-ghost: var(--ol-brand-navy);
  --auth-badge-bg: rgba(32,56,100,.08);
  --auth-badge-fg: var(--ol-brand-navy);
  background: var(--auth-page);
  color: var(--auth-text);
}
/* Learner pages in dark mode (chosen, or "system" with a dark device). */
.ol-mode-dark body.ol-auth-body:not(.is-admin) {
  --auth-page: #0B1220;
  --auth-glow: rgba(32,56,100,.55);
  --auth-card: #121C2E;
  --auth-card-border: rgba(212,168,74,.26);
  --auth-shadow: 0 1px 2px rgba(0,0,0,.3), 0 24px 48px -24px rgba(0,0,0,.6);
  --auth-title: #FBF8F3;
  --auth-text: #EDE7DC;
  --auth-muted: #B3C0D2;
  --auth-label: #EDE7DC;
  --auth-link: var(--ol-gold-light);
  --auth-kicker: var(--ol-gold);
  --auth-input-bg: #0B1220;
  --auth-input-border: #6A7E9E;
  --auth-readonly-bg: #18243A;
  --auth-focus: var(--ol-gold);
  --auth-focus-ring: rgba(212,168,74,.28);
  --auth-ok: #8EDBB0;
  --auth-bad: #FFA69E;
  --auth-ghost: var(--ol-gold-light);
  --auth-badge-bg: rgba(241,212,138,.12);
  --auth-badge-fg: var(--ol-gold-light);
}
@media (prefers-color-scheme: dark) {
  .ol-mode-system body.ol-auth-body:not(.is-admin) {
    --auth-page: #0B1220; --auth-glow: rgba(32,56,100,.55); --auth-card: #121C2E; --auth-card-border: rgba(212,168,74,.26);
    --auth-shadow: 0 1px 2px rgba(0,0,0,.3), 0 24px 48px -24px rgba(0,0,0,.6);
    --auth-title: #FBF8F3; --auth-text: #EDE7DC; --auth-muted: #B3C0D2; --auth-label: #EDE7DC; --auth-link: var(--ol-gold-light);
    --auth-kicker: var(--ol-gold); --auth-input-bg: #0B1220; --auth-input-border: #6A7E9E; --auth-readonly-bg: #18243A;
    --auth-focus: var(--ol-gold); --auth-focus-ring: rgba(212,168,74,.28); --auth-ok: #8EDBB0; --auth-bad: #FFA69E;
    --auth-ghost: var(--ol-gold-light); --auth-badge-bg: rgba(241,212,138,.12); --auth-badge-fg: var(--ol-gold-light);
  }
}
/* Administrator entrance: always deep navy, in light and dark mode. */
body.ol-auth-body.is-admin {
  color-scheme: dark;
  --auth-page: var(--ol-brand-navy-deep);
  --auth-glow: rgba(64,100,166,.42);
  --auth-card: #142849;
  --auth-card-border: rgba(212,168,74,.30);
  --auth-shadow: 0 1px 2px rgba(0,0,0,.3), 0 28px 56px -24px rgba(0,0,0,.65);
  --auth-title: #FBF8F3;
  --auth-text: #EDE7DC;
  --auth-muted: #BCC6D6;
  --auth-label: #EDE7DC;
  --auth-link: var(--ol-gold-light);
  --auth-kicker: var(--ol-gold);
  --auth-input-bg: #0D1B33;
  --auth-input-border: #5D77A3;
  --auth-readonly-bg: #1B3157;
  --auth-focus: var(--ol-gold);
  --auth-focus-ring: rgba(212,168,74,.30);
  --auth-ok: #8EDBB0;
  --auth-bad: #FFA69E;
  --auth-ghost: var(--ol-gold-light);
  --auth-badge-bg: rgba(241,212,138,.12);
  --auth-badge-fg: var(--ol-gold-light);
}

main.ol-auth {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 56px 16px;
  background: radial-gradient(ellipse 150% 65% at 50% 0%, var(--auth-glow), transparent 72%), var(--auth-page);
  color: var(--auth-text);
  font-family: var(--ol-font-body, var(--font-ui));
}
.ol-auth-card {
  width: 100%;
  max-width: 440px;
  min-width: 0;
  background: var(--auth-card);
  border: 1px solid var(--auth-card-border);
  border-radius: 20px;
  box-shadow: var(--auth-shadow);
  padding: 40px 40px 32px;
}
.ol-auth-head { text-align: center; margin-bottom: 28px; }
.ol-auth-head:last-child { margin-bottom: 0; }
.ol-auth-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto 24px;
  color: var(--auth-title);
  text-decoration: none;
  font-family: var(--ol-font-heading, var(--font-display));
  font-size: var(--fs-22);
  font-weight: 600;
}
.ol-auth-logo .brand-logo { height: 44px; max-width: min(220px, 100%); }
.ol-auth-logo .brand-logo-set { max-width: 100%; }
.ol-auth-wordmark { font-family: var(--ol-font-heading, var(--font-display)); font-size: var(--fs-28); font-weight: 600; color: var(--auth-title); }
.ol-auth h1 {
  margin: 0 0 10px;
  font-family: var(--ol-font-heading, var(--font-display));
  font-size: var(--fs-36);
  font-weight: 600;
  line-height: 1.1;
  color: var(--auth-title);
  overflow-wrap: anywhere;
}
.ol-auth .eyebrow { margin: 0 0 8px; color: var(--auth-kicker); font-size: var(--fs-12); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ol-auth .ol-auth-sub { margin: 0; color: var(--auth-muted); font-size: var(--fs-14); line-height: 1.6; }
.ol-auth p { color: inherit; }
.ol-auth .muted, .ol-auth .hint { color: var(--auth-muted); }
.ol-auth b { color: var(--auth-title); }

/* Fields */
.ol-auth .field { margin-bottom: 18px; }
.ol-auth .label { color: var(--auth-label); font-size: var(--fs-14); font-weight: 600; margin-bottom: 8px; }
.ol-auth .input {
  min-height: 48px;
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-input-border);
  border-radius: 12px;
  color: var(--auth-text);
  font-family: var(--ol-font-body, var(--font-ui));
  font-size: var(--fs-16);
}
.ol-auth .input.input-mono { font-family: var(--font-mono); letter-spacing: .08em; }
.ol-auth .input[readonly] { background: var(--auth-readonly-bg); }
.ol-auth .input:focus { outline: none; border-color: var(--auth-focus); box-shadow: 0 0 0 3px var(--auth-focus-ring); }
.ol-auth .input.is-invalid { border-color: var(--auth-bad); }
.ol-auth .error-text { color: var(--auth-bad); }
.ol-auth .field:has(> .check-plain) { margin-bottom: 10px; }
.ol-auth .check-plain { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--auth-text); }  /* 44px touch target */
.ol-auth .check-plain input { width: 18px; height: 18px; margin: 0; accent-color: var(--auth-focus); }
.ol-auth .check-text { color: var(--auth-text); font-size: var(--fs-14); line-height: 1.45; }

/* Human check (OL-AUTH-000160): same markup and script, readable colours. */
.ol-auth .ol-human { border-color: var(--auth-input-border); border-radius: 12px; background: transparent; color: var(--auth-muted); }
.ol-auth .ol-human.is-done { color: var(--auth-ok); border-color: currentColor; }
.ol-auth .ol-human.is-error { color: var(--auth-bad); border-color: currentColor; }
.ol-auth .ol-human.is-done .ol-human-box::after { border-color: var(--auth-card); }

/* Buttons: the brochure gold pill with navy text (7:1), and a quiet
   outline for secondary actions. */
.ol-auth .btn { font-family: var(--ol-font-body, var(--font-ui)); }
.ol-auth .btn-block { width: 100%; justify-content: center; min-height: 48px; font-size: var(--fs-16); font-weight: 600; border-radius: 999px; }
.ol-auth .btn-primary {
  --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--ol-btn-gold-text);
  background: var(--ol-btn-gold);
  border-color: transparent;
  color: var(--ol-btn-gold-text);
  box-shadow: 0 8px 20px -10px rgba(160,122,34,.6);
}
.ol-auth .btn-primary:hover { background: var(--ol-btn-gold-hover); color: var(--ol-btn-gold-text); }
.ol-auth .btn-ghost { --btn-bg: transparent; --btn-bd: var(--auth-ghost); --btn-fg: var(--auth-ghost); background: transparent; border-color: var(--auth-ghost); color: var(--auth-ghost); }
.ol-auth .btn-ghost:hover { background: var(--auth-badge-bg); }
.ol-auth .btn:focus-visible { outline: 3px solid var(--auth-focus); outline-offset: 3px; }
.ol-auth form .btn-block { margin-top: 8px; }

/* Links, footnote, badge */
.ol-auth a:not(.btn):not(.ol-auth-logo) { color: var(--auth-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ol-auth a:not(.btn):not(.ol-auth-logo):hover { text-decoration-thickness: 2px; }
.ol-auth .ol-auth-foot { margin: 24px 0 0; text-align: center; color: var(--auth-muted); font-size: var(--fs-14); }
.ol-auth .ol-auth-sub .badge { margin-top: 4px; }
.ol-auth .badge-neutral { background: var(--auth-badge-bg); color: var(--auth-badge-fg); font-size: var(--fs-12); }

/* Messages on the navy administrator card. */
.ol-auth--admin .alert-danger { background: rgba(255,166,158,.12); border-color: rgba(255,166,158,.45); color: #FFD3CE; }
.ol-auth--admin .alert-success { background: rgba(142,219,176,.12); border-color: rgba(142,219,176,.45); color: #CFF2DD; }
.ol-auth--admin .alert-warn { background: rgba(241,212,138,.12); border-color: rgba(241,212,138,.45); color: #F6E4B4; }

/* Logo: never navy-on-navy. On the administrator card (and in dark mode)
   an uploaded dark-background logo is used; a light-only logo, or the
   sign-in logo, sits on the cream plate used by the phone menu. */
.ol-auth--admin .brand-logo-set.has-dark-variant .brand-logo--light { display: none; }
.ol-auth--admin .brand-logo-set.has-dark-variant .brand-logo--dark { display: block; }
.ol-auth--admin .brand-logo-set .brand-logo--mark,
.ol-auth .brand-logo-set .brand-logo--mark { display: none; }
.ol-auth--admin .brand-logo-set.has-light-variant:not(.has-dark-variant),
.ol-auth--admin .brand-logo--single,
.ol-mode-dark .ol-auth .brand-logo--single {
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--ol-cream);
  box-shadow: 0 0 0 1px rgba(212,168,74,.35);
}
.ol-mode-dark .ol-auth .brand-logo-set.has-light-variant:not(.has-dark-variant) { padding: 8px 14px; border-radius: 14px; }
.ol-auth--admin .brand-logo--single, .ol-mode-dark .ol-auth .brand-logo--single { box-sizing: content-box; }
@media (prefers-color-scheme: dark) {
  .ol-mode-system .ol-auth .brand-logo-set.has-dark-variant .brand-logo--light { display: none; }
  .ol-mode-system .ol-auth .brand-logo-set.has-dark-variant .brand-logo--dark { display: block; }
  .ol-mode-system .ol-auth .brand-logo-set.has-light-variant:not(.has-dark-variant) { padding: 8px 14px; border-radius: 14px; }
  .ol-mode-system .ol-auth .brand-logo--single { padding: 8px 14px; border-radius: 14px; background: var(--ol-cream); box-shadow: 0 0 0 1px rgba(212,168,74,.35); box-sizing: content-box; }
}

/* Phones (360–480px): same card, tighter frame, no sideways scroll. */
@media (max-width: 480px) {
  main.ol-auth { padding: 24px 16px; }
  .ol-auth-card { padding: 28px 24px 24px; border-radius: 18px; }
  .ol-auth-head { margin-bottom: 24px; }
  .ol-auth-logo { margin-bottom: 20px; }
  .ol-auth-logo .brand-logo { height: 40px; max-width: min(200px, 100%); }
  .ol-auth h1 { font-size: var(--fs-28); }
  .ol-auth .ol-auth-foot { margin-top: 20px; }
}
@media (max-width: 380px) {
  .ol-auth-card { padding: 24px 20px 20px; }
}

/* ─── 6. Phone list rows for admin index tables (OL-UI-000114, 1.0.73.109) ──
   Contract: <div class="table-wrap ol-list-wrap"><table class="table ol-list">,
   cells tagged td[data-role="lead|date|title|meta|status|amount|action|select|hide-mobile"].
   Desktop (> 640px): an ordinary table. Phones: one compact row per record in
   the single list card — left column date / title / details, right column
   (96px) status pill above the primary action, no column labels, no
   "Actions" band. tr.ol-list-row--link: the title link covers the row and the
   status sits on the right as a dot + word. Secondary actions: .ol-list-secondary
   (hidden on phones, available on the detail page) or a <details class="ol-list-more">
   "⋯" menu (phones only). oleren-components.js leaves table.ol-list alone. */
.ol-list-more, .ol-phone-only { display: none; }
:root .admin table.ol-list .ol-list-avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ol-avatar-bg, var(--ol-brand-navy)); color: var(--ol-avatar-fg, var(--ol-gold-light)); box-shadow: 0 0 0 1px var(--ol-avatar-ring, transparent); font-size: 13px; font-weight: 700; }
:root .admin table.ol-list .ol-list-mark { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ol-badge-bg); color: var(--ol-badge-fg); font-size: 13px; font-weight: 700; }
:root .admin table.ol-list td[data-role="title"] .ol-list-title { font-weight: 650; color: var(--c-text); }
:root .admin table.ol-list .ol-list-sub { display: block; font-size: var(--fs-12); color: var(--c-text-muted); line-height: 1.45; }
:root .admin table.ol-list .ol-break-any { overflow-wrap: anywhere; }
:root .admin table.ol-list .ol-tech { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--fs-12); color: var(--c-text-faint); overflow-wrap: anywhere; }
:root .admin table.ol-list .ol-list-link { color: inherit; text-decoration: none; }
:root .admin table.ol-list .ol-list-link:hover { color: var(--c-link); text-decoration: underline; }
:root .admin .ol-tone-success { color: var(--c-success-text); }
:root .admin .ol-tone-warning { color: var(--c-warning-text); }
:root .admin .ol-tone-danger { color: var(--c-danger-text); }
:root .admin table.ol-list td[data-role="amount"] { font-variant-numeric: tabular-nums lining-nums; font-weight: 650; white-space: nowrap; }
:root .admin table.ol-list td[data-role="action"] .ol-list-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
:root .admin table.ol-list td[data-role="action"] form { margin: 0; }

@media (max-width: 640px) {
  :root .admin .ol-list-wrap { overflow: visible; border: 0; margin: 0; }
  :root .admin table.ol-list, :root .admin table.ol-list > tbody { display: block; width: 100%; min-width: 0; }
  :root .admin table.ol-list > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :root .admin table.ol-list > tbody > tr {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 0;
    row-gap: 0;
    align-items: start;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--ol-card-divider);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  :root .admin table.ol-list > tbody > tr:last-child { border-bottom: 0; }
  :root .admin table.ol-list > tbody > tr > td {
    display: block;
    grid-column: 2;
    min-width: 0;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    white-space: normal;
    text-align: left;
    overflow-wrap: normal;
    word-break: normal;
    font-size: var(--fs-14);
    line-height: 1.4;
  }
  :root .admin table.ol-list > tbody > tr > td::before { content: none; }
  :root .admin table.ol-list > tbody > tr > td:empty,
  :root .admin table.ol-list > tbody > tr > td[data-role="hide-mobile"],
  :root .admin table.ol-list > tbody > tr > td[data-role="select"],
  :root .admin table.ol-list .ol-hide-mobile,
  :root .admin table.ol-list .ol-list-secondary { display: none !important; }
  :root .admin table.ol-list .nowrap, :root .admin table.ol-list .truncate { white-space: normal; overflow: visible; text-overflow: clip; }
  :root .admin table.ol-list > tbody > tr > td[data-role="lead"] { grid-column: 1; grid-row: 1 / span 8; align-self: center; margin-right: 12px; }
  :root .admin table.ol-list > tbody > tr > td[data-role="date"] { order: -2; font-size: var(--fs-12); color: var(--c-text-muted); font-variant-numeric: tabular-nums; margin-bottom: 3px; }
  :root .admin table.ol-list > tbody > tr > td[data-role="title"] { order: -1; font-size: 15px; font-weight: 650; line-height: 1.35; color: var(--c-text); }
  :root .admin table.ol-list > tbody > tr > td[data-role="title"] :is(b, strong, .strong) { font-weight: 650; }
  :root .admin table.ol-list > tbody > tr > td[data-role="title"] .ol-list-sub { font-weight: 400; margin-top: 2px; }
  :root .admin table.ol-list > tbody > tr > td[data-role="meta"] { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--c-text-muted); }
  :root .admin table.ol-list > tbody > tr > td[data-role="meta"] :is(.small, .xs, .muted, .faint, div, span) { font-size: inherit; color: inherit; }
  :root .admin table.ol-list > tbody > tr > td[data-role="meta"] .badge { font-size: var(--fs-12); padding: 1px 8px; vertical-align: 1px; }
  :root .admin table.ol-list > tbody > tr > td[data-role="meta"] .ol-meta-label { color: var(--c-text-muted); }
  :root .admin table.ol-list > tbody > tr > td[data-role="meta"] .ol-meta-label::after { content: " "; }
  /* Right column */
  :root .admin table.ol-list > tbody > tr > td:is([data-role="status"], [data-role="amount"], [data-role="action"]) { grid-column: 3; margin-left: 12px; justify-self: end; text-align: right; }
  :root .admin table.ol-list > tbody > tr > td[data-role="amount"] { grid-row: 1; font-size: 15px; color: var(--c-text); }
  :root .admin table.ol-list > tbody > tr > td[data-role="status"] { grid-row: 1; }
  :root .admin table.ol-list > tbody > tr:has(> td[data-role="amount"]) > td[data-role="status"] { grid-row: 2; margin-top: 3px; }
  :root .admin table.ol-list > tbody > tr > td[data-role="action"] { grid-row: 2 / span 8; margin-top: 8px; }
  :root .admin table.ol-list > tbody > tr:not(:has(> td[data-role="status"]):not(:has(> td[data-role="amount"]))) > td[data-role="action"] { grid-row: 1 / span 8; margin-top: 0; align-self: center; }
  :root .admin table.ol-list > tbody > tr:has(> td[data-role="amount"]):has(> td[data-role="status"]) > td[data-role="action"] { grid-row: 3 / span 8; }
  /* Status + action rows: fixed 96px column so pills and buttons line up row to row. */
  :root .admin table.ol-list > tbody > tr:has(> td[data-role="action"] :is(a, button, summary)) > td:is([data-role="status"], [data-role="action"]) { width: 96px; justify-self: stretch; }
  :root .admin table.ol-list > tbody > tr > td[data-role="status"] { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  :root .admin table.ol-list > tbody > tr > td[data-role="status"] .badge { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; letter-spacing: 0; text-transform: none; white-space: normal; text-align: center; line-height: 1.2; max-width: 100%; }
  :root .admin table.ol-list > tbody > tr:has(> td[data-role="action"] :is(a, button, summary)) > td[data-role="status"] .badge:first-child { width: 100%; }
  :root .admin table.ol-list > tbody > tr > td[data-role="status"] .ol-status-text { font-size: var(--fs-12); font-weight: 650; }
  /* Actions: one navy pill (gold text) per row, 40px tall. */
  :root .admin table.ol-list > tbody > tr > td[data-role="action"] .ol-list-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  :root .admin table.ol-list > tbody > tr > td[data-role="action"] :is(.btn, summary.btn) {
    display: flex; align-items: center; justify-content: center; width: 100%;
    min-height: 40px; min-width: 40px; padding: 0 14px; border-radius: 999px;
    background: var(--ol-list-btn-bg); color: var(--ol-list-btn-fg); border: 1px solid var(--ol-list-btn-bg);
    font-size: 13px; font-weight: 650; text-decoration: none; box-shadow: none; white-space: nowrap;
  }
  :root .admin table.ol-list > tbody > tr > td[data-role="action"] form { display: block; width: 100%; }
  :root .admin table.ol-list > tbody > tr > td[data-role="action"] .btn svg { color: currentColor; }
  /* "⋯" menu for extra actions (no JavaScript). */
  :root .admin table.ol-list .ol-list-more { display: block; position: relative; align-self: flex-end; }
  :root .admin table.ol-list .ol-list-more > summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; border-radius: 999px; border: 1px solid var(--ol-card-border-strong); color: var(--c-text); font-size: 18px; font-weight: 700; cursor: pointer; }
  :root .admin table.ol-list .ol-list-more > summary::-webkit-details-marker { display: none; }
  :root .admin table.ol-list .ol-list-more[open] > div { position: absolute; right: 0; top: 46px; z-index: 5; display: grid; gap: 6px; min-width: 180px; padding: 8px; border-radius: 14px; border: 1px solid var(--ol-card-border); background: var(--c-surface); box-shadow: var(--ol-card-shadow-hover); }
  :root .admin table.ol-list .ol-list-more[open] > div :is(.btn, button) { width: 100%; min-height: 40px; justify-content: flex-start; background: transparent; color: var(--c-text); border-color: transparent; }
  /* Whole-row links (Users, Software updates, Plugins…): status as dot + word. */
  :root .admin table.ol-list > tbody > tr.ol-list-row--link > td[data-role="status"] { grid-row: 1 / span 8; align-self: center; width: auto; }
  :root .admin table.ol-list > tbody > tr.ol-list-row--link > td[data-role="status"] .badge { background: transparent; padding: 0; min-height: 0; border: 0; gap: 6px; width: auto; }
  :root .admin table.ol-list > tbody > tr.ol-list-row--link > td[data-role="status"] .badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 8px; }
  :root .admin table.ol-list > tbody > tr.ol-list-row--link > td[data-role="status"] .badge + .badge { display: none; }
  :root .admin table.ol-list > tbody > tr.ol-list-row--link .ol-list-link::after { content: ""; position: absolute; inset: 0; }
  :root .admin table.ol-list > tbody > tr.ol-list-row--link:active { background: var(--c-surface-2); }
  /* Avatar / badge in the lead cell. */
  /* Empty row: centred muted text with breathing room. */
  :root .admin table.ol-list > tbody > tr.ol-list-empty { display: block; padding: 0; }
  :root .admin table.ol-list > tbody > tr.ol-list-empty > td { display: block; }
  /* The list card: rows sit flush to the card edge. */
  :root .admin .card:not(.card-flush) > .ol-list-wrap, :root .admin .card:not(.card-flush) > form > .ol-list-wrap { margin-inline: calc(var(--ol-card-pad) * -1); }
  :root .admin .card:not(.card-flush):has(> .ol-list-wrap:last-child) { padding-bottom: 4px; }
  :root .admin .ol-bulk-tools { display: none; }
  :root .admin table.ol-list .ol-phone-only { display: inline; }
  :root .admin table.ol-list div.ol-phone-only { display: block; }
}
@media (min-width: 641px) {
  :root .admin table.ol-list .ol-phone-only { display: none; }
}
:root .admin { --ol-list-btn-bg: var(--ol-brand-navy); --ol-list-btn-fg: var(--ol-gold-light); }
.ol-mode-dark .admin { --ol-list-btn-bg: var(--ol-gold-light); --ol-list-btn-fg: var(--ol-brand-navy-deep); }
@media (prefers-color-scheme: dark) { :root:not(.ol-mode-light) .admin { --ol-list-btn-bg: var(--ol-gold-light); --ol-list-btn-fg: var(--ol-brand-navy-deep); } }

/* Filter chips above lists: pill links, navy + gold when active, with counts. */
.ol-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
:root .admin .ol-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ol-card-border-strong); background: var(--c-surface); color: var(--c-text); font-size: 13px; font-weight: 600; text-decoration: none; }
:root .admin .ol-chip:hover { border-color: var(--c-pdrawer-active-border); color: var(--c-text); }
:root .admin .ol-chip.is-active { background: var(--c-pdrawer-active-bg); border-color: var(--c-pdrawer-active-border); color: var(--c-pdrawer-active-text); }
:root .admin .ol-chip__n { font-variant-numeric: tabular-nums; opacity: .85; }

/* ─── 7. Empty states (OL-UI-000115) ── */
:root .admin .ol-empty { padding: 32px 20px; text-align: center; color: var(--c-text-muted); }
:root .admin .ol-empty > :is(h3, strong, b) { display: block; margin: 0 0 6px; font-family: var(--ol-font-body, var(--font-ui)); font-size: var(--fs-16); font-weight: 650; color: var(--c-text); }
:root .admin .ol-empty > p { margin: 0 auto; max-width: 42ch; font-size: var(--fs-14); line-height: 1.5; color: var(--c-text-muted); }
:root .admin .empty-state, :root .admin .empty-inline, :root .admin .empty { padding: 28px 20px; text-align: center; color: var(--c-text-muted); }
:root .admin td > .empty-state, :root .admin td > .empty-inline { margin: 0; }

/* ─── 8. Stat tiles: label above value, tabular figures, two across on phones (OL-UI-000116) ── */
:root .admin .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
:root .admin .stat-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--ol-card-border); background: var(--ol-card-bg); }
:root .admin .stat-card > span { font-size: var(--fs-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ol-kicker); }
:root .admin .stat-card > strong { font-size: var(--fs-28); line-height: 1.1; font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums lining-nums; }
:root .admin .stat-value { font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 900px) { :root .admin .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 640px) {
  :root .admin .stat-card { padding: 14px; }
  :root .admin .stat-card > strong, :root .admin .card.stat .stat-value { font-size: 26px; }
  :root .admin .grid-4:has(> div > .xs.muted + b) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
:root .admin .ol-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
:root .admin .ol-facts > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
:root .admin .ol-facts > div > span { font-size: var(--fs-12); color: var(--c-text-muted); }
:root .admin .ol-facts > div > b { font-size: var(--fs-18); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 640px) { :root .admin .ol-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ─── 9. One level of card on phones; technical details; no khaki (OL-UI-000117) ── */
@media (max-width: 640px) {
  :root .admin .card .card:not(.stat), :root .admin .card .credits-panel { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
  :root .admin .card .card:not(.stat) + .card:not(.stat) { border-top: 1px solid var(--ol-card-divider); padding-top: 16px; margin-top: 16px; }
  :root .admin .page-intro .lead, :root .admin .page-head .lead { font-size: var(--fs-14); }
  :root .admin .card-head { flex-wrap: wrap; gap: 8px; }
}
:root .admin details.ol-tech-details { margin-top: 12px; }
:root .admin details.ol-tech-details > summary { cursor: pointer; font-size: var(--fs-14); font-weight: 600; color: var(--c-text-muted); }
:root .admin .ol-tech-block { margin: 8px 0 0; padding: 10px 12px; max-height: 220px; overflow: auto; border-radius: 10px; border: 1px solid var(--ol-card-border); background: var(--c-surface-2); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--fs-12); line-height: 1.6; color: var(--c-text); overflow-wrap: anywhere; }
:root .admin .ol-tech-block dt { color: var(--c-text-muted); }
:root .admin .ol-tech-block dd { margin: 0 0 6px; }
/* Admin chrome never takes the Appearance "deep"/"signal" colours (a site's
   own choice, e.g. the test site's khaki #A19B7D / #B8AE7F): light mode re-points the
   primary / accent tokens to the brochure navy and antique gold inside .admin.
   Dark mode already uses its own tokens. */
.ol-mode-light .admin, .ol-mode-system .admin {
  --c-primary: var(--ol-brand-navy);
  --c-primary-hover: var(--ol-brand-navy-deep);
  --c-accent: var(--ol-gold-antique);
  --c-accent-hover: var(--ol-gold-text);
  --deep: var(--ol-brand-navy);
  --signal: var(--ol-gold-antique);
}
@media (prefers-color-scheme: dark) {
  .ol-mode-system .admin { --c-primary: var(--ol-navy-300); --c-primary-hover: #A3C2F1; --c-accent: var(--ol-bronze-300); --c-accent-hover: #E7BC65; --deep: var(--c-primary); --signal: var(--c-accent); }
}
/* Plain .btn (no variant) and the signal badge: brochure secondary style. */
:root .admin .btn:not([class*="btn-"]) { background: transparent; border: 1px solid var(--c-pdrawer-active-border); color: var(--c-pdrawer-active-bg); }
.ol-mode-dark .admin .btn:not([class*="btn-"]) { border-color: var(--ol-gold-light); color: var(--ol-gold-light); }
:root .admin .badge-signal { background: var(--c-info-bg); color: var(--c-info-text); }

/* Plugins on phones: one list card, one compact row per plugin (mark, name,
   version · type, status dot); the row opens the plugin's Manage page, where
   activate / deactivate / settings live. Descriptions stay on that page. */
@media (max-width: 640px) {
  :root .admin .ol-plugins-grid { display: block; border: 1px solid var(--ol-card-border); border-radius: var(--ol-card-radius); background: var(--c-surface); overflow: hidden; }
  :root .admin .ol-plugin { position: relative; padding: 14px 16px; gap: 6px; border: 0; border-radius: 0; box-shadow: none; background: transparent; border-bottom: 1px solid var(--ol-card-divider); }
  :root .admin .ol-plugin:last-child { border-bottom: 0; }
  :root .admin .ol-plugin.is-danger { box-shadow: inset 3px 0 0 var(--c-danger); }
  :root .admin .ol-plugin__head { flex-wrap: nowrap; align-items: center; gap: 12px; }
  :root .admin .ol-plugin__mark { flex-basis: 38px; width: 38px; height: 38px; border-radius: 10px; font-size: 13px; }
  :root .admin .ol-plugin__title { flex: 1 1 auto; }
  :root .admin .ol-plugin__title h3 { font-size: 15px; }
  :root .admin .ol-plugin__meta { font-size: 12.5px; }
  :root .admin .ol-plugin__status { order: 0; margin-left: 0; padding: 0; background: transparent; font-size: var(--fs-12); }
  :root .admin .ol-plugin__desc, :root .admin .ol-plugin__foot { display: none; }
  :root .admin .ol-plugin__issue { margin-left: 50px; }
  :root .admin .ol-plugin__link::after { content: ""; position: absolute; inset: 0; }
  :root .admin .ol-plugins-summary__item { padding: 12px 14px; }
}
/* Kicker text on the cream admin page: 5:1+ (gold-text was 4.47:1 there). */
.ol-mode-light .admin, .ol-mode-system .admin { --ol-kicker: #7A5B10; }
@media (prefers-color-scheme: dark) { .ol-mode-system .admin { --ol-kicker: var(--ol-gold); } }
/* Danger red used as text on dark surfaces reads 2.6:1; use the dark danger text tone. */
.ol-mode-dark .admin :is(.ol-plugins-summary__item.is-danger .ol-plugins-summary__value, .credits-delta.is-negative, .req, .text-danger),
.ol-mode-dark .admin .ol-player-mini-stat small { color: var(--c-danger-text); }
.ol-mode-dark .admin :is(.ol-player-mini-stat, .ol-player-profile-chip) small { color: var(--c-text-muted); }
@media (prefers-color-scheme: dark) {
  .ol-mode-system .admin :is(.ol-plugins-summary__item.is-danger .ol-plugins-summary__value, .credits-delta.is-negative, .req, .text-danger) { color: var(--c-danger-text); }
  .ol-mode-system .admin :is(.ol-player-mini-stat, .ol-player-profile-chip) small { color: var(--c-text-muted); }
}
@media (max-width: 640px) {
  :root .admin .check-row { flex: 1 1 100%; min-width: 0; }
  :root .admin .check-row > span { overflow-wrap: normal; min-width: 0; }
}
/* Version numbers in tiles never break between digits. */
:root .admin .stat-value.ol-stat-version { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 640px) { :root .admin .card.stat .stat-value.ol-stat-version { font-size: var(--fs-18); } }
/* Credits wallet names wrap instead of being cut off with "…". */
:root .admin .credits-wallet-copy strong, :root .admin .credits-wallet-copy small { white-space: normal; overflow: visible; text-overflow: clip; }
/* Bulk onboarding options: one per line on phones. */
:root .admin .row.wrap { flex-wrap: wrap; }
/* Dark mode: player environment cards and positive Credits use dark tokens. */
.ol-mode-dark .admin .ol-player-environment-card { background: var(--c-surface-2); border-color: var(--ol-card-border); }
.ol-mode-dark .admin .credits-delta.is-positive { color: var(--c-success-text); }
@media (prefers-color-scheme: dark) {
  .ol-mode-system .admin .ol-player-environment-card { background: var(--c-surface-2); border-color: var(--ol-card-border); }
  .ol-mode-system .admin .credits-delta.is-positive { color: var(--c-success-text); }
}
/* Auto list rows (tables not yet tagged in their view, set up by oleren-components.js):
   detail cells read "Header: value" inline; actions sit on their own line, wrapped. */
@media (max-width: 640px) {
  :root .admin table.ol-list--auto > tbody > tr > td[data-role="meta"][data-ol-label]::before { content: attr(data-ol-label) ": "; color: var(--c-text-muted); font-weight: 600; }
  :root .admin table.ol-list--auto > tbody > tr > td[data-role="action"] { grid-column: 2 / -1; grid-row: auto; width: auto; margin: 10px 0 0; justify-self: start; text-align: left; }
  :root .admin table.ol-list--auto > tbody > tr > td[data-role="action"] :is(.row, div, nav) { display: flex; flex-wrap: wrap; gap: 8px; }
  :root .admin table.ol-list--auto > tbody > tr > td[data-role="action"] :is(.btn, summary.btn) { width: auto; }
  :root .admin table.ol-list--auto > tbody > tr > td[data-role="action"] form { display: inline-block; width: auto; }
}
/* Number tiles built from plain cards (entitlements, player): two across on phones, label above value. */
@media (max-width: 640px) {
  :root .admin :is(.entitlement-kpis, .ol-player-stat-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  :root .admin :is(.entitlement-kpis, .ol-player-stat-grid) > .card { padding: 14px; margin: 0; min-width: 0; }
  :root .admin :is(.entitlement-kpis, .ol-player-stat-grid) > .card :is(h2, h3) { margin: 4px 0 0; font-family: var(--ol-font-body, var(--font-ui)); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  :root .admin :is(.entitlement-kpis, .ol-player-stat-grid) > .card :is(h2, h3).mono { font-size: var(--fs-14); }
  :root .admin :is(.entitlement-kpis, .ol-player-stat-grid) > .card p.small { font-size: var(--fs-12); }
}
.ol-mode-dark .admin .ol-player-path-preview { background: var(--c-surface-2); border-color: var(--ol-card-border); color: var(--c-text); }
@media (prefers-color-scheme: dark) { .ol-mode-system .admin .ol-player-path-preview { background: var(--c-surface-2); border-color: var(--ol-card-border); color: var(--c-text); } }
@media (min-width: 641px) {
  :root .admin table.ol-list td[data-role="title"] > .ol-list-link { font-weight: 650; }
  :root .admin table.ol-list td[data-role="action"] .ol-list-actions { flex-wrap: nowrap; justify-content: flex-end; }
  :root .admin table.ol-list td[data-role="action"] { white-space: nowrap; }
  :root .admin table.ol-list td[data-role="title"] { min-width: 12rem; }
}

/* ═══════════════════════════════════════════════════════════════
   OL-UI-000131 — "View as" banner in the admin area (Core 1.0.73.112)
   WHAT:  While a Super Administrator is viewing as someone, the admin
          content column starts with a navy brochure band: a gold
          "VIEW AS" label, who is being viewed (name, email, roles),
          "Read-only." or "Changes allowed." and the gold
          "Return to my account" button.
   NOTE:  Not sticky: the sidebar and the admin bar are already sticky at
          the top, so a third sticky band would cover them. Learner pages
          keep the 1.0.73.102 banner (components.css).
   ═══════════════════════════════════════════════════════════════ */
:root .ol-view-as-banner--admin {
  position: relative; top: auto; z-index: 31;
  background: linear-gradient(135deg, #0D1B33 0%, #1A2E52 100%);
  color: #FBF8F3;
  border-bottom: 2px solid #D4A84A;
}
:root .ol-view-as-banner--admin .ol-view-as-banner__inner {
  max-width: none; margin: 0; justify-content: flex-start; align-items: center;
  gap: 8px 16px; padding: 10px max(var(--sp-6, 24px), env(safe-area-inset-right)) 10px max(var(--sp-6, 24px), env(safe-area-inset-left));
  font-family: var(--ol-font-body, var(--font-ui)); font-size: var(--fs-14); line-height: 1.45;
}
:root .ol-view-as-banner--admin .ol-view-as-banner__kicker {
  flex: none; padding: 3px 10px; border-radius: 999px;
  background: rgba(241,212,138,.12); border: 1px solid rgba(241,212,138,.55); color: #F1D48A;
  font-size: var(--fs-12); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
}
:root .ol-view-as-banner--admin .ol-view-as-banner__text { flex: 1 1 18rem; min-width: 0; color: #FBF8F3; overflow-wrap: anywhere; }
:root .ol-view-as-banner--admin .ol-view-as-banner__text > b { color: #FFFFFF; font-weight: 650; }
:root .ol-view-as-banner--admin .ol-view-as-banner__text > b.ol-view-as-banner__mode { color: #F1D48A; font-weight: 700; }
:root .ol-view-as-banner--admin .ol-view-as-banner__form { flex: none; margin: 0 0 0 auto; }
:root .admin .ol-view-as-banner--admin .ol-view-as-banner__button,
:root .ol-view-as-banner--admin .ol-view-as-banner__button {
  min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px;
  background: var(--ol-btn-gold); color: var(--ol-btn-gold-text); font-weight: 700; white-space: nowrap;
}
:root .admin .ol-view-as-banner--admin .ol-view-as-banner__button:hover,
:root .ol-view-as-banner--admin .ol-view-as-banner__button:hover { background: var(--ol-btn-gold-hover); color: var(--ol-btn-gold-text); }
:root .ol-view-as-banner--admin .ol-view-as-banner__button:focus-visible { outline: 2px solid #F1D48A; outline-offset: 2px; }
.ol-mode-dark .ol-view-as-banner--admin { background: linear-gradient(135deg, #172642 0%, #22345A 100%); border-bottom-color: rgba(212,168,74,.75); }
@media (prefers-color-scheme: dark) {
  .ol-mode-system .ol-view-as-banner--admin { background: linear-gradient(135deg, #172642 0%, #22345A 100%); border-bottom-color: rgba(212,168,74,.75); }
}
@media (max-width: 640px) {
  :root .ol-view-as-banner--admin .ol-view-as-banner__inner { padding: 10px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
  :root .ol-view-as-banner--admin .ol-view-as-banner__form { flex: 1 1 100%; margin: 0; }
  :root .admin .ol-view-as-banner--admin .ol-view-as-banner__button,
  :root .ol-view-as-banner--admin .ol-view-as-banner__button { width: 100%; min-height: 44px; }
}