@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/static/fonts/font-08.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/static/fonts/font-13.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* color tokens */
  --paper:#F5F4F0; --surface:#FFFFFF; --ink:#20252A; --muted:#535C66;
  --sidebar:#252B30; --on-sidebar:#F5F4F0; --action:#795A20;
  --decorative:#A67D32; --line:#D5D6D0; --selection:#EFE8D9;

  /* type tokens (rem/clamp so zoom + reflow work) */
  --font-sans:Geist, system-ui, -apple-system, sans-serif;
  /* serif is reserved for quotes (editorial asides); no licensed serif subset
     ships, so this is the tuned system-serif stack — no new font asset */
  --font-serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --font-mono:ui-monospace, 'Geist Mono', 'SF Mono', Menlo, Consolas, monospace;
  --fs-quiet:0.75rem;            /* quiet nonessential labels 12/1.4 */
  --fs-meta:0.875rem;           /* app metadata 14/1.4 */
  --fs-body:1.0rem;               /* base 16/1.5 */
  --fs-founder:1.125rem;              /* founder text 18/1.65 */
  --fs-page-title:2rem;               /* page title 32px */
  --fs-section:1.5rem;                /* section title 24px */
  --fs-hero:clamp(2rem, 1.1rem + 3.4vw, 4.25rem);  /* hero 32–40 mobile → 56–68 desktop */
  --lh-meta:1.4; --lh-body:1.5; --lh-founder:1.65;
  --lh-hero:1.05; --lh-title:1.15;

  /* 8px rhythm with 4px detail increments */
  --sp-4:4px; --sp-8:8px; --sp-16:16px; --sp-24:24px; --sp-32:32px;
  --sp-48:48px; --sp-64:64px; --sp-80:80px;

  /* shape + control law */
  --radius:4px; --radius-drawer:8px;
  --target:44px; --border-w:1px;

  /* workspace sidebar derivations (experience-v1 workspace pass).
     The theme DTO's colors object is closed (schemas/theme additionalProperties
     false), so these two sidebar-family values live here as CSS-only detail —
     the same home FONT_FACES and --font-serif already use. Both are measured:
     --sidebar-hi is the active nav row fill, one step lighter than --sidebar,
     and --on-sidebar reads 12.6:1 on it; --on-sidebar-muted is the small-caps
     label colour at 6.5:1 on --sidebar (labels are text and owe 4.5:1, so the
     dark-surface gold --decorative 3.8:1 is kept for icons and rules only). */
  --sidebar-hi:#2A2D31; --on-sidebar-muted:#A8B0B7;

  /* layout */
  --content-max:1360px; --sidebar-w:232px; --preview-w:420px; --ws-side-w:250px;
  --prose:min(72ch, 100%); --prose-founder:min(72ch, 100%); /* 62–72ch reading measure */

  /* motion (UIUX §Interaction: 120–180ms feedback, ~200ms pane) */
  --t-feedback:150ms; --t-pane:200ms;
  --ease:cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-feedback:0ms; --t-pane:0ms; }
  *, *::before, *::after {
    transition-duration:0ms !important; animation-duration:0ms !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body)}
img,svg{max-width:100%}
a{color:inherit}
.xp-skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);
  padding:var(--sp-8) var(--sp-16);border-radius:var(--radius);z-index:20}
.xp-skip:focus{left:var(--sp-8);top:var(--sp-8);outline:2px solid var(--action);outline-offset:2px}
:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* masthead + nav */
.xp-masthead{background:var(--paper);border-bottom:var(--border-w) solid var(--line)}
.xp-masthead-inner{max-width:var(--content-max);margin:0 auto;
  padding:var(--sp-8) var(--sp-24);display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-24);
  align-items:baseline;justify-content:space-between}
.xp-wordmark{font-weight:700;text-decoration:none;font-size:1.05rem;letter-spacing:.01em;
  min-height:var(--target);display:inline-flex;align-items:center}
.xp-wordmark .xp-mark-dot{color:var(--action);margin-right:var(--sp-4)}
.xp-nav{display:flex;flex-wrap:wrap;gap:var(--sp-4);list-style:none;margin:0;padding:0}
.xp-nav a{display:inline-flex;align-items:center;min-height:var(--target);padding:0 var(--sp-8);
  text-decoration:none;border-bottom:3px solid transparent;border-radius:var(--radius) var(--radius) 0 0;
  transition:color var(--t-feedback) var(--ease),border-color var(--t-feedback) var(--ease)}
.xp-nav a:hover{text-decoration:underline}
.xp-nav a[aria-current="page"]{border-bottom-color:var(--action);font-weight:600}
/* polish residual 3: masthead Sign in is a secondary link, not a status or an
   accent — it is graphite and stays primary by weight, not by gold */
.xp-nav .xp-nav-cta{color:var(--ink);font-weight:600}

/* layout */
.xp-main{max-width:var(--content-max);margin:0 auto;padding:var(--sp-32) var(--sp-24) var(--sp-64)}
.xp-prose{max-width:var(--prose)}
.xp-founder{max-width:var(--prose-founder);font-size:var(--fs-founder);line-height:var(--lh-founder)}
.xp-footer{border-top:var(--border-w) solid var(--line);margin-top:var(--sp-64)}
.xp-footer-inner{max-width:var(--content-max);margin:0 auto;padding:var(--sp-16) var(--sp-24);
  color:var(--muted);font-size:var(--fs-meta);display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-24)}
/* polish residual 3: footer links are graphite with the underline held back
   for hover/focus. Graphite-on-muted is only 2.1:1, so weight — not colour —
   is what separates a link from the surrounding footer text (WCAG 1.4.1). */
.xp-footer a{color:var(--ink);font-weight:600;text-decoration:none}
.xp-footer a:hover{text-decoration:underline;text-underline-offset:2px}

/* type — the eyebrow law (visual-fidelity pass): every eyebrow/label uses the
   same letter-spaced small-caps treatment; role decides the colour (gold for
   page-level kickers, gray for category/field labels) */
.xp-kicker{color:var(--action);font-size:var(--fs-meta);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 var(--sp-8)}
.xp-eyebrow{color:var(--muted);font-size:var(--fs-quiet);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;margin:0}
h1.xp-hero,h1.xp-page-title{font-weight:700;margin:0 0 var(--sp-16)}
h1.xp-hero{font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:-.01em;max-width:22ch}
h1.xp-page-title{font-size:var(--fs-page-title);line-height:var(--lh-title)}
.xp-section-title{font-size:var(--fs-section);line-height:var(--lh-title);font-weight:600;
  margin:var(--sp-48) 0 var(--sp-16)}
/* quiet closing section: smaller heading, tighter block, so the catalog keeps
   the page's terminal rhythm before the footer */
.xp-section-quiet{font-size:1rem;line-height:var(--lh-title);font-weight:600;
  margin:var(--sp-48) 0 var(--sp-8)}
.xp-lede{font-size:var(--fs-founder);line-height:var(--lh-founder);max-width:var(--prose);margin:0 0 var(--sp-24)}
.xp-meta{color:var(--muted);font-size:var(--fs-meta);line-height:var(--lh-meta);margin:0}
.xp-quiet{color:var(--muted);font-size:var(--fs-quiet);line-height:var(--lh-meta);margin:0}
.xp-mono{font-family:var(--font-mono);font-size:.9em;word-break:break-all}

/* buttons + links */
.xp-btn,.xp-linkbtn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-4);
  min-height:var(--target);padding:0 var(--sp-16);border-radius:var(--radius);
  font:inherit;font-weight:600;text-decoration:none;cursor:pointer;
  border:var(--border-w) solid var(--action);transition:background var(--t-feedback) var(--ease),
  color var(--t-feedback) var(--ease),border-color var(--t-feedback) var(--ease)}
.xp-btn{background:var(--action);color:var(--paper)}
/* hover DARKENS. --decorative #A67D32 is 3.41:1 against paper — fine for a
   3px rule, not for a surface carrying paper-coloured text. --sidebar is a
   tested contrast pair with --on-sidebar/--paper in THEME. */
.xp-btn:hover{background:var(--sidebar);border-color:var(--sidebar)}
.xp-btn:active{transform:translateY(1px)}
.xp-btn[disabled],.xp-btn[aria-disabled="true"]{background:var(--line);border-color:var(--line);
  color:var(--muted);cursor:not-allowed}
.xp-linkbtn{background:transparent;color:var(--action)}
.xp-linkbtn:hover{background:var(--selection)}
/* gold restraint (visual-fidelity pass): body links are black/graphite with a
   hairline underline that strengthens on hover — gold is reserved for eyebrow
   caps, the active tab, icons, arrows, status text and rules */
.xp-link{color:var(--ink);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:2px}
.xp-link:hover{color:var(--ink);text-decoration-color:var(--ink)}
/* the earned exception: a standalone gold text CTA (the hero's founder-story
   link) carries its arrow and the 44px target law */
.xp-link-gold{display:inline-flex;align-items:center;min-height:var(--target);
  color:var(--action);text-decoration-color:var(--decorative)}
/* the CTA text stays #795A20 (5.79:1) in every state; hover strengthens the
   underline instead of lightening the text to 3.41:1. The cue is not
   motion-dependent, so reduced-motion users still get it. */
.xp-link-gold:hover{color:var(--action);text-decoration-color:var(--action)}
.xp-link-gold::after{content:"\2192";speak:none;margin-left:2px;
  transition:transform var(--t-feedback) var(--ease)}
.xp-link-gold:hover::after{transform:translateX(2px)}
/* standalone CTA links: inline links inside prose keep their inline metrics,
   but a link standing alone as a call-to-action carries the 44px target law
   (operator browser pass 2026-09-19: these measured 21px).
   Polish residual 3: these are the enumerated secondary links (About STU,
   Browse the full catalog, For agents) — graphite, underline on hover/focus
   only. A link standing alone has no sentence to be confused with, so holding
   the underline back costs no affordance; links *inside* prose keep theirs. */
.xp-link.xp-cta{display:inline-flex;align-items:center;min-height:var(--target);
  padding:0 var(--sp-8);text-decoration:none}
.xp-link.xp-cta:hover,.xp-link.xp-cta:focus-visible{text-decoration:underline;
  text-decoration-color:var(--ink);text-underline-offset:2px}
a.xp-external::after{content:"\2197";font-size:.8em;margin-left:2px;speak:none}
.xp-external-note{color:var(--muted)}
/* text-level gold arrow (concept): marks a row/cell's primary destination */
.xp-arrow{color:var(--action);speak:none}
/* polish residual 3: ONE status treatment for every product stage line on the
   public surface — catalog rows, directory cells and the "Also in the catalog"
   strip, which was rendering its stage in quiet gray and broke the rule */
.xp-row-status,.xp-cell-status,.xp-also-status{color:var(--action);
  font-size:var(--fs-meta);font-weight:600;margin:0}

/* forms */
.xp-search{display:flex;flex-wrap:wrap;gap:var(--sp-8);align-items:flex-end;margin:0 0 var(--sp-24)}
.xp-field{display:flex;flex-direction:column;gap:var(--sp-4);flex:1 1 260px}
.xp-field label{font-size:var(--fs-meta);font-weight:600}
.xp-input{min-height:var(--target);font:inherit;color:var(--ink);background:var(--surface);
  border:var(--border-w) solid var(--line);border-radius:var(--radius);padding:var(--sp-8) var(--sp-8);
  width:100%}
.xp-input:hover{border-color:var(--muted)}
.xp-input:focus-visible{outline:2px solid var(--action);outline-offset:1px}
.xp-input::placeholder{color:var(--muted)}
.xp-input[aria-invalid="true"]{border-color:var(--action);border-width:2px}
.xp-err{color:var(--action);font-size:var(--fs-meta);font-weight:600;margin:0}
input[type="checkbox"].xp-check,input[type="radio"].xp-check{width:auto;min-height:0}
/* lean search row (homepage): one full-width input with the magnifier inside,
   sr-only label, no separate heading/label wrapper above it */
.xp-search-inline{align-items:center}
.xp-field-inline{position:relative;flex:1 1 auto;display:flex}
.xp-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none}
.xp-field-inline .xp-input{padding-left:calc(var(--sp-32) + var(--sp-8))}
/* polish residual 5: the lean row's submit is sr-only at rest — the concept
   has no button and type=search already gives touch keyboards a Search/Go key.
   It un-hides on focus so a keyboard user can SEE what they have landed on;
   an invisible focused control would fail WCAG 2.4.7. */
.sr-only-focusable:focus,.sr-only-focusable:focus-visible{position:static;width:auto;
  height:auto;margin:0 0 0 var(--sp-8);overflow:visible;clip:auto;white-space:normal}

/* list rows — unboxed hairline rows; names are bold black (not gold links),
   the arrow + status carry the accent */
.xp-rows{list-style:none;margin:0;padding:0;border-top:var(--border-w) solid var(--line)}
.xp-row{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-16);align-items:baseline;
  justify-content:space-between;min-height:56px;padding:var(--sp-16) 0;
  border-bottom:var(--border-w) solid var(--line)}
.xp-row-main{flex:1 1 260px;min-width:0}
.xp-row-title{font-weight:700;color:var(--ink);text-decoration:none}
.xp-row a.xp-row-link{text-decoration:none}
.xp-row a.xp-row-link:hover .xp-row-title,.xp-also a:hover .xp-row-title{
  text-decoration:underline;text-underline-offset:2px}
.xp-row-side{flex:0 1 auto;text-align:right;display:flex;flex-direction:column;gap:var(--sp-4);
  align-items:flex-end}
.xp-row .xp-external{color:var(--muted);font-size:var(--fs-meta)}
.xp-row .xp-external:hover{text-decoration:underline;text-decoration-color:var(--muted)}

/* status / states */
.xp-status{display:flex;flex-wrap:wrap;gap:var(--sp-8);align-items:center;justify-content:space-between;
  border:var(--border-w) solid var(--line);border-left:4px solid var(--muted);
  border-radius:var(--radius);padding:var(--sp-16);margin:var(--sp-16) 0;background:var(--surface)}
.xp-status[data-status="error"],.xp-status[data-status="unauthorized"],.xp-status[data-status="expired"]{border-left-color:var(--action)}
.xp-status[data-status="loading"]{border-left-color:var(--line)}
.xp-status .xp-status-msg{margin:0}
.xp-status .xp-status-note{margin:var(--sp-4) 0 0}
.xp-dl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-8) var(--sp-16);margin:var(--sp-16) 0}
.xp-dl dt{font-weight:600;margin:0}
.xp-dl dd{margin:0}
.xp-steps{margin:var(--sp-8) 0;padding-left:1.35rem;display:grid;gap:var(--sp-8)}
.xp-steps li{line-height:var(--lh-meta)}
.xp-lane-status{margin:var(--sp-8) 0 0}

/* reader blocks */
.xp-reader{max-width:var(--prose)}
.xp-reader h2,.xp-reader h3{line-height:1.25;margin:var(--sp-32) 0 var(--sp-8);scroll-margin-top:var(--sp-16)}
.xp-reader pre{background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--radius);
  padding:var(--sp-16);overflow-x:auto;font-family:var(--font-mono);font-size:.9rem}
.xp-redacted{display:inline-block;background:var(--line);color:var(--ink);border-radius:var(--radius);
  padding:0 var(--sp-8);font-family:var(--font-mono);font-size:.9em}
.xp-quote{margin:var(--sp-24) 0;padding-left:var(--sp-16);border-left:3px solid var(--decorative);
  font-family:var(--font-serif);font-size:var(--fs-founder);line-height:var(--lh-founder);
  font-style:italic;max-width:var(--prose)}
.xp-chapter{margin:0 0 var(--sp-48);scroll-margin-top:var(--sp-16)}
.xp-chapter-index{margin:0 0 var(--sp-32);padding:var(--sp-16);
  border:var(--border-w) solid var(--line);border-radius:var(--radius-drawer);background:var(--surface)}
.xp-chapter-index ol{list-style:none;margin:0;padding:0}
.xp-chapter-index li{min-height:44px;display:flex;align-items:center}
.xp-toc-anchor{color:var(--muted);text-decoration:none;font-family:var(--font-mono);font-size:var(--fs-meta)}
.xp-toc-anchor:hover{color:var(--action)}

/* gallery: the shipped workspace components shown inside the public page —
   the sidebar drops its viewport docking so it sits in the flow of the
   reference page (the workspace itself keeps the sticky full-height column) */
.xp-gallery-shell{display:grid;grid-template-columns:var(--ws-side-w) 1fr;gap:var(--sp-24);
  align-items:start;min-height:320px}
.xp-gallery-shell .xp-side{position:static;height:auto;border-radius:var(--radius-drawer)}
@media (max-width: 959px){.xp-gallery-shell{grid-template-columns:1fr}}
.xp-badge{display:inline-block;border:var(--border-w) solid var(--line);border-radius:var(--radius);
  padding:0 var(--sp-8);font-size:var(--fs-quiet);color:var(--muted);letter-spacing:.04em}
.xp-badge[data-variant="historical"]{border-style:dashed}
.xp-badge[data-variant="current"]{border-color:var(--action);color:var(--action)}

/* gallery helpers (token swatches colored via vars — never inline styles) */
.xp-swatch{display:inline-flex;flex-direction:column;gap:var(--sp-4);margin:0 var(--sp-16) var(--sp-16) 0;vertical-align:top}
.xp-swatch .xp-swatch-chip{width:120px;height:64px;border:var(--border-w) solid var(--line);border-radius:var(--radius)}
.xp-sw-paper{background:var(--paper)} .xp-sw-surface{background:var(--surface)}
.xp-sw-ink{background:var(--ink)} .xp-sw-muted{background:var(--muted)}
.xp-sw-sidebar{background:var(--sidebar)} .xp-sw-on_sidebar{background:var(--on_sidebar)}
.xp-sw-action{background:var(--action)} .xp-sw-decorative{background:var(--decorative)}
.xp-sw-line{background:var(--line)} .xp-sw-selection{background:var(--selection)}
.xp-table{border-collapse:collapse;width:100%;margin:var(--sp-16) 0}
.xp-table th,.xp-table td{text-align:left;padding:var(--sp-8) var(--sp-16);border-bottom:var(--border-w) solid var(--line);font-size:var(--fs-meta)}
.xp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-16)}
.xp-card{background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--radius-drawer);
  padding:var(--sp-16)}
.xp-card h3{margin:0 0 var(--sp-8);font-size:var(--fs-meta);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}

/* homepage hero (B2): 60/40 desktop per UIUX, stacked below 960 */
.xp-hero-grid{display:grid;grid-template-columns:3fr 2fr;gap:var(--sp-24) var(--sp-48);align-items:start}
/* polish residual 4: one primary CTA, then quiet text links. The two outlined
   buttons read as three competing calls against the concept's single text CTA;
   they are now · separated graphite links that keep their 44px targets through
   .xp-cta padding. The pair is wrapped so the dot never orphans onto its own
   line when the row wraps. */
.xp-hero-links{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-8) var(--sp-24);margin:var(--sp-24) 0 0}
.xp-hero-quiet{display:inline-flex;flex-wrap:wrap;align-items:center}
.xp-hero-sep{color:var(--muted);padding:0 var(--sp-4);-webkit-user-select:none;user-select:none}
/* origin aside: open editorial treatment — gold rule on the left edge only,
   no box, no fill; the quote inside is serif italic */
.xp-origin{border-left:3px solid var(--decorative);padding:var(--sp-8) 0 var(--sp-8) var(--sp-24);margin:0}
/* polish residual 1: the aside's left edge IS the chrome. The pull-quote nested
   inside drops its own rule/padding/indent so exactly one gold rule reads —
   bold lead, one gray body line, one serif italic quote, one link. */
.xp-origin .xp-quote{margin:var(--sp-16) 0 0;padding-left:0;border-left:0;max-width:none}
.xp-origin-lead{font-size:var(--fs-founder);line-height:var(--lh-title);font-weight:700;
  color:var(--ink);margin:0}
.xp-origin-body{color:var(--muted);margin:var(--sp-8) 0 0}
.xp-origin .xp-link{display:inline-flex;align-items:center;min-height:var(--target);margin-top:var(--sp-8)}

/* product directory (visual-fidelity pass): six unboxed cells in a 3×2 grid —
   cells defined by whitespace, hairline rules between rows and faint vertical
   dividers between columns; no card borders, fills, shadows or corners */
.xp-directory{display:grid;grid-template-columns:repeat(3,1fr);gap:0;list-style:none;margin:0;padding:0}
.xp-cell{display:flex;flex-direction:column;min-width:0;padding:var(--sp-24) var(--sp-24) var(--sp-8)}
.xp-cell:nth-child(3n+1){padding-left:0}
.xp-cell:nth-child(3n){padding-right:0}
.xp-cell:nth-child(n+4){border-top:var(--border-w) solid var(--line)}
/* polish residual 6: ONE hairline value everywhere — 1px var(--line) #D5D6D0.
   The column dividers used to be mixed 65% toward the paper, so the grid
   carried two different hairlines at once. */
.xp-cell:nth-child(3n+2),.xp-cell:nth-child(3n+3){border-left:var(--border-w) solid var(--line)}
.xp-cell .xp-cell-link{display:flex;flex-direction:column;gap:var(--sp-4);flex:1;
  text-decoration:none;min-height:var(--target)}
/* polish residual 6: the 26px mark is optically centred in a fixed 28px box, so
   all six line-art icons share one optical centre despite differing artwork
   bounds and the cell text below them starts at the same y in every cell */
.xp-cell-icon{display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;color:var(--action);margin-bottom:var(--sp-4)}
.xp-icon{display:block}
.xp-cell-name{font-size:1.125rem;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.xp-cell .xp-cell-link:hover .xp-cell-name{text-decoration:underline;text-underline-offset:2px}
.xp-cell-desc{color:var(--muted)}
.xp-cell-foot{margin-top:auto;padding-top:var(--sp-8);display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-16);
  align-items:baseline;justify-content:space-between}
/* polish residual 6: the arrow shares the status line's size and line box, so
   align-items:baseline lands it on the status baseline rather than a 16px
   baseline sitting 2px low against 14px text */
.xp-cell-foot .xp-arrow{font-size:var(--fs-meta);line-height:var(--lh-meta)}
.xp-also{list-style:none;margin:0;padding:0}
.xp-also li{border-bottom:var(--border-w) solid var(--line)}
.xp-also a{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-16);align-items:baseline;
  justify-content:space-between;min-height:var(--target);padding:var(--sp-8) 0;text-decoration:none}

/* filter tabs (concept): hairline-ruled row of plain links; the active tab's
   gold underline sits on the rule */
.xp-tabs{margin:0 0 var(--sp-24)}
.xp-tabs ul{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-24);list-style:none;
  margin:0;padding:0;border-bottom:var(--border-w) solid var(--line)}
.xp-tab{display:inline-flex;align-items:center;min-height:var(--target);padding:0 var(--sp-8);
  text-decoration:none;color:var(--ink);border-bottom:3px solid transparent;
  margin-bottom:calc(-1 * var(--border-w));
  transition:border-color var(--t-feedback) var(--ease)}
.xp-tab:hover{text-decoration:underline;text-underline-offset:6px}
.xp-tab[aria-current="true"]{border-bottom-color:var(--action);font-weight:600}

/* filter chips: ordinary links with selected state (not tab semantics) */
.xp-filters{display:flex;flex-wrap:wrap;gap:var(--sp-8);align-items:center;margin:0 0 var(--sp-16)}
.xp-filter-label{font-size:var(--fs-quiet);font-weight:600;color:var(--muted);
  letter-spacing:.14em;text-transform:uppercase}
.xp-chip{display:inline-flex;align-items:center;min-height:var(--target);padding:0 var(--sp-16);
  border:var(--border-w) solid var(--line);border-radius:var(--radius);background:var(--surface);
  color:var(--ink);text-decoration:none;font-size:var(--fs-meta);
  transition:border-color var(--t-feedback) var(--ease),color var(--t-feedback) var(--ease),
  background var(--t-feedback) var(--ease)}
.xp-chip:hover{border-color:var(--action);color:var(--action)}
.xp-chip[aria-current="true"]{background:var(--selection);border-color:var(--action);color:var(--action);font-weight:600}
.xp-chip-count{color:var(--muted);font-size:var(--fs-quiet);margin-left:var(--sp-4)}

/* story chapter prev/next */
.xp-chapter-nav{display:flex;flex-wrap:wrap;gap:var(--sp-8);justify-content:space-between;margin:var(--sp-16) 0 0}
.xp-chapter-nav a{min-height:var(--target);display:inline-flex;align-items:center}

@media (max-width: 959px){
  /* 600–959: 24px gutters (UIUX layout table) */
  .xp-main{padding:var(--sp-24) var(--sp-24) var(--sp-48)}
  .xp-hero-grid{grid-template-columns:1fr}
  /* directory: 2 cols 600–959 — row rules under the first row, one 1px
     var(--line) divider between the two columns (desktop 3-col rules reset) */
  .xp-directory{grid-template-columns:repeat(2,1fr)}
  .xp-cell{border-top:var(--border-w) solid var(--line);border-left:none;
    padding:var(--sp-24) var(--sp-24) var(--sp-8)}
  .xp-cell:nth-child(-n+2){border-top:none}
  .xp-cell:nth-child(odd){padding-left:0}
  .xp-cell:nth-child(even){padding-right:0;
    border-left:var(--border-w) solid var(--line)}
}
@media (max-width: 599px){
  h1.xp-hero{font-size:clamp(2rem,1.4rem+4vw,2.5rem)}
  /* 320–599 (390px phone): 16px gutters, masthead and footer on the same edge */
  .xp-main{padding:var(--sp-24) var(--sp-16) var(--sp-48)}
  .xp-masthead-inner{padding:var(--sp-8) var(--sp-16)}
  .xp-footer-inner{padding:var(--sp-16)}
  .xp-row-side{text-align:left;flex:1 1 100%;align-items:flex-start}
  /* directory: single column — hairlines between cells, no dividers */
  .xp-directory{grid-template-columns:1fr}
  .xp-cell{border-left:none;border-top:var(--border-w) solid var(--line);
    padding:var(--sp-16) 0 var(--sp-8)}
  .xp-cell:first-child{border-top:none}
  .xp-also a{flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
}
/* polish residual 6: the desktop gutter ladder from the UIUX layout table.
   The base rules carry the 600–959 value; these widen it upward so masthead,
   main and footer share one edge at every breakpoint. At 1440px the 1360px
   content cap adds its own 40px auto-margin on top of the 48px gutter. */
@media (min-width: 960px){
  .xp-main{padding-left:var(--sp-32);padding-right:var(--sp-32)}
  .xp-masthead-inner,.xp-footer-inner{padding-left:var(--sp-32);padding-right:var(--sp-32)}
}
@media (min-width: 1280px){
  .xp-main{padding-left:var(--sp-48);padding-right:var(--sp-48)}
  .xp-masthead-inner,.xp-footer-inner{padding-left:var(--sp-48);padding-right:var(--sp-48)}
}
@media (prefers-contrast: more){
  .xp-btn,.xp-linkbtn{border-width:2px}
  a{text-decoration:underline}
}

/* ===========================================================================
   Workspace (experience-v1 workspace pass) — the authenticated app frame.
   Three regions: a full-height sidebar, a main region whose header band sits
   ABOVE the content (never over the sidebar), and a docked preview panel.
   Tokens only; the two sidebar-family values (--sidebar-hi, --on-sidebar-muted)
   are declared in experience_theme.tokens_css().
   =========================================================================== */
body.xp-app{background:var(--paper)}
.xp-shell{display:grid;grid-template-columns:var(--ws-side-w) minmax(0,1fr) var(--preview-w);
  align-items:stretch;min-height:100vh}
.xp-shell[data-preview="closed"]{grid-template-columns:var(--ws-side-w) minmax(0,1fr)}
.xp-shell-main{display:flex;flex-direction:column;min-width:0}
.xp-i{display:block;flex:0 0 auto}

/* --- region 1: sidebar ---------------------------------------------------- */
.xp-side{background:var(--sidebar);color:var(--on-sidebar);font-size:var(--fs-meta);
  display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-16) 0 var(--sp-8);
  position:sticky;top:0;height:100vh;overflow-y:auto}
.xp-side-brand{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--target);
  padding:0 var(--sp-16);color:var(--on-sidebar);text-decoration:none;font-weight:700}
.xp-side-brand .xp-i{color:var(--decorative)}
.xp-side-wordmark{font-size:1.05rem;letter-spacing:.01em}
.xp-side-label{color:var(--on-sidebar-muted);font-size:var(--fs-quiet);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin:var(--sp-16) 0 var(--sp-4);padding:0 var(--sp-16)}
.xp-side-nav{list-style:none;margin:0;padding:0}
.xp-side-row{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--target);
  padding:0 var(--sp-16);color:var(--on-sidebar);text-decoration:none;
  transition:background var(--t-feedback) var(--ease)}
.xp-side-row .xp-i{color:var(--on-sidebar-muted)}
.xp-side-row:hover{background:var(--sidebar-hi);text-decoration:underline;text-underline-offset:2px}
/* active: lighter fill + a 3px gold left edge drawn as an inset shadow (no
   layout shift) + gold mark. The gold is --decorative, 3.8:1 on --sidebar:
   correct for a rule and an icon (3:1), never used for text on this surface. */
.xp-side-row[aria-current]{background:var(--sidebar-hi);font-weight:600;
  box-shadow:inset 3px 0 0 var(--decorative)}
.xp-side-row[aria-current] .xp-i{color:var(--decorative)}
.xp-side-count{margin-left:auto;color:var(--on-sidebar-muted);font-size:var(--fs-quiet)}
.xp-side-rule{border:0;border-top:var(--border-w) solid rgba(245,244,240,.18);
  margin:var(--sp-16) var(--sp-16) 0}
.xp-side-foot{margin-top:auto;padding-top:var(--sp-8)}
.xp-side-user{padding:0 var(--sp-8)}
.xp-side-user>summary{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--target);
  padding:0 var(--sp-8);border-radius:var(--radius);cursor:pointer;list-style:none}
.xp-side-user>summary::-webkit-details-marker{display:none}
.xp-side-user>summary:hover{background:var(--sidebar-hi)}
.xp-side-user[open]>summary .xp-side-chevron{transform:rotate(180deg)}
.xp-side-chevron{margin-left:auto;color:var(--on-sidebar-muted);
  transition:transform var(--t-feedback) var(--ease)}
.xp-avatar{width:36px;height:36px;border-radius:50%;background:var(--sidebar-hi);
  border:var(--border-w) solid var(--on-sidebar-muted);color:var(--on-sidebar);
  display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
.xp-side-who{display:flex;flex-direction:column;min-width:0}
.xp-side-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-side-sub{color:var(--on-sidebar-muted);font-size:var(--fs-quiet)}
.xp-side-user-menu{list-style:none;margin:0;padding:0 0 var(--sp-8)}

/* --- region 2: header band + page head ------------------------------------ */
.xp-topbar{display:flex;align-items:center;gap:var(--sp-16);
  padding:var(--sp-16) var(--sp-32);border-bottom:var(--border-w) solid var(--line)}
.xp-topsearch{flex:1 1 auto;display:flex;align-items:center;position:relative;min-width:0;margin:0}
.xp-topsearch .xp-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none}
.xp-topsearch-input{width:100%;min-height:var(--target);font:inherit;color:var(--ink);
  background:var(--surface);border:var(--border-w) solid var(--line);border-radius:10px;
  padding:var(--sp-8) 72px var(--sp-8) 44px}
.xp-topsearch-input::placeholder{color:var(--muted)}
.xp-topsearch-input:hover{border-color:var(--muted)}
.xp-topsearch-input:focus-visible{outline:2px solid var(--action);outline-offset:1px}
.xp-kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);
  font-family:var(--font-mono);font-size:var(--fs-quiet);pointer-events:none;
  border:var(--border-w) solid var(--line);border-radius:var(--radius);padding:1px var(--sp-4)}
.xp-topbar-actions{display:flex;align-items:center;gap:var(--sp-8);flex:0 0 auto}
.xp-iconbtn{display:inline-flex;align-items:center;justify-content:center;
  width:var(--target);height:var(--target);border-radius:var(--radius);color:var(--ink);
  text-decoration:none;border:var(--border-w) solid transparent}
.xp-iconbtn:hover{background:var(--selection);border-color:var(--line)}
.xp-iconbtn[data-muted="true"]{color:var(--muted)}
.xp-ws-main{padding:var(--sp-32) var(--sp-32) var(--sp-64);min-width:0;flex:1 1 auto}
.xp-crumbs{margin:0 0 var(--sp-16);color:var(--muted);font-size:var(--fs-meta)}
.xp-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8);
  margin:0;padding:0}
.xp-crumbs li+li::before{content:"/";margin-right:var(--sp-8);color:var(--line)}
.xp-crumbs a{color:var(--muted);text-decoration:none}
.xp-crumbs a:hover{text-decoration:underline;text-underline-offset:2px}
.xp-crumbs [aria-current]{color:var(--ink);font-weight:600}
.xp-ws-title{font-size:clamp(2rem,1.2rem + 2.6vw,3.25rem);line-height:1.04;letter-spacing:-.02em;
  font-weight:700;margin:0 0 var(--sp-8)}
.xp-ws-sub{color:var(--muted);font-size:var(--fs-founder);line-height:var(--lh-founder);
  max-width:var(--prose);margin:0 0 var(--sp-24)}

/* tab row + outlined Filter/Sort disclosures on the right */
.xp-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-8) var(--sp-24);
  border-bottom:var(--border-w) solid var(--line);margin:0 0 var(--sp-16)}
.xp-ws-tabs{flex:1 1 auto;margin:0;min-width:0}
.xp-ws-tabs ul{border-bottom:0;flex-wrap:nowrap;overflow-x:auto;gap:var(--sp-24)}
.xp-toolbar-actions{display:flex;gap:var(--sp-8);padding-bottom:var(--sp-8);position:relative}
.xp-menu{position:relative}
.xp-menu>summary{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  min-height:var(--target);padding:0 var(--sp-16);border:var(--border-w) solid var(--line);
  border-radius:var(--radius);background:var(--surface);color:var(--ink);font-weight:600;
  font-size:var(--fs-meta);cursor:pointer;list-style:none;white-space:nowrap}
.xp-menu>summary::-webkit-details-marker{display:none}
.xp-menu>summary:hover{border-color:var(--action);color:var(--action)}
.xp-menu[open]>summary{border-color:var(--action);background:var(--selection)}
.xp-menu-panel{position:absolute;right:0;top:calc(100% + var(--sp-4));z-index:10;min-width:240px;
  background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--radius-drawer);
  padding:var(--sp-16);box-shadow:0 8px 24px rgba(32,37,42,.12)}
.xp-menu-panel .xp-filters:last-child{margin-bottom:0}
.xp-menu-list{list-style:none;margin:0;padding:0}
.xp-menu-list a{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--target);
  padding:0 var(--sp-8);color:var(--ink);text-decoration:none;border-radius:var(--radius)}
.xp-menu-list a:hover{background:var(--selection)}
.xp-menu-list a[aria-current]{font-weight:700;color:var(--action)}

/* --- region 3: document list --------------------------------------------- */
.xp-doc-table{border-collapse:collapse;width:100%;margin:0 0 var(--sp-32);table-layout:fixed}
.xp-doc-table th,.xp-doc-table td{text-align:left;border-bottom:var(--border-w) solid var(--line);
  padding:var(--sp-8) var(--sp-16) var(--sp-8) 0;font-size:var(--fs-meta);vertical-align:middle}
/* the row link owns the row's height (62px, the spec row); the body cell adds
   no vertical padding on top of it, or three stacked lines push past 85px */
.xp-doc-table td{padding-top:0;padding-bottom:0}
.xp-doc-table th{color:var(--muted);font-weight:600;white-space:nowrap;
  font-size:var(--fs-quiet);letter-spacing:.08em;text-transform:uppercase}
.xp-doc-table th a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;
  min-height:var(--target);gap:var(--sp-4)}
.xp-doc-table th a:hover{color:var(--ink);text-decoration:underline}
.xp-doc-table .xp-col-type{width:140px}
.xp-doc-table .xp-col-edition{width:140px}
.xp-doc-table .xp-col-go{width:40px}
.xp-doc-table tbody tr{transition:background var(--t-feedback) var(--ease)}
/* hover lifts the row to --surface; the cream --selection fill is reserved for
   the row the preview panel is actually showing, so the two never read alike */
.xp-doc-table tbody tr:hover{background:var(--surface)}
.xp-doc-table tbody tr[data-selected="true"]{background:var(--selection)}
.xp-doc-table .xp-cell-doc{width:auto}
/* min-height governs the one-line row (62px); the small padding only matters
   for the two-line-title row, which it keeps at ~67px — inside the target */
.xp-doc-table a.xp-row-link{display:flex;align-items:center;gap:var(--sp-16);
  min-height:62px;padding:var(--sp-4) 0;color:inherit;text-decoration:none}
.xp-row-icon{color:var(--action);width:28px;height:28px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto}
.xp-row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
/* the HISTORICAL badge sits beside the title, not under it: .xp-row-text is a
   flex column, so a bare sibling span would have taken a third line */
.xp-row-head{display:flex;align-items:center;gap:var(--sp-8);min-width:0}
.xp-row-head .xp-badge{flex:0 0 auto}
/* the list title is near-black and unadorned — the row arrow is the
   affordance, so gold underlined links never repeat down the table */
/* the longest real titles run past 100 characters and would take three lines
   in the Document column with the panel open; two is the row's ceiling, and
   the whole title is one click away in the panel and the reader */
.xp-doc-table .xp-row-title{font-size:.9375rem;font-weight:600;color:var(--ink);
  overflow-wrap:anywhere;line-height:1.3;overflow:hidden;display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.xp-doc-table a.xp-row-link:hover .xp-row-title{text-decoration:underline;text-underline-offset:2px}
/* two lines, not three: the snippet rides the meta line on desktop and is
   clipped to what is left of it, so the row keeps the spec's 62px */
.xp-row-meta{display:flex;align-items:baseline;gap:var(--sp-8);min-width:0}
.xp-row-sub{color:var(--muted);font-size:13px;line-height:1.3;flex:0 0 auto;white-space:nowrap}
.xp-row-snippet{color:var(--muted);font-size:13px;line-height:1.3;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0}
.xp-row-meta .xp-row-snippet::before{content:"· "}
.xp-doc-table .xp-cell-type,.xp-doc-table .xp-cell-edition{color:var(--ink)}
.xp-edition-rev{color:var(--muted);font-family:var(--font-mono);font-size:var(--fs-quiet);
  margin-left:var(--sp-4)}
.xp-cell-go{text-align:right}
.xp-row-arrow{color:var(--muted);display:inline-flex}
.xp-doc-table tbody tr:hover .xp-row-arrow{color:var(--action)}
.xp-sort-arrow{font-size:.8em;color:var(--muted)}
.xp-list-foot{display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-16);align-items:center;
  margin:0 0 var(--sp-24)}

/* --- region 4: continue reading ------------------------------------------ */
.xp-continue{border-top:var(--border-w) solid var(--line);padding-top:var(--sp-16);
  margin:var(--sp-32) 0 0}
.xp-continue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  margin:var(--sp-8) 0 0}
.xp-continue-card{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-16) var(--sp-24);
  text-decoration:none;color:inherit;min-height:var(--target)}
.xp-continue-card:first-child{padding-left:0}
.xp-continue-card+.xp-continue-card{border-left:var(--border-w) solid var(--line)}
.xp-continue-icon{color:var(--action);width:28px;height:28px;display:flex;align-items:center}
.xp-continue-title{font-weight:700;color:var(--ink)}
.xp-continue-card:hover .xp-continue-title{text-decoration:underline;text-underline-offset:2px}
.xp-continue-sub{color:var(--muted);font-size:var(--fs-meta)}

/* --- region 5: docked preview panel --------------------------------------- */
.xp-preview{background:var(--surface);border-left:var(--border-w) solid var(--line);
  min-width:0;position:sticky;top:0;height:100vh;overflow-y:auto;
  padding:var(--sp-16) var(--sp-24) var(--sp-32)}
.xp-preview-head{display:flex;align-items:center;gap:var(--sp-8);margin:0 0 var(--sp-16)}
.xp-preview-head .xp-eyebrow{flex:1 1 auto}
.xp-preview-title{font-size:2.125rem;line-height:1.1;font-weight:700;letter-spacing:-.01em;
  margin:0 0 var(--sp-4);overflow-wrap:anywhere}
.xp-preview-sub{color:var(--muted);font-size:1.125rem;margin:0 0 var(--sp-16)}
.xp-preview-tabs{margin:0 0 var(--sp-16)}
.xp-preview-tabs ul{gap:var(--sp-16);overflow-x:auto;flex-wrap:nowrap}
.xp-preview-meta{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-8) var(--sp-16);
  margin:0 0 var(--sp-24);font-size:var(--fs-meta)}
.xp-preview-meta dt{color:var(--muted);margin:0}
.xp-preview-meta dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.xp-preview h3{font-size:var(--fs-body);font-weight:700;margin:var(--sp-24) 0 var(--sp-8)}
.xp-preview-lead{margin:0;color:var(--ink)}
.xp-preview-toc{list-style:none;margin:0;padding:0;counter-reset:xp-toc}
.xp-preview-toc li{display:flex;gap:var(--sp-16);align-items:baseline;
  border-bottom:var(--border-w) solid var(--line)}
.xp-preview-toc li:last-child{border-bottom:0}
.xp-preview-num{color:var(--action);font-family:var(--font-mono);font-size:var(--fs-meta);
  font-weight:600;flex:0 0 auto}
.xp-preview-toc a{display:flex;align-items:center;min-height:var(--target);color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.xp-preview-toc a:hover{text-decoration-color:var(--ink)}
.xp-redaction-note{display:flex;gap:var(--sp-8);align-items:flex-start;
  border-top:var(--border-w) solid var(--line);margin:var(--sp-24) 0 0;padding-top:var(--sp-16);
  color:var(--muted);font-size:var(--fs-meta)}
.xp-redaction-note .xp-i{color:var(--action);margin-top:2px}
.xp-cred-field{display:block;width:100%;background:var(--paper);border:var(--border-w) solid var(--line);
  border-radius:var(--radius);padding:var(--sp-8);color:var(--muted);font-family:var(--font-mono);
  font-size:var(--fs-meta);margin:var(--sp-4) 0 0}
.xp-preview-actions{margin:var(--sp-24) 0 0;display:flex;flex-direction:column;gap:var(--sp-8);
  align-items:flex-start}
.xp-btn-block{display:flex;width:100%;justify-content:center;background:transparent;
  color:var(--action);border:var(--border-w) solid var(--action)}
.xp-btn-block:hover{background:var(--selection)}
.xp-copylink{display:inline-flex;align-items:center;gap:var(--sp-8);min-height:var(--target);
  background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.xp-copylink:hover{text-decoration-color:var(--ink)}
.xp-copylink .xp-i{color:var(--action)}
/* the copy source stays out of the visual layer but must become real when a
   clipboard-less browser falls back to "select and copy manually" */
.xp-copy-src{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);border:0}
.xp-copy-src:focus{position:static;width:100%;height:auto;margin:var(--sp-8) 0 0;overflow:visible;
  clip:auto;border:var(--border-w) solid var(--action);border-radius:var(--radius);
  padding:var(--sp-8);font-family:var(--font-mono);font-size:var(--fs-meta)}
.xp-copy-status{min-height:1em}
.xp-panel-rows{list-style:none;margin:0;padding:0}
.xp-panel-rows li{border-bottom:var(--border-w) solid var(--line)}
.xp-panel-rows a{display:flex;flex-direction:column;gap:2px;min-height:var(--target);
  justify-content:center;padding:var(--sp-8) 0;color:inherit;text-decoration:none}
.xp-panel-rows a:hover .xp-row-title{text-decoration:underline;text-underline-offset:2px}
.xp-panel-rows .xp-row-title{font-weight:600;color:var(--ink);font-size:.9375rem}

/* --- reader + history pages (same shell, no docked panel) ----------------- */
.xp-reader-head{margin-bottom:var(--sp-16)}
.xp-reader-meta{display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-16);align-items:center;margin:var(--sp-8) 0}
.xp-reader-actions{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin:var(--sp-16) 0}
.xp-toc{border:var(--border-w) solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:var(--sp-8) var(--sp-16);margin:0 0 var(--sp-24);font-size:var(--fs-meta)}
.xp-toc a{color:var(--muted);text-decoration:none;display:inline-flex;min-height:var(--target);align-items:center;
  padding:0 var(--sp-8);font-family:var(--font-mono)}
.xp-toc a:hover{color:var(--action)}
.xp-body{max-width:var(--prose)}
.xp-body p{margin:0 0 var(--sp-16)}
.xp-body h2,.xp-body h3,.xp-body h4{line-height:1.25;margin:var(--sp-32) 0 var(--sp-8);scroll-margin-top:var(--sp-16)}
.xp-body pre{background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--radius);
  padding:var(--sp-16);overflow-x:auto;font-family:var(--font-mono);font-size:.9rem}
.xp-body .xp-mono{font-size:.9em}
.xp-copyrow{display:flex;flex-wrap:wrap;gap:var(--sp-8);align-items:center;margin:var(--sp-8) 0}
.xp-copyrow label{font-size:var(--fs-meta);font-weight:600;flex:0 0 auto}
.xp-copyrow .xp-input{flex:1 1 280px;min-width:0}
.xp-hist-note{color:var(--muted);font-size:var(--fs-meta)}

/* --- region 6: responsive -------------------------------------------------
   <960px: the sidebar stops being a column and stacks as the existing
   workspace nav block, the docked panel becomes the stacked preview the
   route already rendered at this width, and the tab rows scroll sideways. */
@media (max-width: 1279px){
  .xp-topbar{padding:var(--sp-16) var(--sp-24)}
  .xp-ws-main{padding:var(--sp-24) var(--sp-24) var(--sp-48)}
}
@media (max-width: 959px){
  .xp-shell,.xp-shell[data-preview="closed"]{grid-template-columns:minmax(0,1fr)}
  .xp-side{position:static;height:auto;overflow:visible;padding-bottom:var(--sp-16)}
  .xp-side-foot{margin-top:var(--sp-8)}
  .xp-topbar{flex-wrap:wrap;padding:var(--sp-16)}
  .xp-ws-main{padding:var(--sp-24) var(--sp-16) var(--sp-48)}
  .xp-preview{position:static;height:auto;border-left:0;
    border-top:var(--border-w) solid var(--line);padding:var(--sp-24) var(--sp-16)}
  .xp-toolbar{flex-wrap:wrap}
  .xp-menu-panel{right:auto;left:0}
  .xp-continue-grid{grid-template-columns:1fr}
  .xp-continue-card{padding-left:0;padding-right:0}
  .xp-continue-card+.xp-continue-card{border-left:0;border-top:var(--border-w) solid var(--line)}
}
@media (max-width: 719px){
  /* cards keep the row anatomy: mark, semibold title, sub-label, edition and
     the arrow — the header row goes, the row itself becomes a two-column flex
     card (document + arrow on the first line, Type/Edition wrapped beneath) */
  .xp-doc-table{table-layout:auto}
  .xp-doc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .xp-doc-table tbody tr{display:flex;flex-wrap:wrap;align-items:center;
    border-bottom:var(--border-w) solid var(--line);padding:var(--sp-8) 0}
  .xp-doc-table td{display:block;border:0;padding:0}
  .xp-doc-table .xp-cell-doc{flex:1 1 auto;min-width:0}
  .xp-doc-table .xp-cell-go{flex:0 0 auto;padding-left:var(--sp-8)}
  .xp-doc-table .xp-cell-type,.xp-doc-table .xp-cell-edition{flex:1 1 100%;
    padding-left:44px;font-size:13px;color:var(--muted)}
  .xp-doc-table td[data-label]:not(.xp-cell-doc):not(.xp-cell-go)::before{
    content:attr(data-label) ": ";font-weight:600}
  /* a card has the width a phone does not: the snippet unfolds onto its own
     line again, so the separator dot that joined it to the meta line goes */
  .xp-row-meta{display:block}
  .xp-row-meta .xp-row-snippet::before{content:none}
  .xp-row-snippet{white-space:normal}
}