/* ============================================================
   GIANT PREP SAT Cheat Code app: v2 skin (2026-11-09).
   Override layer loaded AFTER styles.css and app.css. Brings the app in line with
   the site redesign: Newsreader + Hanken Grotesk, flat gold 6px buttons, sentence-case
   labels, hairline rows instead of glass cards, pink as the pen. The app's behaviour,
   markup and ids are untouched (assets/app.js is owned by the app session).
   The page must also load the Newsreader/Hanken Grotesk Google Fonts link.
   ============================================================ */
:root{
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Hanken Grotesk",Inter,system-ui,sans-serif;
  --line:rgba(255,255,255,.1);--line-gold:rgba(212,175,55,.35);
  --r:6px;
}
body.app{font-weight:400;letter-spacing:0;background:var(--bg)}
body.app::before{display:none}            /* no grain */
.serif,.h1,.h2a,.act b,.dom h4,.scorecard .big,.goal .v,.statgrid .v{font-family:var(--serif);letter-spacing:0;font-optical-sizing:auto}
.h1{font-weight:300}
.ital.gold-grad,.gold-grad{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--gold);-webkit-text-fill-color:currentColor}

/* labels: sentence case, no tracking, no mono */
.mono,.eyebrow,.act .tag,.scorecard .k,.goal .k,.statgrid .k,.sect h3,.legend,.dom h4 small,.tile .lv,.qchip,.tool,.dock .skip,.dock .kbd,.linkbtn,.why summary,.stagelbl .mono,.field label,.pill{
  font-family:var(--sans);letter-spacing:.01em;text-transform:none}
.eyebrow::before{display:none}
.eyebrow,.act .tag,.scorecard .k,.goal .k,.statgrid .k,.field label{font-size:13px;font-weight:500;color:var(--muted)}
.act .tag{color:var(--gold)}
.sect h3{font-size:14px;font-weight:500;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:8px}
.tile .lv{font-size:12px;font-weight:500;letter-spacing:0;border-radius:4px}
.qchip,.tool{font-size:12px;font-weight:500;border-radius:4px}
.dock .skip,.linkbtn{font-size:13px;font-weight:500}

/* top bar */
.abar{background:rgba(6,6,6,.96);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line)}
.abar .brand .word{font-size:22px}
.abar .brand .word em{font-style:normal;color:var(--ink)}
.pill{border-radius:4px;font-size:13px;letter-spacing:0;background:none}
.iconbtn{border-radius:4px}

/* cards become quiet panels */
.card{border:1px solid var(--line);border-radius:4px;background:none;backdrop-filter:none;box-shadow:none}
.card.gold{border-color:var(--line-gold);background:none}
.act{border-radius:4px;background:none;transition:border-color .16s,background .16s}
.act:hover{transform:none;border-color:var(--gold);background:rgba(212,175,55,.05)}
.act.go{background:none;border-color:var(--gold)}
.dom{border-radius:4px;background:none}
.tile{border-radius:4px;background:none}
.tile:hover{transform:none;border-color:var(--gold);background:rgba(212,175,55,.05)}
.stage{border-radius:4px;background:none}
.stage .n{border-radius:4px}
.statgrid>div{border-radius:4px}
.why{border-radius:4px;background:none}
.why .paper{border-radius:4px}
.lock .card{border-radius:4px}
.lock .seal{border-radius:4px}

/* buttons: flat gold, 6px, sentence case, nothing moves */
.btn{border-radius:var(--r);text-transform:none;letter-spacing:0;font-size:15px;font-weight:500;padding:16px 22px;transition:background .16s,border-color .16s,color .16s}
.btn-gold{background:#d4af37;box-shadow:none}
.btn-gold:hover{background:#f3d987;transform:none;box-shadow:none}
.btn-ghost{background:none;border:1px solid rgba(255,255,255,.18)}
.btn-ghost:hover{border-color:var(--gold);background:none}
.btn .arr{transition:transform .35s var(--ease)}
.btn-go,.btn-bad{box-shadow:none;border-radius:var(--r)}
.btn-go:hover,.btn-bad:hover{transform:none}
.field input,.field select{border-radius:var(--r);background:rgba(255,255,255,.03)}
.field input:focus,.field select:focus{border-color:var(--gold);box-shadow:none}
.toast{border-radius:var(--r)}
.bchip{border-radius:4px}

/* play view */
.qprog{height:6px;border-radius:0;background:rgba(255,255,255,.08)}
.qprog i{border-radius:0;background:var(--gold)}
.qprog i::after{display:none}
.qprog.hot i{background:#ff8a3d}
.paper{border-radius:4px;box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.choice{border-radius:4px}
.choice.sel{border-color:#141210;background:#f6f1e7;box-shadow:none}
.choice.sel .L{background:#141210;border-color:#141210;color:#fff}
.spr input{border-radius:4px}
.spr input:focus{border-color:#141210;box-shadow:none}
.dock{background:rgba(6,6,6,.97);backdrop-filter:none;-webkit-backdrop-filter:none}
.dock .fb .ic{border-radius:4px}
.dock .fb .t{font-family:var(--serif);letter-spacing:0}

/* scorecard: plain numerals, the target in pink is the pen */
.scorecard .big{font-weight:300;font-variant-numeric:tabular-nums}
.scorecard .split .v{font-variant-numeric:tabular-nums}
.scorecard .tgt{color:var(--pink);font-family:var(--serif);font-style:italic}

/* motion diet: keep feedback animations, drop ambient ones */
.pill.bump{animation:none}
.floater{font-family:var(--serif)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- views added 2026-11-09 by the app session ---------- */
.qsearch{border-radius:var(--r);background:none}
.bq{border-radius:var(--r);background:rgba(255,255,255,.03)}
.bchip{border-radius:4px;background:none}
.bchip.on{background:var(--gold);color:#0a0800;border-color:var(--gold)}
.brow{border-radius:0}
.bfoot{background:var(--bg)}
.lr{border-radius:4px;background:none}
.lr .e,.lr small{font-family:var(--sans);letter-spacing:0;font-size:12px}
.logd .lin{background:var(--bg-2);border-left:1px solid var(--line-gold)}
.rsheet{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,6,6,.97)}
.rtop{background:rgba(6,6,6,.97)}
.upsell{border-radius:4px;background:none;border:1px solid var(--line-gold)}
.act.locked{border-style:dashed;opacity:.75}
.vidbtn{border-radius:var(--r);background:none;border:1px solid rgba(255,61,143,.45)}
.vidbtn:hover{background:rgba(255,61,143,.06)}
.vidbtn .pl{border-radius:4px}
.vmodal .vframe,.vframe{border-radius:4px}
.velo .big{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--gold);-webkit-text-fill-color:currentColor;letter-spacing:0;font-weight:300}
.vtrack{height:6px;border-radius:0}
.vtrack i{border-radius:0;background:var(--gold)}
.vcard,.flash .ff,.flash .fb2{border-radius:4px}
.vword{letter-spacing:0}
.vdef,.vsent{font-family:var(--sans)}

/* report a question / ask Rick (added by the app session 2026-11-09) */
.qa{border-radius:4px;background:none;font-weight:500}
.qa:hover{border-color:var(--gold);color:var(--ink);background:rgba(212,175,55,.05)}
.qa.help{border-color:var(--gold);color:var(--gold)}
.qchip.rep{color:var(--pink);border-color:rgba(255,61,143,.45)}
.reprow{border-radius:4px}
.reprow:has(input:checked){border-color:var(--pink);background:rgba(255,61,143,.07)}
.reprow input{accent-color:#ff3d8f}
.qmeta button.tool{border-radius:4px}

/* Giant rating + uploaded packs (app session, 2026-11-09 night) */
.ratingrow{border-bottom:1px solid var(--line)}
.big.rt{font-weight:300;color:var(--ink)}
.rsub{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none}
.rspark polyline,.rspark path{stroke:var(--gold)}
.act.pk{border-radius:4px}
.pkgo b{font-family:var(--serif);letter-spacing:0}
.pkdel{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted)}
.pkdel:hover{color:var(--pink)}
.upstate{font-family:var(--sans)}
.upstate .spin{border-radius:50%;border-color:var(--line);border-top-color:var(--gold)}

/* vocab: pronunciation, tiers, new-words drill (app session, 2026-11-14) */
.vpron{font-family:var(--sans);letter-spacing:0;font-size:15px}
.say{border-radius:4px;opacity:.9}
.say:hover{transform:none;opacity:1;border-color:var(--gold);color:var(--gold)}
.qchip.tier{letter-spacing:0;font-weight:500;border-radius:4px}
.t-core{color:var(--ink);border-color:var(--line-2)}
.t-stretch{color:var(--gold);border-color:var(--line-gold)}
.t-rare{color:var(--muted);border-color:var(--line)}
.t-archaic{color:var(--pink);border-color:rgba(255,61,143,.45)}
.vrow{border-radius:4px}
.vrow small{font-family:var(--sans);font-size:12px;letter-spacing:0}
.vmix{font-family:var(--sans);font-size:12px}
.act.vnew{border-radius:4px}
.vsettings .vtog{border-radius:4px}

/* uploaded-test clips and unverified answers (app session, 2026-11-14) */
figure.clip img{border-radius:4px}
.cliphint{font-family:var(--sans);font-size:13px;color:var(--paper-muted)}
.qchip.unv{color:var(--pink);border-color:rgba(255,61,143,.45);border-radius:4px}
.unvnote{font-family:var(--sans);font-size:13px;color:var(--ink-2);border-radius:4px}
.pkkey{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted)}
.dock.ask{background:rgba(6,6,6,.97)}
.dock.ask .btn{border-radius:var(--r)}
#selfNo{background:none;border:1px solid var(--line-2);color:var(--ink)}
#selfNo:hover{border-color:var(--pink)}
