/* Shyn test pages: navy + gold theme. Loaded last in <head>, overrides the old space theme.
   "html body" prefixes give these rules priority over the inline <style> blocks further down the page. */
:root{
  --bg:#15181D; --card:#1D2127; --text:#D2D6DC; --text-bright:#DADDE2;
  --blue:#8EADD2; --violet:#8EADD2; --pink:#9DB8DC; --gold:#9DB8DC; --gold-2:#B7CBE6;
  --grad:linear-gradient(90deg,#9DB8DC,#9DB8DC);
  --glass-line:rgba(255,255,255,.12);
  --ok:#7DC3A0; --ok-bg:rgba(125,195,160,.12); --danger:#DE8B8B; --danger-bg:rgba(222,139,139,.12);
}
html body{background:#15181D;color:var(--text);
  background-image:radial-gradient(900px 360px at 50% -140px,rgba(40,48,60,.5),transparent 70%);background-attachment:fixed}
html body .page-photo{display:none}
html body .wrap{max-width:720px}

/* top area */
html body a.back{opacity:1;color:#858C97;font-size:13.5px}
html body a.back:hover{color:var(--gold)}
html body h2{font-size:21px;line-height:1.3}
html body .topbar{opacity:1;color:#858C97}
html body .timer{background:#1D2127;border-color:rgba(255,255,255,.14);border-radius:6px;color:var(--gold);font-weight:600}
html body .timer.low{color:#E3A1A1;border-color:rgba(222,139,139,.6)}
html body .progress{height:4px;border-radius:99px}
html body .progress-fill{background:var(--gold);border-radius:99px}

/* question */
html body .question{color:var(--text-bright);font-weight:400;font-size:16.5px;line-height:1.7}
html body .question b,html body .question strong{font-weight:650}
@media (max-width:480px){html body .question{font-size:16px;line-height:1.65}}
html body .question-img,html body .pl-scroll .pl-img{border-radius:6px;border:1px solid rgba(255,255,255,.14)}
html body .opt,html body .pl-scroll .pl-opt{background:#1D2127;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,.12);border-radius:6px;color:var(--text);transform:none}
html body .opt:hover,html body .pl-scroll .pl-opt:hover{border-color:#8EADD2;background:#252A31;transform:none}
html body .opt.selected,html body .pl-scroll .pl-opt.sel{border:1px solid var(--gold);box-shadow:inset 3px 0 0 var(--gold);
  background:#282E37;color:var(--text-bright)}

/* buttons */
html body button.nav-btn{background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:6px;
  backdrop-filter:none;-webkit-backdrop-filter:none}
html body button.nav-btn:hover:not(:disabled){border-color:#8EADD2;color:#8EADD2}
html body button.submit-btn,html body .restart-btn,html body .pl-bar .pl-submit{background:var(--gold);color:#1A1D21;
  border-radius:6px;box-shadow:none;font-weight:700}
html body button.submit-btn:hover,html body .restart-btn:hover,html body .pl-bar .pl-submit:hover{background:var(--gold-2);box-shadow:none}

/* one-at-a-time / scroll switch */
html body .pl-mode{border-radius:7px;background:#1D2127}
html body .pl-mode button{border-radius:5px}
html body .pl-mode button.on{background:rgba(157,184,220,.16);color:var(--gold)}
html body .pl-scroll .pl-num{color:var(--gold);opacity:.9;font-family:'IBM Plex Mono',monospace;font-weight:600}
html body .pl-bar{background:rgba(21,24,29,.94)}

/* results */
html body .stat-card,html body .review-item{background:#1D2127;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:8px}
html body .stat-num{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--gold);font-weight:600}
html body .stat-label{color:#858C97;opacity:1}

/* report button, sign-in modal, toasts (from prepline-supabase.js) */
html body .pl-pill:hover{border-color:rgba(157,184,220,.6);background:rgba(157,184,220,.12)}
html body .pl-rep-box .send{background:var(--gold);color:#1A1D21}

/* wide data tables in questions scroll sideways instead of widening the page */
.q-table{display:block;max-width:100%;overflow-x:auto}


/* readability: the picked answer is marked by a thick edge and a tick, not by colour alone */
html body .opt.selected,html body .pl-scroll .pl-opt.sel{position:relative;border-width:2px;padding-right:38px}
html body .opt.selected::after,html body .pl-scroll .pl-opt.sel::after{content:'✓';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font:700 16px Inter,sans-serif;color:var(--gold)}
html[data-theme=light] body .opt.selected::after,html[data-theme=light] body .pl-scroll .pl-opt.sel::after{color:#3D63A3}
html body .pl-credit,html body .qmap-legend,html body .qmap-diff{opacity:1!important}

/* Back / Next stay at the bottom of the screen, whatever the height of the picture or the zoom */
html body .nav-row{position:fixed;bottom:0;z-index:410;left:calc(var(--dock,0px) + (100vw - var(--dock,0px)) / 2);transform:translateX(-50%);
  width:min(672px,calc(100vw - var(--dock,0px) - 32px));background:var(--bg,#15181D);margin:0;
  padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.08)}
html[data-theme=light] body .nav-row{background:#F5F4F0;border-top-color:#D3D0C8}
html body .pl-tools{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
html body #app{padding-bottom:84px}