/* ═══════════════════════════════════════════════════
   Red Pen
   slate paper · white cards · red pen
   Token names are kept from the original dark build; only the values
   flipped, so every background/foreground pairing inverts together.
   ═══════════════════════════════════════════════════ */

:root{
  /* ground — now the paper, not the ink */
  --ink:        #F8FAFC;   /* page */
  --ink-raise:  #FFFFFF;   /* cards */
  --ink-sunk:   #F1F5F9;   /* rail */
  --ink-line:   #E2E8F0;   /* borders */
  --ink-line-2: #E9EEF4;   /* faint rules */

  /* type */
  --bone:       #0F172A;   /* primary */
  --bone-2:     #475569;   /* secondary */
  --bone-3:     #64748B;   /* labels, 4.6:1 on the paper */

  /* the pen */
  --pen:        #DC2626;
  --pen-ink:    #B91C1C;   /* red text small enough to need the contrast */
  --pen-wash:   rgba(220,38,38,.10);
  --pen-wash-2: rgba(220,38,38,.26);

  /* type roles */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --ui:      "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* the editor typeset — backdrop and textarea must agree exactly */
  --ed-font:    1.0313rem/1.78 var(--ui);
  --ed-track:   .002em;
  --ed-pad:     1.375rem 1.5rem;
  --ed-h:       clamp(300px,44vh,470px);

  --shell: 1220px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font:400 1rem/1.6 var(--ui);
  font-variation-settings:"wdth" 100;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* faint ruled-paper wash, barely there */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 68% at 50% -14%, rgba(220,38,38,.055), transparent 58%),
    radial-gradient(65% 42% at 88% 4%, rgba(15,23,42,.035), transparent 56%);
}
main,.topbar,.foot{ position:relative; z-index:1 }

.wrap{ width:min(100% - 3rem, var(--shell)); margin-inline:auto }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--pen); color:var(--ink); padding:.7rem 1.1rem;
  font:500 .875rem var(--ui); text-decoration:none;
}
.skip:focus{ left:.75rem; top:.75rem }

:focus-visible{
  outline:2px solid var(--pen);
  outline-offset:3px;
  border-radius:2px;
}

/* ─────────── wordmark ─────────── */
.wordmark{
  font:500 1.0625rem/1 var(--display);
  font-variation-settings:"opsz" 24,"SOFT" 0,"WONK" 1;
  letter-spacing:-.01em;
  display:inline-flex; align-items:baseline; gap:.14em;
}
.wm-red{
  color:var(--bone);
  position:relative;
  padding-bottom:.14em;
}
.wm-red::after{
  content:""; position:absolute; left:-.04em; right:-.06em; bottom:.02em;
  height:2px; background:var(--pen);
  transform:rotate(-1.4deg);
}
.wm-pen{ color:var(--bone-2) }
.wordmark.small{ font-size:.9375rem }

/* ─────────── topbar ─────────── */
.topbar{ padding:1.5rem 0 }
.topbar-in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.topbar-note{
  margin:0; font:400 .75rem/1 var(--mono);
  color:var(--bone-3); letter-spacing:.01em;
}

/* ─────────── shared bits ─────────── */
.eyebrow{
  margin:0 0 1.5rem;
  font:400 .6875rem/1 var(--mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--pen-ink);
}

.sec-h{
  margin:0 0 .85rem;
  font:400 clamp(1.9rem,4vw,2.9rem)/1.06 var(--display);
  font-variation-settings:"opsz" 96,"SOFT" 0,"WONK" 1;
  letter-spacing:-.022em;
}
.sec-sub{
  margin:0; max-width:46ch;
  color:var(--bone-2); font-size:1rem;
}
.sec-sub b{ color:var(--bone); font-weight:600 }

/* ─────────── hero ─────────── */
.hero{ padding:clamp(3rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem) }

.hero-h{
  margin:0 0 2rem;
  font:400 clamp(2.6rem,8.2vw,6.1rem)/.98 var(--display);
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1;
  letter-spacing:-.033em;
  max-width:17ch;
}
.hero-l1{ display:block; color:var(--bone) }

.strike-wrap{
  display:block;
  position:relative;
  margin-top:.62em;      /* room for the correction above */
  width:fit-content;
  max-width:100%;
}
/* The strike is painted as a background gradient rather than an absolute bar,
   so it survives line wrapping — each line fragment gets its own stroke —
   and animating background-size still draws it left to right. */
.struck{
  display:inline;
  color:var(--bone-2);
  background-image:linear-gradient(var(--pen),var(--pen));
  background-repeat:no-repeat;
  background-position:0 .60em;
  background-size:100% .036em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  animation:draw .62s cubic-bezier(.16,.84,.44,1) .5s backwards;
}
.rule{ display:none }

.correction{
  position:absolute; left:.06em; bottom:100%;
  margin-bottom:.1em;
  font:400 clamp(.95rem,2.1vw,1.6rem)/1.1 var(--mono);
  letter-spacing:-.01em;
  color:var(--pen);
  white-space:nowrap;
  transform:rotate(-2.1deg);
  animation:pencil .5s cubic-bezier(.16,.84,.44,1) 1s backwards;
}
/* `backwards` fill means the from-state applies during the delay and the
   final state is the CSS default — if animation never runs, both still show. */
@keyframes draw{ from{ background-size:0% .036em } }
@keyframes pencil{ from{ opacity:0; transform:rotate(-2.1deg) translateY(7px) } }

.hero-sub{
  margin:0; max-width:56ch;
  font-size:1.0625rem; line-height:1.62;
  color:var(--bone-2);
}

/* ─────────── the desk ─────────── */
.desk{ padding:1rem 0 clamp(3.5rem,7vw,6rem) }

.panes{
  display:grid; gap:1.25rem;
  grid-template-columns:1fr 1fr;
}

.pane{ min-width:0; display:flex; flex-direction:column }

.pane-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:0 .125rem .7rem;
}
.pane-title{
  margin:0;
  font:400 .6875rem/1 var(--mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone);
}
.pane-meta{ display:flex; align-items:baseline; gap:1rem }

.linkbtn{
  appearance:none; background:none; border:0; padding:0;
  font:400 .75rem/1 var(--mono);
  color:var(--bone-3); cursor:pointer;
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
.linkbtn:hover:not(:disabled){ color:var(--pen-ink); border-bottom-color:var(--pen-wash-2) }
.linkbtn:disabled{ opacity:.35; cursor:default }

.count{
  font:400 .75rem/1 var(--mono);
  color:var(--bone-3);
  font-variant-numeric:tabular-nums;
}

/* editor shell ------------------------------------------------ */
.editor{
  position:relative;
  height:var(--ed-h);
  overflow-y:auto;
  background:var(--ink-raise);
  border:1px solid var(--ink-line);
  border-radius:3px;
  transition:border-color .18s;
  scrollbar-width:thin;
  scrollbar-color:var(--ink-line) transparent;
}
.editor::-webkit-scrollbar{ width:11px }
.editor::-webkit-scrollbar-track{ background:transparent }
.editor::-webkit-scrollbar-thumb{
  background:var(--ink-line);
  border-radius:99px;
  border:3px solid transparent;
  background-clip:content-box;
}
.editor::-webkit-scrollbar-thumb:hover{ background:var(--bone-3); background-clip:content-box }
.editor:focus-within{ border-color:var(--pen-wash-2) }
.editor-inner{ position:relative; min-height:100% }

/* both layers share this exactly */
.typeset{
  font:var(--ed-font);
  letter-spacing:var(--ed-track);
  padding:var(--ed-pad);
  white-space:pre-wrap;
  overflow-wrap:break-word;
  word-break:normal;
  tab-size:2;
  margin:0;
  border:0;
}

.backdrop{
  position:absolute; inset:0;
  color:var(--bone);
  pointer-events:none;
  z-index:1;
}

#input{
  position:relative; z-index:2;
  display:block; width:100%;
  min-height:calc(var(--ed-h) - 2px);
  height:auto;
  background:transparent;
  color:transparent;
  -webkit-text-fill-color:transparent;
  caret-color:var(--pen);
  resize:none; outline:none; overflow:hidden;
  font-family:var(--ui);
}
#input::placeholder{
  color:var(--bone-3);
  -webkit-text-fill-color:var(--bone-3);
}
#input::selection{ background:rgba(220,38,38,.20) }

/* the marks ---------------------------------------------------- */
mark.tell{
  background:var(--pen-wash);
  color:inherit;
  border-radius:2px;
  box-shadow:inset 0 -2px 0 rgba(220,38,38,.62);
  transition:background .15s, box-shadow .15s, color .15s;
}
mark.tell.lit{
  background:var(--pen-wash-2);
  color:var(--pen);
  box-shadow:inset 0 -2px 0 var(--pen);
}
/* Flagged only: the pen circled it, but fixing it safely needs a human.
   Hollow mark so it never reads as "the rewrite forgot this one". */
mark.tell.flag{
  background:transparent;
  box-shadow:none;
  text-decoration:underline dotted var(--pen);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
mark.tell.flag.lit{
  background:var(--pen-wash);
  color:var(--pen);
  box-shadow:none;
}

.legend{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.4rem 1.15rem;
  margin:.8rem .125rem 0;
  font:400 .75rem/1 var(--mono);
  color:var(--bone-3);
}
.key{
  display:inline-block; width:1.35rem; height:0; flex:none;
  margin-right:-.75rem;
  vertical-align:middle;
}
.key-fix{ border-top:3px solid var(--pen) }
.key-flag{ border-top:2px dotted var(--pen) }

/* output ------------------------------------------------------- */
.output{ color:var(--bone); min-height:calc(var(--ed-h) - 2px) }
.output .empty{
  margin:0; color:var(--bone-3);
  font-style:normal;
}
mark.new{
  background:transparent; color:var(--bone);
  box-shadow:inset 0 -2px 0 rgba(15,23,42,.22);
  border-radius:2px;
}

/* gauge -------------------------------------------------------- */
/* margin-top:auto pins both gauges to the bottom of the stretched panes, so the
   legend under the source pane cannot knock the two readings out of line. */
.gauge{ padding:.95rem .125rem 0; margin-top:auto }
.gauge-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.gauge-label{
  font:400 .6875rem/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-3);
}
.gauge-num{
  font:400 1.25rem/1 var(--mono);
  font-variant-numeric:tabular-nums;
  color:var(--bone-2);
}
.gauge-track{
  margin-top:.6rem; height:3px;
  background:var(--ink-line-2);
  border-radius:99px; overflow:hidden;
}
.gauge-fill{
  display:block; height:100%; width:0;
  background:var(--bone-3);
  border-radius:99px;
  transition:width .7s cubic-bezier(.22,.8,.3,1), background-color .7s;
}
.gauge-band{
  margin:.55rem 0 0;
  font:400 .75rem/1.3 var(--mono);
  color:var(--bone-3);
}

/* ─────────── control rail ─────────── */
.rail{
  margin-top:1.75rem;
  display:flex; align-items:center; gap:1.75rem; flex-wrap:wrap;
  padding:1.1rem 1.25rem;
  background:var(--ink-sunk);
  border:1px solid var(--ink-line-2);
  border-radius:3px;
}
.rail-group{ display:flex; align-items:center; gap:.9rem; min-width:0 }
.rail-group.grow{ flex:1 1 22rem }
.rail-label{
  font:400 .6875rem/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-3); white-space:nowrap;
}

.segmented{
  display:inline-flex;
  border:1px solid var(--ink-line);
  border-radius:2px; overflow:hidden;
}
.segmented button{
  appearance:none; background:none; border:0;
  padding:.5rem .85rem;
  font:500 .8125rem/1 var(--ui);
  color:var(--bone-3); cursor:pointer;
  transition:color .15s, background .15s;
}
.segmented button + button{ border-left:1px solid var(--ink-line) }
.segmented button:hover{ color:var(--bone) }
.segmented button.on{ background:var(--pen); color:var(--ink) }

.toggles{ display:flex; gap:1.1rem; flex-wrap:wrap }
.tog{
  display:inline-flex; align-items:center; gap:.5rem;
  font:400 .8125rem/1 var(--ui);
  color:var(--bone-2); cursor:pointer; white-space:nowrap;
}
.tog input{
  appearance:none; margin:0;
  width:15px; height:15px; flex:none;
  border:1px solid var(--ink-line);
  border-radius:2px; background:var(--ink-raise);
  cursor:pointer; position:relative;
  transition:background .15s, border-color .15s;
}
.tog input:checked{ background:var(--pen); border-color:var(--pen) }
.tog input:checked::after{
  content:""; position:absolute; left:4px; top:1px;
  width:4px; height:8px;
  border:solid var(--ink); border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.tog:hover span{ color:var(--bone) }

.go{
  margin-left:auto;
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:.75rem;
  padding:.8rem 1.35rem;
  background:var(--bone); color:var(--ink);
  border:0; border-radius:2px;
  font:600 .9375rem/1 var(--ui);
  letter-spacing:-.005em;
  transition:background .15s, color .15s, transform .12s;
}
.go:hover{ background:#1E293B }
.go:active{ transform:translateY(1px) }
.go kbd{
  font:400 .75rem/1 var(--mono);
  color:rgba(248,250,252,.55);
  border:0; background:none; padding:0;
}
.go:disabled{ opacity:.4; cursor:default }
.go.busy{ background:var(--pen); color:#fff }
.go.busy kbd{ color:var(--bone-3) }

/* ─────────── ledger ─────────── */
.ledger{
  margin-top:2.5rem;
  border-top:1px solid var(--ink-line);
  padding-top:1.5rem;
}
.ledger-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:1.1rem;
}
.ledger-head h3{
  margin:0;
  font:400 .6875rem/1 var(--mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone);
}
.ledger-sum{
  margin:0; font:400 .8125rem/1 var(--mono);
  color:var(--bone-3);
}

.ledger-list{ list-style:none; margin:0; padding:0 }
.ledger-list li{
  display:grid;
  grid-template-columns:3.25rem minmax(0,15rem) minmax(0,1fr);
  gap:1.25rem; align-items:baseline;
  padding:.7rem 0;
  border-bottom:1px solid var(--ink-line-2);
  cursor:default;
  transition:background .15s;
}
.ledger-list li:hover{ background:rgba(220,38,38,.035) }
.lg-n{
  font:400 .8125rem/1.4 var(--mono);
  color:var(--pen-ink);
  font-variant-numeric:tabular-nums;
}
.lg-t{
  font:500 .9375rem/1.4 var(--ui);
  color:var(--bone);
  overflow-wrap:anywhere;
}
.lg-t em{ font-style:normal; color:var(--bone-2) }
.lg-w{
  font:400 .875rem/1.45 var(--ui);
  color:var(--bone-2);
}
.lg-cat{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font:400 .6875rem/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-3);
  margin-bottom:.35rem;
}
.lg-flag{
  letter-spacing:.1em;
  color:var(--pen-ink);
  border:1px dotted rgba(220,38,38,.45);
  border-radius:2px;
  padding:.18rem .34rem;
}
.ledger-list li.is-flag .lg-n{ color:var(--bone-3) }

/* ─────────── lexicon grid ─────────── */
.lex{
  padding:clamp(3.5rem,7vw,6rem) 0;
  border-top:1px solid var(--ink-line-2);
}
.lexgrid{
  margin:3rem 0 0; padding:0;
  display:grid; gap:0;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink-line);
}
.lexcell{
  padding:1.5rem 1.5rem 1.75rem;
  border-bottom:1px solid var(--ink-line);
  border-right:1px solid var(--ink-line);
  min-width:0;
}
.lexcell:nth-child(4n){ border-right:0 }
.lexcell dt{
  font:600 .9375rem/1.3 var(--ui);
  color:var(--bone); margin-bottom:.5rem;
}
.lexcell dd{ margin:0 }
.lexcell p{
  margin:0 0 .9rem;
  font-size:.875rem; line-height:1.55;
  color:var(--bone-2);
}
.chips{ display:flex; flex-wrap:wrap; gap:.35rem }
.chip{
  font:400 .75rem/1 var(--mono);
  color:var(--pen-ink);
  background:rgba(220,38,38,.07);
  padding:.34rem .5rem;
  border-radius:2px;
  overflow-wrap:anywhere;
}

/* ─────────── honest note ─────────── */
.note{
  padding:clamp(3.5rem,7vw,6rem) 0;
  border-top:1px solid var(--ink-line-2);
}
.note-in{
  display:grid; gap:2.5rem;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  align-items:start;
}
.note-h{
  margin:0;
  font:400 clamp(1.7rem,3.4vw,2.5rem)/1.08 var(--display);
  font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 1;
  letter-spacing:-.022em;
  max-width:14ch;
}
.note-body p{
  margin:0 0 1.05rem;
  color:var(--bone-2);
  font-size:1rem; line-height:1.68;
  max-width:62ch;
}
.note-body p:last-child{ margin-bottom:0 }
.note-body em{
  font-style:normal; color:var(--bone);
  border-bottom:1px solid var(--pen-wash-2);
}

/* ─────────── footer ─────────── */
.foot{
  padding:2rem 0 3rem;
  border-top:1px solid var(--ink-line-2);
}
.foot-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.foot p{
  margin:0; font:400 .75rem/1.4 var(--mono);
  color:var(--bone-3);
}

/* ─────────── responsive ─────────── */
@media (max-width:1080px){
  .lexgrid{ grid-template-columns:repeat(2,1fr) }
  .lexcell:nth-child(4n){ border-right:1px solid var(--ink-line) }
  .lexcell:nth-child(2n){ border-right:0 }
}

@media (max-width:900px){
  .panes{ grid-template-columns:1fr }
  .note-in{ grid-template-columns:1fr; gap:1.5rem }
  .note-h{ max-width:none }
  .go{ margin-left:0; width:100%; justify-content:center }
  .rail{ gap:1.25rem }
  .rail-group{ flex:1 1 100%; align-items:flex-start; flex-direction:column; gap:.7rem }
  .ledger-list li{ grid-template-columns:2.75rem 1fr; gap:.4rem 1rem }
  .lg-w{ grid-column:2 }
}

@media (max-width:620px){
  .wrap{ width:min(100% - 2rem, var(--shell)) }
  :root{ --ed-pad:1.1rem 1.1rem; --ed-font:1rem/1.75 var(--ui) }
  .lexgrid{ grid-template-columns:1fr }
  .lexcell{ border-right:0 !important }
  .hero-h{ letter-spacing:-.025em }
  .correction{ white-space:normal }
  .topbar-note{ display:none }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
  .struck{ background-size:100% .036em }
  .correction{ opacity:1; transform:rotate(-2.1deg) }
}