/* ============================================================
   nyx-ui.css — the NY Exam design layer, in one place.

   Extracted from the parent portal (index.html, "HOME MODE — parent portal
   design layer") so the portal, the owner console and anything built later
   cannot drift apart. Tokens match nyexam.com exactly.

   Note on index.html: it still carries its own copy of these rules, scoped to
   body.home. It is a symlinked file shared with the the center build
   build, so pointing it at this stylesheet is a separate change that needs the
   the center build re-tested. This file is the source of truth going forward.
   ============================================================ */

:root{
  --ny-blue:#1565D8;  --ny-blue-d:#0F56BC;
  --ny-green:#69C52F; --ny-orange:#FF8A1F;
  --ny-purple:#7B3FE4;--ny-teal:#00A8A8;
  --ny-red:#B3261E;

  --ny-ink:#1B1F2A;  --ny-body:#5F6B7A; --ny-muted:#9AA5B1;
  --ny-bg:#F8FAFC;   --ny-card:#fff;    --ny-alt:#EEF6FF;
  --ny-line:rgba(27,31,42,.07);
  --ny-edge:#E3E9F0;

  --ny-r:24px;
  --ny-sh:0 6px 22px rgba(27,31,42,.07);
  --ny-sh-lg:0 18px 48px rgba(27,31,42,.10);
  --ny-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Arial,sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--ny-bg); color:var(--ny-ink);
  font:16px/1.6 var(--ny-font); -webkit-font-smoothing:antialiased;
}

h1{font-size:34px;letter-spacing:-.03em;margin:0 0 6px}
h2{font-size:24px;letter-spacing:-.025em;margin:0 0 14px}
h3{font-size:19px;letter-spacing:-.02em;margin:0 0 6px}
h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ny-muted);
   margin:22px 0 8px;font-weight:800}
a{color:var(--ny-blue)}

:focus-visible{outline:2px solid var(--ny-blue);outline-offset:2px;border-radius:6px}

/* ------------------------------------------------------------- layout */
.wrap{max-width:1240px;margin:0 auto;padding:28px}

.card{
  background:var(--ny-card); border:0; border-radius:var(--ny-r);
  box-shadow:var(--ny-sh); padding:28px; margin-bottom:20px;
}
.card--flush{padding:22px 28px}

.sub{color:var(--ny-body);margin:0 0 18px}
.muted{color:var(--ny-muted);font-size:.92rem}
.right{text-align:right}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.grow{flex:1}

/* ------------------------------------------------------------- buttons */
.btn{
  border:0; border-radius:999px; padding:12px 22px; font:700 15px/1 var(--ny-font);
  background:var(--ny-blue); color:#fff; cursor:pointer;
  box-shadow:0 10px 24px rgba(21,101,216,.26);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{background:var(--ny-blue-d);transform:translateY(-2px)}

.btn-ghost{
  border:2px solid var(--ny-edge); border-radius:999px; padding:9px 17px;
  font:650 14px/1 var(--ny-font); background:#fff; color:var(--ny-blue); cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.btn-ghost:hover{border-color:var(--ny-blue);background:var(--ny-alt)}
.btn-ghost.danger{color:var(--ny-red)}
.btn-ghost.danger:hover{border-color:var(--ny-red);background:#FDECEC}
.btn-sm{padding:7px 14px;font-size:13px}

select, input[type=text], input[type=email], input[type=password], input[type=search]{
  border:2px solid var(--ny-edge); border-radius:999px; padding:11px 16px;
  background:#fff; font:inherit; font-size:15px; color:var(--ny-ink);
}
select:focus, input:focus{outline:none;border-color:var(--ny-blue);
  box-shadow:0 0 0 4px rgba(21,101,216,.13)}

/* ------------------------------------------------------------- pills */
.pill{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; padding:.3rem .6rem; border-radius:999px; white-space:nowrap;
}
.pill.ok{background:#EAF8E0;color:#3F7D12}
.pill.warn{background:#FFF3E2;color:#8a4a00}
.pill.bad{background:#FDECEC;color:var(--ny-red)}
.pill.info{background:var(--ny-alt);color:var(--ny-blue)}
.pill.flat{background:#EEF2F7;color:var(--ny-body)}

/* ------------------------------------------------------------- tables */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
thead th{
  text-align:left; font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ny-muted); border:0; padding:0 10px 10px; font-weight:800;
}
tbody td{border:0;border-top:1px solid var(--ny-line);padding:14px 10px;vertical-align:middle}
.tscroll{overflow-x:auto;margin:0 -6px;padding:0 6px}

/* Rows that open a drill-down. */
tr.click{cursor:pointer;transition:background .12s ease}
tr.click:hover td{background:var(--ny-alt)}

/* ------------------------------------------------------------- KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:16px;margin-bottom:20px}
.kpi{
  background:var(--ny-card); border-radius:var(--ny-r); box-shadow:var(--ny-sh);
  padding:20px 22px; border-top:6px solid var(--kc,var(--ny-blue));
  cursor:pointer; text-align:left; border-left:0;border-right:0;border-bottom:0;
  font:inherit; width:100%; display:block;
  transition:transform .15s ease, box-shadow .15s ease;
}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--ny-sh-lg)}
.kpi b{display:block;font-size:38px;line-height:1.05;letter-spacing:-.04em;color:var(--kc,var(--ny-blue))}
.kpi span{display:block;font-size:13px;color:var(--ny-muted);margin-top:6px}
.kpi em{font-style:normal;font-size:12px;color:var(--ny-body)}

/* ------------------------------------------------------------- charts */
.chartgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px}
.chart{background:#fff;border-radius:var(--ny-r);box-shadow:var(--ny-sh);padding:24px}
.chart h3{font-size:16px;margin:0 0 2px}
.chart .muted{margin-bottom:14px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}

/* The line chart's viewBox is 320x96; left to stretch it grows absurdly tall
   in a wide drawer, so cap it near its natural size. */
.card svg{width:100%;max-width:420px;height:auto;display:block;overflow:visible}

.kbars{margin-top:12px}
.kbar{display:flex;align-items:center;gap:12px;margin-bottom:9px;font-size:14px}
.kbar>span:first-child{width:74px;color:var(--ny-body);flex:0 0 auto}
.ktrack{flex:1;height:10px;border-radius:999px;background:#EEF2F7;overflow:hidden}
.kfill{display:block;height:100%;border-radius:999px}
.kbar b{width:52px;text-align:right;flex:0 0 auto;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- sidebar
   The parent portal rail, unchanged: 76px collapsed, 248px on hover, labels
   fade in, exit pinned to the bottom. Horizontal scroller under 820px, where
   hover does not exist. */
.psb{
  position:fixed; top:0; left:0; bottom:0; width:76px; z-index:50;
  background:#fff; box-shadow:2px 0 20px rgba(27,31,42,.07);
  padding:22px 12px; display:flex; flex-direction:column; gap:6px;
  transition:width .22s cubic-bezier(.2,.8,.3,1); overflow:hidden;
}
.psb:hover, .psb:focus-within{width:248px}
.psb__brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:0 8px;min-height:34px}
.psb__brand img{width:34px;height:34px;border-radius:9px;flex:0 0 auto;object-fit:contain}
.psb__title{font-weight:800;letter-spacing:-.02em;font-size:16px;white-space:nowrap;
  opacity:0;transition:opacity .16s ease}
.psb:hover .psb__title, .psb:focus-within .psb__title{opacity:1}
.psb__item{
  display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:14px;
  border:0;background:none;cursor:pointer;color:var(--ny-body);font:650 15px/1 var(--ny-font);
  width:100%;text-align:left;white-space:nowrap;
}
.psb__item:hover, .psb__item.on{background:var(--ny-alt);color:var(--ny-blue)}
.psb__ico{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:#F1F5F9;color:var(--ny-body);font-size:16px;
  transition:background .15s ease,color .15s ease;
}
.psb__item:hover .psb__ico, .psb__item.on .psb__ico{background:var(--ny-blue);color:#fff}
.psb__label{opacity:0;transition:opacity .16s ease}
.psb:hover .psb__label, .psb:focus-within .psb__label{opacity:1}
.psb__spacer{flex:1}
.psb__item--exit .psb__ico{background:#EAF8E0;color:#3F7D12}
.psb__item--exit:hover .psb__ico{background:var(--ny-green);color:#fff}

body.portal .wrap{padding-left:96px;transition:padding-left .22s ease}

@media(max-width:820px){
  /* Sticky, not static. The portal's original rule let this scroll away with
     the page, which is survivable on a short screen but not here — the console
     is eight sections and thousands of pixels tall, so a static bar is gone
     after one flick and the only way back is scrolling to the very top. */
  .psb{position:sticky;top:0;width:auto;flex-direction:row;overflow-x:auto;bottom:auto;
    padding:12px;gap:8px;box-shadow:0 2px 20px rgba(27,31,42,.10)}
  .psb:hover{width:auto}
  .psb__brand{display:none}
  .psb__label{opacity:1}
  .psb__spacer{display:none}
  body.portal .wrap{padding-left:0}
}

/* ------------------------------------------------------------- drawer
   Drill-downs open here rather than navigating away, so the context behind
   them stays put. */
.scrim{
  position:fixed;inset:0;background:rgba(27,31,42,.34);z-index:60;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(760px,100vw);z-index:61;
  background:var(--ny-bg);box-shadow:-18px 0 48px rgba(27,31,42,.16);
  transform:translateX(100%);transition:transform .24s cubic-bezier(.2,.8,.3,1);
  display:flex;flex-direction:column;
}
.drawer.open{transform:none}
.drawer__head{
  padding:20px 24px;background:#fff;border-bottom:1px solid var(--ny-line);
  display:flex;align-items:center;gap:14px;flex:0 0 auto;
}
.drawer__head h2{margin:0;flex:1;font-size:21px}
.drawer__body{overflow-y:auto;padding:22px 24px;flex:1}
.drawer__body .card{padding:22px;margin-bottom:16px}

.crumb{background:none;border:0;padding:0;font:650 13px/1 var(--ny-font);
  color:var(--ny-blue);cursor:pointer}
.crumb:hover{text-decoration:underline}

/* Key/value rows in drill-downs. */
.kv{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:8px 18px;font-size:14px}
.kv dt{color:var(--ny-muted)}
.kv dd{margin:0;color:var(--ny-ink);word-break:break-word}

.stub{border:2px dashed var(--ny-edge);border-radius:var(--ny-r);padding:22px;color:var(--ny-body)}
.note{background:var(--ny-alt);border-radius:16px;padding:16px 18px;font-size:14px;color:var(--ny-body)}
.note.warn{background:#FFF3E2;color:#7a4300}
.note.bad{background:#FDECEC;color:#8d201a}

.linkbox{
  display:flex;gap:8px;align-items:center;background:#fff;border:2px solid var(--ny-edge);
  border-radius:14px;padding:10px 12px;font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all;
}

/* Report HTML from a sitting is rendered inside this; it brings its own
   styling, so it is boxed rather than inheriting the console's. */
.report{background:#fff;border-radius:16px;padding:18px;overflow-x:auto}
.report *{max-width:100%}

/* --- parent navigation -------------------------------------------------
   One copy, used by credits.html and by the intro screen of the TACHS and
   HSPT runners. It lives here rather than in each page because it was three
   pages' worth of the same rules, and three copies drift.

   IMPORTANT: on an exam runner this must be shown ONLY on the intro screen.
   A student who is part-way through a timed section must not be handed a link
   out of it — sections lock when their time runs out and cannot be re-entered.
   Hidden by default for exactly that reason: a page has to opt in. */
.nav{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--ny-line)}
.nav[hidden]{display:none}
.nav__in{max-width:860px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nav__logo{height:26px;width:auto;display:block}
.nav__t{font-weight:700;font-size:15px}
.nav__links{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav__a{display:inline-block;text-decoration:none;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1.2;
  color:var(--ny-blue);padding:7px 13px;border-radius:999px;
  border:1px solid var(--ny-line);background:#fff;white-space:nowrap}
.nav__a:hover{background:var(--ny-bg)}
.nav__a--now{color:var(--ny-muted);border-color:transparent;cursor:default}
@media (max-width:430px){
  .nav__t{display:none}
  .nav__links{margin-left:0;width:100%}
  .nav__a{flex:1;text-align:center}
}

/* ---------- code in a question ----------
   AP Computer Science A stems ARE Java. Without white-space:pre the browser
   collapses every run of spaces and newlines, and a twenty-line method arrives
   as one unreadable line — in the one subject where indentation is the
   question. overflow-x keeps a long line inside the card instead of pushing
   the whole exam sideways on a phone. */
.q__t pre, .opt pre{
  background:#F5F7FA;border:1px solid var(--ny-edge,#E3E9F0);border-radius:12px;
  padding:12px 14px;margin:10px 0;overflow-x:auto;white-space:pre;
  font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.q__t code, .opt code{
  font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.q__t pre code, .opt pre code{font-size:inherit;background:none;padding:0}