/* Static mockup CSS — served from public/css/. Tailwind directives stripped
   because public/ is served raw (no Vite build). The full Vite-compiled
   version still lives at resources/css/app.css. */

/* =========================================================================
   TANIA design system — ported from
   1_Product_Files/mockups/employee_report_color_schemes.html
   ========================================================================= */

/* ---------- Default tokens (overridden per scheme) ---------- */
:root{
  --bg: #1a1a1a;
  --surface: #222;
  --surface-2: #2a2a2a;
  --border: #333;
  --text: #ececec;
  --text-muted: #a0a0a0;
  --accent: #d97757;
  --accent-text: #ffffff;
  --link: #d97757;
  --success: #2ea043;
  --warning: #d29922;
  --danger:  #e5534b;
  --tania-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --tania-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.15);
}

/* Scheme 1: Claude Noir */
[data-scheme="1"]{
  --bg:#1a1a1a; --surface:#1f1f1ff2; --surface-2:#2a2a2a; --border:#3a3a3a;
  --text:#ececec; --text-muted:#a0a0a0;
  --accent:#d97757; --accent-text:#1a1a1a; --link:#d97757;
  --success:#7ec27a; --warning:#e0b96b; --danger:#e08585;
}
/* Scheme 3: Midnight Terminal */
[data-scheme="3"]{
  --bg:#000000db; --surface:#0a0a0af2; --surface-2:#111111; --border:#1f1f1f;
  --text:#e6ffe6; --text-muted:#7da37d;
  --accent:#00ff9c; --accent-text:#000000; --link:#00ff9c;
  --success:#00ff9c; --warning:#d4ff00; --danger:#ff4d6d;
  --tania-font-sans: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Scheme 5: Deep Space */
[data-scheme="5"]{
  --bg:#0a0e27; --surface:#141a3af2; --surface-2:#1c2348; --border:#2a3160;
  --text:#e8e9f3; --text-muted:#9ba0c4;
  --accent:#8b5cf6; --accent-text:#ffffff; --link:#a78bfa;
  --success:#86efac; --warning:#fcd34d; --danger:#fda4af;
}
/* Scheme 17: GitHub Dark */
[data-scheme="17"]{
  --bg:#0d1117; --surface:#161b22f2; --surface-2:#1c232c; --border:#30363d;
  --text:#e6edf3; --text-muted:#8b949e;
  --accent:#238636; --accent-text:#ffffff; --link:#58a6ff;
  --success:#3fb950; --warning:#d29922; --danger:#f85149;
}

html, body{ margin:0; padding:0; }
body{
  font-family: var(--tania-font-sans);
  font-weight: 300;
  background: var(--bg);
  color: var(--text);
  transition: background .25s, color .25s;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.tania h1, .tania h2, .tania h3, .tania h4, .tania h5, .tania h6,
.tania strong, .tania b{ font-weight: 500; }

/* ---------- TANIA brand bar ---------- */
.tania-bar{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}
.tania-bar .tania-text{
  color: var(--text-muted);
  letter-spacing: .02em;
}
.tania-bar .tania-text .accent-dot{
  color: var(--accent); margin: 0 8px; font-weight: 500;
}
.tania-bar .tania-text .brand-name{
  color: var(--text); font-weight: 500;
}
.scheme-picker{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
.scheme-picker .gear{ width: 14px; height: 14px; color: var(--text-muted); }
.scheme-picker select{
  appearance: none; -webkit-appearance: none;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 28px 5px 10px;
  font: inherit; font-size: 12px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.scheme-picker select:hover{ border-color: var(--accent); }
.scheme-picker select:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Page nav (per-page secondary header) ---------- */
.tania-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  gap: 16px;
}
.brand{ font-weight:500; letter-spacing:-.01em; font-size:18px; }
.brand .sep{ color: var(--text-muted); margin: 0 10px; font-weight:300; }
.brand .sub{ color: var(--text-muted); font-weight:300; font-size:14px; }
.nav-right{
  display:flex; align-items:center; gap:14px;
  color: var(--text-muted); font-size:14px;
}
.nav-right .who{ color: var(--text); font-weight:400; }
.nav-right a{ color: var(--link); text-decoration:none; }
.nav-right a:hover{ text-decoration: underline; }

/* ---------- Page container ---------- */
.tania-container{
  max-width: min(900px, 65vw); margin: 0 auto;
  padding: 28px 24px 64px;
}

/* ---------- Page bar (back/print row) ---------- */
.page-bar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 24px;
}
.back-link{ color: var(--link); text-decoration:none; font-size: 14px; }
.back-link:hover{ text-decoration: underline; }

/* ---------- Section labels ---------- */
.section-head{
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}

/* ---------- Buttons ---------- */
.btn{
  background: var(--accent);
  color: var(--accent-text);
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}
.btn:hover{ filter: brightness(1.08); }
.btn.ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn.ghost:hover{ border-color: var(--accent); color: var(--accent); }

/* ---------- Panels / cards ---------- */
.panel{
  
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  margin-bottom: 28px;
}

/* ---------- Employee summary ---------- */
.summary-grid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 24px;
  align-items: end;
}
.summary-grid .email{ font-size: 18px; font-weight: 500; }
.summary-grid .meta{ color: var(--text-muted); font-size: 13px; margin-top: 6px; }
.summary-grid .overall{ text-align: right; }
.summary-grid .overall .lbl{
  color: var(--text-muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
}
.summary-grid .overall .val{
  font-size: 36px; font-weight: 400; letter-spacing:-.02em; line-height: 1.1;
}
.summary-grid .overall .denom{
  color: var(--text-muted); font-size: 18px; font-weight: 300;
}

/* ---------- Category cards ---------- */
.cats{
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; margin-bottom: 28px;
}
.cat{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  text-align: center;
}
.cat .name{
  color: var(--text-muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 12px; min-height: 30px;
}
.cat .pct{ font-size: 26px; font-weight: 400; letter-spacing:-.01em; }
.cat .pct.weak{ color: var(--danger); }
.cat .pct.mid{ color: var(--warning); }
.cat .pct.strong{ color: var(--success); }
.cat .bar{
  height: 4px; width: 100%;
  background: var(--surface-2);
  border-radius: 999px;
  margin-top: 12px;
  overflow: hidden;
}
.cat .bar > span{ display:block; height:100%; background: var(--accent); }

/* ---------- Plan ---------- */
.plan{
  max-height: 460px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow);
}
.plan h3{ margin: 0 0 12px; font-size: 16px; font-weight: 500; }
.plan h4{ margin: 24px 0 8px; font-size: 14px; font-weight: 500; color: var(--text); }
.plan p{ margin: 0 0 12px; line-height: 1.6; font-size: 15px; color: var(--text); }
.plan ol, .plan ul{ padding-left: 22px; margin: 0 0 12px; }
.plan li{ line-height: 1.6; margin-bottom: 8px; font-size: 15px; }
.plan-note{
  color: var(--text-muted); font-size: 12px;
  margin-top: 10px; text-align: center;
}

/* ---------- Footer ---------- */
.tania-footer{
  border-top: 1px solid var(--border);
  padding: 16px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--text-muted); font-size: 12px;
  background: var(--bg);
  gap: 12px;
}
.tania-footer .left{ justify-self: start; }
.tania-footer .center{ justify-self: center; text-align: center; }
.tania-footer .center a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
}
.tania-footer .center a:hover{ text-decoration: underline; }
.tania-footer .right{ justify-self: end; }
.tania-footer a.policy{ color: var(--text-muted); text-decoration:none; margin-left:16px; }
.tania-footer a.policy:hover{ color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  .cats{ grid-template-columns: repeat(2, 1fr); }
  .summary-grid{ grid-template-columns: 1fr; }
  .summary-grid .overall{ text-align: left; }
  .tania-bar{ flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
  .tania-bar .tania-text{ font-size: 12px; }
}

/* ---------- Print ---------- */
@media print{
  .tania-bar, .page-bar, .tania-footer{ display: none; }
  body{ background: white; color: black; }
  .panel, .cat, .plan{ box-shadow: none; border: 1px solid #ccc; }
  .plan{ max-height: none; overflow: visible; }
}

/* =========================================================================
   Application-wide additions — match the mockup's look on every page.
   Every rule references design tokens so the theme picker keeps working.
   ========================================================================= */

/* ---------- Headings + body baseline ---------- */
.tania-container h1{ font-size: 28px; font-weight: 500; letter-spacing:-.01em; margin: 0 0 14px; color: var(--text); }
.tania-container h2{ font-size: 20px; font-weight: 500; margin: 0 0 12px; color: var(--text); }
.tania-container h3{ font-size: 16px; font-weight: 500; margin: 0 0 10px; color: var(--text); }
.tania-container p { color: var(--text); line-height: 1.55; }
.tania-container a { color: var(--link); }
.tania-container ul, .tania-container ol { color: var(--text); line-height: 1.55; }

/* ---------- Raw form-control baseline (so any <input>/<textarea>/<select>
   in the body inherits the dark theme even without a wrapper class) ---------- */
.tania-container input[type="email"],
.tania-container input[type="text"],
.tania-container input[type="password"],
.tania-container input[type="number"],
.tania-container input[type="search"],
.tania-container input[type="tel"],
.tania-container input[type="url"],
.tania-container textarea,
.tania-container select{
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  min-width: 220px;
  box-sizing: border-box;
}
.tania-container textarea{ width: 100%; min-height: 96px; resize: vertical; }
.tania-container input:focus,
.tania-container textarea:focus,
.tania-container select:focus{
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.tania-container input::placeholder,
.tania-container textarea::placeholder{ color: var(--text-muted); opacity: .8; }

/* All buttons inherit font + cursor (raw <button> looked grey otherwise) */
.tania-container button{ font-family: inherit; cursor: pointer; }

/* ---------- .btn modifiers ---------- */
.btn.primary{ background: var(--accent); color: var(--accent-text); }

/* ---------- Quiz hero (homepage Q1) ---------- */
.hero-panel{
  padding: 36px 32px;
  text-align: center;
}
.hero-title{
  font-size: 32px; font-weight: 500; letter-spacing:-.01em;
  margin: 0 0 10px; color: var(--text);
}
.hero-sub{
  margin: 0; color: var(--text-muted); font-size: 16px;
}

/* ---------- Progress (line above the question card) ---------- */
.progress-line{
  display: flex; align-items: center; gap: 16px;
  color: var(--text-muted); font-size: 13px;
  margin: 0 0 18px;
}
.progress-bar{
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar > span{
  display: block; height: 100%;
  background: var(--accent);
  transition: width .3s ease;
}

/* ---------- Question card ---------- */
.qcard{ /* sits on top of .panel */ padding: 24px 26px; }
.qcard-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.qtitle{ flex: 1; margin: 0; font-size: 18px; font-weight: 500; line-height: 1.45; color: var(--text); }
.qtimer{
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px;
  color: var(--text-muted); font-size: 13px; min-width: 100px;
}
.qtimer-num{ font-size: 20px; font-weight: 500; color: var(--accent); line-height: 1; }
.qtimer-bar{
  display: block; width: 90px; height: 4px;
  background: var(--surface-2); border-radius: 999px; overflow: hidden;
}
.qtimer-bar > i{
  display: block; height: 100%; background: var(--accent);
  transition: width 1s linear;
}

/* ---------- Answer choices ---------- */
.answer-hint{ margin: 0 0 12px; color: var(--text-muted); font-size: 13px; }
.answers{ list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.answers li{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color .15s, background .15s;
}
.answers li:hover{ border-color: var(--accent); }
.answers label{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; cursor: pointer;
  color: var(--text); font-size: 14px; line-height: 1.45;
}
.answers input[type="checkbox"], .answers input[type="radio"]{
  margin-top: 3px; accent-color: var(--accent);
  width: 16px; height: 16px;
}

/* ---------- Quiz form actions ---------- */
.quiz-form{ margin: 0; }
.quiz-actions{ display: flex; justify-content: flex-end; margin: 18px 0 8px; }

/* ---------- Info / "How this works" panel ---------- */
.info-panel{ padding: 18px 22px; }
.info-title{
  margin: 0 0 10px; font-size: 12px; font-weight: 500;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em;
}
.info-list{ margin: 0; padding-left: 20px; color: var(--text); font-size: 14px; line-height: 1.6; }
.info-list li{ margin-bottom: 4px; }

.legal-note{ color: var(--text-muted); font-size: 12px; text-align: center; margin: 18px 0 0; }
.ai-quote{ color: var(--text-muted); font-size: 13px; font-style: italic; text-align: center; margin: 16px 0; }

/* ---------- Email-capture modal (after final submit) ----------
   Markup is <dialog class="email-modal" open>…</dialog>. Native <dialog>
   with the `open` attribute renders inline (no backdrop). We override
   here so it behaves like a proper modal regardless of open mode. */
dialog.email-modal:not([open]){ display: none !important; }
dialog.email-modal[open]{
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(0, 0, 0, .65);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  overflow-y: auto;
}
/* The two forms inside the dialog become the centered card. Only
   the visible form (one without [hidden]) renders as a card. */
.email-modal > form{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  max-width: 460px; width: min(460px, calc(100% - 48px));
  margin: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), var(--shadow);
  display: flex; flex-direction: column; gap: 14px;
}
.email-modal > form[hidden]{ display: none; }
.email-modal h2{
  margin: 0 0 4px;
  font-size: 18px; font-weight: 500; color: var(--text);
  line-height: 1.4;
}
.email-modal label{
  display: flex; flex-direction: column; gap: 6px;
  color: var(--text-muted); font-size: 13px;
}
.email-modal input[type="email"],
.email-modal input[type="text"]{
  width: 100%; min-width: 0;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font: inherit; font-size: 14px;
  box-sizing: border-box;
}
.email-modal input:focus{
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.email-modal .btn{ align-self: flex-start; margin-top: 6px; }
.email-modal .btn.ghost{ margin-left: 8px; }
/* When showModal() is used, native ::backdrop kicks in too — keep it dark */
dialog.email-modal::backdrop{ background: rgba(0, 0, 0, .65); }
.code-input{
  width: 200px;
  letter-spacing: .4em; text-align: center;
  font-size: 22px; padding: 12px; min-width: 0;
  font-family: var(--tania-font-mono);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
}
.modal-error{ color: var(--danger); font-size: 13px; margin-top: 8px; }

/* ---------- Results page ---------- */
.hero-results{ padding: 28px; text-align: center; }
.hero-results .val{
  font-size: 64px; font-weight: 400; letter-spacing:-.02em;
  color: var(--accent); line-height: 1;
}
.hero-results .denom{ color: var(--text-muted); font-size: 22px; font-weight: 300; }
.tier{
  display: inline-block; margin-top: 14px;
  padding: 6px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); font-size: 14px; font-weight: 500;
}
.desc{ color: var(--text-muted); margin-top: 10px; font-size: 14px; }
.radar-panel{ padding: 24px; text-align: center; }
.plan-headline{ margin: 0 0 12px; font-size: 18px; font-weight: 500; color: var(--text); }
.plan-section{ margin-top: 22px; }
.plan-section h4{ margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--accent); }

/* =========================================================================
   .tania-* component aliases used by manager pages (dashboard, signup, etc.)
   Each maps to the mockup's visual language using the same tokens.
   ========================================================================= */

/* Panels & cards */
.tania-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.tania-panel > h2:first-child{ margin-top: 0; }
.tania-panel > summary{
  cursor: pointer; font-size: 14px; color: var(--text); padding: 4px 0;
}
.tania-panel[open] > summary{ margin-bottom: 14px; }

.tania-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.tania-card .tania-muted{
  display: block; font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 6px;
}
.tania-card strong{ color: var(--text); font-weight: 500; }

.tania-counters{ /* layout via inline grid in markup; cards already styled */ }

/* Status / inline messages */
.tania-muted{ color: var(--text-muted); }
.tania-status{ color: var(--success); font-size: 14px; }
.tania-error{ color: var(--danger); font-size: 14px; }

/* Buttons (mapped) */
.tania-btn{
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.tania-btn:hover{ border-color: var(--accent); color: var(--accent); }
.tania-btn-primary{
  background: var(--accent); color: var(--accent-text);
  border: 0; border-radius: 8px;
  padding: 10px 18px; font: inherit; font-weight: 500; font-size: 14px;
  cursor: pointer; display: inline-block;
}
.tania-btn-primary:hover{ filter: brightness(1.08); }
.tania-btn-link{
  background: transparent; border: 0; padding: 0;
  color: var(--link); font: inherit; cursor: pointer;
  text-decoration: underline;
}

/* Form fields wrapper */
.tania-field{
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
}
.tania-field label{ color: var(--text-muted); font-size: 13px; }
.tania-field input,
.tania-field textarea,
.tania-field select{ width: 100%; min-width: 0; }

/* Tables */
.tania-table{ width: 100%; border-collapse: collapse; }
.tania-table th, .tania-table td{
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text);
}
.tania-table th{
  color: var(--text-muted);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
}
.tania-table tr:last-child td{ border-bottom: 0; }
.tania-table a{ color: var(--link); text-decoration: none; }
.tania-table a:hover{ text-decoration: underline; }

/* Modal frame (re-used outside email modal) */
.tania-modal{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px; box-shadow: var(--shadow);
  margin: 16px 0;
}

/* "What is assessed" horizontal scroller (manager signup) */
.tania-scroller{
  display: grid; grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 12px; overflow-x: auto; padding: 4px 0 12px;
  scroll-snap-type: x mandatory;
}
.tania-scroller > .tania-card{
  scroll-snap-align: start;
}

/* "How it works" 4-step strip */
.tania-howit{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin: 18px 0 26px;
}
.tania-howit > div, .tania-howit > .tania-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text);
}

/* ---------- Responsive (additions) ---------- */
@media (max-width: 880px){
  .tania-howit{ grid-template-columns: repeat(2, 1fr); }
  .tania-scroller{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .hero-title{ font-size: 24px; }
  .hero-results .val{ font-size: 48px; }
  .qcard-head{ flex-direction: column; align-items: stretch; }
  .qtimer{ align-items: flex-start; }
}

/* =========================================================================
   Animated grid background (sitewide). Theme-aware via --grid-line which
   each scheme overrides per its accent hue. JS in public/js/background-
   animator.js drifts the whole layer at 2–6 px/sec via --grid-x / --grid-y
   (set on body). Alphas tuned so the slow drift is *visible* at a glance
   without overpowering content sitting on top — minor lines stay subtle,
   major (every 240px) carry the motion cue.
   ========================================================================= */
:root{          --grid-line: rgba(255,255,255,.35); --grid-line-strong: rgba(255,255,255,.70); }
[data-scheme="1"]{  --grid-line: rgba(255,100,0,.55);   --grid-line-strong: rgba(255,100,0,.95);  }
[data-scheme="3"]{  --grid-line: rgba(0,255,156,.50);   --grid-line-strong: rgba(0,255,156,.90);  }
[data-scheme="5"]{  --grid-line: rgba(139,92,246,.55);  --grid-line-strong: rgba(139,92,246,.92); }
[data-scheme="17"]{ --grid-line: rgba(88,166,255,.50);  --grid-line-strong: rgba(88,166,255,.90); }

body{ position: relative; isolation: isolate; }

/* Grid offset vars driven by background-animator.js. Defaults are 0 so the
   first paint before JS runs looks identical to a static grid. */
body{ --grid-x: 0px; --grid-y: 0px; }

body::before{
  content: "";
  position: fixed;
  top: -50%; left: -50%;
  width: 200vw; height: 200vh;
  background-image:
    /* Major grid lines (every 240px) */
    linear-gradient(to right,  var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-strong) 1px, transparent 1px),
    /* Minor grid lines (every 60px) */
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px, 60px 60px, 60px 60px;
  /* All four layers drift together — JS sets one offset, all four shift in
     unison so the major + minor grid stays aligned. */
  background-position:
    var(--grid-x) var(--grid-y),
    var(--grid-x) var(--grid-y),
    var(--grid-x) var(--grid-y),
    var(--grid-x) var(--grid-y);
  transform: rotate(-8deg) skewY(-2deg);
  transform-origin: center center;
  pointer-events: none;
  z-index: -1;
  will-change: background-position;
}

/* ADDED 2026-04-30: full-viewport overlay that sits ABOVE the rotated orange
   grid (body::before, z-index:-1) but BELOW all UI panels. Driven by the real
   <div id="bg-overlay"> in layouts/app.blade.php — pseudo-element approach
   was unreliable with backdrop-filter, so we use a real DOM node. Tweak the
   two CSS vars below to dial the look. */
:root{
  --bg-overlay-tint: rgba(0, 0, 0, 0.727); /* color + opacity of the wash */
  --bg-overlay-blur: 0px;                 /* set >0 to blur the grid behind */
}
#bg-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--bg-overlay-tint);
  backdrop-filter: blur(var(--bg-overlay-blur));
  -webkit-backdrop-filter: blur(var(--bg-overlay-blur));
  z-index: -1; /* same level as grid; paints on top because it's later in DOM */
}

/* DISABLED 2026-04-30: this top-layer overlay was rendering as white straight
   horizontal/vertical lines over the rotated orange grid. Commented (not
   deleted) so we can restore it quickly if removal turns out to be wrong. */
/*
html::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-strong) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px;
  background-position:
    var(--grid-x) var(--grid-y),
    var(--grid-x) var(--grid-y);
  opacity: .35;
  mix-blend-mode: screen;
  z-index: 9999;
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce){
  html::after{ display: none; }
}
*/

/* Aurora blur layer — two large theme-tinted blobs drifting slowly above the
   grid but behind content. mix-blend-mode lets them tint the grid below
   instead of just sitting on top, so the whole backdrop breathes a bit. */
:root{
  --aurora-1: rgba(255,255,255,.14);
  --aurora-2: rgba(255,255,255,.10);
}
[data-scheme="1"]{  --aurora-1: rgba(255,140,90,.55);  --aurora-2: rgba(180,80,180,.40); }
[data-scheme="3"]{  --aurora-1: rgba(0,255,156,.40);   --aurora-2: rgba(0,180,255,.32); }
[data-scheme="5"]{  --aurora-1: rgba(139,92,246,.55);  --aurora-2: rgba(255,80,200,.40); }
[data-scheme="17"]{ --aurora-1: rgba(88,166,255,.50);  --aurora-2: rgba(63,185,80,.38); }

/* Position vars driven by background-animator.js via rAF; the defaults here
   are what shows if the JS hasn't run yet (no flash-of-unstyled). */
body{
  --aurora-x1: 28%;
  --aurora-y1: 38%;
  --aurora-x2: 72%;
  --aurora-y2: 62%;
  --aurora-rot: 0deg;
}
body::after{
  content: "";
  position: fixed;
  inset: 0;                          /* exactly the viewport */
  background:
    /* Fixed-radius circles so size stays consistent as the centers move */
    radial-gradient(circle 48vmax at var(--aurora-x1) var(--aurora-y1), var(--aurora-1) 0%, transparent 65%),
    radial-gradient(circle 52vmax at var(--aurora-x2) var(--aurora-y2), var(--aurora-2) 0%, transparent 65%);
  background-repeat: no-repeat;
  filter: blur(70px) saturate(1.25);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
  transform: rotate(var(--aurora-rot));
  transform-origin: center center;
  /* No CSS animation — JS rAF mutates the vars and the browser interpolates
     the radial-gradient positions on every paint. */
  will-change: transform;
}
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}

/* =========================================================================
   Results page v2 — overhauled layout. Removes the radar panel; replaces
   it with five per-category instruction panels in a clean responsive grid.
   ========================================================================= */

/* Page-top action bar (Print + meta) */
.results-actions{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 4px 0 14px;
}
.results-actions .meta{
  color: var(--text-muted); font-size: 13px;
}
.results-actions .meta strong{ color: var(--text); font-weight: 500; }
.btn-print{
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--accent-text);
  border: 0; border-radius: 10px;
  padding: 12px 20px; font: inherit; font-size: 15px; font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25), var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-print:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.btn-print svg{ width: 16px; height: 16px; }

/* Identity strip — name / company / date / time */
.results-identity{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.results-identity .field{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.results-identity .lbl{
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); font-weight: 500;
}
.results-identity .val{
  font-size: 15px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Hero — overall score + tier */
.hero-results{
  display: grid; grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 28px; align-items: center;
  padding: 28px 32px;
}
.hero-results .overall{
  text-align: center;
  border-right: 1px solid var(--border);
  padding-right: 28px;
}
.hero-results .overall .lbl,
.hero-results .tier .lbl{
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); font-weight: 500; margin-bottom: 6px;
}
.hero-results .overall .val{
  font-size: 96px; font-weight: 600; color: var(--accent);
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.hero-results .overall .denom{
  font-size: 24px; color: var(--text-muted); font-weight: 400; margin-left: 6px;
}
.hero-results .tier .val{
  font-size: 32px; font-weight: 600; color: var(--text); margin-bottom: 8px;
  letter-spacing: -.01em;
}
.hero-results .tier .desc{
  font-size: 15px; color: var(--text-muted); line-height: 1.55; max-width: 52ch;
}
.hero-results .tier .chip{
  display: inline-block; margin-top: 14px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 500;
}
.hero-results .tier .chip strong{ color: var(--accent); font-weight: 600; }

/* Per-category score strip (compact) */
.cats{
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 10px; margin: 0 0 22px;
}
.cats .cat{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.cats .cat .name{ font-size: 12px; color: var(--text-muted); font-weight: 500; letter-spacing: .02em; }
.cats .cat .pct{ font-size: 22px; font-weight: 600; line-height: 1; }
.cats .cat .pct.weak{   color: var(--danger); }
.cats .cat .pct.mid{    color: var(--warning); }
.cats .cat .pct.strong{ color: var(--success); }
.cats .cat .bar{
  height: 4px; background: var(--surface-2); border-radius: 4px; overflow: hidden;
}
.cats .cat .bar > span{
  display: block; height: 100%; background: var(--accent); border-radius: 4px;
}

/* Per-category instruction panels — the new heart of the page */
.section-head{
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-muted); font-weight: 500;
  margin: 26px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cat-panels{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.cat-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  overflow: hidden;
}
/* Color band on the left edge — score-band scannability */
.cat-panel::before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--cat-band, var(--accent));
}
.cat-panel.weak{   --cat-band: var(--danger); }
.cat-panel.mid{    --cat-band: var(--warning); }
.cat-panel.strong{ --cat-band: var(--success); }
.cat-panel.span-2{ grid-column: 1 / -1; }   /* 5th panel spans both columns */
.cat-panel-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.cat-panel-head .name{
  font-size: 17px; font-weight: 500; color: var(--text); margin: 0;
}
.cat-panel-head .score{
  font-size: 18px; font-weight: 600;
}
.cat-panel-head .score.weak{   color: var(--danger); }
.cat-panel-head .score.mid{    color: var(--warning); }
.cat-panel-head .score.strong{ color: var(--success); }
.cat-panel p{
  font-size: 14px; line-height: 1.6; color: var(--text);
  margin: 0;
}
.cat-panel .summary{ color: var(--text-muted); }
.cat-panel ul{
  margin: 4px 0 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.cat-panel ul li{
  font-size: 14px; line-height: 1.5; color: var(--text);
}
.cat-panel ul li::marker{ color: var(--accent); }

@media (max-width: 880px){
  .results-identity{ grid-template-columns: repeat(2, 1fr); }
  .cats{ grid-template-columns: repeat(2, 1fr); }
  .cat-panels{ grid-template-columns: 1fr; }
  .cat-panel.span-2{ grid-column: auto; }
  .hero-results{ grid-template-columns: 1fr; }
  .hero-results .overall{ border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 18px; }
}

/* =========================================================================
   Header bar-nav (Home / About) — sits inside .tania-bar on the left.
   Distinct from the per-page .tania-nav (which is a secondary header row).
   ========================================================================= */
.tania-bar-nav{
  display: inline-flex; align-items: center; gap: 4px;
}
.tania-navlink{
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.tania-navlink:hover{
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}
.tania-navlink:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* =========================================================================
   Homepage / quiz visual lift — bring the quality up to the results page.
   Three moves ported from the results-page treatment:
     1. Left accent band on the "main act" panels (mirrors .cat-panel::before)
     2. Section-head pattern reused for the homepage
     3. Bigger, tighter type for the hero with a subtle gradient frame
   ========================================================================= */

/* Hero panel — the "Are you AI-NATIVE?" header on the homepage */
.hero-panel{
  position: relative;
  overflow: hidden;
  padding: 44px 36px 40px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-panel::before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent);
}
.hero-title{
  font-size: 38px; font-weight: 600;
  letter-spacing: -.015em; line-height: 1.1;
  margin: 0 0 12px;
}
.hero-sub{
  font-size: 17px; line-height: 1.5;
  color: var(--text-muted);
  max-width: 60ch; margin: 0 auto;
}

/* The "How this works" info panel — turn it into a structured callout
   matching the section-head + cat-panel rhythm of the results page. */
.info-panel{
  position: relative;
  padding: 18px 22px 18px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.info-panel::before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: .55;
}
.info-title{
  margin: 0 0 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-muted); font-weight: 500;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.info-list{
  margin: 0; padding-left: 20px;
  color: var(--text); font-size: 14px; line-height: 1.65;
}
.info-list li{ margin-bottom: 4px; }
.info-list li::marker{ color: var(--accent); }

/* Question card — make it the main act, with the same left-band signature
   as the result-page cat-panels. */
.qcard{
  position: relative;
  overflow: hidden;
  padding: 28px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.qcard::before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent);
}
.qcard + .qcard{ margin-top: 16px; }
.qcard-head{
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.qtitle{
  font-size: 20px; font-weight: 600; line-height: 1.4;
  letter-spacing: -.005em;
}
/* Stronger, more "designed" answer rows — match the rhythm of the
   results-page cat-panel list items. */
.answers li{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.answers li:hover{
  border-color: var(--accent);
  background: var(--surface);
}
.answers label{
  padding: 14px 16px;
  font-size: 14.5px; line-height: 1.5;
}

/* Page-bar polish to match the results page */
.page-bar{
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.page-bar .brand{ font-size: 16px; }

/* =========================================================================
   About page — small additions on top of the shared .panel/.cat-panel rhythm
   ========================================================================= */
.about-hero{ padding: 48px 40px; text-align: left; }
.about-hero .hero-title{ font-size: 34px; max-width: 22ch; }
.about-lede{
  margin-top: 14px; max-width: 70ch;
  font-size: 17px; line-height: 1.65;
  color: var(--text);
}
.about-grid .cat-panel{ gap: 8px; }
.about-grid .cat-panel-head{ border-bottom: 0; padding-bottom: 0; }
.about-goals{ padding: 24px 28px; }
.about-goal-list{
  list-style: none;
  padding-left: 0;
  display: flex; flex-direction: column; gap: 14px;
  font-size: 15px; line-height: 1.6;
}
.about-goal-list li{
  position: relative;
  padding-left: 22px;
  color: var(--text);
}
.about-goal-list li::before{
  content: "›";
  position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 600;
}
.about-goal-list strong{ color: var(--text); font-weight: 600; }
.about-goal-list a{ color: var(--link); }

@media (max-width: 880px){
  .tania-bar-nav{ order: 1; width: 100%; justify-content: flex-start; }
  .hero-panel{ padding: 32px 22px; }
  .hero-title{ font-size: 28px; }
  .qcard{ padding: 22px 20px; }
  .about-hero{ padding: 32px 22px; }
}

/* =========================================================================
   Pass 2 — focal "moment" elements (kicker, labeled progress, timer chip)
   ========================================================================= */

/* Hero kicker — small uppercase label that anchors the hero typographically.
   Mirrors the .tier .chip pattern from the results page: uppercase + tracking
   + accent color, but laid above the title rather than below it. */
.hero-kicker{
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 12px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.about-hero .hero-kicker{ margin-bottom: 18px; }

/* Labeled progress — adds an uppercase "Progress" eyebrow + a count chip to
   the right of the bar, matching the results-page identity-strip rhythm. */
.progress-line.labeled{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0 0 18px;
}
.progress-line.labeled .progress-lbl{
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted); font-weight: 500;
}
.progress-line.labeled .progress-count{
  order: 3;
  font-size: 12px; font-weight: 500;
  color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.progress-line.labeled .progress-bar{
  order: 2;
  height: 6px;
}

/* Timer chip — promote the per-question timer from a plain numeral to a
   proper countdown chip. Picks up the same accent-on-surface look as the
   tier chip. */
.qtimer{
  display: inline-flex; flex-direction: row; align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  min-width: 0;
}
.qtimer-num{
  font-size: 22px; font-weight: 700;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.qtimer-bar{
  display: block; width: 64px; height: 4px;
  background: var(--surface); border-radius: 999px; overflow: hidden;
}