/* ==========================================================================
   AI Maturity Assessment — interface styles

   A clean institutional system: white surfaces on a cool off-white ground,
   a single confident blue for actions and emphasis, and one sans-serif family
   throughout so Arabic and English render with the same weight and rhythm.

   No external fonts or stylesheets — system stacks only.
   ========================================================================== */

:root{
  /* Light theme, taken from the AI Elevate logo: navy type on white with the
     brand green as the accent. The green is used at full strength for fills
     (navy on green reads 7.3:1) but darkened for text, since #68C41C on white
     is only 2.2:1. */
  --bg:#f5f7fb;               /* page ground */
  --bg-2:#eef2f8;
  --surface:#ffffff;          /* cards */
  --surface-solid:#ffffff;
  --surface-2:#f1f5fa;        /* insets, table headers */
  --line:#e3e9f2;
  /* A caution tone for a blocked stage: it is a finding, not an error. */
  --warn-line:#d9a441;
  --warn-light:#fdf6e7;
  --warn-text:#8a6410;
  /* The current-level marker in the AI Elevate result illustration. */
  --gold:#d4a017;
  --gold-deep:#bf921a;
  --gold-text:#8a6410;
  --line-strong:#c9d4e3;

  --navy-brand:#001C56;       /* logo navy, unmodified */
  --text:#0d1b3e;
  --text-2:#41506e;
  --text-3:#5b6a86;

  --green-brand:#68C41C;      /* logo green, unmodified — fills only */
  --primary:#3f7d0e;          /* darkened for text and icons on light */
  --primary-strong:#68c41c;
  --primary-dark:#376d0c;
  --primary-light:#eef8e3;
  --primary-line:#c4e4a3;
  --grad:linear-gradient(135deg,#7fd42b,#5aa817);

  --success:#15803d;
  --success-bg:#f0fdf4;
  --success-line:#bbf7d0;
  --warning:#a35b06;
  --warning-bg:#fffbeb;
  --warning-line:#fde68a;
  --danger:#b91c1c;
  --danger-bg:#fef2f2;
  --danger-line:#fecaca;

  /* Legacy tokens kept mapped so older rules stay coherent. */
  --card:var(--surface);
  --muted:var(--text-3);
  --navy:var(--navy-brand);
  --blue:var(--primary);
  --cyan:var(--primary);
  --green:var(--success);
  --purple:var(--primary);
  --orange:var(--warning);
  --soft:var(--primary-light);
  --paper:var(--bg);
  --emulsion:var(--surface);
  --ink:var(--text);
  --ink-soft:var(--text-2);
  --silver:var(--text-3);
  --frame:var(--line);
  --frame-dark:var(--line-strong);
  --amber:var(--primary);
  --fix:var(--success);
  --fix-soft:var(--success-bg);
  --stop:var(--danger);
  --stop-soft:var(--danger-bg);

  --shadow-sm:0 1px 2px rgba(13,27,62,.04),0 1px 3px rgba(13,27,62,.06);
  --shadow:0 1px 3px rgba(13,27,62,.05),0 6px 16px rgba(13,27,62,.06);
  --shadow-lg:0 4px 12px rgba(13,27,62,.07),0 16px 40px rgba(13,27,62,.09);
  --radius:16px;
  --radius-sm:10px;
  --pill:999px;

  --font:'Cairo','Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --display:var(--font);
  --body:var(--font);
  --transition:all .22s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;color:var(--text);font-family:var(--font);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  /* Faint brand tint in the corners, well under any text. */
  background-image:
    radial-gradient(880px 560px at 82% -10%, rgba(104,196,28,.09), transparent 62%),
    radial-gradient(720px 500px at 4% 2%,  rgba(0,28,86,.05),  transparent 64%);
  background-attachment:fixed;
}
html[dir="rtl"] body{font-family:'Cairo','Segoe UI',Tahoma,Arial,sans-serif}
html[dir="rtl"]{--font:'Cairo','Segoe UI',Tahoma,Arial,sans-serif;--display:var(--font);--mono:'Cairo','Segoe UI',Tahoma,Arial,sans-serif}
html[dir="rtl"] .score-ring strong,html[dir="rtl"] .comparison-grid strong,
html[dir="rtl"] .metric-card strong,html[dir="rtl"] .metric-grid strong,
html[dir="rtl"] .mini-score,html[dir="rtl"] .delta-chip,html[dir="rtl"] .dist-bar span,
html[dir="rtl"] .temp-password,html[dir="rtl"] .ltr-cell{
  font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
/* Signed numbers are LTR runs: bidi would move a leading "+" to the far side. */
.comparison-grid strong,.score-ring strong,.metric-card strong,.metric-grid strong,
.delta-chip,.mini-score,.dim-label b,.move,.card.insight small,.dist-bar span{
  direction:ltr;unicode-bidi:isolate;
}
html[dir="rtl"] .dim-label b,html[dir="rtl"] .move{text-align:end}
html[dir="rtl"] .comparison-grid strong,html[dir="rtl"] .metric-card strong,
html[dir="rtl"] .card.insight small,html[dir="rtl"] .mini-score{text-align:center}

.container{width:min(1180px,calc(100% - 40px));margin:auto}

h1,h2,h3{font-family:var(--font);letter-spacing:-.02em;color:var(--text)}
h1{font-weight:700}
h2,h3{font-weight:650}

/* ---------- Header ---------- */
.site-header{
  /* A minimum rather than a fixed height, so the collapsed menu can expand
     the header instead of being clipped by it. */
  min-height:82px;padding:0 max(20px,calc((100vw - 1180px)/2));
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:inherit}
.brand-logo{display:block;height:46px;width:auto}
.brand-text{display:block;min-width:0}
.brand strong{display:block;font-size:14px;font-weight:650;color:var(--text);line-height:1.3}
.brand-text>span{display:block;color:var(--text-3);font-size:12px;line-height:1.3}
.site-nav{display:flex;align-items:center;gap:18px}
.nav-end{display:flex;align-items:center;gap:8px}

/* ==========================================================================
   Navigation

   Two audiences see two different menus. The burger is a checkbox so the
   collapsed menu opens with CSS alone, and keeps working if the script does
   not load.
   ========================================================================== */
.nav-links{
  display:flex;align-items:center;gap:4px;
  list-style:none;margin:0;padding:0;
}
.nav-link{
  display:inline-block;padding:8px 14px;border-radius:var(--pill);
  font-size:14px;font-weight:600;color:var(--text-2);text-decoration:none;
  transition:var(--transition);white-space:nowrap;
}
.nav-link:hover{background:var(--surface-2);color:var(--text)}
.nav-link.is-current{background:var(--navy-brand);color:#fff;font-weight:700}
/* The instructor is named but has no account page to link to. */
.nav-account.is-admin{cursor:default}
.nav-account.is-admin:hover{background:var(--surface);border-color:var(--line-strong)}

/* Visually hidden but still focusable: `hidden` would drop it out of the tab
   order, leaving the collapsed menu unreachable from the keyboard. */
.nav-toggle{
  position:absolute;width:1px;height:1px;margin:0;padding:0;
  opacity:0;pointer-events:none;
}
.nav-burger{display:none}

@media (max-width:860px){
  /* Below this the menu, the account chip and the language switch stop fitting
     on one line, so the links collapse behind the burger. */
  .nav-burger{
    display:grid;gap:4px;padding:9px;margin-inline-start:auto;
    border:1px solid var(--line-strong);border-radius:var(--radius-sm);
    background:var(--surface);cursor:pointer;
  }
  .nav-burger span{display:block;width:20px;height:2px;background:var(--text-2);border-radius:2px}
  .nav-toggle:focus-visible + .nav-burger{outline:2px solid var(--primary);outline-offset:2px}

  .site-header{flex-wrap:wrap;gap:10px;padding-block:10px}
  /* Brand and burger share the first row; the nav takes the full width below
     it, which is what lets the links stack when opened. */
  .brand{flex:1 1 auto;min-width:0}
  .nav-burger{flex:0 0 auto;margin-inline-start:0;order:1}
  .site-nav.has-menu{order:2;width:100%;flex-direction:column;align-items:stretch;gap:0}
  /* Closed, only the account row shows, and it needs no divider above it. */
  .site-nav.has-menu .nav-end{border-top:none;padding-top:0}
  .nav-toggle:checked ~ .site-nav .nav-end{border-top:1px solid var(--line);padding-top:8px}
  .nav-links{
    display:none;flex-direction:column;align-items:stretch;gap:2px;
    width:100%;padding:8px 0;border-top:1px solid var(--line);
  }
  .nav-toggle:checked ~ .site-nav .nav-links{display:flex}
  .nav-link{padding:11px 14px;border-radius:var(--radius-sm);font-size:15px}
  .nav-end{width:100%;justify-content:flex-end}
}
@media (max-width:420px){
  /* The name is the first thing to go: the avatar still identifies the account. */
  .nav-name{display:none}
}
.lang-switch,.text-link{
  color:var(--text-2);text-decoration:none;font-size:13px;font-weight:600;
  padding:9px 16px;border:1px solid var(--line-strong);border-radius:var(--pill);
  background:var(--surface);transition:var(--transition);
}
.lang-switch:hover,.text-link:hover{background:var(--surface-2);color:var(--text);border-color:var(--text-3)}
.nav-account{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);padding:5px 14px 5px 5px;border:1px solid var(--line-strong);border-radius:var(--pill);background:var(--surface);transition:var(--transition)}
.nav-account:hover{background:var(--surface-2);border-color:var(--text-3)}
.nav-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green-brand);color:var(--navy-brand);font-size:13px;font-weight:800}
.nav-name{font-size:13px;font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Surfaces ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:28px;
}
.glow:after{display:none}

.hero{padding:44px}
.hero h1,.assessment-intro h1,.results-page h1,.admin-top h1{
  font-size:clamp(28px,4vw,44px);line-height:1.15;letter-spacing:-.025em;margin:10px 0;font-weight:700;
}
.lead{font-size:clamp(17px,2vw,21px);font-weight:700;margin:0 0 14px;color:var(--primary)}
.eyebrow,.section-kicker{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--primary);text-transform:uppercase;
}

/* ---------- Maturity ladder ---------- */
.journey{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:30px}
.journey-step{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 10px;
  text-align:center;background:var(--surface-2);position:relative;
}
.journey-step span{
  display:grid;place-items:center;width:24px;height:24px;margin:0 auto 8px;
  border-radius:50%;background:var(--surface);border:1px solid var(--line-strong);
  color:var(--primary);font-size:12px;font-weight:700;
}
.journey-step b{font-size:12.5px;color:var(--text);font-weight:600;line-height:1.3;display:block}

/* ---------- Landing ---------- */
.landing{padding:40px 0 64px}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
.mode-card{
  padding:28px;border-radius:var(--radius);text-decoration:none;color:var(--text);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);
  transition:var(--transition);position:relative;
}
.mode-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--primary-line)}
.mode-number{
  display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--primary-light);border:1px solid var(--primary-line);
  color:var(--primary-dark);font-size:13px;font-weight:700;
}
.mode-card h2{font-size:21px;margin:14px 0 8px}
.mode-card p{color:var(--text-2);margin:0 0 16px;font-size:14.5px}
.mode-card strong{color:var(--primary);font-size:14px;font-weight:650}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.info-grid h3{margin-top:0;font-size:16px}
.info-grid p{color:var(--text-2);margin-bottom:0;font-size:14px}
.admin-link{text-align:center;margin-top:28px;font-size:13.5px}
.admin-link a{color:var(--text-3);text-decoration:none;font-weight:600}
.admin-link a:hover{color:var(--primary)}
.admin-link .sep{color:var(--line-strong);margin:0 10px}
/* A staff entrance: on every page, prominent on none. */
.footer-staff{
  color:var(--text-3);text-decoration:none;font-size:12.5px;
  border-bottom:1px solid transparent;transition:var(--transition);
}
.footer-staff:hover{color:var(--text-2);border-bottom-color:var(--line-strong)}

.site-footer{
  max-width:1180px;margin:44px auto 0;padding:24px 20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  color:var(--text-3);font-size:12.5px;flex-wrap:wrap;
}
.footer-brand img{display:block;opacity:.85}
.footer-legal{white-space:nowrap}

/* ---------- Forms ---------- */
.assessment-page{padding:32px 0 64px}
.assessment-intro{display:grid;grid-template-columns:1fr 280px;align-items:end;gap:28px;margin-bottom:24px}
.assessment-intro h1{font-size:34px}
.assessment-intro>div>p{color:var(--text-2)}
.progress-shell{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.progress-bar{width:0;height:100%;background:var(--green-brand);border-radius:99px;transition:width .3s}
.pill{
  display:inline-flex;align-items:center;padding:6px 14px;border-radius:99px;
  background:var(--primary-light);color:var(--primary);border:1px solid var(--primary-line);
  font-size:12px;font-weight:700;
}
.pill.post{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}
.duration-note{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  padding:8px 16px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);
  color:var(--text-2);font-size:13px;font-weight:600;
}
.duration-icon{font-size:14px;line-height:1;color:var(--primary)}

.form-section{margin-bottom:18px}
.form-section h2{font-size:22px;margin:8px 0}
.form-section>p{color:var(--text-2)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
label>span{display:block;font-weight:600;font-size:13px;color:var(--text-2);margin-bottom:7px}
input,select,textarea{
  width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:12px 14px;font:inherit;font-size:14.5px;
  background:var(--surface);color:var(--text);
  outline:none;transition:border-color .18s,box-shadow .18s;
}
input::placeholder,textarea::placeholder{color:#8492a8}
input:hover,select:hover,textarea:hover{border-color:var(--text-3)}
input:focus,select:focus,textarea:focus{border-color:var(--primary-strong);box-shadow:0 0 0 3px rgba(104,196,28,.22)}
.privacy-note,.small-note{color:var(--text-3);font-size:13px}

.question-list{margin-top:20px}
.question{border:0;margin:0;padding:20px 0;border-top:1px solid var(--line)}
.question:first-child{border-top:0}
.question legend{font-weight:550;width:100%;padding:0;font-size:15.5px;line-height:1.5;color:var(--text)}
.qno{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--primary-light);border:1px solid var(--primary-line);
  color:var(--primary);margin-inline-end:10px;font-size:12px;font-weight:700;
}
.likert{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}
.likert label,.options label{cursor:pointer}
.likert input,.options input{position:absolute;opacity:0;pointer-events:none}
.likert span{
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:11px 8px;
  text-align:center;display:flex;flex-direction:column;min-height:62px;justify-content:center;
  background:var(--surface);font-size:12px;color:var(--text-3);transition:var(--transition);
}
.likert span b{font-size:16px;color:var(--text);font-weight:700;margin-bottom:2px}
.likert label:hover span,.options label:hover span{border-color:var(--primary-strong);background:var(--primary-light)}
.likert input:checked+span,.options input:checked+span{
  border-color:var(--green-brand);background:var(--green-brand);color:var(--navy-brand);
  box-shadow:0 3px 10px rgba(104,196,28,.30);
}
.likert input:checked+span b{color:var(--navy-brand)}
.likert input:focus-visible+span,.options input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.options{display:grid;gap:8px;margin-top:16px}
.options span{display:block;padding:13px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);transition:var(--transition);font-size:14.5px}

.task-box{
  margin:18px 0;padding:20px 22px;border-radius:var(--radius-sm);
  background:var(--primary-light);border:1px solid var(--primary-line);
  border-inline-start:4px solid var(--green-brand);
  color:var(--text);font-weight:600;font-size:15px;line-height:1.65;
}
.textarea-label textarea{margin-top:4px;min-height:240px;resize:vertical;line-height:1.7}
.submit-zone{text-align:center;padding:16px 0}
.submit-zone p{color:var(--text-3);font-size:13px}

.primary-btn,.secondary-btn{
  display:inline-flex;justify-content:center;align-items:center;gap:8px;
  border:0;border-radius:var(--pill);padding:13px 26px;font:inherit;
  font-size:14.5px;font-weight:700;cursor:pointer;text-decoration:none;
  transition:var(--transition);
}
.primary-btn{background:var(--green-brand);color:var(--navy-brand);box-shadow:0 2px 8px rgba(104,196,28,.32)}
.primary-btn:hover{background:#5aa817;transform:translateY(-1px);box-shadow:0 6px 18px rgba(104,196,28,.38)}
.secondary-btn{background:var(--surface);color:var(--text);border:1px solid var(--line-strong)}
.secondary-btn:hover{background:var(--surface-2);border-color:var(--text-3)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.error-card{margin-top:48px;text-align:center}
.error-inline{padding:13px 16px;border-radius:var(--radius-sm);background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-line);margin-bottom:16px;font-size:14px}
.success-inline{padding:13px 16px;border-radius:var(--radius-sm);background:var(--success-bg);color:var(--success);border:1px solid var(--success-line);margin-bottom:16px;font-size:14px}

/* ---------- Results ---------- */
.results-page{padding:32px 0 64px}
.result-hero{display:flex;justify-content:space-between;align-items:center;gap:28px}
.result-hero h1{font-size:32px}
.result-hero p{color:var(--text-3);font-size:14px}
.score-ring{
  width:auto;height:auto;display:block;background:var(--primary-light);
  border:1px solid var(--primary-line);border-radius:var(--radius);
  text-align:center;padding:22px 32px;flex:0 0 auto;position:relative;
}
.score-ring:before{display:none}
.score-ring strong{
  display:block;font-size:54px;line-height:1;font-weight:800;
  letter-spacing:-.03em;color:var(--navy-brand);
}
.score-ring span{display:block;font-size:12px;color:var(--text-3);font-weight:600;margin-top:6px}

.level-card{
  margin-top:18px;display:flex;gap:18px;align-items:center;
  background:var(--navy-brand);border-color:var(--navy-brand);color:#fff;
}
.level-index{
  width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  background:var(--green-brand);color:var(--navy-brand);font-size:20px;font-weight:800;
}
.level-card span{color:#a9bde0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.level-card h2{margin:4px 0 0;font-size:25px;color:#fff}

.comparison{margin-top:18px}
.comparison h2,.card h2{margin-top:0;font-size:19px}
.comparison-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
.comparison-grid>div{
  padding:22px 18px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);text-align:center;
}
.comparison-grid span,.comparison-grid small{display:block;color:var(--text-3);font-size:12px;font-weight:600}
.comparison-grid span{text-transform:uppercase;letter-spacing:.06em}
.comparison-grid strong{font-size:36px;font-weight:700;letter-spacing:-.03em;display:block;margin:8px 0 6px;color:var(--text)}
.comparison-grid small{text-transform:none;letter-spacing:0;font-size:12.5px}
.comparison-grid .delta{min-width:150px;display:flex;flex-direction:column;justify-content:center;background:var(--green-brand);border-color:var(--green-brand)}
.comparison-grid .delta span,.comparison-grid .delta small{color:rgba(0,28,86,.72)}
.comparison-grid .delta strong{color:var(--navy-brand)}
.comparison-grid .delta.negative{background:var(--danger);border-color:var(--danger)}
.comparison-grid .delta.negative span,.comparison-grid .delta.negative small{color:rgba(255,255,255,.85)}
.comparison-grid .delta.negative strong{color:#fff}

.level-move{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  padding:15px 20px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);
}
.level-move strong{font-size:15.5px;font-weight:650}
.level-move span{color:var(--text-3);font-size:13.5px;font-weight:600}
.level-move.up{background:var(--success-bg);border-color:var(--success-line)}
.level-move.up strong{color:var(--success)}
.level-move.down{background:var(--danger-bg);border-color:var(--danger-line)}
.level-move.down strong{color:var(--danger)}

.notice{margin-top:18px;border-inline-start:3px solid var(--primary)}
.notice-ok{border-inline-start:3px solid var(--success);background:var(--success-bg)}
.results-page>.card{margin-top:18px}
.muted-inline{color:var(--text-3);font-weight:500}

.dimension-bars{display:grid;gap:16px}
.dim-label{display:flex;justify-content:space-between;margin-bottom:7px;align-items:baseline;gap:12px}
.dim-label span{font-size:14px;font-weight:550}
.dim-label b{font-size:13.5px;font-weight:700;white-space:nowrap}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green-brand);border-radius:99px;transition:width .4s}
.bar.muted i{background:var(--line-strong)}
.dim-row.not-measured{opacity:.55}
.dim-row.not-measured .dim-label b{font-size:12px;color:var(--text-3);font-weight:600}
.was{color:var(--text-3);font-weight:500;font-size:12.5px}
.delta-chip{
  display:inline-flex;align-items:center;padding:2px 9px;border-radius:99px;
  background:var(--surface-2);color:var(--text-2);font-size:12px;font-weight:700;margin-inline-start:7px;
}
.delta-chip.positive{background:var(--success-bg);color:var(--success)}
.delta-chip.negative{background:var(--danger-bg);color:var(--danger)}

.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.result-grid .card{margin:0}
.result-grid h3{margin-top:0;font-size:16px}
.practical-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.mini-score{
  min-width:86px;border-radius:var(--radius-sm);padding:12px 16px;text-align:center;
  background:var(--primary-light);border:1px solid var(--primary-line);color:var(--primary);
  font-size:22px;font-weight:800;
}
.mini-score span{display:block;font-size:11px;color:var(--text-3);font-weight:600;margin-top:2px}
.rubric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.rubric-item{
  padding:11px 13px;border-radius:var(--radius-sm);border:1px solid var(--line);
  font-size:12.5px;font-weight:550;background:var(--surface-2);color:var(--text-3);
}
.rubric-item span{margin-inline-end:8px;font-weight:700}
.rubric-item.hit{background:var(--success-bg);border-color:var(--success-line);color:var(--success)}
.rubric-item.partial{background:var(--warning-bg);border-color:var(--warning-line);color:var(--warning)}

.action-plan p{color:var(--text-2)}
.action-items{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.action-items>div{display:flex;gap:14px;padding:18px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line)}
.action-items>div>span{
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--green-brand);
  color:var(--navy-brand);display:grid;place-items:center;font-weight:800;font-size:13px;
}
.action-items p{margin:0;font-size:14px}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.metric-grid>div{padding:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.metric-grid span{display:block;color:var(--text-3);font-size:12px;font-weight:600}
.metric-grid strong{font-size:22px;font-weight:700}
.result-actions{display:flex;gap:12px;justify-content:center;margin-top:24px}

/* ---------- Instructor ---------- */
.admin-login{padding:56px 0}
.narrow{max-width:480px;margin:auto}
.admin-login form{display:grid;gap:16px}
.admin-page{padding:32px 0 64px}
.admin-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px;gap:20px}
.admin-top h1{font-size:32px;margin-bottom:0}
.admin-actions{display:flex;align-items:center;gap:12px}
.filter-row{padding:16px 20px;margin-bottom:16px}
.filter-row form{max-width:320px}

.dashboard-metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px}
.metric-card{
  padding:20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.metric-card span{display:block;color:var(--text-3);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.metric-card strong{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:4px;display:block}
.metric-card.accent{background:var(--navy-brand);border-color:var(--navy-brand);color:#fff}
.metric-card.accent span{color:#a9bde0}
.metric-card.accent strong{color:#fff}
.metric-card.warn strong{color:var(--warning)}
.metric-note{margin:0 0 18px;color:var(--text-3);font-size:13px}
.warn-inline{color:var(--warning);font-weight:650}

.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.card.insight{padding:20px}
.card.insight span{display:block;color:var(--text-3);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.card.insight strong{display:block;margin-top:8px;font-size:19px;line-height:1.25;font-weight:650}
.card.insight small{display:block;margin-top:5px;color:var(--primary);font-weight:700;font-size:13px}

.level-dist{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:end;margin-top:20px;min-height:180px}
.dist-col{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.dist-bars{display:flex;gap:5px;align-items:flex-end;height:130px}
.dist-bar{position:relative;flex:1;min-height:3px;border-radius:4px 4px 0 0;transition:height .3s}
.dist-bar.pre{background:var(--line-strong)}
.dist-bar.post{background:var(--green-brand)}
.dist-bar span{position:absolute;top:-18px;inset-inline-start:0;width:100%;text-align:center;font-size:11.5px;font-weight:700;color:var(--text-3)}
.dist-label{margin-top:10px;text-align:center;font-size:11.5px;font-weight:600;color:var(--text-3);line-height:1.3;border-top:1px solid var(--line);padding-top:8px}
.dist-label b{display:block;color:var(--text);font-size:12.5px}
.dist-legend{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:16px;color:var(--text-3);font-size:12.5px;font-weight:600}
.dist-legend .key{width:12px;height:12px;border-radius:3px}
.dist-legend .key.pre{background:var(--line-strong)}
.dist-legend .key.post{background:var(--green-brand)}

.admin-page>.card{margin-top:18px}
.dimension-compare{display:grid;gap:16px}
.dim-compare-row{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:center}
.dim-name{font-weight:600;font-size:14px}
.compare-bars{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.compare-bars span{font-size:12px;color:var(--text-3);font-weight:600}

.table-card{padding:0;overflow:hidden}
.section-head{padding:22px 24px 8px;display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.section-head h2{margin-bottom:2px}
.section-head p{color:var(--text-3);margin-top:0;font-size:13.5px}
.view-toggle{display:inline-flex;gap:2px;padding:3px;background:var(--surface-2);border-radius:var(--pill);flex:0 0 auto}
.view-toggle a{padding:8px 16px;border-radius:var(--pill);font-size:13px;font-weight:600;color:var(--text-3);text-decoration:none;transition:var(--transition)}
.view-toggle a:hover{color:var(--text)}
.view-toggle a.is-active{background:var(--navy-brand);color:#fff;font-weight:700}
.table-scroll{overflow:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:start;padding:13px 16px;border-top:1px solid var(--line);white-space:nowrap;vertical-align:top}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);background:var(--surface-2);font-weight:700}
tbody tr:hover{background:var(--surface-2)}
.empty{text-align:center;color:var(--text-3);padding:34px}
.cell-sub{color:var(--text-3);font-size:12px;font-weight:500}
.move{font-weight:700}
.move.up{color:var(--success)}
.move.down{color:var(--danger)}
.move.flat{color:var(--text-3)}
.status-badge{display:inline-flex;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:650}
.status-badge.ok{background:var(--success-bg);color:var(--success);border:1px solid var(--success-line)}
.status-badge.warn{background:var(--warning-bg);color:var(--warning)}
.status-badge.bad{background:var(--danger-bg);color:var(--danger)}
.tag{display:inline-flex;padding:2px 9px;border-radius:99px;background:var(--surface-2);color:var(--text-3);font-size:10.5px;font-weight:650;margin-inline-start:6px;text-transform:uppercase;letter-spacing:.03em}
td a{color:var(--primary);text-decoration:none;font-weight:600}
td a:hover{text-decoration:underline}

.review-page{padding:32px 0 64px}
.back-row{margin-bottom:16px}
.back-row a{color:var(--text-3);text-decoration:none;font-size:13.5px;font-weight:600}
.back-row a:hover{color:var(--primary)}
.review-page>.card{margin-top:16px}
.review-summary{display:flex;justify-content:space-between;align-items:center;gap:22px}
.review-summary h1{margin:0;font-size:26px}
.mini-score.big{min-width:116px;font-size:28px;padding:16px}
.prompt-box{padding:20px 22px;background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-sm);white-space:normal;line-height:1.85;font-size:14.5px}
.override-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:14px}
.contact-line{margin-top:.4rem;font-size:.87rem;color:var(--text-3)}
.contact-line a{unicode-bidi:isolate;color:var(--primary);text-decoration:none;font-weight:600}
.ltr-cell{direction:ltr;unicode-bidi:isolate;text-align:start;white-space:nowrap}

.baseline-check{margin-bottom:20px}
.baseline-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:14px}
.baseline-form label{flex:1 1 260px;margin:0}

/* ---------- Guided steps ---------- */
.step-tabs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 20px;padding:6px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.step-tab{
  display:flex;align-items:center;gap:10px;min-width:0;padding:12px 14px;
  border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-3);
  font:inherit;font-size:13.5px;font-weight:600;text-align:start;cursor:pointer;transition:.15s;
}
.step-tab:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
.step-tab:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.step-tab-no{
  flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--surface-2);color:var(--text-3);font-size:12px;font-weight:700;transition:var(--transition);
}
.step-tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step-tab.is-active{background:var(--navy-brand);color:#fff}
.step-tab.is-active .step-tab-no{background:rgba(255,255,255,.20);color:#fff}
.step-tab.is-done{color:var(--text)}
.step-tab.is-done .step-tab-no{background:var(--success);color:#fff;font-size:0}
.step-tab.is-done .step-tab-no::after{content:'✓';font-size:12px;line-height:1}
.step-tab.is-locked,.step-tab:disabled{opacity:.45;cursor:not-allowed}

.step-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px;padding:18px 0 4px}
.step-nav [hidden]{display:none}
.step-nav #stepNext,.step-nav #stepSubmit{margin-inline-start:auto}
.nav-arrow{font-size:15px;line-height:1}
.step-status{flex:1 1 220px;min-width:0;color:var(--danger);font-size:13.5px;font-weight:600}
.submit-zone [hidden]{display:none}
.step-tabs.is-jsonly,.step-nav.is-jsonly{display:none}

.question.needs-answer{background:var(--danger-bg);border-inline-start:3px solid var(--danger);border-radius:var(--radius-sm);padding-inline-start:14px}
.question.needs-answer legend{color:var(--danger)}
label.needs-answer input,label.needs-answer textarea{border-color:var(--danger)}
label.needs-answer>span{color:var(--danger)}

/* ---------- Accounts ---------- */
.auth-page{padding:52px 0 72px}
.auth-card{padding:36px}
.auth-card h1{font-size:28px;margin:10px 0}
.auth-intro{color:var(--text-2);margin-bottom:24px;font-size:14.5px}
.auth-form{display:grid;gap:16px}
.auth-form.wide{gap:20px}
.auth-form .field-grid{margin-top:0}
.auth-form button{margin-top:4px;justify-self:start}
.auth-form.wide button{margin-top:8px}
.field-hint{display:block;margin-top:5px;color:var(--text-3);font-size:12px}
.auth-alt{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--text-3);font-size:14px}
.auth-alt a{color:var(--primary);font-weight:650;text-decoration:none}
.auth-alt a:hover{text-decoration:underline}

.auth-gate{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;margin:22px 0;background:var(--primary-light);border-color:var(--primary-line)}
.auth-gate h2{margin:0 0 6px;font-size:20px}
.auth-gate p{margin:0;color:var(--text-2);max-width:60ch;font-size:14.5px}
.auth-gate-actions{display:flex;gap:10px;flex-wrap:wrap}

.identity-block{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 24px;padding:0}
.identity-block>div{padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius-sm)}
.identity-block dt{margin:0 0 4px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.identity-block dd{margin:0;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis}

.account-page{padding:32px 0 64px}
.account-page>.card{margin-top:18px}
.account-head{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-top:0}
.account-head h1{margin:6px 0 4px;font-size:27px}
.account-page .success-inline,.account-page .error-inline{margin-top:18px}

.account-state{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.account-state strong{display:block;margin-top:4px;font-size:15px}
.account-state .small-note{margin:6px 0 0;max-width:52ch}
.temp-password{
  margin:12px 0 0;padding:16px 20px;background:var(--navy-brand);color:#fff;
  border:1px solid var(--navy-brand);border-radius:var(--radius-sm);
  font-family:ui-monospace,Consolas,monospace;font-size:24px;font-weight:700;
  letter-spacing:5px;text-align:center;user-select:all;
}
.change-required{border-inline-start:3px solid var(--danger)}
.change-required strong{display:block;margin-bottom:4px}
.change-required p{margin:0}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .dashboard-metrics{grid-template-columns:repeat(3,1fr)}
  .insight-grid{grid-template-columns:1fr}
  .rubric-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .journey{grid-template-columns:repeat(3,1fr)}
  .info-grid{grid-template-columns:1fr}
  .assessment-intro{grid-template-columns:1fr}
  .field-grid{grid-template-columns:1fr}
  .dim-compare-row{grid-template-columns:1fr}
  .result-grid{grid-template-columns:1fr}
  .level-dist{grid-template-columns:repeat(3,1fr);row-gap:24px}
  .step-tabs{grid-template-columns:repeat(2,1fr)}
  .identity-block{grid-template-columns:1fr}
}
@media(max-width:640px){
  .container{width:min(100% - 24px,1180px)}
  /* A minimum, not a fixed height: the collapsed menu expands the header. */
  .site-header{min-height:60px;height:auto;padding:10px 14px}
  .brand span{display:none}
  .landing{padding-top:24px}
  .hero{padding:26px}
  .hero h1{font-size:29px}
  .journey{grid-template-columns:repeat(2,1fr)}
  .mode-grid{grid-template-columns:1fr}
  .card{padding:20px}
  .assessment-intro h1{font-size:26px}
  .likert{grid-template-columns:1fr;gap:6px}
  .likert span{min-height:auto;flex-direction:row;gap:10px;justify-content:flex-start;text-align:start}
  .likert span b{margin-bottom:0}
  .result-hero{flex-direction:column;align-items:stretch;gap:18px}
  .score-ring{text-align:center}
  .comparison-grid{grid-template-columns:1fr}
  .comparison-grid .delta{min-width:0}
  .rubric-grid{grid-template-columns:1fr}
  .action-items{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:1fr}
  .dashboard-metrics{grid-template-columns:repeat(2,1fr)}
  .admin-top{flex-direction:column;align-items:flex-start;gap:14px}
  .admin-actions{flex-wrap:wrap}
  .compare-bars{grid-template-columns:1fr}
  .override-form{grid-template-columns:1fr}
  .site-footer{flex-direction:column;gap:5px}
  .result-actions{flex-direction:column}
  .result-actions a{width:100%}
  .level-dist{grid-template-columns:repeat(2,1fr)}
  .step-tabs{grid-template-columns:repeat(4,1fr);gap:3px;padding:4px}
  .step-tab{flex-direction:column;gap:6px;padding:10px 4px;text-align:center}
  .step-tab-label{font-size:10.5px;white-space:normal;line-height:1.25}
  .step-nav{gap:10px}
  .step-nav .primary-btn,.step-nav .secondary-btn{flex:1 1 auto;justify-content:center}
  .step-status{flex:1 1 100%;order:3;text-align:center}
  .section-head{flex-direction:column;align-items:flex-start;gap:12px}
  .auth-gate{flex-direction:column;align-items:flex-start}
  .account-head{flex-direction:column;align-items:flex-start}
  .nav-name{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Brand panel across the card's head: the logo reversed out on brand navy. */
.auth-card{padding:0;overflow:hidden}
.auth-logo{display:block;margin:0;padding:26px 30px;background:var(--navy-brand)}
.auth-logo img{display:block;width:min(260px,100%);height:auto}
.auth-body{padding:30px 34px 34px}
.auth-body .eyebrow{margin-top:2px}

/* ---------- One-time sign-in codes ---------- */
.otp-input{
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:30px;font-weight:700;letter-spacing:.42em;text-align:center;
  padding:14px 12px;text-indent:.42em;   /* centres the tracked digits */
}
.otp-actions{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.inline-form{display:inline}
.link-btn{
  background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:650;
  color:var(--primary);cursor:pointer;text-decoration:none;
}
.link-btn:hover{text-decoration:underline}
.otp-actions .sep{color:var(--line-strong);margin:0 6px}

/* ---------- Item bank presentation ---------- */
.domain-heading{
  margin:26px 0 4px;padding-top:18px;border-top:2px solid var(--primary-line);
  font-size:14px;font-weight:700;color:var(--primary-dark);
  text-transform:uppercase;letter-spacing:.06em;
}
.question-list > .domain-heading:first-child{margin-top:6px;padding-top:0;border-top:0}
/* Behaviour anchors are full sentences, so they stack rather than sit in a row. */
.anchor-list{display:grid;gap:7px;margin-top:14px}
.anchor-list span{
  display:block;padding:11px 14px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--surface);
  transition:var(--transition);font-size:14px;
}
.anchor-list label{cursor:pointer}
.anchor-list input{position:absolute;opacity:0;pointer-events:none}
.anchor-list label:hover span{border-color:var(--primary-strong);background:var(--primary-light)}
.anchor-list input:checked+span{
  border-color:var(--green-brand);background:var(--green-brand);
  color:var(--navy-brand);font-weight:600;
}
.anchor-list input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.scenario-title{display:block;margin-bottom:4px;color:var(--primary-dark);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.task-domain{margin:0 0 12px;color:var(--text-3);font-size:13px;font-weight:600}
.rubric-heading{margin:20px 0 8px;font-size:14px;font-weight:700;color:var(--text-2)}
.rubric-text{margin:0;color:var(--text-2);font-size:14px;line-height:1.7}

/* ---------- Assessment tiers ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}
.tier-card{
  padding:26px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.tier-card.is-required{border-color:var(--primary-line);box-shadow:0 0 0 3px var(--primary-light)}
.tier-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.tier-badge{
  display:inline-flex;padding:4px 11px;border-radius:99px;background:var(--green-brand);
  color:var(--navy-brand);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.tier-badge.optional{background:var(--surface-2);color:var(--text-3)}
.tier-card h2{font-size:20px;margin:0 0 8px}
.tier-time{margin:0 0 10px;color:var(--primary);font-size:13.5px;font-weight:700}
.tier-card p{color:var(--text-2);font-size:14.5px;margin:0 0 18px}
.tier-actions{display:flex;gap:9px;margin-top:auto;flex-wrap:wrap}
.tier-actions .primary-btn,.tier-actions .secondary-btn{padding:10px 18px;font-size:13.5px;flex:1 1 auto;justify-content:center}
.tier-pill{background:var(--surface-2);color:var(--text-2);border-color:var(--line-strong)}
.task-block{padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}
.task-block:first-of-type{padding-top:0;margin-top:0;border-top:0}
.task-number{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--primary-light);color:var(--primary-dark);font-size:12px;font-weight:700;
  margin-inline-end:7px;
}
@media(max-width:900px){.tier-grid{grid-template-columns:1fr}}
.estimate-note{border-inline-start:3px solid var(--warning)}
.estimate-note .secondary-btn{margin-top:6px}
.mixed-tier{margin:10px 0 0;color:var(--warning)}

/* ---------- Level result ---------- */
.level-result{margin-top:18px}
.level-result-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:24px}
.level-badge{
  flex:0 0 auto;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--navy-brand);color:#fff;font-size:28px;font-weight:800;
}
.level-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3)}
.level-result h2{margin:4px 0 6px;font-size:30px;letter-spacing:-.02em}
.level-does{margin:0;color:var(--text-2);font-size:15px}

/* ==========================================================================
   The maturity curve

   The supplied AI Elevate artwork carries the six levels; the participant's
   own level is pinned onto it. The pin is positioned in percentages of the
   image box, from column anchors measured off the artwork, so it stays on its
   column at every size without needing script.
   ========================================================================== */
.curve-figure{margin-top:0}
.curve-art{
  margin:18px 0 0;line-height:0;
  /* Headroom so the pin over the tallest columns, which sit close to the top
     of the artwork, is never clipped at small sizes. */
  padding-top:clamp(26px,3.2vw,44px);
}
/* Wraps the image exactly, so the pin's percentage anchors — which are
   fractions of the artwork — resolve against the artwork and not the padding. */
.curve-art-box{position:relative;line-height:0}
.curve-art picture{display:block}
.curve-art img{
  display:block;width:100%;height:auto;border-radius:var(--radius-sm);
  background:var(--surface);
}

.curve-pin{
  position:absolute;left:var(--pin-x);top:var(--pin-y);
  transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;
  /* Lift the bubble clear of the column top the anchor sits on. */
  padding-bottom:0;pointer-events:none;
}
.pin-bubble{
  display:grid;place-items:center;gap:1px;
  width:clamp(52px,6.4vw,84px);height:clamp(52px,6.4vw,84px);
  padding:5px;border-radius:50%;
  background:linear-gradient(160deg,#fffdf4,#f7e2ac);
  border:3px solid var(--gold);
  box-shadow:0 6px 20px rgba(191,146,26,.42);
}
.pin-label{
  font-size:clamp(6.5px,.62vw,8.5px);font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold-text);text-align:center;
  line-height:1.15;overflow-wrap:anywhere;
}
.pin-no{
  font-size:clamp(16px,1.85vw,26px);font-weight:800;line-height:1;
  color:var(--gold-deep);
}
.pin-stem{
  width:2px;height:clamp(14px,2vw,26px);
  background:var(--gold);opacity:.9;
}
/* Arabic is not an uppercase script; the transform only adds artefacts. */
[dir="rtl"] .pin-label{text-transform:none;letter-spacing:0;font-size:clamp(7.5px,.72vw,10px)}

/* A level withheld by the safety gate is not a level held. */
.curve-pin.is-gated .pin-bubble{
  background:linear-gradient(160deg,#fff5f3,#f7cfc8);
  border-color:#c0392b;box-shadow:0 6px 20px rgba(192,57,43,.34);
}
.curve-pin.is-gated .pin-label,
.curve-pin.is-gated .pin-no{color:#a5281a}
.curve-pin.is-gated .pin-stem{background:#c0392b}

@media (prefers-reduced-motion:no-preference){
  .curve-pin{animation:pin-in .5s ease-out both}
}
@keyframes pin-in{
  from{opacity:0;transform:translate(-50%,-100%) translateY(-10px)}
  to{opacity:1;transform:translate(-50%,-100%) translateY(0)}
}

/* The per-stage scores the flat artwork cannot carry. */
.stage-scores{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  list-style:none;margin:20px 0 20px;padding:0;
}
.stage-score{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 6px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface-2);text-align:center;
}
.stage-no{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line-strong);
  color:var(--text-3);font-size:11px;font-weight:800;
}
.stage-name{font-size:11.5px;font-weight:700;color:var(--text-2);line-height:1.25}
.stage-pct{font-size:12.5px;font-weight:800;color:var(--text);unicode-bidi:isolate}
.stage-target{display:block;font-size:10.5px;font-weight:500;color:var(--text-3)}
.stage-untested{font-size:10.5px;font-weight:600;color:var(--text-3)}
.stage-flag{
  font-size:9px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  line-height:1.2;
}

.stage-score.is-passed{background:var(--primary-light);border-color:var(--primary-line)}
.stage-score.is-passed .stage-no{background:var(--green-brand);border-color:var(--green-brand);color:var(--navy-brand)}
.stage-score.is-passed .stage-name,
.stage-score.is-passed .stage-pct{color:var(--primary-dark)}

.stage-score.is-current{
  background:linear-gradient(180deg,#fffdf6,#fdf3dd);
  border-color:var(--gold);box-shadow:0 2px 10px rgba(191,146,26,.18);
}
.stage-score.is-current .stage-no{background:var(--gold);border-color:var(--gold);color:#fff}
.stage-score.is-current .stage-name,
.stage-score.is-current .stage-pct{color:var(--gold-text)}

.stage-score.is-blocked{
  border-color:var(--warn-line);background:var(--warn-light);border-style:dashed;
}
.stage-score.is-blocked .stage-no{border-color:var(--warn-line);color:var(--warn-text)}
.stage-score.is-blocked .stage-name,
.stage-score.is-blocked .stage-pct,
.stage-score.is-blocked .stage-flag{color:var(--warn-text)}

.stage-score.is-gated{
  border-color:#c0392b;background:#fdf0ee;border-style:dashed;
}
.stage-score.is-gated .stage-no{border-color:#c0392b;color:#a5281a}
.stage-score.is-gated .stage-name,
.stage-score.is-gated .stage-pct,
.stage-score.is-gated .stage-flag{color:#a5281a}

@media (max-width:640px){
  /* Six columns of scores stop being legible on a phone; two rows of three
     keep the name and the number readable. */
  .stage-scores{grid-template-columns:repeat(3,1fr)}
}

/* A visitor is told what the assessment is and how the before/after works,
   rather than being shown six buttons that all lead to a login screen. */
.section-lead{
  margin:26px 0 14px;font-size:15px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3);
}
.what-next{margin-top:22px}
.what-next h2{margin:0 0 8px;font-size:21px}
.what-next-lede{margin:0 0 20px;color:var(--text-2);font-size:15.5px;line-height:1.65}
.what-next-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;
  list-style:none;margin:0;padding:0;counter-reset:none;
}
.what-next-steps li{
  display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;
  padding:14px 16px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line);
}
.wn-no{
  grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--green-brand);color:var(--navy-brand);
  font-size:14px;font-weight:800;
}
.what-next-steps b{font-size:15px;color:var(--text);line-height:1.3}
.what-next-steps span:not(.wn-no){color:var(--text-2);font-size:13.5px;line-height:1.5}

/* Seat counts in the instructor's table. Colour separates a course that is
   simply still filling from one that is running out of time to fill. */
.assess-halves{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 16px 14px;margin:0 0 14px;
}
.assess-halves legend{
  padding:0 6px;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3);
}
[dir="rtl"] .assess-halves legend{text-transform:none;letter-spacing:0;font-size:13px}
.assess-halves .checkbox-label{margin:4px 0}

.seats-cell strong{font-size:15px}
.waitlist-link{display:block;margin-top:2px;text-decoration:underline}
.waitlist-link:hover{color:var(--primary-dark)}
/* Two small actions per row, side by side, without a form's block layout. */
.inline-form{display:inline;margin:0}
.waitlist-actions{white-space:nowrap}
.waitlist-actions .text-link{
  background:none;border:0;padding:0 6px;cursor:pointer;
  color:var(--primary-dark);font-weight:600;font-size:13px;
}
.waitlist-actions .text-link.is-danger{color:#a5281a}
.waitlist-actions .text-link:hover{text-decoration:underline}
.seat-flag{
  display:inline-block;margin-inline-start:6px;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:800;white-space:nowrap;
}
.seat-flag.is-full{background:var(--surface-2);color:var(--text-3);border:1px solid var(--line-strong)}
.seat-flag.is-nearly{background:var(--warn-light);color:var(--warn-text);border:1px solid var(--warn-line)}
.seat-flag.is-waiting{background:var(--surface-2);color:var(--text-2);border:1px solid var(--line-strong)}
.seat-flag.is-low{background:#fdf0ee;color:#a5281a;border:1px solid #e8b4ac}

/* ==========================================================================
   Course detail

   The poster is shown whole rather than cropped: on this page it is the
   content, not a thumbnail, and a flyer that loses its title to a crop tells
   the visitor less than no image would.
   ========================================================================== */
.course-page{max-width:920px}
.course-detail{padding:0;overflow:hidden}
.detail-poster{margin:0;line-height:0;background:var(--surface-2)}
.detail-poster img{display:block;width:100%;height:auto}
.detail-body{padding:26px 28px 28px}
.detail-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:18px;flex-wrap:wrap;margin-bottom:18px;
}
.detail-head h1{margin:4px 0 0;font-size:26px;line-height:1.35;unicode-bidi:isolate;overflow-wrap:anywhere}
.detail-kicker{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--primary-dark);
}
[dir="rtl"] .detail-kicker{text-transform:none;letter-spacing:0;font-size:13px}

.status-open{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;
  background:var(--primary-light);color:var(--primary-dark);
  border:1px solid var(--primary-line);
  font-weight:700;font-size:12.5px;white-space:nowrap;
}
.status-open:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green-brand)}

/* An unverified account is one step from being blocked, so the notice sits
   above the page rather than inside it. */
.verify-banner{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:11px 20px;background:var(--warn-light);border-bottom:1px solid var(--warn-line);
  color:var(--warn-text);font-size:14px;font-weight:600;
}
.verify-banner a{
  color:var(--warn-text);font-weight:800;text-decoration:underline;white-space:nowrap;
}
.verify-banner a:hover{color:var(--text)}

.code-input{
  font-size:26px;letter-spacing:.32em;text-align:center;font-weight:700;
}
.resend-form{margin:12px 0 0;text-align:center}
.resend-form .text-link{background:none;border:0;cursor:pointer;
  color:var(--primary-dark);font-size:13.5px;text-decoration:underline}

.status-nearly{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;
  background:var(--warn-light);color:var(--warn-text);border:1px solid var(--warn-line);
  font-weight:700;font-size:12.5px;white-space:nowrap;
}
.status-nearly:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--warn-line)}
.status-pending{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;
  background:var(--surface-2);color:var(--text-2);border:1px dashed var(--line-strong);
  font-weight:700;font-size:12.5px;white-space:nowrap;
}
.status-pending:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--text-3)}

/* The course still gathering its minimum: stated plainly before the button. */
.detail-pending{
  margin:0 0 22px;padding:18px 20px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px dashed var(--line-strong);
}
.detail-pending h2{margin:0 0 6px;font-size:17px;color:var(--text)}
.detail-pending p{margin:0 0 6px;color:var(--text-2);font-size:14.5px;line-height:1.65}
.detail-pending-note{color:var(--text-3)!important;font-size:13.5px!important;margin-bottom:0!important}

.status-closed{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;
  background:var(--surface-2);color:var(--text-3);border:1px solid var(--line-strong);
  font-weight:700;font-size:12.5px;white-space:nowrap;
}
.status-closed:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--text-3)}

.detail-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;
  margin:0 0 20px;padding:0;
}
.detail-facts div{
  padding:12px 15px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line);
}
.detail-facts dt{
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:3px;
}
[dir="rtl"] .detail-facts dt{text-transform:none;letter-spacing:0;font-size:12.5px}
.detail-facts dd{margin:0;font-size:15px;font-weight:600;color:var(--text);unicode-bidi:isolate}

.detail-notes{margin:0 0 20px;color:var(--text-2);font-size:15px;line-height:1.7}

.detail-assessment{
  margin:0 0 22px;padding:18px 20px;border-radius:var(--radius-sm);
  background:var(--primary-light);border:1px solid var(--primary-line);
}
.detail-assessment h2{margin:0 0 6px;font-size:17px;color:var(--primary-dark)}
.detail-assessment p{margin:0 0 6px;color:var(--text);font-size:14.5px;line-height:1.65}
.detail-assessment-note{color:var(--text-2)!important;font-size:13.5px!important;margin-bottom:0!important}

/* What registering will cost, shown before any details are entered. */
.reg-price{
  margin:0 0 16px;padding:14px 16px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line);
}
.reg-price-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:4px 0;font-size:14.5px;color:var(--text-2);
}
.reg-price-row strong{color:var(--text);unicode-bidi:isolate}
.reg-price-row.is-discount{color:var(--primary-dark)}
.reg-price-row.is-discount strong{color:var(--primary-dark)}
.reg-price-row.is-discount code{
  font-size:12px;padding:1px 6px;border-radius:4px;
  background:var(--primary-light);color:var(--primary-dark);
}
.reg-price-row.is-total{
  margin-top:6px;padding-top:10px;border-top:1px solid var(--line);
  font-weight:700;color:var(--text);
}
.reg-price-row.is-total strong{font-size:19px}
.reg-price-note{margin:8px 0 0;font-size:12.5px;color:var(--text-3);line-height:1.5}

.detail-price{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 16px;padding:14px 18px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line);
}
.detail-price strong{font-size:26px;color:var(--text);unicode-bidi:isolate}
.detail-price .price-free{color:var(--primary-dark)}
.detail-price .price-was{
  font-size:17px;color:var(--text-3);font-weight:500;unicode-bidi:isolate;
}
.detail-price .price-tax{font-size:13px;color:var(--text-3)}

.detail-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.detail-enrolled{color:var(--primary-dark);font-size:14px;font-weight:600}
.detail-closed-note{margin:0;color:var(--text-2);font-size:14.5px}

@media (max-width:600px){
  .detail-body{padding:20px 18px 22px}
  .detail-head h1{font-size:22px}
  .detail-cta .primary-btn,.detail-cta .secondary-btn{width:100%;text-align:center}
}

/* ==========================================================================
   Course posters

   The poster is the course's own artwork, so it is shown whole rather than
   cropped to a fixed ratio: a flyer that loses its title to a crop is worse
   than a row of slightly uneven cards.
   ========================================================================== */
.course-posters{margin:26px 0}
.posters-heading{
  margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3);
}
.poster-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;
}
/* A single course gets a wider card rather than one lonely column. */
.poster-grid.is-single{grid-template-columns:minmax(0,420px)}

.poster-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.poster-image{display:block;line-height:0;background:var(--surface-2);overflow:hidden}
.poster-image img{
  display:block;width:100%;
  /* A portrait flyer would otherwise run the length of the page. A fixed
     height gives object-fit something to crop against, anchored to the top
     where a poster's title and artwork live. */
  height:300px;object-fit:cover;object-position:top center;
  transition:transform .35s ease;
}
.poster-image:hover img{transform:scale(1.02)}
.poster-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.poster-body h3{
  margin:0;font-size:17px;line-height:1.4;color:var(--text);
  /* Course names often mix Arabic and Latin; isolation keeps each run in its
     own direction instead of reordering across the two. */
  unicode-bidi:isolate;overflow-wrap:anywhere;
}
.poster-meta{margin:0;display:flex;flex-wrap:wrap;gap:12px;color:var(--text-2);font-size:13.5px}
/* A Latin date inside an RTL line reorders its leading number to the end.
   The element carries dir="ltr"; isolation keeps that from leaking outward. */
.poster-when,.course-chosen-when{unicode-bidi:isolate}
/* Course dates in the instructor tables read left-to-right too. */
.course-banner-meta span[dir="ltr"],
td[dir="ltr"]{unicode-bidi:isolate}
.poster-instructor{margin:0;color:var(--text-3);font-size:13px}
.poster-open{
  display:inline-flex;align-items:center;padding:3px 11px;border-radius:99px;
  background:var(--primary-light);border:1px solid var(--primary-line);
  color:var(--primary-dark);font-size:12.5px;font-weight:700;
}
.poster-cta{margin-top:auto;padding-top:11px;padding-bottom:11px;text-align:center;font-size:14px}

@media (prefers-reduced-motion:reduce){
  .poster-image img{transition:none}
  .poster-image:hover img{transform:none}
}

/* The instructor's side: current poster, replace, remove. */
.poster-field{margin-top:16px}
.poster-current{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  margin-bottom:14px;padding:12px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line);
}
.poster-current img{
  width:120px;height:auto;border-radius:var(--radius-sm);display:block;
  border:1px solid var(--line);
}
.poster-current .checkbox-label{margin:0}
.poster-field input[type="file"]{
  width:100%;padding:9px;font-size:13.5px;
  border:1px dashed var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--text-2);cursor:pointer;
}
.poster-field input[type="file"]:hover{border-color:var(--primary);background:var(--surface)}
.poster-cell img{width:54px;height:auto;border-radius:4px;display:block;border:1px solid var(--line)}

/* ==========================================================================
   Courses
   ========================================================================== */
.course-form .field-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
  margin-bottom:14px;
}
.course-form textarea{width:100%}
.checkbox-label{
  display:flex;align-items:center;gap:9px;margin:14px 0 4px;
  font-weight:600;color:var(--text);cursor:pointer;
}
.checkbox-label input{width:17px;height:17px;margin:0;accent-color:var(--primary)}
.form-actions{display:flex;align-items:center;gap:16px;margin-top:18px}

/* The shareable registration link: wide enough to read, selectable on focus. */
.link-field{
  width:min(280px,100%);padding:6px 9px;font-size:12px;font-family:var(--mono,monospace);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--text-2);
}
.link-field:focus{border-color:var(--primary);background:var(--surface);outline:none}

/* A course's enrolment status is its own state, not a pre/post label. */
.pill.is-open{background:var(--primary-light);color:var(--primary-dark);border-color:var(--primary-line)}
.pill.is-closed{background:var(--surface-2);color:var(--text-3);border-color:var(--line-strong)}

.empty-note{margin:0;color:var(--text-3);font-size:14.5px;line-height:1.6}

/* The course being viewed, above its roster. */
.course-banner{margin-bottom:18px;border-inline-start:4px solid var(--navy-brand)}
.course-banner-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;
}
.course-banner-head h2{margin:4px 0 6px;font-size:22px}
.course-banner-meta{margin:0;display:flex;flex-wrap:wrap;gap:14px;color:var(--text-2);font-size:14px}
.course-banner-meta span{display:inline-flex;align-items:center}
.course-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:16px;
}
.course-stats>div{
  padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line);
}
.course-stats span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.course-stats strong{font-size:24px;font-weight:800;color:var(--text);line-height:1}
.course-stats small{margin-inline-start:7px;font-size:13px;font-weight:700;color:var(--text-3);unicode-bidi:isolate}
.course-stats .is-headline{background:var(--primary-light);border-color:var(--primary-line)}
.course-stats .is-headline strong,
.course-stats .is-headline small{color:var(--primary-dark)}
.course-banner-note.is-urgent{
  background:#fdf0ee;border-color:#e8b4ac;color:#a5281a;font-weight:600;
}
.course-banner-note{
  margin:14px 0 0;padding:10px 14px;border-radius:var(--radius-sm);
  background:var(--warn-light);border:1px solid var(--warn-line);
  color:var(--warn-text);font-size:13.5px;
}

/* Reassigning a participant without leaving the roster. */
.inline-course-form{margin:0}
.inline-course-form select{
  width:100%;min-width:150px;padding:5px 8px;font-size:13px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
}

/* The course a participant is joining, when they arrive by link. */
.course-chosen{
  padding:13px 16px;border-radius:var(--radius-sm);
  background:var(--primary-light);border:1px solid var(--primary-line);
  margin-bottom:4px;
}
.course-chosen-label{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--primary-dark);margin-bottom:3px;
}
.course-chosen strong{display:block;font-size:16px;color:var(--text)}
.course-chosen-when,.course-chosen-where{
  display:inline-block;margin-top:3px;margin-inline-end:12px;
  font-size:13.5px;color:var(--text-2);
}

.notice-inline{
  margin-bottom:16px;padding:11px 15px;border-radius:var(--radius-sm);
  background:var(--warn-light);border:1px solid var(--warn-line);
  color:var(--warn-text);font-size:14px;line-height:1.55;
}

/* The instructor's view of the same strip carries the item counts too, so a
   stage measured on two items is not mistaken for a firm reading. */
.stage-items{font-size:10px;color:var(--text-3);font-weight:600}
.review-note{
  margin:14px 0 0;padding:12px 16px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line);
  color:var(--text-2);font-size:14px;line-height:1.6;
}
.review-note strong{color:var(--text)}
.review-note.subtle{
  background:none;border:none;padding:8px 0 0;
  color:var(--text-3);font-size:13px;
}

.level-value{
  margin:0;padding:14px 18px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line);
  color:var(--text);font-size:14.5px;
}
.level-value-label{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:3px;
}

/* Next step: the answer to "what now". */
.next-step{margin-top:18px;border-inline-start:4px solid var(--green-brand)}
.next-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--primary)}
.next-step h2{margin:5px 0 12px;font-size:22px}
.next-step-body{margin:0 0 14px;color:var(--text);font-size:15.5px;line-height:1.7}
.next-step-gain{
  margin:0;padding:12px 16px;border-radius:var(--radius-sm);
  background:var(--primary-light);border:1px solid var(--primary-line);
  color:var(--primary-dark);font-size:14px;font-weight:600;
}
@media(max-width:760px){
  .level-ladder{grid-template-columns:repeat(3,1fr)}
  .level-result-head{gap:14px}
  .level-badge{width:52px;height:52px;font-size:23px}
  .level-result h2{font-size:24px}
}

/* ---- Marketing report ---------------------------------------------------
   The dashboard already styles .card, table and .metric-card; only the parts
   unique to this page are defined here. */
.page-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:6px;
}
.page-head h1{margin:0}
.range-tabs{display:flex;gap:6px;flex-wrap:wrap}
.range-tab{
  padding:6px 14px;border-radius:99px;font-size:13px;font-weight:650;
  border:1px solid var(--line);color:var(--muted);text-decoration:none;
}
.range-tab:hover{color:var(--text);border-color:var(--muted)}
.range-tab.is-current{background:var(--navy);color:#fff;border-color:var(--navy)}

/* One number per day, so a chart library would be pure weight. */
.spark{
  display:flex;align-items:flex-end;gap:3px;height:120px;margin:14px 0 8px;
  padding:10px;background:var(--surface);border-radius:10px;
}
.spark-bar{
  flex:1;min-width:3px;border-radius:3px 3px 0 0;
  background:var(--green-brand);transition:opacity .15s;
}
.spark-bar:hover{opacity:.7}
.spark-axis{
  display:flex;justify-content:space-between;gap:10px;
  margin:0;font-size:12px;color:var(--muted);
}
.marketing-table th{text-align:start}
.marketing-table td{vertical-align:middle}
.marketing-table code{
  font-size:12px;background:var(--surface);padding:2px 6px;border-radius:5px;
}