/* ============================================================================
   Prime Foundry — F2 "Daylight (brand)" design system (tokens + components)
   Light, editorial-premium control room. Palette + type + components derive
   from the approved hkleinwaechter.com brand. Every cockpit UI step reads its
   color/type/components from here — no ad-hoc styles.
   Source of truth: docs/design/F2-reference.html + docs/design/BRIEF.md
   ============================================================================ */
:root {
  /* Palette — paper base, white surfaces, hairline neutrals, navy accent, status set */
  --pf-paper:     #FAF3E3;  /* app background */
  --pf-bg:        #FAF3E3;  /* alias — app background */
  --pf-surface:   #FFFFFF;  /* panels / cards */
  --pf-surface-2: #F2ECDF;  /* raised / hover / active nav */
  --pf-line:      #E7E3DA;  /* hairlines */
  --pf-line-2:    #D9D3C5;  /* stronger divider */
  --pf-ink:       #1C1E21;  /* primary text */
  --pf-muted:     #545A61;  /* secondary text */
  --pf-faint:     #8A9099;  /* tertiary / labels */
  --pf-navy:      #122F4D;  /* accent navy */
  --pf-navy-2:    #0C2138;  /* accent navy hover */
  --pf-accent:    #122F4D;  /* alias — primary action */
  --pf-accent-2:  #0C2138;  /* alias — accent hover */
  --pf-green:     #274F42;
  --pf-mint:      #B7DFD2;
  /* A6 anvil brand accents (2026-07): brass = secondary detail (never body
     text on cream), ember = pure signal (glow/working states, never text) */
  --pf-brass:     #BA9745;
  --pf-ember:     #E8641E;
  /* status: live/online = green, casting = amber, attention = red */
  --pf-ok:        #274F42;  /* online / authed / ready  (live) */
  --pf-warn:      #B4732A;  /* pending / casting        (cast) */
  --pf-bad:       #B23A3A;  /* offline / logged-out     (dead) */
  --pf-radius:    12px;
  --pf-radius-sm: 8px;
  --pf-disp: "Source Serif 4", Georgia, "Times New Roman", serif;
  --pf-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pf-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* Desk / PF-Chat night panel (chat-c mock, chain pf-chat step 2).
     Brass + ember accents already live above (A6 anvil accents) — reused, not
     redefined; the night set below completes the Desk palette. */
  --pf-night:       #0C2138;  /* desk panel background */
  --pf-night-ink:   #F2ECDC;  /* light text on night */
  --pf-night-muted: #93A0B0;  /* secondary text on night */
  --pf-night-line:  color-mix(in srgb, #FAF3E3 13%, transparent); /* hairline on night */
  --pf-night-well:  #081827;  /* code well inside perm card */
}

/* ---- base ---- */
.pf { background: var(--pf-paper); color: var(--pf-ink); font-family: var(--pf-sans);
      font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.pf-mono { font-family: var(--pf-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pf-muted { color: var(--pf-muted); }
.pf-label { font-family: var(--pf-sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pf-navy); }

/* ---- brand lockup: anvil badge + Source Serif wordmark ---- */
.pf-wrap { max-width: 1160px; margin: 0 auto; padding: 0 30px; }
.pf-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
            font-family: var(--pf-disp); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--pf-ink); }
.pf-brand .pf-word-2 { color: var(--pf-muted); font-weight: 600; }
.pf-brand .pf-mark, .pf-brand img.pf-mark { width: auto; height: 30px; flex: none; display: block; transform: translateY(4px); }
/* legacy .pf-dot fallback — a navy chip so old markup stays on-brand */
.pf-brand .pf-dot { width: 28px; height: 28px; border-radius: 7px; flex: none; position: relative;
            background: var(--pf-navy); box-shadow: 0 4px 10px -5px rgba(18,47,77,.7); }
.pf-brand .pf-dot::after { content: ""; position: absolute; inset: 7px; border-radius: 2px; background: var(--pf-paper); }

/* ---- top-bar Hub shell ---- */
.pf-topbar-wrap { background: var(--pf-surface); border-bottom: 1px solid var(--pf-line); }
.pf-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 72px; }
.pf-topnav { display: flex; gap: 2px; margin-right: auto; margin-left: 14px; }
.pf-topnav a { font-family: var(--pf-sans); font-size: 13px; font-weight: 500; color: var(--pf-muted);
               text-decoration: none; padding: 8px 13px; border-radius: 8px; }
.pf-topnav a:hover { color: var(--pf-ink); background: var(--pf-surface-2); }
.pf-topnav a.active { color: var(--pf-navy); background: var(--pf-surface-2); }
.pf-acct { position: relative; display: flex; align-items: center; gap: 12px; font-family: var(--pf-mono); font-size: 12px; color: var(--pf-muted); }
/* Vertical padding only — the horizontal inset comes solely from .pf-wrap, so
   the content column lines up with the topbar brand (which is .pf-wrap alone). */
.pf-content { padding: 30px 0 60px; }
/* Hub shell is a column so the quiet footer sits at the bottom even on short
   pages. (Class renamed from .pf-cockpit when "Cockpit" became the customer's
   own site and this app became the Hub.) */
/* No reset ships with this app, so the browser's default 8px body margin was
   letting the paper background show above and beside the full-bleed topbar —
   the header read as a floating white card instead of a bar. Scoped to .pf so
   the landing (its own layout and reset) is untouched. */
body.pf { margin: 0; }
body.pf-hub { display: flex; flex-direction: column; min-height: 100dvh; }
body.pf-hub .pf-content { flex: 1 0 auto; width: 100%; }

/* ---- account chip + popover (header C) ----
   The raw email never renders in the bar — it was what forced the old mobile
   header to wrap into a three-row stack. Chip = initials; details live in the
   popover. Open state is .pf-pop-open on .pf-acct (popover Stimulus controller). */
.pf-chip { width: 44px; height: 44px; margin-right: -6px; display: flex; align-items: center; justify-content: center;
           background: none; border: 0; padding: 0; cursor: pointer; }
.pf-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--pf-navy); color: var(--pf-paper);
             display: flex; align-items: center; justify-content: center; font: 600 12px var(--pf-sans);
             letter-spacing: .04em; flex: none; box-shadow: 0 4px 10px -5px rgba(18,47,77,.7); }
.pf-acct.pf-pop-open .pf-chip .pf-avatar { outline: 2px solid var(--pf-brass); outline-offset: 2px; }
.pf-pop { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
          width: min(300px, calc(100vw - 28px));
          background: var(--pf-surface); border: 1px solid var(--pf-line-2); border-radius: var(--pf-radius);
          overflow: hidden; box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--pf-navy-2) 45%, transparent); }
.pf-acct.pf-pop-open .pf-pop { display: block; }
.pf-pop-id { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--pf-line); }
.pf-pop-who { min-width: 0; }
.pf-pop-k { font-family: var(--pf-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pf-faint); }
.pf-pop-e { font-family: var(--pf-mono); font-size: 12px; color: var(--pf-muted); overflow-wrap: anywhere; }
.pf-pop-form { margin: 0; }
.pf-pop-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 16px;
              background: none; border: 0; cursor: pointer; text-align: left;
              color: var(--pf-ink); font: 500 14px var(--pf-sans); }
.pf-pop-row:hover { background: var(--pf-surface-2); }
.pf-pop-row svg { width: 17px; height: 17px; stroke: var(--pf-faint); flex: none; }
.pf-pop-row.pf-pop-out { color: var(--pf-bad); }
.pf-pop-row.pf-pop-out svg { stroke: var(--pf-bad); }

/* ---- minimal footer (header C) ----
   The API docs link lives here — quiet, small, out of the header by decision. */
.pf-foot { border-top: 1px solid var(--pf-line); }
.pf-foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px;
                 padding: 16px 0 18px; font-family: var(--pf-mono); font-size: 11.5px; color: var(--pf-faint); }
.pf-foot a { color: var(--pf-faint); text-decoration: underline; text-underline-offset: 2px; }
.pf-foot a:hover { color: var(--pf-muted); }

/* ---- legacy left-nav shell (kept so any older layout still renders light) ---- */
.pf-shell { display: block; min-height: 100vh; background: var(--pf-paper); }
.pf-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
          background: var(--pf-surface); border-bottom: 1px solid var(--pf-line); padding: 14px 22px; }
.pf-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: var(--pf-radius-sm);
            color: var(--pf-muted); text-decoration: none; font-weight: 500; }
.pf-nav a:hover { background: var(--pf-surface-2); color: var(--pf-ink); }
.pf-nav a.active { background: var(--pf-surface-2); color: var(--pf-navy); }
.pf-main { display: flex; flex-direction: column; min-width: 0; }

/* ---- primitives ---- */
.pf-card { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius);
           padding: 18px 20px; box-shadow: 0 14px 30px -24px rgba(28,30,33,.35); }
.pf-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--pf-radius-sm);
          border: 1px solid var(--pf-line-2); background: linear-gradient(180deg,#fff,#f3f5f7); color: var(--pf-ink);
          font: 600 13px/1 var(--pf-sans); cursor: pointer; box-shadow: inset 0 1px 0 #fff; text-decoration: none; }
.pf-btn:hover { border-color: var(--pf-faint); }
.pf-btn-primary { background: var(--pf-navy); border-color: var(--pf-navy); color: #fff;
                  box-shadow: 0 8px 20px -8px rgba(18,47,77,.55); }
.pf-btn-primary:hover { background: var(--pf-navy-2); border-color: var(--pf-navy-2); }
.pf-btn:disabled { opacity: .5; cursor: not-allowed; }

.pf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.pf-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pf-badge-ok      { color: var(--pf-ok);   background: color-mix(in srgb, var(--pf-ok) 12%, transparent); }
.pf-badge-warn    { color: var(--pf-warn); background: color-mix(in srgb, var(--pf-warn) 14%, transparent); }
.pf-badge-bad     { color: var(--pf-bad);  background: color-mix(in srgb, var(--pf-bad) 12%, transparent); }
.pf-badge-unknown { color: var(--pf-faint);background: color-mix(in srgb, var(--pf-faint) 16%, transparent); }

/* ============================================================================
   SIGNATURE: brushed-metal "nameplate" VM tile (.plate/.rivet/.engr/.lamp/.etch)
   Ported verbatim from F2-reference.html. Only ever used inside tokens.css pages
   (no Tailwind), so the terse class names cannot collide.
   ============================================================================ */
/* auto-fit (not auto-fill) so a lone Brain fills the content column and lines up
   with the full-width hosting card above it — no tiny card marooned on the left.
   min(100%, …) lets the track shrink on mobile instead of overflowing. */
.pf-vm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 22px; align-items: start; }

.plate { position: relative; border-radius: 13px; padding: 22px 22px 20px;
  background: linear-gradient(158deg,#E4E6E9,#F4F5F7 34%,#D5D8DD 63%,#EAECEF);
  border: 1px solid #C6CAD0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(0,0,0,.05), 0 14px 30px -20px rgba(28,30,33,.4); }
.plate::after { content: ""; position: absolute; inset: 0; border-radius: 13px; pointer-events: none;
  background: repeating-linear-gradient(94deg,rgba(255,255,255,0) 0 2px,rgba(0,0,0,.02) 2px 3px); }
.rivet { position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#fff,#aeb4bc 55%,#7f858e); box-shadow: 0 1px 1px rgba(0,0,0,.3); }
.rivet.tl { top: 9px; left: 9px; } .rivet.tr { top: 9px; right: 9px; }
.rivet.bl { bottom: 9px; left: 9px; } .rivet.br { bottom: 9px; right: 9px; }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; z-index: 1; padding: 0 6px; }
.engr { font-family: var(--pf-disp); font-weight: 700; font-size: 20px; letter-spacing: .01em; color: #232830;
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(0,0,0,.1); }
.engr-link { text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engr-link:hover, .engr-link:focus-visible { color: var(--pf-navy); text-decoration: underline; text-underline-offset: 3px; }

/* The serial stamped under the nameplate: our id + Hetzner's, always visible. */
.pl-ids { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; padding: 0 6px; }
.pl-id { font-family: var(--pf-mono); font-size: 10.5px; letter-spacing: -.01em; color: #6b717a;
  text-transform: uppercase; white-space: nowrap; }
.pl-id b { color: #3c424b; font-weight: 600; text-transform: none; user-select: all; }

.lamp { display: inline-flex; align-items: center; gap: 7px; font-family: var(--pf-sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: #4a5058; white-space: nowrap; }
.lamp .b { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lamp.live .b { background: var(--pf-green); box-shadow: 0 0 0 3px var(--pf-mint), 0 0 6px rgba(39,79,66,.5); }
.lamp.cast .b { background: var(--pf-warn); box-shadow: 0 0 0 2px rgba(180,115,42,.22), 0 0 7px var(--pf-warn); }
.lamp.dead .b { background: var(--pf-bad); box-shadow: 0 0 0 2px rgba(178,58,58,.2); }
.etch { position: relative; z-index: 1; margin-top: 14px; padding: 12px 14px; border-radius: 8px;
  background: rgba(18,47,77,.06); box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.etch div { font-family: var(--pf-mono); font-size: 11.5px; color: #3c424b; overflow: hidden; text-overflow: ellipsis; }
.etch b { color: var(--pf-navy); font-weight: 600; }

/* CEO health verdict — the plain-language green/orange reading that leads the
   active plate. Technical signals + controls hide under .pl-tech below it. */
.pl-health { position: relative; z-index: 1; margin-top: 16px; display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px; border-radius: 9px; border: 1px solid transparent;
  background: rgba(18,47,77,.05); box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.pl-health-dot { flex: none; width: 11px; height: 11px; margin-top: 3px; border-radius: 50%;
  background: var(--pf-faint); }
.pl-health-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-health-copy strong { font-family: var(--pf-sans); font-size: 13.5px; font-weight: 650; color: var(--pf-navy); }
.pl-health-detail { font-family: var(--pf-sans); font-size: 12px; color: #5a616b; line-height: 1.4; }
.pl-health.is-green  { background: color-mix(in srgb, var(--pf-ok) 9%, #fff); border-color: color-mix(in srgb, var(--pf-ok) 26%, transparent); }
.pl-health.is-green  .pl-health-dot { background: var(--pf-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-ok) 20%, transparent); }
.pl-health.is-orange { background: color-mix(in srgb, var(--pf-warn) 11%, #fff); border-color: color-mix(in srgb, var(--pf-warn) 32%, transparent); }
.pl-health.is-orange .pl-health-dot { background: var(--pf-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-warn) 22%, transparent); }
.pl-health.is-orange .pl-health-copy strong { color: var(--pf-warn); }
.pl-health.is-red    { background: color-mix(in srgb, var(--pf-bad) 10%, #fff); border-color: color-mix(in srgb, var(--pf-bad) 30%, transparent); }
.pl-health.is-red    .pl-health-dot { background: var(--pf-bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-bad) 20%, transparent); }
.pl-health.is-red    .pl-health-copy strong { color: var(--pf-bad); }
.pl-health.is-setup  .pl-health-dot { background: var(--pf-faint); }

/* The web server's IP — the one thing a CEO needs, to forward a domain at. */
.ws-addr { position: relative; z-index: 1; margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(180deg, #fff, #f4f6f8); border: 1px solid var(--pf-line);
  display: flex; flex-direction: column; gap: 2px; }
.ws-addr-label { font-family: var(--pf-sans); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pf-faint); }
.ws-addr-ip { font-family: var(--pf-mono); font-size: 20px; font-weight: 600; color: var(--pf-navy);
  letter-spacing: .01em; user-select: all; }
.ws-addr-hint { font-family: var(--pf-sans); font-size: 11.5px; color: var(--pf-faint); }

/* Cockpit "your custom URL" banner — the customer's live hosting address. */
.pf-url-card { padding: 18px 20px; border-radius: var(--pf-radius); border: 1px solid var(--pf-line);
  background: linear-gradient(180deg, #fff, #f4f6f8); }
.pf-url-label { margin: 4px 0 2px; font-size: 15px; color: var(--pf-ink); }
.pf-url-value { display: inline-block; font-family: var(--pf-mono); font-size: 24px; font-weight: 700;
  color: var(--pf-navy); letter-spacing: .01em; text-decoration: none; word-break: break-all; }
.pf-url-value:hover { text-decoration: underline; }

.pl-tech { position: relative; z-index: 1; margin-top: 16px; }
.pl-tech > summary { list-style: none; cursor: pointer; user-select: none;
  font-family: var(--pf-sans); font-size: 11.5px; font-weight: 500; color: #6b7079;
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 2px; }
.pl-tech > summary::-webkit-details-marker { display: none; }
.pl-tech > summary::before { content: "▸"; font-size: 10px; transition: transform .15s ease; }
.pl-tech[open] > summary::before { transform: rotate(90deg); }
.pl-tech > summary:hover { color: var(--pf-navy); }
.pl-more { position: relative; z-index: 1; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(18,47,77,.10); }
.pl-more-link { font-family: var(--pf-sans); font-size: 12px; font-weight: 600; color: var(--pf-navy);
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.pl-more-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.pl-acts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.plate .btn, .plate form { margin: 0; }
.plate .btn { font-family: var(--pf-sans); font-size: 12px; font-weight: 500; color: var(--pf-navy);
  background: linear-gradient(180deg,#fdfdfe,#eef0f2); border: 1px solid #c8ccd2; border-radius: 8px;
  padding: 7px 12px; cursor: pointer; box-shadow: inset 0 1px 0 #fff; }
.plate .btn:hover { border-color: #aeb4bc; }
.plate .btn.warn { color: var(--pf-bad); border-color: #e0c2c2; }

/* ---- per-Brain detail page: the plate, unfolded ---------------------------
   A key/value ledger in the plate's own etched vocabulary. `auto-fit` collapses
   to one column on a phone with no media query. Hairlines come from each cell's
   1px shadow, not the container's background — a part-filled last row must end
   in a clean edge, not a grey block. */
.pf-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
  background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); overflow: hidden; }
.pf-kv > div { background: var(--pf-surface); padding: 13px 15px; min-width: 0;
  box-shadow: 0 0 0 1px var(--pf-line); }
.pf-kv dt { font-family: var(--pf-sans); font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pf-faint); margin: 0 0 5px; }
.pf-kv dd { margin: 0; font-size: 14px; color: var(--pf-ink); overflow-wrap: anywhere; }
.pf-kv dd.pf-mono { font-size: 12.5px; user-select: all; }
.pf-kv dd.is-empty { color: var(--pf-faint); }

/* The detail page's traffic light — the same verdict the plate leads with,
   sized up. Colours come from .pl-health.is-* above; only the scale changes. */
.pf-verdict { display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px;
  border-radius: var(--pf-radius); border: 1px solid transparent; }
.pf-verdict .pl-health-copy strong { font-size: 16px; }
.pf-verdict .pl-health-detail { font-size: 13px; }
.pf-verdict .pl-health-dot { width: 13px; height: 13px; margin-top: 4px; }

/* ---- "forge" primary action (navy pill w/ anvil glyph) ---- */
.forge { display: inline-flex; align-items: center; gap: 10px; font-family: var(--pf-sans); font-weight: 600;
  font-size: 14.5px; color: #fff; background: var(--pf-navy); border: 0; border-radius: 10px; padding: 13px 22px;
  cursor: pointer; text-decoration: none; box-shadow: 0 8px 20px -8px rgba(18,47,77,.55); }
.forge:hover { background: var(--pf-navy-2); }
.forge svg { width: 16px; height: 16px; }

/* ---- typography + layout helpers ---- */
.pf-h1 { font-family: var(--pf-disp); font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.06; margin: 0 0 6px; }
.pf-h2 { font-family: var(--pf-disp); font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; }
.pf-eyebrow { font-family: var(--pf-sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pf-navy); }
.pf-lead { color: var(--pf-muted); margin: 0 0 18px; font-size: 15px; }
.pf-stack > * + * { margin-top: 14px; }
/* A <turbo-frame> is display:inline by default and is not itself a .pf-section,
   so a section wrapped in one drops out of the sibling rhythm below and butts
   against the block above it. Make frames block-level and transparent to the
   rhythm, so a framed section keeps the same gap as an unframed one. */
turbo-frame { display: block; }
.pf-section + .pf-section,
.pf-section + turbo-frame > .pf-section:first-child,
turbo-frame + .pf-section,
turbo-frame + turbo-frame > .pf-section:first-child { margin-top: 22px; }
.pf-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.pf-hint { color: var(--pf-faint); font-size: 12px; }
.pf-link { color: var(--pf-navy); text-decoration: none; }
.pf-link:hover { text-decoration: underline; }

/* ---- forms ---- */
.pf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pf-field > label { font-size: 12px; font-weight: 600; color: var(--pf-muted); }
.pf-input, .pf-select, textarea.pf-input {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: var(--pf-radius-sm);
  border: 1px solid var(--pf-line-2); background: var(--pf-surface); color: var(--pf-ink);
  font: 400 14px/1.4 var(--pf-sans); }
.pf-input:focus, .pf-select:focus, textarea.pf-input:focus {
  outline: none; border-color: var(--pf-navy); box-shadow: 0 0 0 3px rgba(18,47,77,.12); }
.pf-input.pf-mono { font-family: var(--pf-mono); }

/* ---- buttons + states ---- */
.pf-btn-danger { background: color-mix(in srgb, var(--pf-bad) 8%, #fff); border-color: color-mix(in srgb, var(--pf-bad) 40%, transparent); color: var(--pf-bad); }
.pf-btn-danger:hover { border-color: var(--pf-bad); }
.pf-btn-sm { padding: 6px 10px; font-size: 12px; }

/* ---- secret reveal (SSH private key) ---- */
.pf-secret { filter: blur(5px); transition: filter .15s ease; user-select: none; }
.pf-secret.is-revealed { filter: none; user-select: text; }
.pf-key-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* ---- onboarding gate steps ---- */
.pf-steps { display: flex; flex-direction: column; gap: 10px; }
.pf-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-sm); background: var(--pf-paper); }
.pf-step .pf-step-num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--pf-line); color: var(--pf-muted); flex: none; }
.pf-step.is-done .pf-step-num { background: var(--pf-mint); color: var(--pf-green); }
.pf-step .pf-step-body { flex: 1; min-width: 0; }
.pf-empty { color: var(--pf-muted); border: 1px dashed var(--pf-line-2); border-radius: var(--pf-radius); padding: 22px; text-align: center; }

/* ---- base-image build progress rail ---- */
.pf-phases { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pf-phase { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; font-family: var(--pf-mono); border: 1px solid var(--pf-line); color: var(--pf-muted); background: var(--pf-paper); }
.pf-phase::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pf-phase.is-done   { color: var(--pf-ok);   background: color-mix(in srgb, var(--pf-ok) 10%, transparent); border-color: color-mix(in srgb, var(--pf-ok) 30%, transparent); }
.pf-phase.is-active { color: var(--pf-warn); background: color-mix(in srgb, var(--pf-warn) 12%, transparent); border-color: color-mix(in srgb, var(--pf-warn) 35%, transparent); }
.pf-phase.is-active::before { animation: pf-phase-pulse 1.1s ease-in-out infinite; }
@keyframes pf-phase-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .pf-phase.is-active::before { animation: none; } }

/* ============================================================================
   Craftsman layer — tactile refinements for the nameplate fleet.
   Casting lifecycle (molten plate → cooled), breathing lamps, glint sweeps,
   in-flight button states, plaque onboarding, token-styled toasts.
   ============================================================================ */

/* -- lamps: breathing when live, pulsing while casting ---------------------- */
.lamp.live .b { animation: pf-lamp-breathe 3.2s ease-in-out infinite; }
@keyframes pf-lamp-breathe {
  0%, 100% { box-shadow: 0 0 0 3px var(--pf-mint), 0 0 6px rgba(39,79,66,.5); }
  50%      { box-shadow: 0 0 0 4px var(--pf-mint), 0 0 12px rgba(39,79,66,.75); }
}
.lamp.cast .b { animation: pf-lamp-cast 1.4s ease-in-out infinite; }
@keyframes pf-lamp-cast {
  0%, 100% { box-shadow: 0 0 0 2px rgba(180,115,42,.22), 0 0 7px var(--pf-warn); }
  50%      { box-shadow: 0 0 0 3px rgba(180,115,42,.34), 0 0 12px var(--pf-warn); }
}

/* -- online plate: slow glint sweep across the brushed metal ---------------- */
.glint { position: absolute; inset: 0; border-radius: 13px; overflow: hidden; pointer-events: none; z-index: 1; }
.glint::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 34%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 48%, rgba(255,255,255,0) 100%);
  transform: translateX(-140%) skewX(-14deg); animation: pf-glint 9s ease-in-out infinite; }
@keyframes pf-glint {
  0%   { transform: translateX(-140%) skewX(-14deg); }
  16%  { transform: translateX(440%) skewX(-14deg); }
  100% { transform: translateX(440%) skewX(-14deg); }
}

/* -- casting plate: molten placeholder, engraving still cooling ------------- */
.plate.casting { animation: pf-molten 2.6s ease-in-out infinite;
  border-color: color-mix(in srgb, var(--pf-warn) 42%, #C6CAD0); }
@keyframes pf-molten {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(0,0,0,.05),
             0 14px 30px -20px rgba(28,30,33,.4), 0 0 0 1px rgba(180,115,42,.18), 0 0 18px -2px rgba(180,115,42,.28); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(0,0,0,.05),
             0 14px 30px -20px rgba(28,30,33,.4), 0 0 0 1px rgba(180,115,42,.32), 0 0 30px 0 rgba(180,115,42,.42); }
}
.plate.casting .engr { filter: blur(.7px); opacity: .62; }
.cast-copy { position: relative; z-index: 1; margin-top: 14px; padding: 12px; border-radius: 8px;
  background: rgba(180,115,42,.07); box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
  font-family: var(--pf-mono); font-size: 11.5px; color: #7a5a30; }
.cast-copy .dots::after { content: ""; display: inline-block; width: 1.2em; text-align: left;
  animation: pf-dots 1.6s steps(4, end) infinite; }
@keyframes pf-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* mini casting rail: Pour ▸ Cool ▸ Stamp ▸ Ready */
.cast-rail { list-style: none; display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 0; }
.cast-rail li { display: inline-flex; align-items: center; gap: 5px; font-family: var(--pf-mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .02em; color: var(--pf-faint); }
.cast-rail li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.cast-rail .sep { color: #b9bec5; font-size: 9px; }
.cast-rail .sep::before { display: none; }
.cast-rail li.done { color: var(--pf-ok); }
.cast-rail li.active { color: var(--pf-warn); }
.cast-rail li.active::before { animation: pf-phase-pulse 1.1s ease-in-out infinite; box-shadow: 0 0 6px var(--pf-warn); }

/* -- button lifecycle: rest → pressed/in-flight → success -------------------- */
.plate .btn:active, .pf-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.12); }
.btn.is-busy, .pf-btn.is-busy { transform: translateY(1px); cursor: progress; color: var(--pf-muted);
  background: linear-gradient(180deg,#eef0f2,#e6e9ec); box-shadow: inset 0 1px 3px rgba(0,0,0,.14); border-color: #b8bdc4; }
.spin { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block;
  border: 1.5px solid rgba(18,47,77,.22); border-top-color: var(--pf-navy);
  animation: pf-spin .8s linear infinite; }
.plate .btn .spin, .pf-btn .spin { margin-right: 6px; vertical-align: -1px; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
.btn.is-done, .pf-btn.is-done { color: var(--pf-ok);
  border-color: color-mix(in srgb, var(--pf-ok) 32%, #c8ccd2);
  background: linear-gradient(180deg, #fdfffe, color-mix(in srgb, var(--pf-mint) 26%, #eef0f2)); }

/* -- attention plate: highlighted etch row + friendly inline hint ------------ */
.etch div.etch-alert { color: var(--pf-bad); background: color-mix(in srgb, var(--pf-bad) 9%, transparent);
  margin: -2px -6px; padding: 2px 6px; border-radius: 5px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-bad) 22%, transparent); }
.etch div.etch-alert b { color: var(--pf-bad); }
.plate-hint { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 8px 11px; border-radius: 8px; font-size: 12px; color: #8a3030;
  background: color-mix(in srgb, var(--pf-bad) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-bad) 20%, transparent); }
.plate-hint svg { width: 13px; height: 13px; flex: none; }
.plate-hint b { font-weight: 600; }
/* A recommendation, not a fault: amber, and it sits on the face of the plate
   rather than inside "Technical details", because the owner is the one who
   decides when to act on it. Nothing is broken, so nothing is red. */
.plate-hint.is-advice { align-items: flex-start; color: #7a4d17; line-height: 1.45;
  background: color-mix(in srgb, var(--pf-warn) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-warn) 24%, transparent); }
.plate-hint.is-advice svg { margin-top: 2px; }
.plate-hint.is-advice strong { display: block; font-weight: 600; margin-bottom: 1px; }
/* On the detail page it sits under the full-width verdict, where a 12px line run
   across the whole viewport is unreadable. Match the verdict's weight and hold
   the measure to something the eye can track. */
.pf-verdict + .plate-hint.is-advice { font-size: 13px; padding: 11px 14px; }
.pf-verdict + .plate-hint.is-advice span { max-width: 78ch; }

/* -- commissioning plaque: engraved onboarding ------------------------------- */
.plaque { position: relative; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius);
  padding: 24px 26px 22px; box-shadow: 0 14px 30px -24px rgba(28,30,33,.35), inset 0 0 0 1px rgba(255,255,255,.7); }
.plaque::before { content: ""; position: absolute; inset: 7px; border-radius: 8px; pointer-events: none;
  border: 1px solid var(--pf-line); opacity: .8; }
.plaque-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; position: relative; }
.plaque-head .pf-h2 { margin: 0; }
.plaque-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--pf-line-2), rgba(213,216,221,0)); margin-bottom: 4px; }
.pf-step.is-done { background: linear-gradient(180deg, #FDFCF9, var(--pf-paper)); }
.pf-step.is-done .pf-step-body strong { color: var(--pf-muted); text-shadow: 0 1px 0 rgba(255,255,255,.85); }
.pf-step.is-done .pf-step-num { box-shadow: inset 0 1px 2px rgba(39,79,66,.28), 0 1px 0 rgba(255,255,255,.9); }
.pf-step.is-active { border-color: color-mix(in srgb, var(--pf-warn) 32%, var(--pf-line)); background: var(--pf-surface); }
.pf-step.is-active .pf-step-num { background: color-mix(in srgb, var(--pf-warn) 15%, #fff); color: var(--pf-warn);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-warn) 35%, transparent); }

/* active build phase: soft shimmer travelling through the pill */
.pf-phase.is-active { overflow: hidden; }
.pf-phase.is-active::after { content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(100deg, rgba(180,115,42,0) 20%, rgba(180,115,42,.14) 50%, rgba(180,115,42,0) 80%);
  transform: translateX(-100%); animation: pf-phase-shimmer 2.2s ease-in-out infinite; }
@keyframes pf-phase-shimmer { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* indeterminate hairline progress under the build rail */
.pf-progress { position: relative; height: 3px; margin-top: 12px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--pf-warn) 12%, transparent); max-width: 430px; }
.pf-progress::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(180,115,42,.15), var(--pf-warn), rgba(180,115,42,.15));
  animation: pf-rail-run 1.8s cubic-bezier(.45,.1,.55,.9) infinite; }
@keyframes pf-rail-run { 0% { transform: translateX(-110%); } 100% { transform: translateX(390%); } }

/* -- toasts: the one flash system -------------------------------------------- */
.pf-toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 9px; max-width: min(92vw, 560px);
  background: var(--pf-surface); border: 1px solid var(--pf-line-2); border-radius: 10px;
  padding: 10px 16px; font: 500 13.5px/1.4 var(--pf-sans); color: var(--pf-ink);
  box-shadow: 0 18px 40px -18px rgba(28,30,33,.5);
  animation: pf-toast-in .25s ease-out both;
  transition: opacity .3s ease, transform .3s ease; }
.pf-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pf-toast-ok::before  { background: var(--pf-ok);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-ok) 18%, transparent); }
.pf-toast-bad::before { background: var(--pf-bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-bad) 16%, transparent); }
.pf-toast-bad { border-color: color-mix(in srgb, var(--pf-bad) 35%, var(--pf-line-2)); }
.pf-toast.is-dismissed { opacity: 0; transform: translateX(-50%) translateY(-10px); }
@keyframes pf-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
.pf-toast + .pf-toast { top: 66px; }

@media (prefers-reduced-motion: reduce) {
  .lamp.live .b, .lamp.cast .b, .glint::after, .plate.casting, .cast-rail li.active::before,
  .cast-copy .dots::after, .pf-phase.is-active::after, .pf-progress::after, .spin, .pf-toast { animation: none; }
}

/* ---- focus visibility (accessibility) ---- */
.pf a:focus-visible, .pf button:focus-visible, .pf-topnav a:focus-visible,
.pf-input:focus-visible, .pf-select:focus-visible, .forge:focus-visible, .plate .btn:focus-visible {
  outline: 2px solid var(--pf-navy); outline-offset: 2px; }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .pf-wrap { padding: 0 18px; }
  .pf-content { padding: 22px 0 44px; }
  /* The bar stays one fixed slim row. The Hub has a single destination now, so
     the inline nav is small enough to keep on the phone — the bottom tab bar it
     used to hand off to retired with the dashboard. */
  .pf-bar { height: 56px; }
  .pf-brand { font-size: 17px; }
  .pf-brand .pf-mark, .pf-brand img.pf-mark { height: 26px; }
  .pf-topnav { margin-left: 8px; }
  .pf-topnav a { padding: 8px 10px; }
  .pf-h1 { font-size: 26px; }
  /* At 24px the default hostname breaks mid-word ("primef / oundry.ai"). Size it
     to fit a typical domain on one line; anywhere-wrapping stays as the fallback
     for a long one so it can never overflow the card. */
  .pf-url-value { font-size: 16px; overflow-wrap: anywhere; }
}

/* ---- API docs (/api/docs) ---- */
.pf-code { background: var(--pf-surface-2); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-sm);
           padding: 12px 14px; margin: 10px 0 0; font-family: var(--pf-mono); font-size: 12.5px;
           line-height: 1.6; color: var(--pf-ink); overflow-x: auto; white-space: pre; }
.pf-endpoint { display: flex; align-items: baseline; gap: 10px; font-family: var(--pf-mono); font-size: 14px; }
.pf-method { font-family: var(--pf-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
             color: var(--pf-navy); background: color-mix(in srgb, var(--pf-navy) 10%, transparent);
             border-radius: 6px; padding: 2px 8px; }
.pf-docs-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.pf-docs-table th, .pf-docs-table td { text-align: left; padding: 7px 12px 7px 0;
             border-bottom: 1px solid var(--pf-line); vertical-align: top; }
.pf-docs-table th { font-size: 11.5px; font-weight: 600; text-transform: uppercase;
             letter-spacing: .12em; color: var(--pf-faint); }

/* ---- "Advanced" disclosure (Brain detail page) ----
   Collapsed by default: a quiet mono summary in the page's footer voice; the
   body only exists once opened. Deliberately undersells what's inside. */
.pf-adv { margin-top: 26px; }
.pf-adv > summary { cursor: pointer; font-family: var(--pf-mono); font-size: 12px;
                    color: var(--pf-faint); user-select: none; width: fit-content; }
.pf-adv > summary:hover { color: var(--pf-muted); }
.pf-adv-body { margin-top: 12px; background: var(--pf-surface); border: 1px solid var(--pf-line);
               border-radius: var(--pf-radius); padding: 18px 20px; }

/* ---- the model, and the switch ----
   The owner asked to see whether Opus or Fable is doing the work. The label is
   read from the transcript (what ran), never from the config (what was asked
   for) — those disagree the moment somebody types /model. */
.pf-model { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-model-now { font-weight: 600; }
.pf-model-swap { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-model-btn { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--pf-line-2);
                background: var(--pf-surface); color: var(--pf-muted);
                font: 500 11.5px/1.5 var(--pf-sans); cursor: pointer; }
.pf-model-btn:hover { border-color: var(--pf-faint); color: var(--pf-ink); }