/* FM Sentinel. One stylesheet, no external assets (the VPC has no internet) and no inline styles (CSP).
   Colors live in custom properties; the dark scheme only swaps the values. Text pairs are checked for WCAG AA. */

:root {
  color-scheme: light dark;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* spacing scale */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem;
  --radius: 8px; --radius-sm: 6px;

  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f1f4f8;
  --surface-3: #e7ebf1;
  --border: #dde2e9;
  --border-strong: #c3cbd6;
  --text: #18202b;
  --muted: #536070;
  --faint: #6b7686;
  --accent: #1f5bd8;
  --accent-hover: #1848ad;
  --accent-soft: #e8effd;
  --on-accent: #ffffff;
  --focus: #1f5bd8;
  --danger: #b42318;
  --danger-hover: #912018;
  --danger-soft: #fdeceb;
  --danger-border: #f3c4bf;
  --ok: #156a32;
  --ok-soft: #e6f4ea;
  --ok-border: #b7dfc3;
  --warn: #8a4b00;
  --warn-soft: #fff4e0;
  --warn-border: #f1d29e;
  --caution: #6b5800;
  --caution-soft: #fffbdc;
  --caution-border: #ece08f;
  --neutral-soft: #eef1f5;
  --neutral-border: #d3d9e1;
  --row-hover: #f5f8fc;
  --opened: #fff5f4;
  --opened-hover: #feeceb;
  --line-match: #fff8dc;
  --line-hover: #eef4ff;
  --mark-bg: #ffd54a;
  --mark-text: #111111;
  --chart-db: #2a6fb0;
  --chart-admin: #d9822b;
  --chart-probe: #7b5cc4;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);

  --header-bg: #111827;
  --header-text: #e6ebf2;
  --header-muted: #a3adbd;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --surface: #151b23;
    --surface-2: #1b222c;
    --surface-3: #232b37;
    --border: #2b3441;
    --border-strong: #3c4757;
    --text: #e3e8ef;
    --muted: #9ba6b5;
    --faint: #8792a2;
    --accent: #6d9eff;
    --accent-hover: #8fb4ff;
    --accent-soft: #1a2a47;
    --on-accent: #0b1220;
    --focus: #8fb4ff;
    --danger: #ff8278;
    --danger-hover: #ffa49c;
    --danger-soft: #3a1a1a;
    --danger-border: #6e2b27;
    --ok: #5fd381;
    --ok-soft: #143023;
    --ok-border: #24573a;
    --warn: #e8b64c;
    --warn-soft: #33270f;
    --warn-border: #614a1a;
    --caution: #e6d36a;
    --caution-soft: #2c2a12;
    --caution-border: #575221;
    --neutral-soft: #222a35;
    --neutral-border: #3a4554;
    --row-hover: #1a212b;
    --opened: #24171a;
    --opened-hover: #2c1b1f;
    --line-match: #2b2614;
    --line-hover: #1a2433;
    --mark-bg: #ffd54a;
    --mark-text: #111111;
    --chart-db: #5b9be0;
    --chart-admin: #e9a050;
    --chart-probe: #a68be6;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);

    --header-bg: #0a0e14;
    --header-text: #e3e8ef;
    --header-muted: #9ba6b5;
  }
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.5 var(--font); background: var(--bg); color: var(--text); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4 { line-height: 1.25; margin: var(--s5) 0 var(--s2); font-weight: 650; }
h1 { font-size: 1.5rem; margin-top: var(--s2); letter-spacing: -.01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: var(--s5); }
p { margin: var(--s2) 0; }
code, pre, kbd, samp { font-family: var(--mono); font-size: .92em; }
small { color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s5) 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- top bar */

header.topbar { background: var(--header-bg); color: var(--header-text); border-bottom: 1px solid var(--border); }
header nav { display: flex; flex-wrap: wrap; align-items: stretch; column-gap: var(--s4); max-width: 96rem; margin: 0 auto; padding: 0 var(--s5); }
header nav a { color: var(--header-text); text-decoration: none; }
header nav .brand { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: 15px; letter-spacing: .01em; margin-right: var(--s3); }
header nav .brand::before { content: ""; width: 14px; height: 16px; background: linear-gradient(160deg, #6d9eff, #1f5bd8); clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%); }
header nav .navlinks { display: flex; flex-wrap: wrap; column-gap: var(--s4); }
header nav .navlinks a { display: inline-flex; align-items: center; min-height: 3.25rem; border-bottom: 2px solid transparent; padding-top: 2px; color: var(--header-muted); font-weight: 500; }
header nav .navlinks a:hover { color: var(--header-text); }
header nav .navlinks a[aria-current="page"] { color: #ffffff; border-bottom-color: #6d9eff; }
header nav .who { margin-left: auto; display: inline-flex; min-height: 2.75rem; align-items: center; gap: .35rem; font-size: 13px; color: var(--header-muted); }
header nav .who .email { color: var(--header-text); }
header nav .who .role::before { content: "· "; }
header nav form.signout { display: inline-flex; min-height: 2.75rem; align-items: center; margin: 0; }
header nav form.signout button { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; font: inherit; font-size: 13px; color: var(--header-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); cursor: pointer; }
header nav form.signout button:hover { background: none; color: var(--header-text); text-decoration-color: currentColor; }
header nav :focus-visible { outline-color: #8fb4ff; }

/* ---------------------------------------------------------------- page frames */

main.page { max-width: 96rem; margin: 0 auto; padding: var(--s5) var(--s5) var(--s6); }
main.page p, main.page ul, main.page ol, .copybox { max-width: 80rem; }
main.page > p, main.page > section > p, .note, .meta { max-width: 75rem; }
main.page > h1:first-child, main.page > .flash + h1, main.page > h2:first-child { margin-top: var(--s2); }

/* Sign-in page: a small centered card. */
body > main:not(.page) { max-width: 26rem; margin: 18vh auto 0; padding: var(--s6); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); text-align: center; }
body > main:not(.page) h1 { display: inline-flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); font-size: 1.35rem; }
body > main:not(.page) h1::before { content: ""; width: 18px; height: 21px; background: linear-gradient(160deg, #6d9eff, #1f5bd8); clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%); }
body > main:not(.page) p { color: var(--muted); }

/* Cards: every top-level section, the state boxes and the host sections. */
main.page > section, .card, section.statebox, section.host { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s2) var(--s5) var(--s5); margin: var(--s4) 0; }
main.page > section > h2:first-child, main.page > section > h3:first-child, section.statebox > h3:first-child, section.host > h3:first-child { margin-top: var(--s4); }
section.host > h3:first-child { font-size: 1.15rem; }
section.host.flag { border-color: var(--danger-border); box-shadow: inset 4px 0 0 var(--danger), var(--shadow); }
section#blacklist-candidates { margin-top: var(--s6); }

/* ---------------------------------------------------------------- text helpers */

.meta { margin: var(--s1) 0; color: var(--muted); }
.meta strong { color: var(--text); }
.note { font-size: 13px; color: var(--muted); }
.times { font-weight: 500; color: var(--muted); }
.legend { color: var(--muted); }
.reason { color: var(--muted); font-style: italic; font-size: 12px; }
td .reason { display: inline-block; max-width: 13rem; margin-top: 2px; }
.nolead, .warn { color: var(--warn); }
.flagmark, .crit { font-weight: 600; color: var(--danger); }
.none { color: var(--muted); font-style: italic; padding: var(--s2) 0; }

/* Breadcrumbs and host lists, used by the client and host pages. */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: 0 0 var(--s3); padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--s2); }
.breadcrumb li + li::before { content: "/"; color: var(--border-strong); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }
ul.host-list { list-style: none; margin: var(--s3) 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-width: none; }
ul.host-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding: var(--s3) var(--s4); border-top: 1px solid var(--border); }
ul.host-list > li:first-child { border-top: 0; }
ul.host-list > li:hover { background: var(--row-hover); }
ul.host-list > li > a:first-child { font-weight: 600; }

/* ---------------------------------------------------------------- badges and tags */

.badge { display: inline-flex; align-items: center; gap: .3em; padding: .1rem .55rem; border: 1px solid var(--neutral-border); border-radius: 999px; background: var(--neutral-soft); color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.status-attacks, .status-observed, .result-rejected { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.result-filed { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok); }
.status-clear { background: var(--caution-soft); border-color: var(--caution-border); color: var(--caution); }
.status-no-data, .result-nothing-new { color: var(--muted); }
.status-unknown, .result-unknown { background: transparent; color: var(--muted); border-style: dashed; }
.result-quarantined { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }
.tag { display: inline-block; margin-left: var(--s1); padding: 0 .4rem; border: 1px solid var(--neutral-border); border-radius: 4px; background: var(--neutral-soft); color: var(--muted); font-size: 11px; font-weight: 600; vertical-align: middle; }
.bl { display: inline-flex; align-items: center; gap: .25em; padding: 0 .45rem; border: 1px solid var(--danger-border); border-radius: 999px; background: var(--danger-soft); color: var(--danger); font-size: 12px; white-space: nowrap; }

/* ---------------------------------------------------------------- alerts */

.flash { display: flex; align-items: flex-start; gap: var(--s2); margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border: 1px solid; border-left-width: 4px; border-radius: var(--radius-sm); font-weight: 500; max-width: 75rem; }
.flash::before { font-weight: 700; flex: none; }
.flash.ok { background: var(--ok-soft); border-color: var(--ok-border); border-left-color: var(--ok); color: var(--text); }
.flash.ok::before { content: "\2713"; color: var(--ok); }
.flash.error { background: var(--danger-soft); border-color: var(--danger-border); border-left-color: var(--danger); color: var(--text); }
.flash.error::before { content: "!"; color: var(--danger); }
div.note.warn { padding: var(--s2) var(--s3); margin: var(--s2) 0; border: 1px solid var(--warn-border); border-left-width: 4px; border-left-color: var(--warn); border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--text); }

/* ---------------------------------------------------------------- buttons */

button, ::file-selector-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  font: 500 13px/1.25 var(--font); padding: .5rem .95rem; min-height: 2.15rem;
  border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent);
  cursor: pointer; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s;
}
button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button:disabled, button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
button:disabled:hover { background: var(--accent); border-color: var(--accent); }

button.secondary, button.copy, button.prefill, ::file-selector-button { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
button.secondary:hover, button.copy:hover, button.prefill:hover, ::file-selector-button:hover { background: var(--surface-2); border-color: var(--faint); }
button.secondary:disabled:hover, button.copy:disabled:hover, button.prefill:disabled:hover { background: var(--surface); border-color: var(--border-strong); }

button.danger { background: var(--surface); color: var(--danger); border-color: var(--danger-border); }
button.danger:hover { background: var(--danger); border-color: var(--danger); color: var(--surface); }
button.danger:focus-visible { outline-color: var(--danger); }
button.danger:disabled:hover { background: var(--surface); color: var(--danger); border-color: var(--danger-border); }

button.prefill { min-height: 0; padding: .2rem .55rem; margin-left: var(--s2); font-size: 12px; }

/* ---------------------------------------------------------------- inputs and forms */

input[type=text], input[type=search], input[type=email], input[type=number], input:not([type]), select, textarea {
  font: 14px/1.4 var(--font); color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: .45rem .65rem; min-height: 2.15rem; max-width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
input:hover, select:hover, textarea:hover { border-color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
input[readonly], textarea[readonly] { background: var(--surface-2); }
textarea { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; }
select {
  appearance: none; padding-right: 2.2rem; cursor: pointer; min-width: 16rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 1rem center, right .7rem center; background-size: 5px 5px; background-repeat: no-repeat;
}
input[type=file] { font: 13px var(--font); color: var(--muted); padding: var(--s2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); max-width: 100%; width: 28rem; }
input[type=file]:hover { border-color: var(--accent); }
input[type=file]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::file-selector-button { margin-right: var(--s3); }

/* Forms lay fields out on a wrapping row: each label sits above its field, the button lines up with the fields. */
.stateform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s4); margin: var(--s3) 0; }
.stateform > label { display: flex; flex-direction: column; gap: var(--s1); flex: 0 1 auto; min-width: 12rem; font-size: 12px; font-weight: 600; color: var(--muted); }
.stateform > label input, .stateform > label select { font-weight: 400; width: 100%; }
.stateform > p, .stateform > .savebar { flex-basis: 100%; margin: 0; }
.stateform .hint:empty { display: none; }
.stateform .hint { color: var(--warn); font-weight: 500; }
form.inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; vertical-align: middle; }
form.inline label { display: inline-flex; align-items: center; gap: var(--s2); font-size: 12px; color: var(--muted); }
form.inline input[type=text] { min-height: 1.9rem; padding: .3rem .5rem; font-size: 13px; }
form.inline button { min-height: 1.9rem; padding: .3rem .7rem; font-size: 12px; }

/* Upload page */
#upload-controls { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s5); max-width: 60rem; }
#upload-controls > label:has(input[type=file]) { flex: 1 1 22rem; }
#upload-controls input[type=file] { width: 100%; }
#upload-list { list-style: none; padding: 0; margin: var(--s4) 0; max-width: 60rem; }
#upload-list:empty { display: none; }
#upload-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--border); border-top: 0; }
#upload-list li:first-child { border-top: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
#upload-list li:last-child { border-radius: 0 0 var(--radius) var(--radius); }
#upload-list li:only-child { border-radius: var(--radius); }
#upload-list li > span:first-child { font-family: var(--mono); font-size: 13px; }
#upload-list li > a { margin-left: auto; }

/* ---------------------------------------------------------------- tables */

table { width: 100%; border-collapse: separate; border-spacing: 0; margin: var(--s3) 0; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
th, td { padding: .45rem .7rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); }
th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; white-space: normal; vertical-align: bottom; overflow-wrap: normal; }
thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
thead tr:first-child th:last-child { border-top-right-radius: var(--radius); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--row-hover); }
/* Cells break long hostile values anywhere, so give columns a floor or the table squeezes short words apart. */
td { min-width: 7rem; }
table.dash td:not(.num) { min-width: 10rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 3.5rem; }
td code { font-size: 12.5px; }
td form.inline { display: flex; }
tr.opened td { background: var(--opened); }
tr.opened:hover td { background: var(--opened-hover); }
tr.opened td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
section table, details table { box-shadow: none; }

/* Right-align a header cell when the column below it holds numbers (td.num), so headers match their values. */
table:has(> tbody > tr:first-child > td.num:nth-child(1)) > thead th:nth-child(1),
table:has(> tbody > tr:first-child > td.num:nth-child(2)) > thead th:nth-child(2),
table:has(> tbody > tr:first-child > td.num:nth-child(3)) > thead th:nth-child(3),
table:has(> tbody > tr:first-child > td.num:nth-child(4)) > thead th:nth-child(4),
table:has(> tbody > tr:first-child > td.num:nth-child(5)) > thead th:nth-child(5),
table:has(> tbody > tr:first-child > td.num:nth-child(6)) > thead th:nth-child(6),
table:has(> tbody > tr:first-child > td.num:nth-child(7)) > thead th:nth-child(7),
table:has(> tbody > tr:first-child > td.num:nth-child(8)) > thead th:nth-child(8),
table:has(> tbody > tr:first-child > td.num:nth-child(9)) > thead th:nth-child(9),
table:has(> tbody > tr:first-child > td.num:nth-child(10)) > thead th:nth-child(10),
table:has(> tbody > tr:first-child > td.num:nth-child(11)) > thead th:nth-child(11),
table:has(> tbody > tr:first-child > td.num:nth-child(12)) > thead th:nth-child(12) { text-align: right; }

/* Sortable headers: th.sortable holds a link and carries aria-sort; the arrow is drawn here, so the markup's
   own .sort-arrow text is hidden. */
.sort-arrow { display: none; }
th a { color: inherit; text-decoration: none; }
th.sortable a { display: inline-flex; align-items: center; gap: .3em; }
th.sortable a:hover { color: var(--accent); }
th.sortable a::after { content: "\2195"; content: "\2195" / ""; font-size: 11px; opacity: .45; }
th[aria-sort] { color: var(--text); }
th[aria-sort="ascending"].sortable a::after { content: "\25B2"; content: "\25B2" / ""; font-size: 9px; opacity: 1; color: var(--accent); }
th[aria-sort="descending"].sortable a::after { content: "\25BC"; content: "\25BC" / ""; font-size: 9px; opacity: 1; color: var(--accent); }
th[aria-sort="ascending"], th[aria-sort="descending"] { box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------------------------------------------------------------- lists */

ul.notes { list-style: none; padding: 0; margin: var(--s2) 0; max-width: 75rem; }
ul.notes li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin: 0; padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
ul.notes li:last-child { border-bottom: 0; }
ul.notes li .note { font-size: 12px; }
ul.notes li form.inline { margin-left: auto; }
.pager { display: flex; align-items: center; gap: var(--s3); color: var(--muted); font-size: 13px; }
.pager a { display: inline-flex; align-items: center; padding: .3rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; color: var(--text); }
.pager a:hover { background: var(--surface-2); color: var(--text); }

/* ---------------------------------------------------------------- copy boxes */

.copybox { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s2) 0 var(--s3); }
.copybox textarea { flex: 1; min-width: 0; resize: vertical; white-space: pre; overflow-x: auto; }
.copybox > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); }
.copybox .copied { font-size: 12px; color: var(--ok); }

/* ---------------------------------------------------------------- chart */

.chart { width: 100%; height: auto; max-width: 820px; color: var(--muted); display: block; margin: var(--s2) 0; overflow: visible; }
.chart rect.db { fill: var(--chart-db); }
.chart rect.admin { fill: var(--chart-admin); }
.chart rect.probe { fill: var(--chart-probe); }
.chart g:hover rect { opacity: .8; }
.sw { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 12px; border-radius: 2px; vertical-align: -1px; }
.sw.db { background: var(--chart-db); }
.sw.admin { background: var(--chart-admin); }
.sw.probe { background: var(--chart-probe); }

/* ---------------------------------------------------------------- evidence */

details.ip { border: 1px solid var(--border); border-radius: var(--radius); margin: var(--s3) 0; background: var(--surface); box-shadow: var(--shadow); }
details.ip > summary { cursor: pointer; padding: var(--s3) var(--s4); font: 600 14px var(--mono); overflow-wrap: anywhere; border-radius: var(--radius); }
details.ip[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-2); }
details.ip > summary:hover { background: var(--surface-2); }
details.ip .count { font: 400 12px var(--font); color: var(--muted); margin-left: var(--s3); }
details.ip .body, details.ip .profile { padding: var(--s2) var(--s4) var(--s3); margin: 0; }
details.ip .profile { padding-left: calc(var(--s4) + 1.2rem); }
.profile { font-size: 12.5px; overflow-wrap: anywhere; color: var(--muted); }
.profile li { margin: 2px 0; }
details.file { margin-top: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
details.file > summary { cursor: pointer; font: 600 12.5px var(--mono); background: var(--surface-2); padding: var(--s2) var(--s3); overflow-wrap: anywhere; color: var(--text); }
details.file[open] > summary { border-bottom: 1px solid var(--border); }
.gap { color: var(--faint); font: 11px var(--mono); padding: 1px 0 1px 4.5em; background: var(--surface-2); }
.ln { display: flex; font: 12px/1.6 var(--mono); cursor: pointer; color: var(--muted); }
.ln:hover { background: var(--line-hover); }
.ln .no { flex: 0 0 4.5em; text-align: right; padding-right: .8em; color: var(--faint); user-select: none; border-right: 1px solid var(--border); margin-right: .6em; }
.ln .tx { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: var(--s2); }
.ln.m { color: var(--text); background: var(--line-match); box-shadow: inset 3px 0 0 var(--mark-bg); }
.ln.m:hover { background: var(--line-hover); }
.ln.open .tx { white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }
.ln mark, mark { background: var(--mark-bg); color: var(--mark-text); padding: 0 2px; border-radius: 2px; }

/* ---------------------------------------------------------------- page tools: Rules and info popovers */

.page-tools { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.page-tools .tools-left { min-width: 0; }
.page-tools .tools-left > h1 { margin-top: var(--s2); }
details.popover { position: relative; display: inline-block; }
details.popover > summary { list-style: none; cursor: pointer; user-select: none; }
details.popover > summary::-webkit-details-marker { display: none; }
details.popover.rules > summary { display: inline-flex; align-items: center; min-height: 1.9rem; padding: .3rem .8rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; }
details.popover.rules > summary:hover, details.popover.rules[open] > summary { background: var(--surface-2); }
details.popover.info > summary { display: inline-block; padding: 0 .2rem; color: var(--accent); font-weight: 600; }
details.popover > .pop { position: absolute; z-index: 20; top: calc(100% + 6px); width: min(34rem, 90vw); padding: var(--s3) var(--s4); background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow), 0 8px 24px rgba(0, 0, 0, .14); font-size: 13px; font-weight: 400; text-align: left; }
details.popover.rules > .pop { right: 0; }
details.popover.info > .pop { right: -.5rem; width: min(26rem, 90vw); }
details.popover .pop h3 { margin: var(--s3) 0 var(--s1); font-size: 13.5px; }
details.popover .pop h3:first-child { margin-top: 0; }
details.popover .pop p, details.popover .pop ul { margin: var(--s1) 0; }
details.popover .pop li { margin: 2px 0; }

/* ---------------------------------------------------------------- dashboard bar, actions, hidden helpers */

.dash-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: var(--s3) 0; }
.dash-bar .filter input { width: min(24rem, 80vw); }
.dash-bar .legend { margin-left: auto; font-size: 13px; }
td .code { margin-left: var(--s1); font: 11px var(--mono); color: var(--faint); }
tr[hidden] { display: none; }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s2) 0 var(--s3); }
p.actions { display: block; }
p.actions form.inline { margin-left: var(--s2); }
.labelrow { display: flex; align-items: center; gap: var(--s3); }
.labelrow h4 { margin-right: var(--s1); }
.copybox.compact { margin: 0; align-items: center; }
.copybox.compact textarea { flex: none; width: 18rem; }
.savebar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: flex-start; padding: var(--s2) 0; margin-bottom: var(--s2); background: var(--bg); }
.chart-legend p { margin: 0 0 var(--s1); }
.chart-legend ul { list-style: none; margin: 0; padding: 0; }
.chart-legend li { margin: 2px 0; }
.chart-legend .sw { margin-left: 0; }

/* ---------------------------------------------------------------- evidence extras */

.evidence-tools { display: flex; gap: var(--s2); margin: var(--s3) 0; }
details.ip .ip-status, details.ip .ip-actions, details.ip .rules-met, details.ip details.more { margin: 0; padding: var(--s2) var(--s4) 0; }
details.ip .ip-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
details.ip .rules-met { font-size: 13px; }
details.ip details.more > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
details.ip details.more .profile { padding: var(--s1) 0 0 1.2rem; margin: 0; }
.ip-status .wl { color: var(--ok); }

/* Shown while an evidence page loads (it reads the logs first). */
body.loading::after { content: ""; position: fixed; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 4px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; z-index: 50; }
body.loading { cursor: progress; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.loading::after { animation-duration: 2.4s; } }

/* ---------------------------------------------------------------- print */

@media print {
  :root { color-scheme: light; --bg: #fff; --surface: #fff; --shadow: none; }
  header.topbar, form, .copybox button, button, details.popover, .dash-bar .filter { display: none !important; }
  main.page { max-width: none; padding: 0; }
  main.page > section, section.host, details.ip { break-inside: avoid; box-shadow: none; }
  th { position: static; }
  a { color: inherit; text-decoration: none; }
}

@media (max-width: 720px) {
  header nav .who .label { display: none; }
  main.page { padding: var(--s4) var(--s3); }
  main.page > section, section.statebox, section.host { padding: var(--s2) var(--s4) var(--s4); }
}

/* Blacklist page: the list is edited as one text field */
textarea.listedit { display: block; width: 100%; max-width: 60rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; }
.flash.lineerrors { display: block; }
.flash.lineerrors::before { content: none; }
.flash.lineerrors ul { margin: var(--s2) 0 0; }