/* Heimdall. One bold element per row/page: the status colour (edge + pill). Everything else quiet. */
/* Look and feel follows FlowIT (Flow Retail's own app): its colour tokens, Inter + IBM Plex Mono,
   8 px radius, white panels with a hairline border. Status colours are Heimdall's own. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600 700; font-display: swap; src: url("fonts/Inter-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600 700; font-display: swap; src: url("fonts/IBMPlexMono-SemiBold.ttf") format("truetype"); }
:root {
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bg: oklch(0.985 0.003 255); --surface: oklch(1 0 0); --ink: oklch(0.10 0.01 255);
  --muted: oklch(0.45 0.02 255); --line: oklch(0.91 0.01 255); --link: oklch(0.52 0.19 255);
  --primary: oklch(0.52 0.19 255); --primary-soft: oklch(0.94 0.02 255);
  --red: #D93A3A; --amber: #D4940F; --green: #2E9B66; --black: #3B4552; --unknown: #8D9AAA;
  --amber-ink: #875B04;  /* amber text: >= 4.5:1 on white and on --amber-bg (#D4940F alone is too faint) */
  --green-ink: #1F7A4D;  /* green TEXT (>= 4.5:1); --green stays for dots and edges */
  --red-ink: #C42F2F;    /* red TEXT (>= 4.5:1); --red stays for dots and edges */
  --black-ink: #3B4552;  /* text on the page for the black state */
  --notice-bg: #FDF3DC; --notice-ink: #4A3505; --notice-line: #EBCB7F;
  --bad-bg: #FCE9E9; --bad-ink: #9E2222; --bad-line: #F0B5B5;
  --chip: oklch(0.96 0.01 255); --hover: oklch(0.975 0.008 255); --focus: oklch(0.52 0.19 255);
  --shadow: 0 1px 2px rgb(16 24 40 / 0.05);
  --radius: 8px;
  --unknown-ink: #66727F; /* grey (No data) text */
  --stripe-grey: repeating-linear-gradient(135deg, var(--unknown) 0 2px, transparent 2px 4px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.14 0.01 255); --surface: oklch(0.19 0.02 255); --ink: oklch(0.95 0.01 255);
    --muted: oklch(0.68 0.03 255); --line: oklch(1 0 0 / 10%); --link: oklch(0.70 0.15 255);
    --primary: oklch(0.58 0.19 255); --primary-soft: oklch(0.24 0.03 255);
    --black-ink: #8D9AAA; --amber-ink: #D4940F; --unknown-ink: #9AA6B4; --black: #05070A;
    --green-ink: #4CC38A; --red-ink: #F07070; --switch-on: oklch(0.52 0.19 255);
    --notice-bg: #33270C; --notice-ink: #F3DDA6; --notice-line: #5C4714;
    --bad-bg: #3A1717; --bad-ink: #F5B1B1; --bad-line: #6B2A2A;
    --chip: oklch(0.24 0.02 255); --hover: oklch(0.22 0.03 255); --focus: oklch(0.70 0.15 255);
    --shadow: none;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 56px;
       padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px;
         color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.brand img { width: 22px; height: 22px; }
.brand .of { color: var(--muted); font-weight: 400; font-size: 14px; }
@media (max-width: 480px) { .brand .of { display: none; } }
@media (prefers-color-scheme: dark) { .brand img { filter: invert(1); } }
.who { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
main { max-width: 1120px; margin: 0 auto; padding: 20px 16px 48px; }
h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.015em; }
h2 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
section { margin-top: 24px; }
.muted, .meta { color: var(--muted); }
.meta { font-size: 13px; }
.bad { color: var(--red-ink); }
code { font: 13px var(--mono); }

/* notices: banner (full width) and inline */
.notice { background: var(--notice-bg); color: var(--notice-ink); border: 1px solid var(--notice-line);
          border-radius: 6px; padding: 8px 12px; margin: 12px 0; }
.notice.bad { background: var(--bad-bg); color: var(--bad-ink); border-color: var(--bad-line); }
.notice.quiet { background: var(--surface); color: var(--muted); border-color: var(--line); }
.sync-line.good { color: var(--green-ink); }
.sync-line.warn { color: var(--amber-ink); }
.notice.sync-line.good, .notice.sync-line.muted { background: var(--surface); border-color: var(--line); }
.banner { margin: 0; border-radius: 0; border-width: 0 0 1px; padding: 10px 16px; }

/* status pill */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 7px; border-radius: 999px;
        font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid currentColor; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.colour-red { color: var(--red-ink); border-color: var(--red); }
.pill.colour-red .dot { background: var(--red); }
.pill.colour-yellow { color: var(--amber-ink); border-color: var(--amber); }
.pill.colour-yellow .dot { background: var(--amber); }
.pill.colour-green { color: var(--green-ink); border-color: var(--green); }
.pill.colour-green .dot { background: var(--green); }
.pill.colour-black { color: #fff; background: var(--black); border-color: var(--black-ink); }
.pill.colour-black .dot { background: #fff; }
.pill.colour-unknown { color: var(--unknown-ink); border-style: dashed; }
.pill.colour-unknown .dot { background: var(--stripe-grey); border: 1px solid var(--unknown); }
.tag { display: inline-block; font-size: 12px; color: var(--muted); border: 1px solid var(--line);
       border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.tag.warn { color: var(--notice-ink); background: var(--notice-bg); border-color: var(--notice-line); }

/* front page */
.intro { margin: 6px 0 10px; font-size: 14px; }
.intro.below { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.intro.below .legend { opacity: 0.8; font-size: 12px; }
.intro p { margin: 0 0 4px; }
.intro .legend { color: var(--muted); font-size: 13px; line-height: 1.9; }
.intro .legend { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.intro .legend .key { white-space: nowrap; }
.intro .legend .pill { font-size: 12px; margin-right: 2px; }
.summary { font-size: 14px; margin: 6px 0 2px; }
.runs { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; color: var(--muted); margin: 0 0 16px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hosts { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
                       border-collapse: separate; border-spacing: 0; overflow: hidden; }
th { text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); padding: 8px 12px;
     border-bottom: 1px solid var(--line); }
td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
.host td:first-child { box-shadow: inset 4px 0 0 var(--unknown); white-space: nowrap; }
.host.colour-red td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.host.colour-yellow td:first-child { box-shadow: inset 4px 0 0 var(--amber); }
.host.colour-green td:first-child { box-shadow: inset 4px 0 0 var(--green); }
.host.colour-black td:first-child { box-shadow: inset 4px 0 0 var(--black-ink); }
/* grey = no data: a faint diagonal stripe so it never reads as "fine" */
.host.colour-unknown { background-image: repeating-linear-gradient(135deg, transparent 0 8px,
                       color-mix(in srgb, var(--unknown) 12%, transparent) 8px 10px); }
.hosts tbody th { font-size: 14px; font-weight: inherit; color: inherit; padding: 9px 12px; vertical-align: top;
                  border-bottom: 1px solid var(--line); }
tbody tr:last-child th { border-bottom: 0; }
.host.quiet td { color: var(--muted); }
.host.quiet .name { color: var(--muted); font-weight: 500; }
.server a { display: block; color: inherit; text-decoration: none; }
.server a:hover .name { text-decoration: underline; }
.name { display: block; font-weight: 600; color: var(--ink); }
.fqdn { display: block; font-size: 12px; color: var(--muted); }
.sites-more { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.sites-line { margin: 2px 0 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 14px; }
.sites-line .tag { font-size: 11px; vertical-align: 1px; }
.title-row .title-more { font-size: 13px; color: var(--muted); }
/* server page: the Sites table (servers with more than one site) */
.sites { margin: 10px 0 14px; }
.sites h2 { margin: 0 0 6px; }
.sites-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
               border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 13px; }
.sites-table th, .sites-table td { padding: 5px 12px; }
.sites-table tbody th { font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); text-align: left; }
.sites-table tbody tr:last-child th, .sites-table tbody tr:last-child td { border-bottom: 0; }
.sites-table .num { text-align: right; }
.sites-table code { font-size: 12px; }
.site-row.quiet th, .site-row.quiet td { color: var(--muted); }
.site-row.quiet th { font-weight: 400; }
.site-tag { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--muted);
            border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; white-space: nowrap; vertical-align: 1px; }
@media (max-width: 720px) { .sites-table { display: block; overflow-x: auto; } }
.what .ellipsis { display: block; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rules .count { display: block; white-space: nowrap; font-size: 13px; }
.rules .count.todo { color: var(--notice-ink); font-weight: 600; }
.host.quiet .rules .count.todo { color: var(--notice-ink); }
.when { white-space: nowrap; font-size: 13px; }

/* server page: title + status, the suggestion and why, then the rules as a list */
.headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.headline .fqdn { display: inline; font-size: 13px; }
.back, .crumbs { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.page-head { margin-bottom: 4px; }
.title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.title-row h1 { font-size: 24px; }
.title-row .fqdn { display: inline; font-size: 13px; }
.status-line { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; align-self: center; }
.checked { font-size: 13px; color: var(--muted); white-space: nowrap; }
.state { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.advice { max-width: 82ch; }
.advice h2, .rules h2 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.advice h2 + .short, .advice .why + h2 { margin-top: 0; }
.suggestion { font-size: 17px; font-weight: 600; line-height: 1.4; margin: 0 0 18px; }
.why { margin: 0; padding-left: 18px; line-height: 1.5; }
.why li { margin: 4px 0; }
.short { margin: 0 0 6px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.section-head h2 { margin: 0; }
.inline { display: inline; }
details.analysis { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 14px; }
details.analysis summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
details.analysis[open] { padding-bottom: 14px; }
details.analysis h3 { font-size: 13px; margin: 12px 0 4px; }
.reviews { margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.verdict-form { display: flex; flex-wrap: wrap; gap: 8px; }

/* controls */
button, .button { font: inherit; font-size: 13px; color: var(--ink); background: var(--surface);
                  border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 12px; cursor: pointer; box-shadow: var(--shadow);
                  text-decoration: none; display: inline-block; line-height: 1.5; }
button:hover, .button:hover { border-color: var(--muted); }
button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
button.primary:hover { border-color: var(--ink); }
button.secondary { background: var(--surface); color: var(--ink); }
input[type=text] { font: inherit; font-size: 13px; color: var(--ink); background: var(--bg);
                   border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; min-width: 0; flex: 1 1 200px; }

/* file page */
pre { white-space: pre-wrap; word-break: break-word; background: var(--bg); border: 1px solid var(--line);
      padding: 10px 12px; border-radius: 6px; font: 13px/1.45 var(--mono); }
details pre.detail { background: var(--bg); }
.diff { background: var(--surface); }
.copy-row { display: flex; align-items: center; gap: 10px; }
.copy-status { color: var(--muted); font-size: 13px; }
textarea.apache { display: block; width: 100%; font: 12px/1.45 var(--mono);
                  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; overflow-y: auto; resize: vertical; color: var(--ink);
                  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
#filter-text { overflow-y: auto; background: var(--surface); }

/* phones: tables become stacked rows */
@media (max-width: 720px) {
  .hosts thead { display: none; }
  .hosts, .hosts tbody, .hosts tr, .hosts td, .hosts tbody th { display: block; width: 100%; }
  .hosts tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .hosts tr:last-child { border-bottom: 0; }
  .host { box-shadow: inset 4px 0 0 var(--unknown); }
  .host.colour-red { box-shadow: inset 4px 0 0 var(--red); }
  .host.colour-yellow { box-shadow: inset 4px 0 0 var(--amber); }
  .host.colour-green { box-shadow: inset 4px 0 0 var(--green); }
  .host.colour-black { box-shadow: inset 4px 0 0 var(--black-ink); }
  .host td:first-child { box-shadow: none; }
  td, .hosts tbody th { border-bottom: 0; padding: 3px 12px 3px 16px; }
  td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); }
  .hosts td[data-label="Status"]::before, .hosts th[data-label="Server"]::before { content: none; }
  .what .ellipsis { max-width: 100%; white-space: normal; }
  .rules .count { display: inline; margin-right: 10px; }
  .rule-line { flex-wrap: wrap; }
  .phrase { margin-left: 0; flex-basis: 100%; padding-left: 62px; }
}

/* rules list: one block per rule - switch, letter, title, status phrase; the evaluation; two toggles */
.paste-hint { margin: 0 0 10px; font-size: 13px; max-width: 110ch; }
.rule-list { list-style: none; margin: 0; padding: 0; background: var(--surface);
             border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.rule { padding: 12px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.rule:last-child { border-bottom: 0; }
.rule-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.switch-form { display: inline; margin: 0; }
.switch { position: relative; display: inline-flex; align-items: center; justify-content: flex-end;
          width: 52px; height: 24px; padding: 0 8px 0 0; border-radius: 999px; flex: none;
          border: 1px solid var(--muted); background: var(--chip); color: var(--muted);
          font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.switch .knob { position: absolute; left: 3px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
                border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.switch[aria-pressed="true"] { background: var(--switch-on, var(--primary)); border-color: var(--switch-on, var(--primary)); color: #fff;
                               justify-content: flex-start; padding: 0 0 0 9px; }
.switch[aria-pressed="true"] .knob { left: auto; right: 3px; box-shadow: none; }
.switch:hover { border-color: var(--muted); }
.switch[aria-pressed="true"]:hover { border-color: var(--ink); }
.switch.static { justify-content: center; padding: 0; width: 40px; cursor: default; }
.rule.on .switch.static { background: var(--switch-on, var(--primary)); border-color: var(--switch-on, var(--primary)); color: #fff; }
.letter { font-size: 15px; font-weight: 700; min-width: 2.6em; flex: none; }
.rule-title { font-size: 15px; font-weight: 500; min-width: 0; flex: 1 1 auto; }
.rule-title .tag { margin-left: 4px; font-weight: 400; vertical-align: 1px; }
.rule.off .rule-title { color: var(--muted); }
.phrase { margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--muted); }
.phrase.tone-good { color: var(--green-ink); }
.phrase.tone-bad { color: var(--red-ink); }
.phrase.tone-warn { color: var(--amber-ink); }
.evaluation { font-size: 14px; color: var(--ink); margin: 4px 0 0 62px; }
.evaluation .bad { font-weight: 600; }
.judgement { font-size: 13px; margin: 2px 0 0 62px; }
.stamp { font-size: 12.5px; margin: 2px 0 0 62px; }
.customer-cost { color: var(--amber-ink); font-size: 14px; margin: 2px 0 0 62px; font-weight: 600; }
.who-body .customer-cost { margin-left: 0; }
/* the analyst's reasoning: the first thing under a rule (numbers are in Details) and under the suggestion */
.reasoning { font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 6px 0 0 62px; max-width: 78ch; }
.server-reasoning { margin: 10px 0 0; font-size: 15px; }
.evaluation.alert { margin-top: 4px; }
.who-body .evaluation, .who-body .judgement { margin-left: 0; }
.tag.kind { font-size: 11.5px; white-space: nowrap; }
.tag.kind-harmful_now { color: var(--bad-ink); background: var(--bad-bg); border-color: var(--bad-line); }
.tag.kind-preventive { color: var(--notice-ink); background: var(--notice-bg); border-color: var(--notice-line); }
.check-flag { color: var(--amber-ink); font-size: 14px; font-weight: 600; margin: 4px 0 0 62px; }
.switch-warning { font-size: 14px; font-weight: 600; margin: 2px 0 0 62px; }
.rule-toggles { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 20px; margin: 6px 0 0 62px; min-width: 0; }
.rule-toggles details { min-width: 0; }
.rule-toggles details[open] { flex-basis: 100%; }
.rule-toggles summary { cursor: pointer; font-size: 13px; color: var(--link); }
.rule-toggles details[open] > summary { margin-bottom: 4px; }
.who-body { font-size: 13px; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
            border-radius: 6px; padding: 8px 12px; }
.who-body p { margin: 4px 0; }
.who-body .matches { margin: 2px 0 6px; padding-left: 18px; }
.block-failed { margin: 0; font-size: 13px; }
.block { position: relative; min-width: 0; }
.block .copy-row { margin: 4px 0 0; }
.block-tools { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; gap: 8px; }
.block-tools .copy-status { background: var(--bg); padding: 0 4px; }
.block-tools button.copy { padding: 1px 10px; }
pre.apache { margin: 0; white-space: pre; overflow-x: auto; word-break: normal; overflow-wrap: normal;
             font: 12.5px/1.5 var(--mono); color: var(--ink);
             background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
             padding: 10px 12px; padding-right: 96px; max-width: 100%; }
.file-block { margin-top: 8px; }
.file-block pre.apache { background: var(--surface); }
@media (max-width: 720px) {
  .evaluation, .judgement, .stamp, .customer-cost, .switch-warning, .rule-toggles, .reasoning, .check-flag { margin-left: 0; }
  .tag.kind { white-space: normal; }
  .phrase { padding-left: 0; }
}

/* config page (as read from the server): block index, vhost map, every loaded file line-numbered.
   Heimdall blocks green, hand-made blocks amber. Text is never wrapped: long lines scroll. */
:root { --green-bg: #E6F4EC; --amber-bg: #FDF3DC; --del-bg: #FCE9E9; --add-bg: #E6F4EC; }
@media (prefers-color-scheme: dark) {
  :root { --green-bg: #14301F; --amber-bg: #33270C; --del-bg: #3A1717; --add-bg: #14301F; }
}
h2.caps { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
h2.caps .as-read { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.mark { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 4px; padding: 0 6px; white-space: nowrap; border: 1px solid; }
.mark.b-heimdall { color: var(--green-ink); background: var(--green-bg); border-color: var(--green); }
.mark.b-hand { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber); }
.block-index { list-style: none; margin: 0; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.block-index li { padding: 3px 0; }
.block-index a { font: 13px var(--mono); margin-right: 6px; }
.vhosts { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.vhosts td { font-size: 13px; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.only-blocks { margin: 0 6px 10px 0; vertical-align: -2px; }
.only-blocks-label { font-size: 13px; cursor: pointer; }
.only-blocks:checked ~ .files .file:not(.has-blocks) { display: none; }
details.file { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 8px; min-width: 0; }
details.file > summary { cursor: pointer; padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
details.file > summary .path { font-weight: 600; overflow-wrap: anywhere; }
.file-meta { font-size: 12px; color: var(--muted); }
.mark-count { color: var(--ink); font-weight: 600; }
details.file pre.conf { margin: 0 12px 12px; }
pre.conf, pre.diff-view { white-space: pre; overflow-x: auto; word-break: normal; overflow-wrap: normal; margin: 0;
           font: 12.5px/1.5 var(--mono); color: var(--ink);
           background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 0; max-width: 100%; }
/* line number (and diff sign) sit in the padding, outside the text, so tab stops count from the
   line's own first character - a tab-indented file keeps its real indentation */
pre.conf .cl, pre.diff-view .dl { display: inline-block; position: relative; min-width: 100%; min-height: 1.5em; vertical-align: top; padding: 0 12px 0 8ch; tab-size: 8; }
pre.conf .cl::before, pre.diff-view .dl::before { content: attr(data-n); position: absolute; left: 0; width: 4.5ch;
           text-align: right; color: var(--muted); user-select: none; -webkit-user-select: none; }
pre.conf .cl.b-heimdall { background: var(--green-bg); box-shadow: inset 3px 0 0 var(--green); }
pre.conf .cl.b-hand { background: var(--amber-bg); box-shadow: inset 3px 0 0 var(--amber); }
pre.conf .cl:target { outline: 2px solid var(--focus); outline-offset: -2px; }
pre.conf .blk-label { display: block; padding: 2px 0 0 8ch; font: 600 11px/1.6 var(--sans); }
pre.conf .blk-label::before { content: attr(data-label); user-select: none; -webkit-user-select: none; }
pre.conf .blk-label.b-heimdall { color: var(--green-ink); }
pre.conf .blk-label.b-hand { color: var(--amber-ink); }
.same-as { font-size: 12px; color: var(--green-ink); font-weight: 600; }

/* server page: config freshness line, hand-made blocks, removal view (the real shipped file:
   lines to delete red "-", lines to add green "+", context plain) */
.config-line { margin: 8px 0 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.config-line .stale { color: var(--amber-ink); font-weight: 600; }
.rules .count.differs { color: var(--amber-ink); font-weight: 600; }
.hand-made h2 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; }
.rule.hand .rule-line { flex-wrap: wrap; }
.rule.hand .where code { font-size: 12.5px; }
.evaluation.hand-say { margin-left: 0; }
.check-flag.hand-say { margin-left: 0; }
.removal { margin: 8px 0 0; min-width: 0; }
.removal-wrap { flex-basis: 100%; min-width: 0; }
.removal-say { margin: 4px 0 0; font-size: 13px; font-weight: 600; }
.removal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; margin: 0 0 4px; font-size: 13px; }
.removal-head .path { font-weight: 600; overflow-wrap: anywhere; }
.removal-tools { display: inline-flex; align-items: center; gap: 8px; }
.removal-tools button.copy { padding: 1px 10px; }
pre.diff-view { background: var(--surface); }
pre.diff-view .dl .sign { position: absolute; left: 5.6ch; user-select: none; -webkit-user-select: none; font-weight: 700; }
pre.diff-view .dl.del { background: var(--del-bg); color: var(--bad-ink); }
pre.diff-view .dl.add { background: var(--add-bg); color: var(--green-ink); }

/* suggestion and why: two separate full-width panels, one below the other (never side by side) */
.advice-stack { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 8px; }
.advice-stack > section { margin: 0; min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.advice.panel { max-width: none; }
.advice.panel .suggestion { margin: 0; }
.why-panel h2 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
form.reanalyse { display: inline; margin: 0; }
form.reanalyse button[disabled] { opacity: 0.5; cursor: default; }
/* the page head's last row: Re-analyse + where to ask right now, a quiet box of its own */
.ask-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; padding: 6px 10px;
           background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-size: 13px; color: var(--muted); }
.mcp-hint { margin: 0; flex: 1 1 320px; }
.outdated-line { margin: 0; color: var(--notice-ink); font-weight: 600; }
details.earlier { margin: 6px 0 0; }
details.earlier > summary { cursor: pointer; font-size: 13px; color: var(--link); }
details.earlier[open] > summary { margin-bottom: 6px; }

/* open suggestions: a server is not "done" (green) while any remain */
.todo-line { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--amber-ink); }
.what .todo { }  /* second line, same style as the first (Haakon: no amber on the front page) */

/* "Not a problem" next to an Off switch; the collapsed "Dismissed" section at the bottom */
details.not-problem { flex: none; }
details.not-problem > summary { list-style: none; padding: 3px 10px; white-space: nowrap; }   /* a decision, styled like every other button - not a tag */
details.not-problem > summary::-webkit-details-marker { display: none; }
details.not-problem[open] { flex-basis: 100%; order: 10; }          /* opens as its own row under the rule line */
.rule-line:has(details.not-problem[open]) { flex-wrap: wrap; }
details.not-problem[open] > summary { display: inline-block; margin-bottom: 8px; }
.retire-off { flex: none; cursor: not-allowed; }
.retire-off button[disabled] { opacity: 0.45; pointer-events: none; padding: 3px 10px; white-space: nowrap; }   /* the span carries the tooltip */
.not-problem-form { display: flex; flex-direction: column; gap: 6px; max-width: 560px; margin: 0; }
.not-problem-form label { font-size: 13px; }
.not-problem-form textarea { font: inherit; font-size: 13px; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
                             border-radius: 6px; padding: 6px 8px; resize: vertical; }
.np-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.np-count { font-size: 12px; }
.rules .count.quiet { color: var(--muted); }
details.dismissed { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 14px; }
details.dismissed summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
details.dismissed[open] { padding-bottom: 10px; }
details.dismissed .hint { margin: 0 0 6px; font-size: 13px; }
.dismissed-list { list-style: none; margin: 0; padding: 0; }
.dismissed-list li { padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.dismissed-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dismissed-line .rule-title { color: var(--muted); }
.dismissed-line form { margin: 0 0 0 auto; flex: none; }
.dismissed-meta { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 720px) { .dismissed-line { flex-wrap: wrap; } .dismissed-line form { margin-left: 0; } }
.steps { margin: 4px 0 10px; padding-left: 22px; }
.steps li { margin: 3px 0; }
code.copyable { background: var(--chip); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
button.copy-inline { font-size: 12px; padding: 0 8px; margin-left: 6px; line-height: 1.6; vertical-align: 1px; min-height: 24px; }

/* top bar: "Connect Claude" next to the signed-in user */
.top-right { display: inline-flex; align-items: center; gap: 16px; min-width: 0; }
.top-link { font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.top-link:hover { text-decoration: underline; }
@media (max-width: 480px) { .top-right .who { display: none; } }

/* Connect Claude to Huginn */
.connect { max-width: 82ch; }
.connect h1 { margin-bottom: 6px; }
.connect .lead { font-size: 15px; margin: 0 0 4px; }
.connect h2 { font-size: 15px; }
.connect-prompt { margin-top: 18px; }
.connect-prompt .muted { margin: 0 0 10px; font-size: 13px; }
.connect-prompt pre { margin: 0; font-size: 12.5px; }
.connect section p { margin: 0 0 6px; }
/* the suggestion as steps + Do all (heimdall.steps, 2026-10-27) */
.advice ul.steps { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
.advice li.step-done, .advice li.step-waiting { color: var(--muted); }
.advice li.step-done { text-decoration: line-through; }
form.do-all { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.retire-pending { flex: none; font-size: 13px; white-space: nowrap; }