/* Preflight: a pilot's checklist card on warm paper; an instrument panel after dark. */

:root {
  --paper: #f2ede2;
  --card: #fbf8f1;
  --ink: #15191c;
  --ink-2: #4a4f52;
  --rule: #d9d1c0;
  --rule-strong: #b9ae97;
  --teal: #1f4e5f;
  --teal-ink: #ffffff;
  --pass: #2d6a45;
  --fail: #b0281b;
  --warn: #9a5b00;
  --note: #3d5a78;
  --fail-wash: #f6e1db;
  --warn-wash: #f5ead2;
  --shadow: 0 1px 0 rgba(21, 25, 28, .06), 0 18px 40px -24px rgba(21, 25, 28, .35);
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1316;
    --card: #141b1f;
    --ink: #e8e4da;
    --ink-2: #a7a69f;
    --rule: #263037;
    --rule-strong: #3a4952;
    --teal: #2f7c94;
    --pass: #6cc28f;
    --fail: #ff8a7a;
    --warn: #f0b85a;
    --note: #9bbbe0;
    --fail-wash: #3a1d19;
    --warn-wash: #33280f;
    --shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 18px 40px -20px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e1316; --card: #141b1f; --ink: #e8e4da; --ink-2: #a7a69f; --rule: #263037; --rule-strong: #3a4952;
  --teal: #2f7c94; --pass: #6cc28f; --fail: #ff8a7a; --warn: #f0b85a; --note: #9bbbe0; --fail-wash: #3a1d19; --warn-wash: #33280f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--body);
  overflow-x: hidden;
}
a { color: inherit; text-decoration-color: var(--teal); text-underline-offset: 3px; }
code { font: 500 .86em var(--mono); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grain { mix-blend-mode: screen; opacity: .25; } }
main, header, footer { position: relative; z-index: 1; }

/* ---- masthead ---- */
.masthead { padding: 40px 0 8px; }
.formline {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 6px;
  font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.formline span + span::before { content: "/"; margin-right: 18px; color: var(--rule-strong); }
h1 {
  margin: 0; font: 900 clamp(76px, 17vw, 184px)/.82 var(--display); letter-spacing: -.01em; text-transform: uppercase;
  color: var(--ink);
}
h1::after {
  content: ""; display: block; height: 10px; margin-top: 14px; max-width: 520px;
  background: repeating-linear-gradient(-45deg, var(--teal) 0 12px, transparent 12px 24px);
  opacity: .9;
}
.tagline { max-width: 62ch; margin: 18px 0 0; font-size: 19px; color: var(--ink-2); }

/* ---- intake strip ---- */
.intake { margin: 36px 0 28px; }
.strip {
  background: var(--card); border: 1px solid var(--rule-strong); border-left: 10px solid var(--teal);
  border-radius: 4px; padding: 14px 16px 16px; box-shadow: var(--shadow);
}
.strip-label { display: block; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.strip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.strip input {
  flex: 1 1 280px; min-width: 0; padding: 13px 14px; font: 500 17px var(--mono); color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
}
.strip input:focus { outline: none; border-bottom-color: var(--teal); background: color-mix(in srgb, var(--teal) 6%, transparent); }
.strip button[type="submit"] {
  flex: 0 0 auto; padding: 0 26px; min-height: 50px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--teal); color: var(--teal-ink); font: 800 22px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  transition: transform .15s ease, filter .15s ease;
}
.strip button[type="submit"]:hover { filter: brightness(1.12); }
.strip button[type="submit"]:active { transform: translateY(1px); }
.strip button:disabled { cursor: progress; filter: saturate(.4); }
.form-error:empty, .run-status:empty { display: none; }
.run-status { margin: 10px 0 0; font: 500 14px var(--mono); color: var(--teal); }
.run-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: currentColor; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.form-error { margin: 10px 0 0; color: var(--fail); font-weight: 700; }
.examples { margin: 14px 0 0; color: var(--ink-2); font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  font: 500 13px var(--mono); padding: 6px 10px; border-radius: 999px; cursor: pointer;
  color: var(--ink); background: transparent; border: 1px dashed var(--rule-strong);
}
.chip:hover { border-style: solid; border-color: var(--teal); }

button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* ---- the card ---- */
.card {
  position: relative; overflow: hidden; margin: 8px 0 48px; background: var(--card);
  border: 1px solid var(--rule-strong); border-radius: 4px; box-shadow: var(--shadow);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--rule) 55%, transparent) 31px 32px);
}
.card-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 22px 22px 18px; border-bottom: 2px solid var(--ink); }
.card-meta { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.card-meta div { min-width: 0; }
.card-meta dt { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.card-meta dd { margin: 0; font: 500 14px/1.35 var(--mono); overflow-wrap: anywhere; }
.card-meta dd:empty::before { content: "—"; color: var(--ink-2); }

.stamp {
  --stamp: var(--fail);
  align-self: center; display: grid; justify-items: center; gap: 2px; padding: 10px 18px 12px; min-width: 190px;
  color: var(--stamp); border: 4px double var(--stamp); border-radius: 6px; transform: rotate(-5deg);
  text-align: center; mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stamp { mix-blend-mode: normal; } }
.card[data-verdict="conforming"] .stamp { --stamp: var(--pass); }
.card[data-verdict="no-agent-site"] .stamp { --stamp: var(--note); }
.stamp strong { font: 900 40px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.stamp span { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; max-width: 22ch; }
.card.reveal .stamp { animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) both .15s; }
@keyframes stamp { from { opacity: 0; transform: rotate(-14deg) scale(1.6); } to { opacity: 1; transform: rotate(-5deg) scale(1); } }

.card-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 22px; border-bottom: 1px solid var(--rule-strong); background: color-mix(in srgb, var(--card) 85%, var(--paper)); }
.tallies { display: flex; gap: 18px; }
.tally { display: flex; align-items: baseline; gap: 6px; }
.tally strong { font: 800 30px/1 var(--display); }
.tally span { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.tally-fail strong { color: var(--fail); } .tally-warn strong { color: var(--warn); } .tally-pass strong { color: var(--pass); }
.runtime-line { margin: 0; flex: 1 1 220px; color: var(--ink-2); font-size: 15px; }
.runtime-line:empty { display: none; }
.card-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-left: auto; }
.toggle { font-size: 14px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; cursor: pointer; }
.ghost { font: 500 13px var(--mono); padding: 6px 10px; border: 1px solid var(--rule-strong); border-radius: 3px; background: transparent; color: var(--ink); cursor: pointer; }
.ghost:hover { border-color: var(--teal); }
.retry {
  display: block; width: calc(100% - 44px); margin: 16px 22px 0; padding: 12px 14px; text-align: left; cursor: pointer;
  font: 700 15px var(--body); color: var(--teal-ink); background: var(--teal); border: 0; border-radius: 3px;
}
.retry[hidden] { display: none; }

.checklist { padding: 6px 22px 24px; }
.group h3 {
  display: flex; justify-content: space-between; gap: 12px; margin: 22px 0 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--ink); font: 800 19px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase;
}
.group-name { overflow-wrap: anywhere; }
.group-count { font: 600 11px var(--mono); letter-spacing: .12em; color: var(--ink-2); align-self: center; white-space: nowrap; }
.group-clear { margin: 8px 0; color: var(--pass); font: 500 14px var(--mono); }

.line { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px dotted var(--rule-strong); }
.card.reveal .line { animation: line-in .35s ease both; animation-delay: calc(var(--i) * 28ms + .25s); }
@keyframes line-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.line-mark {
  align-self: start; text-align: center; padding: 4px 0; border: 2px solid currentColor; border-radius: 2px;
  font: 600 12px/1 var(--mono); letter-spacing: .08em;
}
.is-pass .line-mark { color: var(--pass); } .is-fail .line-mark { color: var(--fail); background: var(--fail-wash); }
.is-warn .line-mark { color: var(--warn); background: var(--warn-wash); } .is-info .line-mark, .is-skip .line-mark { color: var(--note); border-style: dashed; }
.line-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.line h4 { margin: 0; font: 700 17px/1.3 var(--body); }
.is-pass h4, .is-skip h4 { font-weight: 400; color: var(--ink-2); }
.line-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font: 600 11px/1 var(--mono); letter-spacing: .06em; padding: 4px 6px; border-radius: 2px; border: 1px solid var(--rule-strong); color: var(--ink-2); white-space: nowrap; }
.tag-must { color: var(--ink); border-color: var(--ink); }
.tag-ref { color: var(--note); border-color: var(--note); }
.line-detail { margin: 4px 0 0; color: var(--ink-2); overflow-wrap: anywhere; font-size: 15px; }
.line-fix {
  margin: 8px 0 0; padding: 8px 12px; font-size: 15px; overflow-wrap: anywhere;
  border-left: 3px solid var(--teal); background: color-mix(in srgb, var(--teal) 7%, transparent);
}
.line-fix b { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-right: 6px; }

.scanner { display: none; }
.card.is-running { opacity: .75; }
.card.is-running .scanner {
  display: block; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--teal);
  animation: scan 1.1s ease-in-out infinite alternate;
}
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(240px); } }

@media (max-width: 640px) {
  .card-head { grid-template-columns: 1fr; }
  .card-meta { grid-template-columns: 1fr; }
  .stamp { justify-self: start; }
  .line { grid-template-columns: 1fr; gap: 6px; }
  .line-mark { justify-self: start; padding: 4px 8px; }
  .card-tools { margin-left: 0; }
}

/* ---- method ---- */
.method { margin: 0 0 56px; }
.method h2, .assistant h2, .agents h2 { font: 800 32px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; margin: 0 0 16px; }
.method ol { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.method li { counter-increment: step; position: relative; padding: 18px 18px 18px 18px; border-top: 3px solid var(--ink); color: var(--ink-2); font-size: 16px; }
.method li::before { content: "0" counter(step); display: block; font: 900 44px/1 var(--display); color: var(--teal); margin-bottom: 8px; }
.method li b { color: var(--ink); display: block; margin-bottom: 4px; }

/* ---- assistant ---- */
.assistant { margin: 0 0 56px; padding-top: 28px; border-top: 2px solid var(--ink); }
.assistant-intro { max-width: 70ch; }
.assistant-intro p { color: var(--ink-2); margin: 0 0 10px; }
.assistant-note { font-size: 14px; }
#assistant-status { font: 500 13px var(--mono); color: var(--ink-2); margin: 12px 0; }

#agent-app {
  --ns-font: var(--body);
  --ns-bg: var(--card);
  --ns-fg: var(--ink);
  --ns-primary: #1f4e5f;
  --ns-accent: #1f4e5f;
  --ns-border: var(--rule-strong);
  --ns-panelbg: var(--card);
  --ns-msgbg: color-mix(in srgb, var(--paper) 70%, var(--rule));
  --ns-muted: var(--ink-2);
}
.assistant-panels { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; margin-top: 16px; }
#agent-app.ns-composed-app [data-ns-slot="chat"] { height: 640px; }
#agent-app .ns-chat { background: var(--ns-bg); }
#agent-app input[type="checkbox"], #agent-app input[type="radio"] { width: auto; }
#agent-app .ns-header { flex-wrap: wrap; }
#agent-app .ns-settings-body label { margin: 4px 0; font-weight: 400; }
#agent-app .ns-w-label { font-family: inherit; }
#agent-app .ns-widget label { margin: 0; }
#agent-app .ns-w-radio label, #agent-app .ns-w-multi label, #agent-app .ns-w-toggle { font-weight: 400; }
#agent-app .ns-w-toggle { font-size: 13px; }
#agent-app button { margin: 0; }
#agent-app .ns-w-choice { color: var(--ns-fg); }
#agent-app .ns-devtoggle:not(.on):hover, #agent-app .ns-modal-close:hover { background: transparent; }
#agent-app .ns-consent { background: #fffbeb; color: #15191c; }
#agent-app .ns-msgs:has(.ns-consent-actions) > .ns-turn-status { display: none; }
#agent-app .ns-msg { overflow-wrap: break-word; }
#agent-app .ns-consent-actions { flex-wrap: wrap; }
#agent-app .ns-consent-actions button { white-space: nowrap; }
body > dialog h2 { margin: 0 0 12px; font: 700 1.25em var(--body); }
body > dialog button { margin-right: 8px; }
@media (max-width: 760px) { .assistant-panels { grid-template-columns: 1fr; } }

/* ---- for agents ---- */
.agents { margin: 0 0 56px; padding: 24px; background: var(--ink); color: var(--paper); border-radius: 4px; }
.agents p { color: color-mix(in srgb, var(--paper) 75%, var(--ink)); margin: 0 0 18px; max-width: 68ch; }
.endpoints { margin: 0; display: grid; gap: 14px; }
.endpoints div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--paper) 22%, var(--ink)); }
.endpoints dt { font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 65%, var(--ink)); padding-top: 3px; }
.endpoints dd { margin: 0; display: grid; gap: 4px; }
.endpoints dd > code { font-size: 15px; color: #8fd3e8; overflow-wrap: anywhere; }
.endpoints dd span { font-size: 14px; color: color-mix(in srgb, var(--paper) 75%, var(--ink)); }
@media (max-width: 640px) { .endpoints div { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .agents { background: #070a0c; color: var(--ink); border: 1px solid var(--rule); } }

.footer { padding: 0 16px 48px; color: var(--ink-2); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}