/* send.req.to's stylesheet. The page stands on its own without it — a
   header, sections, a labelled textarea, an output, a toolbar of a button
   and links, a hidden attribute on what is not shown — and this file dresses
   that: one palette for light and one for dark on the same names, with the
   --ts-* set tree-sitter-http reads — tree-sitter's capture names — and
   the editor's highlighted mirror laid under the textarea. */

:root {
  --bg: #f7f8fa; --panel: #ffffff; --panel-2: #eef1f5; --line: #dde2e8;
  --text: #1c2330; --muted: #5b6675; --faint: #8b95a3;
  --ok: #1f8a5b; --warn: #a86a00; --bad: #c23a31; --info: #2b6cb0; --on-info: #ffffff;
  --ts-keyword: #1d5fb4; --ts-string-special: #6b3fb5; --ts-constant: #5b6675;
  --ts-property: #0f766e; --ts-string: inherit; --ts-attribute: #8a5a00;
  --ts-comment: #6b7280; --ts-punctuation: #6b7280; --ts-punctuation-special: #6b7280;
  --ts-operator: #6b7280; --ts-variable: #b4421f; --ts-number: #b4421f;
  --ts-boolean: #b4421f; --ts-escape: #b4421f; --ts-tag: #1d5fb4;
  --ts-type: #0f766e; --ts-markup: inherit; --ts-error: #a86a00;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10151a; --panel: #151b21; --panel-2: #1d242c; --line: #262f39;
    --text: #d6dee6; --muted: #93a0ae; --faint: #626e7b;
    --ok: #46c28e; --warn: #e3a63b; --bad: #e5534b; --info: #7fb0e8; --on-info: #0e1a2b;
    --ts-keyword: #8cc7ff; --ts-string-special: #c9b3ff; --ts-constant: #93a0ae;
    --ts-property: #7fd4c1; --ts-attribute: #e8c77d; --ts-comment: #8b98a6;
    --ts-punctuation: #8b98a6; --ts-punctuation-special: #8b98a6; --ts-operator: #8b98a6;
    --ts-variable: #f2a37e; --ts-number: #f2a37e; --ts-boolean: #f2a37e;
    --ts-escape: #f2a37e; --ts-tag: #8cc7ff; --ts-type: #7fd4c1;
    --ts-error: #e3a63b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #10151a; --panel: #151b21; --panel-2: #1d242c; --line: #262f39;
  --text: #d6dee6; --muted: #93a0ae; --faint: #626e7b;
  --ok: #46c28e; --warn: #e3a63b; --bad: #e5534b; --info: #7fb0e8; --on-info: #0e1a2b;
  --ts-keyword: #8cc7ff; --ts-string-special: #c9b3ff; --ts-constant: #93a0ae;
  --ts-property: #7fd4c1; --ts-attribute: #e8c77d; --ts-comment: #8b98a6;
  --ts-punctuation: #8b98a6; --ts-punctuation-special: #8b98a6; --ts-operator: #8b98a6;
  --ts-variable: #f2a37e; --ts-number: #f2a37e; --ts-boolean: #f2a37e;
  --ts-escape: #f2a37e; --ts-tag: #8cc7ff; --ts-type: #7fd4c1;
  --ts-error: #e3a63b;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body { background: var(--bg); color: var(--text); font: 16px/1.55 var(--sans); max-width: 46rem; margin: 0 auto; padding: 1.25rem 1.25rem 5rem; }

/* Header: the title, the theme toggle on the right. The embed hides the
   header with the attribute, which the flex rule would otherwise outrank. */
body > header { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding-bottom: 0.8rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
body > header[hidden] { display: none; }
#theme { font: 500 0.75rem var(--sans); padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
#theme:hover { color: var(--text); }

/* Type. Section headings are small caps labels: the sections are stages of
   one flow, not chapters. */
h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; }
h2 { font: 600 0.72rem/1.4 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 1.5rem 0 0.35rem; }
h3 { font: 500 0.8rem/1.4 var(--sans); color: var(--muted); margin: 0.9rem 0 0.25rem; }
p, li { margin: 0.5rem 0; overflow-wrap: anywhere; }
ul, ol { padding-left: 1.4rem; }
a { color: var(--info); }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
small { font-size: 0.8rem; color: var(--faint); }
/* The allowlist reads as prose: hostnames in the body font, not code. */
#allow { font: inherit; }

/* Code */
code { font: 0.875em var(--mono); background: var(--panel-2); padding: 0.05em 0.3em; border-radius: 3px; }
pre { font: 0.82rem/1.5 var(--mono); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 0.75rem 0.9rem; margin: 0.5rem 0; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
pre code { font: inherit; background: none; padding: 0; border-radius: 0; }
pre.wire { background: var(--panel-2); }
pre:empty { display: none; }

/* Controls */
button, textarea { font: 0.9rem var(--sans); color: var(--text); }
button { padding: 0.4rem 0.9rem; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
button:hover { border-color: var(--muted); }
/* --on-info: the label reads against --info in both palettes; white on the dark palette's lighter blue does not. */
#send { background: var(--info); border-color: transparent; color: var(--on-info); font-weight: 500; padding: 0.35rem 1rem; }
#send:hover { filter: brightness(1.08); }
#send[aria-busy="true"] { opacity: 0.7; cursor: progress; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--info) 45%, transparent); outline-offset: 2px; }

/* The toolbar under the editor: Send, then the links, quiet beside it. */
.toolbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.1rem; margin: 0.75rem 0; }
.toolbar a { font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.toolbar a:hover { color: var(--text); text-decoration: underline; }

/* The editor: the highlighted mirror under a transparent textarea with the
   same metrics, so the caret sits on coloured text. The mirror is `hidden`
   in the markup — bare HTML shows the textarea alone — and this rule is
   what brings it in. */
#document h2 label { cursor: text; }
#editor { height: 18rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); margin: 0.5rem 0; font-family: var(--mono); --http-file-padding: 0.85rem 1rem; --http-file-selection: color-mix(in srgb, var(--info) 30%, transparent); }
#editor:focus-within { border-color: var(--muted); }
#block-status { font-size: 0.85rem; color: var(--faint); }
#block-status:empty::before { content: "\00a0"; }

/* The exchange */
#exchange { border: 1px solid var(--line); border-radius: 6px; padding: 0.25rem 0.9rem 0.85rem; background: var(--panel); }
#exchange pre { background: var(--panel-2); margin: 0.35rem 0 0; }
#exchange .verdict:first-child { margin-top: 0.6rem; }
.notes { font-size: 0.82rem; color: var(--muted); }
.notes li { margin: 0.15rem 0; }

/* Verdicts */
.verdict { font-size: 0.9rem; margin: 0.75rem 0 0.25rem; padding-left: 1.1rem; position: relative; }
.verdict:focus-visible { border-radius: 3px; }
.verdict::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--faint); }
.verdict.ok { color: var(--ok); font-weight: 500; }
.verdict.ok::before { background: var(--ok); }
.verdict.bad { color: var(--bad); font-weight: 500; }
.verdict.bad::before { background: var(--bad); }
.verdict.err { color: var(--warn); }
.verdict.err::before { background: var(--warn); }
.verdict.pending { color: var(--muted); }
.verdict.pending::before { background: var(--info); }

/* The record: one block per exchange, headed by its region and status. */
#exchange .exchange { margin: 0.9rem 0 0; }
#exchange .exchange h3 { font-size: 0.85rem; margin: 0.6rem 0 0.1rem; font-weight: 600; }
#exchange .exchange h3 .status { color: var(--muted); font-weight: 400; }
#exchange h4 { font-size: 0.78rem; margin: 0.5rem 0 0; color: var(--muted); font-weight: 500; }
#exchange .summary { font-size: 0.85rem; color: var(--muted); margin: 0.6rem 0 0; }
#identity { color: var(--muted); }