/* Trailskill — Trailhead-inspired learning and directory UI.
   Palette follows Salesforce Lightning Design System conventions (brand blue,
   success green, warning orange) because the audience reads those colours
   fluently. Original marks and illustrations throughout — no Salesforce logos
   or characters. */

:root{
  --navy:#032D60; --navy-2:#06326B;
  --blue:#0176D3; --blue-dark:#014486; --blue-tint:#EAF5FE; --sky:#78C6FF;
  --orange:#FE9339; --orange-dark:#A96404; --orange-tint:#FEF1E5;
  --green:#2E844A; --green-tint:#EBFCEC;
  --red:#BA0517; --red-tint:#FEDED8;

  --bg:#F3F4F6; --surface:#FFFFFF; --sunk:#F4F6F9; --line:#E2E5EA;
  --fg:#181818; --muted:#5C5C5C; --faint:#8A8A8A;

  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  --r:12px; --r-sm:8px; --r-lg:18px;
  --shadow:0 2px 4px rgba(3,45,96,.08);
  --shadow-lift:0 8px 20px rgba(3,45,96,.14);
  --nav-h:60px;
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --navy:#01172F; --navy-2:#021E42;
  --blue:#1B96FF; --blue-dark:#0176D3; --blue-tint:#0A2540; --sky:#57B2FF;
  --orange:#FFB75D; --orange-dark:#FE9339; --orange-tint:#3A2A14;
  --green:#45C65A; --green-tint:#14301C;
  --red:#FE5C4C; --red-tint:#3A1512;
  --bg:#0B1220; --surface:#141C2B; --sunk:#0E1626; --line:#28313F;
  --fg:#ECEFF4; --muted:#A3ACBA; --faint:#7D8798;
  --lockA:#39414F; --lockB:#2A313C;
  --shadow:0 2px 4px rgba(0,0,0,.4);
  --shadow-lift:0 8px 20px rgba(0,0,0,.5);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --navy:#01172F; --navy-2:#021E42;
  --blue:#1B96FF; --blue-dark:#0176D3; --blue-tint:#0A2540; --sky:#57B2FF;
  --orange:#FFB75D; --orange-dark:#FE9339; --orange-tint:#3A2A14;
  --green:#45C65A; --green-tint:#14301C;
  --red:#FE5C4C; --red-tint:#3A1512;
  --bg:#0B1220; --surface:#141C2B; --sunk:#0E1626; --line:#28313F;
  --fg:#ECEFF4; --muted:#A3ACBA; --faint:#7D8798;
  --lockA:#39414F; --lockB:#2A313C;
  --shadow:0 2px 4px rgba(0,0,0,.4);
  --shadow-lift:0 8px 20px rgba(0,0,0,.5);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg)}
body{margin:0;font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
.mono{font-family:var(--mono);font-size:12px}
.label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* ============ top navigation ============ */
.th-nav{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff}
.th-nav-in{max-width:1280px;margin:0 auto;padding:0 20px;height:var(--nav-h);display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:#fff;text-decoration:none;flex:none}
.brand-mark{width:30px;height:30px;flex:none;display:grid;place-items:center}
.brand-mark svg{width:100%;height:100%;display:block}
.th-tabs{display:flex;gap:2px;margin-left:18px}
.th-tab{background:none;border:0;color:#CBD9EC;padding:0 14px;height:var(--nav-h);cursor:pointer;font-weight:600;font-size:14.5px;position:relative;white-space:nowrap}
.th-tab[hidden],.pointchip[hidden]{display:none}
.th-tab:hover{color:#fff}
.tab-badge{position:absolute;top:8px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#D93025;color:#fff;font-size:11px;font-weight:700;line-height:17px;text-align:center}
.tab-badge[hidden]{display:none}
.th-tab[aria-selected="true"]{color:#fff}
.th-tab[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;background:var(--sky);border-radius:3px 3px 0 0}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.pointchip{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:0;border-radius:999px;padding:6px 13px 6px 9px;color:#fff;cursor:pointer;font-weight:600;font-size:13.5px}
.pointchip:hover{background:rgba(255,255,255,.2)}
.pointchip .dot{width:20px;height:20px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font-size:11px;font-weight:800;color:#3b2200;flex:none}
.signout{background:none;border:1px solid rgba(255,255,255,.28);color:#CBD9EC;border-radius:999px;padding:6px 13px;cursor:pointer;font-size:13.5px;font-weight:600}
.signout:hover{color:#fff;border-color:#fff}

main{max-width:1280px;margin:0 auto;padding:26px 20px 72px}
.view[hidden]{display:none}

/* ============ page headers ============ */
.phead{margin-bottom:22px}
.phead h1{font-size:clamp(26px,3.4vw,34px);line-height:1.15}
.phead p{color:var(--muted);margin:8px 0 0;max-width:62ch}

/* rank strip on the trails page */
.rankstrip{display:flex;flex-wrap:wrap;align-items:center;gap:22px 32px;background:linear-gradient(118deg,var(--navy) 0%,var(--navy-2) 54%,var(--blue-dark) 100%);color:#fff;border-radius:var(--r-lg);padding:22px 26px;margin-bottom:26px;position:relative;overflow:hidden}
/* Suggestion of a trail ridge, drawn rather than imported. */
.rankstrip::after{content:"";position:absolute;right:-40px;bottom:-60px;width:260px;height:260px;background:
  radial-gradient(circle at 30% 30%,rgba(120,198,255,.22),transparent 62%);pointer-events:none}
.rankstrip .rk-badge{flex:none}
.rankstrip h2{font-size:23px;color:#fff}
.rankstrip .sub{color:#B6CCE8;font-size:13.5px;margin-top:3px}
.rk-figures{display:flex;gap:28px;margin-left:auto;flex-wrap:wrap}
.rk-fig b{display:block;font-size:24px;font-variant-numeric:tabular-nums;line-height:1.1}
.rk-fig span{font-size:12px;color:#B6CCE8}
.rk-next{width:100%;max-width:420px}
.rk-next .bar{background:rgba(255,255,255,.22)}
.rk-next .bar i{background:var(--orange)}
.rk-next small{display:block;margin-top:6px;color:#B6CCE8;font-size:12px}

/* ============ shared bits ============ */
.bar{height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .3s ease}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:9px 16px;cursor:pointer;font-weight:600;font-size:14px;color:var(--fg)}
.btn:hover{border-color:var(--blue);color:var(--blue)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.btn.ghost{background:none}
.btn.danger{color:var(--red);border-color:var(--red)}
.btn[disabled]{opacity:.5;cursor:default}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.pill{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:13.5px;cursor:pointer;font-weight:600;color:var(--muted)}
.pill:hover{border-color:var(--blue);color:var(--blue)}
.pill[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.chipline{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}

/* ============ trails page filters ============ */
.tfilters{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px 12px;margin-bottom:22px;box-shadow:var(--shadow)}
/* One row of labelled controls; search takes whatever is left. */
.tfilter-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.tfield{display:grid;gap:5px;min-width:0}
.tfield.grow{flex:1 1 240px}
.tfield > span{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.tfield select,.tfield input{border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 12px;font:inherit;font-size:14px;background:var(--surface);color:var(--fg);min-width:0}
.tfield select{cursor:pointer;min-width:160px}
.tfield input{width:100%}
.tfield select:focus,.tfield input:focus{outline:2px solid var(--blue);outline-offset:-1px}
/* A control holding a non-default value reads as active at a glance. */
.tfield select.set{border-color:var(--blue);color:var(--blue-dark);font-weight:600;background:var(--blue-tint)}
.tfilter-foot{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line)}
.tcount{font-size:13px;color:var(--muted)}
.linkbtn{background:none;border:0;color:var(--blue);font-weight:600;font-size:13.5px;cursor:pointer;padding:0}
.linkbtn:hover{text-decoration:underline}
.linkbtn[hidden]{display:none}

/* Tags on a trail card. */
.ttags{display:flex;flex-wrap:wrap;gap:6px}
.ttag{font-size:11px;font-weight:600;color:var(--muted);background:var(--sunk);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.ttag.hit{background:var(--blue-tint);border-color:color-mix(in srgb,var(--blue) 40%,transparent);color:var(--blue-dark)}

@media (max-width:620px){
  .tfilter-bar{flex-direction:column;align-items:stretch}
  .tfield select,.tfield.grow{min-width:0;width:100%}
}
}
.note{font-size:13.5px;color:var(--muted);background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px}
.loading,.empty{padding:44px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:var(--r)}
.lvl{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--blue-tint);color:var(--blue-dark);text-transform:uppercase;letter-spacing:.04em}
.meta{display:flex;gap:6px 14px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.ptsbadge{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:13px;color:var(--orange-dark)}
/* Simplify sits at the end of the unit meta row; the note marks the beginner text. */
.meta{align-items:center}
.simplify-btn{margin-left:auto;padding:6px 12px;font-size:13px}
.simplify-btn[aria-pressed="true"]{background:var(--blue-tint);border-color:var(--blue);color:var(--blue-dark)}
.simple-note{margin:0 0 16px;padding:10px 14px;border-radius:var(--r-sm);background:var(--blue-tint);color:var(--blue-dark);font-size:13.5px}
.simple-note[hidden]{display:none}
.ptsbadge::before{content:"";width:13px;height:13px;border-radius:50%;background:var(--orange)}

/* ============ hexagonal badge ============ */
.hex{position:relative;display:grid;place-items:center;flex:none;
  -webkit-clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(150deg,var(--hexA,#0176D3),var(--hexB,#014486));
  color:#fff;font-weight:800;text-align:center;line-height:1}
.hex.sz-sm{width:38px;height:42px;font-size:11px}
.hex.sz-md{width:60px;height:66px;font-size:15px}
.hex.sz-lg{width:92px;height:102px;font-size:22px}
/* Unearned badges read as grey slate in both themes. */
.hex.locked{background:linear-gradient(150deg,var(--lockA,#C9CDD4),var(--lockB,#9AA1AC));color:#fff}
.hex .hx-ring{position:absolute;inset:0;
  -webkit-clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.3)}
.hexwrap{position:relative;display:inline-grid;place-items:center}
/* A white hexagonal plate behind the badge. Without it an earned badge takes
   its family colour and vanishes against a card header of the same family. */
.hexwrap::before{content:"";position:absolute;inset:-4px;background:var(--surface);
  -webkit-clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
.hexwrap > .hex{position:relative;z-index:1}
.hexwrap > .tickmark{z-index:2}
.hexwrap .tickmark{position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;border:2px solid var(--surface)}

/* ============ trails grid ============ */
.trails{display:grid;grid-template-columns:repeat(auto-fill,minmax(316px,1fr));gap:20px}
.trail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.trail:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line)}
.trail-top{background:linear-gradient(130deg,var(--cardA,#0176D3),var(--cardB,#032D60));padding:20px 20px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;min-height:92px;position:relative}
.trail-top .tt-type{color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;opacity:.92}
.trail-top .hexwrap{margin-bottom:-26px}
.trail-body{padding:30px 20px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.trail-body h3{font-size:18px;line-height:1.25}
.trail-body p{margin:0;color:var(--muted);font-size:13.5px;flex:1}
.trail-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.trail-prog{display:flex;align-items:center;gap:9px}
.trail-prog .bar{width:84px}
/* Before a filter is chosen: in-progress trails and topic shortcuts. */
.trail-start{grid-column:1/-1;display:grid;gap:20px;min-width:0}
.ts-block{min-width:0}
.ts-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.ts-block h3{font-size:16px;margin:0 0 4px}
.ts-continue{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:12px}
.ts-row .trail-prog{flex:none}
.ts-row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;
  padding:11px 14px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--fg);font:inherit;cursor:pointer}
.ts-row:hover{border-color:var(--blue)}
.ts-name{font-weight:600;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.earned{display:flex;align-items:center;gap:6px;color:var(--green);font-weight:700;font-size:12.5px}

/* ============ module page ============ */
.crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);margin-bottom:14px}
.crumb button{background:none;border:0;color:var(--blue);cursor:pointer;padding:0;font-weight:600;font-size:13px}

.mod-head{display:flex;gap:20px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);margin-bottom:22px}
.mod-head h1{font-size:26px;line-height:1.2}
.mod-head .tt-type{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--blue);margin-bottom:5px}
.mod-head .mh-right{margin-left:auto;text-align:right;flex:none}
.mod-head .mh-right .bar{width:150px;margin-top:8px}

.mod-layout{display:grid;grid-template-columns:286px minmax(0,1fr);gap:24px;align-items:start}
.units{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:calc(var(--nav-h) + 16px)}
.units-h{padding:14px 16px;border-bottom:1px solid var(--line);background:var(--sunk)}
.unit{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:11px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:13px 16px;cursor:pointer;font-size:14px;color:var(--fg)}
.unit:last-child{border-bottom:0}
.unit:hover{background:var(--sunk)}
.unit[aria-current="true"]{background:var(--blue-tint)}
.unit[aria-current="true"] .u-title{font-weight:700;color:var(--blue-dark)}
.u-tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:11px;color:transparent;flex:none}
.unit.done .u-tick{background:var(--green);border-color:var(--green);color:#fff}
.unit.done .u-title{color:var(--muted)}
.u-pts{font-family:var(--mono);font-size:11px;color:var(--faint)}

.unit-body{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:26px}
.unit-body > h2{font-size:22px;margin-bottom:6px}
.unit-body .lead{color:var(--muted);margin:0 0 18px;font-size:15px}
.objectives{margin:0 0 22px;padding:16px 18px;display:grid;gap:7px;font-size:14px;background:var(--blue-tint);border-radius:var(--r-sm);border:1px solid var(--line)}
.objectives .obj{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start}
.objectives .obj::before{content:"✓";color:var(--green);font-weight:800;line-height:1.5}
.objectives-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--blue-dark);margin-bottom:10px}

/* long-form content */
.prose{font-size:15.5px;line-height:1.68}
.prose h3{font-size:17px;margin:26px 0 9px}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px;display:grid;gap:6px}
.prose strong{font-weight:700}
.prose code{font-family:var(--mono);font-size:12.5px;background:var(--sunk);border:1px solid var(--line);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
.prose pre{background:var(--navy);border-radius:var(--r-sm);padding:15px 17px;overflow-x:auto;margin:0 0 16px}
.prose pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.6;display:block;white-space:pre;color:#DCE6F4}
.prose table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.prose th{background:var(--sunk);font-weight:700}
.prose blockquote{margin:0 0 16px;padding:12px 16px;border-left:4px solid var(--blue);background:var(--blue-tint);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--fg)}

.terms{display:grid;gap:10px;margin-top:8px}
.term{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--sunk)}
.term b{display:block;font-size:14px;margin-bottom:2px}
.term span{font-size:13.5px;color:var(--muted)}
.sec{margin-top:30px}
.sec > h3{font-size:17px;margin-bottom:10px}

/* knowledge check */
.check{margin-top:30px;border:2px solid var(--blue);border-radius:var(--r);overflow:hidden}
.check-h{background:var(--blue-tint);padding:16px 20px;border-bottom:1px solid var(--line)}
.check-h h3{font-size:17px;color:var(--blue-dark)}
.check-h p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.check-body{padding:20px;display:grid;gap:22px}
.qblock{display:grid;gap:9px}
.qprompt{font-weight:700;font-size:14.5px}
.qblock .qhint{font-size:12.5px;color:var(--muted);margin-top:-4px}
.choice{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;cursor:pointer;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.choice:hover{border-color:var(--blue);background:var(--blue-tint)}
.choice input{margin:3px 0 0;accent-color:var(--blue);flex:none}
.choice.right{border-color:var(--green);background:var(--green-tint)}
.choice.wrong{border-color:var(--red);background:var(--red-tint)}
.choice.missed{border:1px dashed var(--green)}
.choice-tag{flex:none;align-self:center;font-size:11px;font-weight:700;color:var(--muted)}
.qexp{font-size:13.5px;color:var(--muted);padding:9px 13px;background:var(--sunk);border-radius:var(--r-sm);border-left:3px solid var(--line)}
.scoreline{font-weight:700;font-size:15px;padding:13px 15px;border-radius:var(--r-sm)}
.scoreline.pass{background:var(--green-tint);color:var(--green)}
.scoreline.fail{background:var(--orange-tint);color:var(--orange-dark)}
.check-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* celebration banner when a path completes */
.celebrate{display:flex;gap:18px;align-items:center;background:linear-gradient(120deg,var(--green-tint),var(--blue-tint));border:1px solid var(--green);border-radius:var(--r);padding:20px 22px;margin-bottom:22px}
.celebrate h3{font-size:19px;color:var(--green)}
.celebrate p{margin:4px 0 0;font-size:14px;color:var(--muted)}

/* ============ directory ============ */
.searchbar{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:7px 7px 7px 16px;margin-bottom:20px;box-shadow:var(--shadow)}
.searchbar input{flex:1;min-width:0;border:0;background:none;padding:9px 0;font-size:16px;outline:none}
.searchbar select{border:1px solid var(--line);background:var(--sunk);border-radius:var(--r-sm);padding:9px 11px}
.dir{display:grid;grid-template-columns:272px minmax(0,1fr);gap:24px;align-items:start}
.rail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;position:sticky;top:calc(var(--nav-h) + 16px);max-height:calc(100vh - var(--nav-h) - 36px);overflow:auto;display:grid;gap:20px}
.fgroup{display:grid;gap:7px}
.fgroup header{display:flex;justify-content:space-between;align-items:baseline}
.fgroup .fval{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.chk{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer;padding:2px 0}
.chk input{accent-color:var(--blue);width:15px;height:15px;margin:0;flex:none}
.chk .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
.range input{width:100%;accent-color:var(--blue)}
.toggle-row{display:flex;gap:7px;flex-wrap:wrap}
.clear{background:none;border:0;color:var(--blue);cursor:pointer;padding:0;font-size:13.5px;justify-self:start;font-weight:600}
.search-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end}
.search-actions{grid-column:1/-1;display:flex;gap:10px;margin-top:0}
/* Skill search: up to three skills from the skill passport, each with a minimum level. */
.skill-search{grid-column:1/-1;border:0;margin:0;padding:0;min-width:0}
.skill-search legend{padding:0;margin-bottom:4px}
.skill-search .note{margin:0 0 8px}
.skill-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px}
.skill-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:6px}
.skill-row select{min-width:0;width:100%;padding:10px 11px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--fg);font:inherit}
.skill-match{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.skill-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:var(--blue-tint);color:var(--blue-dark);font-size:12.5px;font-weight:600}
.skill-chip b{font-variant-numeric:tabular-nums}
/* The skill passport: one bar per skill, with what it rests on. */
.passport{display:grid;gap:10px;margin-top:12px}
.pp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,180px) 32px;gap:12px;align-items:center}
.pp-name{min-width:0;display:grid}
.pp-name b{font-size:14px}
.pp-name small{font-size:12px;color:var(--muted)}
.pp-bar{height:8px;border-radius:999px;background:var(--sunk, #eef1f5);overflow:hidden}
.pp-bar i{display:block;height:100%;border-radius:inherit;background:var(--blue)}
.pp-level{text-align:right;font-variant-numeric:tabular-nums}
.work-pref{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.work-pref legend{margin-bottom:6px}
.lb-row{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 6px;text-align:left;cursor:pointer;color:inherit;font:inherit}
.lb-row:last-child{border-bottom:0}
.lb-row:hover{background:var(--sunk)}
.lb-row.is-me{background:var(--blue-tint);border-radius:var(--r-sm)}
.lb-pos{width:26px;flex:none;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.lb-who{flex:1;min-width:0;display:flex;flex-direction:column}
.lb-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-who small{color:var(--muted);font-size:12.5px}
.lb-pts{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.lb-pts small{font-weight:500;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.msg-layout{display:grid;grid-template-columns:340px minmax(0,1fr);height:calc(100dvh - var(--nav-h) - 98px);min-height:420px;max-width:1040px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.msg-side{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.msg-side-head{padding:14px 18px;border-bottom:1px solid var(--line)}
.msg-side-head h1{font-size:21px;line-height:1.2}
#msgList{flex:1;overflow-y:auto;min-height:0}
.msg-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 16px;text-align:left;cursor:pointer;color:inherit;font:inherit}
.msg-row>.av{width:44px;height:44px;font-size:15px}
.msg-row:hover{background:var(--sunk)}
.msg-row.is-open{background:var(--blue-tint)}
.msg-row-text{min-width:0;display:flex;flex-direction:column}
.msg-row-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.msg-row-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.msg-row-top small{flex:none;color:var(--muted);font-size:12px}
.msg-preview{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-row.is-unread .msg-row-top b{font-weight:800}
.msg-row.is-unread .msg-preview{color:var(--fg);font-weight:600}
.msg-empty{padding:32px 20px;text-align:center;color:var(--muted);font-size:14px}
.msg-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.msg-head{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.msg-head-text{flex:1;min-width:0;display:flex;flex-direction:column}
.msg-head-text b{overflow-wrap:anywhere;font-weight:700}
.msg-head-text small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
/* On phones the name keeps its line, and the buttons move below it. */
@media (max-width:520px){
  .msg-head{flex-wrap:wrap}
  .msg-head-text{flex:1 1 calc(100% - 96px)}
  .msg-head .btn{flex:1 1 auto}
}
.msg-back{display:none;background:none;border:0;font-size:26px;line-height:1;padding:0 6px 4px 0;cursor:pointer;color:inherit}
.msg-bubbles{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:16px}
.msg-bubble{max-width:78%;align-self:flex-start}
.msg-bubble.is-mine{align-self:flex-end;text-align:right}
.msg-text{display:inline-block;text-align:left;background:var(--sunk);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:9px 13px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px;-webkit-user-select:text;user-select:text}
.msg-bubble.is-mine .msg-text{background:var(--blue);border-color:var(--blue);color:#fff;border-radius:14px 14px 4px 14px}
.msg-bubble time{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}
.msg-blocked{padding:12px 16px;border-top:1px solid var(--line);background:var(--sunk);color:var(--muted);font-size:13.5px}
.msg-compose{display:flex;gap:10px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
.msg-compose[hidden]{display:none}
.msg-compose textarea{flex:1;min-width:0;resize:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;background:var(--surface)}
#meName,#meTitle{overflow-wrap:anywhere}
@media (max-width:360px){
  .th-tabs .th-tab{font-size:9.5px;padding-left:0;padding-right:0}
}
.career{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;display:grid;align-content:start;gap:10px}
.career h2{font-size:16px;margin-top:8px}
.career-list{display:grid;gap:8px}
.career-item{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:11px 13px}
.career-item>div:last-child{min-width:0;display:flex;flex-direction:column;overflow-wrap:anywhere}
.career-item b{font-weight:700;font-size:14.5px}
.career-item small{color:var(--muted);font-size:12.5px}
.career-new{display:inline-block;margin-left:4px;padding:0 7px;border-radius:999px;background:var(--blue);color:#fff;font-size:11px;font-weight:700}
.vis-block{display:grid;gap:10px;margin-top:16px}
.vis-block+.vis-block{border-top:1px solid var(--line);padding-top:16px}
.vis-block>b{font-weight:600}
.vis-silent{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.vis-silent[hidden]{display:none}
.vis-silent select{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:9px 11px}
.d-compose{display:grid;gap:8px;margin-top:14px}
.d-compose[hidden]{display:none}
.d-compose textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;background:var(--surface)}
.d-compose .btn{justify-self:start}
.company-page{display:grid;gap:22px;max-width:720px;margin:0 auto}
@media (max-width:760px){
  .msg-layout{grid-template-columns:minmax(0,1fr);height:calc(100dvh - var(--nav-h) - var(--tabbar-h,60px) - env(safe-area-inset-bottom) - 44px);min-height:360px}
  .msg-layout[data-open="true"] .msg-side,.msg-layout[data-open="false"] .msg-main{display:none}
  .msg-side{border-right:0}
  .msg-back{display:block}
  .msg-bubble{max-width:88%}
}
.lb-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:16px}
.lb-scope{display:flex;gap:8px}
.lb-country{display:flex;align-items:center;gap:9px}
.lb-country[hidden]{display:none}
.lb-country select{min-width:190px;max-width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
@media (max-width:480px){
  #leaderboard{padding:10px 12px}
  .lb-row{gap:9px;padding:10px 2px}
  .lb-pos{width:20px}
  .lb-row .av{width:38px;height:38px;font-size:13px}
  .lb-who b{white-space:normal;overflow-wrap:anywhere;line-height:1.25}
}
.lb-gap{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 4px}
@media (max-width:860px){.search-form{grid-template-columns:repeat(2,minmax(0,1fr))}.skill-rows{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.search-form{grid-template-columns:minmax(0,1fr)}}
.resultsHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.activeChips{display:flex;gap:7px;flex-wrap:wrap}
.achip{font-size:12.5px;background:var(--blue-tint);color:var(--blue-dark);border:0;border-radius:999px;padding:4px 11px;cursor:pointer;font-weight:600}
.list{display:grid;gap:12px}
.person{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:16px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:17px;cursor:pointer;text-align:left;width:100%;box-shadow:var(--shadow)}
.person:hover{border-color:var(--blue);box-shadow:var(--shadow-lift)}
.av{position:relative;overflow:hidden;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:18px;color:#fff;flex:none}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 18px}
.photo-actions small{flex:1 1 220px;color:var(--muted);font-size:12.5px}
.av.sm{width:32px;height:32px;font-size:12px}
.av.lg{width:88px;height:88px;font-size:30px}
.pname{font-weight:700;font-size:17px}
.ptitle{font-size:14px}
.pmeta{color:var(--muted);font-size:13px;display:flex;gap:4px 13px;flex-wrap:wrap;margin-top:3px}
.certrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;align-items:center}
.cert{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:var(--sunk);white-space:nowrap}
.cert.more{color:var(--muted)}
.cert.passed{white-space:normal}
.side{display:grid;justify-items:end;gap:6px;text-align:right}
.status{font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap}
.status.open{background:var(--green-tint);color:var(--green)}
.status.soon{background:var(--orange-tint);color:var(--orange-dark)}
.status.no{background:var(--sunk);color:var(--muted)}
.rank{font-size:12px;color:var(--muted)}

/* ============ drawer (profiles) ============ */
.scrim{position:fixed;inset:0;background:rgba(3,45,96,.45);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(580px,100%);background:var(--surface);z-index:41;overflow:auto;padding:26px 28px 40px;box-shadow:-8px 0 30px rgba(3,45,96,.2)}
.close{position:absolute;top:14px;right:16px;border:1px solid var(--line);background:var(--surface);border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:17px;line-height:1}
.dhead{display:flex;gap:17px;align-items:center;padding-right:40px}
.drawer h2{font-size:25px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin-top:20px}
.kv div{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.kv b{display:block;font-size:21px;font-variant-numeric:tabular-nums}
.kv span{font-size:12px;color:var(--muted)}
.certlist{display:grid;gap:8px}
.certitem{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm)}
.timeline{display:grid;border-left:2px solid var(--line);margin-left:7px}
.tl{position:relative;padding:0 0 17px 20px}
.tl::before{content:"";position:absolute;left:-8px;top:5px;width:13px;height:13px;border-radius:50%;background:var(--surface);border:3px solid var(--blue)}
.tl small{color:var(--muted)}
.skills{display:flex;flex-wrap:wrap;gap:7px}
.skill{font-size:13px;background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.viewstamp{margin-top:24px;font-size:11px;color:var(--faint);font-family:var(--mono)}

/* ============ profile page ============ */
.me-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.field{display:grid;gap:5px}
.field input,.field select{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:10px 11px;width:100%}
.field .chk input{width:15px;padding:0}
.field input:focus,.field select:focus{border-color:var(--blue)}

/* badge wall */
.badgewall{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:18px 12px;margin-top:16px}
.bw-item{display:grid;justify-items:center;gap:7px;text-align:center}
.bw-item small{font-size:11px;color:var(--muted);line-height:1.3}
.bw-item.is-locked small{color:var(--faint)}

/* rank ladder */
/* Fifteen rungs is a long list, so the ladder scrolls and the current rung is
   brought into view rather than the panel growing to half a page. */
.ladder{display:grid;gap:2px;margin-top:14px;max-height:252px;overflow-y:auto;
  scrollbar-width:thin;padding-right:4px}
.rung{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:7px 11px;border-radius:var(--r-sm);font-size:13px}
.rung.on{background:var(--blue-tint)}
.rung.now{background:var(--navy);color:#fff}
.rung .rdot{width:11px;height:11px;border-radius:50%;background:var(--line);flex:none}
.rung.on .rdot{background:var(--blue)}
.rung.now .rdot{background:var(--orange)}
.rung .rpts{font-family:var(--mono);font-size:11px;opacity:.75}

/* ============ streak and achievements ============ */
.streakchip{display:inline-flex;align-items:center;gap:6px;background:var(--orange-tint);
  color:var(--orange-dark);border:1px solid color-mix(in srgb,var(--orange) 40%,transparent);
  border-radius:999px;padding:6px 13px;font-weight:700;font-size:13.5px;cursor:default;
  font-variant-numeric:tabular-nums}
.streakchip[hidden]{display:none}

.awardcount{float:right;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.awards{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-top:14px}
.award{position:relative;display:grid;justify-items:center;gap:5px;padding:11px 7px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--sunk);text-align:center;cursor:help}
.award i{font-style:normal;font-size:23px;line-height:1;filter:grayscale(1);opacity:.42}
.award b{font-size:10.5px;font-weight:700;line-height:1.25;color:var(--muted)}
.award .apr{font-family:var(--mono);font-size:9.5px;color:var(--faint)}
.award.earned{background:linear-gradient(160deg,var(--blue-tint),var(--surface) 75%);
  border-color:color-mix(in srgb,var(--blue) 42%,transparent)}
.award.earned i{filter:none;opacity:1}
.award.earned b{color:var(--fg)}
.award.fresh{animation:award-pop .6s cubic-bezier(.2,.9,.3,1.5) both}
@keyframes award-pop{0%{transform:scale(.5) rotate(-12deg);opacity:0}60%{transform:scale(1.1);opacity:1}100%{transform:none}}

/* Unlocks announced in the result dialog. */
.unlocks{display:grid;gap:9px;margin-top:18px}
.unlock{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;
  padding:11px 14px;border-radius:var(--r-sm);
  background:linear-gradient(120deg,var(--blue-tint),var(--orange-tint));
  border:1px solid color-mix(in srgb,var(--blue) 30%,transparent)}
.unlock i{font-style:normal;font-size:24px;line-height:1}
.unlock b{display:block;font-size:14px}
.unlock span{font-size:12.5px;color:var(--muted)}
.unlock-head{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}

.error{background:var(--red-tint);color:var(--red);border-radius:var(--r-sm);padding:11px 13px;font-size:14px;margin-top:14px}
.error[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:13px 20px;border-radius:999px;z-index:60;font-size:14px;font-weight:600;box-shadow:var(--shadow-lift);max-width:calc(100vw - 32px);text-align:center}

/* ============ knowledge-check result modal ============ */
.modal-wrap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px}
.modal-wrap[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(3,45,96,.5)}
.modal{position:relative;width:min(620px,100%);max-height:min(82vh,760px);overflow:auto;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(3,45,96,.32);
  padding:26px 28px 24px;animation:modal-in .22s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.modal-h{display:flex;gap:16px;align-items:center;padding-right:38px}
.modal-h h2{font-size:23px;line-height:1.2}
.modal-h p{margin:5px 0 0;font-size:14px;color:var(--muted)}
.modal .close{top:16px;right:18px}

/* The medal: a hexagon to match the badge language used across the app. */
.medal{flex:0 0 auto;width:62px;height:62px;display:grid;place-items:center;color:#fff;font-size:28px;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.medal.win{background:linear-gradient(150deg,var(--green),#15603a);animation:medal-pop .5s cubic-bezier(.2,.9,.3,1.5) both}
.medal.review{background:linear-gradient(150deg,var(--orange),var(--orange-dark))}
@keyframes medal-pop{0%{transform:scale(.4) rotate(-18deg);opacity:0}60%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:none;opacity:1}}

.modal-list{display:grid;gap:14px;margin-top:20px}
.missed{border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--r-sm);padding:13px 15px;background:var(--sunk)}
.missed .mq{font-weight:600;font-size:14.5px;margin-bottom:9px}
.missed dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 10px;margin:0;font-size:13.5px}
.missed dt{color:var(--muted);white-space:nowrap}
.missed dd{margin:0}
.missed dd.bad{color:var(--red)}
.modal-note{margin-top:16px;font-size:13.5px;color:var(--muted)}
.share-block{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)}
.share-block h3{font-size:17px}
.share-text{margin:6px 0 12px;font-size:14px}
.share-sheet{width:100%;margin-bottom:10px}
.exam-share .share-block{margin-top:0;padding-top:0;border-top:0}
.share-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.share-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 6px;color:var(--fg);background:var(--surface);text-decoration:none;font-weight:700;font-size:14px;border:1px solid var(--line);border-radius:var(--r-sm)}
.share-link svg{width:18px;height:18px;flex:none}
.share-block .modal-note{margin-top:10px;font-size:12.5px}
@media (max-width:380px){
  .share-link{flex-direction:column;gap:4px;font-size:13px}
}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

@media (max-width:520px){
  .modal{padding:22px 18px 20px}
  .modal-h{gap:12px}
  .medal{width:50px;height:50px;font-size:23px}
  .modal-h h2{font-size:20px}
  /* Stack the label above its value: two columns leaves neither enough room. */
  .missed dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .missed dt{font-size:12px;text-transform:uppercase;letter-spacing:.04em}
  .missed dt + dd{margin-bottom:7px}
  .modal-actions .btn{flex:1 1 100%}
}

/* Confetti, built from a handful of plain divs rather than a canvas library. */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-24px;width:9px;height:14px;border-radius:2px;opacity:0;
  animation:confetti-fall var(--dur,2.4s) linear var(--delay,0s) forwards}
@keyframes confetti-fall{
  0%{opacity:0;transform:translateY(0) rotate(0)}
  8%{opacity:1}
  100%{opacity:0;transform:translateY(102vh) rotate(var(--spin,540deg))}
}
@media (prefers-reduced-motion:reduce){
  .confetti{display:none}
  .modal,.medal.win{animation:none}
}

/* ============ auth pages ============ */
main.auth{max-width:none}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(140deg,var(--navy) 0%,var(--navy-2) 45%,var(--blue-dark) 100%)}
.auth-card{width:100%;max-width:430px;background:var(--surface);border-radius:var(--r-lg);padding:32px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.auth-back{display:inline-block;margin-bottom:14px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:none}
.auth-back:hover{color:var(--fg);text-decoration:underline}
.auth-card .brand{justify-content:center;margin-bottom:20px;color:var(--fg)}
.auth-card h1{font-size:25px;text-align:center}
.auth-card > p{color:var(--muted);margin:8px 0 24px;font-size:14px;text-align:center}
.auth-form{display:grid;gap:15px}
.auth-form .btn{margin-top:6px;padding:12px}
.auth-alt{margin-top:20px;font-size:14px;color:var(--muted);text-align:center}
.auth-terms{grid-column:1/-1;margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.auth-terms a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hint{font-size:12px;color:var(--faint)}

/* ============ responsive ============ */
.filterBtn{display:none}
@media (max-width:980px){
  .mod-layout{grid-template-columns:minmax(0,1fr)}
  .units{position:static;max-height:none}
  .me-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .dir{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;max-height:none;display:none}
  .rail.open{display:grid}
  .filterBtn{display:inline-block}
  .rk-figures{margin-left:0;width:100%}
}
@media (max-width:680px){
  .th-nav-in{padding:0 14px;gap:6px}
  /* Scoped to the app header, which needs the room for its tabs — and only the
     wordmark goes, since the mark is a span too and dropping it left the
     header with no logo at all. Landing, footer and auth brands keep both. */
  .th-nav .brand span:not(.brand-mark){display:none}
  .th-tabs{margin-left:6px}
  .th-tab{padding:0 9px;font-size:13.5px}
  .signout{display:none}
  main{padding:20px 14px 60px}
  .person{grid-template-columns:44px minmax(0,1fr)}
  .av{width:44px;height:44px;font-size:15px}
  .side{grid-column:2;justify-items:start;text-align:left;grid-auto-flow:column;justify-content:start;align-items:center;gap:8px}
  .form{grid-template-columns:1fr}
  .searchbar{flex-wrap:wrap}
  .searchbar input{flex-basis:100%}
  .mod-head{flex-wrap:wrap}
  .mod-head .mh-right{margin-left:0;text-align:left;width:100%}
  .unit-body{padding:18px}
  .rankstrip{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .trail:hover{transform:none}
}

/* ============ copy deterrence ============ */
/* Paired with public/protect.js — deterrence only, see that file's header. */
body.protected{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
body.protected input,
body.protected textarea,
body.protected select,
body.protected [contenteditable="true"],
body.protected .share-text{-webkit-user-select:text;-moz-user-select:text;user-select:text;-webkit-touch-callout:default}
@media print{
  body.protected main,
  body.protected .modal-wrap,
  body.protected .drawer{display:none !important}
  body.protected::after{content:"Trailskill content cannot be printed.";display:block;padding:40px;font-size:18px;text-align:center}
}

/* ============ certification exam ============ */
.exam-hero{display:flex;gap:20px;align-items:flex-start;background:linear-gradient(118deg,var(--navy),var(--navy-2) 60%,var(--blue-dark));color:#fff;border-radius:var(--r-lg);padding:24px 26px;margin-bottom:22px}
.exam-hero h1{font-size:25px;color:#fff}
.exam-hero .sub{color:#B6CCE8;font-size:14px;margin-top:4px}
.exam-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;margin:20px 0}
.exam-spec div{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.exam-spec b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.exam-spec span{font-size:12px;color:var(--muted)}
.outline{display:grid;gap:7px;margin-top:10px}
.outline-row{display:grid;grid-template-columns:minmax(0,1fr) 52px 120px;gap:12px;align-items:center;font-size:14px}
.outline-row .wbar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.outline-row .wbar i{display:block;height:100%;background:var(--blue)}
.outline-row .wpct{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right}

/* runner */
.exam-bar{position:sticky;top:var(--nav-h);z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.clock{font-family:var(--mono);font-size:19px;font-weight:500;font-variant-numeric:tabular-nums;padding:5px 12px;border-radius:var(--r-sm);background:var(--sunk)}
.clock.warn{background:var(--orange-tint);color:var(--orange-dark)}
.clock.danger{background:var(--red-tint);color:var(--red)}
.exam-prog{flex:1;min-width:150px}
.exam-prog .bar i{background:var(--blue)}
.qnav{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.qdot{width:32px;height:32px;border-radius:7px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:12px;font-weight:600;color:var(--muted)}
.qdot.answered{background:var(--blue-tint);border-color:var(--blue);color:var(--blue-dark)}
.qdot.partial{background:var(--orange-tint);border-color:var(--orange);color:var(--orange-dark)}
.qdot.flagged{border-color:var(--orange);box-shadow:inset 0 -3px 0 var(--orange)}
.qdot[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.exam-q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
.exam-q .qtag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.exam-q .qprompt{font-size:17px;font-weight:600;margin:8px 0 6px;line-height:1.45}
.exam-q .qhint{font-size:13px;color:var(--muted);margin-bottom:16px}
.exam-nav{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap}
.exam-nav .spacer{flex:1}

/* grading: one dot per question lights up in a wave until the report draws */
.grading{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:44px 24px 40px;text-align:center;animation:modal-in .3s ease both}
.grading h2{font-size:22px;margin-top:22px}
.grading p{color:var(--muted);font-size:14.5px;margin-top:6px;min-height:1.5em}
.grading-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:420px;margin:0 auto}
.grading-dots i{width:14px;height:14px;border-radius:50%;background:var(--line);
  animation:grade-dot 1.8s ease-in-out infinite;animation-delay:calc(var(--i) * 1.8s / var(--n))}
@keyframes grade-dot{
  0%,100%{background:var(--line);transform:scale(1)}
  18%{background:var(--blue);transform:scale(1.35)}
  40%{background:var(--blue);transform:scale(1);opacity:.55}
}
.grading-bar{position:relative;height:4px;max-width:260px;margin:22px auto 0;border-radius:99px;background:var(--line);overflow:hidden}
.grading-bar i{position:absolute;top:0;bottom:0;width:40%;border-radius:99px;background:var(--blue);animation:grade-sweep 1.2s ease-in-out infinite}
@keyframes grade-sweep{from{left:-40%}to{left:100%}}
@media (prefers-reduced-motion:reduce){
  .grading,.grading-dots i,.grading-bar i{animation:none}
  .grading-dots i{background:var(--blue);opacity:.5}
  .grading-bar i{left:30%}
}

/* score report */
.verdict{display:flex;gap:20px;align-items:center;border-radius:var(--r-lg);padding:24px 26px;margin-bottom:22px;color:#fff}
.verdict.pass{background:linear-gradient(120deg,#1C6E3C,#2E844A)}
.verdict.fail{background:linear-gradient(120deg,#8A3B00,#A96404)}
.verdict h1{font-size:30px;color:#fff}
.verdict .pct{font-size:46px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.verdict .sub{color:rgba(255,255,255,.86);font-size:14px;margin-top:4px}
.review-q{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--surface);margin-bottom:12px}
.review-q.ok{border-left:4px solid var(--green)}
.review-q.bad{border-left:4px solid var(--red)}
.review-q.part{border-left:4px solid var(--orange)}
.review-q.blank{border-left:4px solid var(--faint)}
@media (max-width:680px){
  .verdict{flex-wrap:wrap}
  .verdict > div:not(.hexwrap){flex:1 1 100%}
  .verdict h1{font-size:22px}
}
.review-why{font-size:13.5px;font-weight:600;margin-top:8px}
.review-source{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);font-size:14px;font-weight:600}
.review-source .linkbtn{font:inherit}

/* ============ industry use cases ============ */
.usecase{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:12px}
.uc-head{background:var(--sunk);border-bottom:1px solid var(--line);padding:12px 16px 0;display:flex;gap:4px;flex-wrap:wrap}
.uc-tab{background:none;border:0;border-bottom:3px solid transparent;padding:8px 12px 10px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;border-radius:6px 6px 0 0}
.uc-tab:hover{color:var(--fg);background:var(--surface)}
.uc-tab[aria-selected="true"]{color:var(--blue-dark);border-bottom-color:var(--blue);background:var(--surface)}
.uc-tab .mine{display:inline-block;margin-left:5px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--orange-dark)}
.uc-body{padding:20px}
.uc-body > h4{font-size:16px;margin-bottom:10px}
.uc-body .prose{font-size:15px}
.uc-body .prose p:last-child{margin-bottom:0}

/* Trail card: units and exam are separate destinations. */
.trail-actions{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.exam-link{color:var(--orange-dark);font-weight:700;font-size:12.5px}
.exam-link:hover{text-decoration:underline}

/* ============ landing page ============
   One screen in black and white: a header with the way in, a banner with the
   title, a choice between professionals and recruiters, and a footer with the
   links and the ask-an-AI buttons. Dark mode swaps the two colours. */
html.site body.landing{--lp-bg:#fff;--lp-fg:#0a0a0a;--lp-soft:#6b6b6b;--lp-line:rgba(0,0,0,.1);--lp-card:#fafafa;--lp-blue:#0176D3;
  margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--lp-bg);color:var(--lp-fg);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
@media (prefers-color-scheme:dark){
  html.site body.landing{--lp-bg:#000;--lp-fg:#fafafa;--lp-soft:#9a9a9a;--lp-line:rgba(255,255,255,.13);--lp-card:#0b0b0b;--lp-blue:#4FA8F5}
}
.lp-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;padding:14px clamp(16px,4vw,48px);
  border-bottom:1px solid var(--lp-line);background:color-mix(in srgb,var(--lp-bg) 80%,transparent);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px)}
.lp-brand{display:flex;align-items:center;gap:10px;color:var(--lp-fg);text-decoration:none;font-size:18px;font-weight:800;letter-spacing:-.03em}
.lp-brand svg{width:24px;height:26px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
/* Black and white at rest; the original colours come in on hover. */
.lp-mark-hex{fill:var(--lp-fg);transition:fill .25s}
.lp-mark-ring{fill:none;stroke:#78C6FF;stroke-width:1.5;opacity:0;transition:opacity .25s}
.lp-brand-cut{fill:var(--lp-bg);transition:fill .25s}
.lp-mark-sun{fill:#FE9339;opacity:0;transform-origin:23px 11px;transform:scale(.4);transition:opacity .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.lp-brand:hover svg,.lp-brand:focus-visible svg{transform:rotate(-8deg) scale(1.06)}
.lp-brand:hover .lp-mark-hex,.lp-brand:focus-visible .lp-mark-hex{fill:#0176D3}
.lp-brand:hover .lp-mark-ring,.lp-brand:focus-visible .lp-mark-ring{opacity:1}
.lp-brand:hover .lp-brand-cut,.lp-brand:focus-visible .lp-brand-cut{fill:#fff}
.lp-brand:hover .lp-mark-sun,.lp-brand:focus-visible .lp-mark-sun{opacity:1;transform:none}
.lp-brand span{transition:color .25s}
.lp-brand:hover span{color:var(--lp-blue)}
.lp-auth{margin-left:auto;display:flex;align-items:center;gap:4px}
.lp-link,.lp-btn{padding:8px 16px;border:1px solid transparent;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.lp-link{color:var(--lp-fg)}
.lp-link:hover{color:var(--lp-blue);background:color-mix(in srgb,var(--lp-blue) 10%,transparent);border-color:color-mix(in srgb,var(--lp-blue) 30%,transparent)}
.lp-btn{background:var(--lp-fg);color:var(--lp-bg);transition:background-color .2s,color .2s,border-color .2s,box-shadow .25s,transform .2s}
.lp-btn:hover{background:#0176D3;border-color:#0176D3;color:#fff;transform:translateY(-1px);box-shadow:0 6px 20px -6px rgba(1,118,211,.65)}
.lp-btn:active,.lp-link:active{transform:translateY(0)}

.lp-main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4vh,22px);width:100%;max-width:1080px;margin:0 auto;padding:clamp(20px,4vh,48px) clamp(16px,4vw,48px)}
.lp-banner{position:relative;overflow:hidden;padding:clamp(28px,5vh,56px) clamp(24px,5vw,64px);border-radius:28px;background:var(--lp-fg);color:var(--lp-bg);isolation:isolate}
/* A faint dot grid, brighter toward the top right. */
.lp-banner::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(color-mix(in srgb,var(--lp-bg) 22%,transparent) 1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(80% 90% at 100% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(80% 90% at 100% 0%,#000 0%,transparent 70%)}
.lp-pill{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:4px 14px 4px 4px;border:1px solid color-mix(in srgb,var(--lp-bg) 24%,transparent);border-radius:999px;font-size:13px;font-weight:500}
.lp-pill span{padding:3px 10px;border-radius:999px;background:var(--lp-bg);color:var(--lp-fg);font-size:11.5px;font-weight:700;letter-spacing:.02em}
.landing .lp-banner h1{margin:0;color:inherit;font-size:clamp(36px,5.6vw,72px);line-height:.98;font-weight:800;letter-spacing:-.05em}
.lp-sub{margin:22px 0 0;max-width:34em;font-size:clamp(15px,1.5vw,18px);line-height:1.55;color:color-mix(in srgb,var(--lp-bg) 70%,var(--lp-fg))}
/* The figures, number above label, along the foot of the banner. */
.lp-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin:clamp(24px,4.5vh,44px) 0 0;padding-top:clamp(18px,3vh,26px);border-top:1px solid color-mix(in srgb,var(--lp-bg) 20%,transparent)}
.lp-kpis div{display:flex;flex-direction:column;gap:4px;min-width:0}
.lp-kpis dd{order:-1;margin:0;font-size:clamp(24px,2.8vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.lp-kpis dt{font-size:12.5px;color:color-mix(in srgb,var(--lp-bg) 62%,var(--lp-fg))}
.lp-choose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vh,22px)}
.lp-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:4px;align-items:center;padding:clamp(20px,3vh,28px) clamp(20px,2.6vw,30px);
  border:1px solid var(--lp-line);border-radius:22px;background:var(--lp-card);color:var(--lp-fg);text-decoration:none;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.lp-choice:hover,.lp-choice:focus-visible{border-color:var(--lp-fg);transform:translateY(-2px);box-shadow:0 14px 30px -18px color-mix(in srgb,var(--lp-fg) 45%,transparent);outline:none}
.lp-choice-k{font-size:clamp(21px,2.4vw,26px);font-weight:800;letter-spacing:-.03em}
.lp-choice-t{grid-column:1;font-size:15px;line-height:1.5;color:var(--lp-soft)}
.lp-choice-go{grid-column:2;grid-row:1/span 2;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600}
.lp-arrow{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--lp-line);border-radius:50%;transition:background-color .2s,color .2s,border-color .2s}
.lp-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.lp-choice:hover .lp-arrow,.lp-choice:focus-visible .lp-arrow{background:var(--lp-fg);border-color:var(--lp-fg);color:var(--lp-bg)}
.lp-choice:hover .lp-arrow svg,.lp-choice:focus-visible .lp-arrow svg{transform:translateX(2px)}

.lp-foot{padding:16px clamp(16px,4vw,48px) calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--lp-line);font-size:13px;color:var(--lp-soft)}
.lp-foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.lp-foot-links{display:flex;flex-wrap:wrap;gap:4px 22px}
.lp-foot-links a{color:var(--lp-soft);text-decoration:none;font-weight:500}
.lp-foot-links a:hover{color:var(--lp-fg)}
.lp-ask{display:flex;align-items:center;gap:8px}
.lp-ask>span{margin-right:4px}
.lp-ai-link{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--lp-line);border-radius:50%;color:var(--lp-fg);transition:background-color .2s,color .2s,border-color .2s}
.lp-ai-link svg{width:17px;height:17px}
.lp-ai-link:hover{background:var(--lp-fg);border-color:var(--lp-fg);color:var(--lp-bg)}
.lp-legal{margin:12px 0 0;font-size:12px;line-height:1.5}

/* Terms of Use and Privacy Notice: a readable column in the same black and white. */
.lp-doc{width:100%;max-width:760px;margin:0 auto;padding:clamp(32px,6vh,64px) clamp(16px,4vw,32px) 72px;font-size:16px;line-height:1.65}
.lp-doc-kicker{margin:0 0 10px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lp-soft)}
.landing .lp-doc h1{margin:0;color:var(--lp-fg);font-size:clamp(36px,6vw,56px);line-height:1;font-weight:800;letter-spacing:-.045em}
.lp-doc-meta{margin:14px 0 0;font-size:14px;color:var(--lp-soft)}
.landing .lp-doc h2{margin:48px 0 12px;color:var(--lp-fg);font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.02em;scroll-margin-top:84px}
.lp-doc p{margin:0 0 14px}
.lp-doc ul{margin:0 0 14px;padding-left:22px}
.lp-doc li{margin:0 0 8px}
.lp-doc a{color:var(--lp-fg);text-underline-offset:3px}
.lp-doc a:hover{color:var(--lp-blue)}
.lp-doc code{font-size:.92em;padding:1px 6px;border-radius:6px;background:var(--lp-card);border:1px solid var(--lp-line)}
.lp-toc{margin:32px 0 0;padding:20px 24px;border:1px solid var(--lp-line);border-radius:18px;background:var(--lp-card)}
.lp-toc ol{margin:0;padding-left:22px;columns:2;column-gap:32px;font-size:14.5px}
.lp-toc li{margin:0 0 6px;break-inside:avoid}
.lp-toc a{text-decoration:none}
.lp-toc a:hover{text-decoration:underline}
.lp-table{width:100%;margin:6px 0 18px;border-collapse:collapse;font-size:14.5px;line-height:1.55}
.lp-table th,.lp-table td{padding:10px 12px;border-bottom:1px solid var(--lp-line);text-align:left;vertical-align:top}
.lp-table th{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-soft)}
.lp-table td:first-child{width:32%;font-weight:600}
/* Company details still to be filled in: impossible to miss. */
.lp-fill{padding:0 4px;border-radius:4px;background:#FFE58A;color:#000;font-weight:600}
.lp-foot-links a[aria-current="page"]{color:var(--lp-fg)}
@media (max-width:620px){
  .lp-toc ol{columns:1}
  .lp-table,.lp-table tbody,.lp-table tr,.lp-table td{display:block;width:auto}
  .lp-table thead{display:none}
  .lp-table tr{padding:10px 0;border-bottom:1px solid var(--lp-line)}
  .lp-table td{padding:2px 0;border:0}
  .lp-table td:first-child{width:auto}
}
.lp-link:focus-visible,.lp-btn:focus-visible,.lp-brand:focus-visible,.lp-foot a:focus-visible{outline:2px solid var(--lp-fg);outline-offset:3px}

/* A short rise into place on arrival. */
@keyframes lp-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.lp-banner,.lp-choice{animation:lp-rise .6s cubic-bezier(.2,.7,.2,1) both}
.lp-choice:nth-child(1){animation-delay:.08s}
.lp-choice:nth-child(2){animation-delay:.16s}

@media (max-height:780px){
  .lp-main{padding-top:14px;padding-bottom:14px}
  .lp-banner{padding-top:24px;padding-bottom:24px}
  .lp-pill{margin-bottom:12px}
  .landing .lp-banner h1{font-size:clamp(30px,4.6vw,52px)}
  .lp-sub{margin-top:12px}
  .lp-kpis{margin-top:18px;padding-top:14px}
  .lp-choice{padding-top:16px;padding-bottom:16px}
}
@media (max-width:620px){
  .lp-head{padding:10px 16px}
  .lp-link,.lp-btn{padding:7px 13px}
  .lp-main{gap:10px;padding:14px 16px}
  .lp-banner{padding:24px 20px;border-radius:22px}
  .lp-pill{margin-bottom:14px;font-size:12px}
  .lp-sub{margin-top:12px;font-size:15px}
  .lp-main{padding-top:10px;padding-bottom:10px}
  .lp-banner{padding:20px 18px}
  .lp-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px;padding-top:12px}
  .lp-kpis dd{font-size:22px}
  .lp-kpis dt{font-size:11.5px}
  .lp-choose{grid-template-columns:minmax(0,1fr);gap:10px}
  .lp-choice{padding:14px 16px;border-radius:18px}
  .lp-choice-go .lp-go-label{display:none}
  .lp-arrow{width:38px;height:38px}
  .lp-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));font-size:12.5px}
  .lp-foot-row{gap:10px 16px}
  .lp-foot-links{gap:4px 16px}
  /* The cards above already offer these on a phone. */
  .lp-foot-dup{display:none}
  .lp-ai-link{width:32px;height:32px}
  .lp-legal{margin-top:8px;font-size:11px}
}
@media (max-width:620px) and (max-height:700px){
  .lp-sub,.lp-choice-t,.lp-pill{display:none}
}
@media (max-width:340px){
  .lp-brand span,.lp-ask>span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lp-banner,.lp-choice{animation:none}
  .lp-link,.lp-btn,.lp-choice,.lp-arrow,.lp-arrow svg,.lp-ai-link{transition:none}
  .lp-choice:hover,.lp-choice:focus-visible{transform:none}
  .lp-brand svg,.lp-mark-sun,.lp-btn{transition:none}
  .lp-brand:hover svg,.lp-brand:focus-visible svg,.lp-btn:hover{transform:none}
}


/* ============ credentials, links and experience ============ */
.credrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;background:var(--surface)}
.credrow b{display:block;font-size:14px}
.credrow small{color:var(--muted);font-size:12.5px}
.credrow .verify{color:var(--blue);font-size:12.5px;font-weight:600;text-decoration:none}
.credrow .verify:hover{text-decoration:underline}
.credrow .rm{background:none;border:0;color:var(--red);cursor:pointer;font-size:13px;font-weight:600;padding:4px 6px;border-radius:6px}
.credrow .rm:hover{background:var(--red-tint)}

.credtag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px;white-space:nowrap}
.credtag.verified{background:var(--green-tint);color:var(--green)}
.credtag.declared{background:var(--blue-tint);color:var(--blue-dark)}

.proflinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.proflink{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;font-size:13px;font-weight:600;text-decoration:none;color:var(--fg);background:var(--surface)}
.proflink:hover{border-color:var(--blue);color:var(--blue)}

.explist{display:grid;gap:10px}
.expitem{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.expitem b{font-size:14.5px}
.expitem .where{font-size:13px;color:var(--muted)}
.expitem .what{font-size:13.5px;color:var(--muted);margin-top:5px}

/* ============ admin console ============
   Deliberately plainer than the member app: this is an instrument panel, not a
   place anyone is meant to enjoy spending time. Shares the same tokens so a
   theme change does not leave it behind. */
body.admin{background:var(--bg)}
.ad-nav{position:sticky;top:0;z-index:40;background:var(--navy);color:#fff;box-shadow:var(--shadow)}
.ad-nav-in{max-width:1400px;margin:0 auto;padding:0 20px;height:var(--nav-h);
  display:flex;align-items:center;gap:22px}
.ad-brand{font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.ad-brand b{font-weight:800;color:var(--orange)}
.ad-tabs{display:flex;gap:2px;margin-left:8px;flex-wrap:wrap}
.ad-tab{appearance:none;border:0;background:transparent;color:rgba(255,255,255,.72);
  font:600 14px/1 var(--body);padding:9px 14px;border-radius:999px;cursor:pointer}
.ad-tab:hover{background:rgba(255,255,255,.1);color:#fff}
.ad-tab[aria-selected="true"]{background:#fff;color:var(--navy)}
.ad-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.ad-who{font-size:13px;color:rgba(255,255,255,.75);font-family:var(--mono)}
.ad-right .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.ad-main{max-width:1400px;margin:0 auto;padding:22px 20px 80px}
.ad-view{display:flex;flex-direction:column;gap:18px}
/* display:flex would otherwise beat the hidden attribute and stack every tab. */
.ad-view[hidden]{display:none}

.ad-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.ad-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.ad-stat-v{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--navy)}
.ad-stat-l{font-size:13px;font-weight:700;margin-top:4px}
.ad-stat-n{font-size:12px;color:var(--faint);margin-top:2px}

.ad-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ad-head .label{margin:0}
.ad-head input[type="search"],.ad-head select{margin-left:auto;max-width:300px}
.ad-count{display:inline-block;margin-left:6px;font-weight:700;color:var(--faint)}

/* Bar chart: thirty stacked columns, no library. */
.ad-chart{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;
  height:150px;align-items:end;margin-top:14px}
.ad-bar{height:100%;display:flex;align-items:flex-end}
/* No background track: a full-height grey column reads as data at a glance,
   which is exactly the thing a chart must not do. A quiet day gets a nub. */
.ad-bar-stack{width:100%;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;border-radius:4px 4px 0 0;overflow:hidden}
.ad-bar-stack i{display:block;width:100%;min-height:0}
.ad-bar-zero{flex:1;background:transparent}
.ad-bar-stack:has(.ad-bar-zero)::after{content:"";display:block;height:2px;background:var(--line)}
.sw-signup{background:var(--blue)}
.sw-unit{background:var(--green)}
.sw-exam{background:var(--orange)}
.ad-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}
.ad-legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}

.ad-table-wrap{overflow-x:auto;margin-top:12px}
.ad-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ad-table th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);padding:0 12px 8px;white-space:nowrap}
.ad-table th.n,.ad-table td.n{text-align:right}
.ad-table td.r{text-align:right;white-space:nowrap}
.ad-table td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.ad-table tbody tr[data-id]{cursor:pointer}
.ad-table tbody tr[data-id]:hover{background:var(--sunk)}
.ad-u{font-weight:700}
.ad-sub{font-size:12px;color:var(--faint);font-family:var(--mono)}
.ad-empty{padding:22px 12px;color:var(--faint)}
.ad-ok{color:var(--green);font-weight:700}
.ad-no{color:var(--red);font-weight:700}
.ad-pill{display:inline-block;margin-left:7px;font-size:10px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--sunk);color:var(--muted)}
.ad-pill.own{background:var(--blue-tint);color:var(--blue-dark)}
.ad-pill.file{background:var(--sunk);color:var(--faint)}
.linkbtn.danger{color:var(--red)}

.ad-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 18px;margin-top:14px}
.ad-kv>div{font-size:14px}
.ad-kv span{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.ad-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ad-chip{font-size:11px;font-weight:700;font-family:var(--mono);padding:3px 9px;
  border-radius:999px;background:var(--blue-tint);color:var(--blue-dark)}

.ad-feed{display:flex;flex-direction:column;margin-top:10px}
.ad-event{display:flex;align-items:flex-start;gap:11px;padding:10px 2px;
  border-top:1px solid var(--line);font-size:14px}
.ad-event:first-child{border-top:0}
.ad-event time{margin-left:auto;font-size:12px;color:var(--faint);white-space:nowrap;padding-left:10px}
/* Prefixed because the member app already owns bare `.unit`, and an unprefixed
   `.dot.unit` inherited its grid layout and padding. */
.ad-event .dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 8px;background:var(--faint)}
.dot.k-signup{background:var(--blue)}
.dot.k-unit{background:var(--green)}
.dot.k-perfect{background:var(--orange)}
.dot.k-pass{background:var(--green)}
.dot.k-fail{background:var(--red)}

.ad-log{display:flex;flex-direction:column;margin-top:10px}
.ad-log-row{display:flex;gap:12px;align-items:baseline;padding:8px 2px;
  border-top:1px solid var(--line);font-size:13.5px}
.ad-log-row:first-child{border-top:0}
.ad-log-row code{font-family:var(--mono);font-size:12px;color:var(--blue-dark);white-space:nowrap}
.ad-log-row time{margin-left:auto;font-size:12px;color:var(--faint);white-space:nowrap}

.ad-units{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ad-unit{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--sunk)}
.ad-unit>summary{cursor:pointer;padding:11px 14px;display:flex;align-items:center;gap:10px;font-size:14px}
.ad-unit>summary span{color:var(--muted)}
.ad-unit>summary .linkbtn{margin-left:auto}
.ad-unit>.form{padding:0 14px 14px}
.ad-unit textarea{font-family:var(--mono);font-size:13px;line-height:1.6;resize:vertical}
#adEditorErr ul{margin:6px 0 0 18px}

@media (max-width:760px){
  .ad-nav-in{height:auto;padding:10px 14px;flex-wrap:wrap;gap:10px}
  .ad-tabs{order:3;width:100%;margin-left:0}
  .ad-right{gap:8px}
  .ad-who{display:none}
  .ad-main{padding:16px 14px 60px}
  .ad-head input[type="search"],.ad-head select{margin-left:0;max-width:none;width:100%}
}

/* ---- admin: import ---- */
.ad-drop{margin-top:14px;border:2px dashed var(--line);border-radius:var(--r);background:var(--sunk);
  padding:28px 20px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:4px;
  transition:border-color .12s,background .12s}
.ad-drop:hover,.ad-drop:focus-visible{border-color:var(--blue);background:var(--blue-tint)}
.ad-drop.over{border-color:var(--blue);background:var(--blue-tint)}
.ad-drop b{font-size:15px}
.ad-drop span{font-size:13px;color:var(--muted)}
.ad-paste{margin-top:12px}
.ad-paste summary{cursor:pointer;font-size:13px;color:var(--blue-dark);font-weight:600;padding:4px 0}
.ad-paste textarea{width:100%;margin-top:8px;font-family:var(--mono);font-size:12.5px;line-height:1.6;resize:vertical}
#adFileName{margin-right:auto}
#adReport{margin-top:16px;display:flex;flex-direction:column;gap:12px}
#adReport .error{margin:0}
.ad-errs,.ad-warns{margin:8px 0 0 18px;font-size:13.5px;line-height:1.7}
.ad-warn{background:var(--orange-tint);border:1px solid var(--orange);border-radius:var(--r-sm);
  padding:12px 14px;font-size:14px;color:var(--fg)}
/* The summary is the "here is what this would do" panel, so it reads as
   neutral until the import has actually happened. */
.ad-summary{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;background:var(--sunk)}
.ad-summary.ok{border-color:var(--green);background:var(--green-tint)}
.ad-summary .ad-kv{margin-top:10px;gap:8px 18px}
.ad-summary .ad-sub{font-weight:400;margin-left:6px}

/* ============ app on a phone, and as an installed app ============ */
/* Below 680px the app takes the shape of a native one: tabs move to a bottom
   bar with icons, dialogs rise as bottom sheets, and taps get press feedback.
   html.standalone (set by pwa.js) is the installed app, which runs edge to
   edge under the status bar and home indicator, so it pads for both. */
html{-webkit-tap-highlight-color:transparent}
button,a,label,.choice,.trail,.person{touch-action:manipulation}
.tab-ico{display:none}
.me-signout{display:none}

@media (max-width:680px){
  :root{--tabbar-h:60px}
  .th-tabs{position:fixed;left:0;right:0;bottom:0;z-index:45;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
    background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .th-tab{height:var(--tabbar-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:0;color:var(--faint);font-size:11px;font-weight:600;letter-spacing:.01em}
  .th-tab:hover{color:var(--faint)}
  .th-tab[aria-selected="true"]{color:var(--blue)}
  .th-tab[aria-selected="true"]::after{left:34%;right:34%;top:0;bottom:auto;height:3px;border-radius:0 0 3px 3px;background:var(--blue)}
  .tab-ico{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
  .th-tab[aria-selected="true"] .tab-ico{fill:color-mix(in srgb,currentColor 14%,transparent)}
  .th-nav-in{justify-content:space-between}
  .nav-right{margin-left:auto}

  main{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 28px)}
  .toast{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px)}
  .me-signout{display:block;width:100%;margin-top:22px;padding:13px}

  /* Press feedback in place of hover, which a finger never triggers. */
  .btn,.trail,.person,.choice,.ts-row,.pg-btn,.pointchip{transition:transform .12s ease,background-color .12s ease}
  .btn:active,.ts-row:active,.pg-btn:active,.pointchip:active{transform:scale(.97)}
  .trail:active,.person:active{transform:scale(.985)}
  .trail:hover{transform:none;box-shadow:var(--shadow)}
  .choice{padding:13px 14px}

  /* Dialogs rise from the bottom edge, like a native sheet. */
  .modal-wrap{place-items:end center;padding:0}
  .modal{width:100%;max-height:88vh;border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding-bottom:calc(24px + env(safe-area-inset-bottom));animation:sheet-in .28s cubic-bezier(.2,.9,.3,1) both}
  .drawer{top:auto;left:0;width:100%;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding-bottom:calc(40px + env(safe-area-inset-bottom));animation:sheet-in .28s cubic-bezier(.2,.9,.3,1) both}
}
@keyframes sheet-in{from{transform:translateY(100%)}to{transform:none}}

/* iOS zooms the page when a focused field's text is under 16px. */
@supports (-webkit-touch-callout:none){
  @media (max-width:680px){ input,select,textarea{font-size:16px !important} }
}

html.standalone body{overscroll-behavior-y:none}
html.standalone .th-nav{padding-top:env(safe-area-inset-top)}
html.standalone .th-nav,html.standalone .th-tabs{-webkit-user-select:none;user-select:none}
html.standalone .auth{padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom))}
html.standalone .th-nav-in{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}

/* The install offer, phones only (pwa.js decides when it appears). */
.install-banner{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:80;
  display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lift);
  transform:translateY(140%);transition:transform .32s cubic-bezier(.2,.9,.3,1)}
.install-banner.in{transform:none}
.install-banner img{border-radius:11px;flex:none}
.ib-text{display:grid;gap:1px;min-width:0;font-size:13px;color:var(--muted);line-height:1.35}
.ib-text b{color:var(--fg);font-size:14px}
.ib-share{width:15px;height:17px;vertical-align:-3px;color:var(--blue)}
.ib-go{flex:none;padding:8px 14px}
.ib-close{flex:none;margin-left:auto;width:30px;height:30px;border-radius:50%;border:0;background:var(--sunk);color:var(--muted);font-size:17px;cursor:pointer}
/* Above the tab bar inside the app. */
@media (max-width:680px){ body:has(.th-tabs) .install-banner{bottom:calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom))} }
@media (prefers-reduced-motion:reduce){
  .modal,.drawer{animation:none}
  .install-banner{transition:none}
}
.offline-note{display:grid;gap:10px;justify-items:center;max-width:460px;margin:40px auto}
.offline-note b{color:var(--fg);font-size:17px}

/* Trails on a phone: the first trails or topic shortcuts should be on screen
   without scrolling past a stack of five full-width fields. Search goes first
   and full width; the four dropdowns pair up in two columns. */
@media (max-width:680px){
  .phead{margin-bottom:14px}
  .phead p{display:none}
  .rankstrip{padding:16px 18px;gap:12px 18px;margin-bottom:18px}
  .rankstrip .rk-badge{display:none}
  .rankstrip h2{font-size:19px}
  .rk-fig b{font-size:20px}
  .rk-figures{gap:20px}
  .tfilters{padding:14px}
  .tfilter-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .tfilter-bar .tfield.grow{grid-column:1/-1;order:-1}
  .tfield select{min-width:0;width:100%}
  .tfilter-foot{margin-top:10px;padding-top:10px}
}
/* Nothing to count and nothing to clear: no empty row under the filters. */
.tfilter-foot:has(.tcount:empty):has(#trailClear[hidden]){display:none}

/* ============ the unit list as a drawer ============ */
/* Desktop keeps the sidebar; the drawer's own pieces stay out of it. */
.units-open,.ut-name,.ut-prog,.ut-earned,.units-close,.units-scrim{display:none}
.crumb-trail{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Up to 980px a unit opens on its content alone: no trail header, no stacked
   list. The list is a side menu waiting off the left edge; it follows the
   finger when swiped in (app.js sets the transform while dragging), and is
   hidden from screen readers and the tab order while closed. */
@media (max-width:980px){
  #view-module{touch-action:pan-y pinch-zoom}
  #view-module .mod-head,#view-module .celebrate{display:none}
  .crumb{margin-bottom:12px}
  .units-open{display:inline-flex;align-items:center;gap:6px;margin-right:4px;flex:none;
    padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
    color:var(--fg);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
  .units-open svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .units-open b{color:var(--muted);font-weight:600}

  .units{position:fixed;top:0;left:0;bottom:0;right:auto;z-index:55;width:min(86vw,380px);max-height:none;
    border-radius:0 var(--r-lg) var(--r-lg) 0;border-left:0;overflow-y:auto;overscroll-behavior:contain;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
    box-shadow:12px 0 32px rgba(3,45,96,.22);
    transform:translateX(-100%);visibility:hidden;
    transition:transform .3s cubic-bezier(.2,.9,.3,1),visibility 0s linear .3s}
  .units.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.9,.3,1)}
  .units.dragging{visibility:visible;transition:none}
  .units-h{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;gap:12px;padding:16px 16px 14px}
  .units-trail{display:grid;gap:6px;min-width:0;flex:1}
  .ut-name{display:block;font-size:16px;line-height:1.3}
  .ut-prog{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
  .ut-prog .bar{flex:1}
  .ut-earned{display:block;font-size:13px;font-weight:600;color:var(--green)}
  .units-close{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:18px;cursor:pointer}
  .unit{padding:15px 16px}

  .units-scrim{display:block;position:fixed;inset:0;z-index:54;background:rgba(3,45,96,.42);
    opacity:0;pointer-events:none;transition:opacity .3s ease}
  body.drawer-open .units-scrim{opacity:1;pointer-events:auto}
  body.drawer-dragging .units-scrim{opacity:.55;transition:none}
}
@media (prefers-reduced-motion:reduce){
  .units,.units.open,.units-scrim{transition:none}
}
/* The points scale under a knowledge check's heading. */
.stakes-scale{display:block;margin-top:3px;font-size:12.5px;color:var(--faint)}

/* Trail pages: first, previous, page n of m, next, last. Spans the grid. */
.trails.is-loading{opacity:.55;pointer-events:none;transition:opacity .15s ease}
.pager{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;padding:4px 0 2px}
.pg-btn{min-width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-sm);color:var(--fg);font:inherit;font-size:20px;line-height:1;cursor:pointer;box-shadow:var(--shadow)}
.pg-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.pg-btn:disabled{opacity:.4;cursor:default;box-shadow:none}
.pg-at{min-width:120px;text-align:center;font-size:14px;color:var(--muted)}
.pg-at b{color:var(--fg)}

/* ============ simulator ============
   Journey cards, the step screen with its Salesforce-like artefact, the task
   and its feedback, and the results. */
.sim-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sim-card{display:flex;flex-direction:column;gap:12px}
.sim-card h2{font-size:21px;line-height:1.25}
.sim-card p{margin:0;color:var(--muted);line-height:1.55}
.sim-intro h1{font-size:28px}
.sim-intro .lead{color:var(--fg)}
.sim-product{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.sim-stages{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sim-stages li{font-size:12.5px;padding:3px 9px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);color:var(--muted)}
.sim-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--muted)}
.sim-meta b{color:var(--fg)}
.sim-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:4px}
/* The scenario menu of a picker journey. */
.sim-pick-intro{margin:12px 0 0;font-size:14.5px;color:var(--muted)}
.sim-pick-stage{margin-top:22px}
.sim-pick-stage>.label{margin:0 0 10px}
.sim-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
#view-sim .sim-pick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;margin:0;padding:14px 16px;color:var(--fg);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
#view-sim .sim-pick:hover,#view-sim .sim-pick:focus-visible{border-color:var(--blue);box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.sim-pick-no{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sunk);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--muted)}
.sim-pick.is-done .sim-pick-no{background:var(--blue);border-color:var(--blue);color:#fff}
.sim-pick-body{display:grid;gap:3px;min-width:0}
.sim-pick-body b{font-size:15px;line-height:1.3}
.sim-pick-body span{font-size:13px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sim-pick-status{white-space:nowrap;font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--sunk);color:var(--muted)}
.sim-pick-status.ok{background:var(--green-tint);color:var(--green)}
.sim-pick-status.part{background:var(--orange-tint);color:var(--orange-dark)}
.sim-pick-status.bad{background:var(--red-tint);color:var(--red)}
@media (max-width:560px){.sim-pick-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){#view-sim .sim-pick{transition:none}#view-sim .sim-pick:hover{transform:none}}

.sim-head{margin-bottom:18px}
.sim-head-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sim-head h1{font-size:22px;margin-top:2px}
.sim-head .lead{margin:6px 0 0}
.sim-score{text-align:right;flex:none}
.sim-score b{display:block;font-size:28px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.sim-score span{font-size:12.5px;color:var(--muted)}
.sim-progress{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;counter-reset:st}
.sim-progress li{counter-increment:st;position:relative;padding-top:10px;font-size:12px;font-weight:600;color:var(--faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sim-progress li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:4px;background:var(--line)}
.sim-progress li.done{color:var(--muted)}
.sim-progress li.done::before{background:var(--green)}
.sim-progress li.now{color:var(--fg)}
.sim-progress li.now::before{background:var(--blue)}

.sim-step h2{font-size:21px;margin-top:4px}
.sim-step-meta{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.sim-story{margin:8px 0 16px;line-height:1.6;color:var(--fg)}

/* The artefact: a record, setup page, table, email, code or journey canvas */
.sim-screen{margin:0 0 20px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.sim-screen figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 14px;background:var(--sunk);border-bottom:1px solid var(--line)}
.sim-screen figcaption b{font-size:15px}
.sim-screen figcaption small{color:var(--muted);font-size:13px}
.sim-obj{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.sim-screen dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.sim-row{padding:9px 14px;border-bottom:1px solid var(--line);min-width:0}
.sim-row dt{font-size:12px;color:var(--faint)}
.sim-row dd{margin:2px 0 0;font-weight:600;font-size:14px;overflow-wrap:anywhere}
.sim-setup dl,.sim-email dl{grid-template-columns:minmax(0,1fr)}
.sim-setup .sim-row,.sim-email .sim-row{display:grid;grid-template-columns:minmax(0,12em) minmax(0,1fr);gap:10px;align-items:baseline}
.sim-setup .sim-row dd,.sim-email .sim-row dd{margin:0}
.sim-email-body{margin:0;padding:14px;line-height:1.6}
.sim-table-wrap{overflow-x:auto}
.sim-table table{width:100%;border-collapse:collapse;font-size:13.5px}
.sim-table th,.sim-table td{text-align:left;padding:8px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.sim-table th{font-size:12px;color:var(--faint);font-weight:600}
.sim-code pre{margin:0;padding:14px 16px;overflow-x:auto;background:#101828;color:#E4E7EC;font-family:var(--mono);font-size:13px;line-height:1.6}
.sim-canvas ol{list-style:none;margin:0;padding:16px;display:grid;gap:0}
.sim-canvas li{position:relative;padding:9px 12px;border:1px solid var(--line-strong,var(--line));border-radius:8px;background:var(--surface);font-size:14px;font-weight:600}
.sim-canvas li+li{margin-top:18px}
.sim-canvas li+li::before{content:"";position:absolute;left:24px;top:-19px;height:18px;border-left:2px solid var(--line-strong,var(--line))}
.sim-note{padding:14px 16px;background:var(--blue-tint);color:var(--blue-dark);border-color:transparent;line-height:1.55}

/* The task */
.sim-task{display:grid;gap:9px;min-width:0}
/* Grid children would otherwise grow to fit a wide canvas and widen the page. */
.sim-task>*,.sim-step,.jb{min-width:0}
.sim-task h3{font-size:16px;margin:0 0 2px}
.sim-task .qhint{margin:0 0 2px;font-size:13px;color:var(--faint)}
.sim-config{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.sim-field select{width:100%}
.sim-field.is-right select{border-color:var(--green)}
.sim-field.is-wrong select{border-color:var(--red)}
.sim-mark{font-size:12.5px;font-weight:600}
.sim-field.is-right .sim-mark{color:var(--green)}
.sim-field.is-wrong .sim-mark{color:var(--red)}
.sim-order{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sim-order li{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.sim-pos{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--sunk);font-weight:700;font-size:13px}
.sim-item{flex:1;min-width:0;font-size:14.5px}
.sim-move{display:flex;gap:6px;flex:none}
.sim-move .btn{padding:4px 10px;font-size:15px;line-height:1.2}
.sim-fb{margin-top:6px;padding:14px 16px;border-radius:var(--r-sm);border:1px solid;outline:none}
.sim-fb b{font-size:15px}
.sim-fb-points{font-size:13px;color:var(--muted);white-space:nowrap}
.sim-fb p{margin:6px 0 0;line-height:1.55}
.sim-fb.ok{background:var(--green-tint);border-color:var(--green)}
.sim-fb.part{background:var(--orange-tint);border-color:var(--orange)}
.sim-fb.bad{background:var(--red-tint);border-color:var(--red)}
.sim-solution{margin-top:10px}
.sim-solution span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.sim-solution ul,.sim-solution ol{margin:6px 0 0;padding-left:20px;line-height:1.5}
.sim-nav{display:flex;justify-content:flex-end;margin-top:6px}

/* Results */
.sim-stage-scores{display:grid;gap:10px;margin-top:12px}
.sim-stage-row{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;align-items:center;gap:12px;font-size:14px}
.sim-stage-row b{font-variant-numeric:tabular-nums}
.sim-review{display:grid;gap:8px;margin-top:12px}
.sim-review details{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px}
.sim-review summary{cursor:pointer;font-size:14px}
.sim-review p{margin:8px 0 0;line-height:1.55}
.sim-review ul{margin:6px 0 0;padding-left:20px}
.sim-result{margin-bottom:18px}
#view-sim .card+.card{margin-top:18px}
/* Scenario cards sit in a grid, which spaces them itself. */
#view-sim .sim-pick-grid>.card{margin:0}
#view-sim .sim-actions{margin-top:18px}
.sim-score-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}

@media (max-width:760px){
  .sim-list{grid-template-columns:minmax(0,1fr)}
  .sim-screen dl{grid-template-columns:minmax(0,1fr)}
  .sim-setup .sim-row,.sim-email .sim-row{grid-template-columns:minmax(0,1fr);gap:2px}
  .sim-progress li{font-size:0;padding-top:6px}
  .sim-head-top{flex-wrap:wrap}
  .sim-stage-row{grid-template-columns:minmax(0,7em) minmax(0,1fr) auto}
  .sim-move .btn{padding:6px 12px}
}

/* Journey Builder canvas: a palette of activities beside a dotted canvas where
   the journey runs left to right, splits fan out into labelled branch rows. */
.jb{display:grid;grid-template-columns:200px minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.jb.is-locked{grid-template-columns:minmax(0,1fr)}
.jb-palette{padding:12px;border-right:1px solid var(--line);background:var(--sunk);display:grid;align-content:start;gap:12px;max-height:620px;overflow-y:auto;overscroll-behavior:contain}
.jb-hint{margin:0;font-size:12px;color:var(--faint);line-height:1.45}
.jb-group h4{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.jb-group{display:grid;gap:6px}
.jb-tool{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13px;font-weight:600;cursor:grab;user-select:none}
.jb-tool:active{cursor:grabbing}
.jb-palette .jb-group{gap:4px}
.jb-tool{padding:4px 8px 4px 5px;font-size:12.5px;line-height:1.25}
.jb-tool .jb-ico{width:22px;height:22px}
.jb-tool .jb-ico svg{width:13px;height:13px}
.jb-ico{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff}
.jb-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jb-ico.g-advertising{background:#6941C6}
.jb-ico.g-flow{background:#B54708}
.jb-ico.g-customer{background:#0F7552}
.jb-ico.g-sales{background:#0B6E99}
.jb-ico.g-custom{background:#475467}
.jb-ico.g-entry{background:#101828}

/* Positioned, so absolutely placed labels inside scroll with it instead of widening the page. */
.jb-canvas{position:relative;overflow:auto;min-height:220px;padding:22px 18px;
  background-color:var(--paper-2,var(--bg));background-image:radial-gradient(var(--line-strong,var(--line)) 1px,transparent 1px);background-size:16px 16px}
.jb-flow{display:flex;align-items:flex-start;width:max-content}
.jb-path{display:flex;align-items:flex-start}
.jb-node{flex:none;width:186px;padding:10px;border:1px solid var(--line-strong,var(--line));border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.jb-node-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px}
.jb-node-head b{flex:1;min-width:0}
.jb-node select{width:100%;font-size:12.5px;padding:6px 8px;border:1px solid var(--line-strong,var(--line));border-radius:8px;background:var(--surface);color:var(--fg)}
.jb-del{flex:none;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--faint);font-size:17px;line-height:1;cursor:pointer}
.jb-del:hover{background:var(--red-tint);color:var(--red)}
.jb-slot,.jb-link{flex:none;position:relative;width:46px;height:44px;margin-top:20px;border:0;background:transparent;padding:0}
.jb-slot::before,.jb-link::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid var(--line-strong,var(--line))}
.jb-slot span{position:relative;display:grid;place-items:center;width:24px;height:24px;margin:0 auto;border-radius:50%;background:var(--surface);border:1.5px solid var(--blue);color:var(--blue);font-weight:700;font-size:15px;line-height:1;cursor:pointer;transition:transform .12s,background-color .12s}
.jb-slot:hover span,.jb-slot:focus-visible span,.jb-slot.is-over span{background:var(--blue);color:#fff;transform:scale(1.15)}
.jb-slot:focus-visible{outline:none}
.jb-end{flex:none;margin-top:31px;padding:3px 10px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--faint)}
.jb-branches{display:grid;gap:14px;padding-left:18px;margin-left:0;border-left:2px solid var(--line-strong,var(--line));position:relative}
.jb-branches::before{content:"";position:absolute;left:-20px;top:41px;width:20px;border-top:2px solid var(--line-strong,var(--line))}
.jb-branch{display:flex;align-items:flex-start}
.jb-blabel{flex:none;margin-top:30px;padding:3px 9px;border-radius:999px;background:var(--blue-tint);color:var(--blue-dark);font-size:11.5px;font-weight:700}
.jb-join{flex:none;display:flex;align-items:center;gap:6px;margin-top:22px;padding:4px 6px 4px 4px;border:1px dashed var(--line-strong,var(--line));border-radius:999px;background:var(--surface);font-size:12.5px}
.jb-join .jb-del{width:20px;height:20px;font-size:15px}
.jb-after{flex:none;margin-top:31px;margin-left:12px;padding:3px 9px;border-radius:999px;background:var(--sunk);border:1px dashed var(--line-strong,var(--line));font-size:11.5px;font-weight:600;color:var(--faint)}
.jb-msg{grid-column:1/-1;margin:0;padding:0 14px;font-size:13px;color:var(--red)}
.jb-msg:not(:empty){padding:8px 14px;border-top:1px solid var(--line)}
.jb-menu{position:absolute;z-index:60;display:grid;align-content:start;min-width:230px;max-height:420px;overflow-y:auto;overscroll-behavior:contain;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow-lift)}
.jb-menu-h{margin:8px 9px 3px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.jb-menu-h:first-child{margin-top:3px}
.jb-menu button{display:flex;align-items:center;gap:9px;padding:6px 9px;border:0;border-radius:7px;background:transparent;color:var(--fg);font:inherit;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer}
.jb-menu button:hover,.jb-menu button:focus-visible{background:var(--sunk);outline:none}
.sim-checks{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:14px}
.sim-checks li{display:flex;gap:8px}
.sim-checks li.pass span:first-child{color:var(--green);font-weight:700}
.sim-checks li.fail span:first-child{color:var(--red);font-weight:700}
.sim-model{margin:6px 0 0;font-size:13.5px;line-height:1.6}
@media (max-width:760px){
  .jb{grid-template-columns:minmax(0,1fr)}
  .jb-palette{display:none}
  .jb-node{width:168px}
}

/* ============ site theme ============
   The look shared by the landing page, sign-in, registration and the app:
   white surfaces on light grey, hairline borders, soft shadows, Inter
   throughout and one blue accent. The admin console has no site class and
   keeps the plain default. Selectors are doubled up with :root to outrank the
   default theme's dark-mode rules. */
html.site:root{
  --paper:#FFFFFF;--paper-2:#F7F8FA;--ink:#101828;--ink-soft:#475467;--rule:#E4E7EC;--line-strong:#D0D5DD;
  --serif:var(--body);--typewriter:var(--body);--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --navy:#0F1B2D;--navy-2:#172B48;
  --blue:#0B63CE;--blue-dark:#0950A6;--blue-tint:#EEF4FD;--sky:#7CB8FF;
  --orange:#F28C28;--orange-dark:#B45309;--orange-tint:#FEF3E6;
  --green:#0F7552;--green-tint:#E8F6F0;
  --red:#C0362C;--red-tint:#FDECEA;
  --bg:#F7F8FA;--surface:#FFFFFF;--sunk:#F2F4F7;--line:#E4E7EC;
  --fg:#101828;--muted:#475467;--faint:#5B6475;--fill:#0B63CE;--fill-dark:#0950A6;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --shadow-lift:0 4px 8px -2px rgba(16,24,40,.08),0 12px 24px -4px rgba(16,24,40,.10);
  --shadow-window:0 1px 2px rgba(16,24,40,.04),0 24px 48px -12px rgba(16,24,40,.18);
  --focus:0 0 0 3px rgba(11,99,206,.22);
}
@media (prefers-color-scheme:dark){html.site:root:not([data-theme="light"]){
  --paper:#0C111B;--paper-2:#111827;--ink:#EAEEF4;--ink-soft:#AAB4C3;--rule:#273142;--line-strong:#344054;
  --navy:#0A101B;--navy-2:#111A2B;
  --blue:#5AA2FF;--blue-dark:#8BBEFF;--blue-tint:#13243D;--sky:#7CB8FF;
  --orange-dark:#F6B067;--orange-tint:#33240F;
  --green:#4CC38A;--green-tint:#102A20;
  --red:#FF8A80;--red-tint:#3A1614;
  --bg:#0C111B;--surface:#141B27;--sunk:#101622;--line:#273142;
  --fg:#EAEEF4;--muted:#AAB4C3;--faint:#8E99AB;--fill:#1F6FD6;--fill-dark:#185DB5;
  --lockA:#39414F;--lockB:#2A313C;
  --shadow:0 1px 2px rgba(0,0,0,.35);
  --shadow-lift:0 12px 28px -6px rgba(0,0,0,.55);
  --shadow-window:0 24px 48px -12px rgba(0,0,0,.6);
  --focus:0 0 0 3px rgba(90,162,255,.3);
}}
html.site:root[data-theme="dark"]{
  --paper:#0C111B;--paper-2:#111827;--ink:#EAEEF4;--ink-soft:#AAB4C3;--rule:#273142;--line-strong:#344054;
  --navy:#0A101B;--navy-2:#111A2B;
  --blue:#5AA2FF;--blue-dark:#8BBEFF;--blue-tint:#13243D;--sky:#7CB8FF;
  --orange-dark:#F6B067;--orange-tint:#33240F;
  --green:#4CC38A;--green-tint:#102A20;
  --red:#FF8A80;--red-tint:#3A1614;
  --bg:#0C111B;--surface:#141B27;--sunk:#101622;--line:#273142;
  --fg:#EAEEF4;--muted:#AAB4C3;--faint:#8E99AB;--fill:#1F6FD6;--fill-dark:#185DB5;
  --lockA:#39414F;--lockB:#2A313C;
  --shadow:0 1px 2px rgba(0,0,0,.35);
  --shadow-lift:0 12px 28px -6px rgba(0,0,0,.55);
  --shadow-window:0 24px 48px -12px rgba(0,0,0,.6);
  --focus:0 0 0 3px rgba(90,162,255,.3);
}
html.site h1,html.site h2,html.site h3{letter-spacing:-.02em;font-weight:700}
html.site .label,html.site .tfield>span{font-weight:600;letter-spacing:.05em;color:var(--faint)}

/* Navigation: a white bar with a hairline, not a coloured band */
html.site .brand{color:var(--ink)}
html.site .th-nav{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
html.site .th-tab{color:var(--muted)}
html.site .th-tab:hover,html.site .th-tab[aria-selected="true"]{color:var(--ink)}
html.site .th-tab[aria-selected="true"]::after{background:var(--blue);height:2px;left:14px;right:14px;border-radius:2px 2px 0 0}
html.site .tab-badge{background:#C0362C;color:#fff}
html.site .pointchip{background:var(--sunk);color:var(--ink);border:1px solid var(--line)}
html.site .pointchip:hover{background:var(--surface);border-color:var(--line-strong)}
html.site .pointchip .dot{color:#3b2200;background:var(--orange)}
html.site .signout{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px}
html.site .signout:hover{color:var(--ink);border-color:var(--line-strong);background:var(--sunk)}
html.site .streakchip{border:1px solid var(--line);color:var(--ink)}
@media (max-width:680px){
  html.site .th-tabs{border-top:1px solid var(--line);background:rgba(255,255,255,.94)}
  html.site .th-tab:hover{color:var(--muted)}
  html.site .th-tab[aria-selected="true"]:hover{color:var(--ink)}
}
@media (max-width:680px) and (prefers-color-scheme:dark){
  html.site:root:not([data-theme="light"]) .th-tabs{background:rgba(20,27,39,.94)}
}
@media (max-width:680px){
  html.site:root[data-theme="dark"] .th-tabs{background:rgba(20,27,39,.94)}
}

/* Buttons */
html.site .btn{color:var(--fg);background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.05);font-weight:600;transition:background-color .15s,border-color .15s,box-shadow .15s,color .15s}
html.site .btn:hover{color:var(--fg);background:var(--sunk);border-color:var(--line-strong)}
html.site .btn:focus-visible,html.site .signout:focus-visible,html.site .pointchip:focus-visible{outline:none;box-shadow:var(--focus)}
html.site .btn.ghost{background:transparent;box-shadow:none}
html.site .btn.ghost:hover{background:var(--sunk)}
html.site .btn.primary{background:var(--fill);border-color:var(--fill);color:#fff}
html.site .btn.primary:hover{background:var(--fill-dark);border-color:var(--fill-dark);color:#fff}
html.site .btn.danger{color:var(--red);border-color:var(--line-strong)}
html.site .btn.danger:hover{background:var(--red-tint);border-color:var(--red)}
html.site .btn[disabled]{box-shadow:none}
html.site .pill{border:1px solid var(--line);color:var(--fg);background:var(--surface)}
html.site .pill:hover{color:var(--fg);border-color:var(--line-strong);background:var(--sunk)}
html.site .pill[aria-pressed="true"]{background:var(--blue-tint);border-color:var(--blue);color:var(--blue-dark)}

/* Panels: hairline borders and soft shadows */
html.site :is(.card,.trail,.units,.rail,.person,.tfilters,.searchbar,.msg-layout,.exam-bar,.modal,.mod-head,.unit-body,.exam-q,.review-q){border:1px solid var(--line);box-shadow:var(--shadow)}
html.site .trail:hover,html.site .person:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)}
/* Trail cards: a slim colour edge instead of a full colour block */
html.site .trail-top{background:var(--surface);border-top:4px solid var(--cardA,#0B63CE);min-height:0;padding:16px 18px 0}
html.site .trail-top .tt-type{color:var(--faint);opacity:1}
html.site .trail-top{align-items:center}
html.site .trail-top .hexwrap{margin-bottom:0}
html.site .trail-top .hex.sz-md{width:44px;height:48px;font-size:12px}
html.site .trail-body{padding-top:12px}
html.site .drawer{border-left:1px solid var(--line);box-shadow:var(--shadow-lift)}
html.site .scrim{background:rgba(16,24,40,.45)}
html.site .modal-scrim{background:rgba(16,24,40,.5)}
html.site .toast{border:0;border-radius:10px;box-shadow:var(--shadow-lift);background:#101828;color:#fff}
html.site .hexwrap .tickmark,html.site .unit.done .u-tick{background:#0F7552;border-color:#0F7552;color:#fff}
html.site .rung.now{background:var(--blue-tint);color:var(--blue-dark)}
html.site .rung.on{color:var(--fg)}
html.site .qdot[aria-current="true"]{background:var(--fill);border-color:var(--fill);color:#fff}

/* Fields */
html.site :is(.field input,.field select,.tfield select,.tfield input,.msg-compose textarea,.d-compose textarea,.vis-silent select,.searchbar select,.lb-country select){border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);box-shadow:0 1px 2px rgba(16,24,40,.04)}
html.site :is(.field input,.field select,.tfield select,.tfield input,.msg-compose textarea,.d-compose textarea,.vis-silent select,.searchbar select,.lb-country select):focus{outline:none;border-color:var(--blue);box-shadow:var(--focus)}
html.site .field .chk input{accent-color:var(--blue)}
html.site .tfield select.set{border-color:var(--blue);background:var(--blue-tint);color:var(--blue-dark)}
html.site .choice{border:1px solid var(--line)}
html.site .choice:hover{border-color:var(--line-strong);background:var(--sunk)}
html.site .choice.right{border-color:var(--green);background:var(--green-tint)}
html.site .choice.wrong{border-color:var(--red);background:var(--red-tint)}
html.site .choice.missed{border:1px dashed var(--green);background:var(--green-tint)}

/* Progress */
html.site .bar{height:8px;background:var(--line);border-radius:99px}
html.site .bar i{background:var(--green);border-radius:99px}

/* Dark headers on the trails page and exams */
html.site :is(.rankstrip,.exam-hero){background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;border:0;box-shadow:var(--shadow-lift)}
html.site .rankstrip::after{display:none}
html.site :is(.rankstrip,.exam-hero) :is(h1,h2){color:#fff}
html.site :is(.rankstrip,.exam-hero) :is(.sub,small),html.site .rk-fig span{color:#AFC0D6}
html.site .rk-fig b{font-weight:700;color:#fff}
html.site .rk-next .bar{background:rgba(255,255,255,.16)}
html.site .rk-next .bar i{background:var(--sky)}
html.site .verdict{border:0;box-shadow:var(--shadow-lift)}
html.site .verdict.pass{background:linear-gradient(120deg,#0E6B4C,#12805C)}
html.site .verdict.fail{background:linear-gradient(120deg,#8A2A20,#B4432F)}

/* Code stays dark in both themes */
html.site .prose pre{background:#101828;border:1px solid #1D2939}
html.site .prose pre code{color:#E4E7EC}

/* Messages, sharing and review */
html.site .share-link{border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:background-color .15s,border-color .15s}
html.site .share-link:hover{background:var(--sunk);border-color:var(--line-strong)}
html.site .review-q.ok{border-left:4px solid var(--green)}
html.site .review-q.bad{border-left:4px solid var(--red)}
html.site .review-q.part{border-left:4px solid var(--orange)}
html.site .review-q.blank{border-left:4px solid var(--faint)}
html.site .msg-text{border:1px solid var(--line)}
html.site .msg-bubble.is-mine .msg-text{background:var(--fill);border-color:var(--fill);color:#fff}
html.site .career-new{background:var(--blue-tint);color:var(--blue-dark)}
html.site .career-item{border:1px solid var(--line)}
html.site .msg-row.is-open{background:var(--blue-tint)}
html.site .msg-side,html.site .msg-side-head,html.site .msg-head,html.site .msg-compose{border-color:var(--line)}

/* Sign-in and registration */
html.site .auth{position:relative;overflow:hidden;background:radial-gradient(70% 60% at 80% 0%,var(--blue-tint) 0%,transparent 70%),var(--bg)}
html.site .auth-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-window)}

/* ============ sign-up pages ============
   /register (professionals) and /register/recruiter, in the landing page's black
   and white: a black panel saying what the account is for, beside a white form.
   Dark mode swaps the two colours, as on the landing page. */
.su-main{flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(16px,2.4vw,28px);align-items:stretch;
  width:100%;max-width:1080px;margin:0 auto;padding:clamp(20px,4vh,44px) clamp(16px,4vw,48px)}
.su-panel{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding:clamp(28px,4.5vh,48px) clamp(24px,3.6vw,48px);
  border-radius:28px;background:var(--lp-fg);color:var(--lp-bg);animation:lp-rise .6s cubic-bezier(.2,.7,.2,1) both}
.su-panel::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(color-mix(in srgb,var(--lp-bg) 22%,transparent) 1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(200deg,#000 0%,transparent 55%);mask-image:linear-gradient(200deg,#000 0%,transparent 55%)}
.su-kicker{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--lp-bg) 62%,var(--lp-fg))}
.landing .su-panel h2{margin:0;color:inherit;font-size:clamp(30px,3.6vw,46px);line-height:1.02;font-weight:800;letter-spacing:-.045em}
.su-points{list-style:none;margin:clamp(22px,4vh,36px) 0 0;padding:0;display:grid;gap:14px}
.su-points li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;row-gap:2px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--lp-bg) 18%,transparent)}
/* A tick in the panel's own colours, so it follows dark mode. */
.su-points li::before{content:"";grid-row:1/span 2;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--lp-bg)}
.su-points li::after{content:"";position:absolute;left:7px;top:19px;width:4px;height:8px;border:solid var(--lp-fg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.su-points b{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.su-points span{font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--lp-bg) 70%,var(--lp-fg))}
.su-fine{margin:auto 0 0;padding-top:24px;font-size:12.5px;line-height:1.5;color:color-mix(in srgb,var(--lp-bg) 55%,var(--lp-fg))}

.su-card{display:flex;flex-direction:column;padding:clamp(24px,4vh,40px) clamp(22px,3vw,40px);border:1px solid var(--lp-line);border-radius:28px;background:var(--lp-bg);
  animation:lp-rise .6s .08s cubic-bezier(.2,.7,.2,1) both}
.landing .su-card h1{margin:0;color:var(--lp-fg);font-size:clamp(26px,2.6vw,32px);line-height:1.1;font-weight:800;letter-spacing:-.035em}
.su-lead{margin:8px 0 20px;font-size:14.5px;line-height:1.5;color:var(--lp-soft)}
.su-invite{margin:-8px 0 18px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:14px;font-weight:600}
.su-invite[hidden]{display:none}
.su-card .error{margin:0 0 14px}
.su-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.su-form .field{gap:6px;align-content:start}
.su-form .field[hidden]{display:none}
.su-form .su-seg,.su-form .auth-terms,.su-form .su-submit{grid-column:1/-1}
/* An odd number of fields (a professional's three, a company recruiter's five): the password takes the last row on its own. */
.su-form[data-account="member"] .field:has(#password),.su-form:has(#companyNameField:not([hidden])) .field:has(#password){grid-column:1/-1}
html.site body.signup .label{color:var(--lp-soft);letter-spacing:.06em}
html.site body.signup .field input,html.site body.signup .field select{height:46px;padding:0 13px;border:1px solid color-mix(in srgb,var(--lp-fg) 18%,transparent);border-radius:12px;
  background:var(--lp-bg);color:var(--lp-fg);font:inherit;font-size:15px;box-shadow:none;transition:border-color .15s,box-shadow .15s}
html.site body.signup .field input:focus,html.site body.signup .field select:focus{outline:none;border-color:var(--lp-fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--lp-fg) 14%,transparent)}
html.site body.signup .hint{color:var(--lp-soft)}
.su-seg{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr}
.su-seg legend{grid-column:1/-1;margin:0 0 6px;padding:0}
.su-seg label{position:relative;cursor:pointer}
.su-seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.su-seg span{display:block;padding:11px 10px;border:1px solid color-mix(in srgb,var(--lp-fg) 18%,transparent);text-align:center;font-size:14px;font-weight:600;color:var(--lp-soft);transition:background-color .15s,color .15s,border-color .15s}
.su-seg label:first-of-type span{border-radius:12px 0 0 12px}
.su-seg label:last-of-type span{border-left:0;border-radius:0 12px 12px 0}
.su-seg input:checked+span{background:var(--lp-fg);border-color:var(--lp-fg);color:var(--lp-bg)}
.su-seg input:focus-visible+span{outline:2px solid var(--lp-fg);outline-offset:2px}
.su-form .auth-terms{color:var(--lp-soft)}
.su-submit{height:50px;border:0;border-radius:999px;background:var(--lp-fg);color:var(--lp-bg);font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;
  transition:transform .2s,box-shadow .25s,opacity .2s}
.su-submit:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--lp-fg) 70%,transparent)}
.su-submit:active{transform:none}
.su-submit:disabled{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.su-submit:focus-visible{outline:2px solid var(--lp-fg);outline-offset:3px}
.su-alt{margin:16px 0 0;font-size:14px;color:var(--lp-soft);text-align:center}
.su-alt a,.su-card .auth-terms a{color:var(--lp-fg);font-weight:600;text-underline-offset:3px}
.su-switch{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding:14px 16px;border:1px solid var(--lp-line);border-radius:18px;
  background:var(--lp-card);color:var(--lp-fg);text-decoration:none;font-size:14px;line-height:1.45;transition:border-color .2s,transform .2s}
.su-card .su-alt+.su-switch{margin-top:18px}
.su-switch:hover,.su-switch:focus-visible{border-color:var(--lp-fg);transform:translateY(-1px);outline:none}
.su-switch .lp-arrow{flex:none;width:38px;height:38px}
.su-switch:hover .lp-arrow,.su-switch:focus-visible .lp-arrow{background:var(--lp-fg);border-color:var(--lp-fg);color:var(--lp-bg)}

/* Log in: the form alone, centred, one field per row. */
.su-login{grid-template-columns:minmax(0,1fr);max-width:480px;align-content:center}
.su-login .su-form{grid-template-columns:minmax(0,1fr)}
.su-login .su-alt{line-height:1.6}

/* Narrow screens: the form comes first, the pitch after it. */
@media (max-width:860px){
  .su-main{grid-template-columns:minmax(0,1fr)}
  .su-card{order:-1}
}
@media (max-width:520px){
  .su-main{padding:12px 16px 20px;gap:12px}
  .su-card,.su-panel{border-radius:22px;padding:22px 18px}
  .su-form{grid-template-columns:minmax(0,1fr)}
  .su-form .field{grid-column:1/-1}
  .lp-head .lp-link{display:none}
}

/* ---------- Trailskill Pro ---------- */
/* The Simulator tab carries a small "Pro" tag for members without Pro. */
.tab-pro{display:none;margin-left:6px;padding:1px 6px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.04em;
  background:#F5B301;color:#1A1300;vertical-align:2px}
.th-tab.is-locked .tab-pro{display:inline-block}
@media (max-width:680px){
  .th-tab.is-locked .tab-pro{position:absolute;top:6px;left:calc(50% + 8px);margin:0;font-size:8.5px;padding:0 4px}
}

/* LinkedIn verified mark, next to a name. */
.li-verified{display:inline-flex;width:.95em;height:.95em;margin-left:.3em;vertical-align:-.08em;color:#0A66C2;flex:none}
.li-verified svg{width:100%;height:100%;fill:currentColor}

/* Upgrade page. */
.pro-hero{background:linear-gradient(135deg,#0B1F3A,#0A66C2);color:#fff;border-radius:var(--r);padding:clamp(24px,5vw,44px)}
.pro-kicker{display:inline-block;background:#F5B301;color:#1A1300;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 11px}
.pro-hero h1{font-size:clamp(26px,4vw,38px);line-height:1.12;margin:14px 0 10px;color:#fff}
.pro-hero p{max-width:62ch;color:#DCE8F7;margin:0}
.pro-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.pro-stats div{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);padding:14px}
.pro-stats b{display:block;font-size:26px;line-height:1.1}
.pro-stats span{font-size:13px;color:#DCE8F7}
.pro-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
/* The simulator view spaces stacked cards; the grid gap does that here. */
#view-sim .pro-benefits .card{margin-top:0}
.pro-benefits h3{font-size:17px;margin:0 0 6px}
.pro-benefits p{margin:0;color:var(--muted);font-size:14.5px}
.pro-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px;max-width:760px}
.pro-plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:8px;align-content:start}
.pro-plan.is-best{border:2px solid var(--blue)}
.pro-flag{position:absolute;top:-12px;right:16px;background:var(--blue);color:#fff;font-weight:700;font-size:12px;border-radius:999px;padding:3px 10px}
.pro-price{font-size:36px;font-weight:800;line-height:1.1}
.pro-price small{font-size:15px;font-weight:600;color:var(--muted);margin-left:2px}
.pro-tax{margin:0;color:var(--muted);font-size:13.5px}
.pro-plan .btn{margin-top:8px;justify-content:center}
.pro-fine{margin:0;color:var(--faint);font-size:12.5px}
.pro-legal{max-width:760px;color:var(--muted);font-size:12.5px;margin-top:16px}
#proErr{margin-top:14px;max-width:760px}
@media (max-width:620px){
  .pro-stats,.pro-benefits,.pro-plans{grid-template-columns:minmax(0,1fr)}
}

/* Profile card. */
.pro-status{margin:12px 0 0}
.pro-badge{display:inline-block;background:#F5B301;color:#1A1300;font-weight:800;font-size:11px;letter-spacing:.05em;border-radius:999px;padding:2px 8px;margin-right:8px;vertical-align:1px}
.pro-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pro-actions:empty{display:none}

/* ---------- Profile page ---------- */
/* Links styled as buttons, which the profile and Pro panel use. */
html.site a.btn,a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
html.site a.btn[hidden],a.btn[hidden]{display:none}
.me-page{display:grid;gap:22px}
.me-hero{padding:0;overflow:hidden}
.me-cover{height:124px;background:linear-gradient(120deg,#0B1F3A 0%,#0176D3 58%,#57B2FF 100%)}
.me-hero-body{display:flex;align-items:flex-start;gap:20px;padding:14px 26px 0;flex-wrap:wrap}
.me-hero .av.lg{width:116px;height:116px;font-size:38px;border:4px solid var(--surface);box-shadow:0 6px 18px rgba(11,31,58,.18);flex:none;margin-top:-72px}
.me-id{flex:1 1 260px;min-width:0}
.me-id h1{font-size:clamp(24px,3.2vw,31px);line-height:1.15;margin:0}
.me-id .ptitle{margin-top:3px}
.me-id .pmeta{margin-top:6px}
.me-hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.me-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:22px 0 0;border-top:1px solid var(--line)}
.me-stats div{padding:16px 24px;border-left:1px solid var(--line);min-width:0}
.me-stats div:first-child{border-left:0}
.me-stats dt{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.me-stats dd{margin:4px 0 0;font-size:21px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-stats dd small{font-size:13px;color:var(--muted);font-weight:600}
.me-col{display:grid;gap:22px;align-content:start}
.me-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.me-card-head h2{font-size:18px;margin:0;display:flex;align-items:center;gap:8px}
.me-count{font-size:13px;color:var(--muted);font-weight:600}
.me-sub{color:var(--muted);font-size:13.5px;margin:6px 0 4px;max-width:70ch}
.me-level{display:flex;gap:16px;align-items:center;margin-top:12px}
.me-level-name{font-size:25px;font-weight:800;line-height:1.1}
.me-addform{margin-top:14px;padding:16px;border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--sunk)}
.me-addform[hidden]{display:none}
.me-list{display:grid;gap:9px;margin-top:14px}
.me-list:empty{display:none}
.me-more{margin-top:16px}
.me-edit[hidden]{display:none}
.me-edit .photo-actions{margin-top:12px}
#view-me .badgewall{margin-top:14px}
#view-me .badgewall:empty{display:none}
@media (max-width:900px){
  .me-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .me-stats div:nth-child(4){border-left:0}
  .me-stats div:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:620px){
  .me-cover{height:96px}
  .me-hero-body{padding:12px 16px 0;gap:12px}
  .me-hero .av.lg{width:92px;height:92px;font-size:30px;margin-top:-58px}
  .me-id{flex-basis:100%}
  .me-hero-actions{width:100%}
  .me-hero-actions .btn{flex:1 1 0;justify-content:center}
  .me-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .me-stats div{padding:13px 16px}
  .me-stats div:nth-child(odd){border-left:0}
  .me-stats div:nth-child(4){border-left:1px solid var(--line)}
  .me-stats div:nth-child(n+3){border-top:1px solid var(--line)}
  .me-stats div:last-child:nth-child(odd){grid-column:1/-1;border-left:0}
}

/* Go Pro banner (free members) and the Pro panel. */
#proHost:empty{display:none}
.pro-banner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:center;border-radius:var(--r);
  padding:26px 28px;color:#fff;background:radial-gradient(120% 140% at 100% 0%,#0A66C2 0%,#13306A 45%,#0B1220 100%);
  box-shadow:0 10px 30px rgba(11,31,58,.18)}
.pro-banner h2{color:#fff;font-size:clamp(20px,2.6vw,25px);margin:12px 0 10px;line-height:1.2}
.pro-banner ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:#DCE8F7;font-size:14.5px}
.pro-banner li{padding-left:24px;position:relative}
.pro-banner li::before{content:"✓";position:absolute;left:0;top:0;color:#F5B301;font-weight:800}
.pro-banner-note{font-size:13px;color:#C9D7EA;margin:12px 0 0}
.pro-banner-cta{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sm);padding:20px;display:grid;gap:6px}
.pro-banner-price{font-size:15px;color:#DCE8F7}
.pro-banner-price b{font-size:30px;color:#fff;margin:0 2px}
.pro-banner-cta small{color:#B9C9E0;font-size:12.5px}
html.site .btn.pro-go,.btn.pro-go{margin-top:10px;background:#F5B301;border-color:#F5B301;color:#1A1300;font-weight:800;justify-content:center}
html.site .btn.pro-go:hover,.btn.pro-go:hover{background:#FFC52E;border-color:#FFC52E;color:#1A1300}
html.site .btn.pro-ghost,.btn.pro-ghost{color:#fff;background:transparent;border-color:rgba(255,255,255,.35);justify-content:center}
html.site .btn.pro-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.pro-panel .pro-status{color:var(--muted);margin:6px 0 0}
.pro-panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.pro-tile{border:1px solid var(--line);border-radius:var(--r-sm);padding:16px;background:var(--sunk);display:grid;gap:8px;align-content:start}
.pro-tile h3{font-size:15px;margin:0;display:flex;align-items:center;gap:6px}
.pro-tile p{margin:0;color:var(--muted);font-size:13.5px}
.pro-tile .pro-actions{margin-top:4px}
.pro-live{font-size:11px;background:#E3F5EC;color:#11663F;border-radius:999px;padding:2px 8px;font-weight:700}
.pro-link{display:flex;gap:8px}
.pro-link input{flex:1 1 auto;min-width:0;font-size:13.5px}
.pro-keep{align-items:center}
.pro-keep .pmeta{flex:1 1 100%}

/* Referral card: the link, then one meter per reward tier. */
#referHost:empty{display:none}
.refer-lead{color:var(--muted);margin:6px 0 14px;font-size:14px;max-width:62ch}
/* One blue square per referral; a counted one lights its golden star. */
.refer-stars{list-style:none;margin:18px 0 30px;padding:0;display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:8px}
.refer-sq{position:relative;aspect-ratio:1;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(150deg,#1F6FD6,#0B3F8C);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.refer-sq svg{width:58%;height:58%;fill:none;stroke:rgba(255,255,255,.38);stroke-width:1.6;stroke-linejoin:round;transition:fill .3s,stroke .3s}
.refer-sq.lit svg{fill:#FFC93C;stroke:#FFE08A;filter:drop-shadow(0 0 4px rgba(255,201,60,.75))}
.refer-sq.lit{background:linear-gradient(150deg,#2A7FEA,#0E4AA0)}
.refer-sq.goal{outline:2px solid #FFC93C;outline-offset:2px}
.refer-goal{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:700;color:var(--muted)}
.refer-sq:last-child .refer-goal{left:auto;right:0;transform:none}
.refer-goal.earned{color:var(--green)}
/* New since the member last looked: each star bursts in turn, then keeps a soft pulse. */
.refer-sq.new svg{animation:star-burst .9s cubic-bezier(.2,.9,.3,1.4) var(--d) both,star-glow 2.4s ease-in-out calc(var(--d) + .9s) 3}
.refer-sq.new{animation:sq-flash 1s ease-out var(--d) both}
@keyframes star-burst{
  0%{transform:scale(.2) rotate(-40deg);opacity:0}
  60%{transform:scale(1.35) rotate(8deg);opacity:1;filter:drop-shadow(0 0 14px rgba(255,214,90,1))}
  100%{transform:none;opacity:1}
}
@keyframes star-glow{
  0%,100%{filter:drop-shadow(0 0 4px rgba(255,201,60,.75))}
  50%{filter:drop-shadow(0 0 12px rgba(255,214,90,1))}
}
@keyframes sq-flash{0%{box-shadow:0 0 0 0 rgba(255,201,60,.7)}100%{box-shadow:0 0 0 10px rgba(255,201,60,0)}}
.refer-more{margin:-14px 0 8px;font-size:13.5px;font-weight:600;color:var(--blue)}
@media (prefers-reduced-motion:reduce){
  .refer-sq.new,.refer-sq.new svg{animation:none}
}
.refer-rewards{margin:10px 0 0;padding-left:18px;font-size:13.5px;color:var(--muted)}
@media (max-width:760px){
  .pro-banner{grid-template-columns:minmax(0,1fr);padding:22px 18px}
  .pro-panel-grid{grid-template-columns:minmax(0,1fr)}
  /* Two rows of ten on phones; the goal labels sit under squares 5 and 20. */
  .refer-stars{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;row-gap:30px}
  .refer-card .pro-link{flex-wrap:wrap}
  .refer-card .pro-link input{flex-basis:100%}
}

/* ============ Pro theme: Midnight & Gold ============
   html.pro is set by accountNav() in app.html, from the ts_account hint
   before the first paint and from /me after it, so a Pro member never sees
   the free theme flash first. It re-tints the site theme's tokens (violet
   accents, midnight fills, gold for what is earned) and adds a few touches:
   a gold seam under the header, a "Pro" mark by the logo, an aurora on the
   profile cover, gold progress, and a one-time light sweep when Pro starts. */
html.site.pro:root{
  --gold:#E2AE2F;--gold-2:#F7D774;--gold-ink:#8A5F00;
  --navy:#140F33;--navy-2:#2B1C70;
  --blue:#5A3FE0;--blue-dark:#4127C4;--blue-tint:#F1EEFF;--sky:#F7D774;
  --fill:#17123A;--fill-dark:#2B1C70;
  --bg:#F7F6FB;--sunk:#F2F0F9;--line:#E6E3F2;--line-strong:#D3CEE8;
  --focus:0 0 0 3px rgba(90,63,224,.24);
}
@media (prefers-color-scheme:dark){html.site.pro:root:not([data-theme="light"]){
  --gold:#F0C04A;--gold-2:#FFE08A;--gold-ink:#F0C04A;
  --navy:#0A0818;--navy-2:#22175A;
  --blue:#B4A4FF;--blue-dark:#D2C8FF;--blue-tint:#231C4A;--sky:#FFE08A;
  --fill:#F0C04A;--fill-dark:#FFD36B;
  --bg:#0B0A16;--surface:#15132B;--sunk:#100E22;--line:#2A2650;--line-strong:#3A3468;
  --focus:0 0 0 3px rgba(180,164,255,.3);
}}
html.site.pro:root[data-theme="dark"]{
  --gold:#F0C04A;--gold-2:#FFE08A;--gold-ink:#F0C04A;
  --navy:#0A0818;--navy-2:#22175A;
  --blue:#B4A4FF;--blue-dark:#D2C8FF;--blue-tint:#231C4A;--sky:#FFE08A;
  --fill:#F0C04A;--fill-dark:#FFD36B;
  --bg:#0B0A16;--surface:#15132B;--sunk:#100E22;--line:#2A2650;--line-strong:#3A3468;
  --focus:0 0 0 3px rgba(180,164,255,.3);
}
/* In dark mode the primary fill is gold, so its label goes dark. */
@media (prefers-color-scheme:dark){html.site.pro:root:not([data-theme="light"]) :is(.btn.primary,.btn.primary:hover,.qdot[aria-current="true"],.msg-bubble.is-mine .msg-text){color:#1A1300}}
html.site.pro:root[data-theme="dark"] :is(.btn.primary,.btn.primary:hover,.qdot[aria-current="true"],.msg-bubble.is-mine .msg-text){color:#1A1300}
html.site.pro .btn.primary:hover{box-shadow:0 0 0 1px var(--gold),0 6px 18px -6px color-mix(in srgb,var(--gold) 70%,transparent)}
html.site.pro ::selection{background:color-mix(in srgb,var(--gold) 45%,transparent)}

/* Header: a slowly travelling gold-violet seam, a gold logo and a Pro mark. */
html.site.pro .th-nav{border-bottom-color:transparent}
html.site.pro .th-nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--blue),var(--gold),var(--gold-2),var(--blue),var(--gold));background-size:300% 100%;
  animation:pro-seam 14s linear infinite}
@keyframes pro-seam{to{background-position:300% 0}}
html.site.pro .brand-mark path:first-child{fill:var(--navy-2)}
html.site.pro .brand-mark path:nth-child(2){stroke:var(--gold)}
html.site.pro .brand-mark circle{fill:var(--gold-2)}
html.site.pro .brand-mark{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 45%,transparent))}
html.site.pro .brand::after{content:"PRO";font-size:10px;font-weight:800;letter-spacing:.08em;padding:2px 6px;border-radius:999px;
  color:#1A1300;background:linear-gradient(135deg,var(--gold-2),var(--gold));box-shadow:0 1px 6px -1px color-mix(in srgb,var(--gold) 60%,transparent)}
html.site.pro .th-tab[aria-selected="true"]::after{background:linear-gradient(90deg,var(--gold),var(--gold-2));height:3px}
html.site.pro .pointchip{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
html.site.pro .pointchip .dot{background:linear-gradient(135deg,var(--gold-2),var(--gold))}
html.site.pro .toast{background:var(--navy);box-shadow:inset 3px 0 0 var(--gold),var(--shadow-lift)}
@media (max-width:680px){
  html.site.pro .th-tabs{border-top-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
  html.site.pro .th-tab[aria-selected="true"]{color:var(--blue)}
  html.site.pro .th-tab[aria-selected="true"]::after{height:3px}
}

/* Progress fills in gold; the banners turn midnight to violet with a warm glow. */
html.site.pro .bar i{background:linear-gradient(90deg,var(--gold),var(--gold-2))}
html.site.pro :is(.rankstrip,.exam-hero){position:relative;overflow:hidden;
  background:radial-gradient(120% 160% at 100% 0%,color-mix(in srgb,var(--gold) 26%,transparent) 0%,transparent 42%),
    linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%)}
html.site.pro .rk-next .bar i{background:linear-gradient(90deg,var(--gold),var(--gold-2))}

/* Profile: an aurora cover with a dusting of stars, and a gold ring round the photo. */
html.site.pro .me-cover{position:relative;overflow:hidden;
  background:linear-gradient(120deg,#0B0820,#2B1C70 40%,#5A3FE0 70%,#E2AE2F);background-size:220% 220%;
  animation:pro-aurora 18s ease-in-out infinite alternate}
html.site.pro .me-cover::before{content:"";position:absolute;inset:0;opacity:.7;
  background-image:radial-gradient(1.4px 1.4px at 12% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 70%,#fff 50%,transparent 51%),
    radial-gradient(1.6px 1.6px at 47% 22%,#FFE08A 50%,transparent 51%),radial-gradient(1px 1px at 63% 58%,#fff 50%,transparent 51%),
    radial-gradient(1.3px 1.3px at 79% 26%,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 91% 64%,#FFE08A 50%,transparent 51%),
    radial-gradient(1px 1px at 36% 44%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 70% 84%,#fff 50%,transparent 51%);
  animation:pro-twinkle 5s ease-in-out infinite alternate}
html.site.pro .me-cover::after{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 85% 120%,color-mix(in srgb,#F7D774 35%,transparent),transparent 60%)}
@keyframes pro-aurora{0%{background-position:0% 40%}100%{background-position:100% 60%}}
@keyframes pro-twinkle{from{opacity:.35}to{opacity:.85}}
html.site.pro .me-hero .av.lg{border-color:transparent;
  background-clip:padding-box;box-shadow:0 0 0 3px var(--gold),0 0 22px -2px color-mix(in srgb,var(--gold) 70%,transparent),0 6px 18px rgba(11,8,32,.25)}

/* The one-time sweep when Pro starts: a band of gold light crosses the page. */
.pro-sheen{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.pro-sheen::before{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-45%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(247,215,116,.0) 10%,rgba(247,215,116,.42) 50%,rgba(247,215,116,0) 90%,transparent);
  animation:pro-sweep 1.5s cubic-bezier(.45,.05,.35,1) .15s forwards}
@keyframes pro-sweep{to{left:120%}}

@media (prefers-reduced-motion:reduce){
  html.site.pro .th-nav::after,html.site.pro .me-cover,html.site.pro .me-cover::before{animation:none}
  .pro-sheen{display:none}
}

/* ---------- referral groups ---------- */
.grp-tabs{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;scrollbar-width:thin}
.grp-tab{flex:none;display:grid;gap:2px;min-width:180px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:10px 14px;cursor:pointer;color:var(--fg);font:inherit}
.grp-tab small{color:var(--muted);font-size:12.5px}
.grp-tab[aria-selected="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:var(--blue-tint)}
.grp-board{margin-bottom:16px}
.grp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.grp-title{min-width:0;flex:1 1 240px}
.grp-title h2{margin:0;font-size:22px;overflow-wrap:anywhere}
.grp-title p{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.grp-actions{display:flex;gap:8px;flex-wrap:wrap}
.grp-rename,.grp-create{display:flex;gap:8px;flex-wrap:wrap}
.grp-rename input,.grp-create input{flex:1 1 200px;min-width:0;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;font:inherit;background:var(--surface);color:var(--fg)}
.grp-period{margin-top:16px;flex-wrap:wrap}
.grp-caption{margin:8px 0 0;font-size:13px;color:var(--muted)}
.grp-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:10px;max-width:620px;margin:24px auto 0}
.grp-step{display:grid;justify-items:center;gap:3px;min-width:0;text-align:center;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.grp-step b{max-width:100%;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-step > span:not(.grp-step-av):not(.grp-block){font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.grp-step.is-me b{color:var(--blue)}
.grp-step-av{position:relative;margin-bottom:6px}
.grp-step-av .av.lg{width:72px;height:72px;font-size:24px;box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--medal)}
.grp-step.p1 .grp-step-av .av.lg{width:88px;height:88px;font-size:30px}
.grp-step-av i{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;color:#fff;background:var(--medal);box-shadow:0 0 0 2px var(--surface)}
.grp-block{display:block;width:100%;margin-top:10px;border-radius:10px 10px 0 0;border:1px solid color-mix(in srgb,var(--medal) 40%,var(--line));border-bottom:0;background:linear-gradient(180deg,color-mix(in srgb,var(--medal) 32%,var(--surface)),color-mix(in srgb,var(--medal) 6%,var(--surface)))}
.grp-step.p1{--medal:#D4A72C}.grp-step.p1 .grp-block{height:84px}
.grp-step.p2{--medal:#9AA5B4}.grp-step.p2 .grp-block{height:58px}
.grp-step.p3{--medal:#C07A43}.grp-step.p3 .grp-block{height:40px}
.grp-list{border-top:1px solid var(--line)}
.grp-mine{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.grp-invite{display:grid;gap:10px;margin-top:18px}
.grp-invite p{margin:0}
.grp-start{display:flex;gap:22px;align-items:center;margin-bottom:16px}
.grp-start h2{margin:0 0 6px;font-size:19px}
.grp-start p{margin:0 0 14px;color:var(--muted);font-size:14px}
.grp-start-art{width:120px;flex:none}
.grp-start-art path{fill:none;stroke:var(--line);stroke-width:2.5;stroke-linecap:round}
.grp-start-art circle{fill:var(--blue-tint);stroke:var(--blue);stroke-width:2}
.grp-start-art circle.me{fill:var(--blue)}
.grp-settings h3{margin:0 0 12px;font-size:16px}
.grp-settings h4{margin:18px 0 4px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.grp-switch{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.grp-switch input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--blue)}
.grp-switch span{display:grid;gap:3px}
.grp-switch small{color:var(--muted);font-size:13px}
ul.grp-left{list-style:none;margin:0;padding:0}
.grp-left li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.grp-left span{display:grid;min-width:0}
.grp-left small{color:var(--muted);font-size:12.5px}
@media (max-width:640px){
  .grp-start{flex-direction:column;align-items:flex-start}
  .grp-start-art{width:96px}
  .grp-step-av .av.lg{width:56px;height:56px;font-size:19px}
  .grp-step.p1 .grp-step-av .av.lg{width:68px;height:68px;font-size:23px}
  .grp-step b{font-size:13px}
}