/* Operator Type | page-local styles, on the shared Bee Current design system
 *
 * The shared /styles.css owns tokens, typography, buttons, cards, steps,
 * forms, and the footer. This file adds ONLY what is unique to this page:
 * the theme toggle, the quiz shell, the result card, and the toast.
 *
 * Every class the quiz script (app.js) reads or writes is preserved:
 *   .sample-card #sample-card, #options-list .option/.option-tag/.option-text
 *   #progress-fill, #case-label, #question-text, .btn-text, .card,
 *   .field-grid/.field-label/.field-value/.field-full, .spec-row/.bar-fill,
 *   .capture, #beehiiv-embed-mount, .capture-note, .toast, .success/.gated
 */

/* --------------------------------------------------------------------------
   Parent strip + nav
   -------------------------------------------------------------------------- */
.parent-strip{
  background:var(--bg2); border-bottom:1px solid var(--line-soft);
  font-size:13.5px; color:var(--text3);
}
.parent-strip .wrap{ display:flex; align-items:center; gap:10px; padding:11px 28px; flex-wrap:wrap; }
.parent-strip b{ color:var(--text2); font-weight:600; }
.parent-strip a{ color:var(--orange); text-decoration:none; }
.parent-strip a:hover{ color:var(--orange-bright); }

nav.site-nav{ position:sticky; top:0; z-index:70; }
nav.site-nav .brand span{ text-transform:none; letter-spacing:-0.01em; }

.theme-toggle{ display:flex; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:3px; }
.theme-toggle button{
  appearance:none; border:0; background:transparent; color:var(--text3);
  font-family:var(--body); font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:999px; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.theme-toggle button:hover{ color:var(--text); }
.theme-toggle button[aria-pressed="true"]{ background:rgba(245,167,58,0.14); color:var(--orange); }

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */
.shell{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
section{ padding:64px 0; }

.hero--quiz{ padding-top:56px; }
.hero--quiz h1{ margin-bottom:20px; }
.hero--quiz .accent{ color:var(--orange); }

.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px; }
.stat{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:18px; }
.stat b{
  display:block; font-family:var(--display); font-size:28px; font-weight:800;
  font-stretch:80%; font-variation-settings:'wdth' 80,'wght' 800;
  color:var(--orange); line-height:1;
}
.stat span{ display:block; font-size:13px; color:var(--text3); margin-top:7px; }

/* --------------------------------------------------------------------------
   Sample card container
   -------------------------------------------------------------------------- */
.sample-wrap{ margin-top:8px; }
.sample-wrap[hidden]{ display:none; }
.sample-label{
  font-size:11.5px; font-weight:700; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--text3); margin-bottom:14px;
}

/* --------------------------------------------------------------------------
   Result card (built by app.js)
   -------------------------------------------------------------------------- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px; position:relative; overflow:hidden;
}
.card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 420px 240px at 88% 0%, rgba(245,167,58,0.10), transparent 62%);
}
.card > *{ position:relative; }
.card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }
.card-title h2{
  font-family:var(--display); text-transform:uppercase; letter-spacing:-0.015em;
  font-size:clamp(24px,3.4vw,34px); line-height:1.04; font-weight:800;
  font-stretch:80%; font-variation-settings:'wdth' 80,'wght' 800; margin:0;
}
.seal{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:52px; height:52px; padding:0 10px; border-radius:50%;
  border:1px solid rgba(245,167,58,0.35); background:rgba(245,167,58,0.10);
  font-family:var(--display); font-size:17px; font-weight:800; font-stretch:82%;
  font-variation-settings:'wdth' 82,'wght' 800; color:var(--orange); flex-shrink:0;
}
.wing-pill{
  display:inline-block; font-family:var(--body); font-size:11px; font-weight:700;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--orange);
  background:rgba(245,167,58,0.1); border:1px solid rgba(245,167,58,0.3);
  padding:6px 11px; border-radius:999px; margin-bottom:14px;
}
.tagline{ font-size:17px; color:var(--text2); line-height:1.55; margin:0 0 22px; }

.field-grid{ display:grid; gap:16px; margin-bottom:20px; }
.field-label{
  font-size:11.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--orange); margin-bottom:7px;
}
.field-value{ font-size:15.5px; color:var(--text2); line-height:1.6; }
.field-value strong{ color:var(--text); }
.field-full{ grid-column:1 / -1; }

/* gated (locked) state */
.card.gated .locked-content{ filter:blur(5px); opacity:0.45; pointer-events:none; user-select:none; }
.gated-preview{
  margin-top:20px; padding:18px; border:1px dashed var(--line);
  border-radius:var(--r-md); font-size:14.5px; color:var(--text3);
}

/* partner box */
.partner-box{
  display:flex; align-items:center; gap:16px; margin-top:20px;
  padding:18px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md);
}
.partner-box .seal{ min-width:44px; height:44px; font-size:15px; }

/* data plate / spec bars */
.dataplate{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft); }
.spec{ margin-bottom:14px; }
.spec-title{
  font-size:11.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text3); margin-bottom:12px;
}
.spec-row{ display:grid; grid-template-columns:110px 1fr 46px; gap:12px; align-items:center; margin-bottom:9px; }
.spec-name{ font-size:13px; color:var(--text2); font-family:var(--mono); }
.spec-row .bar-track{ height:6px; background:rgba(255,255,255,0.07); border-radius:999px; overflow:hidden; }
.spec-row .bar-fill{ height:100%; background:var(--text3); border-radius:999px; transition:width .5s ease; }
.spec-row.primary .bar-fill{ background:var(--orange); }
.spec-row.primary .spec-name{ color:var(--text); font-weight:700; }
.spec-row .spec-score{ font-size:12.5px; color:var(--text3); font-family:var(--mono); text-align:right; }

/* --------------------------------------------------------------------------
   Quiz shell
   -------------------------------------------------------------------------- */
.quiz-shell{ max-width:760px; margin:0 auto; padding:72px 0 88px; }
.progress-track{ height:4px; background:rgba(255,255,255,0.07); border-radius:999px; margin-bottom:36px; }
.progress-fill{ height:100%; width:0; background:var(--orange); border-radius:999px; transition:width .28s ease; }
.case-label{
  font-size:11.5px; font-weight:700; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--orange); margin-bottom:14px;
}
h2.question{
  font-family:var(--display); text-transform:none; letter-spacing:-0.015em;
  font-size:clamp(22px,3.2vw,32px); line-height:1.18; font-weight:800;
  font-stretch:84%; font-variation-settings:'wdth' 84,'wght' 800;
  margin-bottom:30px; color:var(--text);
}
.options{ display:grid; gap:12px; margin-bottom:34px; }
.option{
  display:flex; align-items:flex-start; gap:14px; padding:18px 20px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  cursor:pointer; text-align:left; width:100%; color:var(--text2);
  font-family:var(--body); font-size:16px; line-height:1.5;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.option:hover{ border-color:rgba(245,167,58,0.4); transform:translateY(-1px); }
.option[aria-checked="true"]{ border-color:var(--orange); background:rgba(245,167,58,0.09); color:var(--text); }
.option-tag{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line); color:var(--text3);
  font-size:12px; font-weight:700; flex-shrink:0; margin-top:1px;
}
.option[aria-checked="true"] .option-tag{ border-color:var(--orange); color:var(--orange); background:rgba(245,167,58,0.14); }
.option-text{ flex:1; }

.quiz-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* text buttons */
.btn-text{
  appearance:none; background:transparent; border:0; color:var(--text3);
  font-family:var(--body); font-size:15px; font-weight:600; cursor:pointer;
  padding:8px 4px; text-decoration:underline; text-underline-offset:0.18em;
  transition:color .15s ease;
}
.btn-text:hover{ color:var(--orange); }

/* --------------------------------------------------------------------------
   Result + capture
   -------------------------------------------------------------------------- */
.result-eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--orange); margin-bottom:16px;
}
.capture{
  margin-top:28px; padding:30px; background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r-lg);
}
.capture h3{ font-size:20px; margin-bottom:10px; }
.capture p{ font-size:15.5px; line-height:1.62; }
.capture-note{ font-size:13px; color:var(--text3); margin-top:16px; }
.capture-success{ display:flex; align-items:center; gap:12px; margin-top:16px; color:var(--green); font-weight:600; }
.capture-success .check{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; background:rgba(78,199,143,0.12);
  border:1px solid rgba(78,199,143,0.4); color:var(--green); font-size:13px; flex-shrink:0;
}
#beehiiv-embed-mount{ margin-top:18px; min-height:52px; }
.result-actions{ display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(12px);
  background:var(--text); color:var(--bg); padding:12px 20px; border-radius:var(--r-sm);
  font-size:14.5px; font-weight:600; opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; z-index:200; max-width:90vw;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* --------------------------------------------------------------------------
   Light theme (the page ships a real theme toggle)
   -------------------------------------------------------------------------- */
:root[data-theme="light"]{
  --bg:#f4f4f1; --bg2:#eaeae5; --panel:#ffffff; --panel2:#f7f7f4;
  --line:rgba(0,0,0,0.12); --line-soft:rgba(0,0,0,0.08);
  --text:#15150f; --text2:#4d4d45; --text3:#75756b;
  --orange-ink:#ffffff;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .sample-wrap{ margin-top:0; }
}
@media (max-width:600px){
  .shell{ padding:0 20px; }
  section{ padding:48px 0; }
  .hero--quiz{ padding-top:36px; }
  .card{ padding:22px; }
  .spec-row{ grid-template-columns:88px 1fr 40px; gap:10px; }
  .stat-row{ gap:10px; }
  .stat{ padding:14px; }
  .stat b{ font-size:23px; }
  .quiz-nav{ flex-direction:row; }
}

/* --------------------------------------------------------------------------
   Script-compat aliases
   app.js was written against the old token names and a mono helper class.
   Map them onto the shared design system so the generated markup styles
   correctly without editing the quiz logic.
   -------------------------------------------------------------------------- */
:root{
  --text-dim: var(--text3);
  --bg-raised: var(--panel);
  --bg-sunken: var(--bg2);
  --line-strong: var(--line);
  --font-body: var(--body);
  --font-display: var(--display);
  --font-mono: var(--mono);
}
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* the sample card toggle */
.sample-wrap{ display:none; }
.sample-wrap.open{ display:block; }
#sample-card .card{ margin-top:0; }

/* small note under a field */
.pnote{ font-size:13.5px !important; color:var(--text3) !important; }

/* the gated preview sits inside the card; keep the shared padding sane */
.locked-content{ margin-top:6px; }
.gated-preview .field-label{ margin-bottom:6px; }