/* Translucid External Posture UI, on the Translucid Security brand system.
   Mist page, white cards, graphite ink. Action Blue is the only interactive colour: buttons, links, focus rings, pressed
   toggles and work that is running. There is no red or orange: severity is said in words and weight, and where a mark has
   to carry it (a map tile, a bar, a row edge) it is a step on the graphite ramp: fire graphite, smoke slate, ice fog, clean
   hairline. The secure green is only ever a dot. Inter for reading, JetBrains Mono for data, IDs, timestamps and labels,
   both vendored. Buttons and chips are pills, cards 20px, inputs 12px. Surfaces carry no shadow; menus and dialogs do.
   Layout: sidebar rail + top bar on desktop (>=1024px); top bar, tab bar and a sheet on phones.
   Class names are shared with the page scripts (app.js, dashboard.js, settings.js, admin.js ...). */
@font-face{font-family:"Inter";src:url("/staticfiles/cve/inter.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/staticfiles/cve/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/staticfiles/cve/jetbrains-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/staticfiles/cve/jetbrains-mono-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---- tokens ---- */
:root{
  color-scheme:light;
  /* the Translucid palette. Every colour in this file is one of these; the last row are the in-between greys and the pale
     blue the brand's own product mockups use. */
  --graphite:#17191E;--carbon:#2A2E36;--slate:#4A515C;--steel:#7A808A;--fog:#9AA0A8;
  --hairline:#D3D3D0;--divider:#ECECEA;--travertine:#E4E0D9;--mist:#F3F3F1;--white:#FFFFFF;
  --action-blue:#0071E3;--action-blue-hover:#0077ED;--action-blue-tint:#E8F1FC;--action-blue-ink:#0059B3;--status-secure:#6E9B7E;
  --night:#0E0F12;--carbon-2:#2E333B;--stone:#5E646D;--ash:#C9CCD1;--chalk:#E3E3E0;--paper:#F7F7F5;--sky:#D6E8FD;

  --bg:var(--mist);--surface:var(--white);--surface-2:var(--paper);--sunk:var(--divider);--hover:var(--mist);
  --ink:var(--graphite);--ink-2:var(--carbon);--muted:var(--slate);--faint:var(--stone);--placeholder:var(--fog);
  --line:var(--divider);--line-2:var(--hairline);--topline:rgba(23,25,30,.06);
  --action:var(--action-blue);--action-hover:var(--action-blue-hover);--action-tint:var(--action-blue-tint);--action-ink:var(--action-blue-ink);
  --on-action:var(--white);--link:var(--action-blue);--focus:var(--action-blue);
  /* severity: words lead; a mark that has to carry it steps down the graphite ramp */
  --fire:var(--graphite);--fire-ink:var(--graphite);--fire-bg:var(--chalk);--high:var(--carbon);
  --smoke:var(--slate);--smoke-ink:var(--graphite);--smoke-bg:var(--divider);
  --ice:var(--fog);--ice-ink:var(--slate);--ice-bg:var(--mist);
  --ok:var(--status-secure);--ok-ink:var(--graphite);--ok-bg:var(--mist);--violet:var(--slate);--violet-bg:var(--divider);
  --clean:var(--hairline);
  --brand:var(--action-blue);--on-brand:var(--white);
  --pop:0 30px 80px -40px rgba(23,25,30,.35);--pop-s:0 18px 40px -16px rgba(23,25,30,.35);
  --ring:0 0 0 1px var(--line-2);
  --sh-1:none;--sh-2:var(--pop);--sh-3:var(--pop);
  --r-s:6px;--r:10px;--r-in:12px;--r-l:20px;--r-pill:999px;
  --gutter:16px;--bar:56px;--tab:60px;--rail:220px;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --on-ink:var(--white);--on-solid:var(--white);--code-text:var(--mist);--mono-text:var(--mist);--pulse:var(--status-secure);
  --selection:var(--sky);--scrim:rgba(23,25,30,.45);--scrim-2:rgba(23,25,30,.5);--veil:rgba(243,243,241,.96);

  --ring-fire:var(--graphite);--ring-smoke:var(--hairline);--ring-ice:var(--divider);
  --sk-a:var(--divider);--sk-b:var(--paper);--hatch:var(--hairline);--dot-grid:var(--hairline);
  --heat-1:var(--hairline);--heat-2:var(--fog);--heat-3:var(--slate);
  --graph-edge:var(--ash);--graph-node-border:var(--slate);--graph-node-bg:var(--white);--graph-domain-border:var(--steel);--graph-shadow:var(--graphite);--graph-accent:var(--slate);--graph-text:var(--carbon);--graph-halo:var(--paper);--graph-kind:var(--slate);--graph-ip:var(--fog);--graph-project-bg:var(--travertine);--graph-link-hi:var(--steel);--graph-port-text:var(--slate);--graph-title:var(--graphite);--graph-title-2:var(--carbon);--clean-ring:var(--hairline);
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

/* ---- dark theme ----
   The brand defines no dark UI, so this one is built only from its dark values: night page, graphite cards, carbon for
   raised and hovered surfaces, mist ink. Light is the default and always on. Dark applies only when the viewer picks Dark,
   or Auto while the system is dark: theme.js sets data-theme="dark" on <html> before first paint. --ink is the
   high-contrast foreground and also the fill of the action bar and toasts, so there it becomes light and --on-ink (the text
   on that fill) becomes dark. The severity ramp turns over (fire is the lightest step), so text on its solid fills,
   --on-solid, turns graphite too. Link text is the brand's pale blue, since Action Blue is too dark to read on graphite. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:var(--night);--surface:var(--graphite);--surface-2:var(--carbon);--sunk:var(--carbon-2);--hover:var(--carbon);
  --ink:var(--mist);--ink-2:var(--divider);--muted:var(--fog);--faint:var(--fog);--placeholder:var(--steel);
  --line:var(--carbon);--line-2:var(--slate);--topline:rgba(243,243,241,.08);
  --action-tint:var(--carbon-2);--action-ink:var(--sky);--link:var(--sky);
  --fire:var(--mist);--fire-ink:var(--mist);--fire-bg:var(--carbon-2);--high:var(--chalk);
  --smoke:var(--ash);--smoke-ink:var(--divider);--smoke-bg:var(--carbon);
  --ice:var(--fog);--ice-ink:var(--fog);--ice-bg:var(--graphite);
  --ok-ink:var(--divider);--ok-bg:var(--carbon);--violet:var(--fog);--violet-bg:var(--carbon);
  --clean:var(--slate);
  --pop:0 30px 80px -40px rgba(14,15,18,.9);--pop-s:0 18px 40px -16px rgba(14,15,18,.9);
  --on-ink:var(--graphite);--on-solid:var(--graphite);--code-text:var(--graphite);--mono-text:var(--graphite);
  --selection:var(--slate);--scrim:rgba(14,15,18,.62);--scrim-2:rgba(14,15,18,.66);--veil:rgba(23,25,30,.96);
  --ring-fire:var(--mist);--ring-smoke:var(--slate);--ring-ice:var(--carbon);
  --sk-a:var(--carbon);--sk-b:var(--carbon-2);--hatch:var(--carbon-2);--dot-grid:var(--carbon-2);
  --heat-1:var(--carbon-2);--heat-2:var(--slate);--heat-3:var(--fog);
  --graph-edge:var(--slate);--graph-node-border:var(--fog);--graph-node-bg:var(--graphite);--graph-domain-border:var(--steel);--graph-shadow:var(--night);--graph-accent:var(--fog);--graph-text:var(--divider);--graph-halo:var(--graphite);--graph-kind:var(--ash);--graph-ip:var(--steel);--graph-project-bg:var(--carbon);--graph-link-hi:var(--steel);--graph-port-text:var(--fog);--graph-title:var(--mist);--graph-title-2:var(--divider);--clean-ring:var(--slate);
}
*{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--font);font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom,0px))}
body.noscroll{overflow:hidden}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
h2{font-size:16px;line-height:1.3}
h3{font-size:15px}
p{margin:0;text-wrap:pretty}
b,strong{font-weight:600}  /* Inter stops at 600 in the brand */
button{color:inherit}  /* never the browser's black button text */
a{color:var(--link);text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--selection);color:var(--ink)}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--on-ink);padding:8px 12px;border-radius:var(--r-s);z-index:100}
.skip:focus{left:8px}
svg{flex:none}
.rail svg:not(.mk),.tabbar svg,.sheet svg,.topbar svg,.menu svg,.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
/* brand icons: 1.5px strokes, square caps, mitre joins; 18px in the sidebar */
.rail svg:not(.mk){width:18px;height:18px}
.rail .acct .chev{width:16px;height:16px}

/* micro label used everywhere: the brand's mono eyebrow */
.eyebrow,.proj-label,.rail-h,.sec,.table th{font:400 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}

/* ---- shell ---- */
.app{display:block}
.stage{min-width:0}
/* the Translucid lockup: the mark (two panes, the inner bottom corners chamfered), "Translucid" in Inter 600, and the
   product name beside it in steel, as the brand's own product headers set it */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand .mk{width:19px;height:18px;fill:currentColor;stroke:none}
.brand-name{font:600 14px var(--font);letter-spacing:-.01em}
.brand-product{font:400 13px var(--font);color:var(--steel)}
.brand-text{display:inline-flex;align-items:baseline;gap:7px}
/* the sidebar is too narrow for the full name on one line: the product name goes under "Translucid Security" */
.rail .brand-text{flex-direction:column;align-items:flex-start;gap:1px}
.rail .brand-product{font-size:12px}
.brand.compact{padding:6px;margin:-6px}
.auth-card .brand{gap:12px}
.auth-card .brand .mk{width:27px;height:26px}
.auth-card .brand-name{font-size:20px;letter-spacing:-.02em}
.auth-card .brand-product{font-size:19px}
.rail{display:none}

.topbar{position:sticky;top:0;z-index:20;height:calc(var(--bar) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;
  display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--topline)}

.add-btn{margin-left:auto;gap:6px;white-space:nowrap}
.add-btn svg{width:16px;height:16px;stroke-width:2.4}
.add-btn span{display:none}

.wrap{max-width:1280px;margin:0 auto;padding:22px var(--gutter) 32px;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}

/* tab bar + sheet (phones and small tablets) */
.tabbar{position:fixed;z-index:30;left:0;right:0;bottom:0;height:calc(var(--tab) + env(safe-area-inset-bottom,0px));padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  display:flex;background:var(--surface);border-top:1px solid var(--line-2)}
.tabbar>a,.tabbar>button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;font:500 11px var(--font);color:var(--muted);text-decoration:none;cursor:pointer;min-width:0;padding:6px 2px;position:relative}
.tabbar svg{width:22px;height:22px}
.tabbar [aria-current="page"]{color:var(--ink)}
.tabbar [aria-current="page"]::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:2px;background:var(--ink)}
.sheet-scrim{position:fixed;inset:0;z-index:40;background:var(--scrim)}
.sheet{position:fixed;z-index:41;left:0;right:0;bottom:0;max-height:86dvh;overflow:auto;background:var(--surface);border-radius:var(--r-l) var(--r-l) 0 0;padding:8px var(--gutter) calc(20px + env(safe-area-inset-bottom,0px));box-shadow:var(--sh-3);animation:rise .22s cubic-bezier(.2,.8,.2,1)}
.sheet-grip{width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:4px auto 14px}
.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.sheet-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-2);font-size:12.5px;font-weight:500;text-decoration:none;color:var(--ink);text-align:center;min-height:78px}
.sheet-grid a:active{background:var(--sunk)}
.sheet-grid a.out{color:var(--fire-ink)}
.sheet .proj-wrap{margin:0}
.tab-avatar{width:22px;height:22px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--ink);color:var(--on-ink)}

.acct-head{display:flex;align-items:center;gap:12px;padding:4px 2px 14px;border-bottom:1px solid var(--line)}
.acct-head>span:last-child{display:flex;flex-direction:column;min-width:0}
.acct-head b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-list{display:flex;flex-direction:column;margin-top:6px}
.sheet-list form{display:contents}
.sheet-list a,.sheet-list button{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 4px;border:0;border-bottom:1px solid var(--line);background:none;font:500 15px var(--font);color:var(--ink);text-decoration:none;text-align:left;width:100%;cursor:pointer}
.sheet-list button.out{color:var(--fire-ink);border-bottom:0}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* project switcher */
.proj-wrap{display:flex;flex-direction:column;gap:6px}
.proj-label{margin:0}
.select{position:relative}
.select .chev{position:absolute;right:10px;top:50%;width:16px;height:16px;margin-top:-8px;stroke:var(--muted);fill:none;stroke-width:2;pointer-events:none}
.select select{padding-right:32px;font-weight:600}

/* ---- surfaces ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:20px}
.grid{display:grid;gap:14px}
.sub{color:var(--muted);font-size:14px;margin:6px 0 0;max-width:68ch}
.sub a{color:var(--link);display:inline-block;padding:9px 0;margin:-9px 0}
.note{font-size:13px;color:var(--muted)}
.empty{color:var(--muted);font-size:14px;padding:36px 16px;text-align:center}
.empty:not(:only-child){padding:20px 8px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 16px;flex-wrap:wrap;margin-bottom:20px}
.page-head>div{min-width:0}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:2px;flex-wrap:wrap}
.card-head h2,.feed-head h2{display:flex;align-items:center;gap:8px}

.sec{margin:24px 0 8px}
.live{display:inline-flex;align-items:center;gap:6px;font:400 11px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ok-ink)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--pulse) 50%,transparent);animation:pulse 2s infinite}
.live.off{color:var(--muted)}.live.off::before{background:var(--faint);box-shadow:none;animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--pulse) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pulse) 0%,transparent)}}
.sub .live{margin-left:8px}
.chip{display:inline-block;font:500 12px var(--mono);padding:3px 8px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink)}
/* the project a row belongs to, in the all-projects view: an outlined, monochrome tag so it never competes with the heat or severity marks */
.proj-chip{display:inline-flex;align-items:center;max-width:100%;font:500 10.5px/1 var(--mono);letter-spacing:.04em;padding:4px 7px;border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-chip.sys{background:var(--surface-2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}

.ro-note{margin:8px 0 12px}
.chips{display:flex;gap:6px;flex-wrap:wrap}

/* surfaces you can click: the background changes on hover */
a.card,.card.link,.tile,.host-row,.sheet-grid a,.picker button{transition:background .15s ease-out,border-color .15s ease-out}@media (hover:hover) and (pointer:fine){a.card:hover,.card.link:hover,.tile:hover{background:var(--hover)}}
a.card:active,.card.link:active,.tile:active{transform:none;box-shadow:none}

/* ---- controls ---- */
label{display:block;font-size:13px;font-weight:500;margin:0 0 8px;color:var(--ink-2)}
input,select,textarea{width:100%;font:inherit;font-size:15px;padding:9px 16px;border:1px solid var(--line-2);border-radius:var(--r-in);background:var(--surface);color:var(--ink);min-height:48px;transition:border-color .15s ease-out,box-shadow .15s ease-out}
input::placeholder,textarea::placeholder{color:var(--placeholder)}@media (hover:hover) and (pointer:fine){input:hover,select:hover,textarea:hover{border-color:var(--fog)}}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A515C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:34px}
.select select{background-image:none}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;accent-color:var(--action);cursor:pointer}
textarea{resize:vertical}
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 15px var(--font);min-height:44px;padding:0 24px;border:1px solid var(--action);border-radius:var(--r-pill);background:var(--action);color:var(--on-action);cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out}@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--action-hover);border-color:var(--action-hover)}}
.btn:active{transform:none;box-shadow:none}
.btn[disabled]{opacity:.35;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}@media (hover:hover) and (pointer:fine){.btn.ghost:hover{background:var(--hover);border-color:var(--line-2)}}
.btn.danger{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}@media (hover:hover) and (pointer:fine){.btn.danger:hover{background:var(--ink-2);border-color:var(--ink-2)}}
.btn.danger-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}@media (hover:hover) and (pointer:fine){.btn.danger-ghost:hover{background:var(--hover)}}
.asset-info{margin-top:24px}
.asset-grid{display:grid;grid-template-columns:1fr 1.6fr 150px;gap:12px;margin-bottom:12px;align-items:end}
.asset-grid .field{margin:0}
.host-danger{margin-top:32px;padding-top:16px;border-top:1px solid var(--line)}
.host-danger-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}@media (max-width:700px){.asset-grid{grid-template-columns:1fr}}
.btn.sm{min-height:34px;padding:0 15px;font-size:13px}
.msg{font-size:14px;padding:10px 12px;border-radius:var(--r);margin-top:12px;font-weight:500}
.msg.ok{background:var(--ok-bg);color:var(--ok-ink)}.msg.err{background:var(--fire-bg);color:var(--fire-ink)}
.msg.busy{background:var(--bg);color:var(--ink-2);border:1px solid var(--line)}
form.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
form.inline .field{margin:0;flex:1 1 220px}
.toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:14px}
.toolbar .field{margin:0;min-width:200px;flex:1;max-width:340px}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tools input,.tools select{width:auto;min-width:0;flex:1 1 180px}
.tools select{flex:0 1 220px}
.tools input[type=search]{max-width:420px}
[role=tablist]{display:inline-flex;flex-wrap:nowrap;gap:2px;padding:3px;margin-bottom:14px;max-width:100%;overflow-x:auto;scrollbar-width:none;background:var(--sunk);border-radius:var(--r-pill)}
[role=tablist]::-webkit-scrollbar{display:none}
[role=tab]{flex:none;background:transparent!important;border:0!important;box-shadow:none!important;transform:none!important;color:var(--muted)!important;min-height:34px!important;padding:0 14px!important;border-radius:var(--r-pill)!important;font-weight:500!important}@media (hover:hover) and (pointer:fine){[role=tab]:hover{color:var(--ink)!important}}
[role=tab][aria-selected="true"]{background:var(--surface)!important;color:var(--ink)!important}

/* filter chips (toggle buttons with a count) */
.picker{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.picker button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);font:500 13px var(--font);color:var(--ink);cursor:pointer}
.picker button b{font:500 12px var(--mono);padding:2px 6px;border-radius:var(--r-pill);background:var(--sunk)}@media (hover:hover) and (pointer:fine){.picker button:hover{background:var(--hover)}}
.picker button[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--on-action)}
.picker button[aria-pressed="true"] b{background:color-mix(in srgb,var(--on-action) 20%,transparent)}
.picker .dot{width:9px;height:9px;border-radius:2px;background:var(--faint)}
.picker .dot.fire{background:var(--fire)}.picker .dot.smoke{background:var(--smoke)}.picker .dot.ice{background:var(--ice)}

/* ---- badges: pills, solid graphite when they matter, the words always in them ---- */
/* status pills, as the brand kit draws them: Inter 13/500 in sentence case, 28px tall, 12px either side (10 before a dot), a
   7px dot 8px before the word. Neutral is mist with a fog dot; success is the secure dot; running is the Investigating tint;
   failed is Action needed, solid graphite. */
.badge{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--hover);color:var(--ink);font:500 13px/1 var(--font);white-space:nowrap}
.badge:is(.queued,.info,.aborted,.fp,.success,.fixed,.running,.failed){padding-left:10px}
.badge:is(.queued,.info,.aborted,.fp,.success,.fixed,.running,.failed)::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--fog)}
.badge:is(.success,.fixed)::before{background:var(--ok)}
.badge.running{background:var(--action-tint);color:var(--action-ink)}
.badge.running::before{background:var(--action)}
.badge.failed{background:var(--ink);color:var(--on-ink)}
.badge.failed::before{background:var(--on-ink)}
/* severity words keep bold mono caps, as in the brand's product tables, and so do the classes that rank a tag's weight */
.badge:is(.critical,.high,.medium,.low,.fire,.smoke,.ice),.tier{display:inline-flex;align-items:center;gap:6px;height:auto;padding:5px 9px;border-radius:var(--r-pill);font:700 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
/* severity words are the one place mono goes to 700, as in the brand's product tables */
.badge.critical,.badge.fire,.tier.fire{background:var(--fire);color:var(--on-solid)}
.badge.high{background:var(--fire-bg);color:var(--fire-ink);box-shadow:inset 0 0 0 1px var(--ring-fire)}
.badge.medium,.badge.smoke,.tier.smoke{background:var(--smoke-bg);color:var(--smoke-ink);box-shadow:inset 0 0 0 1px var(--ring-smoke)}
/* "Needs validation" is a link: it opens the match and runs Validate now */
a.badge.needs-validation{text-decoration:none;cursor:pointer}a.badge.needs-validation:focus-visible{text-decoration:underline;outline:none;box-shadow:inset 0 0 0 1px currentColor}@media (hover:hover) and (pointer:fine){a.badge.needs-validation:hover{text-decoration:underline;outline:none;box-shadow:inset 0 0 0 1px currentColor}}

a.cve-link{font-family:var(--mono)}
.badge.low,.badge.ice,.tier.ice{background:var(--ice-bg);color:var(--ice-ink);box-shadow:inset 0 0 0 1px var(--ring-ice)}
@keyframes blink{50%{opacity:.2}}
.tier{align-self:start}
.host-row.sel .badge{box-shadow:inset 0 0 0 1px var(--line-2)}  /* a mist pill on the mist of a selected row keeps an edge */
/* the brand kit's toggle for on/off settings: 44x26, a 20px white knob inset 3px; Action Blue when on, hairline when off */
input[type=checkbox].switch{appearance:none;-webkit-appearance:none;flex:none;width:44px;height:26px;min-height:0;margin:0;padding:0;border:0;border-radius:13px;cursor:pointer;background:var(--line-2) radial-gradient(circle at 13px 50%,var(--white) 10px,transparent 10.5px) no-repeat;transition:background-color .15s ease-out}
input[type=checkbox].switch:checked{background-color:var(--action);background-image:radial-gradient(circle at 31px 50%,var(--white) 10px,transparent 10.5px)}
input[type=checkbox].switch:focus{box-shadow:none}
input[type=checkbox].switch:disabled{opacity:.35;cursor:default}
label:has(>input.switch){display:inline-flex;align-items:center;gap:10px}

/* ---- tables ---- */
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l)}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{position:sticky;top:0;text-align:left;padding:11px 14px;white-space:nowrap;background:var(--surface-2);border-bottom:1px solid var(--line)}
.table td{padding:14px;border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:break-word}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background .15s ease-out}@media (hover:hover) and (pointer:fine){.table tbody tr:hover{background:var(--surface-2)}}
.table tbody tr td:first-child{box-shadow:inset 3px 0 0 transparent}
.table tbody tr[data-heat="fire"] td:first-child,.table tbody tr[data-heat="critical"] td:first-child{box-shadow:inset 3px 0 0 var(--fire)}
.table tbody tr[data-heat="high"] td:first-child{box-shadow:inset 3px 0 0 var(--high)}
.table tbody tr[data-heat="smoke"] td:first-child,.table tbody tr[data-heat="medium"] td:first-child{box-shadow:inset 3px 0 0 var(--smoke)}
.table tbody tr[data-heat="ice"] td:first-child,.table tbody tr[data-heat="low"] td:first-child{box-shadow:inset 3px 0 0 var(--ice)}
.table .num{font-family:var(--mono);font-size:13px;font-weight:500}
.table a{font-weight:500;display:inline-block;padding:7px 0}
.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.scope-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.scope-cell select{font-size:12px;padding:4px 30px 4px 8px}
.table select{min-height:36px;padding:4px 30px 4px 10px;font-size:13px;width:auto}
.table input[type=checkbox]{margin:0}
.table th:first-child:has(input),.table td.sel{width:40px;padding-right:0}
.ports{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.port{font:500 12px var(--mono);padding:3px 7px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2)}
.cards{display:grid;gap:12px;grid-template-columns:1fr}
.row-card{display:flex;flex-direction:column;gap:4px}
.more-row{display:flex;justify-content:center;margin-top:16px}
.selbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;margin-bottom:10px;background:var(--ink);color:var(--on-ink);border-radius:var(--r);font-size:14px;font-weight:600}
.selbar .btn.ghost{background:transparent;color:var(--on-ink);border-color:color-mix(in srgb,var(--on-ink) 40%,transparent)}
.selbar[hidden]{display:none}
.selall{display:none;align-items:center;gap:10px;font-size:14px;font-weight:600;margin:0 0 10px}
.selall input{margin:0}
.skeleton{height:16px;border-radius:4px;background:linear-gradient(90deg,var(--sk-a),var(--sk-b),var(--sk-a));background-size:200% 100%;animation:sk 1.2s linear infinite;margin:14px 0}
@keyframes sk{to{background-position:-200% 0}}

/* tables become stacked cards on phones */@media (max-width:639px){
  .table-wrap{background:none;border:0;overflow:visible}
  .table thead{display:none}
  .table,.table tbody{display:block}
  .table tr{display:block;margin-bottom:10px;padding:6px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);position:relative;overflow:hidden}
  .table tbody tr[data-heat]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--faint)}
  .table tbody tr[data-heat="fire"]::before,.table tbody tr[data-heat="critical"]::before{background:var(--fire)}
  .table tbody tr[data-heat="high"]::before{background:var(--high)}
  .table tbody tr[data-heat="smoke"]::before,.table tbody tr[data-heat="medium"]::before{background:var(--smoke)}
  .table tbody tr[data-heat="ice"]::before,.table tbody tr[data-heat="low"]::before{background:var(--ice)}
  .table tbody tr td:first-child{box-shadow:none!important}
  .table td{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0;border:0;text-align:right;min-width:0;overflow-wrap:anywhere}
  .table td+td{border-top:1px solid var(--line)}@media (hover:hover) and (pointer:fine){.table tbody tr:hover{background:var(--surface)}}
  .table td::before{content:attr(data-label);font:400 11px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;flex:none}
  .table td:empty{display:none}
  .table td[data-label=""]{justify-content:flex-end}
  .table td[data-label=""]::before{display:none}
  .table td.full{display:block;text-align:left}
  .table td.full::before{display:none}
  .table .row-card{text-align:left}
  .table select{max-width:60%}
  .table td.sel{width:auto;justify-content:flex-start;padding:8px 0}
  .table td.sel::before{display:none}
  .selall{display:flex}
}

/* ---- toast ---- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tab) + 14px + env(safe-area-inset-bottom,0px));max-width:min(92vw,440px);z-index:90;background:var(--ink);color:var(--on-ink);padding:12px 16px;border-radius:var(--r-in);font-size:14px;font-weight:600;box-shadow:var(--pop);animation:rise .2s ease}
.toast.err{background:var(--fire)}

/* ---- dialog: bottom sheet on phones, centred modal from 640px ---- */
.dlg{border:0;padding:0;margin:auto 0 0;width:100%;max-width:100%;max-height:92dvh;border-radius:var(--r-l) var(--r-l) 0 0;background:var(--surface);color:var(--ink);box-shadow:var(--sh-3)}
.dlg[open]{animation:rise .22s cubic-bezier(.2,.8,.2,1)}
.dlg::backdrop{background:var(--scrim-2)}
.dlg-body{padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom,0px))}
.dlg-body>h2{font-size:19px;margin-bottom:6px;letter-spacing:-.03em}
.dlg-area{width:100%;font:13px/1.55 var(--mono);padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);resize:vertical;margin-top:12px;min-height:140px}
.dlg-tools{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.dlg-tools .grow,.actions .grow{flex:1}
.dlg .check{display:flex;gap:10px;align-items:flex-start;font-weight:500;margin:12px 0 0}
.dlg .check input{margin-top:3px}
.dlg-invalid{margin:6px 0 0;padding-left:18px;font:500 12px var(--mono);color:var(--fire-ink)}
.dlg .actions,.actions{display:flex;gap:8px;margin-top:18px;align-items:center;flex-wrap:wrap;justify-content:flex-end}@media (min-width:640px){
  .dlg{margin:auto;width:min(580px,calc(100vw - 32px));border-radius:var(--r-l);max-height:88dvh;border:1px solid var(--line-2);box-shadow:var(--sh-3)}
  .dlg-body{padding:24px}
}











/* ---- account menu ---- */
.acct{position:relative;margin-top:auto;border-top:1px solid var(--line);padding-top:12px}
.acct summary{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r);cursor:pointer;list-style:none;font-weight:500;font-size:14px}
.acct summary::-webkit-details-marker{display:none}.acct[open] summary{background:var(--sunk)}@media (hover:hover) and (pointer:fine){.acct summary:hover{background:var(--sunk)}}
.acct-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.acct .chev{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2}
.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink)}
/* the account avatar is the brand's graphite avatar: the mark in white on graphite (in dark, graphite on mist) */
.avatar .mk,.tabbar .tab-avatar .mk{width:44%;height:auto;fill:currentColor;stroke:none}
.menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--pop);border-radius:var(--r-in);padding:6px;display:flex;flex-direction:column;animation:rise .15s ease}
.menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-s);text-decoration:none;font-size:14px;font-weight:500;color:var(--ink)}
.menu a svg,.menu button svg{width:18px;height:18px;color:var(--muted)}
.menu form{margin:0}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:var(--r-s);background:none;font:500 14px var(--font);color:var(--ink);cursor:pointer;text-align:left}@media (hover:hover) and (pointer:fine){.menu button:hover{background:var(--sunk)}}
.sheet-grid form{display:contents}
.sheet-grid button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-2);font:500 12.5px var(--font);color:var(--ink);text-align:center;min-height:78px;cursor:pointer;width:100%}
.sheet-grid button.out{color:var(--fire-ink)}@media (hover:hover) and (pointer:fine){.menu a:hover{background:var(--sunk)}}

/* update bar */
.updatebar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px var(--gutter);background:var(--brand);color:var(--on-brand);font-size:14px;font-weight:600}
.updatebar .btn.ghost{background:transparent;color:var(--on-brand);border-color:var(--on-brand)}
.updatebar span{flex:1 1 280px;min-width:0;overflow-wrap:anywhere}

/* ================= live dashboard ================= */
/* the instrument panel: one surface, hairline-divided cells, every cell a control */
.panel{position:relative;display:grid;grid-template-columns:1fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;margin-bottom:14px}
.cell{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;min-width:0;color:inherit;text-decoration:none;background:var(--surface)}
.cell+.cell{border-top:1px solid var(--line)}
a.cell{cursor:pointer;transition:background .15s ease-out}@media (hover:hover) and (pointer:fine){a.cell:hover{background:var(--surface-2)}}
.cell-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.go{display:inline-flex;align-items:center;gap:4px;font:400 11px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);transition:color .15s ease-out,transform .15s ease-out}
.go::after{content:"\203A";font-size:14px}@media (hover:hover) and (pointer:fine){a.cell:hover .go{color:var(--ink);transform:translateX(3px)}}
.big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.big b{font:600 64px/.95 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.big small{font:500 15px var(--mono);color:var(--muted)}
.meter{height:8px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--ink);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.cell p{font-size:13px;color:var(--muted)}
.cell p b{color:var(--ink)}

/* surface map: one tile per host, coloured by its worst temperature. Few hosts get big labelled tiles; hundreds shrink to dots. */
.map{--cols:1;--rows:1;display:grid;gap:6px;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));flex:1 1 0;min-height:150px}
#c-map .map{height:auto}
.map[data-size="xl"]{--hx:92px}
.map[data-size="l"]{--hx:34px}
.hx{display:block;min-width:0;min-height:0;border-radius:4px;background:var(--clean);padding:0;cursor:pointer;position:relative;transition:transform .15s ease-out,border-color .15s ease-out;
  overflow:hidden;text-decoration:none;color:var(--ink-2)}
.hx .score{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 13px/1 var(--mono);color:var(--on-solid);opacity:.95}
.hx.clean .score{color:var(--ink)}.hx.ice .score{color:var(--graphite)}
.map[data-size="s"] .hx .score{font-size:11px}
.map[data-size="xl"] .hx .score,.map[data-size="l"] .hx .score{font-size:16px}
.hx.fire{background:var(--fire)}.hx.smoke{background:var(--smoke)}.hx.ice{background:var(--ice)}.hx.clean{background:var(--clean)}
/* few hosts: quiet labelled cards with a thin coloured edge; many hosts: compact solid squares */
.map[data-size="xl"] .hx{padding:9px 10px 9px 13px;display:flex;align-items:flex-end;font:500 11.5px/1.15 var(--mono);letter-spacing:-.01em;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink)}
.map[data-size="xl"] .hx::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--clean)}
.map[data-size="xl"] .hx.clean{border-color:var(--clean-ring)}
.map[data-size="xl"] .hx.fire::before{background:var(--fire)}.map[data-size="xl"] .hx.smoke::before{background:var(--smoke)}.map[data-size="xl"] .hx.ice::before{background:var(--ice)}
.map[data-size="xl"] .hx .score{justify-content:flex-start;padding-left:4px}@media (hover:hover) and (pointer:fine){.map[data-size="xl"] .hx:hover{background:var(--hover)}}.hx:focus-visible{z-index:2;outline:2px solid var(--focus);outline-offset:1px}@media (hover:hover) and (pointer:fine){.hx:hover{z-index:2;outline:2px solid var(--focus);outline-offset:1px}}@media (hover:hover) and (pointer:fine){.map:not([data-size="xl"]) .hx:hover{transform:scale(1.3)}}
.hx.enter{animation:cellin .35s ease backwards}
.hx.enter.new{animation:cellin .35s ease backwards,flash 1.2s ease .3s 2}
.hx.unscanned{background:repeating-linear-gradient(135deg,var(--sunk) 0 4px,var(--hatch) 4px 7px);color:var(--ink-2)}
.hx.unscanned .score{color:var(--muted)}
.map[data-size="xl"] .hx.unscanned{background:var(--surface-2)}
.map[data-size="xl"] .hx.unscanned::before{background:repeating-linear-gradient(0deg,var(--line-2) 0 3px,transparent 3px 6px)}
@keyframes cellin{from{transform:scale(.92);opacity:0}}
@keyframes flash{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 22%,transparent)}}
.map-empty{font-size:13px;color:var(--muted);align-self:center}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 11.5px var(--mono);color:var(--muted);margin-top:auto}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--faint)}
.legend i.fire{background:var(--fire)}.legend i.smoke{background:var(--smoke)}.legend i.ice{background:var(--ice)}.legend i.clean{background:var(--clean)}
.legend b{color:var(--ink);font-weight:500}
.map-tip{position:fixed;z-index:60;pointer-events:none;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--sh-2);padding:10px 12px;max-width:260px;font:500 12px/1.4 var(--font)}
.map-tip .tip-head{display:flex;align-items:center;gap:7px}
.map-tip .tip-head b{font:500 13px var(--mono)}
.map-tip .tip-dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.map-tip .tip-dot.fire{background:var(--fire)}.map-tip .tip-dot.smoke{background:var(--smoke)}.map-tip .tip-dot.ice{background:var(--ice)}
.map-tip .tip-heat{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.map-tip .tip-name{font:500 12px var(--mono);word-break:break-all;margin-top:3px}
.map-tip .tip-project{color:var(--muted);margin-top:1px;font-size:11px}
.map-tip .tip-facts{color:var(--muted);margin-top:4px;font-size:11.5px}
.map-tip .tip-vuln{margin-top:6px;display:flex;align-items:center;gap:5px;font:500 12px var(--mono)}
.map-tip .tip-tag{font:700 10px var(--mono);letter-spacing:.04em;padding:1px 5px;border-radius:var(--r-pill);background:var(--ice);color:var(--graphite)}
.map-tip .tip-tag.fire{background:var(--fire)}.map-tip .tip-tag.smoke{background:var(--smoke)}.map-tip .tip-tag.fire,.map-tip .tip-tag.smoke{color:var(--on-solid)}
.map-tip .tip-reason{color:var(--muted);margin-top:3px;font-size:11.5px;padding-left:9px;position:relative}
.map-tip .tip-reason::before{content:"·";position:absolute;left:2px}

/* feed temperature: three solid bars, each filters the feed */
.temps{display:flex;flex-direction:column;gap:8px}
.temp{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);font:inherit;cursor:pointer;text-align:left;transition:transform .15s ease-out,box-shadow .15s ease-out,border-color .15s ease-out}@media (hover:hover) and (pointer:fine){.temp:hover{background:var(--hover)}}
.temp[aria-pressed="true"]{background:var(--action);color:var(--on-action);border-color:var(--action)}
.temp .nm{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.temp .bar{height:10px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden}
.temp[aria-pressed="true"] .bar{background:color-mix(in srgb,var(--on-action) 18%,transparent)}
.temp .bar i{display:block;height:100%;width:0;border-radius:var(--r-pill);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.temp.fire .bar i{background:var(--fire)}.temp.smoke .bar i{background:var(--smoke)}.temp.ice .bar i{background:var(--ice)}
.temp[aria-pressed="true"] .bar i{background:var(--on-action)}
.temp b{font:600 20px/1 var(--font);letter-spacing:-.02em;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.bump{animation:bump .6s ease}
@keyframes bump{30%{transform:scale(1.12)}}

/* engine strip: live counters, each a link (1px gaps on a line-coloured ground draw the dividers) */
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;margin-bottom:14px}
.strip a{display:flex;flex-direction:column;gap:2px;padding:12px clamp(8px,1vw,16px);text-decoration:none;color:inherit;background:var(--surface);transition:background .15s ease-out;min-width:0}@media (hover:hover) and (pointer:fine){.strip a:hover{background:var(--surface-2)}}
.strip b{font:600 22px/1.1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.strip span{font:400 11px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);overflow-wrap:break-word}@media (hover:hover) and (pointer:fine){.strip a:hover span{color:var(--ink)}}

.hero{grid-template-columns:1fr;align-items:stretch}
.hero>.card{display:flex;flex-direction:column;min-height:0;min-width:0;padding:20px}
.graph-box{position:relative;margin-top:6px}
#d-graph{height:340px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background-image:radial-gradient(var(--dot-grid) 1px,transparent 1px);background-size:18px 18px}
#d-graph svg,#graph svg{width:100%;height:100%;display:block}
.graph-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;background:var(--veil);border-radius:var(--r)}
.graph-empty p{margin:0 0 14px;color:var(--muted);max-width:30ch}
.graph-empty form{width:100%;max-width:360px}
.counts{display:flex;gap:6px 16px;flex-wrap:wrap;margin:12px 0 4px;font:500 13px var(--mono);color:var(--muted)}
.counts b{color:var(--ink);font-weight:500}
.ticker{list-style:none;margin:6px 0 0;padding:0 0 22px;height:130px;overflow-y:auto;overflow-anchor:none;overscroll-behavior:contain;scrollbar-width:none;font:500 12.5px var(--mono);-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.ticker::-webkit-scrollbar{display:none}
.see-all::after{content:"\00a0\203A"}
.see-all{display:inline-block;align-self:flex-start;flex:none;margin-top:8px;font:500 13px var(--font);color:var(--link);text-decoration:none}@media (hover:hover) and (pointer:fine){.see-all:hover{color:var(--action-hover)}}
.ticker li{display:flex;gap:8px;align-items:baseline;padding:3px 0;animation:in .3s ease}
@keyframes in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ev{flex:none;text-transform:uppercase;font-size:11px;letter-spacing:.04em;color:var(--muted);min-width:92px;font-weight:400}
.ev-dns_name{color:var(--ice-ink)}.ev-open_tcp_port{color:var(--smoke-ink)}.ev-finding,.ev-vulnerability{color:var(--fire-ink)}
.ev-label{overflow-wrap:anywhere}.ev-mod{margin-left:auto;color:var(--faint);flex:none}
.agent{list-style:none;margin:8px 0 0;padding:0 0 48px;overflow-y:auto;overflow-anchor:none;overscroll-behavior:contain;height:360px;scrollbar-width:none;-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}
.agent::-webkit-scrollbar{display:none}
.agent li{display:grid;grid-template-columns:auto 1fr auto;gap:1px 10px;align-items:start;padding:9px 0;border-bottom:1px solid var(--line);animation:drop .45s cubic-bezier(.2,.8,.2,1)}
/* older lines used to fade with opacity, which dropped their text below readable contrast; the mask at the bottom does the fading */
.agent li.a-running{position:relative}
.agent li.a-running::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:35%;background:var(--brand);animation:scan 1.4s ease-in-out infinite}
@keyframes scan{0%{left:0}50%{left:65%}100%{left:0}}
@keyframes drop{from{opacity:0;transform:translateY(-14px);max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;transform:none;max-height:96px}}
.kind{font:400 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;padding:5px 8px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-2);white-space:nowrap}
.k-target{background:var(--fire-bg);color:var(--fire-ink)}
.k-validate,.k-hygiene{background:var(--ok-bg);color:var(--ok-ink)}
.a-msg{font:500 12.5px/1.45 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
.a-time{font:500 10.5px var(--mono);color:var(--faint);white-space:nowrap}
.a-failed .a-msg{color:var(--fire-ink)}
.spin{grid-column:3;width:12px;height:12px;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:rot .8s linear infinite;justify-self:end}
@keyframes rot{to{transform:rotate(360deg)}}
circle.pop{animation:popin .5s ease}
@keyframes popin{from{opacity:0}to{opacity:1}}
.feed-card{padding:0;overflow:hidden}
.feed-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--line)}
.feed{list-style:none;margin:0;padding:0;max-height:440px;overflow:auto;scrollbar-width:thin}
.feed li{padding:14px 18px 14px 21px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:4px 12px;animation:in .35s ease;position:relative;transition:background .15s ease-out}
.feed li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ice)}
.feed li[data-tier="fire"]::before{background:var(--fire)}.feed li[data-tier="smoke"]::before{background:var(--smoke)}@media (hover:hover) and (pointer:fine){.feed li:hover{background:var(--surface-2)}}
.feed li:last-child{border-bottom:0}
.feed li[hidden]{display:none}
.cve-id{font:500 13.5px var(--mono)}
.cve-title{grid-column:2;color:var(--ink-2);font-size:14px;overflow-wrap:anywhere}
.meta{grid-column:2;display:flex;gap:12px;flex-wrap:wrap;font:500 12px var(--mono);color:var(--muted)}
.meta .hit{color:var(--fire-ink);font-weight:500}
.how{padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-2);font-size:13px;color:var(--muted)}
.how summary{padding:10px 0;margin:-10px 0;cursor:pointer;font:400 11px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.how p{margin-top:8px;max-width:70ch}

/* ---- graph page ---- */
#graph-overview[hidden],#graph-detail[hidden]{display:none!important}
.graph-overview{display:grid;gap:16px;margin-top:14px}
.graph-overview>label{font:500 12px var(--mono);color:var(--muted)}
.graph-overview>input{width:min(100%,420px);min-height:42px;padding:9px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.graph-project{margin:6px 0 24px;min-width:0}
.graph-project{position:relative;display:grid;grid-template-columns:minmax(180px,230px) minmax(0,1fr);align-items:center;gap:42px;min-height:165px;padding:24px;border:1px solid var(--line);border-radius:var(--r-l);background:radial-gradient(circle at 15% 50%,color-mix(in srgb,var(--graph-accent) 7%,transparent),transparent 40%),var(--surface-2);overflow:hidden}
.graph-project>*:not(.graph-edges){position:relative;z-index:1}
.graph-edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.graph-edges path{fill:none;stroke:var(--graph-edge);stroke-width:2;stroke-dasharray:4 4}
.graph-project-node{display:grid;gap:7px;align-content:center;min-height:110px;padding:17px 18px;border:2px solid var(--graph-node-border);border-radius:var(--r-in);background:var(--graph-node-bg);box-shadow:0 5px 18px color-mix(in srgb,var(--graph-shadow) 8%,transparent);min-width:0}
.graph-node-kind{display:block;font:500 10px var(--mono);letter-spacing:.11em;color:var(--graph-kind)}
.graph-project-name{margin:0;font-size:20px;line-height:1.2;overflow-wrap:anywhere}
.graph-project-count{font:500 11px var(--mono);line-height:1.5;color:var(--muted)}
.graph-project-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px;font-size:20px;overflow-wrap:anywhere}
.graph-project-head small{font:500 12px var(--mono);color:var(--muted)}
.graph-groups-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;align-items:start;min-width:0}
.graph-root{min-width:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.graph-domain-node{border:2px solid var(--graph-domain-border);border-radius:var(--r-in);box-shadow:0 4px 14px color-mix(in srgb,var(--graph-shadow) 7%,transparent)}
.graph-domain-node[open]{box-shadow:0 8px 24px color-mix(in srgb,var(--graph-shadow) 12%,transparent)}
.graph-root[open]{grid-column:span 1;border-color:var(--ink)}
.graph-root>summary{list-style:none;cursor:pointer;padding:16px;display:grid;gap:14px;min-height:105px}
.graph-domain-node>summary{gap:8px;min-height:125px}
.graph-root>summary::-webkit-details-marker{display:none}
.graph-root>summary:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
.graph-root-title{font-size:17px;font-weight:600;overflow-wrap:anywhere}
.graph-root-title::before{content:'▸';display:inline-block;margin-right:9px;color:var(--muted);transition:transform .15s}
.graph-root[open] .graph-root-title::before{transform:rotate(90deg)}
.graph-root-stats{display:flex;gap:8px 14px;flex-wrap:wrap;font:500 11.5px var(--mono);color:var(--muted)}
.graph-root-stats strong{color:var(--ink)}
.graph-root-stats .graph-attention{color:var(--fire)}
.graph-root-body{padding:0 12px 12px;max-height:55dvh;overflow:auto}
.graph-host-search{width:100%;min-height:36px;margin-bottom:9px;padding:7px 10px;border:1px solid var(--line);border-radius:calc(var(--r) - 3px)}
.graph-host-list{display:grid;gap:5px}
.graph-host-list{padding-left:16px;border-left:2px solid var(--graph-edge);margin-left:7px}
.graph-host-row{display:grid;gap:4px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:calc(var(--r) - 3px);color:var(--ink);text-decoration:none}
.graph-host-row{position:relative}
.graph-host-row::before{content:"";position:absolute;width:16px;border-top:2px solid var(--graph-edge);left:-17px;top:50%}@media(max-width:720px){.graph-project{grid-template-columns:1fr;gap:32px;padding:16px}.graph-project-node{min-height:90px}.graph-groups-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}}.graph-host-row:focus-visible{border-color:var(--ink);background:var(--surface-2)}@media (hover:hover) and (pointer:fine){.graph-host-row:hover{background:var(--hover);background:var(--surface-2)}}
.graph-host-row strong{overflow-wrap:anywhere}
.graph-host-meta{font:500 11px var(--mono);color:var(--muted)}
#graph{width:100%;height:min(100dvh,960px);min-height:540px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background-image:radial-gradient(var(--dot-grid) 1px,transparent 1px);background-size:18px 18px}
.graph-card{padding:12px}
.legend.graph-legend{margin-top:12px}
.graph-legend i{border-radius:50%}
.gn{cursor:pointer;outline:none}
.gn text{font:500 10px var(--mono);fill:var(--graph-text);paint-order:stroke;stroke:var(--graph-halo);stroke-width:3px;pointer-events:none}
.gn-port text{font-size:9px;fill:var(--graph-port-text)}
.gn-project text{font-size:22px;font-weight:500;fill:var(--graph-title)}
.gn-root text{font-size:17px;font-weight:500;fill:var(--graph-title-2)}
.gn circle{transition:r .15s}.gn:focus-visible circle{stroke:var(--ink);stroke-width:2px}@media (hover:hover) and (pointer:fine){.gn:hover circle{stroke:var(--ink);stroke-width:2px}}
.gn.sel circle{stroke:var(--ink);stroke-width:3px}
.gn.sel text{fill:var(--ink);font-weight:500}
.gn .ring{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 3;pointer-events:none}
/* live scan highlighting: a domain or host a scan is working on right now pulses */
.gn-live .ring{display:inline!important;stroke:var(--action);stroke-width:2.5;stroke-dasharray:none;animation:gn-pulse 1.4s ease-in-out infinite}
.gn-live circle:not(.ring){stroke-width:3px}
@keyframes gn-pulse{0%,100%{stroke-opacity:1}50%{stroke-opacity:.2}}
@media (prefers-reduced-motion:reduce){.gn-live .ring{animation:none}}
/* SOC mode: the graph over the whole window, with a status bar and the scans running now */
.soc-hud{display:none}
body.soc{overflow:hidden}
body.soc .graph-card{position:fixed;inset:0;z-index:1000;margin:0;padding:0;border:0;border-radius:0;background:var(--bg)}
body.soc #graph{height:100dvh;min-height:0;border:0;border-radius:0}
body.soc #graph.has-live .gn:not(.gn-live){opacity:.5}
body.soc .page-head,body.soc .toolbar,body.soc .node-card{display:none}
body.soc .graph-legend{position:absolute;left:12px;bottom:12px;z-index:4;margin:0;padding:8px 12px;border-radius:var(--r);background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--line)}
body.soc .soc-hud{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
.soc-bar{pointer-events:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:10px 16px;background:color-mix(in srgb,var(--surface) 92%,transparent);border-bottom:1px solid var(--line)}
.soc-title{font:600 18px var(--font)}
.soc-scope{color:var(--muted);font:600 13px var(--font)}
.soc-stats{display:flex;flex-wrap:wrap;gap:4px 18px;margin-left:auto;color:var(--muted);font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.soc-stats b{margin-right:6px;color:var(--ink);font:500 22px var(--mono);letter-spacing:0}
.soc-fire b{color:var(--fire)}
.soc-clock{color:var(--muted);font:500 14px var(--mono)}
.soc-feed{pointer-events:auto;position:absolute;right:12px;top:68px;width:min(340px,calc(100% - 24px));max-height:calc(100dvh - 150px);overflow:auto;padding:10px 14px;border-radius:var(--r);background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line)}
.soc-feed h2{margin:0 0 6px;font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.soc-feed ul{margin:0;padding:0;list-style:none}
.soc-feed li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:7px 0;border-top:1px solid var(--line)}
.soc-feed li:first-child{border-top:0}
.soc-feed a{color:var(--ink);font:500 13px var(--mono);text-decoration:none;overflow-wrap:anywhere}
.soc-stage{grid-column:1;color:var(--muted);font:500 12px var(--font)}
.soc-elapsed{grid-row:1/3;grid-column:2;align-self:center;color:var(--action-ink);font:500 12px var(--mono)}
.soc-idle{display:block!important;color:var(--muted);font:500 13px var(--font)}
.graph-band{position:absolute;border:1px dashed var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent);pointer-events:none;z-index:2}
.node-card{margin-top:12px;min-height:72px}
.node-head{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.node-rows{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0;font-size:13.5px}
.node-rows dt{color:var(--muted);font:500 11.5px var(--mono);padding-top:2px}
.node-rows dd{margin:0;overflow-wrap:anywhere}
.discovery .node-card{border:0;border-top:1px solid var(--line);border-radius:0;padding:10px 0 0;margin-top:10px;min-height:0;min-width:0;max-height:42dvh;overflow:auto;overscroll-behavior:contain}
.discovery .node-rows{max-width:100%}
.discovery .node-rows dd{overflow-wrap:anywhere;word-break:break-word}
.node-title{text-decoration:none;border-bottom:1px solid transparent}@media (hover:hover) and (pointer:fine){.node-title:hover{border-bottom-color:currentColor}}

/* ---- host master/detail ---- */
.split{display:grid;gap:14px;grid-template-columns:1fr;align-items:start}
.split-list{padding:10px;display:flex;flex-direction:column;gap:10px;min-width:0}
.split-list>input{min-height:40px;font-size:16px}
.host-rows{display:flex;flex-direction:column;gap:3px;overflow:auto;scrollbar-width:thin;max-height:70dvh}
.host-row{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:3px;padding:10px 12px 10px 16px;border-radius:var(--r);cursor:pointer;min-height:50px;border:1px solid transparent;position:relative}
.host-row::before{content:"";position:absolute;left:5px;top:9px;bottom:9px;width:4px;border-radius:2px;background:var(--line)}
.host-row[data-heat="fire"]::before{background:var(--fire)}.host-row[data-heat="smoke"]::before{background:var(--smoke)}.host-row[data-heat="ice"]::before{background:var(--ice)}.host-row[data-heat="clean"]::before{background:var(--clean)}@media (hover:hover) and (pointer:fine){.host-row:hover{background:var(--surface-2);border-color:var(--line-2)}}
.host-row.sel{background:var(--hover);border-color:var(--line-2)}

.host-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.host-row>*{flex:none;min-width:0}
.host-row{flex:none;overflow:hidden}  /* a row keeps its own height: in a scrolling column flex would otherwise squeeze rows into each other */
.host-why{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.host-row .cve-id{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere;font-size:13.5px}
.host-meta{display:flex;gap:10px;align-items:center}
.host-meta .note{font:500 12px var(--mono)}
.split-pane{min-width:0;padding:18px}
.split-pane .back{display:none;margin-bottom:12px}
.host-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.host-assess-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.host-assess-head .sec{margin:0}
.host-labels{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0}
.host-labels .chip{cursor:default}
.host-title{font-size:24px;letter-spacing:-.02em;font-weight:600;overflow-wrap:anywhere}
.shot{display:block;width:100%;max-width:680px;border-radius:var(--r);border:1px solid var(--line-2);margin-top:14px}
.shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shot-pair .shot{margin-top:6px}
.ip-line{font:500 13px var(--mono);margin:14px 0 6px}
.svc{padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface-2);margin-bottom:8px;min-width:0}
.svc-top{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.svc-port{font:500 13px var(--mono);color:var(--ink)}
.svc-name{font-size:14px;font-weight:500}
.banner{margin:8px 0 0;padding:9px 11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);font:500 12px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:160px;overflow:auto}
.kvs{display:grid;gap:2px;margin-top:8px}
.kv{display:grid;grid-template-columns:minmax(80px,max-content) 1fr;gap:12px;font-size:12.5px}
.kv .k{font-family:var(--mono);color:var(--muted)}.kv .v{overflow-wrap:anywhere}
.find{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;font-size:14px;border-bottom:1px solid var(--line)}
.find .note{font:500 12px var(--mono)}
pre.mono{margin:0 0 6px;padding:9px 11px;background:var(--ink);color:var(--mono-text);border-radius:var(--r-s);font:500 12px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:none;user-select:all}  /* the exact command, to copy */
.split-pane .why a{color:var(--link);text-underline-offset:2px}
.split-pane .why .kv{grid-template-columns:120px 1fr}
.host-row .host-meta{flex-wrap:wrap}
.split-pane .why .svc .banner{max-height:140px}@media (max-width:899px){
  .split.has-sel .split-list{display:none}
  .split:not(.has-sel) .split-pane{display:none}
  .split.has-sel .split-pane .back{display:inline-flex}
}

/* ---- account, administration, misc ---- */
.hy-card{margin-bottom:14px}
.hy-card h2{margin-bottom:4px}
.acct-grid{display:grid;gap:14px;grid-template-columns:1fr}
.acct-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.about-grid{display:grid;gap:14px;grid-template-columns:1fr;align-items:start}
.about-grid h2{margin-bottom:10px}
.about-grid .node-rows a,.about-grid .note a{color:var(--link)}
.about-lead .brand{margin-bottom:14px}
.about-tag{margin:0 0 12px;color:var(--ink-2)}
.about-link{display:inline-flex;align-items:center;text-decoration:none;margin-top:12px}
.two-step h3,.recovery h3,.card>h3{margin-bottom:4px}
.two-step .note{margin-bottom:10px}
.two-step-form{display:grid;gap:10px;margin-top:4px}
.two-step-form .qr{width:180px;height:180px;background:#fff;padding:8px;border-radius:var(--r)}
.two-step-form .qr svg{width:100%;height:100%;display:block}
.secret-key{word-break:break-all}
.recovery{margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--sunk)}
.recovery-codes{font:500 14px/1.8 var(--mono);margin:8px 0 0}
.access-row{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.access-row .kind{background:var(--sunk);color:var(--ink-2)}
.access-row button{margin-left:auto}
.add-access{display:grid;gap:8px;grid-template-columns:1fr;margin-top:12px}
.org-card{margin-bottom:14px}
.mono-box{font:500 16px var(--mono);width:100%;text-align:center;letter-spacing:.04em}

/* ---- sign-in and standalone pages ---- */
.auth{min-height:100dvh;display:grid;place-items:center;padding:24px var(--gutter);background:var(--bg);position:relative}
.auth-card{width:100%;max-width:420px}
.auth-card .brand{margin-bottom:26px;padding:6px 0}


.auth-card .card{padding:28px;border-radius:var(--r-l);box-shadow:none}
.auth-card h1{font-size:30px;line-height:1.15;letter-spacing:-.03em;margin-bottom:6px}
.auth-card>.sub{margin-bottom:18px}
.auth-card form.card{padding:22px}
.auth-card .btn{width:100%}
/* sign-in, two-step and sign-out: the brand's terrace photograph in one panel, the form on a carbon panel beside it. Dark in both
   themes; on phones the photograph steps aside and the form takes the screen. */
body:has(>.auth-split){padding-bottom:0;background:var(--night)}  /* no tab bar here, so no room kept for one */
.auth-split{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:24px;padding:16px;background:var(--night);color:var(--mist)}
.auth-photo{border-radius:28px;background:url("/staticfiles/cve/brand/signin-terrace.jpg") center/cover no-repeat var(--graphite)}
.auth-panel{display:flex;flex-direction:column;min-width:0;padding:48px 48px 40px;border-radius:28px;background:var(--carbon)}
.auth-panel .brand{align-self:flex-start;color:var(--white)}
.auth-panel .brand-product{color:var(--ash)}
.auth-panel .auth-card{max-width:380px;margin:clamp(56px,14vh,128px) auto 0}
.auth-panel h1{font-size:28px;line-height:1.15;letter-spacing:-.02em;color:var(--white);margin:0 0 8px}
.auth-panel .auth-card>.sub{color:var(--ash);margin:0 0 8px}
.auth-panel form,.auth-panel form.card{margin-top:24px;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.auth-panel label{color:var(--mist)}
.auth-panel input{background:transparent;color:var(--mist);border-color:var(--slate)}
.auth-panel input::placeholder{color:var(--steel)}
.auth-panel input:-webkit-autofill{-webkit-box-shadow:0 0 0 48px var(--carbon) inset;-webkit-text-fill-color:var(--mist);caret-color:var(--mist)}
.auth-panel .msg.err{background:var(--carbon-2);color:var(--mist)}
.auth-panel .note{color:var(--ash)}
.auth-panel .note a{color:var(--sky)}
@media (hover:hover) and (pointer:fine){.auth-panel input:hover{border-color:var(--fog)}}
.auth-panel input:focus{border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus)}
@media (max-width:899px){.auth-split{grid-template-columns:minmax(0,1fr);padding:12px}.auth-photo{display:none}.auth-panel{padding:32px 24px}}

/* ---- KPI tiles, severity bar, pipeline stages (scan detail, hygiene, targets) ---- */
.tiles{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-bottom:14px}
.tile{display:flex;flex-direction:column;gap:3px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);text-align:left;font:inherit;color:inherit;cursor:pointer;text-decoration:none;min-width:0}
.tile b{font:600 30px/1 var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile span{font:400 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tile.dim b{color:var(--faint)}
.tile.fire b{color:var(--fire)}
.tile.smoke b{color:var(--smoke)}
.tile.ice b{color:var(--ice-ink)}
.tile.ok b{color:var(--ink)}
.sevbar{display:flex;gap:2px;height:14px;border-radius:var(--r-pill);overflow:hidden;background:var(--sunk)}
.sevbar i{display:block;min-width:4px;transition:flex-grow .6s ease}
.sevbar .critical{background:var(--fire)}.sevbar .high{background:var(--high)}.sevbar .medium{background:var(--smoke)}.sevbar .low{background:var(--ice)}.sevbar .info{background:var(--line-2)}
.scan-head{display:grid;gap:14px;margin-bottom:14px;min-width:0}
.scan-head>*{min-width:0}
.scan-head h2{font-size:22px;letter-spacing:-.02em}
.scan-meta{display:flex;gap:6px 18px;flex-wrap:wrap;font:500 12.5px var(--mono);color:var(--muted)}
.scan-meta b{color:var(--ink)}
.phases{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.phase{position:relative;padding:10px 12px 10px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;min-width:0}
.phase::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--line-2)}
.phase.success::before{background:var(--muted)}
.phase.failed::before{background:var(--fire)}
.phase.running::before{background:var(--brand);animation:blink 1s infinite}
.phase b{display:block;font-size:13.5px;font-weight:500;letter-spacing:-.02em}
.phase span{font:500 11.5px var(--mono);color:var(--muted)}
.phase.failed span{color:var(--fire-ink)}
.meter-cell{display:flex;align-items:center;gap:10px;min-width:110px}
.meter-cell .meter{flex:1;height:6px}
.meter-cell b{font:500 13px var(--mono);min-width:2ch;text-align:right}
.picker .dot.clean{background:var(--ok)}@media (min-width:640px){.tiles{grid-template-columns:repeat(3,1fr)}}@media (min-width:1024px){.tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}

/* small dropdown of links (report downloads) */
.pop{position:relative;margin-left:auto;margin-right:10px}
.pop summary{list-style:none;cursor:pointer}
.pop summary::-webkit-details-marker{display:none}
.pop-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:15;min-width:260px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-in);box-shadow:var(--pop);padding:6px;display:flex;flex-direction:column;animation:rise .15s ease}
.pop-menu a{padding:10px 12px;border-radius:var(--r-s);text-decoration:none;font-size:14px;font-weight:500}@media (hover:hover) and (pointer:fine){.pop-menu a:hover{background:var(--sunk)}}

/* a row of inputs plus buttons that stacks on phones */
.inline-add{display:grid;gap:8px;grid-template-columns:1fr;margin:14px 0 4px}@media (min-width:720px){.inline-add{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto auto}}

/* API keys: a tile per service */
.keys-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.keytile{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:112px;padding:16px;position:relative;overflow:hidden}
.keytile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line-2)}
.keytile.on::before{background:var(--ink)}
.keytile-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.keytile-top b{min-width:0;overflow-wrap:anywhere;flex:1 1 120px}
.keytile-top .badge{flex:none}
.page-intro{margin-bottom:14px}
.keytile-top b{font-size:16px;font-weight:600;letter-spacing:-.03em}
.keytile .btn{align-self:flex-start}

/* copyable code block (agent access) */
.code{position:relative;margin:0 0 14px;padding:12px 84px 12px 14px;background:var(--ink);color:var(--code-text);border-radius:var(--r);font:500 12.5px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.code .copy{position:absolute;top:8px;right:8px;min-height:36px;padding:0 12px;border:1px solid color-mix(in srgb,var(--on-ink) 28%,transparent);border-radius:var(--r-pill);background:transparent;color:var(--on-ink);font:400 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}@media (hover:hover) and (pointer:fine){.code .copy:hover{background:var(--on-ink);color:var(--ink)}}
.secret-box{display:grid;gap:10px}
.secret-box .code{margin:0}@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---- tablets and up ---- */@media (min-width:640px){
  :root{--gutter:24px}
  h1{font-size:30px;line-height:1.15;letter-spacing:-.03em}
  .cards{grid-template-columns:repeat(2,1fr)}
  .toast{bottom:24px}
  .sheet-grid{grid-template-columns:repeat(4,1fr)}
  .add-btn span{display:inline}
  .add-access{grid-template-columns:1fr 1.4fr 1fr auto}
  .hero>.card{padding:24px}
  .card{padding:24px}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}@media (min-width:720px){.strip{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:900px){
  .acct-grid{grid-template-columns:1fr 1fr;align-items:start}
  .about-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
  .split-list{position:sticky;top:calc(var(--bar) + 16px);height:calc(100dvh - var(--bar) - 130px)}
  .host-rows{max-height:none;flex:1}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero>.card.discovery{height:clamp(520px,calc(100dvh - 260px),700px)}
  .hero .graph-box{flex:1;min-height:300px;display:flex}
  .hero #d-graph{flex:1;height:auto;min-height:300px}
  .hero .agent{height:320px}
  .panel{grid-template-columns:minmax(0,3fr) minmax(0,3.5fr) minmax(0,3.5fr)}
  .cell+.cell{border-top:0;border-left:1px solid var(--line)}
}@media (min-width:1200px){.strip{grid-template-columns:repeat(7,minmax(0,1fr))}}@media (max-width:719px){.strip a:last-child:nth-child(odd){grid-column:span 2}}@media (min-width:1024px){
  :root{--gutter:32px}
  body{padding-bottom:0}
  .app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
  .rail{display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100dvh;padding:18px 14px 14px;background:var(--surface);border-right:1px solid var(--line);overflow:auto}
  .rail .brand{padding:4px 10px;margin-bottom:6px}
  .rail-nav{display:flex;flex-direction:column;gap:2px}
  .rail-h{margin:18px 8px 6px;color:var(--faint)}
  .rail-h:first-child{margin-top:0}
  .rail-nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);font-size:14px;font-weight:400;color:var(--muted);text-decoration:none;transition:background .15s ease-out,color .15s ease-out}
  .rail-nav a svg{color:var(--faint)}@media (hover:hover) and (pointer:fine){.rail-nav a:hover{background:var(--hover);color:var(--ink)}}@media (hover:hover) and (pointer:fine){.rail-nav a:hover svg{color:var(--ink-2)}}
  .rail-nav a[aria-current="page"]{background:var(--hover);color:var(--ink);font-weight:500}
  .rail-nav a[aria-current="page"] svg{color:var(--ink)}
  .brand.compact,.tabbar,.sheet,.sheet-scrim{display:none!important}
  .topbar{padding-left:var(--gutter);padding-right:var(--gutter)}
  .wrap{padding-top:30px;padding-bottom:48px}
  .cards{grid-template-columns:repeat(3,1fr)}
  #graph{height:calc(100dvh - 360px)}
  .toast{left:calc(50% + var(--rail)/2)}
  .big b{font-size:64px}
}

.a-repeat{color:var(--muted);font:500 11.5px var(--mono)}
.scans-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.scans-bar .picker{flex:1;min-width:0}

.host-link{color:var(--link);text-decoration:none}@media (hover:hover) and (pointer:fine){.host-link:hover{color:var(--action-hover)}}
.host-row .host-link{color:inherit}
/* AI usage is a system-wide view; its cards adapt before the token tables need to scroll. */
.ai-usage-page{max-width:1280px;margin:0 auto}
.ai-usage-page #ai-usage>.tools{justify-content:flex-end;align-items:center;margin:18px 0 12px}
.ai-usage-hero{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:26px 30px;background:linear-gradient(115deg,var(--surface),var(--surface-2));min-width:0}
.ai-usage-identity{min-width:0}
.ai-usage-eyebrow{font:500 11px var(--mono);letter-spacing:.12em;color:var(--muted);margin:0 0 9px}
.ai-usage-identity h2{font-size:clamp(1.3rem,2vw,1.9rem);letter-spacing:-.02em;line-height:1.15;margin:0;overflow-wrap:anywhere}
.ai-usage-identity .note{margin:10px 0 0}
.ai-usage-signal{display:flex;flex-direction:column;gap:6px;max-width:240px;flex:0 1 240px;padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface)}
.ai-usage-signal strong{font-size:14px}.ai-usage-signal span{font-size:12px;color:var(--muted);line-height:1.4}
.ai-usage-signal.ok strong{color:var(--ok-ink)}.ai-usage-signal.bad strong{color:var(--fire-ink)}
.ai-usage-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:14px 0 20px}
.ai-usage-metric{min-width:0;padding:18px;display:flex;flex-direction:column;gap:6px}
.ai-usage-metric strong{display:block;overflow-wrap:anywhere;font-size:clamp(1.3rem,2vw,1.85rem);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.ai-usage-metric .note{margin:0;font-size:12px;line-height:1.4}
.ai-usage-metric .note:last-child{margin-top:auto;padding-top:7px}
.ai-usage-price-hint{font-size:12px;color:var(--muted);margin:0 0 20px}
.ai-usage-section{margin:24px 0;min-width:0}
.ai-usage-scroll{overflow-x:auto;max-width:100%}
.ai-usage-scroll table{min-width:560px}
.ai-usage-details{margin:10px 0;padding:16px;min-width:0}
.ai-usage-details summary,.ai-usage-about summary{cursor:pointer;font-weight:500}
.ai-usage-details .ai-usage-scroll{margin-top:14px}
.ai-usage-about{margin:20px 0;font-size:13px}
.ai-usage-rate{margin:24px 0}
.ai-usage-rate summary,.ai-connection-form summary{cursor:pointer;font-weight:500}
.ai-usage-rate-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin-top:16px}
.ai-usage-rate-form .field{min-width:0}
.ai-usage-rate-form input{width:100%;min-width:0}
.ai-connection-form{max-width:560px;margin:24px 0}
.ai-discovery-keys{margin:24px 0}
.ai-discovery-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* A certificate date is one value. Let the certificates table scroll before
   breaking an ISO date in the middle; other columns may still wrap naturally. */
.hy-card .table td.cert-expiry{white-space:nowrap;overflow-wrap:normal;word-break:normal;min-width:118px;font-variant-numeric:tabular-nums}@media(max-width:639px){.hy-card .table td.cert-expiry{min-width:0}}@media(max-width:1050px){.ai-usage-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:640px){.ai-usage-hero{align-items:flex-start;flex-direction:column;padding:20px;gap:14px}.ai-usage-signal{max-width:none;flex:auto;width:100%}.ai-usage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-usage-metric{padding:14px}.ai-usage-metric:last-child{grid-column:1/-1}.ai-usage-scroll table{min-width:0;width:100%}.ai-usage-scroll .table-wrap{overflow:visible}}@media(max-width:430px){.ai-usage-grid{gap:8px}.ai-usage-metric{padding:12px}.ai-usage-metric strong{font-size:1.25rem}}


.host-overview .kv{grid-template-columns:minmax(120px,max-content) 1fr}
.tech-line{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.nse{margin-top:6px}.nse summary{cursor:pointer;font-size:12px;color:var(--muted)}
.db-facts{margin-top:8px}.db-facts .badge{margin-top:6px}
.rdp-shot{margin-top:10px;padding:10px 12px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--surface)}
.rdp-shot-img{display:block;max-width:320px;width:100%;border-radius:var(--r-s);border:1px solid var(--line);margin:6px 0}
.local-checks{margin-top:8px}
.local-check{margin-top:8px;padding:8px 10px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--surface)}
.local-check .tools{justify-content:space-between}

/* ---- polish on develop: targets rows, compact filter groups in list panes, charts ---- */
.table select{max-width:176px}@media (min-width:900px){.row-actions{flex-wrap:nowrap}.table td:has(.row-actions){white-space:nowrap}}
.split-list .picker{position:relative;gap:4px;margin:0;padding-top:17px}
.split-list .picker::before{content:attr(aria-label);position:absolute;top:0;left:1px;font:400 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.split-list .picker button{min-height:30px;padding:0 9px;gap:6px;font-size:12.5px;border-radius:var(--r-pill)}
.split-list .picker button b{font-size:11px;padding:1px 5px}
.split-list .picker .dot{width:8px;height:8px}
.how-filter{margin:0 0 12px;font-size:13px;color:var(--muted);max-width:90ch}
.how-filter summary{cursor:pointer;font-weight:600;color:var(--ink-2);width:max-content}
.how-filter p{margin:6px 0 0}

/* ---- charts (charts.js): neutral ink, Action Blue only on the pointer ---- */
.chart-slot:not(:empty){margin-bottom:14px}
.chart{padding:16px 16px 12px}
.chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.chart-big{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.chart-total{font:600 32px/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.chart-delta{font:400 11px var(--mono);padding:3px 6px;border-radius:var(--r-pill);background:var(--sunk);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.chart-delta[data-dir="up"]{background:var(--fire-bg);color:var(--fire-ink)}
.chart-delta[data-dir="down"]{background:var(--ok-bg);color:var(--ok-ink)}
.chart-ranges{display:inline-flex;gap:2px;padding:3px;background:var(--sunk);border-radius:var(--r-pill)}
.chart-ranges button{min-height:30px;padding:0 12px;border:0;border-radius:var(--r-pill);background:transparent;font:500 12px var(--mono);color:var(--muted);cursor:pointer}@media (hover:hover) and (pointer:fine){.chart-ranges button:hover{color:var(--ink)}}
.chart-ranges button[aria-pressed="true"]{background:var(--action);color:var(--on-action)}
.chart-stage{position:relative;margin-top:12px;height:200px;touch-action:pan-y;border-radius:var(--r);cursor:crosshair}
.chart-stage svg{display:block;width:100%;height:100%;overflow:visible}
.chart-grid line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 4}
.chart-line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart-area{fill:var(--ink);fill-opacity:.07;stroke:none}
.chart-cursor{stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0}
.chart-dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--brand);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--ink);opacity:0;pointer-events:none}
.chart-tip{position:absolute;top:-6px;transform:translate(-50%,-100%);padding:5px 9px;border-radius:var(--r-s);background:var(--ink);color:var(--on-ink);font:500 12px var(--mono);white-space:nowrap;opacity:0;pointer-events:none}
.chart-axis{display:flex;justify-content:space-between;margin-top:8px;font:400 11px var(--mono);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
@keyframes drawin{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.chart.redraw .chart-line,.chart.redraw .chart-area{animation:drawin .6s cubic-bezier(.2,.8,.2,1)}@media (prefers-reduced-motion:reduce){.chart.redraw .chart-line,.chart.redraw .chart-area{animation:none}}

/* activity heatmap: weekday rows, week columns, a neutral ramp */
.heat-read{font:500 12px var(--mono);align-self:center}
.heat-grid{display:grid;grid-template-rows:repeat(7,auto);grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;margin-top:14px;width:100%;max-width:calc(var(--weeks) * 26px)}
.heat-cell{display:block;aspect-ratio:1;border-radius:2px;background:var(--sunk);min-width:0;min-height:0}@media (hover:hover) and (pointer:fine){.heat-grid .heat-cell:hover{outline:2px solid var(--focus);outline-offset:1px}}
.heat-cell[data-level="1"]{background:var(--heat-1)}.heat-cell[data-level="2"]{background:var(--heat-2)}.heat-cell[data-level="3"]{background:var(--heat-3)}.heat-cell[data-level="4"]{background:var(--ink)}
.heat-legend{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:10px;font:400 11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.heat-legend .heat-cell{width:12px;height:12px;aspect-ratio:auto;margin:0 1px}
.heat-legend span:first-child{margin-right:4px}.heat-legend span:last-child{margin-left:4px}@media (max-width:639px){.heat-grid{gap:2px}}

/* AI activity as a timeline: a rail down the left, a node per event */
.agent li{position:relative;margin-left:5px;padding-left:20px;border-left:2px solid var(--line-2);border-bottom:0;padding-top:8px;padding-bottom:12px}
.agent li::before{content:"";box-sizing:border-box;position:absolute;left:-7px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--ink)}
.agent li.a-running::before{background:var(--brand);border-color:var(--brand);animation:blink 1s infinite}
.agent li.a-failed::before{background:var(--fire);border-color:var(--fire)}
.agent li.a-done::before,.agent li.a-success::before{background:var(--ok);border-color:var(--ok)}
.agent li.a-running::after{left:0;bottom:4px}
.a-time{font-variant-numeric:tabular-nums}

/* ---- host pane: sections, folded empties, tighter header ---- */
.pane-sec{margin-top:4px}
.pane-sec>.sec:first-child{margin-top:20px}
.pane-sec.is-empty{display:grid;grid-template-columns:150px 1fr;gap:4px 14px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line)}
.pane-sec.is-empty>.sec{margin:0}
.pane-sec.is-empty p.note{margin:0;color:var(--faint)}
.pane-sec.is-empty .recent-changes,.pane-sec.is-empty .web-routes{display:contents}
.pane-sec.is-empty .recent-changes p,.pane-sec.is-empty .web-routes p{margin:0}@media (max-width:639px){.pane-sec.is-empty{grid-template-columns:1fr}}
.split-pane .host-head{gap:6px 8px;margin-bottom:2px}
.split-pane .host-title{font-size:22px;margin-right:4px}
.split-pane .why{margin-top:12px}
.split-pane .host-assess-head{margin-bottom:4px}

/* dashboard map: an empty map explains itself */
.map-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border:1px dashed var(--line-2);border-radius:var(--r);color:var(--muted)}
.map-empty::before{content:"";align-self:stretch;height:26px;background:repeating-linear-gradient(90deg,var(--sunk) 0 26px,transparent 26px 32px);border-radius:3px;opacity:.9}
.map-empty b{color:var(--ink);font-size:14px}
.map-empty p{margin:0;font-size:13px;max-width:44ch}

/* few hosts: the card names its host (the score was white on a pale card and invisible) */
.hx .hx-name{display:none}
.map[data-size="xl"] .hx{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:6px}
.map[data-size="xl"] .hx .score{position:static;inset:auto;order:1;padding:0;font-size:11px;color:var(--muted);opacity:1;justify-content:flex-start}
.map[data-size="xl"] .hx .score::before{content:"score ";font-weight:500}
.map[data-size="xl"] .hx .hx-name{order:2;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:12.5px;font-weight:500}
.map[data-size="xl"] .hx .score{gap:5px}

/* ---- scan detail: a fact grid, counted tabs, a legend for the severity bar ---- */
.scan-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;font:inherit;color:inherit}
.scan-meta .fact{display:flex;flex-direction:column;gap:3px;padding:10px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.scan-meta .fact small{font:400 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.scan-meta .fact b{font:500 15px var(--mono);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.tabcount{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:var(--r-pill);background:var(--sunk);font:500 11px var(--mono);color:var(--ink-2)}

.sev-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;padding:0;list-style:none;font:500 12px var(--mono);color:var(--muted);text-transform:capitalize}
.sev-legend li{display:inline-flex;align-items:center;gap:6px}
.sev-legend i{width:10px;height:10px;border-radius:2px;background:var(--line-2)}
.sev-legend b{color:var(--ink);font-variant-numeric:tabular-nums}
.sev-legend .critical{background:var(--fire)}.sev-legend .high{background:var(--high)}.sev-legend .medium{background:var(--smoke)}.sev-legend .low{background:var(--ice)}

/* ---- remaining pages: compact selects in list panes, numbered steps, a button that does not hug its table ---- */
.split-list select{min-height:38px;font-size:14px;padding-top:6px;padding-bottom:6px}
.steps{margin:8px 0 10px;padding:0;list-style:none;counter-reset:step;display:grid;gap:8px;max-width:72ch}
.steps li{counter-increment:step;position:relative;padding-left:34px;font-size:14px;color:var(--ink-2)}
.steps li::before{content:counter(step);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--on-ink);font:500 11px/22px var(--mono);text-align:center}
.steps li b{color:var(--ink)}
.card>.table-wrap~.tools{margin-top:12px}

/* phones: long, many-row tables (changes, activity) get tighter stacked cards */@media (max-width:639px){
  #section[data-kind="changes"] .table tr,#section[data-kind="activity"] .table tr{padding:2px 14px;margin-bottom:6px}
  #section[data-kind="changes"] .table td,#section[data-kind="activity"] .table td{padding:5px 0;gap:10px}
  #section[data-kind="activity"] .table td[data-label="Scan"]:has(:only-child),#section[data-kind="activity"] .table td[data-label="Scan"]:not(:has(a)){display:none}
}

/* ---- host page: header, stat strip, tabs. One concern per tab instead of one long scroll ---- */
.split-pane{container-type:inline-size}
.host-tab{margin-top:4px}
.host-tab[hidden]{display:none}
.host-hdr{display:flex;flex-direction:column;gap:6px}
.split-pane .host-head{gap:8px;align-items:center}
.split-pane .host-title{font-size:26px;letter-spacing:-.02em;line-height:1.1;margin-right:2px;overflow-wrap:anywhere}
.host-hdr>.sub,.host-hdr>.note{margin:0;font-size:13.5px;color:var(--muted)}
.host-hdr>.sub{color:var(--ink-2)}
.host-rescan{margin-left:auto}
.host-labels{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.split-pane .tiles{grid-template-columns:repeat(3,1fr);margin:16px 0 0}
.host-tabs{position:sticky;top:var(--bar);z-index:4;display:flex;width:100%;margin:16px 0 14px;padding:3px;background:var(--sunk);border-radius:var(--r-pill);overflow-x:auto}
.host-tabs [role=tab]{flex:1 0 auto;justify-content:center}
.host-tabs [role=tab][aria-selected="true"]{background:var(--surface)!important;color:var(--ink)!important}

.host-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.host-tab-overview{display:flex;flex-direction:column;gap:18px}@container (min-width:640px){
  .host-tab-overview{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px 26px;align-items:start}
}
.host-tab-overview .why{margin:0}
.host-tab-overview .host-col:empty{display:none}
.host-tab-services .pane-sec:not(.is-empty){display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;align-items:start}
.host-tab-services .pane-sec:not(.is-empty)>:not(.svc){grid-column:1/-1}
.host-tab-services .svc{margin:0}
.host-tab-manage{display:flex;flex-direction:column;gap:16px}@media (max-width:639px){
  .split-pane .host-title{font-size:22px}
  .host-rescan{margin-left:0;width:100%}
  .split-pane .tiles{grid-template-columns:repeat(3,1fr);gap:8px}
  .split-pane .tiles .tile b,.split-pane .tiles .tile strong{font-size:22px}
}

/* exposed surface: addresses and the services on them as chips */
.surface{display:flex;flex-direction:column;gap:12px}
.surface .sec{margin:0}
.surface-ip{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.surface-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.surface-top b{font-size:14px;font-weight:500;margin-right:4px}
.surface-ports{display:flex;flex-wrap:wrap;gap:6px}
.svc-chip{display:inline-flex;align-items:stretch;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);padding:0;cursor:pointer;font:inherit;overflow:hidden}
.svc-chip b{display:flex;align-items:center;padding:4px 8px;background:var(--ink);color:var(--on-ink);font:500 12px var(--mono)}
.svc-chip span{display:flex;align-items:center;padding:4px 9px;font:500 12px var(--mono);color:var(--ink-2)}@media (hover:hover) and (pointer:fine){.svc-chip:hover{background:var(--hover)}}

/* sidebar: the nav scrolls on its own, so the account menu is always on screen, even in a short window */@media (min-width:1024px){
  .rail{overflow:hidden;gap:14px}
  .rail-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:2px}
  .acct{flex:none}
}@media (min-width:1024px) and (max-height:860px){
  .rail{padding-top:14px;gap:10px}
  .rail-nav a{padding:6px 10px}
  .rail-h{margin:12px 8px 4px}
}

/* ---- host list: one search row, heat chips, dense two-line rows ---- */
.list-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.list-tools>input{min-height:40px;font-size:15px}
.list-tools>select{width:auto;min-height:40px;font-size:13.5px;padding-right:30px}
.heat-chips{margin:0;gap:4px}
.heat-chips button{min-height:28px;padding:0 8px;gap:5px;font-size:12px;border-radius:var(--r-pill)}
.heat-chips button b{font-size:10.5px;padding:1px 5px}
.heat-chips .dot{width:8px;height:8px}
.heat-chips .dot.clean{background:var(--ok)}
.list-count{margin:0;font:500 11px var(--mono);letter-spacing:.02em;color:var(--muted)}
.host-rows{gap:2px}
.host-row[hidden]{display:none}
.host-row{padding:8px 12px 8px 18px;gap:4px;min-height:0}
.host-row::before{left:6px;top:7px;bottom:7px;width:4px}
.hr-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.hr-top .cve-id{min-width:0;-webkit-line-clamp:1;line-clamp:1;font-size:13.5px}
.hr-score{flex:none;min-width:24px;text-align:center;padding:2px 6px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-2);font:500 11px var(--mono)}
.host-row[data-heat="fire"] .hr-score{background:var(--fire);color:var(--on-solid)}
.host-row[data-heat="smoke"] .hr-score{background:var(--smoke);color:var(--on-solid)}
.host-row[data-heat="ice"] .hr-score{background:var(--ice);color:var(--graphite)}

.host-meta{gap:8px;flex-wrap:wrap}
.hr-ports{display:inline-flex;gap:3px;flex-wrap:wrap}
.hr-ports i{font:500 10.5px var(--mono);font-style:normal;padding:1px 5px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-2)}
.hr-ports i.more{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted)}



/* timestamps: one line, time first, day muted; the column shrinks to fit so the activity text gets the room */
.when{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;font:500 12.5px var(--mono);font-variant-numeric:tabular-nums}
.when b{font-weight:500;color:var(--ink)}
.when span{color:var(--muted)}
.table td:has(>.when){white-space:nowrap;width:1%}

/* links inside a sentence stay inline: the table's padded, block-like link style made each host in an activity line float off its text */
#section[data-kind="activity"] .table td a,#section[data-kind="changes"] .table td a:not(.btn){display:inline;padding:0}

/* ---- loading and error states ---- */
.sk-bar{display:block;height:11px;border-radius:3px;background:linear-gradient(90deg,var(--sunk),var(--surface-2),var(--sunk));background-size:200% 100%;animation:sk 1.2s linear infinite}
.sk-row{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px 12px 12px 18px}
.sk-row::before{content:"";position:absolute;left:6px;top:9px;bottom:9px;width:4px;border-radius:2px;background:var(--line-2)}
.sk-line{display:flex;align-items:center;gap:14px;padding:16px 14px;border-bottom:1px solid var(--line)}
.sk-line:last-of-type{border-bottom:0}
.load-error{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px;border:1px solid var(--line-2);border-left:4px solid var(--fire);border-radius:var(--r);background:var(--surface)}
.load-error b{font-size:14px}
.load-error.inline{margin-top:10px}@media (prefers-reduced-motion:reduce){.sk-bar,.skeleton{animation:none}}

/* copy buttons: small, quiet until hovered or focused, a tick when done */
.copy-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--r-s);color:var(--muted);cursor:pointer;flex:none}
.copy-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.copy-btn .i-tick{display:none}
.copy-btn.done .i-clip{display:none}.copy-btn.done .i-tick{display:block}
.copy-btn.done{color:var(--ok-ink)}@media (hover:hover) and (pointer:fine){.copy-btn:hover{background:var(--sunk);color:var(--ink)}}
.copy-btn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.host-head .copy-btn{margin-left:-2px}

.host-rows:empty{display:none}

/* ---- saved views: chips above a list's filters ---- */
.views{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.views[hidden]{display:none}
.view{display:inline-flex;align-items:stretch;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);overflow:hidden}
.view-open{all:unset;box-sizing:border-box;padding:0 9px;min-height:28px;display:inline-flex;align-items:center;font:500 12.5px var(--font);cursor:pointer}
.view-open[aria-pressed="true"]{background:var(--action);color:var(--on-action)}@media (hover:hover) and (pointer:fine){.view-open:hover:not([aria-pressed="true"]){background:var(--sunk)}}
.view-del{all:unset;box-sizing:border-box;width:24px;display:inline-flex;align-items:center;justify-content:center;border-left:1px solid var(--line);color:var(--muted);cursor:pointer;font-size:15px;line-height:1}@media (hover:hover) and (pointer:fine){.view-del:hover{background:var(--fire-bg);color:var(--fire-ink)}}
.view-open:focus-visible,.view-del:focus-visible,.view-save:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.view-save{all:unset;box-sizing:border-box;min-height:28px;padding:0 10px;display:inline-flex;align-items:center;border:1px dashed var(--ink-2);border-radius:var(--r-pill);font:500 12.5px var(--font);color:var(--ink);cursor:pointer}@media (hover:hover) and (pointer:fine){.view-save:hover{background:var(--hover);border-style:solid}}

/* ---- bulk selection: a Select toggle, row checkboxes, and the black action bar ---- */
.list-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px}
.list-meta .list-count{margin:0}
.bulk-toggle{all:unset;box-sizing:border-box;min-height:26px;padding:0 10px;display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-pill);font:500 12px var(--font);cursor:pointer;color:var(--ink)}@media (hover:hover) and (pointer:fine){.bulk-toggle:hover{background:var(--hover)}}
.bulk-toggle[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--on-action)}
.bulk-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bulk-hint{margin:0;font-size:12px}
.bulk-bar{position:sticky;top:calc(var(--bar) + 6px);z-index:3;flex-wrap:wrap;row-gap:6px;margin:0}
.bulk-bar.busy{opacity:.85}
.bulk-count{font:500 12.5px var(--mono)}
.bulk-actions{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.bulk-bar .btn.sm{min-height:30px}
.bulk-bar .bulk-select{width:auto;min-height:30px;padding:0 28px 0 10px;font-size:13px;background-color:transparent;color:var(--on-ink);border-color:color-mix(in srgb,var(--on-ink) 40%,transparent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.bulk-bar .bulk-select option{color:var(--ink);background:var(--surface)}
.bulk-status{font:500 12px var(--mono);opacity:.9}
.bulk-bar .grow{flex:1}
.bulk-bar .btn.danger{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}
.row-check{display:none;position:absolute;left:16px;top:11px;width:17px;height:17px;min-height:0;margin:0;z-index:2;accent-color:var(--action);cursor:pointer}
.selecting .row-check{display:block}
.selecting .host-row{padding-left:42px}

.bulk-fails{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:40dvh;overflow:auto}
.bulk-fails li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--fire);border-radius:var(--r-s)}

/* keyboard cheat sheet and the menu entry that opens it */
kbd{display:inline-block;min-width:22px;text-align:center;font:500 11.5px var(--mono);padding:2px 6px;border-radius:4px;background:var(--sunk);border:1px solid var(--line-2);box-shadow:0 1px 0 var(--line-2);color:var(--ink)}
.keys-list{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:8px 18px;margin:8px 0 14px;align-items:center}
.keys-list dt{white-space:nowrap}
.keys-list dd{margin:0;color:var(--ink-2);font-size:14px}
.menu button[data-keys-help],.menu button[data-notify-toggle],.menu button[data-tz-toggle]{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:var(--r);cursor:pointer;font-weight:500;font-size:14px}@media (hover:hover) and (pointer:fine){.menu button[data-keys-help]:hover,.menu button[data-notify-toggle]:hover,.menu button[data-tz-toggle]:hover{background:var(--sunk)}}
.menu button[data-keys-help]:focus-visible,.menu button[data-notify-toggle]:focus-visible,.menu button[data-tz-toggle]:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.dlg h2:focus{outline:none}

/* ---- new since you last looked ---- */
.meta-tools{display:inline-flex;gap:6px;align-items:center}
.new-tag{display:inline-flex;align-items:center;gap:5px;padding:1px 6px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:400 11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.new-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}

.hr-top .new-tag{margin-left:auto;margin-right:6px;align-self:center}
.new-toggle{all:unset;box-sizing:border-box;min-height:26px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:var(--r-pill);font:500 12px var(--font);cursor:pointer;color:var(--ink)}
.new-toggle[hidden]{display:none}
.new-toggle::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}@media (hover:hover) and (pointer:fine){.new-toggle:hover{background:var(--hover)}}
.new-toggle[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--on-action)}
.new-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.host-rows.only-new .host-row:not([data-fresh]){display:none}
.since-strip{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:9px 14px;border:1px solid var(--line-2);border-left:4px solid var(--brand);border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--ink);font-size:14px}
.since-strip[hidden]{display:none}
.since-strip b{font-weight:600}
.since-strip span{color:var(--muted)}
.since-strip em{margin-left:auto;font:500 13px var(--font);font-style:normal;color:var(--link)}@media (hover:hover) and (pointer:fine){.since-strip:hover{background:var(--hover);border-left-color:var(--brand)}}

/* scan notices: the toast with a link and a close button; stacked above the tab bar on phones */
.toast.notice{display:flex;align-items:center;gap:12px;left:auto;right:16px;transform:none;max-width:min(92vw,420px);bottom:calc(var(--tab) + 14px + env(safe-area-inset-bottom,0px))}@media (min-width:1024px){.toast.notice{bottom:20px}}
.toast.notice~.toast.notice{bottom:calc(var(--tab) + 74px)}
.notice-link{color:var(--on-ink);font-weight:600;text-underline-offset:3px;margin-left:auto}
.notice-close{all:unset;cursor:pointer;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;font-size:18px;line-height:1}@media (hover:hover) and (pointer:fine){.notice-close:hover{background:color-mix(in srgb,var(--on-ink) 18%,transparent)}}
.notice-close:focus-visible{outline:2px solid var(--on-ink);outline-offset:1px}

/* dark theme: the two pieces that cannot take a variable (a data-URI chevron) */
:root[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .select select{background-image:none}
:root[data-theme="dark"] .bulk-bar .bulk-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317191E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}

/* theme chooser in the account menu */
.theme-choice{display:flex;align-items:center;gap:4px;padding:6px 10px;font-size:14px;font-weight:500}
.theme-choice span{margin-right:auto;color:var(--ink)}
.theme-choice button{all:unset;box-sizing:border-box;min-height:28px;padding:0 10px;display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-pill);font:500 12.5px var(--font);cursor:pointer;color:var(--ink)}@media (hover:hover) and (pointer:fine){.theme-choice button:hover{background:var(--hover)}}
.theme-choice button[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--on-action)}
.theme-choice button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* touch: no tap flash, no double-tap delay, 16px fields so iOS does not zoom on focus, controls are not text-selectable,
   overlays do not scroll the page behind them. Hover effects are gated by (hover:hover) and (pointer:fine) above. */
html{-webkit-tap-highlight-color:transparent}
/* !important because many small buttons above use "all:unset", which would otherwise reset these two properties */
button,a,[role="button"],[role="tab"],summary,label,select,input[type="checkbox"],input[type="radio"]{touch-action:manipulation!important}
button,.btn,[role="tab"],summary{-webkit-user-select:none!important;user-select:none!important}
@media (pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{font-size:16px!important}
}
.sheet,.dlg{overscroll-behavior:contain}

/* worst-case data: a very long unbreakable name (a 200 character host, a long CVE title) must wrap inside its row, never widen the page */
.host-tab,.host-col,.why,.tech-table,.split-pane,.split-list{min-width:0}
.find{flex-wrap:wrap}
.find>*{min-width:0;overflow-wrap:anywhere}
.tech-line strong{overflow-wrap:anywhere}
.surface-ip,.surface-ports{min-width:0}
.svc-chip{max-width:100%;min-width:0;text-align:left}
.svc-chip span{min-width:0;overflow-wrap:anywhere;white-space:normal}
.host-hdr>*{min-width:0;overflow-wrap:anywhere}

/* press feedback: a pressable thing gives a little under the finger or the click (100 to 160 ms, never from nothing) */
.btn:active,.picker button:active,.bulk-toggle:active,.new-toggle:active,.view-open:active,.view-save:active,.copy-btn:active,.theme-choice button:active{transform:scale(.97);transition-duration:.1s}

/* CSV export button, in the list's tool row */
.csv-btn{all:unset;box-sizing:border-box;min-height:26px;padding:0 10px;display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-pill);font:500 12px var(--font);cursor:pointer;color:var(--ink)}
.csv-btn:hover{background:var(--hover)}
.csv-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.csv-btn[disabled]{opacity:.6;cursor:progress}

/* the undo notice: same card as a scan notice, with a real button */
.notice-undo{all:unset;cursor:pointer;color:var(--on-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-left:auto}
.notice-undo:focus-visible{outline:2px solid var(--on-ink);outline-offset:2px}

/* row actions menu */
.row-menu-btn{all:unset;box-sizing:border-box;position:absolute;right:8px;top:6px;width:28px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-s);color:var(--muted);cursor:pointer;opacity:0;z-index:1}
.row-menu-btn svg{width:18px;height:18px;fill:currentColor}
.host-row:focus-within .row-menu-btn,.row-menu-btn[aria-expanded="true"],.row-menu-btn:focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){.host-row:hover .row-menu-btn{opacity:1}.row-menu-btn:hover{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink)}}
@media (hover:none),(pointer:coarse){.row-menu-btn{opacity:.75;width:36px;height:30px}}

.selecting .row-menu-btn{display:none}
.row-menu-btn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

.row-menu{position:fixed;z-index:85;min-width:210px;padding:4px;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-2)}
.row-menu-item{all:unset;box-sizing:border-box;display:flex;align-items:center;width:100%;min-height:34px;padding:0 10px;border-radius:var(--r-s);font:400 14px var(--font);cursor:pointer;color:var(--ink)}
.row-menu-item:focus-visible{background:var(--ink);color:var(--on-ink)}
@media (hover:hover) and (pointer:fine){.row-menu-item:hover:not([disabled]){background:var(--sunk)}}
.row-menu-item[disabled]{color:var(--faint);cursor:default}
.row-menu-item.danger{color:var(--fire-ink)}
.row-menu-item.danger:focus-visible{background:var(--fire);color:var(--on-solid)}
.row-menu-sep{height:1px;margin:4px 6px;background:var(--line)}

.hr-top .row-menu-btn{position:static;flex:none;margin:-2px -4px -2px 0}
.host-row>.cve-id{padding-right:30px}



/* host history: a timeline grouped by day */
.history-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.history-tools select{width:auto;min-height:36px;font-size:14px}
.history-tools .picker{margin:0}
.history-summary{margin:4px 0 12px}
.timeline{display:flex;flex-direction:column}
.tl-day{margin:16px 0 4px;font:400 11px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tl-day:first-child{margin-top:4px}
.tl-event{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-left:5px;padding:8px 0 8px 18px;border-left:2px solid var(--line-2)}
.tl-event::before{content:"";box-sizing:border-box;position:absolute;left:-7px;top:13px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--ink)}
.tl-time{flex:none;font:500 12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;min-width:42px}
.tl-what{min-width:0;overflow-wrap:anywhere;font-size:14px}
.tl-scan{margin-left:auto;font:500 12px var(--mono)}

/* finding age and overdue */
.age-tag{display:inline-flex;align-items:center;padding:1px 6px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-2);font:500 10.5px/1.5 var(--mono);white-space:nowrap}
.age-tag.overdue{background:var(--fire-bg);color:var(--fire-ink);box-shadow:inset 0 0 0 1px var(--ring-fire);text-transform:uppercase;letter-spacing:.04em}

.sla-line{margin:2px 0 0}
.sla-line.overdue{color:var(--fire-ink)}
.sla-line b{color:inherit}
.overdue-toggle::before{background:var(--fire)}
.host-rows.only-overdue .host-row:not([data-overdue]){display:none}

/* host gallery: screenshot cards instead of the list and the detail pane */
.host-gallery{display:none;flex-direction:column;gap:12px}
.split.gallery .host-gallery{display:flex}
.split.gallery{grid-template-columns:minmax(0,1fr)}
.split.gallery .split-pane,.split.gallery .host-rows,.split.gallery .bulk-toggle,.split.gallery .bulk-bar{display:none}
.gallery-head{font-size:13px;color:var(--ink-2)}
.gallery-only{display:inline-flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.shot-card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;border:1px solid var(--line-2);border-top:4px solid var(--line-2);border-radius:var(--r);background:var(--surface);overflow:hidden;cursor:pointer;min-width:0}
.shot-card[data-heat="fire"]{border-top-color:var(--fire)}.shot-card[data-heat="smoke"]{border-top-color:var(--smoke)}.shot-card[data-heat="ice"]{border-top-color:var(--ice)}.shot-card[data-heat="clean"]{border-top-color:var(--ok)}
.shot-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.shot-card:hover{background:var(--hover)}}
.shot-frame{display:block;aspect-ratio:16/10;background:var(--sunk);overflow:hidden}
.shot-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.shot-none{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font:400 11px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.shot-meta{display:flex;flex-direction:column;gap:2px;padding:9px 11px 11px;min-width:0}
.shot-meta b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-meta .note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}

/* Live: trends under the counters, and a trend line inside a counter */
.trends{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin:0}
@media (min-width:1000px){.trends{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trends[hidden]{display:none}
.trends .chart-stage{height:150px}
.strip .spark{display:block;width:100%;height:22px;margin-top:6px}
.spark-line{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.7}
.spark-dot{fill:var(--ink)}

/* Update in progress: a blue bar at the top says what the update is doing; the page greys only while the services rebuild */
.update-live{position:sticky;top:0;z-index:150;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px var(--gutter) 12px;background:var(--brand);color:var(--on-brand);font-size:14px;line-height:1.35}
.update-live .ul-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--on-brand);animation:update-pulse 1.4s ease-in-out infinite}
.update-live .ul-text{flex:1 1 320px;min-width:0;display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline}
.update-live strong{font-weight:600;font-size:15px}
.update-live .ul-detail{min-width:0;overflow-wrap:anywhere}
.update-live .ul-steps{display:flex;gap:4px;align-items:center;list-style:none;margin:0;padding:0;font-size:12px;font-weight:600}
.update-live .ul-steps li{padding:3px 10px;border-radius:999px;white-space:nowrap}
.update-live .ul-steps li.ok::before{content:"\2713\00a0"}
.update-live .ul-steps li.now{background:var(--on-brand);color:var(--brand)}
.update-live .ul-link{background:transparent;color:var(--on-brand);border-color:var(--on-brand)}
.update-live .ul-track{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;background:color-mix(in srgb,var(--on-brand) 18%,transparent)}
.update-live .ul-track i{position:absolute;top:0;bottom:0;width:30%;background:var(--on-brand);animation:update-slide 1.4s ease-in-out infinite}
.update-live .ul-track.done i{width:100%;animation:none}
.update-live.failed{background:var(--fire);color:var(--on-solid)}
.update-live.failed .ul-dot,.update-live.failed .ul-track i{background:var(--on-solid);animation:none}
.update-live.failed .ul-link{color:var(--on-solid);border-color:var(--on-solid)}
.update-live.failed .ul-steps li.now{background:var(--on-solid);color:var(--fire)}
@keyframes update-slide{0%{left:-30%}100%{left:100%}}
@keyframes update-pulse{50%{transform:scale(.6);opacity:.5}}
@media (max-width:760px){.update-live .ul-steps{order:5;flex:1 0 100%;overflow-x:auto}}
@media (prefers-reduced-motion:reduce){.update-live .ul-track i{animation:none;width:100%;opacity:.5}.update-live .ul-dot{animation:none}}
html.updating .layout,html.updating #main{filter:grayscale(1);opacity:.55;pointer-events:none;transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.update-live .ul-track i{animation:none;width:100%;opacity:.5}}
.proj-wrap:has(.org-switch){gap:4px}.proj-wrap:has(.org-switch) .select+.select,.proj-wrap:has(.org-switch) .select+.proj-label+.select{margin-top:2px}

/* Live: exposed hosts and the CVE feed temperatures stack in the first column; AI activity takes the third column, above the fold */
.cell-stack{display:flex;flex-direction:column;min-width:0}
.cell-stack>.cell{flex:none}
.cell-stack>.cell+.cell{border-top:1px solid var(--line);border-left:0;padding-top:14px}
.cell-stack>a.cell{flex:1}
.ai-cell .agent{height:auto;flex:1;min-height:300px;max-height:420px}
.ai-cell .see-all{margin-top:auto}
@media (min-width:1000px){.cell-stack+.cell{border-left:1px solid var(--line);border-top:0}}
@media (max-width:999px){.cell-stack+.cell{border-top:1px solid var(--line)}}

/* Organization and project switchers live in the top bar on wide screens (the sheet carries them on phones and tablets) */
.proj-wrap.top{display:none}
@media (min-width:1000px){
  .proj-wrap.top{display:flex;flex-direction:row;align-items:center;gap:8px;margin:0}  /* the switcher leads the top bar; Add targets sits at its end */
  .proj-wrap.top .select{width:clamp(150px,15vw,220px)}
  .proj-wrap.top .select select{height:40px;min-height:40px;padding-top:0;padding-bottom:0}
  .proj-wrap.top .select+.select{margin-top:0}
}
.proj-wrap.top:has(.org-switch){gap:8px}
.proj-wrap.top:has(.org-switch) .select{margin-top:0}
.proj-wrap.top:has(.org-switch) .select+.proj-label+.select{margin-top:0}
.page-head.compact{margin-bottom:12px;align-items:center}.page-head.compact .sub{margin:0}
.page-head.compact:not(:has(.btn)){margin-bottom:0}.page-head.compact:has(.btn){justify-content:flex-end}

/* Add targets: where they go */
.dlg-dest{display:grid;grid-template-columns:1fr;gap:10px;margin:10px 0 4px}
@media (min-width:560px){.dlg-dest{grid-template-columns:1fr 1fr}}
.dlg-dest-field{display:flex;flex-direction:column;gap:5px;margin:0}
.dlg-dest .select select{min-height:40px;font-weight:600}

/* the map fills its card: tiles are placed by the layout in dashboard.js (--cols, --rows, data-tier) */
.hx[hidden]{display:none}
.hx .hx-details{display:none}
.map[data-tier="rich"] .hx{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:3px;padding:8px 10px 8px 13px}
.map[data-tier="rich"][data-size="xl"] .hx .score{position:static;inset:auto;order:1;justify-content:flex-start;padding:0;font:500 22px/1 var(--mono);color:var(--ink)}
.map[data-tier="rich"][data-size="xl"] .hx .score::before{content:none}
.map[data-tier="rich"][data-size="xl"] .hx .hx-name{order:2;margin-top:auto;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map[data-tier="rich"] .hx .hx-details{display:flex;flex-direction:column;gap:2px;order:1;min-height:0;overflow:hidden;font:500 10.5px/1.3 var(--mono);color:var(--muted)}
.map[data-tier="rich"] .hx .hx-d{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map[data-tier="rich"] .hx .hx-cve{color:var(--ink)}
.hx .hx-tag{display:none}
.map[data-tier="rich"] .hx .hx-tag{display:block;position:absolute;top:8px;right:8px;font:700 9.5px/1 var(--mono);font-style:normal;padding:3px 5px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink);letter-spacing:.04em}
.map[data-tier="rich"] .hx .hx-tag.fire{background:var(--fire);color:var(--on-solid)}
.map[data-tier="rich"] .hx .hx-tag.smoke{background:var(--smoke);color:var(--on-solid)}
.map[data-tier="rich"] .hx .hx-tag.ice{background:var(--ice);color:var(--graphite)}
.map[data-lines="1"] .hx-d:nth-child(n+2),.map[data-lines="2"] .hx-d:nth-child(n+3),.map[data-lines="3"] .hx-d:nth-child(n+4),.map[data-lines="4"] .hx-d:nth-child(n+5){display:none!important}
.map[data-tier="rich"] .hx.fire .hx-name,.map[data-tier="rich"] .hx.smoke .hx-name{color:var(--ink)}
@media (max-width:999px){#c-map .map{flex:none;height:clamp(200px,60vw,340px)}}
.map[data-narrow="1"] .hx .hx-why{display:none!important}
.map[data-lines="5"] .hx-d:nth-child(n+6){display:none!important}
/* My account: display and alert preferences */
.prefs{margin-top:14px}
.prefs h2{margin-bottom:2px}
.pref-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line)}
.prefs .note+.pref-row{margin-top:10px}
.pref-row>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 280px}
.pref-row .note{font-size:13px}
.pref-row .theme-choice{padding:0}
.prefs .btn[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--on-action)}

/* Live: the activity matrix replaces the two area charts. A week per column, a day per cell, fire/smoke/ice shading for findings. */
.trends{display:block}
.matrix{padding:16px 18px}
.mx-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-bottom:12px}
.mx-read{margin-left:auto;font-size:12.5px}
.mx-legend{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font:500 11px var(--mono);color:var(--muted)}
.mx-legend span{display:inline-flex;align-items:center;gap:6px}
.mx-key{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--sunk)}
.mx-key.fire{background:var(--fire)}.mx-key.smoke{background:var(--smoke)}.mx-key.ice{background:var(--ice)}
.mx-key.level[data-level="1"]{background:var(--heat-1)}.mx-key.level[data-level="2"]{background:var(--heat-2)}.mx-key.level[data-level="3"]{background:var(--heat-3)}.mx-key.level[data-level="4"]{background:var(--ink)}
.mx-scale{margin:0 2px}
.mx-body{display:grid;grid-template-columns:170px minmax(0,1fr) 200px;gap:16px;align-items:start;padding-top:12px;border-top:1px solid var(--line)}
.mx-leads,.mx-sides{display:grid;grid-template-rows:repeat(2,44px);gap:2px}
.mx-lead{display:flex;flex-direction:column;justify-content:center;gap:2px}
.mx-total{font:600 20px/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mx-grid-wrap{min-width:0}
.mx-grid{display:grid;grid-template-columns:repeat(90,minmax(0,1fr));grid-auto-rows:44px;gap:2px}
.mx-ticks{display:grid;grid-template-columns:repeat(90,minmax(0,1fr));margin-top:6px;font:500 11px var(--mono);color:var(--muted)}
.mx-ticks span{white-space:nowrap}
.mx-side{display:flex;flex-direction:column;justify-content:center;gap:3px;font:500 12.5px var(--mono)}
.mx-chips{display:flex;gap:12px}
.mx-stat{display:inline-flex;align-items:center;gap:5px}
.mx-stat b{font-weight:500;font-variant-numeric:tabular-nums}
.mx-cell{display:block;border-radius:2px;background:var(--sunk)}
.mx-cell[data-level="1"]{background:var(--heat-1)}.mx-cell[data-level="2"]{background:var(--heat-2)}.mx-cell[data-level="3"]{background:var(--heat-3)}.mx-cell[data-level="4"]{background:var(--ink)}
.mx-cell[data-tier="fire"][data-level="1"]{background:color-mix(in srgb,var(--fire) 28%,var(--surface))}.mx-cell[data-tier="fire"][data-level="2"]{background:color-mix(in srgb,var(--fire) 52%,var(--surface))}.mx-cell[data-tier="fire"][data-level="3"]{background:color-mix(in srgb,var(--fire) 78%,var(--surface))}.mx-cell[data-tier="fire"][data-level="4"]{background:var(--fire)}
.mx-cell[data-tier="smoke"][data-level="1"]{background:color-mix(in srgb,var(--smoke) 28%,var(--surface))}.mx-cell[data-tier="smoke"][data-level="2"]{background:color-mix(in srgb,var(--smoke) 52%,var(--surface))}.mx-cell[data-tier="smoke"][data-level="3"]{background:color-mix(in srgb,var(--smoke) 78%,var(--surface))}.mx-cell[data-tier="smoke"][data-level="4"]{background:var(--smoke)}
.mx-cell[data-tier="ice"][data-level="1"]{background:color-mix(in srgb,var(--ice) 28%,var(--surface))}.mx-cell[data-tier="ice"][data-level="2"]{background:color-mix(in srgb,var(--ice) 52%,var(--surface))}.mx-cell[data-tier="ice"][data-level="3"]{background:color-mix(in srgb,var(--ice) 78%,var(--surface))}.mx-cell[data-tier="ice"][data-level="4"]{background:var(--ice)}
@media (hover:hover) and (pointer:fine){.mx-cell:hover{outline:2px solid var(--focus);outline-offset:1px}}
.mx-busy{font-size:12px}
@media (max-width:999px){.mx-body{grid-template-columns:minmax(0,1fr);gap:10px}.mx-leads,.mx-sides{grid-template-rows:none;grid-template-columns:1fr 1fr;gap:12px}.mx-grid{gap:1px;grid-auto-rows:28px}}