/* stavan.ai: a README, typed in JetBrains Mono and marked up in my handwriting.
   Ink means who wrote it: red = my corrections, blue = my asides, pencil = my agents (live). */

@font-face { font-family: "JetBrains Mono"; src: url(/fonts/JetBrainsMono-latin.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Stavan"; src: url(/fonts/Stavan-Regular.woff2) format("woff2"); font-display: block; }

:root {
  --paper: #ffffff;
  --type: #000000;
  --dim: #3d3d3d;      /* secondary typed text */
  --syntax: #a3a8ae;   /* markdown syntax, decorative only */
  --rule: #e4e7eb;
  --red: #d10000;      /* GoodNotes red */
  --blue: #0062c4;     /* GoodNotes blue, darkened to read on white */
  --pencil: #636363;   /* GoodNotes grey */
  --ok: #1a7f37;
  --select: #ffe9a8;
  color-scheme: light;
  --measure: 64ch;
  --margin: 270px;
  --gap: 34px;
}

/* dark paper: chosen with the toggle, or following the system when there's no choice saved */
:root[data-theme="dark"] {
  --paper: #111214;
  --type: #e9e7e4;
  --dim: #a6a6a6;
  --syntax: #5d646d;
  --rule: #2b2e33;
  --red: #ff6363;      /* the same red pen, brighter so it reads on dark paper */
  --blue: #6aafff;
  --pencil: #a3a7ab;
  --ok: #56c46f;
  --select: #4d4116;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111214;
    --type: #e9e7e4;
    --dim: #a6a6a6;
    --syntax: #5d646d;
    --rule: #2b2e33;
    --red: #ff6363;      /* the same red pen, brighter so it reads on dark paper */
    --blue: #6aafff;
    --pencil: #a3a7ab;
    --ok: #56c46f;
    --select: #4d4116;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--type); font: 400 16px/1.65 "JetBrains Mono", ui-monospace, Menlo, monospace; font-variant-ligatures: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--select); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--type); color: var(--paper); padding: 6px 10px; z-index: 2; }
.skip:focus { left: 8px; }
.syn { color: var(--syntax); }
b { font-weight: 700; }

.page { max-width: calc(var(--measure) + var(--gap) + var(--margin) + 64px); margin: 0 auto; padding: 28px 32px 72px; }
.readme { max-width: var(--measure); position: relative; }

/* top bar: the file path, and the two ways to read it */
.bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; margin-bottom: 40px; }
.path { color: var(--syntax); }
.view { display: inline-flex; gap: 2px; visibility: hidden; }
.js .view { visibility: visible; }
.view button, .bar button { font: inherit; border: 0; background: none; color: var(--dim); padding: 4px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.view button[aria-pressed="true"] { background: var(--type); color: var(--paper); }
.bar-right { display: inline-flex; align-items: center; gap: 10px; }
.bar .theme-toggle, .leak .bar .theme-toggle { font: inherit; font-size: 13px; border: 0; border-radius: 4px; background: none; color: var(--dim); padding: 4px 10px; min-height: 0; cursor: pointer; }
.bar .theme-toggle:hover { color: var(--type); }
.bar .theme-toggle[aria-pressed="true"] { background: var(--type); color: var(--paper); }

h1 { font: 700 30px/1.2 "JetBrains Mono", monospace; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font: 700 16px/1.65 "JetBrains Mono", monospace; margin: 44px 0 10px; scroll-margin-top: 24px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 2.6ch; margin: 0 0 36px; }
p { margin: 0 0 14px; }
ul { list-style: none; padding: 0; margin: 0; }
li { padding-left: 2ch; text-indent: -2ch; margin: 0 0 6px; }
li .note { text-indent: 0; }

/* ---------- handwriting ---------- */
.hand, .note { font-family: "Stavan", cursive; font-weight: 400; letter-spacing: 0; font-variant-ligatures: normal; }
.red { color: var(--red); } .blue { color: var(--blue); } .pencil { color: var(--pencil); }
.anchor { position: relative; }
.note { position: absolute; left: calc(100% + var(--gap)); top: 2px; width: var(--margin); font-size: 19.5px; line-height: 1.1; text-indent: 0; }
.item > .note { top: 13px; }

/* the red pen: a strike, a caret, and the words that replace them */
del { text-decoration: none; position: relative; white-space: nowrap; color: var(--type); }
del::after {
  content: ""; position: absolute; left: -2px; right: -3px; top: 52%; height: 8px; margin-top: -4px; pointer-events: none;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6.4 C 20 4.4, 38 6.8, 55 5.2 S 86 4.1, 99 5.2' fill='none' stroke='%23d10000' stroke-width='1.9' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 50% / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6.4 C 20 4.4, 38 6.8, 55 5.2 S 86 4.1, 99 5.2' fill='none' stroke='%23d10000' stroke-width='1.9' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 50% / 100% 100%;
}
ins { text-decoration: none; }
.fix { position: relative; }
.fix ins { position: absolute; left: -2px; bottom: 84%; white-space: nowrap; font-size: 22px; line-height: 1; }
.lead { font-size: 17px; line-height: 1.6; margin: 0 0 22px; }
.lead.has-fix { padding-top: 26px; }
/* any line with a small correction makes room above it for my handwriting */
p.has-fix, li.has-fix { padding-top: 20px; }
h2.has-fix { padding-top: 22px; margin-top: 30px; }
.desc.has-fix { padding-top: 21px; }
.fix ins svg { display: block; overflow: visible; margin-bottom: -5px; }

/* a small correction being written: the strike draws, then the pen writes */
.fix.inking del::after { clip-path: inset(0 100% 0 0); animation: strike .3s ease-out .05s forwards; }
.fix.inking ins:not(.drawn) { color: transparent; }
.caret { color: var(--red); font-weight: 700; margin-left: 1px; }
.hero-ins { display: block; margin: 6px 0 4px 10ch; font-size: 25px; line-height: 1.5; min-height: 2.1em; }
.hero-ins svg { display: block; overflow: visible; max-width: 100%; height: auto; }

/* first visit: the strike draws, then the pen writes (app.js adds .pen-live) */
.pen-live .hero-del::after { clip-path: inset(0 100% 0 0); animation: strike .35s ease-out .25s forwards; }
.pen-live .caret { opacity: 0; animation: show .01s linear .55s forwards; }
.pen-live .hero-ins:not(.drawn) { color: transparent; }
@keyframes strike { to { clip-path: inset(0 0 0 0); } }
@keyframes show { to { opacity: 1; } }
@keyframes show-ins { from { opacity: 0; } to { opacity: 1; } }

/* ---------- work ---------- */
.item { border-top: 1px solid var(--rule); }
.item:last-of-type { border-bottom: 1px solid var(--rule); }
summary { list-style: none; cursor: pointer; padding: 12px 0; display: grid; grid-template-columns: 2ch 1fr; }
summary::-webkit-details-marker { display: none; }
.tw { color: var(--syntax); }
.tw::before { content: "+"; }
details[open] > summary .tw::before { content: "\2212"; }
.desc { display: block; color: var(--dim); }
.case { padding: 0 0 18px 2ch; font-size: 14.5px; line-height: 1.65; }
.case p { margin: 0 0 12px; }
.item-links { display: flex; flex-wrap: wrap; gap: 4px 2.4ch; }

.trace-wrap { margin: 0 0 14px; }
.trace-wrap > summary { display: inline-block; padding: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.trace-wrap[open] > summary { margin-bottom: 10px; }
.trace-intro { color: var(--type); }
.trace { border-left: 2px solid var(--rule); padding-left: 14px; margin: 0 0 14px; font-size: 13.5px; }
.trace p { margin: 0 0 10px; }
.who { color: var(--dim); }
.machine-del { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 1.5px; color: var(--dim); }
.verdict.no { color: var(--red); }
.verdict.ok { color: var(--ok); }
.trace .note { left: calc(100% + var(--gap) + 2ch + 16px); }

.how p { margin: 0; }

/* ---------- live notes from my agents ---------- */
.live { line-height: 1.12; font-size: 18.5px; top: 6px; }
.live .count { font-variant-numeric: tabular-nums; }
.live .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin: 0 7px 2px 0; vertical-align: middle; }
.live .dot.off { background: var(--syntax); }
.live .dot.on { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .25; } }
.stops { display: block; margin-top: 8px; }
.greet { top: -4px; }
h1.anchor .greet { font-size: 21px; }
.greet svg, .stops svg { display: block; overflow: visible; }
.tally { position: relative; display: inline-block; margin-right: 9px; letter-spacing: -1px; white-space: nowrap; }
.tally i { position: absolute; left: -3px; top: -1px; font-style: normal; transform: scaleX(1.9) rotate(4deg); transform-origin: left center; }
.tally .new, .tally i.new { animation: tally-in .6s ease-out both; }
@keyframes tally-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-4px -4px -4px -4px); } }
.live-typed { color: var(--dim); margin: -2px 0 10px; }

.foot { margin-top: 64px; max-width: var(--measure); font-size: 13px; color: var(--dim); }
.foot p { margin: 0 0 6px; }
code { font: inherit; }

/* ---------- clean copy: the same words, no ink ---------- */
.keep { display: none; }
.clean .keep { display: block; color: var(--dim); margin-top: 6px; }
.clean .verdict { color: inherit; }
.clean .machine-del { text-decoration-color: currentColor; }
.clean del, .clean .caret, .clean .note { display: none; }
.clean ins, .clean .fix ins, .clean .hero-ins { position: static; display: inline; font: inherit; color: inherit; margin: 0; min-height: 0; cursor: auto; white-space: normal; }
.clean .hero-ins svg, .clean ins svg { display: none; }
.clean ins .sr-only { position: static; width: auto; height: auto; clip: auto; white-space: normal; }
.clean .has-fix { padding-top: 0; }
.clean h2.has-fix { margin-top: 44px; }
.clean .hero-ins .sr-only { position: static; width: auto; height: auto; clip: auto; white-space: normal; }
.clean .lead.has-fix { padding-top: 0; }
.clean .live-typed:not(:empty) { display: block; }
.marked .live-typed { display: none; }

/* ---------- narrower screens: notes move under what they annotate ---------- */
@media (max-width: 1010px) {
  .page { max-width: calc(var(--measure) + 64px); }
  .note { position: static; display: block; width: auto; margin: 4px 0 10px 2ch; font-size: 19px; }
  .live { margin: 0 0 22px; }
  .item > .note { margin: -6px 0 12px 2ch; }
  .trace .note { margin-left: 0; }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  .page { padding: 18px 18px 56px; }
  .path { display: none; }
  .bar { justify-content: flex-end; margin-bottom: 28px; }
  h1 { font-size: 26px; }
  .lead { font-size: 16px; }
  del { white-space: normal; text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
  del::after { display: none; }
  .fix ins { position: static; display: inline; white-space: normal; margin: 0 0 0 .6ch; font-size: 21px; line-height: 1; }
  .fix.inking ins.drawn { animation: show-ins .5s ease-out both; }
  .has-fix, p.has-fix, li.has-fix, .desc.has-fix, h2.has-fix { padding-top: 0; }
  .lead.has-fix { padding-top: 0; }
  .hero-ins { margin-left: 0; font-size: 25px; }
  .case { padding-left: 0; }
}

@media (min-width: 1240px) {
  body { font-size: 17px; }
  .lead { font-size: 18px; }
  .case { font-size: 15px; }
  .trace { font-size: 14px; }
  :root { --margin: 286px; }
  .note { font-size: 20.5px; }
  .live { font-size: 19.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; }
}

/* ---------- print: the clean copy, one page ---------- */
@media print {
  @page { margin: 14mm 16mm; }
  body { font-size: 9pt; line-height: 1.42; }
  h1 { font-size: 18pt; }
  .bar, .skip, .note, .live, .live-typed, del, .caret, .trace-wrap, .case, .week, .foot, .no-print, .tw { display: none !important; }
  summary { display: block; padding: 4px 0; }
  .desc { color: #000; }
  :root, :root[data-theme="dark"] { --paper: #fff; --type: #000; --dim: #3d3d3d; --red: #d10000; --blue: #0062c4; --pencil: #636363; color-scheme: light; }
  .theme-toggle { display: none !important; }
  .item, .item:last-of-type { border: 0; }
  .lead { font-size: inherit; margin-bottom: 8px; }
  .links { margin-bottom: 14px; }
  ins, .fix ins, .hero-ins { position: static !important; display: inline !important; font: inherit !important; color: inherit !important; margin: 0 !important; }
  .hero-ins svg, ins svg { display: none !important; }
  ins .sr-only { position: static !important; width: auto !important; height: auto !important; clip: auto !important; }
  .has-fix { padding-top: 0 !important; }
  .hero-ins .sr-only { position: static; width: auto; height: auto; clip: auto; }
  .lead.has-fix { padding-top: 0; }
  details > .case { display: block; }
  .page { padding: 0; max-width: none; }
  .readme { max-width: none; }
  h2 { margin: 12px 0 4px; break-after: avoid; }
  li { margin-bottom: 3px; }
  .resume li { margin-bottom: 4px; }
  .resume p { margin-bottom: 6px; }
  .print-only { display: inline !important; margin-left: 2.6ch; }
}
.print-only { display: none; }

/* ---------- résumé page ---------- */
.resume .bar a { font-size: 13px; }
.resume h2 { margin-top: 26px; }
.resume li { margin-bottom: 8px; }

.signature { margin: 22px 0 0; }
.signature svg { display: block; }
@media print { .signature { margin-top: 10px; } .signature svg { height: 26px; width: auto; } }

/* ---------- small pages: corrections, logbook, your handwriting ---------- */
.bar a.path { color: var(--syntax); text-decoration: none; }
.bar a.path:hover { color: var(--type); }
.fine { font-size: 13px; color: var(--dim); margin-top: 28px; }

.errata { list-style: none; padding: 0; margin: 36px 0 0; }
.errata li { padding: 30px 0 14px; text-indent: 0; border-top: 1px solid var(--rule); margin: 0; }
.errata .when { display: block; color: var(--dim); font-size: 13px; margin: -12px 0 18px; }
.errata .why { color: var(--dim); }

.logbook-page .page, .yours-page .page { max-width: 1040px; }
.logbook-page .readme { max-width: none; }
.day { margin: 30px 0 34px; }
.day figcaption { font-size: 13px; color: var(--dim); margin-bottom: 8px; }
.day svg { display: block; width: 100%; height: auto; max-width: 760px; }
.log-wrap { overflow-x: auto; }
.log { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13px; }
.log th { text-align: left; font-weight: 700; padding: 8px 10px 8px 0; border-bottom: 2px solid var(--type); white-space: nowrap; }
.log td { padding: 6px 10px 2px 0; border-bottom: 1px solid var(--rule); vertical-align: bottom; height: 40px; }
.log td.num svg, .log td.crew svg, .log td.date svg { display: block; }
.log tfoot td { border-top: 2px solid var(--type); border-bottom: 0; color: var(--dim); }
.log .empty { color: var(--dim); }

.drop { display: block; border: 1.5px dashed var(--syntax); border-radius: 6px; padding: 34px 20px; text-align: center; cursor: pointer; margin: 26px 0; color: var(--dim); }
.drop:hover, .drop.over { border-color: var(--blue); color: var(--type); }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop:focus-within { outline: 2px solid var(--blue); outline-offset: 3px; }
.yours-out { margin: 34px 0 0; }
.yours-out .hero-ins { min-height: 2.4em; }
.actions { display: flex; gap: 10px; margin-top: 24px; }
.actions button { font: inherit; font-size: 13px; border: 1px solid var(--type); background: var(--paper); color: var(--type); padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.actions button:hover { background: var(--type); color: var(--paper); }