/* ---------------------------------------------------------------------------
   jacobkunselman.com/study — the back pages of the same field notebook.

   Tokens are copied from the site's index.html rather than shared, because
   these are static files with no build step. If the notebook palette changes
   there, change it here too.

   The 28px pitch is load-bearing: the ruled background is drawn every 28px, so
   every line-height, margin and padding below is a multiple of 28 or the text
   drifts off the rules. Interactive rows carry no vertical padding for the same
   reason — an answer is a line you tick, not a card.
--------------------------------------------------------------------------- */
:root{
  --paper:#EDE4C1;
  --paper-2:#E4DAB3;
  --ink:#201E17;
  --soft:#6B6552;
  --rule:rgba(42,111,106,.22);
  --margin:rgba(42,111,106,.55);
  --accent:#2A6F6A;
  --wrong:#A6412E;
  --tint:rgba(42,111,106,.10);
  --tint-wrong:rgba(166,65,46,.10);
  --pitch:28px;
  --mcol:196px;
  --disp:"Hepta Slab",Rockwell,"Roboto Slab",Georgia,serif;
  --body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Courier Prime","Courier New",Courier,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#1C1A12;
    --paper-2:#24211A;
    --ink:#EDE6CF;
    --soft:#A39C84;
    --rule:rgba(124,196,188,.18);
    --margin:rgba(124,196,188,.45);
    --accent:#7CC4BC;
    --wrong:#E08B72;
    --tint:rgba(124,196,188,.10);
    --tint-wrong:rgba(224,139,114,.12);
  }
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0;min-height:100vh;
  background-color:var(--paper);
  background-image:repeating-linear-gradient(to bottom,
    transparent 0 23px,var(--rule) 23px 24px,transparent 24px 28px);
  color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:var(--pitch);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--paper)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
p{margin:0}
b,strong{font-weight:600}

/* ---------- the page ---------- */
.book{position:relative;max-width:920px;margin:0 auto;padding:0 28px;min-height:100vh}
.book::before{content:"";position:absolute;top:0;bottom:0;left:calc(28px + var(--mcol) + 18px);
  width:1px;background:var(--margin)}
.e{display:grid;grid-template-columns:var(--mcol) minmax(0,1fr);column-gap:36px}
.m{font-family:var(--mono);font-size:14px;line-height:var(--pitch);color:var(--accent);
  position:relative;top:3px;letter-spacing:.01em;padding-right:8px}
.m.soft{color:var(--soft)}
.c{min-width:0}

/* ---------- type ---------- */
h1{font-family:var(--disp);font-weight:600;font-size:52px;line-height:84px;margin:0;
  letter-spacing:-.015em;position:relative;top:12px}
h2{font-family:var(--disp);font-weight:600;font-size:26px;line-height:56px;margin:0;
  letter-spacing:-.01em;position:relative;top:9px}
h3{font-family:var(--disp);font-weight:600;font-size:19px;line-height:var(--pitch);margin:0}
.stand{font-family:var(--disp);font-weight:500;font-size:22px;line-height:var(--pitch);
  color:var(--accent);margin:var(--pitch) 0}
.lead{color:var(--soft);max-width:36em}
.soft{color:var(--soft)}
.prose{max-width:34em}
.prose+.prose{margin-top:var(--pitch)}

header{padding-top:56px}
.sec{padding-top:56px}
.sec.tight{padding-top:var(--pitch)}

/* the rubber stamp, as on the front page */
.st{display:inline-block;vertical-align:top;height:22px;line-height:20px;margin-top:3px;
  margin-left:8px;padding:0 7px;border:1px solid var(--accent);border-radius:3px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);transform:rotate(-1.5deg);white-space:nowrap}
.st.plain{border-color:var(--soft);color:var(--soft);transform:rotate(1deg)}

/* ---------- track list on the hub ---------- */
.row{display:grid;grid-template-columns:var(--mcol) minmax(0,1fr);column-gap:36px;
  text-decoration:none;color:inherit}
.row+.row{margin-top:var(--pitch)}
.row .nm{font-family:var(--disp);font-weight:600;font-size:19px}
.row:hover .nm{text-decoration:underline;text-decoration-color:var(--accent);
  text-underline-offset:5px;text-decoration-thickness:2px}
.row .ds{color:var(--soft);display:block}
.row .tally{font-family:var(--mono);font-size:14px;color:var(--accent)}

/* ---------- actions: a pen-ruled underline, not a pill ---------- */
.acts{display:flex;flex-wrap:wrap;gap:0 32px}
.act{display:inline-block;font-family:var(--mono);font-size:16px;line-height:var(--pitch);
  color:var(--accent);text-decoration:none;border:0;background:none;cursor:pointer;
  border-bottom:2px solid var(--accent);padding:0;margin:0}
.act:hover{background:var(--paper-2)}
.act[disabled]{color:var(--soft);border-color:var(--soft);cursor:default;background:none}
.act.quiet{color:var(--soft);border-bottom-color:var(--soft)}

/* ---------- the Leitner boxes: cards seen edge-on ---------- */
.boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;align-items:end;
  height:calc(var(--pitch) * 5)}
.bx{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.bx .stack{background-image:repeating-linear-gradient(to bottom,
    var(--accent) 0 1px,transparent 1px 4px);
  background-color:var(--tint);width:100%;min-height:2px}
.bx.new .stack{background-image:repeating-linear-gradient(to bottom,
    var(--soft) 0 1px,transparent 1px 4px);background-color:transparent}
.bxlabels{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
  font-family:var(--mono);font-size:12px;line-height:var(--pitch);color:var(--soft)}
.bxlabels span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxlabels b{color:var(--accent);font-weight:400}

/* ---------- the section ledger ---------- */
.ledger{width:100%;border-collapse:collapse;font-size:16px}
.ledger th,.ledger td{text-align:left;padding:0;height:var(--pitch);font-weight:400;
  vertical-align:baseline}
.ledger th{font-family:var(--mono);font-size:12px;color:var(--soft);letter-spacing:.04em}
.ledger td.n,.ledger th.n{text-align:right;font-family:var(--mono);font-size:14px;
  padding-left:16px;white-space:nowrap}
.ledger tbody tr{cursor:pointer}
.ledger tbody tr:hover td{background:var(--paper-2)}
.ledger tbody tr.flat{cursor:default}
.ledger tbody tr.flat:hover td{background:none}
.ledger .pct{padding-left:10px}
.ledger .nm{font-family:var(--disp);font-weight:600;font-size:16px}
.ledger .code{font-family:var(--mono);font-size:13px;color:var(--accent);padding-right:14px}
.ledger .pct.ok{color:var(--accent)}
.ledger .pct.low{color:var(--wrong)}

/* ---------- a question ---------- */
.q{display:grid;grid-template-columns:var(--mcol) minmax(0,1fr);column-gap:36px}
.qtext{font-family:var(--disp);font-weight:500;font-size:21px;line-height:var(--pitch);
  margin:0 0 var(--pitch);max-width:30em}
.qmeta{font-family:var(--mono);font-size:14px;line-height:var(--pitch);color:var(--accent);
  position:relative;top:3px}
.qmeta .sub{color:var(--soft);display:block}

/* an answer is a ruled line you tick. No vertical padding: it must stay on the
   28px grid however many lines the text wraps to. */
.ans{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;
  width:100%;text-align:left;background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;line-height:var(--pitch)}
.ans .box{width:20px;height:20px;margin-top:4px;border:1px solid var(--soft);border-radius:2px;
  font-family:var(--mono);font-size:12px;line-height:18px;text-align:center;color:var(--soft);
  flex:none}
.ans .lbl{min-width:0}
.ans:hover .box{border-color:var(--accent);color:var(--accent)}
.ans:hover .lbl{background:var(--paper-2)}
.ans[disabled]{cursor:default}
.ans[disabled]:hover .lbl{background:none}
.ans[disabled]:hover .box{border-color:var(--soft);color:var(--soft)}

.ans.picked .box{border-color:var(--ink);color:var(--ink)}
.ans.right .box{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.ans.right .lbl{background:var(--tint)}
.ans.wrong .box{background:var(--wrong);border-color:var(--wrong);color:var(--paper)}
.ans.wrong .lbl{background:var(--tint-wrong);position:relative}
/* the one moment of motion: a pen stroke through the answer you got wrong */
.ans.wrong .lbl::after{content:"";position:absolute;left:0;top:13px;height:1.5px;
  width:100%;background:var(--wrong);transform-origin:left center;transform:scaleX(0);
  animation:strike .22s ease-out forwards}
@keyframes strike{to{transform:scaleX(1)}}

.why{color:var(--soft);max-width:32em;margin-top:var(--pitch)}
.why .cite{font-family:var(--mono);font-size:13px;color:var(--accent)}
.why .cite b{color:var(--ink);font-weight:700}
/* a question that needs a chart we cannot ship: say which one, and link it */
.needs{font-family:var(--mono);font-size:13px;line-height:var(--pitch);color:var(--soft);
  margin-bottom:var(--pitch)}
.needs b{color:var(--accent);font-weight:400}
.needs a{color:var(--accent)}

/* the three circuit diagrams. The pool art is black line on transparent, so the
   card stays light in both themes — same as it is on the printed exam. */
.fig{background:#FBF7E8;border:1px solid var(--margin);border-radius:2px;
  padding:13px;margin-bottom:var(--pitch);max-width:420px}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{font-family:var(--mono);font-size:12px;line-height:var(--pitch);color:#6B6552}

/* ---------- session chrome ---------- */
.bar{display:grid;grid-template-columns:var(--mcol) minmax(0,1fr);column-gap:36px;
  padding-top:56px}
.tick{font-family:var(--mono);font-size:14px;line-height:var(--pitch);color:var(--soft)}
.tick b{color:var(--accent);font-weight:400}
.tick .bad{color:var(--wrong)}
.crumb{font-family:var(--mono);font-size:14px;line-height:var(--pitch)}
.crumb a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent)}

/* the exam progress: one hairline per question, filled as you go */
.pips{display:flex;gap:2px;flex-wrap:wrap;height:var(--pitch);align-items:center}
.pips i{display:block;width:6px;height:12px;background:var(--tint);border-radius:1px}
.pips i.done{background:var(--accent)}
.pips i.now{background:var(--ink)}

footer{margin-top:84px;padding:var(--pitch) 0 56px;font-family:var(--mono);font-size:14px;
  line-height:var(--pitch);color:var(--soft);display:flex;justify-content:space-between;
  gap:24px;flex-wrap:wrap;position:relative;top:3px}
footer a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent)}

/* ---------- pocket size ---------- */
@media (max-width:760px){
  .book{padding:0 22px}
  .book::before{display:none}
  .e,.row,.q,.bar{grid-template-columns:1fr;column-gap:0}
  .m,.qmeta{padding-right:0}
  header{padding-top:var(--pitch)}
  h1{font-size:36px;line-height:56px;top:8px}
  h2{font-size:23px;line-height:var(--pitch);top:2px}
  .stand{font-size:20px}
  .qtext{font-size:19px}
  .sec{padding-top:var(--pitch)}
  .bar{padding-top:var(--pitch)}
  .boxes{height:calc(var(--pitch) * 4)}
  .bxlabels{font-size:11px}
  .ledger{font-size:15px}
  .ledger td.n,.ledger th.n{padding-left:10px}
  .acts{gap:0 22px}
  footer{margin-top:56px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .ans.wrong .lbl::after{transform:scaleX(1)}
}