/* Inframon shell — the Global Infra Hub's look (DESIGN-SHELL §11): the hub's Ember tokens by name, warm
   charcoal, one accent; the five health states are Inframon's own traffic-light colours (§11.2). Flat
   surfaces: no gradient, blur or shadow but the avatar disc and the open menu. */
:root {
  --bg: #171512; --panel: #201D18; --chrome: #131110;
  --line: #2C2822; --border: #322E27; --border-card: #322E27; --border-strong: #4A443B;
  --hover: #262019; --chip: #2A251E; --tile: #2A251E;
  --text: #ECE8E0; --body: #C7C2B7; --muted: #948E82; --hint: #847E72; --faint: #5C574E;
  --accent: #E07A4A; --accent-dark: #C15F32; --link: #E5946B;
  --action: #E07A4A; --action-hover: #E8895C; --brand: #d97757;
  --good: #5FA84F; --warn: #e0a24a; --error: #d0574a;
  /* the health states (§11.2): status only, the one place this page is saturated */
  --healthy: #4CC26B; --attention: #F0B429; --problem: #DC3C4C; --nodata: #7C8FA6; --notmon: #6B6760;
  --radius: 9px; --nav-w: 236px; --topnav-h: 70px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ---- type (§11.3): shipped with the shell, never fetched */
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/Newsreader-400.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/Newsreader-500.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 500; font-style: italic; font-display: swap; src: url("/fonts/Newsreader-500-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--body); font-family: var(--font); font-size: 14px; font-weight: 400; }
a { color: var(--link); }
a:hover { color: var(--action-hover); }
::selection { background: rgba(217, 119, 87, .35); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button, select, input { font-family: inherit; }

/* ---- top bar (§11.4): 70px on the chrome surface, the 2px accent rule on top */
#topnav { position: fixed; inset: 0 0 auto 0; height: var(--topnav-h); display: flex; align-items: center; gap: 24px; padding: 0 28px;
  background: var(--chrome); border-top: 2px solid var(--action); border-bottom: 1px solid var(--line); z-index: 10; }
.navtoggle { display: none; flex-shrink: 0; width: 40px; height: 40px; margin-left: -8px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: 9px; color: var(--text); cursor: pointer; padding: 0; }
.navtoggle svg { width: 20px; height: 20px; stroke-width: 2; }
.navtoggle:hover { background: #262421; }
#navscrim { display: none; position: fixed; inset: var(--topnav-h) 0 0 0; background: rgba(0, 0, 0, .5); z-index: 8; }
#navscrim.on { display: block; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; color: inherit; }
.brand .mark { display: block; width: 30px; height: 30px; flex-shrink: 0; }
.brand .word { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1; letter-spacing: .01em; color: var(--text); white-space: nowrap; }
.brand .word .accent { font-style: italic; font-weight: 500; color: var(--brand); }
.brand .bdiv { width: 1px; height: 22px; background: #3A3735; margin: 0 6px; }
.brand .sub { color: var(--hint); font-size: 13px; white-space: nowrap; }
@media (max-width: 1120px) { .brand .sub, .brand .bdiv { display: none; } }
.umenu-wrap { margin-left: auto; position: relative; }
.uchip { height: 38px; padding: 0 13px 0 10px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border-card); color: var(--body);
  font-size: 13px; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.uchip:hover { border-color: var(--border-strong); color: var(--text); }
.uchip .uav { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #d97757, #b8543c); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.uchip .utag { font-size: 11px; color: var(--hint); background: var(--chip); padding: 2px 8px; border-radius: 5px; margin-left: 2px; }
.uchip .utag:empty { display: none; }
.uchip .car { font-size: 9px; color: var(--hint); transition: transform .12s; }
.umenu-wrap.open .uchip .car { transform: rotate(180deg); }
.umenu { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px; z-index: 20; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.umenu-wrap.open .umenu { display: block; }
.umenu a { display: block; padding: 8px 12px; color: var(--muted); font-size: 13px; border-radius: 6px; text-decoration: none; }
.umenu a:hover { background: var(--bg); color: var(--error); }

/* ---- sidebar (§11.4): Home, the areas, the team section */
#side { position: fixed; top: var(--topnav-h); bottom: 0; left: 0; width: var(--nav-w); background: var(--chrome); border-right: 1px solid var(--line);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; z-index: 9; }
#side a { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: #C9C5BC; text-decoration: none;
  font-size: 14px; font-weight: 400; cursor: pointer; transition: background .15s, color .15s; }
#side a:hover { background: #262421; color: var(--text); }
#side a.active { background: #1c150f; color: var(--text); font-weight: 600; }
#side a.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--brand); }
#side a svg { flex-shrink: 0; width: 18px; height: 18px; stroke-width: 1.8; color: #98958C; }
#side a.active svg { color: var(--brand); }
#side .div { height: 1px; background: var(--line); margin: 14px 8px; }
#side .sect { font-size: 11px; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; padding: 22px 12px 8px; font-weight: 700; }

/* ---- main column and the page head */
#main { margin: var(--topnav-h) 0 0 var(--nav-w); padding: 36px 40px 48px; min-height: calc(100vh - var(--topnav-h)); }
.levels { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.levels:empty { display: none; }
.levels label { color: var(--muted); display: flex; gap: 8px; align-items: center; font-size: 13px; }
select, input.picker { height: 38px; background: var(--panel); color: var(--text); border: 1px solid var(--border-card); border-radius: 9px; padding: 0 12px; font-size: 13.5px; max-width: 320px; }
select:focus, input.picker:focus { border-color: var(--accent); outline: none; }
input.picker::placeholder { color: #6B6963; }
input.budget { width: 6em; background: transparent; color: var(--text); border: 1px solid var(--border-strong); border-radius: 9px; height: 34px; padding: 0 10px; font: inherit; }   /* DESIGN-INVESTIGATIONS §8.1 */
button.clear { background: transparent; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 9px; height: 38px; padding: 0 10px; cursor: pointer; }
/* ADO 23800: the AVD Users tab */
form.users-search { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; }
form.users-search input.picker { flex: 1 1 320px; max-width: 420px; }
.users details.day { margin-top: 10px; }
.users details.day > summary { cursor: pointer; list-style: revert; color: var(--text); }
.users .day-label { font-weight: 600; }
.users tr.sub > td { padding: 0 0 8px 24px; background: transparent; }
.users table.inner { margin: 4px 0; }
.users .table-scroll { overflow-x: auto; }
.users table.data td:first-child, .users table.data td.ctl-cell, .users td.nowrap { white-space: nowrap; }
.users td.ctl-cell button { margin-right: 6px; }
.users td.nowrap button.link { margin-left: 0; font-size: 13px; }
button.clear:hover { color: var(--text); border-color: #6A6255; }
#title { font-family: var(--serif); color: var(--text); font-size: 26px; font-weight: 500; margin: 0 0 6px; line-height: 1.2; }
#title:empty { display: none; }
.currency { color: var(--muted); font-size: 13.5px; font-weight: 300; margin-bottom: 18px; padding-left: 10px; border-left: 3px solid var(--line); }
.currency.ok { border-left-color: var(--healthy); }
.currency.late, .currency.unknown { border-left-color: var(--attention); color: var(--attention); }
.currency.none { border-left-color: var(--notmon); }
.currency.hidden { display: none; }

/* ---- tabs and the window buttons: the hub's ghost family, the active tab underlined in the accent */
.nav { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.nav:empty { display: none; }
.tab { background: transparent; color: var(--muted); border: none; border-bottom: 2px solid transparent; padding: 10px 14px; font-size: 13.5px; font-weight: 500; cursor: pointer; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--action); }
.windows { margin-left: auto; display: flex; gap: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; margin-bottom: 6px; }
.win { background: transparent; color: var(--muted); border: none; border-right: 1px solid var(--border); padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.win:last-child { border-right: none; }
.win:hover { color: var(--text); background: var(--hover); }
.win.active { color: #171512; background: var(--action); }
.view { max-width: 1060px; }
.section { margin-bottom: 22px; }
.section-heading { font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--text); margin: 0 0 10px; }

/* ---- pills (§11.5): the state word in its colour, tinted */
.badge { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 9px; white-space: nowrap; border: 1px solid; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.badge.healthy { color: var(--healthy); background: rgba(76, 194, 107, .12); border-color: rgba(76, 194, 107, .28); }
.badge.attention { color: var(--attention); background: rgba(240, 180, 41, .12); border-color: rgba(240, 180, 41, .28); }
.badge.problem { color: var(--problem); background: rgba(220, 60, 76, .12); border-color: rgba(220, 60, 76, .28); }
.badge.no_data { color: var(--nodata); background: rgba(124, 143, 166, .12); border-color: rgba(124, 143, 166, .28); }
.badge.not_monitored { color: var(--muted); background: rgba(148, 142, 130, .12); border-color: rgba(148, 142, 130, .28); }

/* ---- cards: the hub card with Inframon's status bar kept */
.rollup { background: var(--panel); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); padding: 16px 20px; margin-bottom: 18px; }
.rollup.healthy { border-left-color: var(--healthy); }
.rollup.attention { border-left-color: var(--attention); }
.rollup.problem { border-left-color: var(--problem); }
.rollup.no_data { border-left-color: var(--nodata); }
.rollup.not_monitored { border-left-color: var(--notmon); }
.rollup-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.home-title { font-family: var(--serif); font-size: 18px; color: var(--text); }
.counts { color: var(--muted); font-size: 13px; }
.reasons { margin: 8px 0 0; padding-left: 18px; color: var(--body); }
.reasons li { margin: 3px 0; }
.reasons .since { color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 22px; }
.tile { display: block; text-decoration: none; color: inherit; background: var(--panel); border: 1px solid var(--border-card); border-left-width: 4px; border-radius: var(--radius); padding: 12px 14px; min-height: 96px; transition: all .15s ease; }
.tile:hover { background: var(--hover); border-color: var(--border-strong); color: inherit; }
.tile.healthy { border-left-color: var(--healthy); }
.tile.attention { border-left-color: var(--attention); }
.tile.problem { border-left-color: var(--problem); }
.tile.no_data { border-left-color: var(--nodata); }
.tile.not_monitored { border-left-color: var(--notmon); }
.tile-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tile-name { font-weight: 600; color: var(--text); }
.tile .reasons { font-size: 12.5px; }

/* ---- cells: the hub stat */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cell { background: var(--panel); border: 1px solid var(--border-card); border-radius: var(--radius); padding: 14px 16px; min-height: 120px; display: flex; flex-direction: column; gap: 5px; }
.cell-title { color: var(--hint); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.cell-value { font-size: 24px; font-weight: 600; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }   /* a long badge drops under the value (dev 2026-10-26) */
.cell-text { color: var(--muted); font-style: italic; }
.cell-note { color: var(--hint); font-size: 12px; }
.cell-finding { color: var(--attention); font-weight: 600; }
.cell.not_collected_here { background: repeating-linear-gradient(135deg, var(--panel), var(--panel) 8px, var(--chip) 8px, var(--chip) 16px); }
.cell.not_yet_arrived { border-color: rgba(124, 143, 166, .5); }
.cell.not_yet_arrived .cell-text { color: var(--nodata); font-style: normal; }
.cell.unknown { border-color: rgba(240, 180, 41, .5); }
.cell.unknown .cell-text { color: var(--attention); font-style: normal; }
.spark { width: 100%; height: 36px; color: var(--accent); }
/* DESIGN-AVD §3 / §7.1 (ADO 23819): the roots table, the stats row, the figure */
table.data.roots td { vertical-align: middle; }
table.data.roots tr.attention td:first-child { box-shadow: inset 3px 0 0 var(--attention); }
table.data.roots tr.problem td:first-child { box-shadow: inset 3px 0 0 var(--problem); }
table.data.roots tr.healthy td:first-child { box-shadow: inset 3px 0 0 var(--healthy); }
table.data.roots .tile-line { font-size: 11.5px; margin-top: 2px; }
.hosts-cell { display: flex; align-items: center; gap: 8px; }
.hosts-bar { display: flex; gap: 2px; width: 120px; height: 10px; background: var(--chip); border-radius: 3px; overflow: hidden; flex: none; }
.hosts-bar-ok { display: block; height: 100%; background: var(--healthy); }
.hosts-bar-off { display: block; height: 100%; background: var(--border-strong); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--panel); border: 1px solid var(--border-card); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-height: 84px; }
.stat .cell-value { font-size: 22px; }
.stat .cell-value.attention { color: var(--attention); }
.stat .cell-value.problem { color: var(--problem); }
.cell-link:hover .stat { background: var(--hover); border-color: var(--border-strong); }
.figure .strip-head .cell-value.small { font-size: 18px; }
.figure-readout { margin-top: 4px; min-height: 16px; }
.cell-link:hover .strip { background: var(--hover); }
/* DESIGN-AVD §4 (ADO 23820): several targets on one axis */
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 2px; font-size: 11.5px; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }
.chart.multi .line.series { stroke-width: 1.8; }
.chart .end-label { font-size: 10px; font-variant-numeric: tabular-nums; }
/* DESIGN-AVD §5 (ADO 23821): table controls, cell bars and flags, row actions */
.table-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.table-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.table-filter select, .table-find { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 12.5px; }
.table-find { width: 220px; }
.table-controls .cell-note { margin-left: auto; font-variant-numeric: tabular-nums; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--text); }
table.data th.sortable.asc::after { content: ' ▲'; font-size: 8px; }
table.data th.sortable.desc::after { content: ' ▼'; font-size: 8px; }
.cell-obj { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mini-bar { display: inline-block; width: 56px; height: 6px; background: var(--chip); border-radius: 3px; overflow: hidden; vertical-align: middle; }
.mini-bar-fill { display: block; height: 100%; background: var(--accent); }
.mini-bar-fill.attention { background: var(--attention); }
.flag-attention { color: var(--attention); }
.flag-problem { color: var(--problem); }
table.data td.ctl-cell { text-align: right; white-space: nowrap; }
table.data td.ctl-cell .secondary { font-size: 11.5px; padding: 3px 10px; }
/* DESIGN-AVD §6 (ADO 23822): a long day list collapses */
.collapsed-table > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; padding: 8px 0; list-style: none; }
.collapsed-table > summary::before { content: '▸ '; font-size: 10px; }
.collapsed-table[open] > summary::before { content: '▾ '; }
.cell-link { display: block; color: inherit; text-decoration: none; }
.cell-link:hover .cell { background: var(--hover); border-color: var(--border-strong); }

/* ---- banners and tables */
.banner { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; color: var(--muted); font-size: 13.5px; }
.banner.wait { color: var(--text); border-color: var(--accent); }
.banner.warn, .banner.unknown { color: var(--attention); background: rgba(240, 180, 41, .10); border-color: rgba(240, 180, 41, .28); }
.banner.not_yet_arrived { color: var(--nodata); background: rgba(124, 143, 166, .10); border-color: rgba(124, 143, 166, .28); }
table.data { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border-card); border-radius: var(--radius); font-size: 12.5px; }
table.data th, table.data td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--body); }
table.data th { color: var(--faint); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); }
table.data tr:last-child td { border-bottom: none; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
table.data tr.not_collected_here td { color: var(--muted); }
table.data tr.not_yet_arrived td:nth-child(2), table.data tr.unknown td:nth-child(2) { color: var(--nodata); }

/* ---- buttons: one filled Ember action per view, ghosts otherwise */
button.primary { background: var(--action); color: #171512; border: 1px solid transparent; border-radius: 9px; padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; }
button.primary:hover { background: var(--action-hover); }
button.primary:disabled, button.secondary:disabled { opacity: .45; cursor: default; }
button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border-strong); border-radius: 9px; padding: 4px 12px; font-size: 11px; font-weight: 600; cursor: pointer; }
button.secondary:hover { border-color: #6A6255; background: rgba(255, 255, 255, .03); }

/* ---- reports */
.reports-box .ctl { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.ctl-text { color: var(--muted); }
.ctl-windows { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ctl .ctl-link { color: var(--muted); font-size: 12px; text-decoration: underline; }           /* the one-line note beside the button: where the reports are */     /* DESIGN-INVESTIGATIONS §3: the window choice, in place of the button */
.tab-control { margin-bottom: 14px; }
.ctl-text.running { color: var(--nodata); }
.report-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border-card); border-radius: var(--radius); padding: 9px 13px; }
.muted { color: var(--muted); }
.warn-text { color: var(--attention); }
.more { display: inline-block; margin-top: 8px; color: var(--muted); font-size: 12.5px; }
details.section > summary { cursor: pointer; list-style: revert; color: var(--muted); }
.md { background: var(--panel); border: 1px solid var(--border-card); border-radius: var(--radius); padding: 16px 20px; line-height: 1.55; max-width: 960px; color: var(--body); }
.md h2, .md h3, .md h4 { font-family: var(--serif); font-weight: 500; color: var(--text); margin: 16px 0 6px; }
.md h2 { font-size: 20px; } .md h3 { font-size: 17px; } .md h4 { font-size: 15px; color: var(--muted); }
.md p { margin: 6px 0; } .md ul, .md ol { margin: 4px 0 10px; padding-left: 20px; }
.md pre, .msg pre { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 11px; overflow-x: auto; white-space: pre-wrap; font-family: var(--mono); font-size: 12px; }
.md code { font-family: var(--mono); font-size: .9em; } .md table.data { width: auto; margin: 6px 0 12px; } .md hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.msg { margin: 8px 0; }
.strip-ok { color: var(--healthy); } .strip-stale { color: var(--attention); }

/* ---- the day's reports */
.finding-targets { color: var(--muted); font-size: 12.5px; }
.finding-targets a { color: var(--text); }
.cell-note.today { color: var(--text); }

/* ---- the metric viewer (§10) */
.viewer-head { margin-bottom: 12px; }
.viewer-head .home-title { margin: 0 0 8px; font-weight: 500; }
.banner.read.healthy { color: var(--text); background: rgba(76, 194, 107, .08); border-color: rgba(76, 194, 107, .3); }
.banner.read.attention { color: var(--attention); background: rgba(240, 180, 41, .10); border-color: rgba(240, 180, 41, .28); }
.viewer-strips { display: flex; flex-direction: column; gap: 10px; }
.strip { background: var(--panel); border: 1px solid var(--border-card); border-radius: var(--radius); padding: 10px 13px 5px; }
.strip-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.strip-head .secondary { margin-left: auto; }
.chart { width: 100%; height: 150px; display: block; cursor: crosshair; max-width: 100%; }
.chart .line { stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .baseline { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.chart .mark { stroke: var(--attention); stroke-width: 2; }
.chart .cursor { stroke: var(--text); stroke-width: 1; opacity: .7; }
.chart .ylabel { fill: var(--hint); font-size: 11px; text-anchor: end; font-family: var(--mono); }
.chart .xlabel { fill: var(--hint); font-size: 11px; }
.chart .xlabel.end { text-anchor: end; }
.readout { margin-top: 12px; }
.readout-title { color: var(--muted); margin-bottom: 6px; font-size: 13px; }
.readout-table { width: auto; min-width: 360px; }
.picker { margin-top: 12px; }

/* ---- responsive (§11.4): the sidebar becomes a drawer under 900px */
@media (max-width: 900px) {
  #main { margin-left: 0; }
  .navtoggle { display: flex; }
  #side { transform: translateX(-100%); transition: transform .22s ease; width: min(280px, 84vw); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
  #side.open { transform: none; }
}
@media (max-width: 760px) {
  #main { padding: 24px 16px 40px; }
  #topnav { gap: 12px; padding: 0 14px; }
  #uname, .uchip .utag, .uchip .car { display: none; }
  .uchip { padding: 0; width: 34px; justify-content: center; }
  .windows { margin-left: 0; }
}
/* ADO 23629: eleven tabs on a server page; the bar wraps rather than overflowing */
#nav { flex-wrap: wrap; row-gap: 2px; }
/* ADO 23633: a finding card is the headline, the pill and the server; the full text opens in a dialog */
.cell.finding { cursor: pointer; min-height: 0; }
.cell.finding:hover, .cell.finding:focus-visible { background: var(--hover); border-color: var(--border-strong); outline: none; }
dialog.finding { background: var(--panel); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 18px 20px; max-width: 560px; width: calc(100% - 32px); box-sizing: border-box; }
dialog.finding[open] { display: flex; flex-direction: column; gap: 8px; }
dialog.finding::backdrop { background: rgba(0, 0, 0, .55); }
.finding-summary { line-height: 1.45; }
.finding-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
/* David, 2026-10-26: recommendations at body size, the server and the issue first, the action under them */
.recs { margin: 6px 0 0; padding-left: 24px; color: var(--body); }
.recs li { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.rec-lead { font-weight: 400; color: var(--muted); }           /* ADO 23637: the bold server link fought the text */
.rec-lead a { color: var(--text); font-weight: 400; }
.rec-issue { font-weight: 400; color: var(--muted); }
/* ADO 23637: the tile's two lines (the current health report, its recommendations); the name is the link into the server */
.tile-line { font-size: 13px; margin-top: 6px; }
.tile-line a { color: var(--text); }
a.tile-name { text-decoration: none; }
a.tile-name:hover { text-decoration: underline; }

/* ADO 23649: the Actions page and the Roles page */
.section-sub { font-size: 12px; color: var(--faint); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 6px; }
table.data td.ctl-cell { white-space: nowrap; }
table.data td.ctl-cell .ctl-text { margin-left: 8px; color: var(--muted); font-size: 12px; }
table.data td.ctl-cell .banner { margin: 6px 0 0; padding: 6px 10px; white-space: normal; }
button.link { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 12px; margin-left: 6px; padding: 0; }
.ctl select { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; font: inherit; font-size: 13px; max-width: 360px; }