/* VVDex Engine console.
   One dark, quiet surface; one accent. Ember is authority: the human gate, the
   primary action, the one line nothing crosses unsigned. Green is released,
   amber is held, rose is refused. Geist for text, Instrument Serif italic for
   the single emphasised phrase, Geist Mono for identifiers. */

@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  /* Graphite & Green (chosen by the founder, 2026-09-24). Neutral grey shades for every ground,
     green where the old theme had orange (the mark, the line, what runs on its own, Approve,
     active marks), silver for anything that waits for a named person, red for never. Main
     buttons are white. Surfaces are flat: hairlines and soft shadows, no glow. Every colour on
     every page comes from here. */
  --bg: #121314;
  --bg-rgb: 18 19 20;
  --surface: #18191b;
  --surface-rgb: 24 25 27;
  --surface-2: #1d1e21;
  --surface-2-rgb: 29 30 33;
  --surface-3: #25262a;
  --surface-3-rgb: 37 38 42;
  --deep: #151618;
  --deep-rgb: 21 22 24;
  --deep-2: #161719;
  --abyss: #0b0c0d;
  --node: #18191b;
  --dot: #37393d;
  --tint-rgb: 255 255 255;
  --shade-rgb: 0 0 0;
  --shade-k: 1;
  --line: rgb(255 255 255 / .08);
  --line-2: rgb(255 255 255 / .12);
  --line-3: rgb(255 255 255 / .2);
  --text: #ededee;
  --text-2: #a6a9ae;
  --text-3: #71757c;
  --accent: #3ddc97;
  --accent-rgb: 61 220 151;
  --accent-2: #74e6b5;
  --accent-2-rgb: 116 230 181;
  --accent-3: #a7f0cf;
  --accent-4: #d5f9e9;
  --accent-hi: #74e6b5;
  --accent-deep: #1e9e67;
  --accent-end: #3ddc97;
  --accent-soft: rgb(61 220 151 / .12);
  --accent-line: rgb(61 220 151 / .4);
  --btn-hi: #ededee;
  --btn-lo: #ededee;
  --on-accent: #05130c;
  --btn-bg: #ededee;
  --btn-fg: #121314;
  --btn-bg-hover: #ffffff;
  --mark-1: #74e6b5;
  --mark-2: #3ddc97;
  --mark-3: #1e9e67;
  --mark-ink: #05130c;
  --green: #3ddc97;
  --green-rgb: 61 220 151;
  --green-soft: rgb(61 220 151 / .1);
  --green-line: rgb(61 220 151 / .35);
  --green-ink: #a7f0cf;
  --person: #e4e6e9;
  --person-rgb: 228 230 233;
  --person-soft: rgb(228 230 233 / .1);
  --person-line: rgb(228 230 233 / .34);
  --on-person: #121314;
  --amber: #e4e6e9;
  --amber-rgb: 228 230 233;
  --amber-soft: rgb(228 230 233 / .1);
  --amber-line: rgb(228 230 233 / .34);
  --amber-ink: #e4e6e9;
  --rose: #f0716b;
  --rose-rgb: 240 113 107;
  --rose-soft: rgb(240 113 107 / .1);
  --rose-line: rgb(240 113 107 / .35);
  --rose-ink: #ffc2bf;
  --violet: #aa9df2;
  --violet-rgb: 170 157 242;
  --violet-soft: rgb(170 157 242 / .1);
  --approve-bg: #3ddc97;
  --approve-fg: #05130c;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 14px 34px -16px rgb(0 0 0 / .65);
  --shadow-3: 0 34px 80px -34px rgb(0 0 0 / .8), 0 2px 8px rgb(0 0 0 / .35);
  --teal-rgb: 110 210 200;
  /* names the page scripts use */
  --ink: var(--text); --ink-2: var(--text-2); --muted: var(--text-3); --red: var(--rose);
  --viridian: var(--green); --seal-ink: var(--accent); --sheet: var(--surface); --paper: var(--surface-2); --rule: var(--line); --rule-strong: var(--line-2);
  --radius: 16px;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --serif: "Geist", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --card: var(--surface);
  --lift: var(--shadow-1), var(--shadow-2);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh;
  font: 15px/1.55 var(--sans); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); }

::selection { background: rgb(var(--accent-rgb) / .2); color: var(--text); }
a { color: var(--text); text-decoration-color: rgb(var(--tint-rgb) / .3); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.mono { font-family: var(--mono); font-size: .86em; letter-spacing: -.01em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------- masthead */
.masthead { position: sticky; top: 0; z-index: 30; background: rgb(var(--bg-rgb) / .72); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid var(--line); }
.masthead-inner { max-width: 1280px; margin: 0 auto; padding: 12px 28px 0; }
.brandrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.mark { width: 28px; height: 28px; flex: none; }
.wordmark { font: 650 17px/1 var(--sans); letter-spacing: -.02em; }
.product { font: 500 12px/1 var(--sans); color: var(--text-2); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-2); background: rgb(var(--tint-rgb) / .03); }
.systems { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sys { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); padding: 5px 10px; border-radius: 999px; background: rgb(var(--tint-rgb) / .03); border: 1px solid var(--line); white-space: nowrap; }
.sys .short { display: none; }
.sys .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.sys.ok .dot { background: var(--green); box-shadow: 0 0 0 3px rgb(var(--green-rgb) / .15); }
.sys.warn .dot { background: var(--amber); box-shadow: 0 0 0 3px rgb(var(--amber-rgb) / .15); }
.keybtn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); background: rgb(var(--tint-rgb) / .04); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s; }
.keybtn:hover { border-color: var(--line-3); background: rgb(var(--tint-rgb) / .07); }
a.keybtn { color: var(--text); text-decoration: none; }
.keybtn.set { border-color: var(--green-line); color: var(--green); background: var(--green-soft); }

.tabs { display: flex; gap: 2px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; border: 0; background: none; cursor: pointer; white-space: nowrap; padding: 8px 12px 12px; font-size: 13.5px; font-weight: 500; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.tab .ic { width: 15px; height: 15px; }
.tab:hover:not(:disabled) { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"] .ic { color: var(--accent); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); box-shadow: none; }
.tab:disabled { cursor: not-allowed; opacity: .35; }
.tab .badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 11px/18px var(--sans); text-align: center; box-shadow: none; }

/* ------------------------------------------------------------- layout */
main { max-width: 1280px; margin: 0 auto; padding: 48px 28px 96px; }
.view { display: none; }
.view.active { display: block; animation: rise .5s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.stagger > * { animation: rise .55s var(--ease) both; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .12s; }
.stagger > *:nth-child(4) { animation-delay: .18s; }

.eyebrow { font: 500 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--text-3); margin: 0 0 12px; text-transform: none; }
h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; margin: 0; color: var(--text); }
h1 { text-wrap: balance; font-size: clamp(38px, 4.3vw, 58px); line-height: 1.02; letter-spacing: -.042em; }
h1 em, h2 em { font: inherit; letter-spacing: inherit; font-style: normal; color: var(--text-3); }
h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.02em; }
.lede { font-size: 17px; color: var(--text-2); max-width: 580px; margin: 18px 0 0; line-height: 1.6; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.section-head p:not(.eyebrow) { margin: 12px 0 0; color: var(--text-2); max-width: 660px; }

.sheet { position: relative; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--lift); }
.pad { padding: 26px 28px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stack { display: grid; gap: 20px; }
.label { font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 14px; }

/* ------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; cursor: pointer; font-weight: 550; font-size: 14px; line-height: 1.2; white-space: nowrap; letter-spacing: -.005em; transition: transform .15s var(--ease), background .2s, border-color .2s, box-shadow .2s, color .2s, filter .2s; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { color: var(--btn-fg); background: var(--btn-bg); border-color: var(--btn-bg); box-shadow: var(--shadow-1); }
.btn-primary:hover:not(:disabled) { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn-approve { color: var(--approve-fg); background: var(--approve-bg); border-color: var(--approve-bg); box-shadow: var(--shadow-1); }
.btn-approve:hover:not(:disabled) { filter: brightness(1.06); }
.btn-ghost { background: var(--surface); border-color: var(--line-3); color: var(--text); box-shadow: var(--shadow-1); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: rgb(var(--tint-rgb) / .3); }
.btn-danger { background: transparent; border-color: var(--rose-line); color: var(--rose); }
.btn-danger:hover:not(:disabled) { background: var(--rose-soft); }
.btn-sm { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn .ic { width: 15px; height: 15px; }
.kbd { font: 500 11px/1 var(--mono); padding: 3px 5px; border-radius: 5px; background: rgb(var(--shade-rgb) / calc(.18 * var(--shade-k))); border: 1px solid rgb(var(--tint-rgb) / .22); }

/* ------------------------------------------------------------- compose */
.compose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 56px; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 4px 12px 4px 4px; border-radius: 999px; font-size: 13px; color: var(--text-2); background: rgb(var(--tint-rgb) / .03); border: 1px solid var(--line-2); }
.kicker-tag { font: 600 11px/1 var(--sans); color: var(--btn-fg); padding: 5px 9px; border-radius: 999px; background: var(--btn-bg); }
.brief { margin-top: 30px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--lift), 0 0 0 4px rgb(var(--tint-rgb) / .015); transition: border-color .2s, box-shadow .2s; }
.brief:focus-within { border-color: rgb(var(--tint-rgb) / .32); box-shadow: var(--lift), 0 0 0 4px rgb(var(--tint-rgb) / .05); }
.brief-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.brief-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: none; }
.brief-hint { margin-left: auto; color: var(--text-3); font-weight: 400; }
.brief textarea { display: block; width: 100%; min-height: 128px; resize: vertical; border: 0; outline: none; background: transparent; padding: 16px 18px 8px; font: 450 17px/1.6 var(--sans); letter-spacing: -.01em; color: var(--text); }
.brief textarea::placeholder { color: var(--text-3); }
.brief-bar .btn { margin-left: auto; }
.brief-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px 12px 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: rgb(var(--tint-rgb) / .03); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--text-2); cursor: pointer; transition: all .2s; }
.chip .ic { width: 14px; height: 14px; color: var(--text-3); }
.chip:hover { border-color: var(--line-3); color: var(--text); background: rgb(var(--tint-rgb) / .07); }
.chip:hover .ic { color: var(--accent-2); }

/* The product window: one illustrative compile, animated once every 12 seconds. */
.demo-wrap { min-width: 0; }
.demo-switch { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 14px; margin: 0 0 4px; }
.demo-switch::-webkit-scrollbar { display: none; }
.demo-switch button { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgb(var(--tint-rgb) / .03); color: var(--text-3); font-size: 12.5px; font-weight: 500; cursor: pointer; overflow: hidden; transition: color .2s, border-color .2s, background .2s; }
.demo-switch button .ic { width: 14px; height: 14px; }
.demo-switch button:hover { color: var(--text); border-color: var(--line-3); }
.demo-switch button[aria-selected="true"] { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); }
.demo-switch button[aria-selected="true"] .ic { color: var(--accent-2); }
.demo-switch button[aria-selected="true"]:not(.pinned)::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; animation: progress 12s linear both; }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.demo-below { margin: 2px 2px 0; font: 500 11px/1.4 var(--mono); color: var(--text-3); }
.demo-use { margin-left: auto; flex: none; border: 1px solid var(--line-3); background: rgb(var(--tint-rgb) / .06); color: var(--text); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 500; cursor: pointer; }
.demo-use:hover { background: rgb(var(--tint-rgb) / .12); }
.demo { margin: 0; position: relative; }
.demo::before { content: ""; position: absolute; inset: 8% -6% -4%; background: none; filter: blur(30px); z-index: -1; }
.demo-chrome { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border: 1px solid var(--line-2); border-bottom: 0; border-radius: 16px 16px 0 0; background: rgb(var(--surface-2-rgb) / .92); }
.demo-chrome > span { display: none; }
.demo-chrome b { margin-left: 10px; font: 500 12px var(--mono); color: var(--text-2); }
.demo-live { margin-left: auto; font: 500 11px var(--mono); font-style: normal; color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.demo-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: none; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.demo-body { padding: 18px; border: 1px solid var(--line-2); border-radius: 0 0 16px 16px; background: var(--surface); box-shadow: 0 40px 80px -40px rgb(var(--shade-rgb) / calc(.9 * var(--shade-k))); }
.demo-brief { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; min-height: 70px; padding: 11px 14px; border-radius: 10px; background: rgb(var(--tint-rgb) / .03); border: 1px solid var(--line); font: 500 13px var(--mono); color: var(--text); overflow: hidden; }
.demo-prompt { color: var(--accent); }
.demo-type { min-width: 0; min-height: 1.5em; }
.demo-type::after { content: ""; display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: blink 1s steps(1) infinite; }
.demo-lanes { display: grid; grid-template-columns: 1fr .9fr 1fr; gap: 12px; margin-top: 16px; position: relative; }
.demo-lane { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 12px; background: rgb(var(--tint-rgb) / .02); border: 1px solid var(--line); }
.demo-lane.gate-lane { border-color: var(--accent-line); background: rgb(var(--tint-rgb) / .02); }
.demo-lh { margin: 0 0 2px; font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.gate-lane .demo-lh { color: var(--accent-2); }
.dn { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 12px; font-weight: 500; line-height: 1.25; }
.dn .ic { width: 14px; height: 14px; color: var(--text-2); }
.dn small { display: block; font: 500 9.5px var(--mono); color: var(--text-3); letter-spacing: .02em; margin-bottom: 1px; }
.dn.model .ic { color: var(--violet); }
.dn.model { border-style: dashed; }
.dn.write .ic { color: var(--green); }
.dn .ok { margin-left: auto; color: var(--green); opacity: 0; animation: ok 12s both; }
.dgate { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 12px 8px; border-radius: 10px; border: 1px solid var(--accent-line); background: var(--accent-soft); font-size: 12px; font-weight: 500; }
.dgate small { display: block; font: 500 9.5px var(--mono); color: var(--accent-2); }
.dgate-orb { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--on-accent); background: var(--accent); box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / .15); animation: pulse 2.4s ease-in-out infinite; }
.dgate-orb .ic { width: 18px; height: 18px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgb(var(--accent-rgb) / .12); } }
.dsigned { white-space: nowrap; font: 500 10.5px var(--mono); color: var(--green); padding: 3px 8px; border-radius: 6px; background: var(--green-soft); border: 1px solid var(--green-line); opacity: 0; animation: signed 12s both; }
.demo-seal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--green-line); background: var(--green-soft); font-size: 12.5px; font-weight: 500; }
.demo-seal .ic { color: var(--green); }
.demo-seal span { color: var(--text); }
.demo-seal code { font: 500 11.5px var(--mono); color: var(--text-2); }
.demo-seal b {  font: 600 10.5px var(--mono); color: var(--green); text-transform: uppercase; letter-spacing: .06em; }
.demo figcaption { margin-top: 14px; font-size: 12.5px; color: var(--text-3); text-align: center; }
.demo figcaption b { color: var(--text-2); font-weight: 500; }
.s1 { animation: in1 12s both; } .s2 { animation: in2 12s both; } .s3 { animation: in3 12s both; }
.s4 { animation: in4 12s both; } .s5 { animation: in5 12s both; } .s6 { animation: in6 12s both; } .s6b { animation: in6b 12s both; } .s7 { animation: in7 12s both; }
@keyframes in1 { 0%, 15% { opacity: 0; transform: translateY(6px); } 19%, 100% { opacity: 1; transform: none; } }
@keyframes in2 { 0%, 20% { opacity: 0; transform: translateY(6px); } 24%, 100% { opacity: 1; transform: none; } }
@keyframes in3 { 0%, 25% { opacity: 0; transform: translateY(6px); } 29%, 100% { opacity: 1; transform: none; } }
@keyframes in4 { 0%, 32% { opacity: 0; transform: translateY(6px); } 36%, 100% { opacity: 1; transform: none; } }
@keyframes in5 { 0%, 38% { opacity: 0; transform: scale(.94); } 43%, 100% { opacity: 1; transform: none; } }
@keyframes signed { 0%, 58% { opacity: 0; transform: translateY(4px); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes in6 { 0%, 64% { opacity: 0; transform: translateY(6px); } 68%, 100% { opacity: 1; transform: none; } }
@keyframes in6b { 0%, 68% { opacity: 0; transform: translateY(6px); } 72%, 100% { opacity: 1; transform: none; } }
@keyframes ok { 0%, 72% { opacity: 0; } 76%, 100% { opacity: 1; } }
@keyframes in7 { 0%, 78% { opacity: 0; transform: translateY(6px); } 83%, 100% { opacity: 1; transform: none; } }

.promise { margin-top: 72px; }
.promise ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.promise li { padding: 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; transition: border-color .25s, transform .25s var(--ease); }
.promise li:hover { border-color: var(--line-3); transform: translateY(-2px); }
.promise li .ic { width: 32px; height: 32px; padding: 7px; border-radius: 9px; color: var(--accent-2); background: var(--accent-soft); border: 1px solid rgb(var(--accent-rgb) / .25); margin-bottom: 8px; }
.promise b { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.promise li span { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ------------------------------------------------------------- workspace (console home) */
.ws-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.ws-head h2 { font-size: clamp(26px, 2.6vw, 34px); }
.ws-home-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13.5px; text-decoration: none; }
.ws-home-link:hover { color: var(--text); }
.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: stretch; }
.ws-grid .brief { margin-top: 0; }
.ws-side { display: grid; gap: 10px; align-content: start; }
.ws-stat { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; text-align: left; padding: 16px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); cursor: pointer; color: var(--text); transition: border-color .2s, transform .2s var(--ease); }
.ws-stat:hover { border-color: var(--line-3); transform: translateY(-1px); }
.ws-stat b { font: 600 28px/1.05 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ws-stat b small { font-size: 15px; color: var(--text-3); font-weight: 500; }
.ws-stat span { grid-column: 1; font-size: 13px; color: var(--text-3); }
.ws-stat .ic { grid-row: 1 / span 2; grid-column: 2; color: var(--text-3); }
.ws-stat.hot { border-color: var(--accent-line); background: var(--surface); }
.ws-stat.hot b { color: var(--accent-2); }
.ws-card { padding: 22px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); }
.ws-card .ic { width: 22px; height: 22px; color: var(--accent-2); }
.ws-card h3 { font-size: 16px; margin: 12px 0 6px; }
.ws-card p { margin: 0 0 14px; font-size: 13.5px; color: var(--text-2); }
.ws-services { margin-top: 20px; }
.ws-list-head { display: flex; justify-content: space-between; align-items: baseline; }
.ws-list { list-style: none; margin: 0; padding: 0; }
.ws-list li button { width: 100%; display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) 18px; gap: 16px; align-items: center; text-align: left; padding: 14px 12px; margin: 0 -12px; width: calc(100% + 24px); border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); cursor: pointer; border-radius: 10px; transition: background .2s; }
.ws-list li:first-child button { border-top: 0; }
.ws-list li button:hover { background: rgb(var(--tint-rgb) / .035); }
.ws-list .ic { color: var(--text-3); }
.ws-svc b { display: block; font-weight: 550; }
.ws-svc small { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .ws-grid { grid-template-columns: 1fr; }
  .ws-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-list li button { grid-template-columns: minmax(0, 1fr) auto 18px; }
  .ws-list li button > .why { display: none; }
}
@media (max-width: 640px) {
  .ws-side { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- service */
.svc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.svc-id { min-width: 0; flex: 1 1 520px; }
.svc-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.svc-title h2 { max-width: 760px; }
.svc-id .lede { font-size: 15.5px; margin-top: 12px; max-width: 760px; }
.svc-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* A wrapping row: any number of stats fills every line, so no empty cell is ever left. */
.stats { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 26px; border-radius: 12px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.stat { flex: 1 1 160px; padding: 16px 18px; background: var(--surface); display: grid; gap: 2px; }
.stat b { font: 600 28px/1.1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat b small { font-size: 16px; color: var(--text-3); font-weight: 500; }
.stat span { font-size: 12.5px; color: var(--text-3); }
.stat.ember b { color: var(--accent); }
.facts { display: grid; grid-template-columns: 140px minmax(0, 1fr); margin: 22px 0 0; }
.facts dt, .facts dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.facts dt { color: var(--text-3); }
.facts dd { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.facts .mono { color: var(--text-2); }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; line-height: 1.5; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: none; }
.p-allow { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.p-prepare { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-line); }
.p-approval { color: var(--accent-2); background: var(--accent-soft); border-color: var(--accent-line); }
.p-deny { color: var(--rose); background: var(--rose-soft); border-color: var(--rose-line); }
.p-neutral { color: var(--text-2); background: rgb(var(--tint-rgb) / .04); border-color: var(--line-2); }
.p-neutral::before { display: none; }
.p-destructive { color: #fff; background: var(--rose); border-color: var(--rose); }

.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.ledger th { text-align: left; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line-2); }
.ledger td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger .cap { font-weight: 550; }
.ledger .cap small { display: block; font-weight: 400; color: var(--text-3); font-family: var(--mono); font-size: 11.5px; margin-top: 3px; }
.ledger .why { color: var(--text-2); font-size: 13px; margin-top: 6px; }
.never { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); align-items: center; font-size: 12.5px; color: var(--text-3); }
.never > span:first-child { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.never .ic { width: 14px; height: 14px; color: var(--rose); }
.never .mono { color: var(--rose); background: var(--rose-soft); border: 1px solid var(--rose-line); padding: 2px 8px; border-radius: 6px; font-size: 11.5px; }

/* The compiled graph: three phase lanes with a measured SVG edge overlay. */
.graph-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.graph-head .label { margin-bottom: 6px; }
.graph-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.graph-legend span { display: inline-flex; align-items: center; gap: 6px; }
.graph-legend i { width: 16px; border-top: 1.5px dashed rgb(var(--tint-rgb) / .45); }
.graph-legend i.x { border-top: 1.5px dashed var(--amber); }
.graph-legend i.a { border-top: 2px solid var(--green); }
.graph-legend i.r { border-top: 2px solid var(--rose); }
.graph { position: relative; }
.gedges { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.gedges path { fill: none; stroke: rgb(var(--tint-rgb) / .26); stroke-width: 1.4; }
.gedges .clean path { stroke-dasharray: 4 5; animation: flow 1.2s linear infinite; }
.gedges .exception path { stroke: var(--amber); stroke-dasharray: 5 4; opacity: .8; }
.gedges .approval path { stroke: var(--green); stroke-width: 2; }
.gedges .rejection path { stroke: var(--rose); stroke-width: 1.6; }
.gedges .policy_clear path { stroke: var(--green); stroke-dasharray: 2 4; opacity: .8; }
.gedges text { font: 500 10px var(--mono); fill: var(--amber); paint-order: stroke; stroke: var(--node); stroke-width: 4px; stroke-linejoin: round; }
.gedges .approval text, .gedges .policy_clear text { fill: var(--green); }
.gedges .rejection text { fill: var(--rose); }
.gedges .guard path { stroke: var(--green); stroke-dasharray: 6 3; opacity: .85; }
.gedges .guard text { fill: var(--green); }
.gedges .review path { stroke: var(--violet); stroke-dasharray: 3 3; }
.gedges .review text { fill: var(--violet); }
.gnode.human_review { border-color: rgb(var(--violet-rgb) / .4); } .gnode.human_review .ic { color: var(--violet); }
@keyframes flow { to { stroke-dashoffset: -18; } }
.glanes { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); gap: 34px; }
.graph.stacked .glane + .glane { position: relative; }
.graph.stacked .glane + .glane::before { content: ""; position: absolute; left: 50%; top: -21px; width: 1.5px; height: 14px; background: linear-gradient(var(--line-3), var(--accent)); }
.graph.stacked .glane + .glane::after { content: ""; position: absolute; left: calc(50% - 4px); top: -9px; border: 4.5px solid transparent; border-top-color: var(--accent); }
.glane { border-radius: 14px; background: rgb(var(--tint-rgb) / .018); border: 1px solid var(--line); min-width: 0; }
.glane.authority { border-color: var(--accent-line); background: rgb(var(--tint-rgb) / .018); box-shadow: none; }
.glane.release { border-color: rgb(var(--green-rgb) / .2); }
.glane header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.glane header .ic { width: 15px; height: 15px; color: var(--text-2); }
.glane.authority header .ic { color: var(--accent); }
.glane.release header .ic { color: var(--green); }
.glane header b { font-weight: 600; }
.glane header span { color: var(--text-3); font-size: 12px; margin-left: auto; text-align: right; }
.gcol { display: grid; gap: 22px; padding: 18px 16px 20px 26px; }
.grow { display: flex; gap: 10px; }
.gnode { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: 0 1px 0 rgb(var(--tint-rgb) / .04) inset, 0 6px 16px -10px rgb(var(--shade-rgb) / calc(.8 * var(--shade-k))); transition: border-color .2s, box-shadow .2s, background .2s; position: relative; z-index: 1; }
.gnode .ic { color: var(--text-2); width: 15px; height: 15px; }
.gtxt { min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: -.005em; }
.gtxt small { display: block; font: 500 10px var(--mono); color: var(--text-3); letter-spacing: .02em; text-transform: uppercase; margin-bottom: 2px; }
.gnode.model_reasoning { border-style: dashed; } .gnode.model_reasoning .ic { color: var(--violet); }
.gnode.automatic .ic { color: var(--green); }
.gnode.prepared { border-color: var(--amber-line); } .gnode.prepared .ic { color: var(--amber); }
.gnode.authorized, .gnode.result_verification { border-color: var(--green-line); } .gnode.authorized .ic, .gnode.result_verification .ic { color: var(--green); }
.gnode.policy_decision { background: var(--surface-3); border-color: var(--line-3); } .gnode.policy_decision .ic { color: var(--accent-2); }
.gnode.terminal { background: transparent; border-style: dashed; } .gnode.terminal .gtxt { color: var(--text-2); }
.gnode.gate { flex-direction: column; text-align: center; gap: 10px; padding: 16px 12px; border-color: var(--accent-line); background: var(--surface-2); }
.gnode.gate .gtxt small { color: var(--accent-2); }
.gnode .orb { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--on-accent); background: var(--accent); box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / .14); animation: pulse 2.6s ease-in-out infinite; }
.gnode .orb .ic { color: var(--on-accent); width: 19px; height: 19px; }
.gnode.lit { border-color: var(--accent); background: rgb(var(--accent-rgb) / .14); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .18); }

/* Requirements trace. */
.trace-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.trace-head h3 { font-size: 18px; }
.meter { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.meter .bar { width: 120px; height: 6px; border-radius: 6px; background: rgb(var(--tint-rgb) / .07); overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: 6px; background: var(--green); box-shadow: none; }
.meter.gap .bar i { background: var(--amber); box-shadow: none; }
.trace { list-style: none; margin: 0; padding: 0; }
.trace li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 4px 12px; padding: 12px 10px; margin: 0 -10px; border-top: 1px solid var(--line); border-radius: 10px; transition: background .2s; outline: none; }
.trace li:hover, .trace li:focus-visible { background: rgb(var(--accent-rgb) / .07); }
.trace .rid { font: 500 11px/1.9 var(--mono); color: var(--text-3); grid-column: 1; grid-row: 1; }
.trace .said { font-size: 14.5px; font-weight: 500; color: var(--text); line-height: 1.45; }
.trace .said::before { content: "“"; color: var(--accent); } .trace .said::after { content: "”"; color: var(--accent); }
.trace .landed { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; grid-column: 2; }
.trace .to { font: 500 11px var(--mono); padding: 2px 7px; border-radius: 6px; background: rgb(var(--tint-rgb) / .04); border: 1px solid var(--line-2); color: var(--text-2); }
.trace .to.authority { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-2); }
.trace .to.trigger { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }
.trace .src { grid-column: 1; grid-row: 2; align-self: start; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.trace .src.model { color: var(--violet); }
.trace li.unresolved { background: var(--amber-soft); }
.trace .cond { display: block; margin-top: 4px; font: 500 11.5px var(--mono); color: var(--accent-2); }
.trace .decided { display: block; margin-top: 3px; font: 500 11px var(--mono); color: var(--text-3); }

/* ------------------------------------------------------------- plan lanes */
.lanes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); gap: 14px; }
.lane { position: relative; padding: 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--lift); }
.lane.authority { border-color: var(--accent-line); background: var(--surface); box-shadow: var(--lift); }
.lane-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.lane-head h3 { font-size: 20px; }
.lane .rule-note { font-size: 13px; color: var(--text-2); margin: 0 0 14px; }
.step { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.step:first-of-type { border-top: 0; }
.step .ix { font: 500 11px/1.9 var(--mono); color: var(--text-3); }
.step small { display: block; color: var(--text-3); font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; margin-top: 2px; }
.lane.authority .step .ix { color: var(--accent-2); }
.boundary { margin: 18px 0 0; font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); display: flex; align-items: center; gap: 10px; }
.boundary::before, .boundary::after { content: ""; flex: 1; border-top: 1px dashed var(--accent-line); }
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 12px; font-size: 14px; border: 1px solid; }
.callout.warn { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber-ink); }
.callout.bad { background: var(--rose-soft); border-color: var(--rose-line); color: var(--rose-ink); }
.callout.good { background: var(--green-soft); border-color: var(--green-line); color: var(--green-ink); }
.callout a { color: inherit; font-weight: 600; }
.callout b { font-weight: 600; color: inherit; }
.callout .mono { opacity: .85; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: rgb(var(--tint-rgb) / .03); }
.seg button { border: 0; background: none; padding: 6px 13px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-3); }
.seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 0 rgb(var(--tint-rgb) / .06) inset, 0 2px 6px rgb(var(--shade-rgb) / calc(.4 * var(--shade-k))); }
.seg button:disabled { opacity: .45; cursor: not-allowed; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; animation: rise .4s var(--ease) both; }
.timeline li:last-child { border-bottom: 0; }
.timeline .ix { font: 500 11px/1.9 var(--mono); color: var(--text-3); }
.timeline .k { font: 500 11.5px/1.9 var(--mono); color: var(--text-3); white-space: nowrap; }
.timeline li.held .k, .timeline li.held .s { color: var(--amber); }
.timeline li.blocked .k, .timeline li.blocked .s { color: var(--rose); }
.timeline li.done .k { color: var(--green); }

/* ------------------------------------------------------------- approvals */
.inbox { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; }
.queue { list-style: none; margin: 0; padding: 6px; }
.queue li button { width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 10px; padding: 12px 14px; cursor: pointer; display: grid; gap: 3px; transition: background .2s, border-color .2s; }
.queue li button:hover { background: rgb(var(--tint-rgb) / .04); }
.queue li button[aria-current="true"] { background: rgb(var(--accent-rgb) / .08); border-color: var(--accent-line); }
.queue .from { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue .subj { font-weight: 550; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue .meta { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--text-3); }
.quarantine { position: relative; margin: 0; padding: 14px 16px; border-radius: 10px; font: 12.5px/1.65 var(--mono); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto;
  background: repeating-linear-gradient(-45deg, rgb(var(--amber-rgb) / .05) 0 8px, transparent 8px 16px), var(--deep); border: 1px dashed var(--amber-line); }
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 8px; }
.fieldgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fieldgrid .wide { grid-column: 1 / -1; }
#view-deploy .stack > *, #view-deploy .cols > *, #view-deploy .field { min-width: 0; }
#view-deploy .field select { max-width: 100%; }
#view-deploy .callout { overflow-wrap: anywhere; }
#sourceBindings .fieldgrid + .fieldgrid { margin-top: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.field input, .field textarea, .field select, .lib-search, .lock input { width: 100%; border: 1px solid var(--line-2); background: var(--deep); color: var(--text); border-radius: 9px; padding: 10px 12px; font-size: 14px; transition: border-color .2s, box-shadow .2s; box-shadow: 0 1px 0 rgb(var(--shade-rgb) / calc(.3 * var(--shade-k))) inset; }
.field textarea { min-height: 96px; resize: vertical; font-family: var(--sans); }
.field select { appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field textarea:focus, .field select:focus, .lib-search:focus, .lock input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input[type="checkbox"], .actions input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); margin: 4px 0 0; }
.slip { position: relative; margin-top: 22px; padding: 22px 24px 20px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--accent-line); box-shadow: none; overflow: hidden; }
.slip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); }
.slip h4 { margin: 0 0 12px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
.slip .grant { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.slip .grant .ck { color: var(--green); font-weight: 700; }
.slip .grant b { font-weight: 600; }
.slip .grant .sub { display: block; color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.slip .none { margin: 12px 0 0; font: 500 16px var(--sans); color: var(--text-2); }
.slip .never-line { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.result { margin-top: 14px; }
.released { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.released th { text-align: left; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 0 10px 10px 0; border-bottom: 1px solid var(--line-2); }
.released td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.attempts { display: inline-flex; gap: 3px; vertical-align: middle; }
.attempts i { width: 8px; height: 8px; border-radius: 2px; background: rgb(var(--tint-rgb) / .1); }
.attempts i.on { background: var(--green); box-shadow: none; }
.s-consumed { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.s-dispatched { color: rgb(var(--teal-rgb)); background: rgb(var(--teal-rgb) / .08); border-color: rgb(var(--teal-rgb) / .3); }
.s-pending, .s-dispatching, .s-failed { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-line); }
.s-dead, .s-expired { color: var(--rose); background: var(--rose-soft); border-color: var(--rose-line); }
.empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 14px; }
.empty .glyph { font: 500 32px/1 var(--sans); color: var(--text-3); display: block; margin-bottom: 10px; }
.lock { max-width: 480px; margin: 30px auto; text-align: center; }
.lock h3 { margin-bottom: 8px; font-size: 22px; }
.lock p { color: var(--text-2); margin: 0 0 18px; }
.lock form { display: flex; gap: 8px; }
.lock input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; }

/* ------------------------------------------------------------- sign in */
.signin { max-width: 440px; margin: 40px auto; padding: 34px 32px; text-align: left; }
.signin h3 { font-size: 24px; margin: 14px 0 6px; }
.signin > p { color: var(--text-2); margin: 0 0 22px; font-size: 14.5px; }
.lock-mark { width: 40px; height: 40px; }
.lock .signin-form { display: grid; gap: 10px; }
.signin-form input { width: 100%; border: 1px solid var(--line-2); background: var(--deep); color: var(--text); border-radius: 10px; padding: 12px 14px; font-size: 15px; }
.signin-form input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
#codeInput { font: 600 22px/1 var(--mono); letter-spacing: .35em; text-align: center; }
.signin-form .btn { width: 100%; padding: 12px; }
.sent-to { margin: 0 0 4px; font-size: 13.5px; color: var(--text-2); }
.btn.google { width: 100%; padding: 12px; text-decoration: none; }
.btn.google .ic { width: 18px; height: 18px; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: 12px; color: var(--text-3); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line-2); }
.linkish { background: none; border: 0; color: var(--text-3); font-size: 13px; cursor: pointer; padding: 4px; }
.linkish:hover { color: var(--text); }
.keyway { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.keyway summary { cursor: pointer; }
.keyway form { display: flex; gap: 8px; margin-top: 12px; }
.keyway input { flex: 1; min-width: 0; border: 1px solid var(--line-2); background: var(--deep); color: var(--text); border-radius: 9px; padding: 9px 11px; font: 13px var(--mono); }
.keynote { margin: 8px 0 0; font-size: 12px; }
.account { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--text); padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--line-2); background: rgb(var(--tint-rgb) / .03); }
.avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--sans); color: var(--on-accent); background: var(--btn-bg); }
.keybtn.signin-btn { color: var(--btn-fg); border-color: var(--btn-bg); background: var(--btn-bg); }

/* ------------------------------------------------------------- proof */
.seal-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: center; }
.seal { position: relative; width: 220px; height: 220px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; text-align: center; color: var(--green);
  background: none;
  box-shadow: 0 0 0 1px var(--green-line), 0 0 0 10px rgb(var(--green-rgb) / .05), 0 0 0 11px var(--green-line); transition: color .3s, box-shadow .3s, background .3s; }
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 60s linear infinite; }
.seal text { font: 500 10px var(--mono); letter-spacing: .3em; fill: currentColor; text-transform: uppercase; }
.seal .word { font: 600 26px/1 var(--sans); letter-spacing: -.02em; }
.seal .sub { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; opacity: .8; }
.seal.stamp { animation: stamp .6s var(--ease) both; }
.seal.broken { color: var(--rose); background: none; box-shadow: 0 0 0 1px var(--rose-line), 0 0 0 10px rgb(var(--rose-rgb) / .05), 0 0 0 11px var(--rose-line); }
.seal.idle { color: var(--text-3); background: rgb(var(--tint-rgb) / .02); box-shadow: 0 0 0 1px var(--line-2), 0 0 0 10px rgb(var(--tint-rgb) / .015), 0 0 0 11px var(--line); }
.seal.idle svg { animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes stamp { 0% { transform: scale(1.2); opacity: 0; } 60% { transform: scale(.97); opacity: 1; } 100% { transform: none; } }
.hash { font: 500 13px/1.7 var(--mono); word-break: break-all; padding: 12px 14px; border-radius: 10px; background: var(--deep); border: 1px solid var(--line-2); color: var(--text-2); }
.hash.bad { color: var(--rose); background: var(--rose-soft); border-color: var(--rose-line); }
.receipts { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.receipts li { counter-increment: r; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.receipts li > span { min-width: 0; overflow-wrap: anywhere; }
.receipts li::before { content: counter(r, decimal-leading-zero); font: 500 11px/1.9 var(--mono); color: var(--text-3); }
.receipts li.tampered { background: var(--rose-soft); margin: 0 -10px; padding: 10px; border-radius: 8px; }
.receipts li.tampered::before { color: var(--rose); }
.receipts .k { font: 500 11.5px/1.9 var(--mono); color: var(--text-3); }

/* ------------------------------------------------------------- deploy */
.conn { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.conn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: none; }
.conn.error .dot { background: var(--rose); box-shadow: none; }
.conn b { display: block; font-weight: 550; }
.conn small { display: block; color: var(--text-3); font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }
.stepper { display: flex; list-style: none; margin: 0 0 18px; padding: 0; counter-reset: st; overflow-x: auto; }
.stepper li { counter-increment: st; flex: 1 1 0; min-width: 118px; position: relative; padding: 0 8px 0 0; font-size: 13px; color: var(--text-3); }
.stepper li::before { content: counter(st); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-3); background: var(--surface-2); font: 500 12px/1 var(--mono); margin-bottom: 8px; position: relative; z-index: 1; }
.stepper li::after { content: ""; position: absolute; top: 14px; left: 28px; right: 0; height: 1px; background: var(--line-2); }
.stepper li:last-child::after { display: none; }
.stepper li.done { color: var(--text-2); }
.stepper li.done::before { content: "✓"; background: var(--green); border-color: var(--green); color: var(--approve-fg); box-shadow: none; }
.stepper li.done::after { background: var(--green-line); }
.stepper li.current { color: var(--text); font-weight: 550; }
.stepper li.current::before { border-color: var(--accent); background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 5px var(--accent-soft); }

/* ------------------------------------------------------------- connectors */
.lib-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.lib-layout.selected { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.lib-layout.selected .lib-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-height: 78vh; overflow: auto; padding: 2px; }
.lib-layout.selected #pieceDetail { position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow: auto; }
@media (max-width: 900px) { .lib-layout.selected { grid-template-columns: 1fr; } .lib-layout.selected #pieceDetail { position: static; max-height: none; } }
.lib-card { text-align: left; border: 1px solid var(--line-2); background: var(--card); border-radius: 12px; padding: 14px 16px; cursor: pointer; display: grid; gap: 8px; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; color: var(--text); }
.lib-card:hover { border-color: var(--line-3); transform: translateY(-2px); box-shadow: var(--lift); }
.lib-card[aria-current="true"] { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line) inset; }
.lib-card .name { display: flex; align-items: center; gap: 10px; font: 600 14.5px/1.25 var(--sans); letter-spacing: -.01em; }
.mono-badge { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-3); border: 1px solid var(--line-2); font: 600 11px/1 var(--mono); color: var(--text-2); flex: none; }
.lib-card .counts { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11.5px; }
.lib-search { margin-bottom: 14px; }
.action-row { width: 100%; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; color: var(--text); }
.action-row:hover { background: rgb(var(--tint-rgb) / .04); }
.action-row[aria-current="true"] { background: rgb(var(--accent-rgb) / .08); border-color: var(--accent-line); }
.action-row small { display: block; color: var(--text-3); font-size: 12px; }
.actions-list { max-height: 520px; overflow: auto; margin-top: 8px; }
.output { font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--deep); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; max-height: 320px; overflow: auto; color: var(--text-2); }
.rail { list-style: none; margin: 0; padding: 0; }
.gate-sig { display: block; margin-top: 8px; font: 500 15px var(--sans); color: var(--accent); }

/* ------------------------------------------------------------- toast + footer */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(16px); opacity: 0; pointer-events: none; z-index: 50; padding: 11px 16px; border-radius: 12px; background: var(--abyss); border: 1px solid var(--line-3); color: #f1f3ef; font-size: 14px; box-shadow: 0 20px 50px -16px rgb(var(--shade-rgb) / calc(.9 * var(--shade-k))); backdrop-filter: blur(10px); transition: all .3s var(--ease); max-width: calc(100vw - 32px); }
.toast::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 10px; vertical-align: 1px; box-shadow: none; }
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.bad::before { background: var(--rose); box-shadow: none; }
footer { max-width: 1280px; margin: 0 auto; padding: 26px 28px 44px; color: var(--text-3); font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); }
footer .foot-brand { display: inline-flex; align-items: center; gap: 10px; }
footer .foot-brand svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .compose { grid-template-columns: 1fr; gap: 44px; }
  .demo { max-width: 640px; }
  .promise ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lanes { grid-template-columns: 1fr; }
  .glanes { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 900px) {
  .cols, .inbox, .seal-wrap { grid-template-columns: 1fr; }
  .cols-3 { grid-template-columns: 1fr; }
  .stat { flex-basis: 140px; }
}
@media (max-width: 640px) {
  /* A layer of the graph can be wider than a phone: it scrolls inside its card, never the page. */
  #graphFig { overflow-x: auto; }
  .masthead-inner { padding: 10px 16px 0; }
  main { padding: 32px 16px 72px; }
  footer { padding: 22px 16px 32px; }
  .product, .sys .lbl { display: none; }
  .sys .short { display: inline; }
  .sys.ok, .sys.off { display: none; }
  .account .lbl { display: none; }
  .account { padding: 3px; }
  .systems { flex-wrap: nowrap; gap: 6px; }
  .pad { padding: 20px 18px; }
  .fieldgrid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; }
  .facts dd { border-top: 0; padding-top: 4px; }
  .brief-hint { display: none; }
  .brief-bar .btn { width: 100%; }
  .promise { margin-top: 52px; }
  .promise ol { grid-template-columns: 1fr; }
  .demo-body { padding: 12px; }
  .demo::before { inset: 8% 0 -4%; }
  .demo-switch { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; position: relative; }
  .demo-switch::-webkit-scrollbar { display: none; }
  .demo-lanes { grid-template-columns: 1fr; }
  .demo-type { animation: none; white-space: normal; }
  .svc-actions .btn { flex: 1 1 auto; }
  .stat b { font-size: 24px; }
  .gcol { padding: 14px 12px 16px 22px; gap: 18px; }
  .timeline li, .receipts li { grid-template-columns: 28px minmax(0, 1fr); }
  .timeline .k, .receipts .k { grid-column: 2; }
  .released thead { display: none; }
  .released tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .released td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
  .released td:nth-child(-n+2), .released td:last-child { grid-column: 1 / -1; }
  .seal { width: 190px; height: 190px; }
  .ledger thead { display: none; }
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; }
  .ledger tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .ledger tr:last-child { border-bottom: 0; }
  .ledger td { padding: 3px 0; border-bottom: 0; overflow-wrap: anywhere; }
  .pill { white-space: normal; overflow-wrap: anywhere; text-align: left; }
  .why .mono, .rule-note .mono, .facts .mono { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .s1, .s2, .s3, .s4, .s5, .s6, .s6b, .s7, .dsigned, .dn .ok { opacity: 1 !important; }
  .demo-type { clip-path: none; }
}

/* ------------------------------------------------------------- waits for a named person
   Green means it runs on its own; what waits for a person must never read as done. Inside
   anything that waits for a person the accent is re-scoped to the person's silver, so every
   rule written against the accent follows without being rewritten. */
.wait, .gate-lane, .dgate, .gnode.gate, .glane.authority, .lane.authority, .p-approval, .stat.ember, .ws-stat.hot, .tab .badge, .slip, .gate-sig, .lr-pipe li.gate, .lr-legend .gate, .who.gate, .gtm-steps li.gate, .lr-gate2, .lr-state.awaiting_decision, .conflict-tag, .lr-conflict, .run-mini li.g, .sig, .sig-note {
  --accent: var(--person); --accent-2: var(--person); --accent-3: var(--person); --accent-hi: var(--person); --accent-deep: var(--person);
  --accent-rgb: var(--person-rgb); --accent-2-rgb: var(--person-rgb); --accent-soft: var(--person-soft); --accent-line: var(--person-line);
  --on-accent: var(--on-person);
}

/* the agents' work on a live event, shown to the approver; the tools a service's agents may use */
.agent-work { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: rgb(var(--surface-2-rgb) / .6); }
.aw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aw-head b { font-weight: 600; }
.aw-id { margin-left: auto; font-size: 11.5px; color: var(--text-2); overflow-wrap: anywhere; }
.aw-text { margin-top: 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; max-height: 24em; overflow: auto; }
.aw-why { margin: 8px 0 0; }
.aw-sources { margin: 10px 0 0; padding-left: 18px; font-size: 13px; }
.aw-sources li { margin: 4px 0; overflow-wrap: anywhere; }
.aw-sources q { display: block; color: var(--text-2); }
.aw-reads { margin: 8px 0 0; font-size: 12.5px; }
.aw-warn { margin: 8px 0 0; color: var(--amber); }
.aw-crew { margin: 8px 0 0; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.aw-crew .mono { font-size: 11px; color: var(--text-2); }
.aw-rejected { margin-top: 8px; }
.aw-rejected summary { cursor: pointer; }
.ag-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ag-kpi { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; min-width: 0; }
.ag-kpi b { font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ag-kpi span { font-size: 12.5px; color: var(--text-2); }
.ag-controls { display: grid; gap: 10px; }
.ag-models { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; }
.ag-models b { font-weight: 600; margin-right: 6px; }
.ag-switches { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.ag-switch { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.ag-days { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); }
.ag-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 12px; }
.ag-tab, .ag-chip { border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13.5px; cursor: pointer; }
.ag-tab[aria-selected="true"], .ag-chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.ag-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-search { min-width: 200px; flex: 1 1 200px; max-width: 320px; }
.ag-table td { vertical-align: top; }
.ag-table td.n, .ag-table th.n { text-align: right; font-variant-numeric: tabular-nums; }
.ag-table details summary { cursor: pointer; overflow-wrap: anywhere; }
.ag-table pre { white-space: pre-wrap; font-size: 12px; max-height: 18em; overflow: auto; }
.ag-id { display: block; font-size: 11px; color: var(--text-2); overflow-wrap: anywhere; }
.ag-off td { opacity: .55; }
.ag-change { display: grid; gap: 2px; margin: 4px 0; font-size: 13px; overflow-wrap: anywhere; }
.ag-change del { color: var(--rose-ink, var(--rose)); }
.ag-change ins { color: var(--green-ink, var(--green)); text-decoration: none; }
.ag-list { margin: 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 4px; }
.agents-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 12px; }
.agents-kinds section { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.agents-kinds h4 { margin: 0 0 6px; font-size: 13px; }
.agents-kinds details { margin: 4px 0; font-size: 13px; }
.agents-kinds summary { cursor: pointer; overflow-wrap: anywhere; }
.agents-kinds pre { white-space: pre-wrap; font-size: 12px; max-height: 18em; overflow: auto; }
.agents-count { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }
.agents-count li { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.agents-stats { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.agents-stats th, .agents-stats td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.agents-stats td.n { text-align: right; font-variant-numeric: tabular-nums; }
.agent-tools { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 4px; font-size: 14px; }
.agent-tools label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
@media (max-width: 640px) { .aw-id { margin-left: 0; width: 100%; } }

/* The one composer's example chips (compose.js), on the home page and in the workspace:
   each fills the box with an example's brief; none is a mode. */
.cx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 18px 14px; }
.cx-lead { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-right: 2px; }
.cx-chip { font: 500 13px var(--sans); color: var(--text-2); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: rgb(var(--tint-rgb) / .03); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.cx-chip:hover { color: var(--text); border-color: var(--line-3); background: rgb(var(--tint-rgb) / .06); }
.cx-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-chip:disabled { opacity: .6; cursor: progress; }
.ws-sub { margin: 8px 0 0; max-width: 620px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.ws-benefits { margin: 4px 0 14px; padding-left: 18px; display: grid; gap: 4px; color: var(--text-2); font-size: 13.5px; }

/* After compiling: the service in plain words first; the contract, graph and tests follow. */
.understood h2 { margin: 6px 0 18px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.03em; }
.u-assure { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.u-assure li { font-size: 13px; color: var(--text-2); padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.u-assure li b { color: var(--text); margin-right: 4px; }
.u-assure li.warn { border-color: var(--amber-line); color: var(--text); }
.u-decisions { margin: 0 0 20px; display: grid; gap: 12px; }
.u-decide { padding: 16px; border: 1px solid var(--amber-line); border-radius: 14px; display: grid; gap: 8px; }
.u-decide p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.u-decide .actions { margin: 4px 0 0; }
.u-decide textarea { width: 100%; font: inherit; font-size: 14.5px; padding: 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); }
.u-decide input[type="text"] { width: 100%; font: inherit; font-size: 14.5px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); }
.u-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--text-2); }
.u-tag { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-right: 8px; }
.u-questions { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--text-2); }
.u-grid { margin: 0; display: grid; border-top: 1px solid var(--line); }
.u-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.u-row dt { font: 500 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.u-row dd { margin: 0; }
.u-row dd p { margin: 0; font-size: 15px; line-height: 1.55; }
.u-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; }
.u-list li { display: flex; gap: 10px; align-items: baseline; }
.u-sym { flex: none; width: 14px; font-weight: 700; color: var(--text-3); }
.u-list.ok .u-sym, .u-list.check .u-sym { color: var(--green); }
.u-list.wait .u-sym { color: var(--amber); }
.u-list.no .u-sym { color: var(--rose); }
.understood .actions { margin-top: 20px; }
.understood .actions .btn { text-decoration: none; }
.tech-label { margin: 18px 0 -4px; }
@media (max-width: 640px) { .u-row { grid-template-columns: 1fr; gap: 6px; } }

/* ================================================================== the VVDex grid
   The brand's signature, one system everywhere: a 56px grid of hairlines with a green node at
   every fourth crossing, drifting slowly. Behind every page (the .aurora layer: public pages
   and the console alike), brighter in the hero and the ink bands, and in the corner of the
   cards that hold the product's real output. Lines and nodes share one tile, so the drift
   loops without a seam; nothing moves under prefers-reduced-motion. */
:root { --grid: 56px; --grid-line: rgb(var(--tint-rgb) / .06); --grid-node: rgb(var(--accent-rgb) / .55); }
.aurora {
  background:
    radial-gradient(circle, var(--grid-node) 0 1.3px, transparent 1.8px) calc(var(--grid) * 2) calc(var(--grid) * 2) / calc(var(--grid) * 4) calc(var(--grid) * 4),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid) var(--grid),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid) var(--grid),
    var(--bg);
  animation: gridpan 140s linear infinite; }
body:not(.site) .aurora { --grid-line: rgb(var(--tint-rgb) / .022); --grid-node: rgb(var(--accent-rgb) / .22); }
@keyframes gridpan {
  to { background-position: calc(var(--grid) * 6) calc(var(--grid) * 6), calc(var(--grid) * 4) calc(var(--grid) * 4), calc(var(--grid) * 4) calc(var(--grid) * 4), 0 0; } }

/* The same grid, as a layer any block can wear (the corner of a card, a band). */
body :is(.vv-grid-corner, .ex-card, .pick, .proof-card, .pf-check, .after-run, .understood, .ws-signin) {
  background-image:
    radial-gradient(ellipse 110% 95% at 100% 0%, transparent 0, var(--grid-fill, var(--surface)) 78%),
    radial-gradient(circle, rgb(var(--accent-rgb) / .75) 0 1.3px, transparent 1.8px),
    linear-gradient(rgb(var(--tint-rgb) / .09) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--tint-rgb) / .09) 1px, transparent 1px);
  background-size: 100% 100%, 112px 112px, 28px 28px, 28px 28px;
  background-position: 0 0, calc(100% + 56px) -56px, 100% 0, 100% 0; }
body :is(.understood, .ws-signin) { --grid-fill: var(--card, var(--surface)); }
@media (prefers-reduced-motion: reduce) { .aurora { animation: none; } }
#appHelp { margin: 0; flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }


/* The visitor's journey (journey.js): seven steps, the current one lit, done ones ticked,
   the rest dimmed. One row on a desktop; on a phone the names of other steps fold away. */
.journey { margin: 0 0 22px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / .02); }
.journey ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.journey li { flex: 1 1 0; min-width: 0; }
.journey li > a, .journey li > span, .journey li { display: flex; align-items: center; gap: 8px; }
.journey li > a { color: inherit; text-decoration: none; }
.journey .jn { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line-3, rgb(255 255 255 / .16)); color: var(--text-3); }
.journey .jt { font-size: 13px; line-height: 1.2; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journey li.done .jn { border-color: var(--green); color: var(--green); }
.journey li.done .jt { color: var(--text-2, #a9adb3); }
.journey li.now .jn { background: var(--accent); border-color: var(--accent); color: #0b0c0d; }
.journey li.now .jt { color: var(--text, #f2f3f4); font-weight: 600; }
.journey li.next { opacity: .6; }
.journey li.passed .jn { border-style: dashed; }
.journey li.passed .jt { color: var(--text-3); }
.journey li > a:hover .jt { text-decoration: underline; }
.journey .jg { margin: 10px 0 0; font-size: 13px; color: var(--text-2, #a9adb3); }
.journey-wrap { max-width: 1180px; margin: 24px auto 0; padding: 0 16px; }
@media (max-width: 800px) {
  .journey li { flex: none; }
  .journey li:not(.now) .jt { display: none; }
}

/* Tabs a visitor can open only with a workspace (set up with us): said before the click. */
.tab-sep { display: none; }
.visitor .tab-sep { display: inline-flex; align-items: center; padding: 0 6px 0 14px; margin-left: 6px; border-left: 1px solid var(--line, rgba(255,255,255,.12));
  font: 500 10.5px/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.visitor .tab[data-ws] { opacity: .62; }
.visitor .tab[data-ws]:hover, .visitor .tab[data-ws][aria-selected="true"] { opacity: 1; }
.callout-body { display: grid; gap: 8px; min-width: 0; }
.callout-body p, .callout-body ul { margin: 0; }
.callout-body ul { padding-left: 18px; display: grid; gap: 6px; }

/* Understanding / action / outcome checks, inside the flow. */
.u-check { margin: 14px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.u-check summary { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; cursor: pointer; list-style: none; }
.u-check-h { font-weight: 600; }
.u-check-s { font: 500 11px/1 var(--mono); letter-spacing: .04em; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; margin-right: 8px; }
.u-check-s.ok { color: var(--green); border-color: var(--green-line); }
.u-check-s.warn { color: var(--amber); border-color: var(--amber-line); }
.u-check-s.bad { color: var(--rose, #e5484d); border-color: var(--rose-line, rgba(229,72,77,.4)); }
.owner-key { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); text-align: left; }
.owner-key label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.owner-key input { width: calc(100% - 96px); min-width: 0; border: 1px solid var(--line-2); background: var(--deep); color: var(--text); border-radius: 9px; padding: 9px 11px; font: 13px var(--mono); }
.owner-key button { margin-left: 8px; }
.design-controls { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; min-width: 0; }
.design-controls summary { cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.5; }
.design-controls .field { margin-top: 12px; }
.design-controls label { display: grid; gap: 6px; min-width: 0; font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.design-controls input:not([type="checkbox"]), .design-controls select, .design-controls textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.design-binding-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto; gap: 10px; align-items: end; margin: 12px 0; }
.design-binding-row.pair { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; }
.design-checks { display: grid; gap: 10px; margin: 14px 0; }
.design-checks label { display: flex; align-items: center; gap: 8px; }
.design-checks input { flex: 0 0 auto; }
@media (max-width: 650px) {
  .design-binding-row, .design-binding-row.pair { grid-template-columns: minmax(0,1fr); padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
  .design-binding-row button { justify-self: start; }
}

/* Automations board: what runs, how it starts, what it did, what waits for you (2026-09-27) */
.auto-cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.auto-card { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) auto; gap: 14px 20px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, transparent); }
.auto-main { display: grid; gap: 4px; min-width: 0; }
.auto-name { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.auto-main .why a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.auto-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.auto-stats b { color: var(--text); font-weight: 600; }
.auto-stats .hot b, .auto-stats .hot { color: var(--accent); }
.auto-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.auto-drafts summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; padding: 6px 0; list-style: none; }
.auto-drafts summary::-webkit-details-marker { display: none; }
.auto-drafts summary::before { content: "▸"; color: var(--ink-2); }
.auto-drafts[open] summary::before { content: "▾"; }
@media (max-width: 760px) { .auto-card { grid-template-columns: 1fr; } .auto-acts { justify-content: flex-start; } }