/* Static styles only. No animations or transitions anywhere (UI-8). */
*, *::before, *::after { box-sizing: border-box; animation: none !important; transition: none !important; }
:root { --fg: #1b1f24; --muted: #57606a; --line: #d0d7de; --bg: #fff; --accent: #0b57d0; --bad: #b42318; --ok: #1a7f37; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); }
.shell { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-right: 1px solid var(--line); }
.nav a { color: var(--fg); text-decoration: none; padding: 4px 8px; border-radius: 4px; }
.nav a.active, .nav a:focus-visible { background: #eef2f7; outline: 2px solid var(--accent); outline-offset: -2px; }
.nav .brand { font-weight: 600; margin-bottom: 8px; }
.content { padding: 16px 24px; max-width: 1200px; min-width: 0; }
.content:focus { outline: none; }
h1 { font-size: 20px; margin: 0 0 12px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); }
.muted { color: var(--muted); }
.bad { color: var(--bad); }
.ok { color: var(--ok); }
form.stack { display: grid; gap: 8px; max-width: 480px; }
form.stack.wide { max-width: 960px; }
fieldset { border: 1px solid var(--line); padding: 8px; display: grid; gap: 8px; min-width: 0; }
label { display: grid; gap: 2px; }
input, select, textarea, button { font: inherit; padding: 4px 8px; max-width: 100%; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.guest { max-width: 720px; margin: 0 auto; padding: 16px; }
.guest .brand { font-weight: 600; }
.guest .content { padding: 0; }
ol.steps { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-left: 20px; color: var(--muted); }
ol.steps .current { color: var(--fg); font-weight: 600; }
ol.steps .done { color: var(--ok); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
dt { color: var(--muted); }
dd { margin: 0; }
h2 { font-size: 16px; margin: 16px 0 8px; }
.tabs { display: flex; gap: 12px; margin-bottom: 12px; }
.tabs a[aria-current="page"] { font-weight: 600; text-decoration: none; color: var(--fg); }
form.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
td form { display: inline-block; margin: 0 4px 4px 0; }
form.inline { display: inline-flex; gap: 4px; }
label.check { display: flex; gap: 6px; }
.skip-link { position: absolute; left: 8px; top: -100px; padding: 4px 8px; background: var(--bg); color: var(--accent); border: 1px solid var(--accent); }
.skip-link:focus { top: 8px; }
.table-scroll { overflow-x: auto; }
.article-body { white-space: pre-wrap; }
.diff pre { margin: 0; white-space: pre-wrap; font: inherit; }
.badge { border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }
/* Reflow (WCAG 1.4.10): one column, wrapping navigation, no horizontal page scroll at 320 px. */
@media (max-width: 640px) {
    .shell { grid-template-columns: 1fr; }
    .nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); }
    .content { padding: 12px; }
    ol.steps { flex-direction: column; }
    dl { grid-template-columns: 1fr; }
    dd { margin-bottom: 8px; }
}
.field-error { color: var(--bad); }
ol.messages li { margin-bottom: 12px; }
.message-body { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Report charts (M5-F): server-drawn SVG, classes only. Series colours s0–s5; unavailable periods are shaded gaps. */
svg.chart { display: block; width: 100%; max-width: 640px; height: auto; margin: 4px 0 8px; }
svg.chart .axis { stroke: var(--line); }
svg.chart text { font-size: 10px; fill: var(--muted); }
svg.chart .gap { fill: #eef0f3; }
svg.chart .line { fill: none; stroke-width: 2; }
svg.chart .dot { fill: currentColor; stroke: none; }
svg.chart .dot.provisional { fill: var(--bg); stroke: currentColor; stroke-width: 1.5; }
.s0 { stroke: #0b57d0; color: #0b57d0; } .s1 { stroke: #b54708; color: #b54708; } .s2 { stroke: #1a7f37; color: #1a7f37; }
.s3 { stroke: #8250df; color: #8250df; } .s4 { stroke: #bf3989; color: #bf3989; } .s5 { stroke: #57606a; color: #57606a; }
svg.chart .marker line { stroke: var(--fg); stroke-dasharray: 3 3; }
svg.chart .marker text { fill: var(--fg); }
/* The Zendesk sidebar pages (body.embed): a narrow iframe, so compact type and full-width inputs. */
body.embed { font-size: 13px; }
body.embed main { padding: 8px 10px; }
body.embed h1 { font-size: 15px; margin: 0 0 6px; }
body.embed h2 { font-size: 14px; margin: 8px 0 4px; }
body.embed h3 { font-size: 13px; margin: 10px 0 4px; }
body.embed form { margin: 8px 0; }
body.embed textarea, body.embed select, body.embed input:not([type="checkbox"]):not([type="hidden"]) { width: 100%; box-sizing: border-box; }
body.embed .message-body { white-space: pre-wrap; }

/* MCP tool definitions: the server's raw text, often one long line. */
pre.definition { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 30rem; overflow: auto; }
summary h2.summary { display: inline; font-size: inherit; font-weight: inherit; margin: 0; }