/* CIK Systems. The pages carry the design's inline styles; this file holds what inline styles cannot:
   focus, the skip link, disclosures, hover, and the markup the scripts render (agent answers, value case). */
:root {
  --surface: #ffffff; --surface-subtle: #f5f5f5; --ink: #111111; --ink-secondary: #3d3d3d; --ink-muted: #5c5c5c;
  --rule: #dddddd; --rule-soft: #eeeeee; --control-border: #8a8a8a;
  --dark-surface: #111111; --dark-raised: #1c1c1c; --dark-rule: #333333;
  --on-dark: #ffffff; --on-dark-secondary: #c8c8c8; --on-dark-muted: #a3a3a3;
  --brass: #a9832e; --brass-text: #7a5c1c; --brass-on-dark: #d4af5e;
  --signal: #4c6b54; --signal-text: #2f5d3a; --signal-bg: #e6f0e8;
  --rust: #8b4a3c; --rust-bg: #fbf4f2; --rust-on-dark: #f0b4a6;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }

.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--surface); padding: 10px 14px; border-radius: 3px; text-decoration: none; }
.skip:focus { top: 8px; }

:focus-visible { outline: 2px solid var(--brass-text); outline-offset: 2px; }
[style*="background: #111111"] :focus-visible, [style*="background: #1C1C1C"] :focus-visible, .on-dark :focus-visible { outline-color: var(--brass-on-dark); }

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; font-family: var(--mono); width: 1.4em; flex: none; }
details[open] > summary::before { content: "−"; }

a:hover { text-decoration: underline !important; text-underline-offset: 3px; }
button:not(:disabled):hover { filter: brightness(0.94); }
button:disabled, input:disabled { opacity: 0.55; cursor: not-allowed !important; }
input[type="number"] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* evidence output, generated from the scenario run */
.ev { display: flex; flex-direction: column; gap: 14px; }
.ev h4 { margin: 0; font-size: 14px; font-weight: 600; }
.ev .cmd { font-family: var(--mono); font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }
.ev pre { margin: 0; background: #161616; color: #e6e6e6; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; padding: 14px 16px; border-radius: 3px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.ev .finding { font-size: 14px; color: var(--ink-secondary); }
.ev-step { display: flex; flex-direction: column; gap: 6px; }

/* agent answers: markdown from the model, rendered by md.js */
.md { font-size: 16px; color: var(--ink); display: flex; flex-direction: column; gap: 12px; overflow-wrap: anywhere; }
.md > * { margin: 0; }
.md h3, .md h4 { font-family: var(--serif); font-size: 19px; font-weight: 600; margin-top: 4px; }
.md ul, .md ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.md code { font-family: var(--mono); font-size: 0.86em; background: var(--surface-subtle); border: 1px solid var(--rule-soft); border-radius: 2px; padding: 0 4px; }
.md pre { background: #161616; color: #e6e6e6; padding: 12px 14px; border-radius: 3px; overflow-x: auto; font-size: 12.5px; }
.md pre code { background: none; border: 0; padding: 0; color: inherit; }
.md .tbl { overflow-x: auto; }
.md table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.md th, .md td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule-soft); }
.md th { font-weight: 600; border-bottom-color: var(--rule); }
.md blockquote { border-left: 3px solid var(--rule); padding-left: 14px; color: var(--ink-secondary); }
.md .rid { font-family: var(--mono); font-size: 0.86em; font-weight: 500; color: var(--ink); background: none; border: 0; border-bottom: 1px dotted var(--control-border); padding: 0; cursor: pointer; }
.on-dark .md, .md.on-dark { color: #e6e6e6; }
.on-dark .md code { background: #2a2a2a; border-color: #333; }
.on-dark .md .rid { color: #ffffff; border-bottom-color: #8a8a8a; }
.on-dark .md th, .on-dark .md td { border-bottom-color: #333; }

/* record drawer */
.drawer { position: fixed; inset: 0; background: rgba(17,17,17,0.35); display: flex; justify-content: flex-end; z-index: 50; }
.drawer-panel { width: min(520px, 100%); height: 100%; overflow-y: auto; background: var(--surface); padding: 28px clamp(16px, 4vw, 32px); display: flex; flex-direction: column; gap: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.drawer dl { margin: 0; display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.drawer dt { font-weight: 600; }
.drawer dd { margin: 0; color: var(--ink-secondary); }
.drawer dd ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

.lbl { display: inline-block; font-family: var(--mono); font-size: 11px; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 2px; padding: 3px 7px; border: 1px solid; }
.lbl-signal { color: var(--signal-text); background: var(--signal-bg); border-color: var(--signal); }
.lbl-brass { color: var(--brass-text); border-color: var(--brass); }
.lbl-target { color: var(--ink-muted); border: 1px dashed var(--control-border); }
.lbl-rust { color: var(--rust); border-color: var(--rust); }
.lbl-muted { color: var(--ink-muted); border-color: var(--control-border); }

@keyframes cik-spin { to { transform: rotate(360deg); } }
.spin { animation: cik-spin 0.9s linear infinite; transform-origin: 12px 12px; }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

@media print {
  header nav div, footer, .skip { display: none !important; }
  details { display: block; }
}