/* ============================================================================
   publish.css — the memory compiler, as a document
   ----------------------------------------------------------------------------
   The starting point is Astra's v2 study (prototype/v2/publish/ +
   prototype/v2/shared/style.css) and docs/design/v2-pages.md §A. Publish. The
   study's recipes are carried over rule for rule; what changed is scope — the
   study shared one stylesheet across five pages, this file dresses one page —
   and the demonstration controls, which the design says should not ship.

   Nothing below invents a colour, blur, shadow, radius, duration or type value.
   Every declaration resolves through src/shared/tokens.css, so the
   [data-theme="dark"] block in tokens-dark.css re-points all of it for free —
   including the SVG strokes and the label grounds under the drawing's plates.

   Load order: tokens.css, tokens-dark.css, shell.css, then this file.

   The measurements are the design's table, not preference:
     document frame 1180px incl. 18px sides · title 43px/500/-.045em/1.15
     body 13 · card copy 12 · notes 11 · mono labels 10
     panel r16 / --brand-20 / --paper-66 / --blur-panel / --sh-4-panel
     card r18 · identity tile 46px · title 17px
     primary action r11, min-height 40px, orange fill, explicit foreground
     content column 767px + card column 355px, 22px gutter at maximum width
   ========================================================================== */

/* ── ground and frame ────────────────────────────────────────────────────── */

/* agent.html's two washes, so a page arriving from that one does not change
   temperature under the reader. */
.pb-ground{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 16% -8%, var(--brand-09), transparent 62%),
    radial-gradient(900px 520px at 98% 10%, var(--brand-07), transparent 58%),
    var(--paper);
}

.pb-main{
  width:100%; max-width:1180px; margin:0 auto;
  padding:40px 18px 25px;
  font-size:13px; line-height:1.55;
  min-width:0;
}
.pb-boot{ color:var(--graphite); font-size:13px; margin:0; }

.pb-skip{
  position:fixed; top:-80px; left:10px; z-index:80;
  padding:12px; background:var(--paper); color:var(--ink);
  border:1px solid var(--border); border-radius:var(--r-9);
  text-decoration:none;
}
.pb-skip:focus{ top:8px; }

/* the bar's route label, in the shell's own mono/graphite */
.pb-route{ font:10px var(--font-mono); color:var(--graphite); }

.pb-main p, .pb-main h1, .pb-main h2, .pb-main h3, .pb-main figure{ margin:0; }
.pb-main p + p{ margin-top:10px; }
.pb-main a{ color:inherit; text-underline-offset:3px; }
.pb-main button, .pb-main a{ -webkit-tap-highlight-color:transparent; }

/* ── heading ─────────────────────────────────────────────────────────────── */

.pb-heading{ margin-bottom:30px; max-width:850px; }
.pb-eyebrow{ font:10px var(--font-mono); letter-spacing:.12em; color:var(--graphite); margin-bottom:13px; }
.pb-heading h1{
  font-family:var(--font-display); font-size:clamp(29px,3.5vw,43px);
  font-weight:500; letter-spacing:-.045em; line-height:1.15;
}
.pb-lead{ margin-top:14px; color:var(--graphite); font-size:14px; line-height:1.65; max-width:690px; }

/* ── the four-part progress rail ─────────────────────────────────────────── */

.pb-steps{
  display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:24px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.pb-steps > div{ padding:12px 0; font-size:11px; color:var(--graphite); }
.pb-steps b{
  display:inline-grid; place-items:center; width:22px; height:22px;
  border:1px solid var(--border); border-radius:50%;
  font:10px var(--font-mono); margin-right:8px;
}
.pb-steps .is-active{ color:var(--ink); }
.pb-steps .is-active b{ background:var(--brand); border-color:var(--brand); color:var(--on-brand,var(--ink)); }
.pb-steps .is-done b{ border-color:var(--brand-45); color:var(--brand); }

/* ── layout ──────────────────────────────────────────────────────────────── */

/* 767 + 22 + 355 + 36 side padding = 1180 */
.pb-two{ display:grid; grid-template-columns:minmax(0,1fr) 355px; gap:22px; align-items:start; }
.pb-even{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.pb-stack{ display:grid; gap:18px; align-content:start; min-width:0; }
.pb-focus{ outline:none; }

/* ── panels ──────────────────────────────────────────────────────────────── */

.pb-panel{
  border:1px solid var(--brand-20); background:var(--paper-66);
  border-radius:var(--r-16); box-shadow:var(--sh-4-panel);
  -webkit-backdrop-filter:var(--blur-panel); backdrop-filter:var(--blur-panel);
  min-width:0; overflow:hidden;
}
.pb-phead{
  display:flex; gap:9px; padding:13px 16px; align-items:center;
  border-bottom:1px solid var(--border);
}
.pb-phead h2{ font:600 14px var(--font-display); letter-spacing:-.015em; }
.pb-ord{ font:10px var(--font-mono); color:var(--graphite); }
.pb-ptail{ margin-left:auto; color:var(--graphite); font:10px var(--font-mono); }
.pb-pbody{ padding:18px; }

/* ── type roles ──────────────────────────────────────────────────────────── */

.pb-note{ color:var(--graphite); font-size:11px; line-height:1.6; }
.pb-micro{ font:10px/1.5 var(--font-mono); color:var(--graphite); }
.pb-label{ font:600 10px var(--font-display); letter-spacing:.1em; color:var(--graphite); text-transform:uppercase; }
.pb-good{ color:var(--ok-text); }
.pb-bad{ color:var(--danger-text); }
.pb-figcopy{ font-size:24px; font-family:var(--font-display); letter-spacing:-.035em; line-height:1.3; margin:10px 0 5px; }

/* key/value row: hairline divider, tabular numerals, compact metadata */
.pb-kv{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--border); padding:9px 0;
  font-size:11px; color:var(--graphite);
}
.pb-kv:last-child{ border:0; }
.pb-kv b{
  color:var(--ink); font:500 12px/1.5 var(--font-mono);
  font-variant-numeric:tabular-nums; text-align:right;
}
.pb-kv b.pb-good{ color:var(--ok-text); }
.pb-kv b.pb-bad{ color:var(--danger-text); }

.pb-badge{
  display:inline-flex; padding:2px 7px; border:1px solid var(--border);
  border-radius:var(--r-3); font:600 9px/1.5 var(--font-display);
  letter-spacing:.06em; text-transform:uppercase;
}
.pb-badge.pb-good{ border-color:var(--ok-text); }
.pb-badge.pb-bad{ border-color:var(--danger-text); }
.pb-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }

/* ── actions ─────────────────────────────────────────────────────────────── */

.pb-btn{
  display:inline-flex; justify-content:center; align-items:center; gap:9px;
  padding:10px 18px; min-height:40px;
  border:1px solid var(--brand); background:var(--brand);
  color:var(--on-brand,var(--ink)); text-decoration:none;
  font-size:12px; font-weight:600; border-radius:var(--r-11);
  transition:transform var(--dur-140) var(--ease),
             background var(--dur-140) var(--ease);
  white-space:nowrap;
}
.pb-btn.ghost{ background:var(--glass-fill-50); color:var(--ink); border-color:var(--border); }
.pb-btn:active{ transform:scale(.98); }
.pb-btn:disabled{
  cursor:not-allowed; color:var(--graphite); background:var(--paper);
  border-color:var(--border); transform:none;
}
@media (hover:hover) and (pointer:fine){
  .pb-btn:hover{ background:var(--brand-88); }
  .pb-btn.ghost:hover{ background:var(--brand-08); }
  .pb-btn:disabled:hover{ background:var(--paper); }
}
.pb-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:20px; }
.pb-actions .pb-note{ flex:1; min-width:130px; }

/* ── the drawing ─────────────────────────────────────────────────────────── */

.pb-figure{ position:relative; width:100%; min-width:0; }
.pb-figure svg{ width:100%; display:block; overflow:visible; }
.pb-figintro{ display:flex; justify-content:space-between; padding-top:5px; }
.pb-figure figcaption{
  display:flex; justify-content:space-between; gap:18px;
  padding:13px 0; border-top:1px solid var(--border);
  color:var(--graphite); font:10px/1.6 var(--font-mono);
}
.pb-art{ min-height:300px; }
.pb-art svg{ aspect-ratio:680/330; }

/* every stroke and fill in the drawing is a token, so the theme swap reaches
   the SVG with no repaint */
.pb-thread{ fill:none; stroke:var(--graphite); stroke-width:.7; }
.pb-dot{ fill:var(--ink); }
.pb-face{ fill:var(--graphite); stroke:none; }
.pb-gtitle{ font:500 13px var(--font-display); fill:var(--ink); }
.pb-gmeta{ font:10px var(--font-mono); fill:var(--graphite); }
.pb-plate{ fill:var(--label-ground,var(--paper)); }

/* ── source execution ────────────────────────────────────────────────────── */

.pb-task{ font:600 21px/1.35 var(--font-display); letter-spacing:-.025em; margin:14px 0 16px; }
.pb-meta{ padding:15px 0 0; }
.pb-event{ display:flex; gap:15px; padding:9px 0; font-size:11px; border-bottom:1px solid var(--border); }
.pb-event:last-child{ border:0; }
.pb-event time{ min-width:52px; font:10px var(--font-mono); color:var(--graphite); font-variant-numeric:tabular-nums; }
.pb-event span{ flex:1; }
.pb-event b{ font:500 11px var(--font-mono); font-variant-numeric:tabular-nums; }
.pb-inline{
  padding:12px 16px; background:var(--glass-fill-50);
  border:1px solid var(--border); border-radius:var(--r-9);
}

/* ── the compiler checklist ──────────────────────────────────────────────── */

.pb-list{ padding:0; margin:15px 0 0; list-style:none; }
.pb-list li{
  display:flex; gap:12px; align-items:center; padding:9px 0;
  font:11px var(--font-mono); color:var(--graphite);
  border-bottom:1px solid var(--border);
}
.pb-list li:last-child{ border:0; }
.pb-list li::before{ content:'·'; width:18px; text-align:center; color:var(--graphite); }
.pb-list li.is-done::before{ content:'✓'; color:var(--ok-text); }
.pb-list li.is-current{ color:var(--ink); }
.pb-list li.is-current::before{ content:'→'; color:var(--brand); }

/* ── the privacy check ───────────────────────────────────────────────────── */

.pb-privacy{ border-left:3px solid var(--ok-text); }
.pb-privacy.is-blocked{ border-left-color:var(--danger-text); }
.pb-privacy .pb-result{
  margin-top:15px; padding-top:12px; border-top:1px solid var(--border);
  font:600 12px var(--font-mono);
}

/* ── the capsule card (the marketplace detail card's recipe) ─────────────── */

.pb-card{
  border:1px solid var(--brand-20); border-radius:var(--r-18);
  background:var(--paper-66); box-shadow:var(--sh-4-detail);
  -webkit-backdrop-filter:var(--blur-panel); backdrop-filter:var(--blur-panel);
  padding:17px; min-width:0;
}
.pb-cardtop{ display:flex; align-items:center; gap:11px; }
.pb-cardtop h3{ font:600 17px/1.3 var(--font-display); letter-spacing:-.02em; }
.pb-cardtop p{ font-size:10px; margin-top:5px; }
.pb-cardtop a{ text-decoration:none; }
.pb-identity{
  width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center;
  font:500 16px var(--font-mono); border:1px solid var(--border);
  border-radius:var(--r-10); background:var(--glass-fill-50); color:var(--graphite);
}
.pb-carddesc{ font-size:12px; margin-top:15px; color:var(--graphite); }
.pb-cardmetrics{ margin-top:12px; }
.pb-cardmetrics .pb-kv b{ max-width:66%; font-size:11px; }
.pb-cardbottom{
  margin:15px -17px -17px; padding:12px 17px;
  border-top:1px solid var(--border);
  display:flex; gap:12px; justify-content:space-between; align-items:center;
  font-size:11px; background:var(--paper-97);
  border-radius:0 0 var(--r-18) var(--r-18);
}
.pb-cardbottom .mono{ font-variant-numeric:tabular-nums; }
.pb-card small{ font-size:10px; color:var(--graphite); }

/* ── publication, empty, error ───────────────────────────────────────────── */

.pb-success{ padding:35px 25px; text-align:center; }
.pb-resultbig{
  font:500 clamp(25px,3vw,36px)/1.1 var(--font-display);
  letter-spacing:-.04em; margin:12px 0;
}
.pb-empty{ padding:40px 24px; text-align:center; }
.pb-empty h3{ font:600 17px/1.3 var(--font-display); letter-spacing:-.02em; }
/* a measure, so the copy reads as a paragraph rather than as a rule across the
   whole 1180px frame */
.pb-empty > h3, .pb-empty > p{ max-width:520px; margin-left:auto; margin-right:auto; }
.pb-empty .pb-btn{ margin:20px 5px 0; }

/* ── reduced transparency: resolve the glass to an opaque ground ─────────── */

@media (prefers-reduced-transparency:reduce){
  .pb-panel, .pb-card{
    background:var(--surface,var(--paper));
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .pb-ground{ background:var(--paper); }
}

/* ── tablet ──────────────────────────────────────────────────────────────── */

@media (max-width:1000px){
  .pb-two{ grid-template-columns:minmax(0,1fr) 320px; gap:18px; }
}

/* ── phone: the board stacks, the task and the action come first ─────────── */

@media (max-width:768px){
  .pb-main{ padding:27px 16px 20px; }
  .pb-heading{ margin-bottom:23px; }
  .pb-heading h1{ font-size:31px; }
  .pb-lead{ font-size:13px; }
  .pb-route{ display:none; }
  .pb-two, .pb-even{ grid-template-columns:1fr; gap:20px; }
  /* Source only: the execution panel is encountered before the illustration,
     so the task and Extract memory are the first things on the screen. */
  .pb-source > .pb-sourcepanel{ order:-1; }
  .pb-steps{ gap:4px; }
  .pb-steps > div{ font-size:10px; padding:10px 0; }
  .pb-steps b{ margin-right:4px; width:18px; height:18px; font-size:9px; }
  .pb-art{ min-height:0; }
  .pb-art svg{ min-height:205px; }
  .pb-figure figcaption{ gap:12px; font-size:9px; }
  .pb-panel{ -webkit-backdrop-filter:var(--blur-md); backdrop-filter:var(--blur-md); }
  .pb-task{ font-size:19px; }
}

/* ── reduced motion: nothing moves; the compiler still advances its states ── */

@media (prefers-reduced-motion:reduce){
  .pb-main *, .pb-main *::before, .pb-main *::after{
    animation:none !important; transition:none !important;
  }
  .pb-btn:active{ transform:none; }
}

/* ==========================================================================
   embed mode — /overview mounts this route in a same-origin iframe
   --------------------------------------------------------------------------
   publish.html's head stamps [data-pb-embed] on <html> before first paint (and
   publish.js re-stamps it), so every rule below is scoped to an attribute the
   standalone route never carries: /publish on its own cannot match one of them.

   What the frame keeps is the compiler figure, the compiled memory card and its
   result line. What it drops is everything the surrounding document already
   supplies — the global header, the `/ publish` route label, the skip link, the
   page heading and the four-step progress rail — plus the two brand washes,
   which read as a second competing ground once this sits inside a page that
   already has one.

   The frame's height is its content's: the parent measures it and sizes the
   iframe to it, so this document never scrolls and a wheel over the rectangle
   chains straight through to the page underneath.
   ========================================================================== */

/* The progress rail STAYS: it is the frame's clock, the thing that shows the
   compiler running rather than posing. The page heading goes, because the
   document around the frame already introduced it. */
[data-pb-embed] .shell-head,
[data-pb-embed] .pb-skip,
[data-pb-embed] .pb-route,
[data-pb-embed] .pb-heading{ display:none !important; }

[data-pb-embed] .pb-ground{ background:var(--paper); }
/* the frame IS the column: the stage around it is already the document's own
   width, so a second 1180px cap inside it only inset the drawing */
[data-pb-embed] .pb-main{ max-width:none; padding:22px 18px 18px; }
[data-pb-embed] .pb-art{ min-height:0; }

/* The frame is a stage, so it is laid out like one: the document fills it and
   the journey bar is pinned to its foot, exactly where the demonstration's bar
   sits in its own rectangle. The parent sizes the frame to the tallest state
   and never shrinks it, so without this the bar would walk up and down the
   stage as the compiler moved between states. */
[data-pb-embed] body{ min-height:100dvh; display:flex; flex-direction:column; }
[data-pb-embed] .pb-main{ flex:1 1 auto; }
[data-pb-embed] .jb{ flex:0 0 auto; margin-top:auto; }

/* the bar is the only control in here: the panels' own buttons would scrub the
   sequence behind its back. Their notes stay — they say what the state is. */
[data-pb-embed] .pb-actions .pb-btn{ display:none; }
[data-pb-embed] .pb-success{ padding:22px 0 0; text-align:left; }
[data-pb-embed] .pb-success .pb-resultbig{ margin:9px 0 12px; }
[data-pb-embed] .pb-success .pb-note{ max-width:58ch; }

@media (max-width:768px){
  [data-pb-embed] .pb-main{ padding:18px 16px 22px; }
  [data-pb-embed] .pb-success{ padding-top:16px; }
}