/* The Jester's Journal - research loop.
   The house style is ploolet's, rule for rule: paper, ink, eight crayons,
   one monospace, brackets and dotted rules instead of cards and shadows. */
:root {
  --paper: oklch(100% 0 0);
  --ink: oklch(12% 0 0);
  --muted: oklch(45% 0 0);
  --border: oklch(12% 0 0 / .22);
  --secondary: oklch(96% 0 0);
  --destructive: oklch(50% .19 27);
  --font-mono: ui-monospace, "Courier New", monospace;
  --crayon-red: #d94f3d;
  --crayon-orange: #e8952c;
  --crayon-yellow: #d9b21f;
  --crayon-green: #5aa64b;
  --crayon-blue: #2f7fbf;
  --crayon-violet: #6b4fa8;
  --crayon-pink: #c85fa0;
  --crayon-brown: #8a5a35;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--paper); color: var(--ink); margin: 0; }
body { font-family: var(--font-mono); font-size: 13px; line-height: 1.55; -webkit-text-size-adjust: 100%; }
a { color: var(--ink); text-underline-offset: 2px; text-decoration: underline; }
a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }
p { margin: 0; }
pre { margin: 0; font-family: var(--font-mono); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.frame { max-width: 640px; margin: 0 auto; padding: 26px 18px 80px; }
.frame.wide { max-width: 980px; }
.cr.c0 { color: var(--crayon-red); } .cr.c1 { color: var(--crayon-orange); }
.cr.c2 { color: var(--crayon-yellow); } .cr.c3 { color: var(--crayon-green); }
.cr.c4 { color: var(--crayon-blue); } .cr.c5 { color: var(--crayon-violet); }
.cr.c6 { color: var(--crayon-pink); } .cr.c7 { color: var(--crayon-brown); }

/* the glyph row: one glyph per finished run (haiku ▲ sonnet ◆ opus ★), newest on the right */
.glyphrain { white-space: nowrap; color: var(--muted); letter-spacing: .35em; border-bottom: 1px solid var(--border);
  user-select: none; padding: 3px 0 4px; font-size: 11px; overflow: hidden; direction: rtl; text-align: left; }
.glyphrain span { direction: ltr; unicode-bidi: isolate; }
.glyphrain a { text-decoration: none; }
.glyphrain a:hover { background: none; color: inherit; outline: 1px solid var(--ink); }
.glyphrain .pass { color: var(--crayon-green); } .glyphrain .fail { color: var(--crayon-red); }
.glyphrain .live { color: var(--muted); opacity: .45; }
.ticker { white-space: nowrap; border-bottom: 1px solid var(--border); padding: 4px 0; font-size: 11px; overflow: hidden; }
.ticker span { padding-left: 100%; animation: 26s linear infinite slide; display: inline-block; }
@keyframes slide { 0% { transform: translate(0); } to { transform: translate(-100%); } }
.counter { text-align: center; padding: 6px 0 0; font-size: 11px; display: block; }
.counter b { letter-spacing: .18em; font-weight: 400; }

.masthead { text-align: center; padding: 22px 0 10px; }
.masthead .mark { font-family: var(--font-mono); letter-spacing: .02em; font-size: 27px; font-weight: 700; text-decoration: none; display: block; line-height: 1.2; }
.masthead .mark:hover { color: var(--ink); background: 0 0; }
.masthead .sub { color: var(--crayon-blue); margin-top: 12px; font-size: 15px; font-style: italic; font-weight: 700; line-height: 1.35; }
.masthead .lede { max-width: 46ch; margin: 12px auto 0; font-size: 12px; }
.masthead .seed { color: var(--crayon-brown); margin-top: 12px; font-size: 11px; }

.dennav { border-bottom: 1px solid var(--border); flex-wrap: wrap; justify-content: center; gap: 2px 10px; padding: 10px 0 16px; font-size: 11.5px; display: flex; }
.dennav a { text-decoration: none; }
.dennav a::before { content: "[ "; } .dennav a::after { content: " ]"; }
.dennav a:hover { color: var(--crayon-red); background: none; }
.dennav a:nth-child(2):hover { color: var(--crayon-orange); } .dennav a:nth-child(3):hover { color: var(--crayon-green); }
.dennav a:nth-child(4):hover { color: var(--crayon-blue); } .dennav a:nth-child(5):hover { color: var(--crayon-violet); }
.dennav a:nth-child(6):hover { color: var(--crayon-pink); } .dennav a:nth-child(7):hover { color: var(--crayon-brown); }
.dennav a.on { background: var(--crayon-blue); color: var(--paper); }
@media (max-width: 520px) { .dennav a { padding: 8px 0; } }

.box { margin: 26px 0 0; }
.boxhead, .h { justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px; font-size: 17px; font-weight: 700; display: flex; }
.boxhead { color: var(--crayon-blue); }
.boxhead span, .h span { color: var(--crayon-brown); font-size: 11px; font-weight: 400; }
.h { color: var(--crayon-violet); border-bottom: 3px solid color-mix(in oklab, var(--crayon-violet) 45%, transparent); padding-bottom: 3px; }
p, .lede, .thought { max-width: 68ch; }
.faint, .tiny { color: var(--muted); }
.tiny { font-size: 11px; }
.rule, hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.k { color: var(--crayon-brown); }
.big { font-size: 15px; }
.mono-quote { border-left: 2px solid var(--crayon-violet); color: var(--muted); padding-left: 10px; }

.asciicreature { width: fit-content; max-width: 100%; font-family: var(--font-mono); letter-spacing: .02em; white-space: pre; color: var(--ink);
  text-align: left; margin: 14px auto 8px; font-size: clamp(5.2px, 1.45vw, 9px); line-height: 1.02; display: block; overflow: hidden; }
.asciicreature.room { font-size: clamp(5px, 1.15vw, 11px); }
.asciicreature .j { color: var(--crayon-violet); } .asciicreature .d { color: var(--crayon-red); }
.asciicreature .s { color: var(--crayon-green); } .asciicreature .w { color: var(--crayon-orange); }
.asciicreature .e { color: var(--muted); }
.stage { text-align: center; text-decoration: none; display: block; }
.stage:hover { color: var(--ink); background: 0 0; }
.stage .label { color: var(--crayon-red); letter-spacing: .06em; font-size: 11.5px; text-decoration: underline; display: block; font-weight: 700; }
.stage .hint { color: var(--muted); font-size: 11px; display: block; }

.logrow { gap: 12px; padding: 7px 0; display: flex; }
.logrow + .logrow { border-top: 1px dotted var(--border); }
.logrow b { color: var(--muted); font-weight: 400; }
.post { border-top: 1px dotted var(--border); padding: 9px 0; }
.post:first-child { border-top: 0; }
.posthead { justify-content: space-between; gap: 12px; display: flex; flex-wrap: wrap; }
.posthead b { font-weight: 700; }
.post .body { white-space: pre-wrap; margin-top: 4px; }
.kind { color: var(--crayon-orange); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
.badge, .demotag { border: 1px solid var(--crayon-brown); color: var(--crayon-brown); margin: 2px 3px 2px 0; padding: 0 5px; font-size: 10.5px; display: inline-block; }
.badge.red { color: var(--destructive); border-color: var(--destructive); }
.badge.green { color: var(--crayon-green); border-color: var(--crayon-green); }
.btn, .pill { border: 1px solid var(--crayon-blue); color: var(--crayon-blue); padding: 1px 8px; font-size: 11.5px; text-decoration: none; display: inline-block; }
.btn:hover, .pill:hover { background: var(--crayon-blue); color: var(--paper); }
.asciibox { color: var(--ink); white-space: pre; padding: 12px 0; font-size: 10.5px; line-height: 1.15; overflow-x: auto; }
.livedot { background: var(--crayon-red); vertical-align: 1px; width: 5px; height: 5px; margin-right: 5px; animation: 1.2s step-end infinite blinkdot; display: inline-block; }
@keyframes blinkdot { 0%, 49% { opacity: 1; } 50%, to { opacity: 0; } }
.blink { animation: 1.1s step-end infinite blinkdot; }
.facts { flex-wrap: wrap; gap: 4px 24px; margin-top: 10px; display: flex; }
.facts div { display: flex; gap: 8px; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; }
.bar { font-family: var(--font-mono); letter-spacing: 0; }
.bar .fill { color: var(--crayon-green); } .bar .rest { color: var(--border); }

/* ledgers: monospace rows, dotted rules */
.ledger { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ledger th { text-align: left; font-weight: 400; color: var(--muted); border-bottom: 1px solid var(--border); padding: 3px 6px 3px 0; white-space: nowrap; }
.ledger td { border-top: 1px dotted var(--border); padding: 5px 6px 5px 0; vertical-align: top; }
.ledger tr.click { cursor: pointer; }
.ledger tr.click:hover td { background: var(--secondary); }
.ledger .num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger .ok { color: var(--crayon-green); } .ledger .no { color: var(--crayon-red); }
.scrollx { overflow-x: auto; }
@media (max-width: 520px) { .ledger .hide-sm { display: none; } }

/* the room page */
.roomgrid { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
@media (max-width: 820px) { .roomgrid { grid-template-columns: 1fr; } }
.term { border: 1px solid var(--ink); padding: 8px 10px; font-size: 11.5px; }
.term .lines { margin-top: 8px; border-top: 1px dotted var(--border); padding-top: 6px; max-height: 360px; overflow: hidden; }
.term .lines div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term .lines .in { color: var(--ink); } .term .lines .out { color: color-mix(in oklab, var(--crayon-blue) 55%, var(--muted)); }

/* the map */
.mapwrap { border: 1px solid var(--ink); cursor: grab; touch-action: none; background: var(--paper); height: min(60vh, 460px); position: relative; overflow: hidden; }
.mapwrap.big { height: min(72vh, 640px); }
.mapwrap:active { cursor: grabbing; }
.maplayer { transform-origin: 0 0; position: absolute; top: 0; left: 0; }
.mapedges { color: var(--ink); pointer-events: none; position: absolute; top: -1000px; left: -1000px; overflow: visible; }
.edgelabel { fill: var(--muted); font-size: 8px; font-family: var(--font-mono); }
.mapedges .draw { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.mapnode { text-align: center; flex-direction: column; align-items: center; gap: 1px; width: 118px; text-decoration: none; display: flex; position: absolute; transform: translate(-50%, -50%); cursor: pointer; }
.mapnode:hover { color: var(--ink); background: 0 0; text-decoration: none; }
.mapnode-glyph { color: var(--crayon, var(--ink)); filter: drop-shadow(0 0 .4px var(--crayon, var(--ink))); line-height: 0; }
.mapnode:hover .mapnode-glyph { filter: drop-shadow(0 0 1.2px var(--crayon, var(--ink))); }
.mapnode-name { box-shadow: inset 0 -3px 0 color-mix(in oklab, var(--crayon, var(--ink)) 34%, transparent); font-size: 9px; }
.mapnode:hover .mapnode-name { box-shadow: inset 0 -6px 0 color-mix(in oklab, var(--crayon, var(--ink)) 55%, transparent); }
.mapnode-gen { color: var(--crayon-brown); font-size: 8.5px; }
.mapnode.rejected { opacity: .55; } .mapnode.rejected .glyph path, .mapnode.rejected .glyph circle { stroke-dasharray: 3 3; }
.mapnode.pruned { opacity: .55; } .mapnode.pruned .mapnode-name { text-decoration: line-through; }
.mapnode.ghost { opacity: .18; pointer-events: none; }
.mapnode .here { color: var(--crayon-violet); font-weight: 700; font-size: 12px; }
.mapnode.door .mapnode-glyph { color: var(--crayon-red); }
.mapnode.door.open .mapnode-glyph { color: var(--crayon-green); }
.mapfoot { background: color-mix(in oklab, var(--paper) 90%, transparent); justify-content: space-between; gap: 12px; padding: 4px 10px; display: flex; position: absolute; bottom: 0; left: 0; right: 0; font-size: 11px; }
.mapzoom { gap: 8px; display: flex; }
.mapzoom button { min-width: 28px; min-height: 28px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11px; margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.drawer { border: 1px solid var(--ink); padding: 10px 12px; margin-top: 12px; }
.drawer pre { font-size: 10.5px; line-height: 1.35; overflow-x: auto; border-left: 2px solid var(--crayon-violet); padding-left: 10px; margin-top: 8px; }

.framefoot { border-top: 1px solid var(--border); color: var(--muted); text-align: center; margin-top: 34px; padding: 12px 0 0; font-size: 11px; }
.sealed { border: 1px solid var(--crayon-red); color: var(--crayon-red); padding: 6px 10px; margin-top: 14px; font-size: 11.5px; }
.sealed b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .ticker span { animation: none; padding-left: 0; }
  .livedot, .blink { animation: none; }
  .mapedges .draw { animation: none; stroke-dashoffset: 0; }
}
.masthead p { margin-left: auto; margin-right: auto; }
p.h, p.boxhead, p.framefoot { max-width: none; }
.cabar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; padding: 0 0 8px; border-bottom: 1px solid var(--border); font-size: 11.5px; }
.cabar .kind { color: var(--crayon-orange); }
.cabar .ca { font-family: var(--font-mono); word-break: break-all; letter-spacing: .5px; }
.cabar .btn { min-height: 28px; cursor: pointer; }
.post.loose { border-left: 3px solid var(--crayon-pink); padding-left: 10px; margin: 6px 0; border-top: 0; }
.post.loose .kind { color: var(--crayon-pink); }
.post.loose .scrawl { font-size: 14px; font-style: italic; margin-top: 4px; white-space: pre-wrap; }
.post.loose.art { border-left-color: var(--crayon-violet); } .post.loose.art .kind { color: var(--crayon-violet); } .post.loose.art .asciibox { font-size: 11px; line-height: 1.2; }
body.nohero .stage { display: none; }
.post.loose.long { border-left-color: var(--crayon-green); } .post.loose.long .kind { color: var(--crayon-green); } .post.loose.long .asciibox { white-space: pre-wrap; font-size: 12px; line-height: 1.45; }