/* ==========================================================================
   Cognify v2 — Redesign foundation + quiz-flow components
   --------------------------------------------------------------------------
   Design source (Claude Design project "Cognify v2"):
     - Cognify Quiz.dc.html          (picker / question / feedback / transition)
     - Cognify Question Types.dc.html (interactive types — deferred, see CLAUDE.md)

   This file is loaded on the production /quiz flow only (Pass 1). The FOUNDATION
   layer (fonts + :root tokens) is intentionally page-agnostic so later passes
   (landing, results, auth, share, history) can adopt the same system.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/hanken-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/hanken-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/hanken-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/hanken-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/space-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/space-mono-400.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-mono-700.woff2') format('woff2')}

/* ---------- Foundation tokens ---------- */
:root{
  --cg-bg:#0e0f13;
  --cg-surface:#16171c;
  --cg-surface-hi:#191b22;
  --cg-panel:#0e0f13;
  --cg-border:#24262d;
  --cg-border-2:#25272e;
  --cg-border-soft:rgba(255,255,255,.06);
  --cg-text:#eceef2;
  --cg-text-2:#c9cdd4;
  --cg-text-dim:#8a8f9a;
  --cg-text-mute:#7d828d;
  --cg-text-faint:#565d6b;

  --cg-font-display:'Space Grotesk',system-ui,sans-serif;
  --cg-font-body:'Hanken Grotesk',system-ui,sans-serif;
  --cg-font-mono:'Space Mono',ui-monospace,monospace;

  /* outcome palette */
  --cg-correct:#3FB85F;
  --cg-incorrect:#EF4453;
  --cg-timesup:#E0B020;
  --cg-skipped:#8A93A3;
}

/* ==========================================================================
   Quiz shell
   ========================================================================== */
.cg-quiz{
  --accent:#6366F1; /* overridden per-screen inline */
  position:relative;
  min-height:100vh;
  background:var(--cg-bg);
  color:var(--cg-text);
  font-family:var(--cg-font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
}
.cg-quiz *{box-sizing:border-box}

/* ambient top glow */
.cg-quiz__glow{
  position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:900px;max-width:120vw;height:420px;pointer-events:none;opacity:.32;z-index:0;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%);
  transition:background .4s ease;
}

/* top bar */
.cg-topbar{
  position:relative;z-index:5;height:68px;flex:none;
  border-bottom:1px solid var(--cg-border-soft);
  display:flex;align-items:center;
}
.cg-topbar__inner{
  width:100%;max-width:1180px;margin:0 auto;padding:0 36px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.cg-wordmark{
  font-family:var(--cg-font-display);font-size:28px;font-weight:600;
  color:var(--cg-text);letter-spacing:-.01em;text-decoration:none;
}
.cg-bar-title{
  font-family:var(--cg-font-mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:#9aa0ab;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cg-topbar__spacer{min-width:96px}

/* footer — mirrors the top bar height, sits at the bottom of the flex column */
.cg-footer{
  position:relative;z-index:5;height:68px;flex:none;
  border-top:1px solid var(--cg-border-soft);
  display:flex;align-items:center;
}
.cg-footer__inner{
  width:100%;max-width:1180px;margin:0 auto;padding:0 36px;
  display:flex;align-items:center;justify-content:center;gap:18px;
}

/* stage below the bar */
.cg-stage{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;
}
/* HTMX-swapped content container fills the stage so screens can center */
.cg-content{flex:1;min-width:0;display:flex;flex-direction:column}

/* screen entrance */
@keyframes cg-screen-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cg-row-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cg-halo-in{from{opacity:0}to{opacity:1}}
@keyframes cg-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.cg-screen{animation:cg-screen-in .45s ease both}

/* shared centered screen */
.cg-center{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 36px;width:100%;
}

/* ==========================================================================
   Typographic primitives
   ========================================================================== */
.cg-eyebrow{
  font-family:var(--cg-font-mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cg-text-mute);
}
.cg-h1{
  font-family:var(--cg-font-display);font-size:40px;font-weight:600;
  color:var(--cg-text);letter-spacing:-.015em;line-height:1.08;
}
.cg-lead{font-size:17px;color:var(--cg-text-mute);line-height:1.55}

/* ==========================================================================
   Buttons
   ========================================================================== */
.cg-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:none;background:var(--accent);color:#0b0d12;
  font-family:var(--cg-font-body);font-size:16.5px;font-weight:700;
  padding:15px 38px;border-radius:12px;cursor:pointer;white-space:nowrap;
  transition:filter .15s ease,opacity .15s ease,background .15s ease,border-color .15s ease;
}
.cg-btn:hover{filter:brightness(1.08)}
.cg-btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
/* No UA focus ring on primary buttons — the design shows none (autofocus set one). */
.cg-btn:focus,.cg-btn:focus-visible,.cg-continue:focus,.cg-continue:focus-visible{outline:none}
.cg-btn--block{display:flex;width:100%;text-align:center}

/* Neutral variant — for generic / non-category CTAs (Start Assessment, Begin).
   "Neutral, subdued" (option 2 from /buttonexamples.html). */
.cg-btn--neutral{
  background:#191b22;color:#dfe2e8;border:1px solid #2b2e37;
}
.cg-btn--neutral:hover{background:#20222b;border-color:#383b46;filter:none}

.cg-btn--ghost{
  border:1.5px solid #2c2f38;background:none;color:#9aa3b2;
  font-weight:500;font-size:16px;padding:15px 28px;
}
.cg-btn--ghost:hover{border-color:#3a3d46;color:#cfd3da;filter:none}

/* Fixed-size submit: label reserves width, loading state overlays it */
.cg-btn--submit{position:relative}
.cg-btn__loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
}

[x-cloak]{display:none !important}

/* ==========================================================================
   ABOUT / prose
   ========================================================================== */
.cg-about{max-width:720px;margin:0 auto;padding:52px 36px 72px;width:100%}
.cg-about__back{display:inline-flex;align-items:center;gap:6px;margin-bottom:26px}
.cg-prose h1{font-family:var(--cg-font-display);font-size:38px;font-weight:600;color:var(--cg-text);letter-spacing:-.015em;line-height:1.1;margin:0 0 18px}
.cg-prose h2{font-family:var(--cg-font-display);font-size:22px;font-weight:600;color:var(--cg-text);letter-spacing:-.01em;margin:40px 0 14px}
.cg-prose h3{font-family:var(--cg-font-display);font-size:17px;font-weight:600;color:var(--cg-text);margin:24px 0 8px}
.cg-prose p{font-size:16px;color:var(--cg-text-2);line-height:1.7;margin:0 0 16px}
.cg-prose .cg-prose__intro{font-size:18px;color:var(--cg-text);margin-bottom:32px}
.cg-prose ul{margin:0 0 16px;padding-left:20px}
.cg-prose li{font-size:16px;color:var(--cg-text-2);line-height:1.6;margin-bottom:8px}
.cg-prose li::marker{color:var(--cg-text-mute)}
.cg-prose strong{color:var(--cg-text);font-weight:600}
.cg-prose a{color:color-mix(in srgb,var(--accent) 72%,white);text-decoration:none}
.cg-prose a:hover{text-decoration:underline}
/* Preserve the color-coded difficulty labels, mapped to the v2 palette */
.cg-prose strong.text-green-300{color:#3FB85F}
.cg-prose strong.text-yellow-300{color:#E0B020}
.cg-prose strong.text-red-300{color:#EF4453}

/* ==========================================================================
   LANDING / hero
   ========================================================================== */
.cg-topbar__nav{display:flex;align-items:center;gap:18px;font-size:14px}
.cg-navlink{color:var(--cg-text-dim);text-decoration:none;transition:color .15s ease;background:none;border:none;cursor:pointer;font-family:inherit;font-size:14px}
.cg-navlink:hover{color:#fff}
.cg-navlink--user{color:var(--cg-text-2)}

.cg-hero{
  max-width:600px;margin:0 auto;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:12px 0 24px;
}
.cg-hero__polygon{width:640px;max-width:92vw;height:auto;margin-bottom:20px}
.cg-hero__eyebrow{margin-bottom:16px}
.cg-hero__lead{font-size:18px;color:var(--cg-text-2);line-height:1.55;max-width:460px;margin-bottom:34px}
.cg-hero__actions{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:340px}
.cg-hero__actions .cg-btn{width:100%}
.cg-hero__startover{background:none;border:none;cursor:pointer;font-family:inherit;font-size:13.5px;color:var(--cg-text-mute);text-decoration:underline;text-underline-offset:2px}
.cg-hero__startover:hover{color:#cfd3da}
.cg-hero__secondary{margin-top:24px;display:flex;gap:12px;align-items:center;font-size:14px;color:var(--cg-text-dim)}
.cg-hero__about{margin-top:26px;font-size:14px;color:var(--cg-text-mute);text-decoration:none}
.cg-hero__about:hover{color:#cfd3da}

/* Mobile-warning interstitial (shares the hero column) */
.cg-warn{max-width:440px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px}
.cg-warn__icon{
  width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);color:var(--accent);margin-bottom:22px;
}
.cg-warn__title{font-family:var(--cg-font-display);font-size:26px;font-weight:600;color:var(--cg-text);margin-bottom:16px}
.cg-warn__body{font-size:15px;color:var(--cg-text-2);line-height:1.6;margin-bottom:28px;display:flex;flex-direction:column;gap:14px}
.cg-warn__back{margin-top:16px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:14px;color:var(--cg-text-dim)}
.cg-warn__back:hover{color:#cfd3da}

/* ==========================================================================
   PICKER
   ========================================================================== */
.cg-picker{width:100%}
.cg-picker__inner{max-width:1000px;margin:0 auto;padding:64px 36px 72px;width:100%}
.cg-picker .cg-eyebrow{display:block;margin-bottom:14px}
.cg-picker .cg-h1{margin-bottom:12px}
.cg-picker__lead{font-size:17px;color:var(--cg-text-mute);line-height:1.55;max-width:560px;margin-bottom:40px}
.cg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.cg-catcard{
  --bar:var(--accent);
  position:relative;background:var(--cg-surface);border:1px solid var(--cg-border-2);
  border-radius:16px;padding:22px 22px 20px;cursor:pointer;overflow:hidden;
  min-height:128px;display:flex;flex-direction:column;justify-content:space-between;
  text-align:left;width:100%;color:inherit;font-family:inherit;
  transition:background .18s ease,border-color .18s ease;
}
.cg-catcard:hover,.cg-catcard:focus-visible{background:var(--cg-surface-hi);border-color:var(--bar);outline:none}
.cg-catcard:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--bar) 30%,transparent)}
.cg-catcard__bar{position:absolute;top:0;left:0;width:4px;height:100%;background:var(--bar)}
.cg-catcard__top{display:flex;align-items:flex-start;gap:11px}
.cg-catcard__swatch{width:13px;height:13px;border-radius:4px;background:var(--bar);flex:none;margin-top:4px}
.cg-catcard__name{
  font-family:var(--cg-font-display);font-size:18px;font-weight:600;
  color:#e4e7ec;line-height:1.25;letter-spacing:-.005em;
}
.cg-catcard__foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.cg-catcard__hint{font-family:var(--cg-font-mono);font-size:11px;letter-spacing:.04em;color:#6a6f7a}
.cg-catcard__go{font-size:13px;color:var(--cg-text-faint);transition:color .18s ease}
.cg-catcard:hover .cg-catcard__go,.cg-catcard:focus-visible .cg-catcard__go{color:#9aa3b2}

.cg-picker__random{margin-top:26px}
.cg-picker__random .cg-btn--ghost{width:auto;padding:13px 26px}

/* ==========================================================================
   QUESTION
   ========================================================================== */
.cg-q{width:100%;max-width:760px;margin:0 auto}
.cg-q__notice{
  margin-bottom:22px;padding:11px 16px;border-radius:12px;font-size:13.5px;text-align:center;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  color:color-mix(in srgb,var(--accent) 70%,white);
}
.cg-q__meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px}
.cg-q__cat{
  font-family:var(--cg-font-mono);font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cg-q__diff{display:flex;align-items:center;gap:9px;flex:none}
.cg-q__diff-name{font-family:var(--cg-font-mono);font-size:12px;letter-spacing:.05em;color:#6a6f7a}
.cg-dots{display:flex;gap:4px}
.cg-dot{width:7px;height:7px;border-radius:50%;background:#2c2e36}
.cg-dot--on{background:var(--accent)}

.cg-q__text{
  font-family:var(--cg-font-display);font-size:27px;font-weight:400;line-height:1.34;
  color:var(--cg-text);letter-spacing:-.01em;margin-bottom:38px;text-wrap:pretty;
}
.cg-input{
  width:100%;background:var(--cg-surface);
  border:1.5px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-radius:12px;outline:none;font-family:var(--cg-font-body);font-size:17px;
  color:#f0f1f4;padding:15px 18px;margin-bottom:14px;transition:border-color .15s ease,background .15s ease;
}
.cg-input::placeholder{color:var(--cg-text-faint);opacity:1}
.cg-input:focus{border-color:var(--accent);background:var(--cg-surface-hi)}

.cg-timer{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.cg-timer__track{flex:1;height:3px;background:#22242b;border-radius:3px;overflow:hidden}
.cg-timer__bar{height:100%;width:100%;background:var(--accent);border-radius:3px}
@keyframes cg-timer-drain{from{width:100%}to{width:0%}}
.cg-timer__bar--anim{animation:cg-timer-drain var(--timer-duration) linear forwards}

.cg-actions{display:flex;align-items:center;gap:12px}
.cg-hint{
  margin-top:18px;font-family:var(--cg-font-mono);font-size:12px;letter-spacing:.03em;color:var(--cg-text-faint);
}
.cg-hint b{color:#7c8595;font-weight:700}

/* Voluntary skip — deliberately understated text link, not a button. */
.cg-skiplink{
  display:block;margin:16px auto 0;background:none;border:none;cursor:pointer;
  font-family:var(--cg-font-body);font-size:13px;color:var(--cg-text-faint);
}
.cg-skiplink:hover{color:var(--cg-text-dim);text-decoration:underline}

.cg-spin{animation:cg-spin 1s linear infinite}
@keyframes cg-spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   FEEDBACK
   ========================================================================== */
.cg-fb-wrap{
  position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  padding:40px 36px;width:100%;
}
.cg-fb-wrap[data-oc="correct"]{--oc:var(--cg-correct)}
.cg-fb-wrap[data-oc="incorrect"]{--oc:var(--cg-incorrect)}
.cg-fb-wrap[data-oc="timesup"]{--oc:var(--cg-timesup)}
.cg-fb-wrap[data-oc="skipped"]{--oc:var(--cg-skipped)}
.cg-fb__halo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);
  width:760px;max-width:120vw;height:520px;pointer-events:none;animation:cg-halo-in .6s ease both;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--oc) 26%,transparent),transparent 68%);
}
.cg-fb{
  position:relative;width:100%;max-width:620px;background:var(--cg-surface);
  border:1px solid var(--cg-border);border-radius:22px;padding:40px 40px 30px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
}
.cg-fb__head{display:flex;align-items:center;gap:15px;margin-bottom:26px;animation:cg-row-in .4s ease both}
.cg-fb__icon{
  width:50px;height:50px;border-radius:50%;flex:none;
  background:color-mix(in srgb,var(--oc) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--oc) 45%,transparent);
  display:flex;align-items:center;justify-content:center;color:var(--oc);
  box-shadow:0 0 20px color-mix(in srgb,var(--oc) 32%,transparent);
  animation:cg-pop .45s cubic-bezier(.2,.8,.3,1) both;
}
.cg-fb__title{font-family:var(--cg-font-display);font-size:25px;font-weight:600;color:var(--oc);line-height:1.1}
.cg-fb__sub{font-size:13.5px;color:#6b7280;margin-top:3px}
.cg-fb__q{font-size:17px;color:#aeb6c2;line-height:1.5;margin-bottom:22px;animation:cg-row-in .4s .05s ease both}
.cg-fb__blocks{display:flex;flex-direction:column;gap:11px;margin-bottom:26px;animation:cg-row-in .4s .12s ease both}

.cg-ans{border-radius:13px;padding:15px 18px}
.cg-ans__label{
  font-family:var(--cg-font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#6b7280;margin-bottom:5px;
}
.cg-ans__val{font-size:18px}
.cg-ans--wrong{background:color-mix(in srgb,var(--cg-incorrect) 8%,transparent);border:1px solid color-mix(in srgb,var(--cg-incorrect) 20%,transparent)}
.cg-ans--wrong .cg-ans__val{color:#d6a0a6;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--cg-incorrect) 40%,transparent)}
.cg-ans--your{background:color-mix(in srgb,var(--oc) 14%,transparent);border:1px solid color-mix(in srgb,var(--oc) 34%,transparent)}
.cg-ans--your .cg-ans__val{color:#f3f4f8;font-weight:500}
.cg-ans--correct{background:color-mix(in srgb,var(--cg-correct) 6%,transparent);border:1px solid color-mix(in srgb,var(--cg-correct) 18%,transparent)}
.cg-ans--correct .cg-ans__val{color:#f3f4f8;font-weight:500}

.cg-continue{
  width:100%;border:none;font-family:var(--cg-font-body);font-size:16.5px;font-weight:600;
  padding:16px;border-radius:13px;cursor:pointer;
  background:rgba(255,255,255,.05);color:#f3f4f8;transition:filter .15s ease;
}
.cg-continue:hover{filter:brightness(1.15)}
.cg-fb-wrap[data-oc="correct"] .cg-continue{background:var(--cg-correct);color:#06210f}

.cg-report-row{text-align:center;margin-top:18px}
.cg-report-link{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:13.5px;color:var(--cg-text-faint);background:none;border:none;font-family:inherit;
  transition:color .15s ease;
}
.cg-report-link:hover{color:#9aa3b2;text-decoration:underline}

/* report panel + ratings (kept close to design's neutral chrome) */
.cg-report-panel{
  margin-top:16px;background:var(--cg-panel);border:1px solid var(--cg-border);
  border-radius:14px;padding:16px;text-align:left;
}
.cg-report-panel__label{font-size:13px;color:var(--cg-text-dim);margin-bottom:12px}
.cg-reason{
  padding:6px 12px;font-size:12px;border-radius:999px;border:1px solid #363a4a;
  background:#242836;color:var(--cg-text-dim);cursor:pointer;transition:all .12s ease;font-family:inherit;
}
.cg-reason:hover{border-color:#4a4e5e;color:#fff}
.cg-reason--on{background:var(--accent);border-color:var(--accent);color:#0b0d12;font-weight:600}
.cg-textarea{
  width:100%;padding:10px 12px;background:#242836;border:1px solid #363a4a;border-radius:10px;
  color:#fff;font-size:14px;font-family:inherit;resize:none;outline:none;
}
.cg-textarea::placeholder{color:color-mix(in srgb,var(--cg-text-dim) 50%,transparent)}
.cg-textarea:focus{border-color:var(--accent)}
.cg-mini-btn{padding:6px 12px;font-size:13px;border-radius:10px;border:none;cursor:pointer;font-family:inherit}
.cg-mini-btn--primary{background:var(--accent);color:#0b0d12;font-weight:600}
.cg-mini-btn--ghost{background:none;color:var(--cg-text-dim)}
.cg-rate{background:none;border:none;cursor:pointer;color:var(--cg-text-dim);transition:color .15s ease;padding:0}

/* ==========================================================================
   TRANSITION
   ========================================================================== */
.cg-tr-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:40px 36px;width:100%}
.cg-tr__halo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);
  width:820px;max-width:120vw;height:560px;pointer-events:none;animation:cg-halo-in .7s ease both;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 22%,transparent),transparent 68%);
}
.cg-tr{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:480px}
.cg-tr__icon{
  width:72px;height:72px;border-radius:22px;
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:26px;
  box-shadow:0 0 34px color-mix(in srgb,var(--accent) 22%,transparent);
  animation:cg-pop .5s cubic-bezier(.2,.8,.3,1) both;
}
.cg-tr__eyebrow{margin-bottom:12px}
.cg-tr__name{
  font-family:var(--cg-font-display);font-size:36px;font-weight:600;color:var(--cg-text);
  letter-spacing:-.015em;line-height:1.12;margin-bottom:10px;
}
.cg-tr__copy{font-size:16px;color:var(--cg-text-dim);line-height:1.55;max-width:360px;margin-bottom:36px}

/* ==========================================================================
   INSTRUCTIONS
   ========================================================================== */
.cg-inst{width:100%;max-width:620px;margin:0 auto}
.cg-inst__eyebrow{display:block;margin-bottom:14px}
.cg-inst__title{font-family:var(--cg-font-display);font-size:34px;font-weight:600;color:var(--cg-text);letter-spacing:-.01em;line-height:1.1;margin-bottom:8px}
.cg-inst__intro{font-size:16px;color:var(--cg-text-mute);line-height:1.55;margin-bottom:28px}
.cg-inst__list{display:flex;flex-direction:column;gap:14px;margin-bottom:30px}
.cg-inst__item{
  display:flex;gap:14px;align-items:flex-start;
}
.cg-inst__ic{flex:none;margin-top:1px;color:var(--accent)}
.cg-inst__ic--heart{color:var(--cg-incorrect)}
.cg-inst__txt{font-size:15px;color:var(--cg-text-2);line-height:1.5}
.cg-inst__txt strong{color:var(--cg-text);font-weight:600}
.cg-inst__cheer{font-size:15px;color:color-mix(in srgb,var(--accent) 70%,white);font-weight:500;text-align:center;margin-bottom:22px}

/* ==========================================================================
   MODULE PICKER extras (folded from module-picker.html.twig inline <style>)
   ========================================================================== */
/* The card is a <form>; a full-bleed submit button makes the whole card a
   click target while keeping the visible chrome identical to .cg-catcard. */
.cg-catcard__hitbox{position:absolute;inset:0;width:100%;height:100%;background:none;border:none;cursor:pointer;padding:0;margin:0;z-index:2}
.cg-catcard__hitbox:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--bar) 30%,transparent)}
.cg-catcard__badge{
  display:inline-block;margin-left:8px;vertical-align:middle;
  font-family:var(--cg-font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;color:var(--bar);
  background:color-mix(in srgb,var(--bar) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--bar) 40%,transparent);
}

/* ==========================================================================
   INTERACTIVE QUESTION TYPES
   (Design: "Cognify Question Types.dc.html" — idle / in-progress / feedback)
   All live inside .cg-q; the prompt renders as .cg-q__text (Space Grotesk).
   ========================================================================== */

/* ---- Prompt + framed image (shared across interactions) ---- */
/* Landscape fills the content width; portraits are capped at 600px tall and
   centered (the <img> scales proportionally under the max constraints, so the
   frame hugs the image rather than letterboxing it). */
.cg-q__image{
  display:block;max-width:100%;max-height:600px;width:auto;height:auto;
  object-fit:contain;margin:0 auto 20px;
  border:1px solid var(--cg-border-2);border-radius:14px;
  background:var(--cg-surface);
}
.cg-q__image--flag{max-height:110px;width:auto;margin:0 auto 16px;background:rgba(255,255,255,.05)}
/* interaction prompt: slightly smaller than the legacy text-question prompt */
.cg-q__text--interaction{font-size:24px;margin-bottom:24px}
/* Fill-in-the-blank line: constant width so it never hints at the answer length
   (see the |blanks Twig filter). ~5 underscore widths, drawn on the baseline. */
.cg-blank{
  display:inline-block;width:2.6em;margin:0 .16em;
  border-bottom:2px solid currentColor;
  vertical-align:baseline;
}
.cg-q__prompt-center{text-align:center}

/* ---- Type 01 · Single choice (option cards, auto-submit) ---- */
.cg-opts{display:flex;flex-direction:column;gap:10px}
.cg-opt{
  position:relative;width:100%;text-align:left;
  background:var(--cg-surface);border:1px solid var(--cg-border-2);border-radius:12px;
  padding:15px 16px;cursor:pointer;font-family:var(--cg-font-body);font-size:15.5px;
  color:var(--cg-text-2);transition:border-color .15s ease,background .15s ease;
}
.cg-opt:hover{border-color:#3a3d46}
.cg-opt:disabled{cursor:default}
.cg-opt--on{
  border:2px solid var(--accent);color:#f0f1f4;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}

/* ---- Type 02 · Select all (tap tiles) ---- */
.cg-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.cg-tile{
  position:relative;border-radius:12px;padding:16px 0;text-align:center;cursor:pointer;
  font-family:var(--cg-font-display);font-size:19px;font-weight:500;color:var(--cg-text-2);
  background:var(--cg-surface);border:1px solid var(--cg-border-2);
  transition:border-color .15s ease,background .15s ease;
}
.cg-tile:hover{border-color:#3a3d46}
.cg-tile--on{
  border:2px solid var(--accent);color:#f0f1f4;font-weight:600;
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}
/* feedback tri-state grid */
.cg-tiles--fb{gap:8px;margin-bottom:16px}
.cg-tile--fb{padding:13px 0;font-size:17px;font-weight:600;border-radius:10px;cursor:default}
.cg-tile--right{color:#7be59a;background:color-mix(in srgb,var(--cg-correct) 12%,transparent);border:1.5px solid color-mix(in srgb,var(--cg-correct) 55%,transparent)}
.cg-tile--missed{color:#ecca6a;background:color-mix(in srgb,var(--cg-timesup) 9%,transparent);border:1.5px dashed color-mix(in srgb,var(--cg-timesup) 66%,transparent)}
.cg-tile--wrongpick{color:#f0939d;background:color-mix(in srgb,var(--cg-incorrect) 9%,transparent);border:1.5px solid color-mix(in srgb,var(--cg-incorrect) 55%,transparent);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--cg-incorrect) 60%,transparent)}
.cg-tile--off{color:#4a5160;background:var(--cg-surface);border:1px solid var(--cg-border-2)}
.cg-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:11.5px;color:var(--cg-text-dim)}
.cg-legend span{display:flex;align-items:center;gap:5px}
.cg-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.cg-legend i.right{background:color-mix(in srgb,var(--cg-correct) 40%,transparent);border:1px solid var(--cg-correct)}
.cg-legend i.missed{background:color-mix(in srgb,var(--cg-timesup) 9%,transparent);border:1px dashed color-mix(in srgb,var(--cg-timesup) 66%,transparent)}
.cg-legend i.wrong{background:color-mix(in srgb,var(--cg-incorrect) 9%,transparent);border:1px solid color-mix(in srgb,var(--cg-incorrect) 47%,transparent)}

/* ---- Type 03 · Match two columns ---- */
.cg-match{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cg-match__col{display:flex;flex-direction:column;gap:10px}
/* Space is always reserved (min-height) so the hint appearing/vanishing never shifts the columns. */
.cg-match__hint{font-family:var(--cg-font-mono);font-size:12.5px;color:var(--accent);margin-bottom:16px;min-height:17px}
.cg-match__row{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:var(--cg-surface);border:1px solid var(--cg-border-2);border-radius:11px;
  padding:13px 14px;font-size:15px;color:var(--cg-text-2);cursor:pointer;text-align:left;
  font-family:var(--cg-font-body);width:100%;transition:border-color .15s ease,background .15s ease;
}
.cg-match__row:hover{border-color:#3a3d46}
.cg-match__row--active{
  border:2px solid var(--accent);color:#f0f1f4;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}
.cg-match__row--linked{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:#eceef2}
.cg-match__row--used{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:#eceef2}
.cg-match__token{
  width:18px;height:18px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--cg-font-mono);font-size:10px;font-weight:700;
  background:var(--accent);color:#0b0d12;
}
.cg-match__dot{width:11px;height:11px;border-radius:50%;border:2px solid #33363f;flex:none}
.cg-match__sub{display:block;font-size:11px;color:color-mix(in srgb,var(--accent) 78%,white);margin-top:3px}
.cg-match__rlabel{flex:1}
.cg-match__foot-note{font-family:var(--cg-font-mono);font-size:11.5px;color:var(--cg-text-faint);text-align:center;margin-top:10px}

/* feedback: per-pair rows */
.cg-mrow{border-radius:11px;padding:12px 14px}
.cg-mrow__line{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cg-mrow__left{font-size:14.5px;color:var(--cg-text-2)}
.cg-mrow__right{display:flex;align-items:center;gap:8px;font-size:14.5px}
.cg-mrow--ok{background:color-mix(in srgb,var(--cg-correct) 6%,transparent);border:1px solid color-mix(in srgb,var(--cg-correct) 18%,transparent)}
.cg-mrow--ok .cg-mrow__right{color:#7be59a;font-weight:500}
.cg-mrow--bad{background:color-mix(in srgb,var(--cg-incorrect) 7%,transparent);border:1px solid color-mix(in srgb,var(--cg-incorrect) 19%,transparent)}
.cg-mrow--bad .cg-mrow__right{color:#d6a0a6;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--cg-incorrect) 40%,transparent)}
.cg-mrow__fix{display:flex;justify-content:flex-end;margin-top:5px;font-size:13px;color:#7be59a}

/* ---- Type 04 · Order / sequence (drag) ---- */
.cg-order{display:flex;flex-direction:column;gap:10px}
.cg-order__note{font-family:var(--cg-font-mono);font-size:12.5px;color:var(--cg-text-faint);margin-bottom:16px}
.cg-order__row{
  display:flex;align-items:center;gap:12px;
  background:var(--cg-surface);border:1px solid var(--cg-border-2);border-radius:12px;
  padding:14px 15px;user-select:none;touch-action:none;cursor:grab;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.cg-order__row:active{cursor:grabbing}
/* While a drag is in flight, rows must not animate — the drag hit-testing
   measures row rects on every pointermove and animated (mid-transition)
   rects make the computed drop slot unstable. */
.cg-order--dragging .cg-order__row{transition:none}
.cg-order__row--drag{
  border:1.5px solid var(--accent);background:var(--cg-surface-hi);
  box-shadow:0 12px 26px -8px rgba(0,0,0,.6);transform:scale(1.02);color:#f0f1f4;
}
.cg-order__handle{width:16px;height:16px;flex:none;color:#5c626e}
.cg-order__row--drag .cg-order__handle{color:var(--accent)}
.cg-order__idx{font-family:var(--cg-font-mono);font-size:12px;color:var(--cg-text-dim);width:20px;text-align:center;flex:none}
.cg-order__label{flex:1;font-size:15px;color:var(--cg-text)}

/* feedback: per-row */
.cg-orow{display:flex;align-items:center;gap:11px;border-radius:11px;padding:11px 13px}
.cg-orow__num{width:20px;height:20px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--cg-font-mono);font-size:11px;font-weight:700}
.cg-orow__label{flex:1;font-size:14.5px;color:#e2e5ea}
.cg-orow__fix{font-family:var(--cg-font-mono);font-size:11.5px;color:var(--cg-text-dim)}
.cg-orow--ok{background:color-mix(in srgb,var(--cg-correct) 6%,transparent);border:1px solid color-mix(in srgb,var(--cg-correct) 18%,transparent)}
.cg-orow--ok .cg-orow__num{background:color-mix(in srgb,var(--cg-correct) 13%,transparent);color:#7be59a}
.cg-orow--bad{background:color-mix(in srgb,var(--cg-incorrect) 7%,transparent);border:1px solid color-mix(in srgb,var(--cg-incorrect) 19%,transparent)}
.cg-orow--bad .cg-orow__num{background:color-mix(in srgb,var(--cg-incorrect) 15%,transparent);color:#f0939d}

/* ---- Type 05/06 · Map (country click) ---- */
.cg-map{
  width:100%;height:60vh;max-height:560px;min-height:320px;
  border-radius:12px;overflow:hidden;touch-action:none;
  background:radial-gradient(circle at 50% 40%,#102036 0%,#0b1220 80%);
  border:1px solid var(--cg-border-2);
}
.cg-map-wrap{position:relative;width:100%}
.cg-map__lock{position:absolute;inset:0;z-index:6;cursor:default}
.cg-map__reset{
  position:absolute;top:8px;right:8px;z-index:2;
  padding:6px 12px;font-size:13px;border-radius:10px;
}
.cg-map__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--cg-text-dim);font-size:14px}
.cg-map__status{display:flex;align-items:center;justify-content:center;gap:8px;min-height:1.5rem;margin-bottom:12px;font-size:14px;color:var(--cg-text-dim)}
.cg-map__status--picked{color:var(--cg-correct)}
.cg-map__caption{font-size:14px;color:var(--cg-text-dim);text-align:center;margin-bottom:10px}
.cg-map__caption b.ok{color:var(--cg-correct);font-weight:600}
.cg-map__caption b.bad{color:var(--cg-incorrect);font-weight:600}

/* ---- Type 07 · Sort into buckets (drag chip → drop on bucket) ---- */
.cg-sort__note{font-family:var(--cg-font-mono);font-size:12.5px;color:var(--cg-text-faint);margin-bottom:16px}
.cg-sort__tray{
  display:flex;flex-wrap:wrap;gap:8px;padding:14px;margin-bottom:16px;min-height:56px;
  border:1px dashed #33363f;border-radius:13px;align-items:center;
}
.cg-sort__tray--empty{border-style:solid;border-color:var(--cg-border-2)}
.cg-sort__tray-done{font-family:var(--cg-font-mono);font-size:12px;color:var(--cg-text-faint)}
.cg-sort__chip{
  background:#1c1d24;border:1px solid var(--cg-border-2);border-radius:9px;
  padding:9px 13px;font-family:var(--cg-font-body);font-size:14px;color:var(--cg-text-2);
  user-select:none;touch-action:none;cursor:grab;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.cg-sort__chip:hover{border-color:#3a3d46}
.cg-sort__chip:active{cursor:grabbing}
/* The stationary source chip while its ghost follows the pointer. */
.cg-sort__chip--src{opacity:.35;border-style:dashed}
/* Fixed-position ghost chip riding under the pointer during a drag. */
.cg-sort__ghost{
  position:fixed;z-index:60;transform:translate(-50%,-50%) scale(1.06);pointer-events:none;
  background:var(--cg-surface-hi);border:1.5px solid var(--accent);border-radius:9px;
  padding:9px 13px;font-family:var(--cg-font-body);font-size:14px;color:#f0f1f4;
  box-shadow:0 12px 26px -8px rgba(0,0,0,.6);white-space:nowrap;
}
.cg-sort__buckets{display:flex;flex-direction:column;gap:10px}
.cg-sort__bucket{
  display:block;width:100%;text-align:left;
  border:1px solid var(--cg-border-2);border-radius:12px;padding:12px 14px;min-height:56px;
  background:var(--cg-surface);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
/* Any drag in flight → every bucket hints that it can receive the chip. */
.cg-sort__bucket--target{border-style:dashed;border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
/* Pointer currently over this bucket → the active drop target. */
.cg-sort__bucket--over{
  border:1.5px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
}
.cg-sort__bucket-name{
  display:block;font-family:var(--cg-font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cg-text-mute);margin-bottom:6px;
}
.cg-sort__bucket--target .cg-sort__bucket-name,
.cg-sort__bucket--over .cg-sort__bucket-name{color:var(--accent)}
.cg-sort__bucket-items{display:flex;flex-wrap:wrap;gap:7px}
.cg-sort__placed{
  background:#1c1d24;border:1px solid var(--cg-border-2);border-radius:9px;
  padding:7px 11px;font-size:13.5px;color:#e2e5ea;
  user-select:none;touch-action:none;cursor:grab;
  transition:border-color .15s ease,opacity .15s ease;
}
.cg-sort__placed:hover{border-color:#3a3d46}
.cg-sort__placed:active{cursor:grabbing}
.cg-sort__foot-note{font-family:var(--cg-font-mono);font-size:11.5px;color:var(--cg-text-faint);text-align:center;margin-top:10px}

/* Two-bucket variant: radio column list (no drag). Header row = the two
   bucket labels as column headers; one row per item with a tappable
   radio cell per bucket. Accent only marks the selected cell. */
.cg-sort2{border:1px solid var(--cg-border-2);border-radius:13px;background:var(--cg-surface);overflow:hidden}
.cg-sort2__head,.cg-sort2__row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.cg-sort2__head{background:#131419;border-bottom:1px solid var(--cg-border-2)}
.cg-sort2__col{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--cg-font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.5;color:var(--cg-text-mute);padding:10px;border-left:1px solid var(--cg-border-2);
}
.cg-sort2__row{border-bottom:1px solid var(--cg-border-2)}
.cg-sort2__row:last-child{border-bottom:0}
.cg-sort2__item{display:flex;align-items:center;font-size:14.5px;color:var(--cg-text);padding:12px 14px}
.cg-sort2__cell{
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-left:1px solid var(--cg-border-2);
  padding:12px 10px;cursor:pointer;transition:background .15s ease;
}
.cg-sort2__cell:hover{background:rgba(255,255,255,.03)}
.cg-sort2__cell--on{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.cg-sort2__dot{
  width:18px;height:18px;border-radius:50%;position:relative;flex:none;
  border:2px solid #3a3d46;transition:border-color .15s ease;
}
.cg-sort2__cell:hover .cg-sort2__dot{border-color:#4a4e59}
.cg-sort2__cell--on .cg-sort2__dot{border-color:var(--accent)}
.cg-sort2__cell--on .cg-sort2__dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
@media (max-width:480px){
  .cg-sort2__head,.cg-sort2__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
  .cg-sort2__item{font-size:13.5px;padding:11px 10px}
  .cg-sort2__col{font-size:9.5px;letter-spacing:.04em;padding:9px 6px}
}

/* ---- Type 08 · Estimate (slider) ---- */
.cg-est{margin:8px 0 4px}
.cg-est__value{
  text-align:center;margin-bottom:24px;font-family:var(--cg-font-display);
  font-size:46px;font-weight:600;color:var(--accent);letter-spacing:-.02em;line-height:1;
}
.cg-est__slider{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;
  background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--pct,50%),#22242b var(--pct,50%),#22242b 100%);
  outline:none;cursor:pointer;margin:6px 0 12px;
}
.cg-est__slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);cursor:pointer;
  box-shadow:0 4px 12px -2px rgba(0,0,0,.5);
}
.cg-est__slider::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--accent);
  cursor:pointer;box-shadow:0 4px 12px -2px rgba(0,0,0,.5);
}
.cg-est__ends{
  display:flex;justify-content:space-between;font-family:var(--cg-font-mono);
  font-size:11px;color:var(--cg-text-mute);margin-bottom:24px;
}
/* estimate feedback: guess vs actual cells */
.cg-est-fb{display:flex;gap:10px}
.cg-est-fb__cell{
  flex:1;border-radius:12px;padding:12px 14px;text-align:center;
  background:var(--cg-surface);border:1px solid var(--cg-border-2);
}
.cg-est-fb__cell--guess{
  background:color-mix(in srgb,var(--oc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--oc) 30%,transparent);
}
.cg-est-fb__num{font-family:var(--cg-font-display);font-size:20px;font-weight:600;color:#f3f4f8;margin-top:3px}
.cg-est-fb__num--muted{color:var(--cg-text-2)}

/* ---- Type 09 · Read a chart ---- */
.cg-chart{
  background:#131419;border:1px solid var(--cg-border-2);border-radius:14px;
  padding:16px;margin-bottom:18px;
}
.cg-chart__canvas{width:100%;height:240px;max-height:44vh}
.cg-chart__hint{font-family:var(--cg-font-mono);font-size:12.5px;color:var(--cg-text-faint);text-align:center;margin:0}
.cg-chart__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.cg-chart__opt{
  position:relative;text-align:center;cursor:pointer;
  background:var(--cg-surface);border:1px solid var(--cg-border-2);border-radius:11px;
  padding:14px 10px;font-family:var(--cg-font-display);font-size:15px;font-weight:500;
  color:var(--cg-text-2);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.cg-chart__opt:hover{border-color:#3a3d46}
.cg-chart__opt:disabled{cursor:default}
.cg-chart__opt--on{
  border:2px solid var(--accent);color:#f0f1f4;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}

/* ---- Type 10 · Audio identify (clip player) ---- */
.cg-audio{
  display:flex;align-items:center;gap:16px;
  background:var(--cg-surface);border:1px solid var(--cg-border-2);border-radius:14px;
  padding:14px 18px;margin-bottom:10px;
}
.cg-audio__btn{
  flex:none;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);border:none;color:#fff;
  transition:transform .12s ease,filter .15s ease;
}
.cg-audio__btn:hover{filter:brightness(1.12)}
.cg-audio__btn:active{transform:scale(.94)}
.cg-audio__track{flex:1;height:5px;border-radius:5px;background:#22242b;overflow:hidden}
.cg-audio__bar{height:100%;width:0%;background:var(--accent);border-radius:5px}
.cg-audio__time{flex:none;font-family:var(--cg-font-mono);font-size:12px;color:var(--cg-text-mute);min-width:86px;text-align:right}
.cg-audio__hint{
  font-family:var(--cg-font-mono);font-size:11.5px;color:var(--cg-text-faint);
  text-align:center;margin-bottom:22px;
}

/* Submit spacing inside interactions */
.cg-q .cg-btn--block{margin-top:6px}
.cg-order .cg-btn--block,.cg-match .cg-btn--block,.cg-tiles + .cg-btn--block{margin-top:0}
.cg-int-actions{margin-top:20px}

/* ==========================================================================
   AUTH (login / register) — centered card
   ========================================================================== */
.cg-auth{width:100%;max-width:420px;margin:0 auto;padding:52px 24px 72px}
.cg-auth__title{font-family:var(--cg-font-display);font-size:30px;font-weight:600;color:var(--cg-text);letter-spacing:-.015em;line-height:1.1;text-align:center;margin-bottom:26px}
.cg-form{display:flex;flex-direction:column;gap:16px}
.cg-formrow{display:flex;flex-direction:column;gap:6px}
.cg-label{font-family:var(--cg-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cg-text-mute)}
/* Auth inputs use a neutral border (no per-screen accent tint like the quiz .cg-input) */
.cg-input--auth{border-color:var(--cg-border-2);margin-bottom:0}
.cg-input--auth:focus{border-color:#3a3d46;background:var(--cg-surface-hi)}
.cg-hinttext{font-size:12.5px;color:var(--cg-text-mute);line-height:1.5}
.cg-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--cg-text-2);cursor:pointer}
.cg-check input{accent-color:#5b5ee0;width:15px;height:15px}
.cg-alert{
  padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.5;
  background:color-mix(in srgb,var(--cg-incorrect) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--cg-incorrect) 30%,transparent);
  color:#e9a7ac;
}
.cg-alert ul{margin:0;padding-left:18px}
.cg-alert li{margin-bottom:2px}
.cg-alert li::marker{color:color-mix(in srgb,var(--cg-incorrect) 55%,transparent)}
.cg-authfoot{text-align:center;font-size:14px;color:var(--cg-text-mute);margin-top:18px}
.cg-link{color:color-mix(in srgb,#6366F1 72%,white);text-decoration:none}
.cg-link:hover{text-decoration:underline}
.cg-authback{display:block;text-align:center;margin-top:10px;font-size:13.5px}

/* Account benefits list (register) */
.cg-benefits{margin-bottom:26px;display:flex;flex-direction:column;gap:10px}
.cg-benefits__title{font-family:var(--cg-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cg-text-mute)}
.cg-benefit{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--cg-text-2);line-height:1.5}
.cg-benefit__tick{color:var(--cg-correct);flex:none;margin-top:1px}
.cg-benefit strong{color:var(--cg-text);font-weight:600}
.cg-benefits__note{font-size:12.5px;color:var(--cg-text-mute)}

/* ==========================================================================
   RESULTS / SHARE page (legacy ResultsController + ShareController::show)
   ========================================================================== */
.cg-page{width:100%;max-width:880px;margin:0 auto;padding:48px 36px 80px;display:flex;flex-direction:column;gap:48px}
.cg-rhead{text-align:center}
.cg-rhead__title{font-family:var(--cg-font-display);font-size:32px;font-weight:600;color:var(--cg-text);letter-spacing:-.015em;line-height:1.12;margin-bottom:6px}
.cg-rhead__score{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:12px}
.cg-rhead__score b{font-family:var(--cg-font-display);font-size:52px;font-weight:600;color:var(--cg-text);letter-spacing:-.02em}
.cg-rhead__score span{font-size:22px;color:var(--cg-text-mute)}
.cg-rhead__label{margin-top:8px;font-size:16px;color:var(--cg-text-mute)}
.cg-rhead__delta{margin-top:8px;font-size:13.5px;color:var(--cg-text-mute)}
.cg-rhead__delta--up{color:var(--cg-correct)}
.cg-polygon-sec{display:flex;justify-content:center}
.cg-actions-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.cg-actions-row .cg-btn{padding:13px 26px;font-size:15.5px}

.cg-section__title{font-family:var(--cg-font-display);font-size:20px;font-weight:600;color:var(--cg-text);letter-spacing:-.01em;margin-bottom:16px}
.cg-section__title--center{text-align:center}

/* per-category breakdown cards */
.cg-catlist{display:flex;flex-direction:column;gap:12px}
.cg-catbox{background:var(--cg-surface);border:1px solid var(--cg-border-2);border-radius:14px;padding:18px 20px;transition:box-shadow .3s ease}
.cg-catbox__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.cg-catbox__name{display:flex;align-items:center;gap:11px;font-family:var(--cg-font-display);font-size:16px;font-weight:600;color:#e4e7ec}
.cg-swatch{width:12px;height:12px;border-radius:4px;flex:none}
.cg-catbox__right{display:flex;align-items:center;gap:9px}
.cg-catbox__score{font-family:var(--cg-font-display);font-size:20px;font-weight:600;color:var(--cg-text)}
.cg-catbox__score span{font-size:13px;color:var(--cg-text-mute);font-weight:400}
.cg-pill{padding:3px 9px;border-radius:999px;font-family:var(--cg-font-mono);font-size:10.5px;letter-spacing:.04em;font-weight:400;border:1px solid}
.cg-pill--expert{background:rgba(245,158,11,.1);color:#f5b445;border-color:rgba(245,158,11,.32)}
.cg-subrows{display:flex;flex-direction:column;gap:6px;padding-left:23px}
.cg-subrow{display:flex;align-items:center;gap:12px}
.cg-subrow__name{flex:1;font-size:13.5px;color:var(--cg-text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-subrow__val{font-family:var(--cg-font-mono);font-size:12.5px;font-weight:400;flex:none;color:var(--cg-text-2)}
.cg-subrow__val--full{color:var(--cg-correct)}
.cg-subrow__val--zero{color:var(--cg-text-faint)}
.cg-chartbox{background:var(--cg-surface);border:1px solid var(--cg-border-2);border-radius:14px;padding:20px}

/* account-save prompt (anonymous results) */
.cg-savebox{background:var(--cg-surface);border:1px solid var(--cg-border-2);border-radius:16px;padding:24px}
.cg-savebox--ok{border-color:color-mix(in srgb,var(--cg-correct) 40%,transparent)}
.cg-savebox__title{font-family:var(--cg-font-display);font-size:18px;font-weight:600;color:var(--cg-text);margin-bottom:6px}
.cg-savebox__lead{font-size:14px;color:var(--cg-text-mute);line-height:1.55;margin-bottom:18px}
.cg-savebox__form{display:flex;flex-direction:column;gap:14px;max-width:360px}
.cg-viewpast{text-align:center;font-size:14px}

/* ==========================================================================
   HISTORY
   ========================================================================== */
.cg-histhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.cg-histhead__title{font-family:var(--cg-font-display);font-size:26px;font-weight:600;color:var(--cg-text);letter-spacing:-.01em}
.cg-histlist{display:flex;flex-direction:column;gap:12px}
.cg-histrow{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--cg-surface);border:1px solid var(--cg-border-2);border-radius:14px;padding:18px 20px;
}
.cg-histrow--best{border-color:color-mix(in srgb,#6366F1 45%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,#6366F1 20%,transparent)}
.cg-histrow__main{flex:1;min-width:0}
.cg-histrow__meta{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.cg-histrow__num{font-family:var(--cg-font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--cg-text-mute)}
.cg-histrow__score{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cg-histrow__score b{font-family:var(--cg-font-display);font-size:24px;font-weight:600;color:var(--cg-text)}
.cg-histrow__score span{font-size:13px;color:var(--cg-text-mute)}
.cg-histrow__units{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:13px;color:var(--cg-text-mute);margin-top:6px}
.cg-histrow__unit b{font-family:var(--cg-font-display);font-weight:600;color:var(--cg-text)}
.cg-histrow__sep{color:var(--cg-text-faint)}
.cg-histrow__date{font-size:12px;color:var(--cg-text-faint);margin-top:5px}
.cg-badge{padding:3px 9px;border-radius:999px;font-family:var(--cg-font-mono);font-size:10px;letter-spacing:.04em;border:1px solid}
.cg-badge--best{background:rgba(224,176,32,.12);color:#e0b020;border-color:rgba(224,176,32,.35)}
.cg-badge--label{background:color-mix(in srgb,#6366F1 14%,transparent);color:#a3a6f0;border-color:color-mix(in srgb,#6366F1 32%,transparent)}
.cg-empty{text-align:center;padding:56px 20px;color:var(--cg-text-mute)}
.cg-empty p{font-size:17px;margin-bottom:18px}

/* ==========================================================================
   SHARE MODAL
   ========================================================================== */
.cg-modal-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);padding:20px}
.cg-modal{width:100%;max-width:520px;max-height:90vh;overflow-y:auto;background:var(--cg-surface);border:1px solid var(--cg-border);border-radius:18px;padding:24px}
.cg-modal__loading{display:flex;align-items:center;justify-content:center;padding:36px 0;color:var(--cg-text-mute);font-size:14px}
.cg-share{display:flex;flex-direction:column;gap:16px}
.cg-share__title{font-family:var(--cg-font-display);font-size:19px;font-weight:600;color:var(--cg-text)}
.cg-share__field{display:flex;flex-direction:column;gap:6px}
.cg-share__inputrow{display:flex;gap:8px}
.cg-input--share{flex:1;border-color:var(--cg-border-2);margin-bottom:0;font-size:14px;padding:11px 13px}
.cg-input--share:focus{border-color:#3a3d46;background:var(--cg-surface-hi)}
.cg-input--mono{font-family:var(--cg-font-mono);font-size:12px}
.cg-copybtn{
  flex:none;padding:11px 16px;border-radius:12px;font-family:var(--cg-font-body);font-size:14px;
  background:#191b22;color:#dfe2e8;border:1px solid #2b2e37;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.cg-copybtn:hover{background:#20222b;border-color:#383b46}
.cg-copybtn.text-green-400{color:var(--cg-correct);border-color:color-mix(in srgb,var(--cg-correct) 40%,transparent)}
.cg-social{display:flex;gap:8px}
.cg-social__btn{
  flex:1;text-align:center;padding:11px 12px;border-radius:12px;font-size:14px;text-decoration:none;
  background:#191b22;color:#dfe2e8;border:1px solid #2b2e37;transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.cg-social__btn:hover{background:#20222b;border-color:#383b46;color:#fff}
.cg-modal__foot{display:flex;justify-content:flex-end;padding-top:4px}
.cg-modal__close{background:none;border:none;cursor:pointer;font-family:inherit;font-size:14px;color:var(--cg-text-mute);padding:8px 4px}
.cg-modal__close:hover{color:var(--cg-text)}

/* ==========================================================================
   Responsive (desktop-first)
   ========================================================================== */
@media (max-width:768px){
  .cg-topbar{height:60px}
  .cg-topbar__inner{padding:0 18px}
  .cg-footer{height:60px}
  .cg-footer__inner{padding:0 18px}
  .cg-wordmark{font-size:23px}
  .cg-bar-title{display:none}
  .cg-topbar__spacer{display:none}
  .cg-center{padding:28px 18px}
  .cg-picker__inner{padding:36px 18px 56px}
  .cg-h1{font-size:30px}
  .cg-picker__lead,.cg-lead{font-size:15px}
  .cg-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .cg-q__text{font-size:19px;margin-bottom:26px}
  .cg-input{font-size:14px;padding:12px 14px}
  .cg-btn{padding:14px 26px;font-size:15.5px}
  .cg-fb{padding:28px 24px 24px}
  .cg-fb__title{font-size:22px}
  .cg-tr__name{font-size:28px}
  .cg-inst__title{font-size:26px}
  .cg-q__text--interaction{font-size:19px;margin-bottom:20px}
  .cg-est__value{font-size:38px}
  .cg-chart__canvas{height:200px}
  .cg-tile{font-size:17px;padding:14px 0}
  .cg-map{height:48vh;min-height:280px}
  .cg-page{padding:32px 18px 56px;gap:36px}
  .cg-auth{padding:36px 18px 56px}
  .cg-rhead__title{font-size:26px}
  .cg-rhead__score b{font-size:44px}
  .cg-histhead__title{font-size:22px}
}
@media (max-width:460px){
  .cg-grid{grid-template-columns:1fr}
  .cg-actions{flex-direction:column;align-items:stretch}
  .cg-actions .cg-btn{width:100%;text-align:center}
}