/* ═══ ANNOTATION · css/components.css ═══
   WHAT:   Every reusable piece of the instrument, one annotated block each (Lithic Aero).
           Order: stone recipe · carved text · slab · tile · pillar · crystal · gate socket ·
           frame · reading surface · gauge · badges & chips · buttons · forms · workbench ·
           examples · comparisons · inspector · blob sorter · home · library · dialog · toast ·
           rail · LoRA cards · fix toggle · generate card.
   STONE:  A stone thing is ONE element: class="stone" + a chamfer size (--c, or per corner
           --tl --tr --br --bl). Real bevelled corners come from `corner-shape: bevel`; browsers
           without it get the same silhouette from clip-path (their outer glow is clipped).
           The 45° bevel is drawn with inset shadows, which follow the bevelled outline.
           State never rewrites the shadow stack: it sets the slots --b1 --b2 --inner --ring --drop.
   TEXT:   Carved (.carved) is for short labels at 15 px+. Small text on stone uses --ink-stone.
           Paragraphs never sit on raised stone: they live on the reading surface (.reading).
   THEME:  Colours only come from tokens.css. Abyssal needs no extra rules here.
*/

/* ── Stone (raised) ──────────────────────────────────────────────────────── */
.stone {
  --tl: var(--c, var(--c-m)); --tr: var(--c, var(--c-m));
  --br: var(--c, var(--c-m)); --bl: var(--c, var(--c-m));
  position: relative;
  background:
    var(--grain),
    var(--pits-l, linear-gradient(transparent, transparent)),
    var(--mottle-layer),
    radial-gradient(120% 70% at 0% 100%, var(--seam-tint), transparent 38%),
    var(--sheen),
    linear-gradient(172deg, var(--stone) 0%, var(--stone-2) 100%);
  background-blend-mode: var(--grain-blend), normal, soft-light, normal, normal, normal;
  color: var(--ink-stone);
  border: 1px solid var(--edge);
  border-radius: 0;
  box-shadow:
    inset var(--bw) var(--bw) 0 var(--b1, var(--bevel-hi)),
    inset calc(var(--bw) * -1) calc(var(--bw) * -1) 0 var(--b2, var(--bevel-lo)),
    inset calc(var(--bw) + 2px) calc(var(--bw) + 2px) 0 oklch(from var(--b1, var(--bevel-hi)) l c h / .22),
    inset calc(var(--bw) * -1 - 2px) calc(var(--bw) * -1 - 2px) 0 oklch(from var(--b2, var(--bevel-lo)) l c h / .3),
    var(--inner, 0 0 #0000),
    var(--ring, 0 0 #0000),
    var(--drop, 0 10px 22px -8px oklch(0 0 0 / .7));
  clip-path: polygon(var(--tl) 0, calc(100% - var(--tr)) 0, 100% var(--tr), 100% calc(100% - var(--br)),
                     calc(100% - var(--br)) 100%, var(--bl) 100%, 0 calc(100% - var(--bl)), 0 var(--tl));
}
/* sunken stone: inverted bevel (troughs, sockets, inputs) */
.recess {
  --tl: var(--c, var(--c-s)); --tr: var(--c, var(--c-s));
  --br: var(--c, var(--c-s)); --bl: var(--c, var(--c-s));
  background: var(--grain), linear-gradient(180deg, var(--recess-2), var(--recess-1));
  background-blend-mode: var(--grain-blend), normal;
  border: 1px solid var(--edge);
  border-radius: 0;
  box-shadow:
    inset 3px 3px 0 var(--bevel-lo),
    inset -2px -2px 0 oklch(from var(--bevel-hi) l c h / .65),
    inset 5px 7px 10px oklch(0 0 0 / .5),
    var(--inner, 0 0 #0000),
    var(--ring, 0 0 #0000);
  clip-path: polygon(var(--tl) 0, calc(100% - var(--tr)) 0, 100% var(--tr), 100% calc(100% - var(--br)),
                     calc(100% - var(--br)) 100%, var(--bl) 100%, 0 calc(100% - var(--bl)), 0 var(--tl));
}
@supports (corner-shape: bevel) {
  .stone, .recess { clip-path: none; border-radius: var(--tl) var(--tr) var(--br) var(--bl); corner-shape: bevel; }
}
/* weathering chips only on big slabs, lower-right, never under text (Watchtower only) */
.frame, .dialog__frame { --pits-l: var(--pits) right 14px bottom 10px / 120px 44px no-repeat; }

/* ── Carved (debossed) lettering ─────────────────────────────────────────────
   Lit from the top-left: the groove's upper wall is in shadow (darker at the top of
   the fill) and only the lower lip catches light (one 1 px highlight below-right).
   Mana pours up into the groove on hover by animating --pour.
   drop-shadow (not text-shadow), because text-shadow paints over background-clip:text. */
.carved {
  font-family: var(--font-carved); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; line-height: 1.05;
  color: transparent;
  background:
    linear-gradient(to top, var(--mana-text) calc(var(--pour) - 10%), transparent var(--pour)),
    linear-gradient(to bottom, var(--carve-deep) 0%, var(--carve) 58%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(1px 1px 0 var(--carve-hi));
  transition: --pour .5s var(--ease-stone), filter .3s;
}
/* awake grooves: a tight dark rim + glow keeps light-filled letters legible on pale slate */
.carved.lit,
:is(.slab, .tile-item, .gate-socket, .btn-stone):is(:hover, :focus-visible, [aria-current="page"]) .carved {
  --pour: 110%;
  filter: drop-shadow(0 0 1px var(--carve-lo)) drop-shadow(0 0 1px var(--carve-lo)) drop-shadow(0 0 7px var(--glow));
}
@media (forced-colors: active) { .carved { color: CanvasText; background: none; filter: none; } }

/* ═══ ANNOTATION · .slab (stone step / action button) ═══
   WHAT:  In the slab column: one compact chamfered step per lesson; only the current step
          shows its subtitle. In lessons/home: big actions (.slab--wide / .hero__actions)
          use the pointed hex silhouette.
   STATE: hover → grooves fill with light; [aria-current] → pulled out + lit; :active → sinks 2 px. */
.slab {
  --c: var(--c-s); --tr: var(--c-xs); --bl: var(--c-xs);
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; width: 100%; padding: 8px 14px 8px 12px;
  text-decoration: none;
  transition: transform 150ms var(--ease-stone), translate 220ms var(--ease-stone), box-shadow 250ms;
}
.slab .carved { font-size: 1.12rem; letter-spacing: .06em; }
.slab__text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; min-width: 0; }
.slab__sub {
  display: none;
  font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.25;
  color: var(--ink-stone);
}
.slab[aria-current="page"] .slab__sub { display: block; }
.slab:is(:hover, :focus-visible) {
  --b1: oklch(from var(--bevel-hi) calc(l + .08) c h);
  --inner: inset 0 0 16px var(--glow-soft);
  --ring: 0 0 0 1px var(--glow), 0 0 22px var(--glow);
}
.slab[aria-current="page"] {
  translate: 8px 0;
  --inner: inset 0 0 18px var(--glow-soft);
  --ring: 0 0 0 1px var(--glow), 0 0 26px var(--glow);
}
.slab:active { transform: translateY(2px); --b1: var(--bevel-lo); --b2: var(--bevel-hi); --drop: 0 3px 6px -2px oklch(0 0 0 / .7); }
.slab .inlay { width: 14px; height: 20px; flex: none; color: color-mix(in srgb, var(--mana) 30%, var(--bevel-lo)); filter: none; }
.slab[data-done="true"] .inlay, .slab[aria-current="page"] .inlay { color: var(--mana); filter: drop-shadow(0 0 5px var(--mana)); }
.slab-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.slabs__title {
  margin: 4px 0 12px 4px; font-family: var(--font-carved); font-weight: 700; font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--read-text); text-shadow: 0 1px 2px oklch(0 0 0 / .9), 0 0 16px oklch(0 0 0 / .8);
}
@media (max-width: 1099px) {
  .slab-list .slab { min-width: max-content; }
  .slab[aria-current="page"] { translate: 0 0; }
  .slab[aria-current="page"] .slab__sub { display: none; }
}

/* big actions: pointed hex slabs */
.slab--small, .slab--wide, .hero__actions .slab {
  --cx: 18px;
  width: auto; justify-content: center; padding: 10px 34px; min-height: 52px;
  clip-path: polygon(var(--cx) 0, calc(100% - var(--cx)) 0, 100% 50%, calc(100% - var(--cx)) 100%, var(--cx) 100%, 0 50%);
}
@supports (corner-shape: bevel) {
  .slab--small, .slab--wide, .hero__actions .slab { clip-path: none; border-radius: var(--cx) / 50%; corner-shape: bevel; }
}
.slab--small .carved, .slab--wide .carved { font-size: 1.2rem; }
.slab--wide { padding-inline: 44px; }
.slab--small[aria-pressed="true"], .slab--wide[aria-pressed="true"] { --inner: inset 0 0 14px var(--glow-soft); }
.slab--small[aria-pressed="true"] .carved, .slab--wide[aria-pressed="true"] .carved { --pour: 110%; filter: drop-shadow(0 0 1px var(--carve-lo)) drop-shadow(0 0 7px var(--glow)); }

/* ═══ ANNOTATION · .tile (octagon icon button) ═══
   WHAT:  Rail tools and the phone menu: a raised octagon with a carved rune.
          In the pillar the same rune sits in a recessed octagon socket (see Pillar).
   A11Y:  Always has a visible label (.tile__label) or a tooltip + aria-label. */
.tile {
  --c: 29.3%;
  display: grid; place-items: center;
  width: 54px; height: 54px; padding: 0; color: var(--carve);
  border-radius: 0;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  transition: transform 120ms, box-shadow 250ms, color 250ms;
}
@supports (corner-shape: bevel) { .tile { clip-path: none; border-radius: 29.3%; corner-shape: bevel; } }
.tile svg { width: 24px; height: 24px; filter: drop-shadow(1px 1px 0 var(--carve-hi)); }
.tile:is(:hover, :focus-visible), .tile[aria-pressed="true"] {
  color: var(--mana-text);
  --b1: oklch(from var(--bevel-hi) calc(l + .08) c h);
  --inner: inset 0 0 14px var(--glow-soft);
  --ring: 0 0 0 1px var(--glow), 0 0 20px var(--glow);
}
.tile:is(:hover, :focus-visible) svg, .tile[aria-pressed="true"] svg { filter: drop-shadow(0 0 1px var(--carve-lo)) drop-shadow(0 0 6px var(--glow)); }
.tile:active { transform: translateY(2px); --b1: var(--bevel-lo); --b2: var(--bevel-hi); }

/* ═══ ANNOTATION · Pillar (left column) ═══
   WHAT:  A column of stacked stone blocks: a cap with the brand crystal, one block per
          area (a recessed rune socket + carved label), an empty shaft, and the plinth with
          the 18+ crystal socket. Seams are real block edges, so nothing straddles a joint.
   DATA:  Area blocks are the <li> items js/main.js writes into #pillar-tiles. */
.pillar__inner {
  display: flex; flex-direction: column; align-items: stretch;
  height: calc(100vh - 44px); min-height: 520px;
  filter: drop-shadow(0 12px 16px oklch(0 0 0 / .55));
}
.pillar__inner::before, .pillar__inner::after {   /* cap and plinth */
  content: ""; flex: none; height: 14px; margin-inline: -6px;
  background: var(--grain), linear-gradient(172deg, var(--bevel-hi), var(--stone) 60%, var(--stone-2));
  background-blend-mode: var(--grain-blend), normal;
  border: 1px solid var(--edge);
  box-shadow: inset 2px 2px 0 oklch(from var(--bevel-hi) l c h / .7), inset -2px -2px 0 var(--bevel-lo);
}
.pillar__inner::after { height: 18px; }
/* every block of the shaft is a stone */
.brand, .pillar__tiles > li, .pillar__spacer, .gate-socket {
  --bw: 3px; --drop: 0 0 #0000;
  background:
    var(--grain), var(--mottle-layer),
    radial-gradient(110% 50% at 0% 100%, var(--seam-tint), transparent 60%),
    var(--sheen),
    linear-gradient(90deg, var(--stone-2), var(--stone) 42%, var(--stone-2));
  background-blend-mode: var(--grain-blend), soft-light, normal, normal, normal;
  border: 1px solid var(--edge); border-top: 0;
  box-shadow: inset 3px 3px 0 oklch(from var(--bevel-hi) l c h / .55), inset -3px -3px 0 oklch(from var(--bevel-lo) l c h / .8);
}
.brand {
  display: grid; justify-items: center; gap: 6px; padding: 14px 4px 12px; text-decoration: none;
}
.brand .crystal { width: 30px; height: 42px; }
.brand__name { font-family: var(--font-carved); font-weight: 700; font-size: .82rem; letter-spacing: .14em; color: var(--ink-stone); text-align: center; line-height: 1.1; }
.pillar__tiles { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.pillar__tiles > li { position: relative; display: grid; place-items: center; padding: 10px 2px 9px; }
.tile-item { display: grid; justify-items: center; gap: 5px; text-decoration: none; width: 100%; }
/* in the pillar the tile is a recessed rune socket, not a raised button */
.pillar .tile {
  width: 46px; height: 46px; color: var(--carve);
  background: var(--grain), linear-gradient(180deg, var(--recess-2), var(--recess-1));
  background-blend-mode: var(--grain-blend), normal;
  box-shadow: inset 3px 3px 0 var(--bevel-lo), inset -2px -2px 0 oklch(from var(--bevel-hi) l c h / .55), inset 4px 6px 8px oklch(0 0 0 / .5);
}
:root[data-theme="watchtower"] .pillar .tile svg { color: oklch(0.82 0.01 80); filter: drop-shadow(-1px -1px 0 oklch(0 0 0 / .6)); }
.tile-item:is(:hover, :focus-visible) .tile, .tile-item[aria-current="page"] .tile {
  color: var(--mana-text);
  box-shadow: inset 3px 3px 0 var(--bevel-lo), inset -2px -2px 0 oklch(from var(--bevel-hi) l c h / .55), inset 0 0 14px var(--glow), 0 0 0 1px var(--glow);
}
.tile-item:is(:hover, :focus-visible) .tile svg, .tile-item[aria-current="page"] .tile svg { color: var(--mana-text); filter: drop-shadow(0 0 6px var(--glow)); }
.tile-item:focus-visible { outline: none; }
.tile-item:focus-visible .tile { outline: 3px solid var(--mana); outline-offset: 2px; }
.tile__label { font-family: var(--font-carved); font-weight: 700; font-size: .86rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-stone); }
.tile-item[aria-current="page"] .tile__label { color: var(--accent-stone); }
:root[data-theme="abyssal"] .tile-item[aria-current="page"] .tile__label { color: var(--mana-text); }
.pillar__spacer { flex: 1; min-height: 12px; position: relative; }   /* hosts a crack site (index.html) */
.pillar__tiles > li[data-mode="abyssal"] { --seam-tint: transparent; }

/* ═══ ANNOTATION · .crystal (faceted gem, colour from --mana) ═══
   One SVG symbol coloured by currentColor, so it re-colours itself with the theme. */
.crystal { color: var(--mana); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--mana) 70%, transparent)); }
.crystal--dim { color: color-mix(in srgb, var(--mana-2) 45%, var(--bevel-lo)); filter: none; }

/* ═══ ANNOTATION · Gate socket (18+ trigger, the plinth block of the pillar) ═══
   An ordinary button with a visible label: a violet crystal seated in an octagon socket.
   It glows faintly; it never pulses. */
.gate-socket {
  display: grid; justify-items: center; gap: 7px; padding: 14px 4px 12px; width: 100%;
  border-top: 1px solid var(--edge);
  text-align: center; color: var(--ink-stone);
}
.gate-socket .socket {
  display: grid; place-items: center; width: 50px; height: 50px;
  border: 1px solid var(--edge);
  background: var(--grain), linear-gradient(180deg, var(--recess-2), var(--recess-1));
  background-blend-mode: var(--grain-blend), normal;
  box-shadow: inset 3px 3px 0 var(--bevel-lo), inset -2px -2px 0 oklch(from var(--bevel-hi) l c h / .55), inset 4px 6px 8px oklch(0 0 0 / .5);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
}
@supports (corner-shape: bevel) { .gate-socket .socket { clip-path: none; border-radius: 29.3%; corner-shape: bevel; } }
.gate-socket .socket::before, .gate-socket .socket::after { display: none; }   /* .socket also carries .stone in the HTML */
.gate-socket .crystal { width: 22px; height: 30px; color: var(--socket-gem); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--socket-gem) 70%, transparent)); }
.gate-socket:is(:hover, :focus-visible) .socket { box-shadow: inset 3px 3px 0 var(--bevel-lo), inset 0 0 14px color-mix(in srgb, var(--socket-gem) 60%, transparent), 0 0 0 1px var(--socket-gem); }
.gate-socket:focus-visible { outline: 3px solid var(--mana); outline-offset: -4px; }
.gate-socket__label { font-family: var(--font-carved); font-weight: 700; font-size: .84rem; letter-spacing: .07em; line-height: 1.1; text-transform: uppercase; }

/* ═══ ANNOTATION · .frame (the main chamfered slab) ═══
   WHAT:  The big stone frame around every view. Head = carved title + breadcrumb.
          Body = one .reading surface (a trough cut into the slab). Foot = gauges.
   DECOR: Crack sites (smoke, moss / tentacles, ooze) sit on its outer edges (decor.css).
          They never overlap the reading surface. */
.frame { --c: var(--c-xl); --tr: var(--c-s); --bl: var(--c-s); --bw: 4px; padding: 20px 24px 20px; }
.frame__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; padding: 6px 8px 16px; }
.frame__title { font-size: clamp(1.7rem, 2.5vw, 2.45rem); line-height: 1; }
.crumbs { font-size: .92rem; font-weight: 700; color: var(--ink-stone); }
.crumbs a { color: inherit; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--accent-stone); }
.frame__foot { display: flex; flex-wrap: wrap; gap: 14px 28px; padding: 16px 8px 2px; align-items: center; }

@media (max-width: 719px) { .frame { --c: var(--c-m); --tr: var(--c-xs); --bl: var(--c-xs); padding: 10px 10px 12px; } .frame__head { padding: 6px 6px 12px; } }

/* ═══ ANNOTATION · .reading (the reading surface: a trough cut into the frame) ═══
   Flat, high-contrast, no texture: every lesson, prompt and table sits on one of these.
   The bevel is only at its rim; the floor stays a flat colour under the text. */
.reading {
  --tl: var(--c-s); --tr: var(--c-s); --br: var(--c-s); --bl: var(--c-s);
  position: relative;
  background: var(--read-bg); color: var(--read-text);
  border: 1px solid var(--edge);
  box-shadow: inset 3px 3px 0 var(--bevel-lo), inset -2px -2px 0 oklch(from var(--bevel-hi) l c h / .6), inset 6px 8px 14px oklch(0 0 0 / .35);
  clip-path: polygon(var(--tl) 0, calc(100% - var(--tr)) 0, 100% var(--tr), 100% calc(100% - var(--br)), calc(100% - var(--br)) 100%, var(--bl) 100%, 0 calc(100% - var(--bl)), 0 var(--tl));
  padding: clamp(16px, 3vw, 36px);
  min-height: 60vh;
}
@media (max-width: 719px) { .reading { padding: 18px 14px; } }
@supports (corner-shape: bevel) { .reading { clip-path: none; border-radius: var(--c-s); corner-shape: bevel; } }
.reading:focus { outline: none; }
.reading--inset { background: var(--read-bg-2); padding: 16px; min-height: 0; }

/* ═══ ANNOTATION · .gauge (a liquid vial in a stone trough) ═══
   Usage: <div class="gauge" style="--value: 40%"><span class="gauge__fill"></span></div>
   The gloss is Frutiger Aero's top-half highlight; the glint is a moving layer (compositor). */
.gauge-wrap { display: grid; gap: 7px; min-width: 220px; flex: 1; }
.gauge-wrap__label { display: flex; justify-content: space-between; font-family: var(--font-carved); font-weight: 700; letter-spacing: .1em; font-size: .98rem; color: var(--ink-stone); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.gauge {
  height: 24px; padding: 4px;
  border: 1px solid var(--edge);
  background: var(--grain), linear-gradient(180deg, var(--recess-2), var(--recess-1));
  background-blend-mode: var(--grain-blend), normal;
  box-shadow: inset 3px 3px 0 var(--bevel-lo), inset -2px -2px 0 oklch(from var(--bevel-hi) l c h / .6), inset 4px 6px 8px oklch(0 0 0 / .5);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
@supports (corner-shape: bevel) { .gauge { clip-path: none; border-radius: 8px; corner-shape: bevel; } }
.gauge__fill {
  position: relative; overflow: hidden;
  display: block; height: 100%; width: var(--value, 0%); min-width: 0;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  background:
    linear-gradient(180deg, oklch(1 0 0 / .78) 0, oklch(1 0 0 / .28) 42%, transparent 50%, oklch(0 0 0 / .12) 100%),
    linear-gradient(90deg, var(--mana-2), var(--mana));
  transition: width 700ms var(--ease-stone);
}
.gauge__fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, oklch(1 0 0 / .45) 50%, transparent 70%);
  transform: translateX(-120%); animation: glint 5s ease-in-out 1.5s infinite;
}
@keyframes glint { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ═══ ANNOTATION · Line badges and chips ═══
   .badge = Line Chunk number: a small hex of its line colour. Colour + number, never colour alone. */
.badge {
  display: inline-grid; place-items: center; min-width: 34px; height: 28px; padding: 0 9px;
  font-family: var(--font-carved); font-weight: 700; font-size: 1rem; letter-spacing: .04em;
  color: #10181c; background:
    linear-gradient(180deg, oklch(1 0 0 / .35), transparent 45%, oklch(0 0 0 / .12)),
    var(--line-color, var(--read-accent));
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
}
[data-line="1"] { --line-color: var(--line-1); } [data-line="2"] { --line-color: var(--line-2); }
[data-line="3"] { --line-color: var(--line-3); } [data-line="4"] { --line-color: var(--line-4); }
[data-line="5"] { --line-color: var(--line-5); } [data-line="6"] { --line-color: var(--line-6); }
[data-line="7"] { --line-color: var(--line-7); } [data-line="neg"] { --line-color: var(--line-neg); }
.badge-row { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; font-size: .82rem; font-weight: 700;
  border: 1px solid var(--read-line); color: var(--read-muted);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 5px 100%, 0 50%);
}
.pill--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.pill--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.pill--bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.not-recorded { display: inline-block; padding: 1px 8px; font-size: .8rem; font-weight: 700; color: var(--read-muted); border: 1px dashed var(--read-line); }

/* ═══ ANNOTATION · Buttons on reading surfaces ═══
   .btn = a small stone chip (copy, inspect, toggles): same material as the frame, so tools
   read as part of the instrument. .btn--accent = a lit chip for the one main action. */
.btn {
  --c: 7px; --tr: 3px; --bl: 3px; --bw: 2px; --drop: 0 4px 8px -4px oklch(0 0 0 / .7);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 6px 15px;
  font-weight: 700; font-size: .9rem; color: var(--ink-stone); text-decoration: none;
  position: relative;
  background:
    var(--grain),
    var(--sheen),
    linear-gradient(172deg, var(--stone) 0%, var(--stone-2) 100%);
  background-blend-mode: var(--grain-blend), normal, normal;
  border: 1px solid var(--edge);
  border-radius: 0;
  box-shadow:
    inset var(--bw) var(--bw) 0 var(--b1, var(--bevel-hi)),
    inset calc(var(--bw) * -1) calc(var(--bw) * -1) 0 var(--b2, var(--bevel-lo)),
    var(--inner, 0 0 #0000), var(--ring, 0 0 #0000), var(--drop);
  clip-path: polygon(var(--tl, 7px) 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 3px 100%, 0 calc(100% - 3px), 0 7px);
  transition: box-shadow 200ms, transform 120ms;
}
@supports (corner-shape: bevel) { .btn { clip-path: none; border-radius: 7px 3px 7px 3px; corner-shape: bevel; } }
a.btn { text-decoration: none; }
.btn:is(:hover, :focus-visible) { --inner: inset 0 0 12px var(--glow-soft); --ring: 0 0 0 1px var(--glow), 0 0 14px var(--glow-soft); }
.btn:active { transform: translateY(1px); --b1: var(--bevel-lo); --b2: var(--bevel-hi); }
.btn svg { width: 16px; height: 16px; }
.btn--accent {
  color: #0b1a1c;
  background:
    linear-gradient(180deg, oklch(1 0 0 / .45) 0, oklch(1 0 0 / .12) 45%, transparent 55%, oklch(0 0 0 / .1) 100%),
    var(--read-accent);
  --b1: oklch(1 0 0 / .55); --b2: oklch(0 0 0 / .3);
  --ring: 0 0 14px var(--glow-soft);
}
.btn--accent:is(:hover, :focus-visible) { --ring: 0 0 0 1px var(--read-accent), 0 0 22px var(--glow); }
.btn[data-copied="true"] { color: #0b1a1c; background: var(--ok); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.copy-in-pre { position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 4px 11px; font-size: .8rem; }
.prose a.btn { color: var(--ink-stone); text-decoration: none; }
.prose a.btn--accent, .prose a.btn--accent:hover { color: #0b1a1c; }

/* ═══ ANNOTATION · Form controls: troughs cut into the reading surface ═══ */
.field { display: grid; gap: 6px; }
.field__label { font-family: var(--font-carved); font-weight: 700; font-size: .92rem; letter-spacing: .1em; text-transform: uppercase; color: var(--read-muted); }
select.select, input.input, textarea.textarea {
  width: 100%; min-height: var(--touch); padding: 8px 12px;
  background: var(--read-bg-2); color: var(--read-text);
  border: 1px solid var(--edge); border-radius: 0;
  box-shadow: inset 2px 3px 0 oklch(0 0 0 / .35), inset -1px -1px 0 oklch(from var(--bevel-hi) l c h / .35), inset 3px 5px 8px oklch(0 0 0 / .3);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: border-color 200ms, box-shadow 200ms;
}
@supports (corner-shape: bevel) { select.select, input.input, textarea.textarea { clip-path: none; border-radius: 6px 0; corner-shape: bevel; } }
select.select {
  appearance: none; padding-right: 36px; cursor: pointer;
  background:
    linear-gradient(45deg, transparent 50%, var(--read-muted) 50%) calc(100% - 18px) 50% / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--read-muted) 50%) calc(100% - 12px) 50% / 6px 6px no-repeat,
    var(--read-bg-2);
}
select.select option { background: var(--read-bg-2); color: var(--read-text); }
:is(select.select, input.input, textarea.textarea):hover { border-color: color-mix(in srgb, var(--read-accent) 45%, var(--edge)); }
:is(select.select, input.input, textarea.textarea):focus-visible {
  outline: none; border-color: var(--read-accent);
  box-shadow: inset 2px 3px 0 oklch(0 0 0 / .35), inset 0 0 12px var(--glow-soft), 0 0 0 1px var(--read-accent), 0 0 16px var(--glow-soft);
}
textarea.textarea { font-family: var(--font-mono); font-size: .88rem; line-height: 1.55; resize: vertical; min-height: 64px; }

/* ═══ ANNOTATION · Inset panels (shared by workbench cards, comparisons, prompts) ═══
   A deeper groove in the reading surface: darker floor, rim bevel, small chamfer. */
.line-card, .wb-status, .compare, .needs, .gen-card, .prompt-box, .blob, .fix-panel, .lora-card {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

/* ═══ ANNOTATION · Workbench (7 line cards + negative + example panel) ═══ */
.workbench { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.85fr); gap: 24px; align-items: start; }
@media (max-width: 1280px) { .workbench { grid-template-columns: minmax(0, 1fr); } }
.wb-cards { display: grid; gap: 12px; }
.line-card {
  display: grid; gap: 8px; padding: 12px 16px 14px;
  background: var(--read-bg-2); border-left: 4px solid var(--line-color);
  box-shadow: inset 0 2px 6px oklch(0 0 0 / .3);
  transition: box-shadow 250ms;
}
.line-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.line-card__name { font-weight: 700; }
.line-card__purpose { font-size: .88rem; color: var(--read-muted); flex-basis: 100%; }
.line-card[data-diff="true"] { box-shadow: inset 0 0 0 1px var(--line-color), inset 0 0 22px color-mix(in srgb, var(--line-color) 22%, transparent); }
.line-card[data-diff="true"] .badge { filter: drop-shadow(0 0 6px var(--line-color)); }
.line-card__picker { margin-left: auto; min-width: 210px; flex: 1 1 210px; max-width: 320px; }
.line-card__flags { display: grid; gap: 4px; font-size: .86rem; }
.line-card__tags { font-family: var(--font-mono); font-size: .74rem; line-height: 1.45; color: var(--line-color); padding: 5px 9px; background: color-mix(in srgb, var(--line-color) 9%, var(--read-bg)); border: 1px solid color-mix(in srgb, var(--line-color) 35%, transparent); overflow-wrap: anywhere; }
.line-card__lock { font-size: .8rem; margin: 0; }
.flag { color: var(--warn); }
.flag a { color: inherit; }
.neg-divider { display: flex; align-items: center; gap: 12px; margin: 10px 0 2px; color: var(--read-muted); font-family: var(--font-carved); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.neg-divider::before, .neg-divider::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--read-line) 0 10px, transparent 10px 14px); }
.wb-panel { position: sticky; top: 16px; display: grid; gap: 12px; }
.wb-status { padding: 11px 14px; background: var(--read-bg-2); font-size: .92rem; border-left: 3px solid var(--read-accent); }
.wb-status strong { color: var(--read-accent); }
.wb-status--recorded { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--read-bg-2)); }
.wb-status--recorded strong { color: var(--ok); }
.wb-status--missing { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--read-bg-2)); }
.wb-status--missing strong { color: var(--bad); }
.wb-status .wb-status__closest { display: block; margin-top: 6px; color: var(--read-text); }

/* ═══ ANNOTATION · Example cards and placeholders ═══
   Every image sits in a thin stone window (5 px rim) so it reads as set into the slab. */
.example { display: grid; gap: 8px; margin: 0; min-width: 0; align-content: start; }
.example__frame {
  position: relative; display: block; width: 100%; padding: 5px; text-align: left;
  border: 1px solid var(--edge);
  background: var(--grain), linear-gradient(172deg, var(--stone), var(--stone-2));
  background-blend-mode: var(--grain-blend), normal;
  box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 6px 14px -6px oklch(0 0 0 / .7);
  clip-path: polygon(10px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 4px 100%, 0 calc(100% - 4px), 0 10px);
  transition: box-shadow 200ms;
}
@supports (corner-shape: bevel) { .example__frame { clip-path: none; border-radius: 10px 4px 10px 4px; corner-shape: bevel; } }
a.example__frame:is(:hover, :focus-visible) { box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), inset 0 0 0 5px var(--glow), 0 0 18px var(--glow-soft); outline: none; }
a.example__frame:focus-visible { outline: 3px solid var(--mana); outline-offset: 2px; }
.example__img {
  display: block; width: 100%; height: auto; background: #fff;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.example__frame[data-role="controlnet-input"] .example__img, .example__frame[data-role="img2img-source"] .example__img { outline: 3px dashed var(--mana-2); outline-offset: -3px; }
.example__role { position: absolute; left: 12px; top: 12px; padding: 2px 9px; font-size: .78rem; font-weight: 700; background: rgb(0 0 0 / .75); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.example__frame[data-role="official-art"] .example__role { display: none; }
.example figcaption { font-size: .9rem; color: var(--read-muted); }
.example__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.placeholder {
  display: grid; align-content: center; justify-items: center; gap: 8px; text-align: center;
  aspect-ratio: 3 / 4; padding: 18px;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--read-line) 45%, transparent) 14px 15px),
    var(--read-bg-2);
  border: 2px dashed var(--read-line);
  color: var(--read-muted);
  min-width: 0; overflow-wrap: anywhere;
}
.placeholder svg { width: 40px; height: 52px; opacity: .6; }
.example--shot .placeholder { aspect-ratio: 16 / 7; padding: 12px; width: 520px; max-width: 100%; }
.example--shot .example__img { clip-path: none; }
.placeholder__title { font-weight: 700; color: var(--read-text); }
.placeholder__planned { font-size: .85rem; max-width: 34ch; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 14px; }
.gallery--dense { grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap: 12px; }
.gallery--dense figcaption { font-size: .8rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.library__foot { display: flex; justify-content: center; margin-top: 22px; }

/* ═══ ANNOTATION · Thumbnails ═══
   Lesson images are compact thumbnails; a click opens them large in the zoom view
   (js/lightbox.js), which also links to the image's recipe. Left big on purpose: the
   workbench preview (.wb-panel), the before/after wipe (.ba) and the inspector's image.
     .example--plate   one {{example}}: the image beside its caption, buttons and fix panel
     .example--shot    a Forge screenshot: its own size, never upscaled, at most --shot-h tall
     .gallery / .side  ~150–190 px cards (2 across on a phone)
     .pick             a chooser or cube: the image sits beside its buttons when there's room */
[data-zoom] { cursor: zoom-in; }
.zoomable { position: relative; display: block; }
/* the lens chip: shows on hover / focus, always on touch screens (no hover to discover it) */
:is(.example__frame, .zoomable)[data-zoom]::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; pointer-events: none;
  background: oklch(0.16 0.01 230 / .78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6fbff' stroke-width='2.2'%3E%3Cpath d='M7.5 3H12.5L16.5 7V12L12.5 16H7.5L3.5 12V7Z M15 14.5L21 20.5 M10 6.5V12.5 M7 9.5H13'/%3E%3C/svg%3E") center / 18px no-repeat;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  opacity: 0; transform: scale(.85); transition: opacity 160ms, transform 160ms;
}
:is(.example__frame, .zoomable)[data-zoom]:is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
@media (hover: none) { :is(.example__frame, .zoomable)[data-zoom]::after { opacity: .9; transform: none; } }

.example--plate {
  --thumb: 240px;
  grid-template-columns: var(--thumb) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  column-gap: 18px; row-gap: 10px; max-width: 860px;
}
.example--plate > :is(.example__frame, .placeholder) { grid-column: 1; grid-row: 1 / 4; }
.example--plate > :not(.example__frame, .placeholder) { grid-column: 2; }
.example--plate > figcaption { font-size: .95rem; color: var(--read-text); }
.example--plate .fix-bubble { right: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 6px 10px; font-size: .8rem; }
/* a wide picture gets a wider plate; on phones it sits above its caption instead of beside it */
.example--plate[data-wide] { --thumb: min(440px, 55%); }
@media (max-width: 719px) {
  .example--plate[data-wide] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .example--plate[data-wide] > :is(.example__frame, .placeholder), .example--plate[data-wide] > :not(.example__frame, .placeholder) { grid-column: 1; grid-row: auto; }
}
@media (max-width: 719px) {
  .example--plate { --thumb: 42%; column-gap: 12px; grid-template-rows: auto 1fr auto; }
  .example--plate > :is(.example__frame, .placeholder) { grid-row: 1 / 3; }
  .example--plate > .fix-panel { grid-column: 1 / -1; grid-row: 3; }
  .example--plate .fix-bubble { left: 6px; right: 6px; bottom: 6px; max-width: none; padding: 4px 7px; font-size: .7rem; text-align: center; border-radius: 8px; }
}

.example--shot { --shot-h: 340px; width: fit-content; max-width: 100%; }
.example--shot .example__frame { width: fit-content; max-width: 100%; }
.example--shot .example__img { width: auto; max-width: 100%; max-height: var(--shot-h); }
@media (max-width: 719px) { .example--shot { --shot-h: 260px; } }

/* ═══ ANNOTATION · Comparisons (before-after, side-by-side, matrix, expression, style) ═══ */
.compare { margin: 1.6em 0; padding: 18px; background: var(--read-bg-2); display: grid; gap: 12px; max-width: none; box-shadow: inset 0 2px 8px oklch(0 0 0 / .3); }
@media (max-width: 719px) { .compare { padding: 12px; } }
.compare__title { font-family: var(--font-carved); font-weight: 700; font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase; color: var(--read-text); }
.compare__changed { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .88rem; color: var(--read-muted); }
.compare__also, .compare__footer { font-size: .85rem; color: var(--read-muted); }
.compare__also summary { cursor: pointer; font-weight: 700; }
.diffline { font-family: var(--font-mono); font-size: .82rem; line-height: 1.5; padding: 6px 9px; background: var(--read-bg); overflow-wrap: anywhere; }
.diffline del { color: var(--bad); text-decoration-thickness: 2px; }
.diffline ins { color: var(--ok); text-decoration: none; background: color-mix(in srgb, var(--ok) 14%, transparent); }
.ba {
  position: relative; max-width: 520px; width: 100%; margin: 0 auto; user-select: none;
  border: 5px solid; border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);   /* a stone window rim */
  outline: 1px solid var(--edge);
  background: var(--stone);
}
.ba__img { display: block; width: 100%; height: auto; background: #fff; }
.ba__top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); }
.ba__top .ba__img { height: 100%; object-fit: cover; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 3px; margin-left: -1.5px; background: var(--mana); box-shadow: 0 0 12px var(--mana); pointer-events: none; }
.ba__range { width: 100%; accent-color: var(--mana); min-height: var(--touch); }
.ba__labels { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 700; color: var(--read-muted); }
.side { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 14px; }
@media (max-width: 719px) { .side { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } }
.matrix-wrap { overflow-x: auto; }
.prose .matrix, .matrix { display: table; width: auto; border-collapse: separate; border-spacing: 10px; }
.prose .matrix td { width: 150px; }
.matrix th[scope="row"] { width: 120px; }
.prose .matrix th, .prose .matrix td { border: 0; padding: 0; min-width: 0; }
.matrix th { font-size: .9rem; color: var(--read-muted); font-family: var(--font-body); font-weight: 700; text-align: center; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.matrix td { vertical-align: top; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  min-height: 40px; padding: 6px 15px; font-weight: 700; font-size: .9rem;
  background: var(--read-bg); border: 1px solid var(--read-line); color: var(--read-text);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: background 150ms, color 150ms, box-shadow 150ms;
}
.choice:hover { border-color: var(--read-accent); background: color-mix(in srgb, var(--read-accent) 10%, var(--read-bg)); }
.choice[aria-pressed="true"], .choice[aria-selected="true"] {
  color: #0b1a1c; border-color: var(--read-accent);
  background: linear-gradient(180deg, oklch(1 0 0 / .4), oklch(1 0 0 / .1) 45%, transparent 55%), var(--read-accent);
}
.choice-stage { max-width: 420px; margin: 0 auto; width: 100%; }
/* chooser / cube: buttons and prompt on the left, the image they pick on the right */
.compare { container-type: inline-size; }
.pick { display: grid; gap: 12px; }
.pick > .choice-stage { max-width: 250px; }
@container (min-width: 620px) {
  .pick { grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: auto auto 1fr; column-gap: 24px; align-items: start; }
  .pick > .choice-stage { grid-column: 2; grid-row: 1 / 4; margin: 0; }
  .pick > :not(.choice-stage) { grid-column: 1; }
}

/* ═══ ANNOTATION · Tag map ({{tagmap:id}}, js/tagmap.js) ═══
   A transparent figure above its Line Chunk, laid out as chips in prompt order and tied to the
   body by leader lines. The active chip lights its spots (the rest of the figure dims) or, for a
   "whole" chip, outlines the whole figure in the chip's colour. Lines hide on narrow screens. */
.tagmap { position: relative; margin: 1.6em 0; padding: 16px 18px 14px; display: grid; gap: 12px; background: var(--read-bg-2); box-shadow: inset 0 2px 8px oklch(0 0 0 / .3); }
.tagmap__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-carved); font-weight: 700; font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase; color: var(--read-text); }
.tagmap__stage { position: relative; z-index: 1; width: 100%; background: radial-gradient(55% 75% at 45% 60%, var(--glow-soft), transparent 75%); }
.tagmap__pic { display: block; width: 100%; height: 100%; overflow: visible; }
.tagmap__base { transition: filter 260ms; }
.tagmap[data-active="spot"] .tagmap__base { filter: brightness(.38) saturate(.5); }
.tagmap[data-active="whole"] .tagmap__base { filter: drop-shadow(0 0 3px var(--active)) drop-shadow(0 0 12px var(--active)); }
.tagmap__lit { pointer-events: none; }
.tagmap__rings ellipse { fill: none; stroke: var(--c); stroke-width: 2.5; opacity: 0; vector-effect: non-scaling-stroke; pointer-events: none; transition: opacity 200ms; filter: drop-shadow(0 0 4px var(--c)); }
.tagmap__rings ellipse[data-on="true"] { opacity: .9; }
.tagmap__hits ellipse { fill: transparent; pointer-events: all; cursor: pointer; }
.tagmap__leads { position: absolute; left: 0; top: 0; z-index: 2; overflow: visible; pointer-events: none; }
.tagmap__leads path { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; opacity: .35; transition: opacity 200ms, stroke-width 200ms; }
.tagmap:is([data-active="spot"], [data-active="whole"]) .tagmap__leads path { opacity: .1; }
.tagmap .tagmap__leads path[data-on="true"] { opacity: 1; stroke-width: 3.5; filter: drop-shadow(0 0 4px var(--c)); }
.tagmap__chips { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.prose .tagmap__chips { padding: 0; }
.prose .tagmap__chips li + li { margin-top: 0; }
.tagmap__chip {
  --c: var(--read-accent);
  max-width: 32ch; min-height: 40px; padding: 7px 12px; text-align: left;
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.35; color: var(--read-text);
  background: color-mix(in oklch, var(--c) 18%, var(--read-bg));
  border: 2px solid color-mix(in oklch, var(--c) 70%, transparent);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background 160ms, color 160ms;
}
.tagmap__chip:hover { background: color-mix(in oklch, var(--c) 32%, var(--read-bg)); }
.tagmap__chip[data-on="true"] { color: #14110e; background: var(--c); border-color: var(--c); }
.tagmap__chip[aria-pressed="true"] { box-shadow: inset 0 -3px 0 oklch(0 0 0 / .35); }
.tagmap__chip:focus-visible { outline: 3px solid var(--mana); outline-offset: 2px; }
.tagmap__order { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; font-family: var(--font-carved); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--read-muted); }
.tagmap__arrow { position: relative; flex: 1; height: 3px; margin-right: 8px; opacity: .75;
  background: linear-gradient(90deg, oklch(0.76 0.13 25), oklch(0.76 0.13 75), oklch(0.76 0.13 140), oklch(0.76 0.13 200), oklch(0.76 0.13 255), oklch(0.76 0.13 305)); }
.tagmap__arrow::after { content: ""; position: absolute; right: -9px; top: 50%; translate: 0 -50%; border: 7px solid transparent; border-left: 10px solid oklch(0.76 0.13 305); border-right: 0; }
.tagmap__note { position: relative; z-index: 3; min-height: 2.9em; margin: 0; font-size: .95rem; color: var(--read-text); }
.prose .tagmap__note { max-width: none; }
.tagmap__note strong { color: var(--active); }
.tagmap__actions { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 719px) {
  .tagmap { padding: 12px; }
  .tagmap__leads { display: none; }
  .tagmap__chip { font-size: .74rem; padding: 6px 9px; max-width: 100%; }
}

/* ═══ ANNOTATION · Inspector (metadata + copy controls) ═══ */
.inspector { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .inspector { grid-template-columns: minmax(0, 1fr); } }
.inspector__img { position: sticky; top: 16px; }
.original-file { margin-top: 18px; font-size: .78rem; color: var(--read-muted); }
.original-file > summary { cursor: pointer; width: fit-content; }
.original-file__download { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; margin-top: 6px; padding: 4px 0; border: 0; background: transparent; color: var(--read-muted); font: inherit; cursor: pointer; }
.original-file__download svg { width: 14px; height: 14px; }
.original-file__download:hover { color: var(--read-accent); text-decoration: underline; }
.original-file__download:focus-visible, .original-file > summary:focus-visible { outline: 2px solid var(--mana); outline-offset: 4px; }
.original-file__download:disabled { cursor: wait; opacity: .6; }
.original-file .dialog { font-size: 1rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--read-line); padding-bottom: 8px; }
.tabpanel { padding-top: 14px; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 16px; font-size: .92rem; }
.kv dt { color: var(--read-muted); font-weight: 700; }
.kv dd { font-family: var(--font-mono); font-size: .86rem; overflow-wrap: anywhere; }
.needs { padding: 12px 16px; background: var(--read-bg-2); display: grid; gap: 6px; font-size: .92rem; box-shadow: inset 0 2px 6px oklch(0 0 0 / .3); }
.needs h3 { font-size: 1rem; }
.needs ul { margin: 0; padding-left: 1.2em; }
.copy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.prompt-box { font-family: var(--font-mono); font-size: .85rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 16px; background: var(--read-bg-2); max-height: 420px; overflow: auto; box-shadow: inset 0 2px 6px oklch(0 0 0 / .3); }
.prompt-box .pl { display: block; padding-left: 46px; position: relative; }
.prompt-box .pl .badge { position: absolute; left: 0; top: 1px; min-width: 34px; height: 22px; font-size: .85rem; }
.prompt-box .pl + .pl { margin-top: 4px; }
.prompt-box .pl[data-line] { color: var(--line-color); }
.adtab { border: 1px solid var(--read-line); padding: 8px 12px; }
.adtab + .adtab { margin-top: 8px; }
.adtab summary { cursor: pointer; font-weight: 700; }

/* ═══ ANNOTATION · Blob sorter ═══ */
.blob { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; background: var(--read-bg-2); font-family: var(--font-mono); font-size: .82rem; box-shadow: inset 0 2px 6px oklch(0 0 0 / .3); }
.tag { padding: 3px 9px; border: 1px solid var(--read-line); background: var(--read-bg); color: var(--read-text); font-family: var(--font-mono); font-size: .82rem;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
button.tag:hover { border-color: var(--read-accent); }
.tag[data-state="hit"] { background: color-mix(in srgb, var(--ok) 25%, var(--read-bg)); border-color: var(--ok); }
.tag[data-state="miss"] { background: color-mix(in srgb, var(--bad) 22%, var(--read-bg)); border-color: var(--bad); }
.tag[data-state="reveal"] { outline: 2px dashed var(--warn); outline-offset: -2px; }
.tag[data-line] { color: var(--line-color); border-color: color-mix(in srgb, var(--line-color) 55%, transparent); background: color-mix(in srgb, var(--line-color) 12%, var(--read-bg)); }
.sorted { display: grid; gap: 8px; }
.sorted__row { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 0 6px 12px; border-left: 3px solid var(--line-color, var(--read-line)); }
.sorted__label { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.sorted__name { font-weight: 700; font-size: .9rem; line-height: 1.15; color: var(--line-color, var(--read-muted)); }
.sorted__tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
@media (max-width: 560px) { .sorted__row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.lc[data-line] { color: var(--line-color); }
.chunks-block { position: relative; margin: 1.2em 0; }
.chunks-block .prompt-box { max-height: none; }
.counter { font-weight: 700; color: var(--read-accent); font-variant-numeric: tabular-nums; }

/* ═══ ANNOTATION · Home ═══
   A carved tablet for the headline, the three big actions, and the 7 Line Chunks at a glance.
   The step list is not repeated here: the slab column already shows the journey. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: start; }
.hero__tablet { --c: var(--c-l); --tr: var(--c-xs); --bl: var(--c-xs); --bw: 4px; padding: 26px 32px 28px; max-width: 100%; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: .98; letter-spacing: .03em; margin: 0; }
.hero h1 .carved { display: block; padding: .03em 0; }
.hero .lead { max-width: 62ch; font-size: 1.18rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__actions .slab { min-height: 64px; padding: 10px 40px; }
.hero__actions .slab .slab__sub { display: block; }
.hero__actions .slab .slab__text { align-items: center; text-align: center; }
.hero__actions .slab .carved { font-size: 1.35rem; }
.hero__actions .slab:first-child { --inner: inset 0 0 14px var(--glow-soft); --ring: 0 0 18px var(--glow-soft); }
.hero__actions .slab:first-child .carved { --pour: 110%; filter: drop-shadow(0 0 1px var(--carve-lo)) drop-shadow(0 0 1px var(--carve-lo)) drop-shadow(0 0 7px var(--glow)); }
.chunk-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; width: 100%; max-width: 980px; }
.chunk-strip li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 10px 12px;
  background: var(--read-bg-2); border-left: 3px solid var(--line-color);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  box-shadow: inset 0 2px 6px oklch(0 0 0 / .3);
}
.chunk-strip strong { color: var(--line-color); line-height: 1.15; }
.chunk-strip small { grid-column: 1 / -1; color: var(--read-muted); font-size: .85rem; line-height: 1.35; }
/* older home list (kept for any page that still uses it) */
.stage-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 760px; }
.stage-list a { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 10px 12px; background: var(--read-bg-2); text-decoration: none; color: var(--read-text); }
.stage-list .num { font-family: var(--font-carved); font-weight: 700; font-size: 1.4rem; color: var(--read-accent); text-align: center; }
.stage-list small { display: block; color: var(--read-muted); }

/* ═══ ANNOTATION · Library filters ═══ */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 18px; }
.filters .field { min-width: 180px; flex: 1; }

/* ═══ ANNOTATION · Dialog (native <dialog>): a stone slab with a reading trough ═══ */
.dialog {
  max-width: min(580px, calc(100vw - 32px)); width: 100%; padding: 0; border: 0; color: var(--read-text);
  background: transparent; overflow: visible;
}
.dialog::backdrop { background: rgb(4 6 10 / .72); backdrop-filter: blur(3px); }
.dialog__frame { --c: var(--c-l); --tr: var(--c-xs); --bl: var(--c-xs); --bw: 4px; padding: 18px; --drop: 0 24px 50px -10px oklch(0 0 0 / .8); }
.dialog__body {
  background: var(--read-bg); padding: 24px; display: grid; gap: 14px;
  border: 1px solid var(--edge);
  box-shadow: inset 3px 3px 0 var(--bevel-lo), inset -2px -2px 0 oklch(from var(--bevel-hi) l c h / .6), inset 6px 8px 14px oklch(0 0 0 / .35);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.dialog__title { font-family: var(--font-carved); font-weight: 700; font-size: 1.85rem; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; }
.dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.dialog__close { position: absolute; top: 6px; right: 6px; }
@media (max-width: 719px) { .dialog { max-width: 100vw; margin: auto 0 0; } }

/* ═══ ANNOTATION · Zoom view (js/lightbox.js): a stone frame around a dark viewing trough ═══ */
.lightbox {
  width: min(1320px, calc(100vw - 32px)); height: calc(100dvh - 32px); max-width: none; max-height: none;
  margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--read-text);
}
.lightbox[open] { animation: lightbox-in 220ms var(--ease-stone); }
.lightbox::backdrop { background: rgb(4 6 10 / .84); backdrop-filter: blur(4px); }
@keyframes lightbox-in { from { opacity: 0; transform: scale(.97); } }
.lightbox__frame {
  --c: var(--c-l); --tr: var(--c-xs); --bl: var(--c-xs); --bw: 4px; --drop: 0 24px 50px -10px oklch(0 0 0 / .8);
  position: relative; height: 100%; padding: 12px;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px;
}
.lightbox__view {
  --c: var(--c-s);
  display: flex; min-height: 0; overflow: hidden; outline: none;
  background: var(--grain), linear-gradient(180deg, oklch(from var(--recess-2) calc(l - .07) c h), oklch(from var(--recess-1) calc(l - .07) c h));
  background-blend-mode: var(--grain-blend), normal;
  overscroll-behavior: contain; touch-action: pinch-zoom; cursor: zoom-out;
}
.lightbox__img {
  flex: none; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%;
  cursor: zoom-in; user-select: none; -webkit-user-drag: none;
  box-shadow: 0 10px 30px -10px oklch(0 0 0 / .8);
  transition: opacity 150ms;
}
.lightbox.is-loading .lightbox__img { opacity: .35; }
.lightbox.is-zoomed .lightbox__view { overflow: auto; cursor: grab; touch-action: pan-x pan-y pinch-zoom; }
.lightbox.is-zoomed .lightbox__img { max-width: none; max-height: none; cursor: inherit; }
.lightbox.is-dragging .lightbox__view { cursor: grabbing; }
.lightbox__bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 0 4px 2px; touch-action: pinch-zoom;
}
.lightbox__steps, .lightbox__actions { display: flex; gap: 8px; align-items: center; }
.lightbox .btn svg { flex: none; }
.lightbox__step { min-width: 44px; padding-inline: 10px; }
.lightbox__step:disabled { opacity: .45; cursor: default; --ring: 0 0 #0000; --inner: 0 0 #0000; }
.lightbox__text { min-width: 0; display: grid; gap: 1px; color: var(--ink-stone); }
.lightbox__cap { margin: 0; font-weight: 700; font-size: .95rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lightbox__count { font-size: .8rem; font-weight: 700; letter-spacing: .06em; opacity: .75; }
.lightbox__close { position: absolute; top: 20px; right: 20px; z-index: 1; min-width: 44px; min-height: 44px; padding: 0; }
@media (max-width: 719px) {
  .lightbox { width: 100vw; height: 100dvh; }
  .lightbox__frame { padding: 8px; gap: 8px; --c: var(--c-m); }
  .lightbox__bar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "text text" "steps actions"; row-gap: 8px; }
  .lightbox__text { grid-area: text; }
  .lightbox__steps { grid-area: steps; }
  .lightbox__actions { grid-area: actions; justify-content: end; }
  .lightbox__opt { display: none; }
  .lightbox__close { top: 14px; right: 14px; }
}

/* ═══ ANNOTATION · Toast: a small chiselled plaque ═══ */
.toast-stack { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; width: min(520px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  pointer-events: auto; padding: 13px 18px; color: var(--read-text); font-weight: 700;
  background: var(--grain), linear-gradient(180deg, var(--recess-1), var(--recess-2));
  background-blend-mode: var(--grain-blend), normal;
  border: 1px solid var(--glow); border-left: 4px solid var(--mana);
  box-shadow: 0 0 18px var(--glow-soft), 0 10px 30px rgb(0 0 0 / .5);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  animation: toast-in 220ms var(--ease-stone);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ═══ ANNOTATION · Rail (utility tools) ═══ */
.rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.rail .tile { width: 52px; height: 52px; }
.rail .tile svg { width: 22px; height: 22px; }
.return-sfw { display: none; }
:root[data-theme="abyssal"] .return-sfw { display: grid; place-items: center; }
.topbar .tile { width: 44px; height: 44px; }
@media (max-width: 719px) { .rail .tile { width: 44px; height: 44px; } .rail .tile svg { width: 20px; height: 20px; } }

/* ═══ ANNOTATION · "This one came out wrong!?" Fix Toggle ═══ */
.btn--fix { color: #2a1d00; background: linear-gradient(180deg, oklch(1 0 0 / .35), transparent 50%), var(--warn); --b1: oklch(1 0 0 / .5); --b2: oklch(0 0 0 / .3); }
.btn--fix[data-fixed="true"] { background: linear-gradient(180deg, oklch(1 0 0 / .35), transparent 50%), var(--ok); }
.fix-panel { display: grid; gap: 8px; padding: 10px 14px; background: var(--read-bg-2); border-left: 4px solid var(--warn); font-size: .86rem; }
.fix-panel[data-fixed="true"] { border-left-color: var(--ok); }
.fix-panel__title { font-weight: 700; color: var(--read-text); }
.fix-bubble {
  position: absolute; right: 12px; bottom: 12px; max-width: min(78%, 34ch); margin: 0;
  padding: 8px 12px; border-radius: 14px 14px 2px 14px;
  background: #c62828; color: #fff; font-weight: 700; font-size: .92rem; line-height: 1.3;
  box-shadow: 0 4px 14px rgb(0 0 0 / .35);
}
.fix-bubble[data-fixed="true"] { background: #2e7d32; }

/* ═══ ANNOTATION · LoRA cards ({{loras:…}}) ═══ */
.lora-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 1.2em 0; }
.lora-card { display: grid; grid-template-rows: auto 1fr; background: var(--read-bg-2); border: 1px solid var(--read-line); overflow: hidden; box-shadow: inset 0 2px 6px oklch(0 0 0 / .3); }
.lora-card__thumb { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; display: block; background: #000; border-bottom: 3px solid var(--edge); }
.lora-card__body { display: grid; gap: 6px; align-content: start; padding: 10px 12px 12px; font-size: .88rem; }
.lora-card__name { font-size: .98rem; line-height: 1.2; }
.lora-card__file { font-size: .78rem; overflow-wrap: anywhere; color: var(--read-muted); }
.lora-card__description { color: var(--read-muted); }
.lora-card__trigger code { font-size: .8rem; }
.lora-card__link { justify-self: start; min-height: 34px; font-size: .85rem; margin-top: 4px; }

/* ═══ ANNOTATION · "Generate this yourself" card (composable workbench) ═══ */
.gen-card { display: grid; gap: 10px; padding: 14px 16px; background: var(--read-bg-2); border-left: 3px dashed color-mix(in srgb, var(--read-accent) 70%, transparent); box-shadow: inset 0 2px 6px oklch(0 0 0 / .3); }
.gen-card__title { font-family: var(--font-carved); font-weight: 700; font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; color: var(--read-accent); margin: 0; }
.gen-card p { margin: 0; }
.gen-card .prompt-box { max-height: none; }
.gen-card__ad summary { cursor: pointer; font-weight: 700; }
.gen-card__ad[open] { display: grid; gap: 8px; }
.gen-card__ad pre.prompt-box { margin: 0; }

/* ═══ ANNOTATION · Roadmap (lesson front matter "layout: roadmap", js/main.js roadmapLayout) ═══
   Each ## section is a milestone on a carved trail: a lit gem for "you are here", hollow gems
   for what's ahead. Planned items read as plain text; they turn into links once published. */
.roadmap { position: relative; display: grid; gap: 1.8em; margin-top: 1.6em; padding-left: 34px; max-width: calc(var(--measure) + 34px); }
.roadmap::before {
  content: ""; position: absolute; left: 10px; top: .9em; bottom: .6em; width: 3px;
  background: linear-gradient(var(--mana), var(--mana) 3em, var(--read-line) 7em);
  box-shadow: inset 0 1px 2px oklch(0 0 0 / .5);
}
.milestone > * + * { margin-top: .9em; }
.milestone > :is(p, ul, ol, blockquote, aside) { max-width: var(--measure); }
.prose .milestone > h2 { position: relative; margin-top: 0; }
.prose .milestone > h2::before {
  position: absolute; left: -29.5px; top: 50%; translate: 0 -50%; width: 14px; height: 14px;
  background: var(--read-bg); border: 2px solid var(--read-muted); box-shadow: none;
}
.prose .milestone[data-here] > h2::before {
  border: 0; background: linear-gradient(135deg, var(--mana-text), var(--mana) 55%, oklch(from var(--mana) calc(l - .25) c h));
  box-shadow: 0 0 10px var(--glow); animation: here-glow 2.4s ease-in-out infinite;
}
@keyframes here-glow { 50% { box-shadow: 0 0 20px var(--glow), 0 0 4px var(--mana-text); } }
.prose .roadmap .later-link { color: inherit; }

/* ═══ ANNOTATION · 18+ additions on everyday pages ({{abyssal:<id>}}) ═══
   Only present while the 18+ expansion is open; Return to SFW removes them. */
.abyssal-insert {
  padding: 12px 16px 14px 18px;
  background: color-mix(in srgb, var(--mana) 8%, var(--read-bg-2));
  border-left: 3px solid var(--mana);
  box-shadow: inset 0 2px 6px oklch(0 0 0 / .3);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.abyssal-insert__label {
  display: flex; align-items: center; gap: 8px; margin: 0 0 .45em;
  font-family: var(--font-carved); font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; color: var(--mana-text);
}
.abyssal-insert__chip {
  padding: 1px 8px; font-family: var(--font-body); font-size: .74rem; letter-spacing: 0; color: var(--edge); background: var(--mana);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 50%, calc(100% - 4px) 100%, 4px 100%, 0 50%);
}
.prose > .abyssal-insert { max-width: var(--measure); }
.prose .abyssal-insert__body > :first-child { margin-top: 0; }
.prose .abyssal-insert__body ul { padding-left: 1.2em; }

/* the one-line "work in progress" note on the home page */
.wip-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--read-muted); }