/* GENERATED from src/render/loop.css — do not hand-edit. */
/* loop.css — the ONE shared stylesheet for *.tend2.html pages.
   Design language: tend — warm paper, editorial serif masthead, mono labels,
   single clay accent, three-tone palette, borders on large elements only. */

/* Webfonts. Every family below also has a local fallback stack, so a page opened
   offline or from file:// still renders — it just renders in the fallback. */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&family=IBM+Plex+Mono:wght@400;600;700&family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&display=swap');

:root {
  --serif: 'Golos Text', ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans:  'Mona Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --bg:            #fbfafa;
  --bg-2:          #f5f3f0;
  --surface:       #ffffff;
  --text:          #3a3a3a;
  --text-2:        #5a5a56;
  --text-muted:    #6e6e6a;  /* ≥4.5:1 on --bg, --bg-2, and --surface (AA) */
  --border:        #e6e3dd;
  --border-strong: #c8c5be;
  --heading:       #1a1a18;
  --accent:        #D97757;
  --accent-d:      #bf4E33;  /* link colour — AA on --bg (4.6) and --surface (4.8); 4.4 on --bg-2, 4.2 on --accent-weak */
  --accent-weak:   #fbeee5;

  /* check / state colours */
  --ok:      #2d6b25;  --ok-bg:      #eefaec;  --ok-bd:      #b0d4b0;
  --fail:    #a03030;  --fail-bg:    #fdeeee;  --fail-bd:    #eec3c3;
  --human:   #7a5200;  --human-bg:   #fff8e8;  --human-bd:   #f0d88a;
  --open:    #6a6a66;  --open-bg:    #f0efeb;  --open-bd:    #d8d5cf;
  --claimed: #9a4a00;  --claimed-bg: #fff3e6;  --claimed-bd: #f0c898;

  /* method chips */
  --m-code:  #1a3a8a;  --m-code-bg:  #e8f0fe;  --m-code-bd:  #c3d2ee;
  --m-agent: #5a1a8a;  --m-agent-bg: #f3eafe;  --m-agent-bd: #d9c3ee;
  --m-human: #7a4400;  --m-human-bg: #fff3e0;  --m-human-bd: #eed3a3;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --radius-sm: 3px; --radius: 6px; --radius-lg: 10px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.06);
  --maxw: 1240px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #100f0e;
    --bg-2:          #191816;
    --surface:       #201f1c;
    --text:          #d8d6d2;
    --text-2:        #aeaca6;
    --text-muted:    #8d8b85;  /* ≥4.5:1 on the dark surface, not just the page bg (AA) */
    --border:        #2c2b28;
    --border-strong: #46443f;
    --heading:       #f2f0ec;
    --accent:        #E0866B;
    --accent-d:      #D97757;
    --accent-weak:   #2a1d17;

    --ok:      #7cc874;  --ok-bg:      #182a16;  --ok-bd:      #2d5228;
    --fail:    #e07a7a;  --fail-bg:    #2a1414;  --fail-bd:    #5a2828;
    --human:   #d4a850;  --human-bg:   #262012;  --human-bd:   #5a4420;
    --open:    #8a8880;  --open-bg:    #1e1d1a;  --open-bd:    #3a3833;
    --claimed: #e09a50;  --claimed-bg: #291b0e;  --claimed-bd: #6a4620;

    --m-code:  #8aaee8;  --m-code-bg:  #16203a;  --m-code-bd:  #2a3a5a;
    --m-agent: #c48ae8;  --m-agent-bg: #241333;  --m-agent-bd: #4a2a6a;
    --m-human: #d4a850;  --m-human-bg: #261d0e;  --m-human-bd: #5a4420;

    --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  }
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-d); text-decoration: none; }
a:hover { text-decoration: underline; }

/* inline code — one rule for every prose surface (lede, narrative, claims, tried).
   Sized in em so it tracks whatever text it sits in. */
code {
  font-family: var(--mono); font-size: .86em;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1px 5px;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* ── mono label (small caps convention everywhere) ── */
.lp-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── top bar ── */
.lp-top {
  position: sticky; top: 0; z-index: 30;
  height: 42px;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-6);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 13px;
}
.lp-top__project { color: var(--heading); font-weight: 700; letter-spacing: .02em; }
.lp-top__sep { color: var(--border-strong); }
.lp-top__page { color: var(--text-2); }
.lp-top__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }

/* ── hero band ── */
.lp-hero { border-bottom: 1px solid var(--border); background: var(--bg); }
.lp-hero__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--sp-12) var(--sp-6) var(--sp-10);
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-16); align-items: start;
}
.lp-kicker { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.lp-kicker .lp-label { color: var(--accent-d); }
.lp-kicker__dot { color: var(--border-strong); }
.lp-hero__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.06;
  letter-spacing: -0.015em; color: var(--heading);
  margin: 0 0 var(--sp-5, 20px);
  text-wrap: balance;
}
.lp-hero__goal {
  font-family: var(--serif); font-size: 19px; line-height: 1.62;
  color: var(--text-2); max-width: 620px; margin: var(--sp-4) 0 var(--sp-6);
}
.lp-hero__goal strong { color: var(--heading); font-weight: 600; }
.lp-hero__goal em { color: var(--accent-d); font-style: italic; }
.lp-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lp-chip {
  font-family: var(--mono); font-size: 11.5px;
  padding: 3px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2);
}
a.lp-chip:hover { border-color: var(--accent); color: var(--accent-d); text-decoration: none; }

/* ── proof card (hero, right) ── */
.lp-proof {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--sp-6);
}
.lp-proof .lp-label { display: block; margin-bottom: var(--sp-3); }
.lp-proof__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.lp-proof__nums { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
.lp-proof__nums b { color: var(--heading); font-size: 15px; }
.lp-bar { display: flex; gap: 3px; margin: var(--sp-2) 0 var(--sp-4); }
.lp-bar__seg { height: 12px; flex: 1; border-radius: 2px; background: var(--open-bg); border: 1px solid var(--open-bd); }
.lp-bar__seg--pass    { background: var(--ok);      border-color: var(--ok); }
.lp-bar__seg--fail    { background: var(--fail);    border-color: var(--fail); }
.lp-bar__seg--human   { background: var(--human-bd); border-color: var(--human); }
.lp-bar__seg--claimed { background: var(--claimed-bd); border-color: var(--claimed); }
.lp-proof__foot { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); line-height: 1.7; }
.lp-proof__foot .warn { color: var(--claimed); }
.lp-proof__foot .needs { color: var(--human); }

/* ── state pill ── */
.lp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--radius-sm); border: 1px solid;
}
.lp-pill--done    { color: var(--ok);    background: var(--ok-bg);    border-color: var(--ok-bd); }
.lp-pill--open    { color: var(--open);  background: var(--open-bg);  border-color: var(--open-bd); }
.lp-pill--needs-you { color: var(--human); background: var(--human-bg); border-color: var(--human-bd); }
.lp-pill--failing { color: var(--fail);  background: var(--fail-bg);  border-color: var(--fail-bd); }
.lp-pill--desc    { color: var(--text-2); background: var(--bg-2);    border-color: var(--border); }

/* ── content band ── */
.lp-band { background: var(--bg-2); min-height: 60vh; }
.lp-band__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-16);
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 296px;
  gap: var(--sp-12);
  align-items: start;
}

/* ── toc ── */
.lp-toc { position: sticky; top: 66px; }
.lp-toc .lp-label { display: block; margin-bottom: var(--sp-3); }
.lp-toc ul { list-style: none; margin: 0; padding: 0; }
.lp-toc li { margin: 0 0 var(--sp-2); }
.lp-toc a {
  display: block; font-size: 13px; line-height: 1.45; color: var(--text-2);
  padding-left: var(--sp-3); border-left: 2px solid transparent;
}
.lp-toc a:hover { color: var(--accent-d); border-left-color: var(--accent); text-decoration: none; }

/* ── article ── */
.lp-article { min-width: 0; max-width: 700px; }
.lp-article > :first-child { margin-top: 0; }
.lp-article h2 {
  font-family: var(--serif); font-weight: 500; font-size: 25px;
  line-height: 1.22; letter-spacing: -0.008em; color: var(--heading);
  margin: var(--sp-12) 0 var(--sp-4); padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.lp-article h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.lp-article h3 {
  font-family: var(--serif); font-weight: 600; font-size: 18px;
  color: var(--heading); margin: var(--sp-8) 0 var(--sp-2);
}
.lp-article p { margin: 0 0 var(--sp-4); }
.lp-article ul, .lp-article ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
.lp-article li { margin-bottom: var(--sp-2); }
.lp-article li::marker { color: var(--accent); }
.lp-article pre {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-4);
  overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.6;
  margin: var(--sp-6) 0;
}
.lp-article blockquote {
  margin: var(--sp-6) 0; padding: var(--sp-3) var(--sp-5, 20px);
  border-left: 3px solid var(--accent); background: var(--accent-weak);
  border-radius: 0 var(--radius) var(--radius) 0; color: var(--text-2);
}
.lp-article blockquote p { margin: 0; }
.lp-figure { margin: var(--sp-8) 0; }
.lp-figure svg { display: block; max-width: 100%; height: auto; }
.lp-figure figcaption {
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  margin-top: var(--sp-2); letter-spacing: .03em;
}
/* a figure the allowlist refused (FORMAT.md §7.17): the reason, never the SVG */
.lp-figure__removed {
  font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--fail);
  background: var(--fail-bg); border: 1px dashed var(--fail-bd);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin: 0;
}

/* ── the shape (a loop's screen, as drawn) ──
   Box-drawing characters only join into a frame when the lines touch, so the
   frame sets tighter than code does. */
.lp-shape > :first-child { margin-top: 0; }
.lp-shape pre { line-height: 1.3; margin: var(--sp-4) 0; }

/* ── a flow's path (one inline SVG, one node per moment) ──
   The spine and the nodes carry the order; the text stays neutral type so
   size and weight do the hierarchy and colour only says where each screen
   stands. Every colour is a state token, so dark mode switches with it. */
.lp-flow { margin: var(--sp-4) 0 var(--sp-8); }
.lp-flow svg { display: block; width: 100%; max-width: 480px; height: auto; }
.lp-flow a { text-decoration: none; }
.lp-flow a:hover .lp-flow__text { fill: var(--accent-d); }
.lp-flow__spine { stroke: var(--border-strong); stroke-width: 1.5; }
.lp-flow__dot { fill: var(--open); stroke: var(--surface); stroke-width: 2.5; }
.lp-flow__id {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  fill: var(--text-muted); letter-spacing: .02em;
}
.lp-flow__text { font-family: var(--sans); font-size: 18px; fill: var(--text); }
.lp-flow__node--done .lp-flow__dot { fill: var(--ok); }
.lp-flow__node--done .lp-flow__id { fill: var(--ok); }
.lp-flow__node--failing .lp-flow__dot { fill: var(--fail); }
.lp-flow__node--failing .lp-flow__id { fill: var(--fail); }
.lp-flow__node--needs-you .lp-flow__dot { fill: var(--human); }
.lp-flow__node--needs-you .lp-flow__id { fill: var(--human); }
.lp-flow__node--open .lp-flow__dot { fill: var(--open); }
.lp-flow__node--open .lp-flow__id { fill: var(--open); }
.lp-flow__node--neutral .lp-flow__dot { fill: var(--open); }
.lp-flow__node--neutral .lp-flow__id { fill: var(--text-muted); }
.lp-flow__node--outcome .lp-flow__dot { fill: var(--accent); }
.lp-flow__node--outcome .lp-flow__id { fill: var(--accent-d); }
.lp-flow__node--outcome .lp-flow__text { font-weight: 600; }
.lp-flow__empty {
  font-family: var(--mono); font-size: 12px; color: var(--text-muted);
  margin: var(--sp-3) 0 var(--sp-6);
}

/* ── checks (in article) ── */
.lp-checks { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-4) 0 0; }
.lp-check {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--open-bd);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5, 20px);
}
.lp-check--pass    { border-left-color: var(--ok); }
.lp-check--fail    { border-left-color: var(--fail); }
.lp-check--human   { border-left-color: var(--human); }
.lp-check--claimed { border-left-color: var(--claimed); }
.lp-check__icon {
  font-family: var(--mono); font-size: 17px; font-weight: 700;
  width: 20px; text-align: center; flex-shrink: 0; margin-top: 1px;
}
.lp-check--pass    .lp-check__icon { color: var(--ok); }
.lp-check--fail    .lp-check__icon { color: var(--fail); }
.lp-check--human   .lp-check__icon { color: var(--human); }
.lp-check--open    .lp-check__icon { color: var(--open); }
.lp-check--claimed .lp-check__icon { color: var(--claimed); }
.lp-check__body { flex: 1; min-width: 0; }
.lp-check__claim { font-size: 15px; line-height: 1.55; color: var(--text); margin: 0 0 var(--sp-2); }
.lp-check__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.lp-check__evidence { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); }
.lp-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius-sm); border: 1px solid;
}

/* ── the failure briefing (derived: failing checks + ingested Tried) ── */
.lp-fail {
  background: var(--fail-bg); border: 1px solid var(--fail-bd);
  border-left: 3px solid var(--fail);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5, 20px);
  margin: var(--sp-4) 0 0;
}
.lp-fail__check { font-size: 15px; line-height: 1.55; color: var(--text); margin: 0 0 var(--sp-2); }
.lp-fail__id { font-family: var(--mono); font-weight: 700; color: var(--fail); margin-right: 6px; }
.lp-fail__evidence { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); }
.lp-fail__briefing {
  font-size: 13.5px; line-height: 1.6; color: var(--text-muted);
  border-top: 1px solid var(--fail-bd); padding-top: var(--sp-3); margin: var(--sp-3) 0 0;
}
.lp-fail__decision { font-size: 15px; line-height: 1.55; color: var(--text); margin: var(--sp-3) 0 0; }
.lp-badge--proven  { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-bd); }
.lp-badge--claimed { color: var(--claimed); background: var(--claimed-bg); border-color: var(--claimed-bd); }
.lp-badge--eval    { color: var(--accent-d); background: transparent; border-color: var(--border-strong); font-variant-numeric: tabular-nums; }
.lp-badge--by      { color: var(--text-muted); background: transparent; border-color: var(--border-strong); }
.lp-badge--refused { color: var(--fail); background: var(--fail-bg); border-color: var(--fail-bd); }
.lp-badge--sha { color: var(--text-muted); background: var(--bg-2); border-color: var(--border); text-transform: none; letter-spacing: 0; }

/* method chip */
.lp-method {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid;
}
.lp-method--code  { color: var(--m-code);  background: var(--m-code-bg);  border-color: var(--m-code-bd); }
.lp-method--agent { color: var(--m-agent); background: var(--m-agent-bg); border-color: var(--m-agent-bd); }
.lp-method--human { color: var(--m-human); background: var(--m-human-bg); border-color: var(--m-human-bd); }

/* ── jobs (persona) ── */
.lp-jobs { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.lp-job {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5, 20px);
  font-size: 15px; line-height: 1.6;
}
.lp-job b { color: var(--heading); }
.lp-job .lp-job__n {
  font-family: var(--mono); font-size: 11px; color: var(--accent-d);
  margin-right: var(--sp-2);
}
/* where the job came from: said quietly, after the story */
.lp-job .lp-job__source {
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  margin-left: var(--sp-2); white-space: nowrap;
}

/* ── signals (opportunity) ── */
.lp-signals { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.lp-signal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  font-size: 14px; line-height: 1.55;
}
.lp-signal .lp-label { display: inline; margin-right: var(--sp-2); }

/* ── rail ── */
.lp-rail { position: sticky; top: 66px; display: flex; flex-direction: column; gap: var(--sp-6); }
.lp-rail__sec { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.lp-rail__sec:first-child { border-top: 0; padding-top: 0; }
.lp-rail__sec .lp-label { display: block; margin-bottom: var(--sp-3); }
.lp-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.lp-links li { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--mono); font-size: 13px; }
.lp-links .tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); background: var(--bg); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: var(--radius-sm); flex-shrink: 0;
}
.lp-tried { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.lp-tried li {
  font-size: 13px; line-height: 1.55; color: var(--text-2);
  padding-left: var(--sp-3); border-left: 2px solid var(--border);
}
.lp-tried .d { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); display: block; }
.lp-tried b { color: var(--text); }

/* ── footer ── */
.lp-foot {
  border-top: 1px solid var(--border); background: var(--bg);
}
.lp-foot__inner {
  max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6);
  font-family: var(--mono); font-size: 11.5px; color: var(--text-muted);
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
}

/* ── the pen — one control in the top bar, the folder grant, the verifier's commands ── */
.lp-pen__state {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); padding: 2px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.lp-pen__toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; line-height: 1;
  padding: 7px 13px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.lp-pen__toggle:hover { border-color: var(--accent); color: var(--accent-d); }
.lp-pen__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-pen__toggle svg { width: 13px; height: 13px; }
.lp-pen__toggle--save { background: var(--accent-d); border-color: var(--accent-d); color: #fff; }
.lp-pen__toggle--save:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.lp-pen__dirty { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lp-pen__flash {
  font-family: var(--mono); font-size: 11.5px; color: var(--ok); white-space: nowrap;
  opacity: 0; transition: opacity .28s ease; pointer-events: none;
}
.lp-pen__flash:empty { display: none; }
.lp-pen__flash--on { opacity: 1; }
.lp-pen__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.lp-check__body > .lp-pen__row { margin-top: var(--sp-3); }
.lp-pen__btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 3px 9px; cursor: pointer; line-height: 1.6;
}
.lp-pen__btn:hover { color: var(--accent-d); border-color: var(--accent); }
.lp-pen__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lp-pen__btn--go { color: var(--surface); background: var(--accent-d); border-color: var(--accent-d); }
.lp-pen__btn--go:hover { color: var(--surface); background: var(--accent); border-color: var(--accent); }
.lp-pen__btn--ghost { border-color: transparent; background: none; color: var(--text-muted); }
.lp-pen__btn--ghost:hover { color: var(--text); border-color: var(--border); }
.lp-pen__hint { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); }
.lp-pen__hint--dirty { color: var(--accent-d); }
.lp-pen__cmd {
  display: block; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  font-family: var(--mono); font-size: 12px; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  user-select: all; overflow-wrap: anywhere;
}
/* A refusal is not transient: it sits under the bar until the reader deals with it. */
.lp-pen__refusal {
  position: sticky; top: 42px; z-index: 29;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-6);
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  color: var(--fail); background: var(--fail-bg); border-bottom: 1px solid var(--fail-bd);
}
.lp-pen__refusal-text { flex: 1; min-width: 0; }

/* The one-time grant: the folder, its copy affordance, the drop zone, the two ways out. */
.lp-grant {
  width: calc(100% - 40px); max-width: 500px; padding: 0;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.lp-grant::backdrop { background: rgba(26,26,24,.38); backdrop-filter: blur(2px); }
.lp-grant__body { padding: 28px; }
.lp-grant__title { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--heading); margin: 10px 0 12px; }
.lp-grant__text { font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 0 0 16px; }
.lp-grant__path { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 14px; }
.lp-grant__folder {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* Long paths keep their tail — the folder's own name is the part that matters. */
  direction: rtl; text-align: left;
  padding: 7px 10px; font-family: var(--mono); font-size: 11.5px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.lp-grant__drop {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  padding: 26px 20px; text-align: center; background: var(--bg-2);
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.lp-grant__drop svg { width: 30px; height: 30px; color: var(--border-strong); margin-bottom: var(--sp-2); }
.lp-grant__drop-main { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text-2); }
.lp-grant__drop-sub { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.lp-grant__drop--over { border-color: var(--accent); background: var(--accent-weak); transform: scale(1.015); }
.lp-grant__drop--over svg, .lp-grant__drop--over .lp-grant__drop-main { color: var(--accent-d); }
.lp-grant__why { font-family: var(--mono); font-size: 12px; color: var(--fail); margin: var(--sp-3) 0 0; }
.lp-grant__why:empty { display: none; }
.lp-grant__row { display: flex; gap: 10px; justify-content: flex-end; margin-top: var(--sp-6); }
.lp-grant__row .lp-pen__btn { font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: var(--radius); }
.lp-grant__hint { font-size: 12.5px; color: var(--text-muted); margin: 14px 0 0; text-align: right; }

/* ── editing in place ──
   Authorable text is edited ON the element that renders it: the affordance is
   the hover tint and the caret, never a control that opens something else. */
[data-edit] {
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 0 transparent;
  transition: background-color .12s ease, box-shadow .12s ease;
  /* An editing host is `pre-wrap` by UA default, which would print the
     newlines BETWEEN rendered blocks. Prose wraps normally until it is being
     edited, where the source's own line breaks are the point. */
  white-space: normal;
}
/* A prose heading keeps its rule above it — the section wrapper the pen needs
   must not swallow the article's rhythm. */
.lp-narrative__sec:not(:first-child) > h2:first-child {
  margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--border);
}
[data-edit]:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
[data-edit]:focus { outline: none; }
[data-edit].lp-edit--on {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  white-space: pre-wrap;
  /* The box breathes without moving the words: the padding is paid back in
     margin, so what you are editing sits exactly where it was rendered. */
  padding: var(--sp-2) var(--sp-3);
  margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3));
}
.lp-narrative__sec.lp-edit--on, .lp-shape.lp-edit--on, .lp-check__claim.lp-edit--on, .lp-links.lp-edit--on {
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
}
[data-edit]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted); font-style: italic;
}
.lp-links[data-edit], .lp-tried__new { min-height: 1.4em; }

/* ── the map's own pages, under the edge being edited ──
   The list is transient UI, built by the binder: it belongs to no payload, so
   it sits over the rail rather than in it. */
.lp-rail__sec { position: relative; }
.lp-suggest {
  position: absolute; z-index: 30; left: 0; right: 0; margin-top: var(--sp-2);
  list-style: none; padding: var(--sp-1); max-height: 15rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.lp-suggest__row {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); cursor: pointer;
}
.lp-suggest__row--on, .lp-suggest__row:hover { background: var(--accent-weak); }
.lp-suggest__id { font-family: var(--mono); font-size: 12.5px; color: var(--text); flex-shrink: 0; }
.lp-suggest__title {
  font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-suggest__state {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 6px; border-radius: var(--radius-sm);
  color: var(--open); background: var(--open-bg); border: 1px solid var(--open-bd);
}
.lp-suggest__state--done    { color: var(--ok);    background: var(--ok-bg);    border-color: var(--ok-bd); }
.lp-suggest__state--failing { color: var(--fail);  background: var(--fail-bg);  border-color: var(--fail-bd); }
.lp-suggest__state--needs-you { color: var(--human); background: var(--human-bg); border-color: var(--human-bd); }
.lp-tried__new { font-style: italic; color: var(--text-muted); }
.lp-pen__note {
  position: fixed; left: 50%; bottom: var(--sp-6); transform: translateX(-50%); z-index: 40;
  font-family: var(--mono); font-size: 12px;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius);
  border: 1px solid var(--ok-bd); background: var(--ok-bg); color: var(--ok);
  box-shadow: var(--shadow-card);
}
.lp-pen__note--warn { border-color: var(--human-bd); background: var(--human-bg); color: var(--human); }

/* ── responsive ── */
@media (max-width: 1080px) {
  .lp-band__inner { grid-template-columns: minmax(0, 1fr) 280px; }
  .lp-toc { display: none; }
}
@media (max-width: 820px) {
  .lp-hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .lp-band__inner { grid-template-columns: 1fr; }
  .lp-rail { position: static; }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-hero__inner, .lp-band__inner { animation: lp-in .35s ease-out; }
  @keyframes lp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}