/* AIB Learning League.
   Brand: Primary Purple #4E2582 + Grey #EAE8ED carry the page. Magenta #FF00FF and Violet #BD0FEA are accents only
   (the Trust Gradient). Secondary colours mark the four tracks and nothing else. Arial is used because the Marselis
   files in the toolkit carry a Monotype DESKTOP licence that forbids serving them from a website.
   Headlines follow the guide: few sizes, big jumps, tight tracking. */
:root{
  --purple:#4E2582; --purple-dk:#3a1b61; --purple-dd:#2a1247; --purple-lt:#f1ebf8;
  --grey:#EAE8ED; --grey-lt:#F6F5F8; --line:#d9d4e0;
  --magenta:#FF00FF; --violet:#BD0FEA;
  --ink:#1B1030; --muted:#5b5069; --white:#fff;
  --blue:#0071BC; --aqua:#00A99D; --orange:#F7931E; --lime:#8CC63F;
  --ok:#1f7a4d; --ok-bg:#e3f4ea; --warn:#8a5a00; --warn-bg:#fff4d6; --bad:#a3262a; --bad-bg:#fbe6e7;
  --radius:20px; --radius-sm:12px; --maxw:1120px; --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 1px 2px rgba(42,18,71,.06),0 8px 24px rgba(42,18,71,.08);
  --shadow-lg:0 2px 4px rgba(42,18,71,.08),0 18px 46px rgba(42,18,71,.2);
  font-family:"Arial Nova",Arial,"Helvetica Neue",Helvetica,sans-serif;
  color:var(--ink); color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:84px}
body{margin:0;font-size:16px;line-height:1.5;background:var(--grey-lt);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--purple-dd);letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(1.9rem,4.4vw,2.8rem);font-weight:800}
h2{font-size:1.5rem;font-weight:800} h3{font-size:1.08rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
p{margin:0 0 .85em} a{color:var(--purple)} a:hover{color:var(--violet)}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--white);color:var(--purple);padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}
.boot{padding:3rem 1rem;text-align:center;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)} .small{font-size:.875rem} .tiny{font-size:.78rem} .right{text-align:right} .nowrap{white-space:nowrap} .center{text-align:center}
.hidden{display:none!important}
.ico{flex:none;vertical-align:middle}
.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes fall{0%{transform:translate3d(0,-10vh,0) rotate(0);opacity:1}100%{transform:translate3d(var(--dx),105vh,0) rotate(var(--r));opacity:.9}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.rise{animation:rise .55s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
.pop{animation:pop .5s var(--ease) both}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:90}
.confetto{position:absolute;top:0;left:var(--x);width:9px;height:14px;background:var(--c);border-radius:2px;animation:fall var(--d) var(--delay) cubic-bezier(.3,.6,.4,1) forwards}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .confetti{display:none}
}

/* ---------- buttons & inputs ---------- */
button,.btn{font:inherit;font-weight:700;cursor:pointer;border-radius:999px;border:2px solid var(--purple);background:var(--purple);color:var(--white);padding:.7rem 1.5rem;min-height:46px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:background .15s,border-color .15s,transform .15s var(--ease),box-shadow .15s}
button:hover,.btn:hover{background:var(--purple-dk);border-color:var(--purple-dk);color:var(--white);transform:translateY(-1px);box-shadow:0 6px 16px rgba(78,37,130,.28)}
button:active,.btn:active{transform:translateY(0);box-shadow:none}
button.ghost,.btn.ghost{background:transparent;color:var(--purple)}
button.ghost:hover,.btn.ghost:hover{background:var(--purple-lt);color:var(--purple-dk);box-shadow:none}
button.light{background:var(--white);color:var(--purple);border-color:var(--white)}
button.light:hover,.btn.light:hover{background:var(--grey);border-color:var(--grey);color:var(--purple-dk)}
.btn.light{background:var(--white);color:var(--purple);border-color:var(--white)}
button.danger{background:var(--bad);border-color:var(--bad)} button.danger:hover{background:#7d1c20;border-color:#7d1c20}
button.sm,.btn.sm{min-height:36px;padding:.35rem 1rem;font-size:.875rem}
button.lg{min-height:54px;padding:.8rem 1.9rem;font-size:1.05rem}
button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
label{font-weight:700;display:block;margin-bottom:.3rem}
input[type=text],input[type=search],input[type=date],select,textarea{font:inherit;color:var(--ink);background:var(--white);border:2px solid var(--line);border-radius:14px;padding:.65rem .85rem;width:100%;min-height:46px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(78,37,130,.12);outline:none}
textarea{min-height:220px;resize:vertical;line-height:1.55}
fieldset{border:0;margin:0;padding:0} legend{font-weight:700;padding:0}
.field{margin-bottom:1rem}

/* ---------- landing (house layout: purple field, tagline top-left, headline in a bubble, white logo bottom-right) ---------- */
.landing{min-height:100vh;background:var(--purple);color:var(--white);display:flex;flex-direction:column;padding:28px clamp(18px,5vw,64px) 30px;position:relative;overflow:hidden}
.landing>*{position:relative;z-index:1}
.tag{font-weight:700;letter-spacing:.08em;font-size:.85rem;text-transform:uppercase;margin:0}
.landing-main{flex:1;display:flex;align-items:center;justify-content:flex-end;padding:3vh 0}
.bubble{width:min(640px,100%);padding:clamp(28px,5vw,56px);color:var(--white);background:radial-gradient(circle at 80% 30%,var(--magenta) 0%,var(--violet) 100%);border-radius:56px 56px 56px 10px;box-shadow:var(--shadow-lg)}
.bubble h1{color:var(--white);font-size:clamp(2.1rem,5.2vw,3.4rem);margin-bottom:.35em;letter-spacing:-.03em;line-height:1.02}
.bubble p{font-size:1.1rem;margin-bottom:1.4rem}
.landing-foot{display:flex;justify-content:flex-end;align-items:flex-end}
.landing-foot img{width:110px;height:auto}
.landing-note{max-width:640px;margin-left:auto;margin-top:14px;font-size:.9rem;color:#e4d9f3}
.landing .l-art{position:absolute;left:-40px;bottom:-70px;height:min(74vh,620px);opacity:.95;z-index:0;pointer-events:none}
.landing .l-medals{position:absolute;left:clamp(20px,6vw,110px);top:18vh;display:flex;gap:14px;z-index:0}
.landing .l-medals svg{filter:drop-shadow(0 10px 18px rgba(0,0,0,.3));animation:float 5s ease-in-out infinite}
.landing .l-medals svg:nth-child(2){animation-delay:.7s;margin-top:34px} .landing .l-medals svg:nth-child(3){animation-delay:1.4s}
.devbox{margin-top:14px;padding:12px 14px;border:1px dashed rgba(255,255,255,.55);border-radius:12px;font-size:.9rem}
.devbox button{margin:4px 6px 0 0}
/* the artwork needs a genuinely empty left side; below this width it would sit behind the headline */
@media (max-width:1179px){.landing .l-art,.landing .l-medals{display:none}}
@media (max-width:900px){.landing-main{justify-content:center}.bubble{border-radius:36px 36px 36px 8px}}

/* ---------- shell ---------- */
.topbar{background:var(--purple);color:var(--white);position:sticky;top:0;z-index:30;box-shadow:0 2px 14px rgba(42,18,71,.25)}
.topbar-in{max-width:var(--maxw);margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:18px}
.topbar .logo img{height:34px;width:auto;display:block}
.topbar nav{display:flex;gap:4px;flex:1}
.topbar nav a{color:var(--white);text-decoration:none;font-weight:700;padding:.5rem 1rem;border-radius:999px;display:inline-flex;gap:.5rem;align-items:center;transition:background .15s}
.topbar nav a:hover{background:rgba(255,255,255,.16);color:var(--white)}
.topbar nav a[aria-current=page]{background:var(--white);color:var(--purple)}
.pts{display:flex;align-items:center;gap:8px;font-weight:800;background:rgba(255,255,255,.14);border-radius:999px;padding:4px 14px 4px 6px;font-size:.95rem;white-space:nowrap}
.pts .emblem{width:30px;height:30px}
.usermenu{position:relative}
.usermenu summary{list-style:none;cursor:pointer;border-radius:50%;display:block}
.usermenu summary::-webkit-details-marker{display:none}
.usermenu .pop-menu{position:absolute;right:0;top:calc(100% + 10px);background:var(--white);color:var(--ink);border-radius:16px;box-shadow:var(--shadow-lg);padding:14px;min-width:230px;z-index:40}
.usermenu .pop-menu p{margin:0 0 .6rem}
main{max-width:var(--maxw);margin:0 auto;padding:26px 18px 70px}
.footer{background:var(--purple);color:var(--white);margin-top:20px}
.footer-in{max-width:var(--maxw);margin:0 auto;padding:20px 18px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.footer img{height:32px;width:auto}
.tabbar{display:none}
@media (max-width:760px){
  .topbar nav,.topbar .usermenu .name{display:none}
  .topbar-in{justify-content:space-between}
  main{padding:18px 14px 110px}
  .footer{display:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--white);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(42,18,71,.1);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;text-decoration:none;color:var(--muted);font-size:.72rem;font-weight:700;border-radius:14px}
  .tabbar a[aria-current=page]{color:var(--purple);background:var(--purple-lt)}
  body[data-mode=lesson] .tabbar{display:none}
  body[data-mode=lesson] main{padding-bottom:120px}
}

/* ---------- layout primitives ---------- */
.card{background:var(--white);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none;background:var(--grey)}
.card.tint{background:var(--purple-lt);box-shadow:none}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .row.tight{flex-wrap:nowrap;gap:10px}
.spread{justify-content:space-between}
.stack>*+*{margin-top:18px}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.pagehead p{margin:0}
.lead{font-size:1.1rem;color:var(--muted)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;border-radius:99px;padding:.18rem .65rem;background:var(--white);color:var(--ink);border:1px solid var(--line);white-space:nowrap}
.chip.open{background:var(--ok-bg);color:var(--ok);border-color:#b5dcc4}
.chip.locked{background:var(--grey);color:var(--muted);border-color:transparent}
.chip.cleared{background:var(--purple);color:var(--white);border-color:var(--purple)}
.chip.pending{background:var(--warn-bg);color:var(--warn);border-color:#ecd28a}
.chip.scored{background:var(--ok-bg);color:var(--ok);border-color:#b5dcc4}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.t-ins .dot{background:var(--blue)} .t-data .dot{background:var(--aqua)} .t-inno .dot{background:var(--violet)} .t-lead .dot{background:var(--lime)}

/* ---------- Home hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dd) 100%);color:var(--white);border-radius:28px;padding:clamp(22px,4vw,36px);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,32px);align-items:center}
.hero .brand-art{position:absolute;right:-50px;bottom:-70px;height:340px;opacity:.95;pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero h1{color:var(--white);margin:0 0 .15em}
.bigpts{font-size:2rem;font-weight:800;color:var(--white);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero .sub{color:#e4d9f3;margin:0 0 1rem}
.hero .ringbox .ring-bg{stroke:rgba(255,255,255,.18)} .hero .ringbox .ring-fg{stroke:var(--white)}
.hero .emblem{width:78px;height:78px}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.1rem}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.14);border-radius:999px;padding:.4rem .9rem .4rem .7rem;font-weight:700;font-size:.92rem}
.pill b{font-size:1.05rem}
@media (max-width:640px){.hero{grid-template-columns:1fr;text-align:left}.hero .brand-art{height:220px;right:-70px;bottom:-60px;opacity:.5}}

/* progress ring */
.ringbox{position:relative;display:inline-grid;place-items:center;flex:none}
.ringbox>svg{position:absolute;inset:0}
.ring-bg{stroke:var(--grey)} .ring-fg{stroke:var(--purple);transition:stroke-dashoffset 1s var(--ease)}
.ring-fg.ok{stroke:var(--ok)}
.ringin{position:relative;display:grid;place-items:center;text-align:center;line-height:1.05}
.ringin b{font-size:1.5rem;color:var(--purple-dd)} .ringin small{font-size:.7rem;color:var(--muted);font-weight:700}

/* ---------- Journey ---------- */
.journey{display:grid;gap:8px}
.stagecard{display:grid;grid-template-columns:64px 1fr;gap:18px}
.rail{display:flex;flex-direction:column;align-items:center}
.rail::after{content:"";flex:1;width:4px;margin:8px 0;border-radius:4px;background:repeating-linear-gradient(to bottom,var(--line) 0 8px,transparent 8px 16px)}
.stagecard:last-child .rail::after{display:none}
.stagenode{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--grey);color:var(--muted);flex:none;box-shadow:0 0 0 6px var(--grey-lt)}
.stagecard.open .stagenode{background:linear-gradient(135deg,var(--purple),var(--violet));color:var(--white);box-shadow:0 0 0 6px var(--purple-lt),0 8px 18px rgba(78,37,130,.35)}
.stagecard.cleared .stagenode{background:var(--ok);color:var(--white);box-shadow:0 0 0 6px var(--ok-bg)}
.stagebody{padding-bottom:20px;min-width:0}
.stagehead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.stagehead h2{margin:0}
.stagecard.locked .stagehead h2{color:var(--muted)}
@media (max-width:560px){.stagecard{grid-template-columns:44px 1fr;gap:10px}.stagenode{width:42px;height:42px}.stagenode .ico{width:20px;height:20px}}

/* challenge cards with a cover */
.ccard{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s var(--ease);min-width:0}
a.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);color:var(--ink)}
.ccover{height:88px;position:relative;overflow:hidden;color:var(--white);padding:14px;display:flex;align-items:flex-start;justify-content:space-between}
.ccover .brand-art{position:absolute;right:-26px;top:-18px;height:132px;opacity:.5}
.ccover .tile-ico{position:relative;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.22);display:grid;place-items:center;backdrop-filter:blur(2px)}
.ccover .status{position:relative}
.tr-ins .ccover{background:linear-gradient(135deg,#0071BC,#00A0D0)} .tr-data .ccover{background:linear-gradient(135deg,#00877e,#00A99D)}
.tr-inno .ccover{background:linear-gradient(135deg,#BD0FEA,#FF00FF)} .tr-lead .ccover{background:linear-gradient(135deg,#4f9a2d,#8CC63F)}
.ccard.locked .ccover{filter:grayscale(1) brightness(1.08);opacity:.75}
.ccard.locked{box-shadow:none;background:var(--grey)}
.ccard .cbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.ccard h3{margin:0}
.ccard .meta{display:flex;gap:10px;align-items:center;margin-top:auto;flex-wrap:wrap}
.cgo{margin-left:auto;color:var(--purple);display:inline-flex}

/* ---------- Challenge flow ---------- */
.stepbar{display:flex;gap:8px;margin:6px 0 22px}
.step{flex:1;min-width:0}
.step .bar{height:8px;border-radius:99px;background:var(--grey);overflow:hidden}
.step .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--violet));border-radius:99px;transition:width .5s var(--ease)}
.step.done .bar i,.step.cur .bar i{width:100%}
.step.cur .bar i{width:55%}
.step .lbl{font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step.cur .lbl{color:var(--purple)}
@media (max-width:560px){.step .lbl{font-size:.66rem}}
.lesson-head{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.lesson-head .tile-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:var(--white);flex:none}
.tr-ins .tile-ico.big{background:linear-gradient(135deg,#0071BC,#00A0D0)} .tr-data .tile-ico.big{background:linear-gradient(135deg,#00877e,#00A99D)}
.tr-inno .tile-ico.big{background:linear-gradient(135deg,#BD0FEA,#FF00FF)} .tr-lead .tile-ico.big{background:linear-gradient(135deg,#4f9a2d,#8CC63F)}
.scenario p{font-size:1.08rem;line-height:1.55}
.taskbox{background:var(--purple-lt);border-radius:16px;padding:16px 18px;margin-top:6px;border-left:6px solid var(--violet)}
.taskbox h3{margin:0 0 .3rem;color:var(--purple)}
.qcount{font-weight:800;color:var(--violet);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .5rem}
.question{font-size:clamp(1.25rem,3vw,1.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--purple-dd);margin:0 0 1.1rem}
.tiles{display:grid;gap:12px}
@media (min-width:860px){.tiles{grid-template-columns:1fr 1fr}}
.tile{display:flex;gap:14px;align-items:center;background:var(--white);border:2px solid var(--line);border-radius:18px;padding:14px 16px;cursor:pointer;font-weight:600;transition:transform .15s var(--ease),border-color .15s,box-shadow .15s,background .15s;min-height:64px;margin:0}
.tile:hover{border-color:var(--purple);transform:translateY(-2px);box-shadow:var(--shadow)}
.tile .key{width:36px;height:36px;border-radius:10px;background:var(--grey);color:var(--purple-dd);display:grid;place-items:center;font-weight:800;flex:none;transition:background .15s,color .15s}
.tile.sel{border-color:var(--purple);background:var(--purple-lt);box-shadow:0 0 0 4px rgba(78,37,130,.12)}
.tile.sel .key{background:var(--purple);color:var(--white)}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile:has(input:focus-visible){outline:3px solid var(--violet);outline-offset:3px}
.actionbar{position:sticky;bottom:0;margin-top:22px;padding:14px 0;background:linear-gradient(to top,var(--grey-lt) 70%,transparent);display:flex;gap:12px;justify-content:space-between;align-items:center;z-index:10}
@media (max-width:760px){
  .actionbar{position:fixed;left:0;right:0;bottom:0;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:var(--white);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(42,18,71,.1);margin:0}
  .actionbar button,.actionbar .btn{padding:.6rem 1.1rem;font-size:.95rem;min-height:48px;white-space:nowrap}
}
.writebox{position:relative}
.wordring{display:flex;align-items:center;gap:12px;margin-top:10px}
.wordring .ringin b{font-size:.95rem}
.hint{font-size:.9rem;color:var(--muted)}
.draftnote{font-size:.8rem;color:var(--muted)}

/* ---------- Result ---------- */
.resulthero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dd) 100%);color:var(--white);border-radius:28px;padding:clamp(22px,4vw,34px);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,32px);align-items:center}
.resulthero .brand-art{position:absolute;right:-50px;bottom:-60px;height:300px;opacity:.9;pointer-events:none}
.resulthero>*{position:relative;z-index:1}
.resulthero h2{color:var(--white);margin:0 0 .2em;font-size:1.6rem}
.resulthero .ringbox .ring-bg{stroke:rgba(255,255,255,.2)} .resulthero .ringbox .ring-fg{stroke:var(--white)}
.resulthero .ringin b{color:var(--white);font-size:2.2rem} .resulthero .ringin small{color:#e4d9f3}
@media (max-width:640px){.resulthero{grid-template-columns:1fr}.resulthero .brand-art{opacity:.4}}
.crit{display:grid;grid-template-columns:130px 1fr 60px;gap:12px;align-items:center;margin:.4rem 0}
.crit .meter{height:12px;border-radius:99px;background:var(--grey);overflow:hidden}
.crit .meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--violet));border-radius:99px;transition:width 1s var(--ease)}
@media (max-width:560px){.crit{grid-template-columns:96px 1fr 48px}}
.review .ans{padding:.55rem .8rem;border-radius:12px;margin:.3rem 0;display:flex;gap:.6rem;align-items:flex-start}
.review .good{background:var(--ok-bg);border-left:5px solid var(--ok)}
.review .bad{background:var(--bad-bg);border-left:5px solid var(--bad)}
.review .key{background:var(--white);border:1px solid var(--line);border-left:5px solid var(--purple)}
.resp{white-space:pre-wrap;word-break:break-word;background:var(--grey-lt);border-radius:14px;padding:14px 16px;border:1px solid var(--grey)}
.callout{border-left:6px solid var(--violet);background:var(--purple-lt);border-radius:14px;padding:14px 18px}
.callout.warn{border-color:var(--orange);background:#fff4e2} .callout.err{border-color:var(--bad);background:var(--bad-bg)}
.callout.ok{border-color:var(--ok);background:var(--ok-bg)}
.callout ul{margin:.3rem 0 0;padding-left:1.2rem}
.waiting{display:flex;gap:18px;align-items:center}
.waiting .emptyart{flex:none}

/* ---------- Leaderboard ---------- */
.podium{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:12px;align-items:end;margin:8px 0 18px}
.pod{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.pod .name{font-weight:800;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .dept{font-size:.78rem;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .block{width:100%;border-radius:18px 18px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:10px;color:var(--white);font-weight:800;font-size:1.6rem}
.pod .block small{font-size:.8rem;opacity:.9;font-weight:700}
.pod.p1 .block{height:150px;background:linear-gradient(180deg,var(--violet),var(--purple))} .pod.p2 .block{height:112px;background:linear-gradient(180deg,#7b4bb5,var(--purple-dk))} .pod.p3 .block{height:84px;background:linear-gradient(180deg,#6a3aa6,var(--purple-dd))}
.pod .crown{color:#F2C230;margin-bottom:-4px}
.pod .avatar{box-shadow:0 0 0 4px var(--white),0 6px 16px rgba(42,18,71,.2)}
.rowitem{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:16px;background:var(--white);box-shadow:var(--shadow)}
.rowitem.me{background:var(--purple-lt);box-shadow:0 0 0 2px var(--purple)}
.rowitem .rk{width:34px;font-weight:800;color:var(--purple);text-align:center;font-variant-numeric:tabular-nums}
.rowitem .who{flex:1;min-width:0}
.rowitem .who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowitem .pt{font-weight:800;font-variant-numeric:tabular-nums}
.deptbar{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:10px 14px;border-radius:16px;background:var(--white);box-shadow:var(--shadow)}
.deptbar .meter{height:10px;border-radius:99px;background:var(--grey);overflow:hidden;margin-top:6px}
.deptbar .meter i{display:block;height:100%;width:var(--w,0%);background:linear-gradient(90deg,var(--purple),var(--violet));border-radius:99px;transition:width 1s var(--ease)}
.avatar{--s:36px;width:var(--s);height:var(--s);border-radius:50%;display:inline-grid;place-items:center;font-weight:800;font-size:calc(var(--s) * .38);flex:none;letter-spacing:.02em}
.av-purple{background:var(--purple);color:var(--white)} .av-blue{background:var(--blue);color:var(--white)} .av-aqua{background:var(--aqua);color:var(--ink)}
.av-orange{background:var(--orange);color:var(--ink)} .av-lime{background:var(--lime);color:var(--ink)} .av-violet{background:#9b1fc9;color:var(--white)}
.seeall{display:flex;justify-content:center;margin-top:8px}
.emptystate{text-align:center;padding:30px 16px}
.emptystate p{max-width:380px;margin:.4rem auto 0;color:var(--muted)}

/* ---------- Badges ---------- */
.medal{display:block;filter:drop-shadow(0 6px 10px rgba(42,18,71,.18))}
.medal:not(.earned){filter:none}
.medal-n{font-size:15px;font-weight:800;font-family:inherit}
.badgecard{display:flex;gap:14px;align-items:center;background:var(--white);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);min-width:0}
.badgecard.earned{box-shadow:0 0 0 2px var(--purple),var(--shadow)}
.badgecard:not(.earned) h3,.badgecard:not(.earned) .small{color:var(--muted)}
.badgecard h3{margin:0 0 .15rem}
.bprog{height:8px;border-radius:99px;background:var(--grey);overflow:hidden;margin-top:8px}
.bprog i{display:block;height:100%;width:var(--w,0%);background:linear-gradient(90deg,var(--purple),var(--violet));border-radius:99px}
.tierhead{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.tierhead .sw{width:14px;height:14px;border-radius:50%}
.sw-gold{background:#E3B22A} .sw-silver{background:#9AA1AE} .sw-bronze{background:#B8703A}
dialog.modal{border:0;border-radius:28px;padding:0;max-width:min(440px,92vw);box-shadow:var(--shadow-lg);overflow:visible}
dialog.modal::backdrop{background:rgba(27,16,48,.6);backdrop-filter:blur(3px)}
dialog.modal .in{padding:30px 26px 26px;text-align:center}
dialog.modal .medalbig{display:grid;place-items:center;margin:-70px auto 8px}
dialog.modal .medalbig svg{filter:drop-shadow(0 14px 22px rgba(42,18,71,.35))}

/* ---------- tables, tabs, misc (admin) ---------- */
table{width:100%;border-collapse:collapse;background:var(--white)}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--grey);vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--grey-lt)}
tr.me td{background:var(--purple-lt);font-weight:700}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--white)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tabs button{background:var(--white);color:var(--purple);border-color:var(--line);min-height:40px;padding:.4rem 1.1rem;box-shadow:none}
.tabs button:hover{background:var(--purple-lt);transform:none;box-shadow:none;color:var(--purple-dk)}
.tabs button[aria-selected=true]{background:var(--purple);color:var(--white);border-color:var(--purple)}
.kpi{background:var(--white);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.kpi .n{font-size:2.2rem;font-weight:800;color:var(--purple);line-height:1.1;letter-spacing:-.02em}
.kpi .n.wordy{font-size:1.35rem;padding:.35rem 0}
.kpi .l{font-size:.78rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
pre.prompt{background:var(--grey-lt);border:2px solid var(--grey);border-radius:14px;padding:12px;max-height:260px;overflow:auto;white-space:pre-wrap;font-size:.8rem}
progress{width:100%;height:10px;border-radius:99px;overflow:hidden;appearance:none;border:0;background:var(--grey);margin-top:8px}
progress::-webkit-progress-bar{background:var(--grey);border-radius:99px}
progress::-webkit-progress-value{background:var(--purple);border-radius:99px}
progress::-moz-progress-bar{background:var(--purple);border-radius:99px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--white);padding:.85rem 1.3rem;border-radius:16px;z-index:60;max-width:min(560px,92vw);box-shadow:var(--shadow-lg);animation:rise .3s var(--ease)}
@media (max-width:760px){#toast{bottom:92px}}

/* empty-state artwork colours (brand palette) */
.emptyart .e-grey{fill:#d6d2dc} .emptyart .e-purple{fill:var(--purple)} .emptyart .e-magenta{fill:var(--magenta)}
.emptyart .e-stroke{stroke:var(--purple)}
.emptystate .emptyart{margin:0 auto}
/* the question heading takes focus after each step for screen readers; it is not interactive, so no ring */
[tabindex="-1"]:focus{outline:none}
/* the word counter should track typing closely */
.wordring .ring-fg{transition-duration:.2s}

/* skeleton loading */
.skel{border-radius:var(--radius);background:linear-gradient(90deg,var(--grey) 25%,#f4f2f7 50%,var(--grey) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}