/* ==========================================================================
   DPO Practice Docket — stylesheet

   Design direction: a regulator's case file. Manila folder stock behind
   near-white filing sheets, institutional type, and a rubber stamp as the
   one moment of motion. Nothing else animates.
   ========================================================================== */

:root{
  /* Ink */
  --ink:#16191d;
  --ink-soft:#585f68;
  --ink-faint:#8a9098;

  /* Stock */
  --folder:#dbd2bf;       /* manila folder */
  --folder-dim:#cabfa6;   /* unselected tab */
  --card:#fcfbf8;         /* filing sheet */
  --rule:#d9d4c7;
  --rule-hard:#b8b0a0;

  /* Marking inks */
  --seal:#8c2f26;         /* stamp red — references, misses */
  --green:#2c5a4b;        /* cleared */
  --amber:#98671c;        /* for review */

  /* Type */
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  background:var(--folder);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding:0;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.masthead{
  border-bottom:1px solid var(--rule-hard);
  padding:20px 24px 0;
  max-width:860px;
  margin:0 auto;
}
.masthead-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}

.brand-btn{
  appearance:none;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--mono);
  text-transform:uppercase;
}
.brand-mark{
  background:var(--ink);
  color:var(--card);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  padding:4px 7px 3px;
  border-radius:2px;
}
.brand-name{
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--ink);
}
.brand-btn:hover .brand-mark{background:var(--seal)}

.brand-sub{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* Progress rail */
.progress{
  height:2px;
  background:var(--folder-dim);
  margin-bottom:16px;
  overflow:hidden;
}
.progress[hidden]{display:none}
.progress-bar{
  height:100%;
  width:0;
  background:var(--seal);
  transition:width .35s cubic-bezier(.2,.7,.3,1);
}

.tally{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--ink-soft);
}
.tally b{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------------------
   Folder tabs
   -------------------------------------------------------------------------- */
.tabs{
  display:flex;
  gap:3px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-top:2px;
}
.tabs::-webkit-scrollbar{display:none}

.tab{
  appearance:none;
  border:1px solid var(--rule-hard);
  border-bottom:none;
  background:var(--folder-dim);
  color:var(--ink-soft);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:9px 13px 8px;
  border-radius:3px 3px 0 0;
  cursor:pointer;
  white-space:nowrap;
  position:relative;
  top:1px;
  transition:background .12s ease,color .12s ease;
}
.tab:hover{background:#d3c9b3;color:var(--ink)}
.tab[aria-selected="true"]{
  background:var(--card);
  color:var(--ink);
  font-weight:600;
  padding-bottom:9px;
}
.tab-n{color:var(--ink-faint);font-weight:400;margin-left:6px}
.tab[aria-selected="true"] .tab-n{color:var(--ink-soft)}

/* --------------------------------------------------------------------------
   Filing sheet
   -------------------------------------------------------------------------- */
.stage{max-width:860px;margin:0 auto;padding:28px 24px 0}

.sheet{
  background:var(--card);
  border:1px solid var(--rule-hard);
  box-shadow:0 1px 0 var(--rule-hard),0 14px 34px -22px rgba(22,25,29,.5);
  padding:30px 34px 34px;
  position:relative;
  overflow:hidden;
  animation:lift .32s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes lift{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.slug{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
  margin-bottom:26px;
}
.ref{
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--seal);
  border:1px solid var(--seal);
  padding:3px 7px;
  border-radius:2px;
}
.kind{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.prompt{
  font-family:var(--serif);
  font-size:clamp(23px,4.1vw,31px);
  line-height:1.28;
  font-weight:400;
  letter-spacing:-.008em;
  margin:0 0 30px;
  max-width:30ch;
}

/* --------------------------------------------------------------------------
   Clock
   -------------------------------------------------------------------------- */
.clock{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 0 0;
  border-top:1px solid var(--rule);
}
.clock-face{
  font-family:var(--mono);
  font-size:25px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  transition:color .3s ease;
}
.clock-face.over{color:var(--amber)}
.clock-face.way-over{color:var(--seal)}

.clock-note{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  line-height:1.4;
}
.clock-ctl{
  margin-left:auto;
  appearance:none;
  background:none;
  border:1px solid var(--rule-hard);
  color:var(--ink-soft);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:7px 11px;
  border-radius:2px;
  cursor:pointer;
}
.clock-ctl:hover{border-color:var(--ink-soft);color:var(--ink)}

/* --------------------------------------------------------------------------
   Answer
   -------------------------------------------------------------------------- */
.reveal-btn{
  appearance:none;
  width:100%;
  margin-top:26px;
  background:var(--ink);
  color:var(--card);
  border:1px solid var(--ink);
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:15px;
  border-radius:2px;
  cursor:pointer;
  transition:background .14s ease;
}
.reveal-btn:hover{background:#000}

.answer{
  margin-top:28px;
  padding-top:24px;
  border-top:2px solid var(--ink);
  animation:unfold .26s ease both;
}
.answer[hidden]{display:none}
@keyframes unfold{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.answer-hd{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 16px;
}

.points{margin:0;padding:0;list-style:none;counter-reset:pt}
.points li{
  counter-increment:pt;
  position:relative;
  padding-left:32px;
  margin-bottom:13px;
  font-size:15.5px;
  line-height:1.55;
}
.points li::before{
  content:counter(pt,decimal-leading-zero);
  position:absolute;
  left:0;
  top:2px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  color:var(--seal);
}
.points em{font-style:normal;font-weight:600}

.cite{
  margin-top:20px;
  padding-top:14px;
  border-top:1px dotted var(--rule-hard);
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.6;
  color:var(--ink-soft);
}
.cite-lbl{
  color:var(--ink-faint);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:10px;
  display:block;
  margin-bottom:4px;
}

/* --------------------------------------------------------------------------
   Stamp — the one signature moment
   -------------------------------------------------------------------------- */
.stamp{
  position:absolute;
  right:26px;
  bottom:30px;
  border:3px double currentColor;
  border-radius:4px;
  padding:8px 16px;
  font-family:var(--mono);
  font-size:15px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transform:rotate(-11deg) scale(1.5);
  color:var(--seal);
}
.stamp.hit{animation:press .68s cubic-bezier(.15,.9,.3,1) both}
@keyframes press{
  0%{opacity:0;transform:rotate(-11deg) scale(1.55)}
  38%{opacity:.88;transform:rotate(-11deg) scale(.96)}
  52%{transform:rotate(-11deg) scale(1)}
  75%{opacity:.88}
  100%{opacity:0;transform:rotate(-11deg) scale(1)}
}

/* --------------------------------------------------------------------------
   Grading
   -------------------------------------------------------------------------- */
.grade{
  max-width:860px;
  margin:0 auto;
  padding:20px 24px 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.grade[hidden]{display:none}

.gbtn{
  appearance:none;
  background:var(--card);
  border:1px solid var(--rule-hard);
  border-radius:2px;
  padding:14px 8px 12px;
  cursor:pointer;
  text-align:center;
  font-family:var(--sans);
  transition:transform .1s ease,border-color .12s ease;
}
.gbtn:hover{border-color:var(--ink);transform:translateY(-1px)}
.gbtn:active{transform:translateY(0)}
.gbtn-k{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:3px}
.gbtn-s{
  display:block;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.g-know .gbtn-k{color:var(--green)}
.g-shaky .gbtn-k{color:var(--amber)}
.g-miss .gbtn-k{color:var(--seal)}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding-bottom:26px;
  margin-bottom:26px;
  border-bottom:1px solid var(--rule-hard);
}
.foot-bar[hidden]{display:none}
.keys{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
.keys kbd{
  margin-left:9px;
  margin-right:2px;
  font-family:var(--mono);
  background:var(--card);
  border:1px solid var(--rule-hard);
  border-bottom-width:2px;
  border-radius:3px;
  padding:1px 5px;
  font-size:10px;
  color:var(--ink);
}
.linkbtn{
  appearance:none;
  background:none;
  border:none;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  cursor:pointer;
  padding:4px 0;
  border-bottom:1px solid var(--rule-hard);
}
.linkbtn:hover{color:var(--seal);border-color:var(--seal)}

/* --------------------------------------------------------------------------
   Session summary
   -------------------------------------------------------------------------- */
.summary{
  background:var(--card);
  border:1px solid var(--rule-hard);
  box-shadow:0 1px 0 var(--rule-hard),0 14px 34px -22px rgba(22,25,29,.5);
  padding:34px;
  animation:lift .32s cubic-bezier(.2,.7,.3,1) both;
}
.summary h2{
  font-family:var(--serif);
  font-size:30px;
  font-weight:400;
  margin:0 0 4px;
  letter-spacing:-.01em;
}
.summary-sub{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 28px;
}

.scoreline{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  margin-bottom:28px;
}
.score{background:var(--card);padding:18px 14px;text-align:center}
.score-n{
  font-family:var(--mono);
  font-size:32px;
  font-weight:600;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.score-l{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:7px;
}
.s-know .score-n{color:var(--green)}
.s-shaky .score-n{color:var(--amber)}
.s-miss .score-n{color:var(--seal)}

.relist-hd{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--rule);
}
.relist{margin:0 0 26px;padding:0;list-style:none}
.relist li{
  display:flex;
  gap:12px;
  padding:9px 0;
  border-bottom:1px dotted var(--rule);
  font-size:14.5px;
  line-height:1.45;
}
.relist .r-ref{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--seal);
  flex:0 0 92px;
  padding-top:3px;
}

.restart{
  appearance:none;
  background:var(--ink);
  color:var(--card);
  border:none;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:15px 26px;
  border-radius:2px;
  cursor:pointer;
  width:100%;
}
.restart:hover{background:#000}

/* ==========================================================================
   Welcome screen
   ========================================================================== */
.welcome{
  background:var(--card);
  border:1px solid var(--rule-hard);
  box-shadow:0 1px 0 var(--rule-hard),0 14px 34px -22px rgba(22,25,29,.5);
  padding:38px 40px 40px;
  animation:lift .32s cubic-bezier(.2,.7,.3,1) both;
}

.welcome-eyebrow{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 16px;
}
.welcome-title{
  font-family:var(--serif);
  font-size:clamp(27px,4.6vw,37px);
  line-height:1.2;
  font-weight:400;
  letter-spacing:-.012em;
  margin:0 0 18px;
  max-width:22ch;
}
.welcome-lede{
  font-size:16.5px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0 0 34px;
  max-width:60ch;
}

/* --- how it works --- */
.how{
  border-top:2px solid var(--ink);
  padding-top:22px;
  margin-bottom:32px;
}
.how-hd,.newhere-hd,.pick-hd{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 16px;
}
.how-steps{margin:0;padding:0;list-style:none;counter-reset:hw}
.how-steps li{
  counter-increment:hw;
  position:relative;
  padding-left:34px;
  margin-bottom:14px;
  font-size:15.5px;
  line-height:1.55;
}
.how-steps li::before{
  content:counter(hw,decimal-leading-zero);
  position:absolute;
  left:0;
  top:2px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  color:var(--seal);
}
.how-steps em{font-style:italic}
.how-note{
  margin:20px 0 0;
  padding:14px 16px;
  background:var(--folder);
  border-left:2px solid var(--rule-hard);
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink-soft);
}

/* --- new here --- */
.newhere{
  border-top:1px solid var(--rule);
  padding-top:22px;
  margin-bottom:34px;
}
.newhere p{
  font-size:15.5px;
  line-height:1.6;
  margin:0 0 12px;
  max-width:62ch;
}
.newhere p:last-child{margin-bottom:0;color:var(--ink-soft)}
.newhere a{color:var(--seal);text-decoration:underline;text-underline-offset:2px}
.newhere a:hover{text-decoration-thickness:2px}

/* --- set picker --- */
.pick-hd{border-top:1px solid var(--rule);padding-top:22px}

.picks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:8px;
  margin-bottom:10px;
}
.pick{
  appearance:none;
  text-align:left;
  background:var(--card);
  border:1px solid var(--rule-hard);
  border-radius:2px;
  padding:15px 16px 16px;
  cursor:pointer;
  font-family:var(--sans);
  display:flex;
  flex-direction:column;
  gap:7px;
  transition:border-color .13s ease,transform .1s ease;
}
.pick:hover{border-color:var(--ink);transform:translateY(-1px)}
.pick:active{transform:translateY(0)}

.pick-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pick-name{font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.pick-n{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  color:var(--seal);
  font-variant-numeric:tabular-nums;
}
.pick-blurb{
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-soft);
}

.pick-all{
  appearance:none;
  width:100%;
  background:var(--ink);
  color:var(--card);
  border:1px solid var(--ink);
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:15px;
  border-radius:2px;
  cursor:pointer;
  transition:background .14s ease;
}
.pick-all:hover{background:#000}

/* ==========================================================================
   Hint
   ========================================================================== */
.hint-btn{
  appearance:none;
  background:none;
  border:1px dashed var(--rule-hard);
  color:var(--ink-soft);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:8px 13px;
  border-radius:2px;
  cursor:pointer;
  margin:0 0 26px;
  transition:border-color .13s ease,color .13s ease;
}
.hint-btn:hover{border-color:var(--seal);color:var(--seal)}

.hint{
  margin:0 0 26px;
  padding:13px 16px;
  background:var(--folder);
  border-left:2px solid var(--seal);
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink);
  animation:unfold .22s ease both;
}
.hint[hidden]{display:none}
.hint-lbl{
  display:block;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:5px;
}

/* ==========================================================================
   Summary actions
   ========================================================================== */
.summary-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.restart.ghost{
  background:none;
  color:var(--ink);
  border:1px solid var(--rule-hard);
}
.restart.ghost:hover{background:var(--folder);border-color:var(--ink)}

/* ==========================================================================
   Site footer
   ========================================================================== */
.sitefoot{
  margin-top:44px;
  border-top:1px solid var(--rule-hard);
  background:var(--folder-dim);
}
.sitefoot-inner{
  max-width:860px;
  margin:0 auto;
  padding:26px 24px 30px;
}

.foot-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:26px;
  padding-bottom:24px;
}
.foot-col{min-width:0}
.foot-ver{color:var(--ink-faint)}

.foot-hd{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--rule-hard);
}
.foot-list{margin:0;padding:0;list-style:none}
.foot-list li{margin-bottom:7px}
.foot-list a{
  font-size:14px;
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.foot-list a:hover{color:var(--seal);border-bottom-color:var(--seal)}

.foot-note{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
}
.foot-note strong{color:var(--ink);font-weight:600}

.foot-base{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  padding-top:18px;
  border-top:1px solid var(--rule-hard);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.foot-sign{color:var(--ink-soft)}

/* --------------------------------------------------------------------------
   Quality floor
   -------------------------------------------------------------------------- */
:focus-visible{outline:2px solid var(--seal);outline-offset:2px}

@media (max-width:620px){
  .stage,.grade,.masthead,.sitefoot-inner{padding-left:14px;padding-right:14px}
  .sheet{padding:24px 20px 28px}
  .summary{padding:26px 20px}
  .stamp{right:14px;bottom:20px;font-size:12px;padding:6px 12px;letter-spacing:.18em}
  .keys{display:none}
  .grade{gap:6px}
  .gbtn{padding:12px 4px 10px}
  .gbtn-k{font-size:12.5px}
  .gbtn-s{font-size:8.5px;letter-spacing:.06em}
  .relist .r-ref{flex-basis:78px}
  .welcome{padding:26px 20px 30px}
  .picks{grid-template-columns:1fr}
  .summary-acts{grid-template-columns:1fr}
  .foot-cols{gap:20px}
  .brand-sub{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .stamp.hit{opacity:0}
}