/* ============================================================
   INTERVIEW PRACTICE ROOM
   Two surfaces: the Room (committed dark stage) and the
   Assessment sheets (theme-aware paper). Tokens define both.
   ============================================================ */

:root{
  /* --- light palette (complete; the un-stamped default) --- */
  --paper:#E9E9E4;
  --paper-2:#F3F3EF;
  --paper-3:#DEDED7;
  --ink:#16191A;
  --ink-2:#3D4446;
  --ink-3:#6B7376;
  --rule:#CBCBC3;
  --rule-soft:#DCDCD5;

  --petrol:#14545C;
  --petrol-ink:#0C3A40;
  --petrol-wash:#DDE7E7;
  --amber:#B8701C;
  --amber-wash:#F0E3D2;
  --claret:#8A2B34;
  --claret-wash:#EFDCDD;
  --sage:#3F6B52;
  --sage-wash:#DCE7DF;

  /* the stage is the same in every theme - you dim the lights to focus */
  --room-bg:#101416;
  --room-bg-2:#161B1E;
  --room-ink:#E7E9E8;
  --room-ink-2:#9AA3A5;
  --room-ink-3:#646E71;
  --room-rule:#252D30;
  --room-lit:#F2F4F3;

  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --step--1:clamp(.78rem,.76rem + .1vw,.84rem);
  --step-0:clamp(.94rem,.91rem + .14vw,1rem);
  --step-1:clamp(1.1rem,1.04rem + .3vw,1.24rem);
  --step-2:clamp(1.35rem,1.24rem + .55vw,1.68rem);
  --step-3:clamp(1.7rem,1.48rem + 1.1vw,2.35rem);
  --step-4:clamp(2.1rem,1.7rem + 2vw,3.2rem);

  --sp-1:.28rem; --sp-2:.55rem; --sp-3:.85rem; --sp-4:1.3rem;
  --sp-5:2rem;  --sp-6:3rem;   --sp-7:4.5rem;

  --radius:3px;
  --shadow:0 1px 2px rgba(22,25,26,.06),0 8px 24px -12px rgba(22,25,26,.18);
  --maxw:1180px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14181A;
    --paper-2:#1B2124;
    --paper-3:#0E1113;
    --ink:#E4E7E6;
    --ink-2:#AFB7B8;
    --ink-3:#7C8587;
    --rule:#2A3134;
    --rule-soft:#212729;

    --petrol:#5FA9AF;
    --petrol-ink:#8FC8CC;
    --petrol-wash:#17292B;
    --amber:#D69A4E;
    --amber-wash:#2C2318;
    --claret:#D4757D;
    --claret-wash:#2C1A1C;
    --sage:#7FB394;
    --sage-wash:#182420;

    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#14181A;
  --paper-2:#1B2124;
  --paper-3:#0E1113;
  --ink:#E4E7E6;
  --ink-2:#AFB7B8;
  --ink-3:#7C8587;
  --rule:#2A3134;
  --rule-soft:#212729;

  --petrol:#5FA9AF;
  --petrol-ink:#8FC8CC;
  --petrol-wash:#17292B;
  --amber:#D69A4E;
  --amber-wash:#2C2318;
  --claret:#D4757D;
  --claret-wash:#2C1A1C;
  --sage:#7FB394;
  --sage-wash:#182420;

  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--step-0);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.15;font-weight:500}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--petrol);outline-offset:2px;border-radius:2px}

/* ---------- shared atoms ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column}
.hidden{display:none !important}

.btn{
  font-family:var(--font-ui);
  font-size:var(--step--1);
  font-weight:500;
  letter-spacing:.01em;
  padding:.55rem 1rem;
  border-radius:var(--radius);
  border:1px solid var(--rule);
  background:var(--paper-2);
  color:var(--ink);
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.btn:hover{background:var(--paper-3);border-color:var(--ink-3)}
.btn--primary{background:var(--petrol);border-color:var(--petrol);color:#F6FAFA}
:root[data-theme="dark"] .btn--primary,
:root:not([data-theme="light"]) .btn--primary{color:#0B1416}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn--primary{color:#F6FAFA}}
.btn--primary:hover{background:var(--petrol-ink);border-color:var(--petrol-ink)}
.btn--ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn--ghost:hover{background:var(--paper-3);border-color:transparent;color:var(--ink)}
.btn--danger{color:var(--claret);border-color:var(--claret)}
.btn--danger:hover{background:var(--claret-wash);border-color:var(--claret)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn--lg{font-size:var(--step-0);padding:.72rem 1.5rem}

.tag{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:2px;
  background:var(--paper-3);color:var(--ink-2);
  white-space:nowrap;
}
.tag--petrol{background:var(--petrol-wash);color:var(--petrol)}
.tag--amber{background:var(--amber-wash);color:var(--amber)}
.tag--claret{background:var(--claret-wash);color:var(--claret)}
.tag--sage{background:var(--sage-wash);color:var(--sage)}

textarea,input[type=text]{
  font-family:var(--font-ui);font-size:var(--step-0);
  width:100%;padding:.6rem .7rem;
  background:var(--paper-2);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--radius);
  line-height:1.5;resize:vertical;
}
textarea:focus,input[type=text]:focus{border-color:var(--petrol)}
label.field{display:flex;flex-direction:column;gap:.35rem}
label.field > span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}

/* ============================================================
   APP SHELL  (assessment surface)
   ============================================================ */
#shell{min-height:100vh;display:flex;flex-direction:column}

.topbar{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:0 var(--sp-4);height:56px;
  border-bottom:1px solid var(--rule);
  background:var(--paper-2);
  position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:baseline;gap:.5rem;margin-right:auto}
.brand b{font-family:var(--font-display);font-weight:400;font-size:var(--step-1);letter-spacing:-.01em}
.brand .dot{width:6px;height:6px;border-radius:50%;background:var(--claret);align-self:center}
/* The tagline earns its place next to the name, but not at the cost of
   crowding the tabs. It is the first thing to go when the bar gets tight. */
.brand-tag{
  font-size:var(--step--1);color:var(--ink-3);line-height:1;
  padding-left:.6rem;border-left:1px solid var(--rule);
}
@media(max-width:1180px){.brand-tag{display:none}}

/* On a narrow phone the brand, four tabs and the primary button do not fit.
   Left alone the whole PAGE scrolls sideways, which makes every screen feel
   broken, not just this bar. Let the tabs scroll within themselves instead —
   the overflow is then a deliberate, contained gesture. */
@media(max-width:560px){
  .topbar{gap:var(--sp-2);padding:0 var(--sp-3)}
  .brand{min-width:0}
  .brand b{font-size:var(--step-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  nav.tabs{min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs button{padding:.45rem .55rem}
  .topbar .btn--primary{flex:none;padding:.55rem .7rem}
}

nav.tabs{display:flex;gap:.15rem}
nav.tabs button{
  background:none;border:none;padding:.45rem .8rem;border-radius:var(--radius);
  font-size:var(--step--1);font-weight:500;color:var(--ink-3);
  transition:color .14s ease,background .14s ease;
}
nav.tabs button:hover{color:var(--ink);background:var(--paper-3)}
nav.tabs button[aria-current="page"]{color:var(--ink);background:var(--paper-3)}

main{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-7)}
.view{display:none}
.view.is-active{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.page-head{margin-bottom:var(--sp-5);max-width:62ch}
.page-head h1{font-family:var(--font-display);font-weight:400;font-size:var(--step-3);letter-spacing:-.015em;margin-top:.3rem}
.page-head p{color:var(--ink-2);margin-top:.6rem;font-size:var(--step-0)}

.card{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:var(--sp-4);
}
.card + .card{margin-top:var(--sp-3)}
.card h3{font-size:var(--step-1);font-weight:600;letter-spacing:-.005em}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.grid-side{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-5);align-items:start}
@media(max-width:860px){.grid-2,.grid-side{grid-template-columns:1fr}}

/* ---------- notice strip ---------- */
.notice{
  display:flex;gap:.7rem;align-items:flex-start;
  padding:.7rem .9rem;border-radius:var(--radius);
  font-size:var(--step--1);line-height:1.5;
  border:1px solid var(--rule);background:var(--paper-2);color:var(--ink-2);
}
.notice b{color:var(--ink);font-weight:600}
.notice--amber{background:var(--amber-wash);border-color:transparent;color:var(--ink-2)}
.notice--petrol{background:var(--petrol-wash);border-color:transparent;color:var(--ink-2)}
.notice--claret{background:var(--claret-wash);border-color:transparent;color:var(--ink-2)}
.notice .ico{font-family:var(--font-mono);font-weight:600;color:var(--ink-3);flex:none;line-height:1.5}