/* ============================================================
   MEDQUEST ZERO — NEO-BRUTALIST theme (layer)
   Loaded AFTER medquest.css + styles.css; overrides via tokens
   + component shape (sharp corners, thick borders, hard offset
   shadows, heavy type, flat bold color). Light + dark.
   Structure/classes untouched (tests stay green).
   ============================================================ */

/* ---- Tokens: LIGHT brutalist ---- */
:root {
  --ink: #14110F;

  --c-bg:       #FBF6E9;   /* warm paper */
  --c-card:     #FFFFFF;
  --c-alt:      #F4ECD8;
  --c-border:   #14110F;   /* ink — borders + hard shadow */
  --c-border-l: #E4DAC2;   /* subtle dividers */

  --c-text:     #14110F;
  --c-muted:    #5B5347;
  --c-light:    #8A8071;

  --c-accent:   #2B34FF;   /* electric blue (primary, white text) */
  --c-accent-l: #DCDFFF;
  --c-accent-m: #4F57FF;
  --c-accent-d: #1E25CC;

  --c-green:    #018A5A;  --c-green-bg: #BFF0D6;
  --c-red:      #E5241B;  --c-red-bg:   #FFD3CF;
  --c-amber:    #E07A00;  --c-amber-bg: #FFE2B0;
  --c-violet:   #6A3DF0;  --c-violet-bg:#E4DAFF;
  --c-slate-bg: #EDE4CF;
  --c-gold:     #FFC400;

  /* Sidebar = bold yellow block */
  --c-sb:       #FFD23F;
  --c-sb-2:     #FFC400;
  --c-sb-text:  #14110F;
  --c-sb-mute:  #6B5E2E;

  /* Type — geometric + mono (loaded via index.html) */
  --f-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --f-body:    "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --f-logo:    "Space Grotesk", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Shape — brutalist */
  --card-bg: var(--c-card);
  --card-border: 3px solid var(--c-border);
  --card-shadow: 6px 6px 0 var(--c-border);
  --card-radius: 0px;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px;
  --radius-card-sm: 0px;

  --brut-sh: 6px 6px 0 var(--c-border);
  --brut-sh-sm: 3px 3px 0 var(--c-border);
}

/* ---- Tokens: DARK brutalist ---- */
[data-theme="dark"] {
  --ink: #F4ECD8;

  --c-bg:       #0E0E13;
  --c-card:     #1A1A22;
  --c-alt:      #23232E;
  --c-border:   #F4ECD8;   /* off-white borders + shadow */
  --c-border-l: #2C2C38;

  --c-text:     #F4ECD8;
  --c-muted:    #A8A294;
  --c-light:    #746E60;

  --c-accent:   #6E7BFF;
  --c-accent-l: rgba(110,123,255,.20);
  --c-accent-m: #8A94FF;
  --c-accent-d: #5560E6;

  --c-green:    #2BD48A;  --c-green-bg: rgba(43,212,138,.16);
  --c-red:      #FF5A4E;  --c-red-bg:   rgba(255,90,78,.16);
  --c-amber:    #FFB23E;  --c-amber-bg: rgba(255,178,62,.16);
  --c-violet:   #A98BFF;  --c-violet-bg:rgba(169,139,255,.18);
  --c-slate-bg: rgba(244,236,216,.07);

  /* keep the yellow sidebar in dark mode (brand pop) */
  --c-sb:       #FFD23F;
  --c-sb-2:     #FFC400;
  --c-sb-text:  #14110F;
  --c-sb-mute:  #6B5E2E;
}

[data-theme="dark"] { color-scheme: dark; }

/* ---- Global type weight ---- */
.mq-app h1, .mq-app h2, .mq-app h3, .mq-app h4,
.mq-app .mq-num, .mq-app .mq-stat-value, .mq-app .mq-mode-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mq-eyebrow { font-weight: 800; letter-spacing: 0.16em; }
.app-shell, .mq-app { background: var(--c-bg); }

/* ---- Cards / panels / surfaces ---- */
.mq-card, .mq-mode, .mq-stat,
.hero-card, .panel, .question-panel, .question-aside .aside-card, .aside-card {
  border-radius: 0 !important;
  border: 3px solid var(--c-border) !important;
  box-shadow: var(--brut-sh) !important;
  background: var(--c-card);
}
.aside-card { box-shadow: var(--brut-sh-sm) !important; }

/* mode cards — lift on hover, press feel */
.mq-mode { transition: transform .1s ease, box-shadow .1s ease; }
.mq-mode:hover { transform: translate(-2px,-2px); box-shadow: 9px 9px 0 var(--c-border) !important; border-color: var(--c-border) !important; }
.mq-mode--featured { background: var(--c-accent) !important; color: #fff; }
.mq-mode--featured .mq-mode-title, .mq-mode--featured .mq-mode-desc, .mq-mode--featured .mq-mode-count { color: #fff !important; }
.mq-mode--featured .mq-mode-icon-wrap { background: #fff !important; color: var(--c-accent) !important; border: 2px solid #14110F; }
.mq-mode--audit { background: var(--c-gold) !important; border-style: solid !important; color: #14110F; }
.mq-mode--audit .mq-mode-title, .mq-mode--audit .mq-mode-desc, .mq-mode--audit .mq-mode-count { color: #14110F !important; }
.mq-mode-icon-wrap { border-radius: 0 !important; border: 2px solid var(--c-border); background: var(--c-gold); color: #14110F; }

/* stat value pop */
.mq-stat-value { color: var(--c-text); }

/* ---- Buttons: hard shadow + press ---- */
.mq-btn, .hero-actions button, .question-actions button {
  border-radius: 0 !important;
  border: 2.5px solid var(--c-border) !important;
  box-shadow: var(--brut-sh-sm) !important;
  font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.03em;
  transition: transform .08s ease, box-shadow .08s ease, background .12s;
}
.mq-btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--c-border) !important; }
.mq-btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--c-border) !important; }
.mq-btn--primary { background: var(--c-accent) !important; color: #fff !important; }
.mq-btn--primary[disabled] { background: var(--c-alt) !important; color: var(--c-light) !important; box-shadow: none !important; transform: none; }
.mq-btn--secondary { background: var(--c-card) !important; color: var(--c-text) !important; }
.mq-btn--ghost {
  border-color: transparent !important; box-shadow: none !important;
  text-transform: none; font-weight: 600 !important;
}
.mq-btn--ghost:hover { background: var(--c-alt) !important; transform: none; box-shadow: none !important; }

/* ---- Badges / chips ---- */
.mq-badge, .chip, .count-pill {
  border-radius: 0 !important;
  border: 2px solid var(--c-border) !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
.chip.specialty, .chip.active { background: var(--c-gold); color: #14110F; }
.chip.neutral { background: var(--c-card); }
.mq-badge--pill { border-radius: 999px !important; }

/* ---- Progress ---- */
.mq-progress, .progress-track {
  border-radius: 0 !important;
  border: 2px solid var(--c-border);
  background: var(--c-card);
  height: 12px;
  overflow: hidden;
}
.mq-progress > span, .progress-track > span { border-radius: 0 !important; background: var(--c-accent); }

/* ---- Alternatives ---- */
.mq-opt {
  border-radius: 0 !important;
  border: 2.5px solid var(--c-border) !important;
  background: var(--c-card);
  box-shadow: var(--brut-sh-sm);
  transition: transform .08s ease, box-shadow .08s ease, background .12s;
}
.mq-opt:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--c-border); background: var(--c-alt); }
.mq-opt[data-state="selected"] { background: var(--c-accent-l); box-shadow: 5px 5px 0 var(--c-accent); }
.mq-opt[data-state="correct"]  { background: var(--c-green-bg); box-shadow: 5px 5px 0 var(--c-green); }
.mq-opt[data-state="wrong"]    { background: var(--c-red-bg);   box-shadow: 5px 5px 0 var(--c-red); }
.mq-opt-letter {
  border-radius: 0 !important;
  border: 2.5px solid var(--c-border) !important;
  background: var(--c-card); color: var(--c-text);
  font-weight: 800;
}
.mq-opt[data-state="selected"] .mq-opt-letter { background: var(--c-accent); color: #fff; }
.mq-opt[data-state="correct"]  .mq-opt-letter { background: var(--c-green); color: #fff; }
.mq-opt[data-state="wrong"]    .mq-opt-letter { background: var(--c-red); color: #fff; }
.mq-opt-discard { border-radius: 0 !important; }

/* ---- Callout / comment blocks ---- */
.mq-callout {
  border-radius: 0 !important;
  border: 3px solid var(--c-border);
  border-left: 8px solid var(--c-accent);
  box-shadow: var(--brut-sh-sm);
  background: var(--c-accent-l);
}
.mq-callout--neutral { background: var(--c-alt); border-left-color: var(--c-border); }
.mq-callout--amber   { background: var(--c-amber-bg); border-left-color: var(--c-amber); }
.mq-callout--green   { background: var(--c-green-bg); border-left-color: var(--c-green); }
.mq-callout--red     { background: var(--c-red-bg);   border-left-color: var(--c-red); }

/* ---- Sidebar (yellow block) ---- */
.sidebar {
  background: var(--c-sb) !important;
  border-right: 3px solid var(--c-border) !important;
  color: #14110F;
}
.sidebar-logo, .sidebar-logo small, .sidebar-footer, .sidebar-footer strong, .sidebar-footer small { color: #14110F !important; }
.sidebar-nav-item, .mq-nav-item {
  border-radius: 0 !important;
  border: 2px solid transparent !important;
  color: #14110F !important;
  font-weight: 600;
  margin: 0 10px;
}
.sidebar-nav-item:hover, .mq-nav-item:hover {
  background: var(--c-card) !important;
  border-color: #14110F !important;
  color: #14110F !important;
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 #14110F;
}
.sidebar-nav-item.active, .mq-nav-item[data-active="true"] {
  background: #14110F !important;
  color: var(--c-sb) !important;
  border-color: #14110F !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,.25);
}
.sidebar-nav-item.active .mq-nav-icon, .mq-nav-item[data-active="true"] .mq-nav-icon { color: var(--c-sb) !important; }
.mq-nav-item[data-active="true"]::before { display: none; }
.mq-nav-count, .sidebar-nav-item .mq-nav-count {
  border-radius: 0 !important;
  border: 1.5px solid currentColor;
  background: transparent !important;
  color: #14110F !important; font-weight: 700;
}
.sidebar-nav-item.active .mq-nav-count, .mq-nav-item[data-active="true"] .mq-nav-count { color: var(--c-sb) !important; }
.sidebar-footer { border-top: 3px solid #14110F; }

/* ---- Inputs / selects / segmented / tabs ---- */
.mq-input, input[type="text"], input[type="search"], input[type="number"], select, textarea {
  border-radius: 0 !important;
  border: 2.5px solid var(--c-border) !important;
  background: var(--c-card) !important;
  color: var(--c-text) !important;
  box-shadow: var(--brut-sh-sm);
}
.mq-input:focus, input:focus, select:focus, textarea:focus { box-shadow: var(--brut-sh-sm); border-color: var(--c-accent) !important; outline: none; }
.mq-seg { border-radius: 0 !important; border: 2.5px solid var(--c-border); }
.mq-seg button { border-radius: 0 !important; }
.mq-seg button[aria-pressed="true"] { background: var(--c-accent) !important; color: #fff !important; box-shadow: none; }
.mq-tab[aria-selected="true"] { border-bottom-width: 3px; }

/* ---- Statement / images ---- */
.statement { font-size: 17px; }
.question-image img, .question-image__fallback {
  border-radius: 0 !important;
  border: 3px solid var(--c-border) !important;
  box-shadow: var(--brut-sh-sm);
}

/* focus ring */
.mq-app :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 0; }

/* ---- Theme toggle (floating) ---- */
.theme-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-gold); color: #14110F;
  border: 3px solid var(--c-border);
  box-shadow: 5px 5px 0 var(--c-border);
  cursor: pointer; font-size: 22px; line-height: 1;
  transition: transform .08s ease, box-shadow .08s ease;
}
.theme-toggle:hover { transform: translate(-1px,-1px); box-shadow: 7px 7px 0 var(--c-border); }
.theme-toggle:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--c-border); }

@media (max-width: 720px) {
  .mq-card, .mq-mode, .mq-stat, .panel, .question-panel { box-shadow: 4px 4px 0 var(--c-border) !important; }
  .theme-toggle { width: 46px; height: 46px; right: 12px; bottom: 12px; }
}