@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Montserrat:wght@600;700&display=swap");
/* Atlas website. Palette from the Atlas Box itself (dark red), set on deep oxblood; the navy badge stays navy.
   Served as a file: the template minifier mangles inline CSS. */
:root {
  color-scheme: dark;
  --bg: #140A0C;          /* oxblood night */
  --surface: #1E1013;     /* panels */
  --raised: #29161A;      /* fields, hover */
  --line: #3D2128;        /* borders, map rings */
  --box: #8E1B24;         /* Atlas Box red: primary actions */
  --box-lit: #B3303A;     /* hover, router node */
  --rose: #E8A3AA;        /* links, map edges, active nav */
  --text: #F6ECEC;
  --muted: #B89EA3;
  --online: #4FD18B;
  --online-bg: #10291D;
  --attn: #F2A541;        /* needs you */
  --error-bg: #3A1418;
  --error: #FFB4B8;
  --display: "Montserrat", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.55 var(--body); }
a { color: var(--rose); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; }
h1 { font-size: 30px; line-height: 1.15; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; max-width: 70ch; }
.muted { color: var(--muted); }

/* Shell: sidebar + content */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--line); padding: 20px 16px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 6px 22px; color: var(--text); font: 700 18px var(--display); }
.brand:hover { text-decoration: none; }
.brand img { height: 26px; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { color: var(--muted); padding: 9px 12px; border-radius: 8px; font-weight: 500; }
.side nav a:hover { background: var(--raised); color: var(--text); text-decoration: none; }
.side nav a.on { background: var(--raised); color: var(--text); box-shadow: inset 3px 0 0 var(--box-lit); }
.side .who { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.side .who a { display: inline-block; margin-top: 6px; }
main { padding: 36px 44px; max-width: 1180px; width: 100%; min-width: 0; }  /* min-width: a grid item may shrink below its content, so wide tabs and tables scroll inside it */
.crumbs { font-size: 13px; margin-bottom: 8px; color: var(--muted); }

/* Page header with Space tabs */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.pagehead h1 { margin: 0; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tabs a { padding: 10px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.on { color: var(--text); border-bottom-color: var(--box-lit); }

/* Panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 18px; }
.panel > h2:first-child { margin-top: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 18px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tile { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; color: var(--text); }
.tile:hover { border-color: var(--box); text-decoration: none; }
.tile h3 { margin-bottom: 6px; }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 8px; border: 1px solid transparent; background: var(--box); color: #fff; font: 600 14px var(--body); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--box-lit); text-decoration: none; }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--line); }
.btn-quiet:hover { background: var(--raised); }
.btn-attn { background: var(--box); }
.btn-danger { background: var(--error-bg); color: var(--error); border-color: #5A1E24; }
.btn-danger:hover { background: #3A1418; }
input, select, textarea { font: inherit; color: var(--text); background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
input::placeholder { color: #8A7277; }
input:focus, select:focus { border-color: var(--rose); outline: none; }
form.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
form.row input { flex: 1 1 200px; }
form.inline { display: inline; }
label { color: var(--muted); font-size: 13px; }

/* Status */
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; flex: none; }
.chip.ok { background: var(--online-bg); color: var(--online); }
.chip.attn { background: #3A2610; color: var(--attn); }
.error { background: var(--error-bg); color: var(--error); padding: 10px 14px; border-radius: 8px; border: 1px solid #5A1E24; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); margin-right: 6px; vertical-align: middle; }
.dot.ok { background: var(--online); box-shadow: 0 0 0 3px rgba(79, 209, 139, .15); }

/* Lists */
.list { display: flex; flex-direction: column; }
.list .item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.list .item:first-child { border-top: 0; }
.list .item .sub { color: var(--muted); font-size: 13px; }
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 12px; }

/* The live map: the one bold thing */
.mapwrap { position: relative; background: radial-gradient(ellipse at 50% 50%, #2A1217 0%, #1A0B0E 60%, #140A0C 100%); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
svg.map { width: 100%; height: auto; display: block; }
svg.map .ring { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
svg.map .edge { stroke: rgba(232, 163, 170, .28); stroke-width: 1.5; }
svg.map .node { fill: var(--rose); stroke: #140A0C; stroke-width: 3; }
svg.map .node.gw { fill: var(--box-lit); filter: drop-shadow(0 0 8px rgba(179, 48, 58, .8)); }
svg.map .node.gone { fill: #140A0C; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
svg.map text { font: 500 13px var(--body); fill: var(--text); }
svg.map a:hover .node { fill: #fff; }
.maplegend { position: absolute; left: 14px; bottom: 12px; font-size: 12px; color: var(--muted); display: flex; gap: 14px; }
.livebadge { position: absolute; right: 14px; top: 12px; font-size: 12px; color: var(--muted); }
code.link { display: block; padding: 10px; background: var(--raised); border-radius: 8px; word-break: break-all; }

/* Narrow screens: sidebar becomes a top bar */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 12px 16px; }
  .brand { margin: 0 12px 0 0; }
  .side nav { flex-direction: row; }
  .side .who { margin: 0 0 0 auto; border: 0; padding: 0; font-size: 0; }
  .side .who a { font-size: 13px; margin: 0; }
  .side nav a.on { box-shadow: inset 0 -2px 0 var(--box-lit); }
  svg.map text { font-size: 18px; }
  main { padding: 22px 16px; }
  .grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  svg.map .node.fresh { animation: arrive 1.6s ease-out 1; }
  @keyframes arrive { 0% { r: 4; opacity: .2; } 60% { r: 19; } 100% { r: 13; opacity: 1; } }
}

/* Printed box label (light, for paper) */
.sticker { width: 62mm; padding: 4mm; border: 1px dashed #C0D6EA; text-align: center; font-family: system-ui, sans-serif; color: #13263A; background: #fff; }
.sticker-logo { width: 40mm; }
.sticker-qr { width: 34mm; height: 34mm; display: block; margin: 2mm auto; }
.sticker-serial { font: 700 16pt ui-monospace, Menlo, monospace; letter-spacing: 1px; }
.sticker-hint { font-size: 8pt; color: #5B6B7C; }
@media print { .sticker { border: 0; } }

/* Landing */
.landing { min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.landing-logo { width: 220px; margin-bottom: 28px; }
.landing-title { font-size: 40px; max-width: 16ch; }
.landing-map { width: 100%; }
.landing-map .ring { fill: none; stroke: var(--line); stroke-dasharray: 2 5; }
.landing-map .edge { stroke: rgba(232, 163, 170, .3); stroke-width: 1.5; }
.landing-map .node { fill: var(--rose); stroke: var(--bg); stroke-width: 3; }
.landing-map .node.gw { fill: var(--box-lit); filter: drop-shadow(0 0 10px rgba(179, 48, 58, .9)); }
.landing-map .node.gone { fill: var(--bg); stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
@media (max-width: 860px) { .landing { grid-template-columns: 1fr; } .landing-title { font-size: 30px; } }

/* Space sections: applications, endpoints, storage, data sources */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs a { white-space: nowrap; }
label > input, label > textarea { display: block; width: 100%; margin-top: 6px; }
textarea { font-family: ui-monospace, Menlo, monospace; font-size: 12px; resize: vertical; }
textarea:focus { border-color: var(--rose); outline: none; }
details.more summary { cursor: pointer; color: var(--rose); font-size: 13px; margin-top: 4px; }
details.more .list { margin-top: 6px; gap: 2px; }
details.confirm { display: inline-block; margin-left: 8px; }
details.confirm summary { list-style: none; cursor: pointer; color: var(--text); font-size: 13px; font-weight: 600; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; display: inline-block; }
details.confirm summary:hover { background: var(--raised); }
details.confirm summary::-webkit-details-marker { display: none; }
details.confirm[open] summary { color: var(--text); }
.confirmbox { margin-top: 8px; padding: 12px; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; text-align: left; max-width: 280px; }
.confirmbox p { margin: 0 0 10px; font-size: 13px; }
.sourcegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.sourcecard { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--text); }
.sourcecard:hover { border-color: var(--rose); text-decoration: none; }
.sourcecard .sub { color: var(--muted); font-size: 13px; }

/* Live updates: a changed row or node pulses once (static/live.js) */
@media (prefers-reduced-motion: no-preference) {
  .list .item.fresh { animation: rowflash 1.8s ease-out 1; }
  @keyframes rowflash { 0% { background: rgba(232, 163, 170, .22); } 100% { background: transparent; } }
}
#livestate { font-size: 11px; vertical-align: middle; margin-left: 8px; }
[hidden] { display: none !important; }

/* Space page: status at a glance, with quick links to the boxes, the devices and what needs a look. */
.status { display: grid; gap: 12px; margin-bottom: 20px; }
.statusline { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.statusline .dot { width: 10px; height: 10px; margin: 0; background: var(--muted); }
.statusline .dot.ok { background: var(--online); }
.statusline .dot.attn { background: var(--attn); }
.statusline .dot.bad { background: var(--error); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { display: grid; gap: 4px; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--text); }
.stat:hover { border-color: var(--box); text-decoration: none; }
.stat .value { font-size: 20px; font-weight: 600; }
.stat .value.ok { color: var(--online); }
.stat .value.attn { color: var(--attn); }
.stat .value.bad { color: var(--error); }
.stat .label { color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Alerts inbox and incidents. */
.chip.bad { background: var(--error-bg); color: var(--error); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.filters select { width: auto; min-width: 0; }
.alertside { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 6px; max-width: 46%; }
.alertactions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; width: 100%; }
.alertactions form { margin: 0; }
@media (max-width: 640px) {
  .alertrow, .list .item.alertrow { flex-direction: column; align-items: stretch; gap: 8px; }
  .alertside { justify-content: flex-start; max-width: none; }
  .alertactions { justify-content: flex-start; }
}

/* Incident summaries written by the model (docs/plans/alerts-incidents-response.md §4.5). */
.aimark { font-size: 12px; margin: 0 0 10px; }
.aimark .chip { font-size: 11px; margin-right: 4px; }

/* Scrollbars in the theme's colours (Firefox and current Chrome/Safari use the standard properties; older WebKit the
   pseudo-elements). Thin thumbs in the border colour on a transparent track; WebKit lightens the thumb under the pointer. */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* Live traffic: each row's two ends, who started it → who answered, and connections started from the internet. */
.tail-ends { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.tail-ends > div { min-width: 0; overflow-wrap: anywhere; }
.tail-arrow { color: var(--muted); padding-top: 1px; }
tr.incoming td { background: rgba(242, 165, 65, .08); }
tr.incoming td:first-child { box-shadow: inset 3px 0 0 var(--attn); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
[x-cloak] { display: none !important; }
.btn-quiet.on { border-color: var(--rose); color: var(--rose); }

/* Radios keep their native shape (the field style above is for text inputs). */
input[type="radio"] { padding: 0; width: auto; background: none; border: 0; accent-color: var(--box-lit); margin: 3px 0 0; flex: none; }
/* One checkbox everywhere (owner, 2026-10-14): the console's red square with a white tick, never the browser's
   grey. Disabled boxes keep that look, faded, so a locked choice still reads as on or off. */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 18px; height: 18px;
  margin: 3px 0 0; padding: 0; flex: none; display: inline-grid; place-content: center; vertical-align: middle;
  background: var(--raised); border: 1.5px solid #8A7277; border-radius: 4px; cursor: pointer;
  transition: background-color .12s, border-color .12s; }
input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; background: #fff; transform: scale(0);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transition: transform .12s; }
input[type="checkbox"]:checked { background: var(--box-lit); border-color: var(--box-lit); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--rose); }
input[type="checkbox"]:checked:hover:not(:disabled) { background: #C23A45; border-color: #C23A45; }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .7; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { input[type="checkbox"], input[type="checkbox"]::before { transition: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 13px; }
.mono-sm { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.section-head h2 { margin: 0; }
.section-head .filters { margin: 0; }
.empty { color: var(--muted); margin: 4px 0 0; }

/* Network protection: the verdict says first whether anything is wrong. */
.verdict { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; margin-bottom: 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.verdict .mark { width: 14px; height: 14px; border-radius: 50%; margin-top: 9px; flex: none; background: var(--muted); }
.verdict.ok .mark { background: var(--online); box-shadow: 0 0 0 5px rgba(79, 209, 139, .14); }
.verdict.attn { border-color: #5A3A12; }
.verdict.attn .mark { background: var(--attn); box-shadow: 0 0 0 5px rgba(242, 165, 65, .16); }
.verdict h2 { font-size: 24px; line-height: 1.25; margin: 0 0 6px; }
.verdict p { margin: 0; }
.boxstate { color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; }

/* Coverage: one segment per device online, lit when the box sees what it looks up. */
.coverage { display: flex; gap: 3px; height: 12px; margin: 4px 0 10px; max-width: 640px; }
.coverage span { flex: 1; min-width: 4px; border-radius: 3px; background: var(--raised); border: 1px solid var(--line); }
.coverage span.seen { background: var(--online); border-color: var(--online); }
.coverage-line { font-family: var(--display); font-weight: 600; font-size: 17px; margin: 0 0 4px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; margin-top: 14px; }
.cols2 h3 { margin: 0 0 6px; }
.cols2 .count { font-family: var(--body); font-weight: 500; }
.devlist { list-style: none; margin: 0 0 8px; padding: 0; }
.devlist li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.devlist li:first-child { border-top: 0; }
.devlist li .muted { font-size: 13px; text-align: right; }

/* Settings inside a box: how it listens, router steps. */
.setup { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.setup > summary { cursor: pointer; font-weight: 600; color: var(--rose); }
.setup[open] > summary { margin-bottom: 12px; }
.setup.open { border: 1px solid #5A3A12; border-radius: 12px; padding: 16px 18px; background: #23130F; }
.setup.open h3 { color: var(--attn); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices fieldset, fieldset.choices { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.choices fieldset:disabled, fieldset.choices:disabled { opacity: .6; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.choice:hover { background: var(--raised); }
.choice:has(input:checked) { border-color: var(--rose); background: var(--raised); }
.choice span { display: flex; flex-direction: column; gap: 2px; }
.choice .muted { font-size: 13px; }
.choice.off { cursor: default; opacity: .55; }
.choice.off:hover { background: none; }
/* How an Atlas Box listens (security-jor, components/listen.wtz, pages/listen.wtz): "Help me choose", the option cards
   (each the radio's label) and the comparison page. */
.chip.rec { background: transparent; color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose); }
.lm-advice { border: 1px solid var(--line); border-left: 3px solid var(--rose); border-radius: 10px; background: var(--raised); padding: 12px 16px; margin: 0 0 14px; }
.lm-advice h4 { margin: 0 0 6px; font-family: var(--display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--rose); }
.lm-advice-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.lm-advice-line { margin: 0 0 6px; font-weight: 600; }
.lm-why { margin: 0 0 6px; padding-left: 20px; font-size: 14px; display: grid; gap: 2px; }
.lm-advice .small { margin: 0; }
.lm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lm-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.lm-card.off { border-style: dashed; }
.lm-card.in-use, .lm-card:has(input:checked) { border-color: var(--rose); }
.lm-card:has(input:checked) { background: var(--raised); }
.lm-card:has(input:focus-visible) { outline: 2px solid var(--rose); outline-offset: 2px; }
.lm-choice { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px 12px; cursor: pointer; flex: 1; }
.lm-card.off .lm-choice { cursor: default; }
.lm-choice input { margin: 4px 0 0; flex: none; width: 18px; height: 18px; accent-color: var(--box-lit); }
.lm-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.lm-card > .lm-text { padding: 14px 16px 12px; }
.lm-top { display: flex; gap: 12px; align-items: center; }
.lm-thumb { flex: none; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.lm-thumb svg { display: block; width: 96px; height: auto; }
.lm-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lm-title strong { font-family: var(--display); font-size: 16px; }
.lm-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.lm-facts { display: grid; gap: 6px; font-size: 14px; }
.lm-fact { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; }
.lm-k { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.lm-waits { font-size: 14px; color: var(--attn); }
.lm-health { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: 14px; display: flex; gap: 2px; align-items: baseline; }
.lm-health .dot { flex: none; }
.lm-health .dot.attn { background: var(--attn); }
.lm-health a { white-space: nowrap; }
.lm-more { margin: 12px 0 6px; }
/* The Listening tab: the live status line (swapped alone), and Save under the option cards. */
.lm-status .lm-now { margin: 0 0 4px; }
.panel .lm-status .lm-health { margin: 0 0 6px; }
.choices fieldset > .lm-cards, .choices fieldset > .lm-save { grid-column: 1 / -1; }
.lm-save { margin: 6px 0 0; }
.listen-line { margin: 6px 0 12px; }
.lm-diagram { overflow-x: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin: 10px 0; }
.lm-diagram:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.lm-diagram svg { display: block; width: 100%; min-width: 640px; height: auto; }
.lm-dl { margin-top: 6px; }
.lm-notes { margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: 14px; display: grid; gap: 3px; }
.lm-notes:empty { display: none; }
.panel .lm-health, .lm-section .lm-health { padding: 0; margin: 10px 0 14px; border-top: 0; max-width: none; }
.lm-section:focus { outline: none; }
.lm-part { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); margin: 28px 0 4px; }
.lm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lm-table th, .lm-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.lm-table thead th { color: var(--rose); font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.lm-table tbody th { min-width: 150px; font-family: var(--body); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); }
.lm-table tbody th .lm-chips { display: flex; }
.lm-table tbody th .lm-chips { margin-top: 4px; }
.lm-table tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 760px) {
  .lm-cards { grid-template-columns: 1fr; }
  .lm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lm-table, .lm-table tbody, .lm-table tr, .lm-table th, .lm-table td { display: block; }
  .lm-table tbody tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .lm-table th, .lm-table td { border: 0; padding: 4px 0; }
  .lm-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
}
@media (max-width: 420px) {
  .lm-fact { grid-template-columns: 1fr; gap: 0; }
  .lm-choice { padding: 12px; }
  .lm-thumb svg { width: 80px; }
}
.address { font-family: ui-monospace, Menlo, monospace; font-size: 22px; letter-spacing: .02em; margin: 2px 0 14px; user-select: all; }
.routers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.routers .btn { padding: 6px 12px; font-size: 14px; }
.steps { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 6px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 10px 0 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
@media (max-width: 720px) {
  .cols2 { grid-template-columns: 1fr; }
  .verdict { padding: 18px; }
  .verdict h2 { font-size: 20px; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
}
.attn-text { color: var(--attn); }

/* Traffic */
.listening { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.listening .chip { font-size: 13px; padding: 3px 12px; }
.listening p { margin: 0; color: var(--muted); }
.tail-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tail-controls select { width: auto; padding: 8px 12px; }
.hour-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hour-filters .search { flex: 1 1 260px; max-width: 420px; padding: 8px 12px; }
tr.hour-head th { text-align: left; font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--text); background: var(--raised); padding: 8px 12px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
@media (max-width: 720px) {
  .tail-controls { width: 100%; }
  .tail-controls select { flex: 1 1 100%; }
  .hour-filters > div { width: 100% !important; }
}

/* Devices (Atlas Agent) */
.device-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 16px; }
.dtile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; }
.dtile strong { font-family: var(--display); font-size: 22px; }
.dtile.ok strong { color: var(--online); }
.dtile.attn strong { color: var(--attn); }
.dtile.bad strong { color: var(--error); }

/* A page's own sections as pills (a protected device: Overview, Software, What it reported). */
.kv { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 6px 18px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.notice { background: var(--online-bg); color: var(--online); padding: 10px 14px; border-radius: 8px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; cursor: pointer; }
.check > span { display: flex; flex-direction: column; gap: 2px; }
.cmd { display: flex; align-items: flex-start; gap: 10px; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 10px 10px 10px 14px; margin: 4px 0 10px; }
.cmd pre { flex: 1; min-width: 0; margin: 0; padding-top: 8px; font: 13px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
.cmd .btn { flex: none; padding: 6px 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* Icons (static/icons: Lucide line icons, ISC; brand-* platform logos, Simple Icons CC0 and Windows drawn here): drawn in the text colour through a mask; a picked choice turns them rose. */
.ico { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; color: var(--muted); }
.choice .ico { margin-top: -1px; }
.choice:has(input:checked) .ico { color: var(--rose); }
.ico-brand-linux { -webkit-mask-image: url(/static/icons/brand-linux.svg); mask-image: url(/static/icons/brand-linux.svg); }
.ico-brand-apple { -webkit-mask-image: url(/static/icons/brand-apple.svg); mask-image: url(/static/icons/brand-apple.svg); }
.ico-brand-windows { -webkit-mask-image: url(/static/icons/brand-windows.svg); mask-image: url(/static/icons/brand-windows.svg); }
.ico-brand-android { -webkit-mask-image: url(/static/icons/brand-android.svg); mask-image: url(/static/icons/brand-android.svg); }
.ico-brand-ios { -webkit-mask-image: url(/static/icons/brand-ios.svg); mask-image: url(/static/icons/brand-ios.svg); }
/* Platform logos in their brand colours (Simple Icons hex; Apple's black shown white on this dark theme, Windows in
   Microsoft blue). They keep their colour when picked: the card's border shows the pick. */
.ico.ico-brand-linux, .choice:has(input:checked) .ico-brand-linux { color: #FCC624; }
.ico.ico-brand-apple, .choice:has(input:checked) .ico-brand-apple { color: #F5F5F7; }
.ico.ico-brand-windows, .choice:has(input:checked) .ico-brand-windows { color: #0078D4; }
.ico.ico-brand-android, .choice:has(input:checked) .ico-brand-android { color: #34A853; }
.ico.ico-brand-ios, .choice:has(input:checked) .ico-brand-ios { color: #F5F5F7; }
.ico-ticket { -webkit-mask-image: url(/static/icons/ticket.svg); mask-image: url(/static/icons/ticket.svg); }
.ico-tickets { -webkit-mask-image: url(/static/icons/tickets.svg); mask-image: url(/static/icons/tickets.svg); }
/* Choice cards led by an icon: the radio is kept for keyboards and screen readers but not drawn; the card shows the pick. */
.choices.tiles .choice, .choices.iconed .choice { position: relative; }
.choices.tiles .choice input, .choices.iconed .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choice:has(input:focus-visible) { outline: 2px solid var(--rose); outline-offset: 2px; }
.choices.tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.choices.tiles .choice { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 18px 12px 16px; }
.choices.tiles .ico { width: 32px; height: 32px; margin: 0; }
.choices.iconed .choice { align-items: center; gap: 14px; padding: 14px 16px; }
.choices.iconed .ico { width: 26px; height: 26px; margin: 0; }
/* Summary dashboards (a Space, a device): a row of numbers, then tiles that each link into the details. */
.dash-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 18px; }
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; align-items: start; }
.dash > .panel { margin-bottom: 0; }
a.plain { color: inherit; }
.list a.linkrow { color: inherit; text-decoration: none; }
.list a.linkrow:hover strong { color: var(--rose); }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.suggest .btn { padding: 4px 10px; font-size: 12px; }
/* A device's event rows: what happened (chip), the thing, its details; time and actions on the right. */
.evrow { align-items: flex-start; }
.evmain { display: flex; gap: 12px; align-items: flex-start; min-width: 0; flex: 1; }
.evmain > .chip { margin-top: 2px; min-width: 72px; text-align: center; }
.evwhat { overflow-wrap: anywhere; }
.evside { text-align: right; display: flex; align-items: center; gap: 8px; flex: none; }
.evtools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.evtools form { margin: 0; }
.livesw { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); cursor: pointer; }
.livesw:has(input:checked) span { color: var(--online); }
.evrow.fresh { animation: evfresh 2.5s ease-out; }
@keyframes evfresh { from { background: rgba(232, 163, 170, .14); } to { background: transparent; } }
@media (max-width: 640px) {
  .evrow { flex-direction: column; gap: 6px; }
  .evside { text-align: left; }
}
.evmain > div { min-width: 0; flex: 1; }
.evrow .sub { overflow-wrap: anywhere; }
/* A device list's facts on the shared filter bar (26.02 P2-W08): each value keeps its Show only / Hide beside it; lines
   break between facts, a long value wraps inside its own. */
.evfacts { display: flex; flex-wrap: wrap; align-items: center; }
.evfact { min-width: 0; max-width: 100%; }
.evhead { display: inline-block; max-width: 100%; }
.evval { overflow-wrap: anywhere; }
.evsep { color: var(--muted); white-space: pre; }
.evutil { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 12px; margin: 0 0 4px; }

/* Events explorer and fleet inventory (xdr/09 §3.11) */
.subtabs { margin-bottom: 16px; }
.subtabs a { font-size: 14px; padding: 6px 12px; }
.facets { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 4px 0 10px; }
.facets label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.facets select, .facets input[type="datetime-local"] { min-width: 150px; }
.facets .query { flex: 1 1 320px; min-width: 0; font-family: var(--mono, ui-monospace, monospace); font-size: 13px; }
.chips-line, .searches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.searches .chip a { color: var(--text); }
.chip.saved { display: inline-flex; gap: 6px; align-items: center; }
.linkish { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; font: inherit; }
.save-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 14px; }
.save-search input { max-width: 260px; }
.events-table { width: 100%; border-collapse: collapse; }
.events-table th { text-align: left; color: var(--muted); font-size: 12px; font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.events-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.events-table td:first-child { white-space: nowrap; }
/* Device and Type stay on one line where there is room for them and their Show only / Hide actions (P2-W07). */
@media (min-width: 1100px) { .events-table td:nth-child(2), .events-table td:nth-child(3) { white-space: nowrap; } }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
pre.raw { max-height: 420px; overflow: auto; background: var(--raised); padding: 10px; border-radius: 8px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.plain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ndv-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(10, 4, 6, .72); display: flex; justify-content: center; align-items: flex-start; overflow: auto; padding: 24px 16px; }
.ndv { display: grid; grid-template-columns: 20rem minmax(0, 1fr) 20rem; gap: 16px; width: min(1400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.ndv-side { min-width: 0; }
.ndv-main h2 { margin: 0; font-size: 20px; }
@media (max-width: 1279px) {
  .ndv-backdrop { justify-content: flex-end; padding: 0; }
  .ndv { grid-template-columns: 1fr; width: min(640px, 100%); min-height: 100vh; border-radius: 0; }
  .ndv-main { order: -1; }
}
@media (max-width: 640px) {
  .facets select, .facets input[type="datetime-local"] { min-width: 0; width: 100%; }
  .facets label { flex: 1 1 45%; }
  .events-table thead { display: none; }
  .events-table tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  .events-table td { display: block; border: 0; padding: 2px 0; }
  /* Stacked cells name what they hold (the table's headings are hidden here). */
  .events-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; }
}
/* The explorer's results heading (26.02 P2-W07): filter actions land here, below the sticky shell. */
.results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 14px 0 6px; }
.results-head h2 { margin: 0; font-size: 16px; scroll-margin-top: 140px; }
.results-head p { margin: 0; }
.events-table .cell-value { display: block; }

/* Live Devices list (xdr/09 §3.5.2): an empty reason line takes no room. */
[data-reason]:empty { display: none; }

/* Policy editor (xdr/09 §3.14): each collector on one line, its switches and interval to the right. */
.policy-row { align-items: center; gap: 16px; }
.policy-fields { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.policy-fields label { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.policy-fields input[type="number"] { width: 7em; margin: 0; }
.review { border-color: var(--rose); }
.kv-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.kv-table th, .kv-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }
@media (max-width: 640px) { .policy-row, .list .item.policy-row { flex-direction: column; align-items: stretch; gap: 8px; } .policy-fields { justify-content: flex-start; } }

/* UI polish (2026-10): fields never wider than their container (a select is as wide as its longest option), a
   visible focus ring on fields too, small buttons, and a cue when a tab bar scrolls. */
input, select, textarea { max-width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--rose); outline-offset: 1px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.tabs { scroll-behavior: smooth; }
.tabs.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.tabs.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.tabs.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
form.invite { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: end; }
form.invite label { display: flex; flex-direction: column; gap: 6px; }
form.panel label > input { margin-top: 6px; }
@media (max-width: 640px) {
  form.invite { grid-template-columns: 1fr; }
  .policy-fields { width: 100%; }
}
.policy-row > div:first-child { flex: 1 1 auto; }
/* Severity: an icon as well as the colour and the word (xdr/09 §1.8). */
.chip.sev { display: inline-flex; align-items: center; gap: 5px; }
.chip.sev::before { content: ""; width: 9px; height: 9px; flex: none; background: currentColor; }
.sev-high::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sev-medium::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sev-low::before { border-radius: 50%; }
.sev-info::before { border-radius: 50%; background: transparent !important; box-shadow: inset 0 0 0 1.5px currentColor; }
.filters select { flex: 0 1 auto; }
@media (max-width: 640px) { .filters select { flex: 1 1 100%; } }
/* A device's header: its health and the reason together under the name. */
.devhead h1 { margin: 0 0 6px; }
.devstate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; }
/* Rules: one compact row each, with its on/off switch. */
.rulefilters { margin: 0 0 6px; }
.rulefilters input[type="search"] { flex: 1 1 260px; }
.rulerow { align-items: flex-start; }
.ruleside { display: flex; gap: 8px; align-items: center; flex: none; }
.ruleside form { margin: 0; }
.switch { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); color: var(--muted); font: 600 12px var(--body); cursor: pointer; }
.switch span { width: 28px; height: 16px; border-radius: 999px; background: var(--line); position: relative; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: left .15s; }
.switch.on { color: var(--online); border-color: #1F4D35; }
.switch.on span { background: var(--online-bg); }
.switch.on span::after { left: 14px; background: var(--online); }
@media (max-width: 640px) { .rulerow { flex-direction: column; } .ruleside { flex-wrap: wrap; } }
.ico-phone { -webkit-mask-image: url(/static/icons/phone.svg); mask-image: url(/static/icons/phone.svg); }
.ico.ico-phone, .choice:has(input:checked) .ico-phone { color: #F5F5F7; }
.legal { max-width: 70ch; margin: 0 auto; padding: 24px 0; }
/* Devices: the short list (home) and the table (other kinds). */
.nowrap { white-space: nowrap; }
.devside { display: flex; align-items: center; gap: 10px; flex: none; }
.tablewrap { overflow-x: auto; }
.devtable td { vertical-align: middle; }
.devtable .sub { white-space: normal; }
@media (max-width: 640px) {
  .list .item.devrow { flex-direction: column; align-items: stretch; gap: 6px; }
  .devside { justify-content: flex-start; flex-wrap: wrap; }
}

/* Fleet investigation (xdr/09 §3.11.1): the pinned device chip, items grouped with their devices, why a piece of
   evidence is suspicious, and the response buttons (greyed with the reason when a device can't run one). */
.chip.pin { display: inline-flex; gap: 6px; align-items: center; background: var(--raised); color: var(--text); }
.chip.pin a { color: var(--muted); text-decoration: none; }
.inv-group td { background: var(--raised); }
.inv-group .chip { margin-left: 8px; }
.inv-help { margin: 4px 0 10px; }
.inv-help summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.why-alert { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 8px 0 12px; }
.why-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.why h4 { margin: 8px 0 0; font-size: 13px; color: var(--muted); font-weight: 500; }
.respond-buttons { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; }
.respond-off { display: flex; flex-direction: column; gap: 4px; max-width: 280px; }
.respond-off .btn[disabled] { opacity: .45; cursor: not-allowed; align-self: flex-start; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.row-actions .respond-off { max-width: 220px; }
.next-steps .item { align-items: flex-start; }
.investigate .notes { margin: 0 0 12px; padding-left: 18px; color: var(--muted); }

/* Files tab: the one-file history scope, so a filtered list is never mistaken for every file. */
.file-scope { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 0 0 12px; padding: 12px 14px; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; }
.file-scope-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file-scope-text .mono-sm { overflow-wrap: anywhere; }

/* An entity's Overview (xdr/23 IW-04a): its properties as label/value pairs, long values wrapping. */
.entity-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px 28px; margin: 0; }
.entity-facts dt { color: var(--muted); font-size: 13px; }
.entity-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.entity-value { margin: 2px 0 0; overflow-wrap: anywhere; }

/* Live event lists (owner, 2026-10-14): the stream's state and what waits, under the list's header; a pointer to rows
   that arrived above while scrolled down. */
.livestatus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 24px; margin: -4px 0 10px; }
.newabove { position: sticky; top: 64px; z-index: 5; display: block; margin: 0 auto 8px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--rose); background: var(--raised); color: var(--text); font: 600 13px var(--body); cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.newabove:hover { background: var(--line); }
/* The explorer's live tail (26.02 P2-R31, components/live_status.wtz): Live sits at the right end of the results line,
   before Fields; a live row flashes in as on a device's lists, and goes where its time puts it. */
.results-head .livesw { margin-left: auto; min-height: 36px; }
.results-head .livesw ~ .fl { margin-left: 0; }
@media (pointer: coarse) { .results-head .livesw { min-height: 44px; } }
.events-table tr.fresh { animation: evfresh 2.5s ease-out; }
@media (prefers-reduced-motion: reduce) { .evrow.fresh, .events-table tr.fresh { animation: none; } }

/* Platform marks before a protected device's name (components/platform_icon.wtz): monochrome in the muted text colour,
   20px in a 24px slot, aligned with the name line; never the enrollment page's brand colours. Decorative: the
   platform is in the text beside it. */
.platform-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--platform-slot, 24px); height: var(--platform-slot, 24px); color: var(--muted); }
.platform-icon > .ico[class], .platform-icon > .ui-icon { display: block; flex: none; width: var(--platform-size, 20px); height: var(--platform-size, 20px); margin: 0; color: var(--muted); }
.device-identity { display: grid; grid-template-columns: var(--platform-slot, 24px) minmax(0, 1fr); align-items: start; gap: 10px; min-width: 0; }
.device-identity-text { min-width: 0; overflow-wrap: anywhere; }
.list .item > .device-identity { flex: 1 1 auto; }
.device-platform-label { --platform-slot: 18px; --platform-size: 16px; display: inline-flex; align-items: center; gap: 6px; vertical-align: bottom; }
@media (max-width: 640px) {
  .list .item.devrow > .device-identity { flex: none; }
  .list .item.devrow > .devside { padding-inline-start: 34px; }
}

/* The shared filter bar and value actions (xdr/26.02 P2-W06; components/filter_bar.wtz, value_actions.wtz; the only
   place these selectors live, `make check-ui-components`). Pills are native disclosures whose action lists open in the
   flow (no floating menu to clip at 390px); targets are 36px, 44px on touch. */
.fb { margin: 6px 0 10px; min-width: 0; }
.fb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; min-width: 0; }
.fb-pill, .fb-add { min-width: 0; max-width: 100%; }
.fb-pill[open], .fb-add[open] { flex: 1 1 100%; }
.fb-pill > summary, .fb-add > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  max-width: 100%; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised);
  color: var(--text); font: 500 13px var(--body); cursor: pointer; }
.fb-pill > summary::-webkit-details-marker, .fb-add > summary::-webkit-details-marker { display: none; }
.fb-pill > summary:hover, .fb-add > summary:hover { border-color: var(--rose); }
.fb-pill > summary .ui-icon, .fb-add > summary .ui-icon { flex: none; width: 16px; height: 16px; }
.fb-words { min-width: 0; overflow-wrap: anywhere; }
.fb-not > summary { border-color: #5A1E24; }
.fb-off > summary { color: var(--muted); border-style: dashed; }
.fb-off .fb-words { text-decoration: line-through; }
.fb-state, .fb-pin { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 999px; background: var(--surface);
  color: var(--muted); font-size: 12px; flex: none; }
.fb-pin { color: var(--rose); }
.fb-pin .ui-icon { width: 14px; height: 14px; }
.fb-actions { list-style: none; margin: 6px 0 0; padding: 6px; display: flex; flex-wrap: wrap; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.fb-actions li { margin: 0; }
.fb-post { display: inline; margin: 0; }
.fb-item { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 8px; border: 0; background: transparent;
  color: var(--text); font: 500 13px var(--body); cursor: pointer; text-decoration: none; }
.fb-item:hover, .fb-item:focus-visible { background: var(--raised); text-decoration: none; }
.fb-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 6px 0 0; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.fb-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; min-width: 0; flex: 1 1 180px; }
.fb-field select, .fb-field input { min-height: 36px; width: 100%; min-width: 0; margin: 0; }
.fb-grow { flex: 2 1 240px; }
.fb-field[hidden] { display: none; }
.fb-field [aria-invalid="true"] { border-color: var(--error); }
.fb-help { flex: 1 1 100%; margin: -2px 0 0; max-width: none; }
.fb-error-line { flex: 1 1 100%; margin: 0; }
.fb-buttons { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.fb-notices { list-style: none; margin: 0 0 8px; }
.fb-note { margin: 6px 0 0; }
.fb-announce { margin: 4px 0 0; min-height: 0; }
.fb-announce:empty { display: none; }
.fb-undo { margin-left: 8px; font-weight: 500; }
.fb-why { color: var(--muted); white-space: normal; }
.fb-confirm { margin: 0 0 8px; padding: 12px; border: 1px solid var(--rose); border-radius: 10px; background: var(--surface); }
.fb-confirm > p { margin: 0 0 8px; overflow-wrap: anywhere; }
.fb-confirm .fb-buttons { align-items: center; }
.va { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; vertical-align: middle; }
.va-act, .va-more > summary { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; list-style: none; padding: 0; }
.va-more > summary::-webkit-details-marker { display: none; }
.va-act:hover, .va-act:focus-visible, .va-more > summary:hover { background: var(--raised); color: var(--text); }
.va-act[disabled] { opacity: .45; cursor: not-allowed; }
.va-act .ui-icon, .va-more .ui-icon { width: 16px; height: 16px; }
.va-more { position: relative; display: inline-flex; flex-direction: column; }
.va-menu { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding: 4px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; }
.va-menu a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; color: var(--text); font-size: 13px; }
/* Desktop shows the actions on hover or focus (never hidden from the keyboard); touch always shows them. */
@media (hover: hover) and (pointer: fine) {
  .va { opacity: 0; transition: opacity .12s; }
  :hover > .va, .va:focus-within, .va:has(details[open]) { opacity: 1; }
}
@media (any-pointer: coarse) {
  .va { opacity: 1; }
  .va-act, .va-more > summary { width: 44px; height: 44px; }
  .fb-pill > summary, .fb-add > summary, .fb-item, .va-menu a { min-height: 44px; }
}
/* A device list's facts and headline (26.02 P2-W08) with a mouse only: the actions float beside the value while they
   show, so hidden ones leave no gaps in a dense line; touch keeps them in the line, always shown. */
@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
  .evfact, .evhead { position: relative; }
  .evfact > .va, .evhead > .va { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin: 0;
    padding: 0 2px 0 4px; z-index: 2; background: var(--surface); border-radius: 8px; pointer-events: none; }
  .evfact:hover > .va, .evhead:hover > .va, .evfact > .va:focus-within, .evhead > .va:focus-within,
  .evfact > .va:has(details[open]), .evhead > .va:has(details[open]) { pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .va { transition: none; } }

/* The events field list and extra columns (xdr/26.02 P2-R11, P2-R12, P2-W11; components/field_list.wtz, the only place
   these selectors live). "Fields" sits at the right end of the results line; open, its panel takes the line's width.
   Fields are disclosures in a grid that wraps to one column at 390px; an open field takes the whole row. Counts are
   words; the bars only echo them. Targets are 36px, 44px on touch. */
.results-head .fl { margin-left: auto; min-width: 0; max-width: 100%; }
.results-head .fl[open] { flex: 1 1 100%; }
.fl > summary { list-style: none; display: flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; margin-left: auto;
  min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised);
  color: var(--text); font: 500 13px var(--body); cursor: pointer; }
.fl > summary::-webkit-details-marker { display: none; }
.fl > summary:hover { border-color: var(--rose); }
.fl > summary .ui-icon { flex: none; width: 16px; height: 16px; }
.fl[open] > summary .ui-icon:last-child { transform: rotate(180deg); }
.fl-body { margin: 8px 0 0; padding: 12px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.fl-body[aria-busy="true"] { opacity: .7; }
.fl-page { margin: 0 0 16px; }
.fl-load, .fl-back { margin: 0; }
.fl-back { margin: 0 0 10px; }
.fl-back a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.fl-back .ui-icon { width: 16px; height: 16px; }
.fl-panel h3 { margin: 0 0 4px; font-size: 14px; }
.fl-note { margin: 0 0 8px; }
.fl-cols { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.fl-col { display: inline-flex; align-items: center; gap: 2px; padding: 0 0 0 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; overflow-wrap: anywhere; }
.fl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 2px 12px; align-items: start; }
.fl-list > li { margin: 0; min-width: 0; }
.fl-list > li:has(> .fl-field[open]) { grid-column: 1 / -1; }
.fl-field > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline;
  min-height: 36px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.fl-field > summary::-webkit-details-marker { display: none; }
.fl-field > summary:hover, .fl-field > summary:focus-visible { background: var(--raised); }
.fl-field[open] > summary { background: var(--raised); }
.fl-name { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.fl-name .mono-sm { margin-left: 6px; font-weight: 400; }
.fl-bar { grid-column: 1 / -1; display: block; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.fl-bar > span { display: block; height: 100%; background: var(--rose); }
.fl-detail { padding: 4px 8px 8px; min-width: 0; }
.fl-vhead { margin: 4px 0; color: var(--muted); }
.fl-vlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fl-vlist > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: center; margin: 0; }
.fl-value { min-width: 0; overflow-wrap: anywhere; }
.fl-more { margin: 4px 0 0; }
.fl-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; }
.fl-act { gap: 6px; min-height: 36px; padding: 6px 12px; font: 500 13px var(--body); }
.fl-act .ui-icon { flex: none; width: 16px; height: 16px; }
.fl-act[disabled] { opacity: .55; cursor: not-allowed; }
.fl-why { flex: 1 1 100%; }
.fl-remove { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 2px;
  vertical-align: middle; border-radius: 6px; color: var(--muted); }
.fl-remove .ui-icon { width: 14px; height: 14px; }
.fl-remove:hover, .fl-remove:focus-visible { background: var(--raised); color: var(--text); }
@media (any-pointer: coarse) {
  .fl > summary, .fl-field > summary, .fl-act, .fl-back a { min-height: 44px; }
  .fl-remove { width: 44px; height: 44px; }
}

/* The events histogram (xdr/26.02 P2-R15, P2-W10; components/histogram.wtz, the only place these selectors live). The
   bars are a decorative SVG stretched to the full width; over them a grid of transparent links, one per bucket that holds
   events, each a whole column tall so it is easy to hit; focus and hover light the column. The axis shows the range's
   ends and, on a wide screen, three times between. The "Zoom to" picker below is the way in on touch and by keyboard.
   No page-level horizontal scroll at 390px or 200%. */
.hg { margin: 12px 0 4px; min-width: 0; }
.hg-wait { min-height: 24px; }
.hg-load { margin: 0; }
.hg-load a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.hg-load .ui-icon { width: 16px; height: 16px; }
.hg-cap { margin: 0 0 6px; color: var(--muted); }
.hg-cap a { color: var(--text); }
.hg-span { margin-left: 4px; }
.hg-notice { margin: 0; }
.hg-notice a { margin-left: 6px; color: inherit; text-decoration: underline; }
.hg-plot { position: relative; height: 72px; border-bottom: 1px solid var(--line); }
.hg-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.hg-rect { fill: var(--rose); opacity: .85; }
.hg-base { stroke: var(--line); stroke-width: 1; }
.hg-hits { position: absolute; inset: 0; display: grid; }
.hg-bar { grid-row: 1; display: block; min-width: 0; border-radius: 3px; outline-offset: -2px; }
.hg-bar:hover, .hg-bar:focus-visible { background: color-mix(in srgb, var(--rose) 18%, transparent); }
.hg-bar:focus-visible { outline: 2px solid var(--rose); }
.hg-sel { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--rose) 22%, transparent);
  border-left: 1px solid var(--rose); border-right: 1px solid var(--rose); pointer-events: none; }
.hg-plot[data-hg-drag] { cursor: crosshair; touch-action: pan-y; }
.hg-axis { position: relative; height: 20px; margin: 2px 0 0; white-space: nowrap; }
.hg-tick { position: absolute; top: 2px; transform: translateX(-50%); }
.hg-tick:first-child { transform: none; }
.hg-tick:last-child { transform: translateX(-100%); }
.hg-empty, .hg-more { margin: 4px 0 0; }
.hg-empty a { margin-left: 6px; }
.hg-zoom { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 6px 0 0; }
.hg-zoom label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.hg-zoom select { min-width: 0; max-width: 100%; min-height: 36px; }
.hg-zoom .btn { min-height: 36px; }
.hg-back { margin: 0 0 10px; }
.hg-back a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.hg-back .ui-icon { width: 16px; height: 16px; }
@media (max-width: 640px) { .hg-minor { display: none; } }
@media (any-pointer: coarse) {
  .hg-load a, .hg-zoom select, .hg-zoom .btn, .hg-back a { min-height: 44px; }
}
@media (forced-colors: active) {
  .hg-rect { fill: CanvasText; opacity: 1; }
  .hg-base { stroke: CanvasText; }
  .hg-bar:focus-visible { outline: 2px solid Highlight; }
  .hg-sel { background: Highlight; opacity: .3; }
}

/* MITRE ATT&CK® chips (xdr/26 03 P3-R13; components/attack_chips.wtz): one per pairing, wrapping, never truncated.
   The chip is text; its trailing icon opens attack.mitre.org. The technique's first sentence shows on hover or keyboard
   focus (Escape hides it, static/atlas.js) and is the link's description for screen readers. */
.attack-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; min-width: 0; }
.attack-row-label { color: var(--muted); font-size: 13px; }
.attack-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; vertical-align: middle; }
.attack-item { position: relative; display: inline-flex; max-width: 100%; min-width: 0; }
.chip.attack-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; white-space: normal; color: var(--text);
  border: 1px solid var(--line); padding: 1px 4px 1px 10px; line-height: 1.45; }
.attack-chip:not(:has(.attack-external, .attack-filter)) { padding-right: 10px; }
.attack-label { min-width: 0; overflow-wrap: anywhere; }
.attack-label-link { color: var(--text); }
.attack-label-link:hover, .attack-label-link:focus-visible { color: var(--rose); text-decoration: underline; }
.attack-external, .attack-filter { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px;
  height: 28px; margin: -4px 0; border-radius: 999px; color: var(--muted); }
.attack-external:hover, .attack-external:focus-visible, .attack-filter:hover, .attack-filter:focus-visible { background: var(--raised);
  color: var(--rose); text-decoration: none; }
.attack-external .ui-icon, .attack-filter .ui-icon { width: 14px; height: 14px; }
.attack-about { display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; width: max-content;
  max-width: min(36ch, calc(100vw - 32px)); padding: 8px 10px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); font-size: 13px; line-height: 1.45; white-space: normal;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
/* A bridge over the gap below the chip, so the pointer can move onto the description without it closing. */
.attack-about::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
.attack-item:not([data-dismissed]):is(:hover, :focus-within) > .attack-about { display: block; }
@media (any-pointer: coarse) { .attack-external, .attack-filter { width: 44px; height: 44px; margin: -10px -4px; } }
/* The Alerts list's ATT&CK filters and grouping (xdr/26 03 P3-R15, P3-R16, §4.2; templates/pages/alerts.wtz): "Add a
   tactic" and the technique field add a value; active ones are removable pills (each a link to the list without it). */
.attack-add { display: inline-flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.attack-add input[name="technique"] { width: 26ch; min-width: 0; }
.attack-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.chip.attack-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 2px 6px 2px 10px;
  border: 1px solid var(--line); color: var(--text); white-space: normal; overflow-wrap: anywhere; }
.chip.attack-pill:hover, .chip.attack-pill:focus-visible { border-color: var(--rose); text-decoration: none; }
.attack-pill .ui-icon { flex: none; width: 14px; height: 14px; color: var(--muted); }
.attack-clear { font-size: 13px; }
.attack-notice { background: #3A2610; color: var(--attn); padding: 8px 12px; border-radius: 8px; margin: 0 0 8px; }
.alert-group { margin: 14px 0 0; }
.alert-group > h3 { margin: 0 0 4px; font-size: 15px; }
.attack-group-note { margin: 8px 0 0; }
/* An incident's attack stages (03 P3-R17; components/attack_stages.wtz): an ordered list read as a chain; the chevrons
   are drawn here, so they are never read out. */
.attack-stages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; min-width: 0; }
.attack-stages li { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.attack-stages li + li::before { content: "\203A"; padding: 0 8px; color: var(--muted); font-size: 16px; line-height: 1; }
.attack-stages .chip { white-space: normal; overflow-wrap: anywhere; }
.attack-stages a.chip { border: 1px solid var(--line); color: var(--text); }
.attack-stages a.chip:hover, .attack-stages a.chip:focus-visible { border-color: var(--rose); text-decoration: none; }
.attack-stages-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; min-width: 0; }
.attack-stages-block { margin: 12px 0 0; }
.attack-stages-block h3 { font-size: 14px; margin: 0 0 6px; }
.attack-stages-block p { margin: 6px 0 0; }
@media (any-pointer: coarse) { .chip.attack-pill, .attack-stages a.chip { min-height: 44px; } }
/* The Rules page's ATT&CK coverage (xdr/26 03 P3-R26; templates/pages/rules_coverage.wtz): techniques by tactic, each
   with its rules (links to where each is switched or edited) and its alerts in 30 days; the gaps in closed disclosures
   per tactic. Rows wrap and stack at phone width; nothing scrolls sideways. */
.cov-list { list-style: none; margin: 0; padding: 0; }
.cov-list .item.cov-row { align-items: flex-start; flex-wrap: wrap; }
.cov-main { flex: 1 1 24ch; min-width: 0; }
.cov-side { flex: none; font-size: 13px; }
.cov-rules { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cov-rules li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.cov-rule { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; overflow-wrap: anywhere; }
.cov-rules .sub { color: var(--muted); font-size: 13px; }
.cov-state { margin: 4px 0 0; }
.cov-group { margin: 14px 0 0; }
.cov-group > h4, .cov-gaps > summary { margin: 0 0 4px; font-size: 15px; }
.cov-gaps { border-top: 1px solid var(--line); padding: 8px 0; }
.cov-gaps > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 6px; }
.cov-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.cov-filters input[type="search"] { flex: 1 1 24ch; min-width: 0; }
.cov-notice { background: #3A2610; color: var(--attn); padding: 8px 12px; border-radius: 8px; margin: 0 0 8px; }
@media (max-width: 640px) { .cov-side { flex-basis: 100%; } }
@media (any-pointer: coarse) { .cov-gaps > summary, .cov-rule { min-height: 44px; } }
/* The rule editor's ATT&CK panel and tag picker (03 P3-R27; templates/pages/custom_rule.wtz). */
.rule-attack { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.rule-attack > h3 { margin: 0 0 4px; font-size: 14px; }
.rule-attack ul { margin: 4px 0 0; padding-left: 18px; }
.rule-attack li { overflow-wrap: anywhere; }
.rule-attack-warnings strong { color: var(--attn); }
.tag-picker { display: grid; gap: 6px; min-width: 0; }
.tag-picker-row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.tag-picker-row input[type="search"] { flex: 1 1 28ch; min-width: 0; }
.tag-hits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tag-hit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; text-align: left; padding: 6px 10px;
  background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font: inherit; cursor: pointer; }
.tag-hit:hover, .tag-hit:focus-visible { border-color: var(--rose); }
.tag-hit-label { overflow-wrap: anywhere; min-width: 0; }
.tag-hits-note { margin: 0; }
@media (any-pointer: coarse) { .tag-hit { min-height: 44px; } }
.lab-attack-warning { color: var(--attn); }
@media (max-width: 640px) { .attack-add, .attack-add select, .attack-add input[name="technique"] { flex: 1 1 100%; width: 100%; } }

/* The ATT&CK page (xdr/26 03 P3-R19 to P3-R25, §4.3; P3-W09; templates/pages/attack.wtz, attack_technique.wtz). The
   matrix scrolls on both axes inside its own region, tactic headers sticky at its top; a cell's alerts are text and
   shading (0, 1-2, 3-9, 10+), its coverage text: colour is never the only signal. Below 900px of viewport, or where
   docked panels leave the content less than 560px (a container query), the matrix gives way to one disclosure per
   tactic; between, it scrolls sideways in its own region. */
.attack-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 8px; }
.attack-field { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: var(--muted); }
.attack-field select { min-width: 0; max-width: 100%; }
.attack-exports { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 8px; }
.attack-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 12px; }
.attack-key { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 1px 8px;
  border: 1px solid var(--line); border-radius: 6px; color: var(--text); }
.attack-shade-0 { background: var(--surface); }
.attack-shade-1 { background: #3A1A1F; }
.attack-shade-2 { background: #5A2028; }
.attack-shade-3 { background: #8E1B24; }
.attack-page { container-type: inline-size; min-width: 0; }
.attack-matrix-wrap { position: relative; }
.attack-matrix-scroll { overflow: auto; max-height: min(78vh, 900px); border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); scrollbar-width: none; }
.attack-matrix-scroll::-webkit-scrollbar { display: none; }
.attack-matrix-scroll:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.attack-matrix { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 8px; width: max-content;
  padding: 0 8px 8px; align-items: start; }
.attack-col { min-width: 0; }
.attack-col-head { position: sticky; top: 0; z-index: 2; margin: 0 0 6px; padding: 8px 2px 6px; background: var(--bg);
  border-bottom: 1px solid var(--line); font: 600 13px/1.3 var(--body); letter-spacing: 0; }
.attack-col-head a { display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.attack-col-head a:hover, .attack-col-head a:focus-visible { color: var(--rose); text-decoration: none; }
.attack-col-total { color: var(--muted); font-weight: 400; font-size: 12px; }
.attack-col-empty { margin: 4px 2px; }
.attack-cells { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.attack-cell { position: relative; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.attack-cell:hover, .attack-cell:focus-within { border-color: var(--rose); }
.attack-cell-link { display: flex; flex-direction: column; gap: 1px; min-height: 44px; padding: 6px 30px 6px 8px;
  color: var(--text); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; border-radius: 8px; }
.attack-cell-link:hover { text-decoration: none; }
.attack-cell-name { font-weight: 600; }
.attack-cell-id { font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.attack-cell-count { font-size: 12px; }
.attack-cover { font-size: 12px; color: var(--muted); }
.attack-cover.covered { color: var(--online); }
.attack-cover.trial, .attack-cover.partly { color: var(--attn); }
.attack-cell-inspect { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.attack-cell-inspect:hover { background: var(--raised); color: var(--rose); }
.attack-cell-inspect .ui-icon { width: 14px; height: 14px; }
.attack-subs { border-top: 1px solid var(--line); font-size: 12px; }
.attack-subs > summary { cursor: pointer; padding: 4px 8px; color: var(--muted); border-radius: 0 0 8px 8px; }
.attack-subs ul { list-style: none; margin: 0; padding: 0 4px 4px; display: flex; flex-direction: column; gap: 4px; }
.attack-sub { border: 1px solid var(--line); border-radius: 6px; }
.attack-sub a { display: flex; flex-direction: column; padding: 4px 6px; color: var(--text); overflow-wrap: anywhere; }
.attack-sub a:hover, .attack-sub a:focus-visible { color: var(--rose); text-decoration: none; }
.attack-sub-name { font-weight: 500; }
.attack-scroll { position: absolute; top: calc(50% - 18px); z-index: 3; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--text); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.attack-scroll:hover, .attack-scroll:focus-visible { color: var(--rose); border-color: var(--rose); }
.attack-scroll-left { left: 4px; }
.attack-scroll-right { right: 4px; }
.attack-scroll[hidden] { display: none; }
.attack-list { display: none; }
.attack-list-tactic { border-top: 1px solid var(--line); padding: 8px 0; }
.attack-list-tactic > summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.attack-list-rows { list-style: none; margin: 4px 0 0; padding: 0; }
.attack-list-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin: 0 0 6px; border: 1px solid var(--line);
  border-radius: 8px; min-width: 0; overflow-wrap: anywhere; }
.attack-list-row > a { color: var(--text); }
.attack-list-subs { list-style: none; margin: 4px 0 0; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.attack-list-subs a { color: var(--text); }
@media (max-width: 899px) {
  .attack-matrix-wrap { display: none; }
  .attack-list { display: block; }
}
@container (max-width: 559px) {
  .attack-matrix-wrap { display: none; }
  .attack-list { display: block; }
}
.attack-footer { margin: 24px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.attack-footer p { margin: 0 0 6px; }
.attack-license pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; font-size: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.attack-technique h2 .attack-cell-id { font-size: 0.8em; }
.attack-tech-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.attack-tech-actions .ui-icon { width: 14px; height: 14px; vertical-align: -2px; }
.attack-description { max-width: 75ch; }
.attack-facts { margin: 0 0 8px; }
.attack-tactic-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.attack-stage h3 { font-size: 16px; }
/* A business Space overview's "ATT&CK coverage and hits" tile (xdr/26 03 P3-W18, templates/pages/space_summary.wtz). */
.attack-tile h4 { margin: 14px 0 6px; }
.attack-tile-caption { margin: 10px 0 2px; }
.attack-tile-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.attack-tile-tactics a { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; min-width: 0; overflow-wrap: anywhere; }
.attack-tile-technique { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-top: 1px solid var(--line); min-width: 0; }
.attack-tile-technique:first-child { border-top: 0; }
.attack-tile-technique .attack-chips { flex-wrap: wrap; }
.attack-tile-technique .attack-chip { white-space: normal; overflow-wrap: anywhere; }
.attack-tile-facts { font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.attack-tile-kv { margin: 0 0 8px; }
.attack-tile .attack-footer { margin-top: 12px; }
@media (any-pointer: coarse) { .attack-tile-tactics a, .attack-tile-facts a { min-height: 44px; display: inline-flex; align-items: center; } .attack-tile-tactics a { display: flex; } }
/* A technique's Atlas checks (xdr/26 03 P3-R32, P3-W15): each check over its results, endpoints as wrapping links. */
.attack-posture .item.attack-posture-check { display: block; }
.attack-posture-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attack-posture-head .ui-icon { width: 12px; height: 12px; vertical-align: -1px; }
.attack-posture-group { margin: 6px 0 0; overflow-wrap: anywhere; }
.attack-posture-group summary { cursor: pointer; }
.attack-posture-endpoints { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.attack-posture-endpoints.inline { display: inline-flex; margin: 0; vertical-align: baseline; }
@media (any-pointer: coarse) { .attack-posture-endpoints a, .attack-posture-group summary { display: inline-block; min-height: 44px; line-height: 44px; } }
@media (any-pointer: coarse) { .attack-cell-inspect { width: 44px; height: 44px; top: 0; right: 0; } .attack-cell-link { padding-right: 48px; } .attack-subs > summary { min-height: 44px; display: flex; align-items: center; } }
@media (max-width: 720px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 6px; } }
/* How current a vulnerability list is, and what Atlas checks on a device (26.04 P4-W05, templates/components/vuln_fresh.wtz). */
.vuln-fresh { margin: 6px 0 10px; }
.vuln-fresh p { margin: 4px 0; overflow-wrap: anywhere; }
.vuln-fresh .chips-line { margin: 4px 0; }
.vuln-fresh .chips-line .chip { white-space: normal; overflow-wrap: anywhere; }
.vuln-stale-note { color: var(--attn); }
.vuln-behind-list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0; padding: 0; list-style: none; }
.vuln-behind-list li { min-width: 0; overflow-wrap: anywhere; }
/* Check again (26.04 P4-W06, templates/components/vuln_check.wtz): the button with what it does or when it can run
   again beside it (wrapping under it on a phone), then the latest check's progress as plain text. */
.vuln-check { margin: 8px 0 12px; }
.vuln-check-form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.vuln-check-form.respond-off { flex-direction: row; max-width: none; }
.vuln-check-form p, .vuln-check > .vuln-check-body > p { margin: 0; flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.vuln-check-progress { margin-top: 6px; }
.vuln-check-progress p { margin: 2px 0; overflow-wrap: anywhere; }
/* The KEV banner (26.04 P4-W20, templates/components/vuln_kev.wtz): what CISA newly knows attackers use, said in words;
   the red edge and heading are a second cue, never the only one. Dismiss keeps a 44 px target; long ids, titles and
   device names wrap inside the panel at 390 px and 200% zoom. */
.vuln-kev { margin: 8px 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--error); border-radius: 8px; background: var(--raised); }
.vuln-kev-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.vuln-kev-head h3 { margin: 0; font-size: 15px; color: var(--error); }
.vuln-kev-dismiss { min-height: 44px; min-width: 44px; padding: 8px 14px; }
.vuln-kev-lead { margin: 6px 0; overflow-wrap: anywhere; }
.vuln-kev-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vuln-kev-list > li { min-width: 0; overflow-wrap: anywhere; }
.vuln-kev-list .sub { color: var(--muted); font-size: 13px; }
.vuln-kev-foot { margin: 6px 0 0; overflow-wrap: anywhere; }
.vuln-coverage-panel { margin: 10px 0 12px; }
.vuln-coverage-panel h4 { margin: 0 0 6px; font-size: 14px; }
.kv.vuln-coverage { margin: 0; }
.kv.vuln-coverage dd .chip { margin-right: 6px; }
@media (max-width: 640px) {
  .kv.vuln-coverage { grid-template-columns: 1fr; gap: 2px; }
  .kv.vuln-coverage dd { margin-bottom: 8px; }
}

/* Due dates (26.04 P4-W09, components/vuln_due.wtz and pages/vuln_targets.wtz): the age and due line wraps; the targets
   form is one row per priority (label, days), each field's error under it; Time to fix stacks on a phone. */
.vuln-due, .vuln-device-due { overflow-wrap: anywhere; }
.vuln-targets-form { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; max-width: 520px; }
.vuln-targets-form .btn { align-self: flex-start; }
.vuln-targets-form p { margin: 0; }
.vuln-target { display: grid; grid-template-columns: minmax(90px, 140px) auto; align-items: center; gap: 4px 12px; }
.vuln-target-input { display: inline-flex; align-items: center; gap: 6px; }
.vuln-target-input input { width: 6em; min-height: 44px; }
.vuln-target-error { grid-column: 1 / -1; color: var(--error); font-size: 13px; overflow-wrap: anywhere; }
.vuln-targets-error a { display: block; margin-top: 4px; color: inherit; overflow-wrap: anywhere; }
.vuln-targets-note { margin: 6px 0; overflow-wrap: anywhere; }
.vuln-fix-times h3 { margin: 0 0 4px; }
.kv.vuln-fix-list dd { overflow-wrap: anywhere; }
/* Decisions on vulnerabilities (26.04 P4-W08): the decision form, decisions in force and their review flag. */
.vuln-decide { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 0; max-width: 620px; }
.vuln-decide-title { margin: 0; font-size: 15px; }
.vuln-decide-group { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 10px; margin: 0; min-width: 0; }
.vuln-decide-group legend { padding: 0 4px; font-weight: 600; }
.vuln-decide-group p { margin: 6px 0 0; }
.vuln-choice { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; padding: 4px 0; cursor: pointer; overflow-wrap: anywhere; }
.vuln-choice input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.vuln-choice span { min-width: 0; }
.vuln-decide-field { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.vuln-decide-field p { margin: 0; }
.vuln-decide-field input { min-height: 44px; max-width: 100%; }
.vuln-decide-error a, .vuln-decide-error span { display: block; margin-top: 4px; color: inherit; overflow-wrap: anywhere; }
.vuln-decide-actions, .vuln-decide-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vuln-decide-links { margin: 10px 0 4px; }
.vuln-decide-note { margin: 6px 0; overflow-wrap: anywhere; }
.vuln-decision .sub, .vuln-held dd, .vuln-review-line { overflow-wrap: anywhere; }
.vuln-review-line { color: var(--attn); }
.vuln-decision-actions form { margin: 0; }
.vuln-held { margin: 10px 0 0; }
.vuln-held h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; }
.vuln-held .kv { margin: 6px 0; }
.vuln-exceptions-title { margin: 14px 0 6px; font-size: 14px; }
@media (max-width: 640px) {
  .kv.vuln-fix-list, .kv.vuln-targets-values { grid-template-columns: 1fr; gap: 2px; }
  .kv.vuln-fix-list dd, .kv.vuln-targets-values dd { margin-bottom: 8px; }
}

/* A network device that is an endpoint (security-57d, components/endpoint_mark.wtz): one link holding the endpoint's
   name and health; long names wrap. */
.endpoint-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px; }
.endpoint-mark { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; min-height: 24px; text-decoration: none; border-radius: 999px; }
.endpoint-mark .endpoint-name { color: var(--text); white-space: normal; overflow-wrap: anywhere; flex: 0 1 auto; }
.endpoint-mark:hover { text-decoration: none; }
.endpoint-mark:hover .endpoint-name { color: var(--rose); }
@media (any-pointer: coarse) { .endpoint-mark { min-height: 44px; } }
.seen-as { margin: 2px 0 0; }