/* CVE Tracker: a neutral black / grey / white theme for cards, panels and lines (Steve, 2026-10-27).
   The buttons, OS colours, severity colours and icons are locked: don't change them with the theme.
   The key to the controls (made coherent 2026-10-30, Steve confirmed three times), for every new page:
     red button (.videobtn, form buttons)  a page's main action: Sign In, Show, Save, Start Watching
     blue pill (.bluepill)                 Inventory's main actions, and every "get the update" link (a device's updates,
                                           a maker's update or download page), wherever it appears
     round pill (.sortbar a.xfilter / .pfilter / .gfilter, Intelligence's buttons)   a filter that narrows a list
     square-cornered (.sortbar a)          a sort order
     small outline (.smallbtn)             a secondary action: Copy, Remove, Recheck, Close
     roll toggle ("Roll Up / Expand")      opens and closes a box (the CVE page's fix boxes say "Show Fixes / Hide")
     tiny chip (.chip)                     a status, not an action (a.chip when the status links to its details)
     text link                             a reference inside a sentence, or "← Back"
   The mouse pointer: the hand only where clicking does something (links, buttons, roll-ups); anything that just explains
   itself on hover (a title, like CVSS or Likelihood) gets the arrow with a "?" (Steve, 2026-10-31: "I like the point w ?") */
:root {
	--bg: #000;
	--panel: #121212;
	--panel-2: #1a1a1a;
	--line: #2a2a2a;
	--line-2: #3d3d3d;
	--red: #990000;
	--red-hot: #d11a1a;
	--text: #e6e6e6;
	--muted: #9a9a9a;
	--crit: #ff3b3b;
	--imp: #ff9f1a;
	--mod: #e3c440;
	--low: #6fb3ff;
	color-scheme: dark;
}
* { box-sizing: border-box; }
/* hover-to-explain: an element with a tooltip that isn't itself clickable shows the "?" pointer (even inside a clickable
   card header); links, buttons and form controls keep their own */
[title]:not(a):not(button):not(summary):not(input):not(select):not(textarea):not(label):not(form):not(nav):not(details):not(iframe):not(video) { cursor: help; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
/* every page at least as tall as the window, the main part taking the room, so on a short page the footer sits at the
   bottom of the window (on a long one it simply follows the content). main.wrap keeps its own width and centring. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main.wrap { flex: 1 0 auto; width: 100%; }
body > .foot { flex-shrink: 0; }
a { color: #ff7070; }
a:hover { color: #ffaaaa; }
h1, h2 { margin: 0; line-height: 1.2; }

/* The header: the logo with the section tabs on its bottom line; it stays at the top while the page scrolls (solid, so
   the pill collage never shows behind it) */
.top { position: sticky; top: 0; z-index: 50; display: flex; align-items: flex-end; gap: 28px; padding: 10px 20px 0;
	border-bottom: 1px solid var(--line-2); background: #0a0a0a; }
.brand { flex: none; display: flex; align-items: center; padding-bottom: 10px; text-decoration: none; color: var(--text); }
.brand img { height: 40px; width: 40px; display: block; }   /* the site icon (192px file, sharp on high-res screens) */
/* signed out: the full Mass Insanity Productions logo, centred in the header (393x192 file, shown at 80px tall) */
.top.signedout { justify-content: center; align-items: center; padding: 12px 20px; }
.brand.full { padding-bottom: 0; }
/* signed in: the MI (images/mi-mark.svg, a vector of the logo) inside a shield, in one of three styles (BRAND_SHIELD in
   page.php); the same 50px as the plain icon took, so the tabs stay put */
.brand:has(.shield) { padding-bottom: 3px; }
.brand .shield { position: relative; display: block; width: 42px; height: 47px; }
.brand .shield svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand .shield path { stroke-linejoin: round; }
.brand .shield.grey path { fill: #2a2b30; stroke: #8c8c8c; stroke-width: 1.4; }
.brand .shield.navy path { fill: #10203d; stroke: #3d9bff; stroke-width: 1.4; }
.brand .shield.blue path { fill: none; stroke: #3d9bff; stroke-width: 2.2; }
.brand .shield.blue svg { filter: drop-shadow(0 0 4px rgba(61, 155, 255, .55)); }
/* 'cycle': the fill drifts very slowly from deep blue to black to deep red to black and round again (dark shades, so the
   red MI always stands out); still for Calm mode and for anyone whose device asks for less motion */
@keyframes shieldcycle { 0%, 100% { fill: #14306a; } 25% { fill: #0b0b0c; } 50% { fill: #5a0c12; } 75% { fill: #0b0b0c; } }
.brand .shield.cycle path { fill: #14306a; stroke: #8c8c8c; stroke-width: 1.4; animation: shieldcycle 40s ease-in-out infinite; }
body.calm .brand .shield.cycle path { animation: none; }
/* the shield as a status light (shield_alert, page.php): amber when something needs a look, red when a site is down;
   either way the cycle stops, so the colour reads as a signal (the red MI stays visible on both) */
.brand .shield.alert-warn path { animation: none; fill: #4d3800; stroke: #ffcf5a; stroke-width: 1.8; }
.brand .shield.alert-bad path { animation: none; fill: #3d0508; stroke: var(--red-hot); stroke-width: 2; }
.brand .shield.alert-warn svg { filter: drop-shadow(0 0 4px rgba(255, 207, 90, .5)); }
.brand .shield.alert-bad svg { filter: drop-shadow(0 0 5px rgba(255, 60, 60, .6)); }
@media (prefers-reduced-motion: reduce) { .brand .shield.cycle path { animation: none; } }
.brand .shield img { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: auto; height: 27px; }
/* the product's name beside it, on two lines (PATCH / SANITY in red), where the left margin has room for it: wide screens
   and phones (in between it would push the tabs off the content's left edge, so it's left out) */
.brand .wordmark { display: none; margin-left: 9px; font-size: 12px; font-weight: 800; letter-spacing: .14em; line-height: 1.15; text-transform: uppercase; color: #fff; }
.brand .wordmark b { display: block; color: var(--red-hot); font-weight: 800; }
@media (min-width: 1480px), (max-width: 760px) {
	.brand .wordmark { display: block; }
}
.brand.full img { height: 80px; width: auto; }
/* signed in: logo | the main tabs, centred in the room between | Data Sources, Settings, the team, the person on the right.
   Each side takes only the room it needs; when the main tabs don't fit between them they scroll sideways (no overlap) */
/* (2026-10-28) The middle column is the content's own: 1200px, centred exactly like .wrap (1240px less its 20px sides),
   so the main tabs start right at the content's left edge. The logo sits in the left margin (at least 76px of it);
   the right-hand tabs (or the menu tab) end 20px from the window's edge, over the content column's right end. */
.top:not(.signedout) { display: grid; grid-template-columns: minmax(76px, 1fr) minmax(0, 1200px) minmax(0, 1fr); column-gap: 0; padding-left: 0; padding-right: 0; }
.top:not(.signedout) .brand { grid-column: 1; grid-row: 1; justify-self: start; margin-left: 20px; }
.top:not(.signedout) .sitetabs.main { grid-column: 2; grid-row: 1; justify-self: start; max-width: 100%; }
.top:not(.signedout) .sitetabs.tabsright, .top:not(.signedout) .usermenu { grid-column: 2 / 4; grid-row: 1; justify-self: end; margin-right: 20px; }
.sitetabs.main { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
/* (2026-10-28) The tenant and the person as icon tabs (a building, initials in a circle), and on wide screens, where those
   two fit in the right margin, Early Alert and Reports end on the content's right edge */
.top .sitetabs a.icontab { padding-left: 12px; padding-right: 12px; justify-content: center; }
.top .tabicon { width: 22px; height: 22px; fill: currentColor; display: block; }
.top .initials { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; font-weight: 800;
	letter-spacing: .04em; color: #fff; background: #2a2a2a; border: 1px solid #4a4a4a; }
.top .icontab.on .initials { background: var(--red); border-color: var(--red-hot); }
.usermenu .menuicons { display: flex; align-items: center; gap: 8px; }   /* the menu tab: the same two icons over "Menu ▾" */
.usermenu .menuicons .initials { width: 24px; height: 24px; font-size: 11px; }
.usermenu .menuicons .tabicon { width: 20px; height: 20px; }
.top .icontab:hover .initials { border-color: #fff; }
@media (min-width: 1500px) {
	.top:not(.signedout) .sitetabs.main { justify-self: stretch; }
	.top:not(.signedout) .sitetabs a.apart { margin-left: auto; }
	.top:not(.signedout) .sitetabs.tabsright { grid-column: 3; }
}
.sitetabs.main::-webkit-scrollbar { display: none; }
.sitetabs.main { padding-bottom: 1px; margin-bottom: -1px; }   /* room for the open tab to cover the header's bottom line (scrolling clips the rest) */
/* The menu tab (page.php): on smaller screens the right-hand tabs fold into it, "<team> · <first name>" over "Menu ▾",
   with Team, Your account, Settings, Data Sources and Sign Out in its drop-down. Hidden on wide screens. */
.usermenu { display: none; position: relative; justify-self: end; align-self: end; }
.usermenu > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.15;
	padding: 6px 14px; font-size: 14px; font-weight: 600; color: #8a8a8a; border: 1px solid transparent; border-bottom: 0;
	border-radius: 8px 8px 0 0; background: #0d0d0d; border-color: #222; max-width: 230px; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary .tname { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu > summary .step { display: block; margin-top: 3px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6e6e6e; }
.usermenu > summary:hover, .usermenu[open] > summary { color: #fff; background: #111; border-color: #333; }
.usermenu > summary.on { color: #fff; background: var(--panel); border-color: var(--line-2); }
.usermenu > summary.on .step { color: #ff5a5a; }
.usermenu-list { position: absolute; right: 0; top: calc(100% + 1px); z-index: 70; min-width: 210px; display: flex; flex-direction: column;
	background: var(--panel); border: 1px solid var(--line-2); border-radius: 0 0 8px 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .7); padding: 6px; }
.usermenu-list a, .usermenu-list button { display: block; text-align: left; padding: 9px 12px; border-radius: 6px; color: var(--text); text-decoration: none;
	font: inherit; font-size: 14px; background: none; border: 0; width: 100%; cursor: pointer; }
.usermenu-list a:hover, .usermenu-list button:hover { background: #1c1c1c; color: #fff; }
.usermenu-list a.on { color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--red-hot); }
.usermenu-list form { margin: 4px 0 0; border-top: 1px solid var(--line); padding-top: 4px; }
/* phones: the bottom bar (Intel, Early Alert, Reports) and the parts that need a computer (desktop_only() in page.php) */
.bottombar, .phonenote { display: none; }
@media (max-width: 1300px) and (min-width: 761px) {
	.sitetabs.tabsright { display: none; }
	.usermenu { display: block; }
}
@media (max-width: 760px) {
	.top .sitetabs.main, .top .sitetabs.tabsright { display: none; }
	.usermenu { display: block; margin-left: auto; align-self: center; }
	.usermenu > summary { border-radius: 8px; border-bottom: 1px solid #222; }
	.usermenu-list { top: calc(100% + 6px); border-radius: 8px; }
	.bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #0a0a0a; border-top: 1px solid var(--line-2);
		padding-bottom: env(safe-area-inset-bottom); }
	.bottombar a { flex: 1; text-align: center; padding: 13px 4px; font-size: 13px; font-weight: 700; color: #8a8a8a; text-decoration: none; white-space: nowrap; }   /* (four across) */
	.bottombar a.on { color: #fff; box-shadow: inset 0 3px 0 var(--red-hot); }
	body:has(.bottombar) { padding-bottom: 56px; }
	.desktoponly { display: none !important; }
	.phonenote { display: block; margin: 12px 0; padding: 14px 16px; background: var(--panel); border: 1px dashed var(--line-2); border-radius: 10px; color: var(--muted); font-size: 14px; }
	.phonenote b { color: #fff; }
}
/* laptop widths: the tabs a little narrower, so all of them still fit (below this, the main ones scroll sideways) */
@media (max-width: 1440px) and (min-width: 761px) {   /* (.top: these come before the tabs' own rules further down, so they need it to win) */
	.top .sitetabs a { padding-left: 11px; padding-right: 11px; }
	.top .sitetabs a.apart { margin-left: 30px; }
}
.sitetabs a.apart { margin-left: 48px; }   /* Early Alert (and Reports after it): set well apart from the three I tabs */
/* small laptops and tablets: tighter still, so all five main tabs fit ("Intelligence" and "Installation" are long) */
@media (max-width: 960px) and (min-width: 761px) {
	.top .sitetabs { gap: 2px; }
	.top .sitetabs a { padding-left: 7px; padding-right: 7px; font-size: 13px; }
	.top .sitetabs a .step { font-size: 9px; letter-spacing: .08em; }
	.top .sitetabs a.apart { margin-left: 12px; }
	.top:not(.signedout) { grid-template-columns: minmax(64px, 1fr) minmax(0, 1200px) minmax(0, 1fr); }
	.top:not(.signedout) .brand { margin-left: 14px; }
	.top:not(.signedout) .usermenu { margin-right: 10px; }
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* for screen readers only */
html { scroll-padding-top: 80px; }   /* a #link (a CVE's fix box) lands below the sticky header, not under it */
.wrap { max-width: 1240px; margin: 0 auto; padding: 18px 20px 30px; }
.foot { border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 12px; padding: 10px 20px 12px; }
.foot p { margin: 4px 0; }
.foot a { color: var(--muted); }
.foot .donate { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; margin: 12px 0; }
.foot .donatebtn { font-size: 14px; font-weight: 700; color: #fff; background: var(--red); border: 1px solid var(--red-hot); border-radius: 999px; padding: 7px 18px; text-decoration: none; }
.foot .donatebtn:hover { background: var(--red-hot); color: #fff; }

/* OS tabs */
/* a card like the filters: the OS buttons, then a divider and the All / Apply / Group row */
.families { margin-bottom: 14px; padding: 14px; background: var(--panel); border: 2px solid var(--line); border-radius: 10px; }
.famlabel { margin: 0 0 10px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.famlist { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.families a { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px; background: #000; }
.families a.on { background: var(--red); border-color: var(--red-hot); color: #fff; font-weight: 600; }
.famactions { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.groupform { display: inline; margin: 0 0 0 auto; }   /* pushed right, next to Reverse filter */
.famactions .rowbreak { flex-basis: 100%; height: 0; }   /* Apply starts the second line */
.famapply { font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--red); border: 1px solid var(--red-hot);
	border-radius: 999px; padding: 6px 18px; cursor: pointer; }
.famapply:hover:not(:disabled) { background: var(--red-hot); }
/* Category buttons (All operating systems / apps / network & security / hardware & firmware), next to All */
.families a.catbtn { font-size: 13px; color: var(--text); background: #000; border: 1px solid var(--line-2); }
.families a.catbtn:hover { border-color: var(--muted); color: #fff; }
.families a.catbtn.on { background: #e6e6e6; border-color: #fff; color: #000; font-weight: 700; }
.famactions { flex-wrap: wrap; }
/* Reverse filter: far right of the row; when on, the picked buttons are crossed out (they're being left out) */
.families a.invbtn { font-size: 13px; color: var(--muted); background: transparent; border: 1px dashed var(--line-2); }
.families a.invbtn:hover { color: #fff; border-color: var(--muted); }
/* on: blinks (black / dark grey, border white / grey) so it's obvious the list is reversed; still for reduced motion */
.families a.invbtn.on { color: #fff; border: 2px solid #fff; background: #000; font-weight: 700; animation: invblink 1.1s steps(1, end) infinite; }
@keyframes invblink { 0% { background: #000; border-color: #fff; } 50% { background: #3a3a3a; border-color: #777; } }
@media (prefers-reduced-motion: reduce) { .families a.invbtn.on { animation: none; } }
.families a.excluded { text-decoration: line-through; text-decoration-thickness: 2px; }
.families a.excluded::before { content: "\2715"; margin-right: 6px; font-weight: 700; }
/* ready to apply: one soft pulse on each change, then a gentle slow glow until it's clicked */
.famapply:not(:disabled) { animation: applyglow 2.4s ease-in-out infinite; }
/* every pick swells Apply three times, so people know to click it (Steve, 2026-10-29) */
.famapply.flash:not(:disabled) { animation: applyflash .6s ease-in-out 3, applyglow 2.4s ease-in-out 1.8s infinite; }
@keyframes applyflash {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.18); background: var(--red-hot); box-shadow: 0 0 14px 2px rgba(255, 80, 80, .65); }
}
@keyframes applyglow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
	50% { box-shadow: 0 0 8px 1px rgba(255, 59, 59, .4); }
}
@media (prefers-reduced-motion: reduce) { .famapply:not(:disabled), .famapply.flash:not(:disabled) { animation: none; box-shadow: 0 0 10px 2px rgba(255, 59, 59, .6); } }
/* nothing to apply yet: greyed out */
.famapply:disabled { color: var(--muted); background: transparent; border-color: var(--line-2); cursor: default; }
/* without JavaScript the OS buttons load at once, so there's nothing for Apply to do */
html:not(.js) .famapply { display: none; }
/* phone drop-down for the OS buttons (hidden on wider screens) */
/* The buttons card rolls up: its summary line shows what's picked and a Roll up / Expand pill */
/* the card's padding moves to its parts: the rolled-up buttons (.famroll) and the always-visible row (.famactions) */
.families.famcard { padding: 0; }
.famroll > .famsum { list-style: none; display: flex; align-items: center; gap: 6px; padding: 10px 14px; cursor: pointer; font-size: 14px; }
.famroll > .famsum::-webkit-details-marker { display: none; }
.famsum b { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.famsum .muted { flex: none; font-size: 13px; }
.famsum .caret { margin-left: auto; flex: none; }
.famsum .famtotal { flex: none; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line-2); font-size: 12px; color: var(--muted); }   /* "360 products covered" */
@media (max-width: 760px) { .famsum .famtotal { display: none; } }
.famsum .caret::after { content: "Show Buttons \25BE"; font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 9px; }
.famroll[open] .famsum .caret::after { content: "Hide \25B4"; }
.famsum:hover .caret::after { color: #fff; border-color: var(--muted); }
.famroll .famlabel, .famroll .famlist { padding: 0 14px; }
/* (on the scroll box, not the last section: a category can hide the sections after the last one showing) */
.famroll[open] .famscroll { padding-bottom: 14px; }
/* the sections scroll inside the card past about half the screen (Steve, 2026-10-29: "a lot of products"), with a thin
   scrollbar in the site's colours; the note above them stays put */
.famscroll { max-height: clamp(260px, 52vh, 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.famscroll::-webkit-scrollbar { width: 8px; }
.famscroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.famscroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* with the product buttons open, a double line sets them off from All, the categories and Apply below, with more room
   above those */
.famcard .famroll[open] ~ .famactions { border-top: 5px double var(--line-2); padding-top: 18px; }
/* the buttons in sections (index.php, button_section): a small heading over each, a thin line between them */
.famsec + .famsec { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
/* a category pill on: only its buttons show (app.js hides the rest, and sections left empty) */
.families a[data-os][hidden], .famsec[hidden] { display: none; }
.famsech { margin: 0 0 7px; padding: 0 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.famsech span { font-weight: 600; opacity: .7; }
.famcard .famactions { margin-top: 0; padding: 12px 14px; border-top: 1px solid var(--line); }
/* Site sections (Intel, Early Alert, Inventory, ...): in the header, sitting on its bottom line */
/* the tagline's step at the top of a section's page: "Find it (Intel)" */
.tabtag { margin: 2px 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #fff; }
.tabtag span { color: var(--muted); font-weight: 600; }
.sitetabs { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 4px; }
/* every tab looks like a tab: the others very dark, the current one lit and joined to the page below */
.sitetabs a { position: relative; padding: 9px 18px; font-size: 14px; font-weight: 600; color: #8a8a8a; text-decoration: none;
	background: #0b0b0b; border: 1px solid #222; border-bottom: 0; border-radius: 8px 8px 0 0; }
.sitetabs a:hover { color: #fff; background: #111; border-color: #333; }
/* the closed tabs sit on the line (it runs along their bottom); the open one covers it, so it joins the page below */
.sitetabs a.on { color: #fff; background: var(--panel); border-color: var(--line-2); border-bottom: 1px solid var(--panel); margin-bottom: -1px; }
.sitetabs a.right { margin-left: auto; }
.sitetabs a { white-space: nowrap; flex: none; }
/* the tagline step under a tab's name ("Find it"), red on the open tab; every tab is the same height, so the row lines up */
.sitetabs { align-items: stretch; }
.sitetabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; padding-top: 6px; padding-bottom: 6px; }
.sitetabs a .step { display: block; margin-top: 3px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6e6e6e; }
.sitetabs a:hover .step { color: #9e9e9e; }
.sitetabs a.on .step { color: #ff5a5a; }
/* sign-in page background: the OS / brand pills scattered behind everything, dimmed (decoration only, no links) */
.collage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: .32; }
.collage.faint { opacity: .045; }   /* behind the main page: just a texture in the gaps */
.foot { position: relative; background: var(--bg); }   /* keeps the footer readable over the sign-in collage */
/* ...and on a short page, the window below the footer is the same solid colour, not the pill collage: a shadow as tall as
   the window, starting at the footer's top edge, paints it (the collage sits behind everything, z-index -1) */
.foot { box-shadow: 0 100vh 0 100vh var(--bg); }
.cpill { position: absolute; display: inline-flex; align-items: center; white-space: nowrap; font-size: 15px; color: var(--text);
	background: #000; border: 1px solid color-mix(in srgb, var(--c) 55%, #000); border-radius: 999px; padding: 6px 14px; }
.cpill .osi { background: var(--c); }
.cpill.filled { background: var(--c); color: var(--on); font-weight: 600; border-color: color-mix(in srgb, var(--c) 65%, #fff); }
.cpill.filled .osi { background: currentColor; }
/* sign-in and settings */
.loginbox { position: relative; width: 100%; max-width: 420px; margin: 24px auto; box-shadow: 0 10px 40px rgba(0, 0, 0, .8); }
/* the sign-in page fills the screen: header at the top, footer at the bottom, the sign-in box centred between them */
/* (the operator's sign-in, .oplogin, the same way) */
body:has(.loginbox), body:has(.oplogin) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main.wrap:has(.loginbox), main.wrap:has(.oplogin) { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; }
body:has(.loginbox) .foot, body:has(.oplogin) .foot { background: var(--bg); }   /* solid: no pills showing through behind the footer */
main.wrap > .oplogin { width: 100%; margin: 24px auto; }
/* sign-in page: the name and the tagline above the box */
/* both cards as wide as the wider one (the tagline card): the stack shrinks to fit it and they stretch to fill */
.loginstack { width: fit-content; max-width: 100%; display: grid; justify-items: stretch; }
.loginstack .loginbox { max-width: none; box-sizing: border-box; }
/* everything in the sign-in card centred: the heading, the note, the password box, the checkbox and the two buttons */
.loginstack .loginbox { text-align: center; }
.loginstack .loginbox form { justify-items: center; }
.loginstack .loginbox label { justify-items: center; margin: 0 auto; }
.loginstack .loginbox label.check { justify-content: center; }
.loginstack .loginbox input:is([type=password], [type=email], [type=text]):not(.otpbox) { width: 100%; box-sizing: border-box; text-align: center; }
/* Platform admin (/operator/): its own red-badged bar, so it's never mistaken for the customer site */
.opbar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: #0a0a0a; border-bottom: 2px solid #5a0d10; }
.opbar .brand { padding: 0; }
.opbar .brand img { width: 34px; height: 34px; }
/* the shield logo (brand_mark), a little smaller in the platform admin's bar */
.opbar .brand .shield { width: 34px; height: 38px; }
.opbar .brand .shield img { width: auto; height: 22px; }
.opbadge { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--red); padding: 3px 9px; border-radius: 4px; }
.opwho { margin-left: auto; font-size: 13px; }
.opbar form { margin: 0; }
.opout, .smallbtn { font: inherit; font-size: 12px; color: var(--text); background: transparent; border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 12px; cursor: pointer; }
.opout:hover, .smallbtn:hover { border-color: #fff; color: #fff; }
.opcard { max-width: 560px; margin: 30px auto; }
.opcard h1 { font-size: 24px; margin: 0 0 8px; }
/* the operator sign-in: a red card under a striped warning band, so it can't be taken for the customers' sign-in */
.oplogin { border-color: var(--red-hot); box-shadow: 0 0 0 1px #5a0d10, 0 0 28px rgba(214, 26, 32, .25); }
.opwarn { margin: -16px -16px 14px; padding: 8px 16px; border-radius: 8px 8px 0 0; text-align: center; font-size: 13px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px #000;
	background: repeating-linear-gradient(-45deg, #8f1218 0 14px, #2a0507 14px 28px); }
.qrbox { width: 220px; height: 220px; margin: 14px 0; background: #fff; border-radius: 8px; }
.qrbox svg { display: block; width: 100%; height: 100%; }
/* the 6-digit code as six boxes, 3 – 3 (app.js) */
.otp { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.otpbox { width: 46px; height: 56px; box-sizing: border-box; text-align: center; font: 700 26px/1 ui-monospace, Consolas, monospace;
	color: #fff; background: #000; border: 2px solid var(--line-2); border-radius: 8px; padding: 0; caret-color: var(--red); }
.otpbox:focus { outline: none; border-color: var(--red-hot); box-shadow: 0 0 0 3px rgba(214, 26, 32, .35); }
.otpdash { font-size: 26px; font-weight: 700; color: var(--muted); padding: 0 2px; }
.mfakey { font-size: 14px; letter-spacing: .08em; user-select: all; }
.rcodes { columns: 2; margin: 12px 0 18px; padding-left: 22px; font-size: 16px; }
.rcodes li { margin: 4px 0; }
.opinline { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 12px; }
.opinline label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.opinline input { font: inherit; color: var(--text); background: #000; border: 1px solid var(--line-2); border-radius: 7px; padding: 7px 10px; min-width: 260px; }
.opinline button { font: inherit; font-weight: 700; color: #fff; background: var(--red); border: 1px solid var(--red-hot); border-radius: 7px; padding: 8px 18px; cursor: pointer; }
form.inline { display: inline; margin: 0; }
.st-ok { color: #8fe0a4; font-weight: 700; }
/* accounts: the NDA, the support-view banner, disabled settings for people who can't change them */
.ndabox { max-width: 860px; margin: 20px auto; }
.ndabox h1 { font-size: 20px; margin: 4px 0 8px; }
.ndatext { max-height: 46vh; overflow-y: auto; padding: 14px 18px; background: #0b0b0b; border: 1px solid var(--line-2); border-radius: 8px; font-size: 14px; line-height: 1.55; }
.ndatext p { margin: 0 0 10px; }
.ndaform { margin-top: 14px; }
.ndaform label.check { display: flex; align-items: flex-start; gap: 8px; max-width: none; color: var(--text); font-size: 14px; }
.supportbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 8px 16px; font-size: 14px;
	color: #000; background: #ffd21f; border-bottom: 2px solid #b38f00; position: sticky; top: 0; z-index: 60; }
.supportbar .smallbtn { color: #000; border-color: #000; }
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.plain[disabled] { opacity: .55; }
.legal, .legal .big.desc { max-width: none; }   /* terms, privacy and About: the full page width like every other page (2026-10-28) */
/* Settings: release notes, the current version lit */
.releases tr.current td { background: rgba(214, 26, 32, .08); }
.releases td { vertical-align: top; }
.relnow { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--red); padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
/* the version, small, just outside the sign-in card's bottom right corner */
.loginstack .versiontag { justify-self: end; margin: -22px 4px 0;   /* up into the card's bottom margin, a couple of px under its border */ font-size: 11px; letter-spacing: .06em; color: #8a8a8a;
	background: rgba(0, 0, 0, .85); padding: 1px 7px; border-radius: 4px; }
/* Sign In and Watch the Video, side by side, the same red button */
.loginrow { display: flex; justify-content: center; align-items: center; gap: 14px; width: 100%; }
.videobtn { font: inherit; font-weight: 700; color: #fff; background: var(--red); border: 1px solid var(--red-hot); border-radius: 7px; padding: 8px 18px; text-decoration: none; white-space: nowrap; }
.videobtn:hover { background: var(--red-hot); color: #fff; }
/* Page not found (404.php): the sign-in card's look, a big faint 404 above the heading, and a quiet second button */
.notfound h1 { margin-bottom: 8px; }
.notfound .nfcode { margin: 0; font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: .04em; color: var(--red-hot); }
.notfound code { word-break: break-all; }
.notfound .loginrow { margin-top: 16px; }
.ghostbtn { font: inherit; font-weight: 700; color: var(--text); background: transparent; border: 1px solid var(--line-2); border-radius: 7px; padding: 8px 18px; text-decoration: none; white-space: nowrap; }
.ghostbtn:hover { border-color: #fff; color: #fff; }
/* the demo video player over the page */
.tourbox { padding: 0; border: 2px solid var(--line-2); border-radius: 12px; background: #000; width: min(1100px, 94vw); overflow: visible; }
.tourbox::backdrop { background: rgba(0, 0, 0, .82); }
.tourbox video { display: block; width: 100%; height: auto; border-radius: 10px; }
.tourclose { position: absolute; top: -16px; right: -16px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff;
	background: var(--red); color: #fff; font: 700 22px/1 system-ui, sans-serif; cursor: pointer; }
.tourclose:hover { background: var(--red-hot); }
.pitch { text-align: center; margin-top: 20px; padding: 14px 22px; background: #000; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .8); }
.pitchlogo { display: block; height: 150px; width: auto; margin: 0 auto 4px; }   /* the sign-in page has no header: the logo heads this card */
.pitch .wordmark { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: .01em; color: #fff; line-height: 1.1; }
.tagline { margin: 8px 0 0; font-size: 15px; text-transform: uppercase; letter-spacing: .12em; color: #fff; }
.tagline b { font-weight: 800; }
.tagline span { color: var(--muted); font-weight: 600; letter-spacing: .05em; }
.tagline i { font-style: normal; }
/* phones: one step a line, and nothing wider than the screen (at 360px the stack was 7px too wide, so the page slid
   sideways: Steve's Galaxy XCover 6, 2026-10-30) */
@media (max-width: 760px) {
	.tagline .tstep { display: block; }
	.tagline .tsep { display: none; }
	.pitch { padding: 14px 12px; }
	.pitch .wordmark { font-size: 34px; }
	.loginstack { width: 100%; }
	.loginrow { flex-wrap: wrap; gap: 10px; }
}
.pitchsub { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.pitchsub b { color: #5fd4ff; }   /* Early Alert's dashed-cyan colour */
/* "Early Alert" (Early Siren until 2026-10-30) flashes like an emergency light: red, dark, blue, dark */
.alertflash { animation: alertFlash 1.6s steps(1, end) infinite; }
@keyframes alertFlash {
	0% { color: #ff4d4d; text-shadow: 0 0 6px rgba(255, 59, 59, .9), 0 0 14px rgba(255, 59, 59, .6); }
	35% { color: #000; text-shadow: none; }   /* red and blue about 0.56 s each, the dark gaps about 0.24 s */
	50% { color: #5fb4ff; text-shadow: 0 0 6px rgba(59, 139, 255, .9), 0 0 14px rgba(59, 139, 255, .6); }
	85% { color: #000; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .alertflash { animation: none; } }
.loginstack .loginbox { margin-top: 16px; }
/* footer: the name and the three steps, on every page */
.foot .footbrand { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin: 0 0 6px; font-size: 13px; color: var(--text); letter-spacing: .03em; }
.foot .footbrand b { color: #fff; }
.foot .footbrand .donatebtn { font-size: 12px; padding: 3px 12px; }
.foot .footsmall { font-size: 11px; line-height: 1.45; margin: 2px auto; max-width: 1180px; }
.foot .footsmall.disclaim { max-width: 1180px; }
/* CVE page: what comes after knowing (Inventory and Install, both coming) */
.nextsteps { border-style: dashed; }
.nextsteps ul { margin: 6px 0 0; padding-left: 20px; }
.nextsteps li { margin: 4px 0; }
.nextsteps .soon { margin-left: 6px; }
.loginbox form, .setform { display: grid; gap: 12px; justify-items: start; margin-top: 10px; }
.setform fieldset.plain { display: grid; gap: 12px; justify-items: start; }   /* the same spacing inside the fieldset (switched off for those who can't change it) */
/* the Team tab's settings: short name and report cards side by side, the colours under them */
.sevform .subhead { margin-top: 0; }
.loginbox label, .setform label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); width: 100%; max-width: 360px; }
.loginbox label.check { display: flex; align-items: center; gap: 8px; color: var(--text); }
.loginbox input:is([type=password], [type=email], [type=text]):not(.otpbox), .setform input:is([type=password], [type=email], [type=text]):not(.otpbox),
.setform select, .opinline select, form.inline select { font: inherit; color: var(--text); background: #000; border: 1px solid var(--line-2); border-radius: 7px; padding: 8px 10px; }
.loginbox button, .setform button, .setrow button { font: inherit; font-weight: 700; color: #fff; background: var(--red); border: 1px solid var(--red-hot); border-radius: 7px; padding: 8px 18px; cursor: pointer; }
.setrow { display: flex; flex-wrap: wrap; gap: 10px; }
.setpair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }   /* Change password | Reset all */
.setpair > .box { margin: 0; }
.setpair + .box, .box + .setpair, .setpair + .setpair { margin-top: 16px; }   /* cards and pairs of cards, one gap between each */
.resetall p { margin: 0 0 14px; }
/* an on/off slider: the real checkbox is hidden, the track and knob show its state (Settings) */
.toggleset { display: grid; gap: 4px; }
.box .toggleset p { margin: 0 0 0 54px; }   /* the note lines up under the label text */
.setform label.toggle { display: flex; align-items: center; gap: 12px; max-width: none; font-size: 14px; color: var(--text); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .track { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: #2a2a2a; border: 1px solid var(--line-2); transition: background .15s; }
.toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #9e9e9e; transition: transform .15s, background .15s; }
.toggle input:checked + .track { background: var(--red); border-color: var(--red-hot); }
.toggle input:checked + .track::after { transform: translateX(18px); background: #fff; }
.toggle input:focus-visible + .track { outline: 2px solid #fff; outline-offset: 2px; }
.setsplit { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .setpair { grid-template-columns: 1fr; } }
/* Settings: a colour picker under each severity badge */
.sevpicks { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 16px; }
.sevpick { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 96px; padding: 12px 10px; background: #0b0b0b; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; }
.sevpick input[type=color] { width: 56px; height: 32px; padding: 2px; background: #000; border: 1px solid var(--line-2); border-radius: 6px; cursor: pointer; }
/* Status page */
.healthnow { font-size: 17px; font-weight: 700; margin: 4px 0 12px; }
.healthnow.good { color: #8fe0a4; }
.healthnow.bad { color: #ffd21f; }
.subhead { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 6px; }
.healthlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.healthlist li { padding: 5px 9px; border-radius: 5px; background: #0b0b0b; border-left: 3px solid var(--line-2); overflow-wrap: anywhere; }
.healthlist li.ok { border-left-color: #2e8a4a; }
.healthlist li.warn { border-left-color: #c99a0e; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
/* each Status section rolls up: the title is the summary, with a Roll up / Expand pill on the right */
details.statroll > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
details.statroll > summary::-webkit-details-marker { display: none; }
details.statroll > summary h2 { margin: 0; }
details.statroll > summary h2 .small { font-weight: 400; }
details.statroll > summary::after { content: "Roll Up \25B4"; flex: none; font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 10px; }
details.statroll:not([open]) > summary::after { content: "Expand \25BE"; }
details.statroll > summary:hover::after { color: #fff; border-color: var(--muted); }
details.statroll[open] > summary { margin-bottom: 10px; }
.healthlist li b { color: #fff; font-weight: 600; }
.statall { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.statall[hidden] { display: none; }
.statall button { font: inherit; font-size: 12px; color: var(--muted); background: transparent; border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.statall button:hover { color: #fff; border-color: var(--muted); }
.latetag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #000; background: #ffd21f; border-radius: 4px; padding: 1px 6px; vertical-align: 2px; }
tr.late td { background: rgba(255, 210, 31, .06); }
.upstream { display: block; font-size: 11px; color: #c99a0e; margin-top: 2px; }   /* the middleman's own delay, under the source */
td.nowrap { white-space: nowrap; }
.statcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 18px; }
.setrow button.ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.loginerr { color: #fff; background: rgba(214, 26, 32, .18); border: 1px solid rgba(214, 26, 32, .6); border-radius: 7px; padding: 8px 12px; }
.okmsg { color: #fff; background: rgba(46, 138, 74, .18); border: 1px solid rgba(46, 138, 74, .6); border-radius: 7px; padding: 8px 12px; }
.soon { margin-left: 7px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
	border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; vertical-align: 1px; }
.soonbox h1 { font-size: 26px; margin-bottom: 8px; }
.soonbox ul { margin: 6px 0 14px; padding-left: 20px; }
.soonbox li { margin: 5px 0; }
/* Reports (reports.php): heading + month picker, two side-by-side bar tables, then the tables */
.report h1 { font-size: 24px; color: #fff; margin: 2px 0 4px; }
.report h2 { margin-top: 22px; }
/* a report's heading: title and description on the left; picker and Save as PDF always in the top right corner */
.reporthead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 20px; }
.reporthead .reportpick { justify-content: flex-end; }
.reporthead .reportpick [data-print] { order: 99; }   /* the button last, so it's the one in the corner */
/* Save as PDF: the same pill as Intel's "Related Items Grouped" button */
.reportpick button[data-print] { font: inherit; font-size: 13px; color: #fff; background: #1a1414; border: 1px solid var(--muted); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.reportpick button[data-print]:hover { border-color: #fff; }
.reportpick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.reportpick button.ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.reportcols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
table.bars td { border: 0; padding: 4px 8px; }
table.bars td.lbl { width: 1%; white-space: nowrap; }
.hbar { display: block; height: 10px; background: #222; border-radius: 5px; overflow: hidden; min-width: 80px; }
.hbar > span { display: block; height: 100%; background: var(--sevc, #9e9e9e); border-radius: 5px; }
.hotnum, .facts b.hotnum { color: #ff5a5f; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.reportfoot { margin-top: 18px; }
/* Reports: the report's place while it loads (reports.php draws the page first, app.js fetches the report into it) */
.reportwait { min-height: 260px; }
.reportwait .loadbar { display: inline-block; vertical-align: middle; width: 90px; height: 4px; border-radius: 2px; margin-right: 8px;
	background: linear-gradient(90deg, transparent, var(--red-hot), transparent) var(--line-2); background-size: 50% 100%; background-repeat: no-repeat;
	animation: reportload 1.1s linear infinite; }
@keyframes reportload { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { .reportwait .loadbar { animation: none; background: var(--red-hot); } }
/* Reports: the menu of reports (a card each; the open one lit, the ones still to come dimmed) */
.reportmenu { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 4px 0 14px; }
.rcard { display: grid; gap: 3px; padding: 10px 12px; background: var(--panel); border: 2px solid var(--line); border-radius: 9px; text-decoration: none; color: var(--text); }
.rcard b { font-size: 14px; color: #fff; }
.rcard span { font-size: 12px; line-height: 1.35; color: var(--muted); }
a.rcard:hover { border-color: var(--line-2); background: #151515; }
.rcard.on { border-color: #ff5a5a; box-shadow: 0 0 0 1px #ff5a5a inset; }
.rcard.soonc { opacity: .45; }
/* the operator console's Platform pages, as the same cards; one that needs a look has a red edge and a red note */
.opcards { margin: 8px 0 2px; }
.rcard.flagged { border-color: color-mix(in srgb, var(--red-hot) 70%, transparent); }
.rcard .cardflag { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--red); border-radius: 4px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.rcard .soon { font-style: normal; }
/* operators' own reports (OPERATOR_REPORTS, reports.php): blue, the console's colour, last in the menu */
.rcard.opcard { background: rgba(61, 155, 255, .08); border-color: rgba(61, 155, 255, .45); }
.rcard.opcard:hover { border-color: #3d9bff; }
.rcard.opcard.on { border-color: #3d9bff; box-shadow: 0 0 0 1px #3d9bff inset; }
.rcard .opflag { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8cc4ff; border: 1px solid rgba(61, 155, 255, .55); border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }
.reportmenu.nodesc { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }   /* names only: smaller cards */
.reportmenu.nodesc .rcard { padding: 7px 10px; }
/* vertical bar chart (heights set by app.js from data-h) */
.vchart { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.vchart > span { flex: 1; min-width: 2px; background: #9e9e9e; border-radius: 2px 2px 0 0; }
.vchart > span:hover { background: #fff; }
.vaxis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 3px; }
@media print { .vchart > span { background: #555; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .reportmenu { display: none; } }
@media (max-width: 760px) { .reportcols { grid-template-columns: 1fr; } }
/* printing a report: just the report, dark text on white paper */
@media print {
	.top, .collage, .foot, .noprint, html.loading::before, html.loading::after { display: none !important; }
	html, body, main { background: #fff !important; color: #000 !important; }
	.report { border: 0; padding: 0; background: #fff; }
	.report h1, .report h2, .report b, .report a, .report td, .facts b { color: #000 !important; }
	.report .muted, .facts span { color: #555 !important; }
	.facts div { background: #fff; border-color: #bbb; }
	th { color: #444; border-bottom-color: #999; }
	td { border-bottom-color: #ddd; }
	.hbar { background: #eee; }
	.hbar > span { background: #555; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
	.sev, .flag, .epss { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
	.sev.s4 { border: 1px solid #000; }
	.flag > span { animation: none; }
	.report h2 { break-after: avoid; }
	tr { break-inside: avoid; }
}
.groupbtn { font: inherit; font-size: 13px; color: var(--muted); background: transparent; border: 1px dashed var(--line-2); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.groupbtn:hover { color: #fff; border-color: var(--muted); }
.groupbtn.on { color: #fff; border-style: solid; border-color: var(--muted); background: #1a1414; }
.families a span { font-size: 12px; opacity: .75; margin-left: 4px; }
.families .soon { color: var(--muted); font-size: 12px; margin-left: 6px; }

/* filters */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 14px; background: var(--panel); border: 2px solid var(--line); border-radius: 10px; }
.filters label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.filters label.grow { flex: 1 1 170px; }   /* the search box takes what's left (narrow enough that Show stays on the row) */
.filters label.check { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); padding-bottom: 8px; }
/* Loading indicator (app.js adds html.loading when a page change takes more than a moment): a bar sweeping across the
   top, a "Loading…" tag, the page dimmed and not clickable (so a second click can't stack another slow request) */
html.loading::before { content: ""; position: fixed; z-index: 1000; top: 0; left: 0; width: 35%; height: 3px;
	background: linear-gradient(90deg, transparent, #fff 50%, transparent); animation: loadsweep 1.1s ease-in-out infinite; }
html.loading::after { content: "Loading\2026"; position: fixed; z-index: 1000; top: 78px; left: 50%; transform: translateX(-50%);
	font: 600 13px/1 system-ui, sans-serif; color: #fff; background: #000; border: 1px solid var(--line-2); border-radius: 999px;
	padding: 7px 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .7); }
html.loading body { cursor: progress; }
html.loading main { opacity: .45; pointer-events: none; transition: opacity .2s; }
@keyframes loadsweep { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { html.loading::before { animation: none; width: 100%; opacity: .6; } }
/* Released: quick-range buttons (radios underneath) joined into one bar, and the month menu beside them */
.filters fieldset.released { border: 0; margin: 0; padding: 0; min-width: 0; }
.filters fieldset.released legend { padding: 0; margin-bottom: 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.segs { display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 6px; }
.filters .seg { display: block; flex: none; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 7px 11px; background: #000; border: 1px solid var(--line-2); margin-left: -1px; cursor: pointer; white-space: nowrap; }
.seg:first-child span { margin-left: 0; border-radius: 7px 0 0 7px; }
.seg:nth-last-child(2) span { border-radius: 0 7px 7px 0; }
.seg span:hover { color: #fff; border-color: var(--muted); position: relative; }
.seg input:checked + span { background: #fff; color: #000; border-color: #fff; font-weight: 600; position: relative; }
.seg input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.segs select { margin-left: 8px; }
.segs select.on { border-color: #fff; color: #fff; font-weight: 600; }
.filters select, .filters input[type=search] { font: inherit; font-size: 14px; color: var(--text); background: #000; border: 1px solid var(--line-2); border-radius: 7px; padding: 7px 9px; min-width: 0; text-transform: none; letter-spacing: 0; }
.filters input[type=search] { width: 100%; }
.filters input[type=checkbox] { accent-color: var(--red-hot); width: 16px; height: 16px; }
.filters button { font: inherit; font-weight: 700; color: #fff; background: var(--red); border: 1px solid var(--red-hot); border-radius: 7px; padding: 8px 18px; cursor: pointer; }
.filters button:hover { background: var(--red-hot); }
.filters .reset { padding-bottom: 8px; font-size: 14px; }
select:focus, input:focus, button:focus-visible { outline: 2px solid var(--red-hot); outline-offset: 1px; }

/* totals */
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 16px 0 6px; color: var(--muted); }
.strip b { color: #fff; font-size: 20px; margin-right: 4px; }
.strip .c4 b { color: var(--sevc); }
.strip .c4 { --sevc: #ffffff; }   /* the Critical colour (sevcolors.css overrides it when one is picked in Settings) */
.strip .cx b { color: var(--red-hot); }
.strip .cpx b { color: #ff9f40; }   /* the Public exploit badge's orange */
/* the exploited counts: links to just those CVEs, as round filter pills in their number's colour */
.strip .counts a { color: inherit; text-decoration: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 14px 2px 12px; }
.strip .counts a.cx:hover, .strip .counts a.cx.on { color: #fff; border-color: var(--red-hot); background: rgba(214, 26, 32, .12); }
.strip .counts a.cpx:hover, .strip .counts a.cpx.on { color: #fff; border-color: #ff9f40; background: rgba(255, 159, 64, .1); }
/* Early detection (sources/cveorg.php): its own colour, a dashed cyan outline, so it's never mistaken for reviewed data */
.earlyflag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #5fd4ff; border: 1px dashed #5fd4ff;
	background: rgba(95, 212, 255, .08); padding: 2px 7px; border-radius: 5px; cursor: help; }
.earlytag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #5fd4ff;
	border: 1px dashed #5fd4ff; border-radius: 4px; padding: 0 5px; margin-right: 4px; vertical-align: 1px; cursor: help; white-space: nowrap; }
.earlybox { border-color: #5fd4ff; border-style: dashed; }
.earlybox h2 { color: #5fd4ff; }
/* NVD-Reviewed Only / All / Early Only: on the left, the same size as the Sort buttons on the right; the counts between
   them, centred (.strip .counts) */
.earlyfilter { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.earlyfilter a { color: var(--muted); text-decoration: none; border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 9px; white-space: nowrap; }
.strip .counts { flex: 1 0 auto; display: flex; justify-content: center; align-items: center; gap: 8px 22px; }
.earlyfilter a:hover { color: #fff; border-color: var(--muted); }
.earlyfilter a.on { color: #fff; border-color: #fff; }
.earlyfilter a.eonly.on { color: #5fd4ff; border: 1px dashed #5fd4ff; background: rgba(95, 212, 255, .08); }
.earlyfilter a.pfilter { margin-left: 8px; border-radius: 999px; color: #ff9f40; border-color: rgba(255, 159, 64, .5); }   /* Public Exploit: Early Alert's pill */
.earlyfilter a.pfilter:hover { color: #fff; border-color: #ff9f40; }
.earlyfilter a.pfilter.on { color: #000; background: #ff9f40; border-color: #ff9f40; font-weight: 700; }
.strip .sort { margin-left: auto; font-size: 13px; flex-basis: 100%; justify-content: flex-end; }   /* on its own line, under the counts */
.strip .sort b { font-size: 13px; color: var(--text); }
/* Early Alert: the list's heading with its sort buttons on the right (the buttons look like Intel's, below) */
.listhead { display: grid; gap: 6px; margin-bottom: 6px; }   /* the heading, then a row of filters (Show:), then a row of sorts (Sort:) */
.listhead .sortbar > span:first-child { min-width: 42px; }   /* "Show:" and "Sort:" the same width, so both rows of buttons line up */
.listhead h2 { margin: 0; }
.sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.sortbar a { font-size: 12px; color: var(--muted); text-decoration: none; padding: 2px 9px; border: 1px solid var(--line-2); border-radius: 6px; }
.sortbar a:hover { color: #fff; border-color: #555; }
.sortbar a.on { color: #000; background: #fff; border-color: #fff; font-weight: 700; }
/* the Exploited Only filter: the red of the Exploited flag */
.sortbar a.xfilter { color: #ff8a8e; border-color: #7a1a1e; }
.sortbar a.xfilter:hover { color: #fff; border-color: #d61a20; }
.sortbar a.xfilter.on { color: #fff; background: #d61a20; border-color: #d61a20; }
/* the Public Exploit filter: the orange of the "Public exploit" flag */
.sortbar a.pfilter { color: #ff9f40; border-color: rgba(255, 159, 64, .5); }
.sortbar a.pfilter:hover { color: #fff; border-color: #ff9f40; }
.sortbar a.pfilter.on { color: #000; background: #ff9f40; border-color: #ff9f40; }
/* every filter (Exploited, Public Exploit, the groups, the SBOM tab's Show) is round; every sort is square-cornered: two kinds */
.sortbar a.xfilter, .sortbar a.pfilter, .sortbar a.gfilter { border-radius: 999px; }
/* Intelligence with the severities as its tabs: the views as round filter buttons (index.php .viewpills); Early Alert's
   in its cyan */
.sortbar a.efilter { color: #5fd4ff; border-color: rgba(95, 212, 255, .45); }
.sortbar a.efilter:hover { color: #fff; border-color: #5fd4ff; }
.sortbar a.efilter.on { color: #000; background: #5fd4ff; border-color: #5fd4ff; }
.viewpills a { font-size: 13px; padding: 4px 13px; }
/* a severity button's count (Intelligence's Severity row) */
.seg .segn { font-style: normal; font-size: 11px; opacity: .7; margin-left: 2px; }
/* the sort choices: small buttons, the chosen one lit (each one's meaning is in its tooltip) */
.strip .sort { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--muted); }
.strip .sort a { font-size: 12px; color: var(--muted); text-decoration: none; padding: 2px 9px; border: 1px solid var(--line-2); border-radius: 6px; }
.strip .sort a:hover { color: #fff; border-color: #555; }
.strip .sort a.on { color: #000; background: #fff; border-color: #fff; font-weight: 700; }
.count { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.empty { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 10px; }

/* the list */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; }
/* A row: status bar across the top, the CVE itself, then one fix line per OS */
.item { background: var(--panel); border: 2px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.statusbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 14px; border-bottom: 1px solid var(--line);
	background: linear-gradient(90deg, transparent 25%, color-mix(in srgb, var(--sevc, #3a2a2a) 22%, transparent)); }   /* clear behind the badges, the severity's tint building to the right */
/* the date and Roll Up button in the colour opposite the severity's on the colour wheel (--sevx: sevcolors.css, from
   sev_complement() in page.php); white for the default greys, which have no opposite hue */
.statusbar time { margin-left: auto; font-weight: 700; color: var(--sevx, #fff); }
.item .rollbtn { color: var(--sevx, #fff); border-color: color-mix(in srgb, var(--sevx, #fff) 55%, transparent); }
.item details.roll > summary:hover .rollbtn { color: var(--sevx, #fff); border-color: var(--sevx, #fff); }
.statusbar .due { margin-left: 0; }
.item .main { padding: 10px 14px 8px; }
/* Roll-up cards: the header (status bar + id + title) is the summary; the description and fix lines fold away */
details.roll > summary { list-style: none; cursor: pointer; }
details.roll > summary::-webkit-details-marker { display: none; }
.item .main.head { padding-bottom: 2px; }
details.roll:not([open]) .main.head { padding-bottom: 10px; }
.item .main.body { padding-top: 0; }
.rollbtn { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 10px; }
.rollbtn::after { content: "Roll Up \25B4"; }
details.roll:not([open]) .rollbtn::after { content: "Expand \25BE"; }
details.roll > summary:hover .rollbtn { color: #fff; border-color: var(--muted); }
html:not(.js) .rollall { display: none; }
.rollall { float: right; display: inline-flex; gap: 6px; }
.rollall button { font: inherit; font-size: 12px; color: var(--muted); background: transparent; border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.rollall button:hover { color: #fff; border-color: var(--muted); }
/* three columns shared by every OS line (subgrid), so the update tables all line up under their heading:
   left = OS button, middle = the fix text, right = the update boxes in a 1-4 column table */
/* the update boxes' column fits its boxes but never more than 44% of the card, so long product names (vendors' own
   wording, early detection) can't squeeze the instructions to one word a line; a long box is cut with "…" (full name on hover) */
.fixes { border-top: 1px solid var(--line); display: grid; grid-template-columns: 128px minmax(0, 1fr) fit-content(44%); column-gap: 12px; }
.fixline .osbtn { min-width: 0; width: 100%; box-sizing: border-box; white-space: normal; line-height: 1.3; }
.fixline .kbs.c1 .kb { justify-self: start; }
.fixhead, .fixline { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: 12px; padding-left: 14px; padding-right: 14px; }
.fixhead { padding-top: 6px; padding-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.fixhead .h-os { grid-column: 1 / 3; }
.fixhead .h-kbs { grid-column: 3; }
.fixhead .ico { width: 10px; height: 10px; fill: currentColor; margin-right: 5px; vertical-align: -1px; }
/* each OS's fix on its own line, edged and tinted in that OS's colour */
.fixline { align-items: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;
	border-left: 6px solid var(--c); background: color-mix(in srgb, var(--c) 6%, transparent); }
.fixhead + .fixline { border-top: 1px solid var(--line); }
.fixline + .fixline { border-top: 1px solid var(--line); }
/* OS button: the OS's logo colour with its logo */
.osbtn { flex: none; min-width: 128px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
	font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
	color: var(--on, #fff); background: var(--c); border: 1px solid color-mix(in srgb, var(--c) 65%, #fff); border-radius: 6px; padding: 5px 10px; white-space: nowrap; }
.osbtn:hover { color: var(--on, #fff); filter: brightness(1.15); }
/* on the cards: a raised, 3D button (lit from above, a solid darker base under it); it lifts on hover and presses in on click */
.fixline .osbtn { position: relative; padding: 7px 10px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--c) 72%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 78%, #000) 100%);
	border: 1px solid color-mix(in srgb, var(--c) 55%, #000); border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .25),
		0 4px 0 color-mix(in srgb, var(--c) 45%, #000), 0 6px 10px rgba(0, 0, 0, .55);
	transform: translateY(-2px); transition: transform .08s, box-shadow .08s, filter .08s; }
.fixline .osbtn:hover { transform: translateY(-3px); filter: brightness(1.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .25),
		0 5px 0 color-mix(in srgb, var(--c) 45%, #000), 0 8px 14px rgba(0, 0, 0, .6); }
.fixline .osbtn:active { transform: translateY(1px);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35), 0 1px 0 color-mix(in srgb, var(--c) 45%, #000), 0 2px 4px rgba(0, 0, 0, .5); }
.osbtn .osi { margin: 0; }
.fixtext { flex: 1 1 320px; font-size: 14px; color: #e9e1e1; min-width: 0; }
/* a group's fix line: one row per member, its name (logo + colour) first */
.fixtext .member { display: block; }
.fixtext .member + .member { margin-top: 4px; }
.fixtext .member b { color: var(--c); font-weight: 600; }
/* a group member's name links to its own fixes on the CVE page */
.fixtext .member a.mname { text-decoration: none; }
.fixtext .member a.mname:hover b, .fixtext .member a.mname:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
/* the update boxes as a small table: 1 box = 1 column, more = 2 columns */
.fixline .kbs { grid-column: 3; display: grid; gap: 4px; align-content: center; }
.fixline .kbs.c1 { grid-template-columns: 1fr; }
.fixline .kbs.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fixline .kbs .kb { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
/* The row's left edge in its severity's colour (and, for Critical, a wash in its OS colour) */
/* the severity spine down each card's left edge, its top an arrow pointing into the status bar. --sevc is the
   severity's colour (sevcolors.css sets it for colours picked in Settings) */
.item[class*="fam-"] { position: relative; border-left: 0; padding-left: 14px; }
.item[class*="fam-"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 21px; z-index: 1; pointer-events: none;
	background: var(--sevc); clip-path: polygon(0 0, 14px 0, 21px 19px, 14px 38px, 14px 100%, 0 100%); }
.item[class*="fam-"] .statusbar { padding-left: 16px; }   /* clears the arrow tip */
@media (max-width: 760px) {
	.item[class*="fam-"] { padding-left: 12px; }
	.item[class*="fam-"]::before { width: 18px; clip-path: polygon(0 0, 12px 0, 18px 17px, 12px 34px, 12px 100%, 0 100%); }
}
@media print { .item[class*="fam-"]::before, .item[class*="fam-"]::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
.item.sv4[class*="fam-"] { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 9%, transparent), var(--panel) 45%); }
/* exploited: a red outline on top of the OS colour */
.item.hot { box-shadow: none; }   /* exploited cards use the neutral theme border too; the red Exploited badge marks them */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
/* CVE page: the affected systems on their own line under the severity, with a label */
.tags.affects { margin-top: 10px; }
.legal ul.sources { margin: 8px 0; padding-left: 20px; }
.legal ul.sources li { margin: 6px 0; }
.affectlabel { flex: 0 0 100%; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }   /* its own line, the list below */
.sev { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; border: 1px solid; }
/* Each OS: its logo's colour (--c), the text colour that reads on it (--on) and its logo (--icon, images/os/).
   Windows/Microsoft logos: Font Awesome Free (CC BY 4.0); the rest: Simple Icons (CC0; Debian CC BY-SA 3.0,
   Rocky Linux CC BY-SA 4.0); Apps and Network & security: plain icons. Credits on disclaimer.php. */
/* default for any OS without its own colour below (e.g. one OSV adds later): neutral grey with the Linux penguin */
[class*="fam-"] { --c: #8a8f98; --on: #000; --icon: url(/images/os/linux.svg); }
.fam-all { --c: #c81e1e; --on: #fff; }
/* added 2026-10-27 (logo colours, like the others) */
.fam-oracle-linux { --c: #f80000; --on: #fff; --icon: url(/images/os/oracle-linux.svg); }
.fam-fedora { --c: #51a2da; --on: #000; --icon: url(/images/os/fedora.svg); }
.fam-arch-linux { --c: #1793d1; --on: #fff; --icon: url(/images/os/arch-linux.svg); }
.fam-freebsd { --c: #ab2b28; --on: #fff; --icon: url(/images/os/freebsd.svg); }
.fam-alpine { --c: #2a8bbd; --on: #fff; --icon: url(/images/os/alpine.svg); }
.fam-wolfi, .fam-chainguard, .fam-container-images { --c: #4445e7; --on: #fff; --icon: url(/images/os/chainguard.svg); }
.fam-azure-linux { --c: #008ad7; --on: #fff; }
/* Hardware & firmware (2026-10-27): copper, with a chip icon; its brands use their own logos where there is one */
.fam-hardware-firmware { --c: #c07a3c; --on: #000; --icon: url(/images/os/hardware-firmware.svg); }
.brand-intel { --icon: url(/images/brands/intel.svg); } .brand-amd { --icon: url(/images/brands/amd.svg); }
.brand-qualcomm { --icon: url(/images/brands/qualcomm.svg); } .brand-mediatek { --icon: url(/images/brands/mediatek.svg); }
.brand-samsung { --icon: url(/images/brands/samsung.svg); } .brand-arm { --icon: url(/images/brands/arm.svg); }
.brand-dell { --icon: url(/images/brands/dell.svg); } .brand-hp { --icon: url(/images/brands/hp.svg); }
.brand-lenovo { --icon: url(/images/brands/lenovo.svg); } .brand-supermicro { --icon: url(/images/brands/supermicro.svg); }
.brand-kyocera { --icon: url(/images/brands/kyocera.svg); } .brand-sharp { --icon: url(/images/brands/sharp.svg); }
.brand-epson { --icon: url(/images/brands/epson.svg); }
.fam-almalinux { --c: #2eb5e8; --on: #000; --icon: url(/images/os/almalinux.svg); }
.fam-amazon-linux { --c: #ff9900; --on: #000; --icon: url(/images/os/amazon-linux.svg); }
.fam-android { --c: #34a853; --on: #000; --icon: url(/images/os/android.svg); }
.fam-apps, .fam-apps-windows { --c: #64748b; --on: #fff; --icon: url(/images/os/apps.svg); }
.fam-debian { --c: #d70a53; --on: #fff; --icon: url(/images/os/debian.svg); }
.fam-ios { --c: #f2f2f7; --on: #000; --icon: url(/images/os/apple.svg); }
.fam-macos { --c: #a2aaad; --on: #000; --icon: url(/images/os/apple.svg); }
.fam-microsoft-apps { --c: #7160e8; --on: #fff; --icon: url(/images/os/microsoft-apps.svg); }
.fam-network-security { --c: #c026d3; --on: #fff; --icon: url(/images/os/network-security.svg); }
.fam-opensuse { --c: #73ba25; --on: #000; --icon: url(/images/os/opensuse.svg); }
.fam-red-hat, .fam-red-hat-family { --c: #ee0000; --on: #fff; --icon: url(/images/os/red-hat.svg); }
.fam-rocky-linux { --c: #10b981; --on: #000; --icon: url(/images/os/rocky-linux.svg); }
.fam-suse, .fam-suse-family { --c: #30ba78; --on: #000; --icon: url(/images/os/suse.svg); }
.fam-ubuntu { --c: #e95420; --on: #fff; --icon: url(/images/os/ubuntu.svg); }
.fam-windows { --c: #0078d4; --on: #fff; --icon: url(/images/os/windows.svg); }
/* Brand buttons (Apps / Network & security split per brand): the group's colour, the brand's own logo where one exists
   (images/brands/, Simple Icons; the rest keep the group's cube or shield). Credits on disclaimer.php. */
.brand-adobe { --icon: url(/images/brands/adobe.svg); } .brand-apache { --icon: url(/images/brands/apache.svg); }
.brand-asus { --icon: url(/images/brands/asus.svg); } .brand-atlassian { --icon: url(/images/brands/atlassian.svg); }
.brand-cisco { --icon: url(/images/brands/cisco.svg); } .brand-citrix { --icon: url(/images/brands/citrix.svg); }
.brand-craft-cms { --icon: url(/images/brands/craft-cms.svg); } .brand-curl { --icon: url(/images/brands/curl.svg); }
.brand-docker { --icon: url(/images/brands/docker.svg); } .brand-f5 { --icon: url(/images/brands/f5.svg); }
.brand-fortinet { --icon: url(/images/brands/fortinet.svg); } .brand-git { --icon: url(/images/brands/git.svg); }
.brand-google { --icon: url(/images/brands/google.svg); } .brand-jetbrains { --icon: url(/images/brands/jetbrains.svg); }
.brand-jfrog { --icon: url(/images/brands/jfrog.svg); } .brand-juniper { --icon: url(/images/brands/juniper.svg); }
.brand-mariadb { --icon: url(/images/brands/mariadb.svg); } .brand-mikrotik { --icon: url(/images/brands/mikrotik.svg); }
.brand-mozilla { --icon: url(/images/brands/mozilla.svg); } .brand-netgear { --icon: url(/images/brands/netgear.svg); }
.brand-nginx { --icon: url(/images/brands/nginx.svg); } .brand-node-js { --icon: url(/images/brands/node-js.svg); }
.brand-openssl { --icon: url(/images/brands/openssl.svg); } .brand-oracle { --icon: url(/images/brands/oracle.svg); }
.brand-palo-alto-networks { --icon: url(/images/brands/palo-alto-networks.svg); } .brand-php { --icon: url(/images/brands/php.svg); }
.brand-postgresql { --icon: url(/images/brands/postgresql.svg); } .brand-progress { --icon: url(/images/brands/progress.svg); }
.brand-python { --icon: url(/images/brands/python.svg); } .brand-qnap { --icon: url(/images/brands/qnap.svg); }
.brand-redis { --icon: url(/images/brands/redis.svg); } .brand-sap { --icon: url(/images/brands/sap.svg); }
.brand-sitecore { --icon: url(/images/brands/sitecore.svg); } .brand-sonicwall { --icon: url(/images/brands/sonicwall.svg); }
.brand-synology { --icon: url(/images/brands/synology.svg); } .brand-tp-link { --icon: url(/images/brands/tp-link.svg); }
.brand-ubiquiti { --icon: url(/images/brands/ubiquiti.svg); } .brand-veeam { --icon: url(/images/brands/veeam.svg); }
.brand-vmware { --icon: url(/images/brands/vmware.svg); } .brand-wordpress { --icon: url(/images/brands/wordpress.svg); }
.brand-zoho-manageengine { --icon: url(/images/brands/zoho-manageengine.svg); }
.brand-gitlab { --icon: url(/images/brands/gitlab.svg); } .brand-jenkins { --icon: url(/images/brands/jenkins.svg); }
.brand-kubernetes { --icon: url(/images/brands/kubernetes.svg); } .brand-elastic { --icon: url(/images/brands/elastic.svg); }
.brand-mongodb { --icon: url(/images/brands/mongodb.svg); } .brand-zoom { --icon: url(/images/brands/zoom.svg); }
.brand-spring { --icon: url(/images/brands/spring.svg); } .brand-rabbitmq { --icon: url(/images/brands/rabbitmq.svg); }
.brand-grafana { --icon: url(/images/brands/grafana.svg); } .brand-openvpn { --icon: url(/images/brands/openvpn.svg); }
.brand-splunk { --icon: url(/images/brands/splunk.svg); } .brand-ffmpeg { --icon: url(/images/brands/ffmpeg.svg); }
.brand-libreoffice { --icon: url(/images/brands/libreoffice.svg); } .brand-filezilla { --icon: url(/images/brands/filezilla.svg); }
.brand-anydesk { --icon: url(/images/brands/anydesk.svg); } .brand-ruby { --icon: url(/images/brands/ruby.svg); }
.brand-go { --icon: url(/images/brands/go.svg); } .brand-electron { --icon: url(/images/brands/electron.svg); }
.brand-gitea { --icon: url(/images/brands/gitea.svg); } .brand-sonatype { --icon: url(/images/brands/sonatype.svg); }
.brand-phpmyadmin { --icon: url(/images/brands/phpmyadmin.svg); } .brand-plesk { --icon: url(/images/brands/plesk.svg); }
.brand-cpanel { --icon: url(/images/brands/cpanel.svg); } .brand-traefik { --icon: url(/images/brands/traefik.svg); }
.brand-caddy { --icon: url(/images/brands/caddy.svg); } .brand-helm { --icon: url(/images/brands/helm.svg); }
.brand-portainer { --icon: url(/images/brands/portainer.svg); } .brand-qemu { --icon: url(/images/brands/qemu.svg); }
.brand-proxmox { --icon: url(/images/brands/proxmox.svg); } .brand-7-zip { --icon: url(/images/brands/7-zip.svg); }
.brand-webmin { --icon: url(/images/brands/webmin.svg); }
.brand-drupal { --icon: url(/images/brands/drupal.svg); } .brand-joomla { --icon: url(/images/brands/joomla.svg); }
.brand-nextcloud { --icon: url(/images/brands/nextcloud.svg); } .brand-roundcube { --icon: url(/images/brands/roundcube.svg); }
.brand-moodle { --icon: url(/images/brands/moodle.svg); } .brand-hashicorp { --icon: url(/images/brands/hashicorp.svg); }
.brand-keycloak { --icon: url(/images/brands/keycloak.svg); } .brand-vlc { --icon: url(/images/brands/vlc.svg); }
.brand-notepad { --icon: url(/images/brands/notepad.svg); } .brand-teamviewer { --icon: url(/images/brands/teamviewer.svg); }
.brand-perl { --icon: url(/images/brands/perl.svg); } .brand-rust { --icon: url(/images/brands/rust.svg); }
.brand-prometheus { --icon: url(/images/brands/prometheus.svg); } .brand-envoy { --icon: url(/images/brands/envoy.svg); }
.brand-containerd { --icon: url(/images/brands/containerd.svg); } .brand-rancher { --icon: url(/images/brands/rancher.svg); }
/* Brand colours (2026-10-28, Steve's request: the brand buttons were all their group's colour). Each brand's own colour,
   made lighter where the real one is too dark to read on black (the original in the comment); brands not listed keep
   their group's colour. --on: the text colour on it when picked. */
/* apps */
.brand-google { --c: #4285f4; --on: #fff; } .brand-mozilla { --c: #ff7139; --on: #000; } .brand-f5 { --c: #e4002b; --on: #fff; }
.brand-oracle { --c: #f80000; --on: #fff; } .brand-adobe { --c: #fa0f00; --on: #fff; } .brand-gitlab { --c: #fc6d26; --on: #000; }
.brand-apache { --c: #d22128; --on: #fff; } .brand-splunk { --c: #65a637; --on: #000; } .brand-elastic { --c: #00bfb3; --on: #000; }
.brand-mongodb { --c: #47a248; --on: #000; } .brand-fortinet { --c: #ee3124; --on: #fff; } .brand-jetbrains { --c: #fe315d; --on: #000; }
.brand-moodle { --c: #f98012; --on: #000; } .brand-ffmpeg { --c: #3cb44b; --on: #000; }   /* #007808 */
.brand-zoom { --c: #2d8cff; --on: #fff; } .brand-joomla { --c: #5091cd; --on: #000; } .brand-hitachi { --c: #e60027; --on: #fff; }
.brand-openssl { --c: #d0454c; --on: #fff; }   /* #721412 */
.brand-zoho-manageengine { --c: #e42527; --on: #fff; } .brand-traefik { --c: #24a1c1; --on: #000; } .brand-solarwinds { --c: #f99d1c; --on: #000; }
.brand-curl { --c: #4a90c8; --on: #000; }   /* #073551 */
.brand-progress { --c: #5ce500; --on: #000; } .brand-spring { --c: #6db33f; --on: #000; } .brand-craft-cms { --c: #e5422b; --on: #fff; }
.brand-go { --c: #00add8; --on: #000; } .brand-gitea { --c: #79b830; --on: #000; }   /* #609926 */
.brand-php { --c: #777bb4; --on: #fff; } .brand-postgresql { --c: #4169e1; --on: #fff; } .brand-grafana { --c: #f46800; --on: #000; }
.brand-envoy { --c: #ac6199; --on: #fff; } .brand-jenkins { --c: #d24939; --on: #fff; } .brand-wso2 { --c: #ff7300; --on: #000; }
.brand-zabbix { --c: #d40000; --on: #fff; } .brand-veeam { --c: #00b336; --on: #000; } .brand-roundcube { --c: #37beff; --on: #000; }
.brand-electron { --c: #6fb3bd; --on: #000; }   /* #47848f */
.brand-jfrog { --c: #40be46; --on: #000; } .brand-nextcloud { --c: #0082c9; --on: #fff; } .brand-node-js { --c: #5fa04e; --on: #000; }
.brand-teamviewer { --c: #0e8ee9; --on: #fff; } .brand-drupal { --c: #0678be; --on: #fff; }
.brand-mariadb { --c: #c49a6c; --on: #000; }   /* the seal's bronze: its #003545 is too dark */
.brand-atlassian { --c: #2684ff; --on: #fff; }   /* #0052cc */
.brand-redis { --c: #dc382d; --on: #fff; } .brand-docker { --c: #2496ed; --on: #fff; } .brand-python { --c: #4b8bbe; --on: #fff; }
.brand-wordpress { --c: #3a9fcf; --on: #000; }   /* #21759b */
.brand-notepad { --c: #90e59a; --on: #000; } .brand-trend-micro { --c: #d71920; --on: #fff; } .brand-kubernetes { --c: #326ce5; --on: #fff; }
.brand-ruby { --c: #e0343f; --on: #fff; } .brand-rust { --c: #dea584; --on: #000; } .brand-prometheus { --c: #e6522c; --on: #fff; }
.brand-sap { --c: #0faaff; --on: #000; } .brand-anydesk { --c: #ef443b; --on: #fff; } .brand-libreoffice { --c: #18a303; --on: #000; }
.brand-cpanel { --c: #ff6c2c; --on: #000; } .brand-vlc { --c: #ff8800; --on: #000; } .brand-git { --c: #f05032; --on: #fff; }
/* network & security */
.brand-cisco { --c: #1ba0d7; --on: #000; } .brand-tp-link { --c: #4acbd6; --on: #000; } .brand-juniper { --c: #84b135; --on: #000; }
.brand-palo-alto-networks { --c: #fa582d; --on: #000; } .brand-sonicwall { --c: #ff6600; --on: #000; } .brand-d-link { --c: #0094b3; --on: #fff; }
.brand-citrix { --c: #8a63c9; --on: #fff; }   /* #452170 */
.brand-ubiquiti { --c: #2f80ed; --on: #fff; }   /* #0559c9 */
.brand-ivanti { --c: #e1251b; --on: #fff; } .brand-watchguard { --c: #e31b23; --on: #fff; } .brand-hpe-aruba { --c: #ff8300; --on: #000; }
.brand-zyxel { --c: #2f8ad8; --on: #fff; }   /* #0063b1 */
.brand-sophos { --c: #2f7fe0; --on: #fff; }   /* #005bc8 */
.brand-qnap { --c: #3d8fe0; --on: #fff; }
/* hardware & firmware */
.brand-dell { --c: #2a9ad6; --on: #000; }   /* #007db8 */
.brand-samsung { --c: #3a5bd9; --on: #fff; }   /* #1428a0 */
.brand-intel { --c: #2d8ae0; --on: #fff; }   /* #0071c5 */
.brand-hpe { --c: #01a982; --on: #000; } .brand-arm { --c: #0091bd; --on: #000; } .brand-hp { --c: #0096d6; --on: #000; }
.brand-qualcomm { --c: #3253dc; --on: #fff; } .brand-canon { --c: #cc0000; --on: #fff; } .brand-hikvision { --c: #e60012; --on: #fff; }
.brand-mediatek { --c: #ec9430; --on: #000; } .brand-lenovo { --c: #e2231a; --on: #fff; }
/* the logo, drawn in the current text colour */
.osi { display: inline-block; flex: none; width: 1.2em; height: 1.2em; margin-right: .45em; vertical-align: -.22em; background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.families a .osi, .mylist .osi, .tab .osi, .osname .osi { background: var(--c); }
.families a.on .osi { background: currentColor; }
/* Severity: shades of yellow, whatever the OS (red is kept for Exploited). Critical a bright (not glaring) yellow,
   each level below a darker gold */
.s4, .sv4 { --sevc: #ffffff; }
.s3, .sv3 { --sevc: #cfcfcf; }
.s2, .sv2 { --sevc: #9e9e9e; }
.s1, .sv1 { --sevc: #6e6e6e; }
.s0, .sv0 { --sevc: #474747; }
.sev { color: #fff; background: var(--sevc); border-color: color-mix(in srgb, var(--sevc) 70%, #fff); }
.sev.s4, .sev.s3, .sev.s2 { color: #000; }
.sev.s4 { box-shadow: 0 0 7px rgba(255, 255, 255, .35); }
.sev.s0 { color: #ddd; }
/* Exploited: red, its text blinking black / white (steady white for people who ask their system for less motion) */
.flag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: #d61a20; padding: 3px 7px; border-radius: 5px; }
.flag > span { animation: blinkbw 1.2s steps(1, end) infinite; }
/* Calm mode (the person's Display switch, page.php): nothing flashes, pulses or blinks; the Apply button keeps a still glow */
body.calm *, body.calm *::before, body.calm *::after { animation: none !important; }
body.calm .famapply:not(:disabled) { box-shadow: 0 0 10px 2px rgba(255, 59, 59, .6); }
@keyframes blinkbw { 0% { color: #000; } 50% { color: #fff; } }
@media (prefers-reduced-motion: reduce) { .flag > span { animation: none; } }
.flag.soft { background: transparent; color: var(--imp); border: 1px solid rgba(255, 159, 26, .5); }
.score { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* EPSS exploit likelihood: the bar and outline go blue (under 1%), green (1-10%), yellow (10-50%), red (50%+); the text
   stays white so it reads on every band. Outlined, never filled, so it isn't mistaken for a severity or Exploited badge */
.epss { --ec: #4a9eff; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #e8e8e8; font-variant-numeric: tabular-nums;
	border: 1px solid color-mix(in srgb, var(--ec) 60%, transparent); border-radius: 5px; padding: 2px 7px; cursor: help; white-space: nowrap; }
.epssbar { display: inline-block; width: 64px; height: 5px; background: #2a2a2a; border-radius: 3px; overflow: hidden; }
.epssbar > span { display: block; height: 100%; background: var(--ec); }
.epss-vlow { --ec: #4a9eff; }
.epss-low { --ec: #3ecf6a; }
.epss-mid { --ec: #ffd21f; }
.epss-high { --ec: #ff3b3b; color: #fff; font-weight: 700; }
/* "Public exploit" (Exploit-DB has attack code for it): orange, between "Exploited" red and the likelihood bar */
.pubx { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #ff9f40;
	border: 1px solid rgba(255, 159, 64, .7); border-radius: 4px; padding: 1px 6px; white-space: nowrap; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.pubxbox { border-color: rgba(255, 159, 64, .5); }
/* Inventory's SBOMs tab (sbom.php): monospace package addresses and versions, licence chips by kind, a red edge on exploited rows */
.sbomtitle { margin: 4px 0 2px; font-size: 26px; }
.sbomver { font-family: ui-monospace, Consolas, monospace; font-size: 15px; font-weight: 700; color: #000; background: #fff; border-radius: 5px; padding: 2px 8px; vertical-align: middle; }
.sbomecos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sbomactions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.sbomversions { font-size: 12px; color: var(--muted); }
.sbomversions a, .sbomversions b { font-family: ui-monospace, Consolas, monospace; }
.sbomtable td:nth-child(2), .sbomtable td:last-child { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.purl { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #8a8a8a; word-break: break-all; }
.sbomtable tr.sbomhot td:first-child, .sbomlist tr.sbomhot td:first-child { box-shadow: inset 3px 0 0 var(--red-hot); }
.sbomvulns summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sbomvlist { margin: 8px 0 0; padding-left: 16px; display: grid; gap: 8px; font-size: 13px; }
.lic { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.3; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.lic-permissive { color: #3ecf6e; border-color: rgba(62, 207, 110, .45); }
.lic-weak { color: #ffcf5a; border-color: rgba(255, 207, 90, .45); }
.lic-strong { color: var(--red-hot); border-color: color-mix(in srgb, var(--red-hot) 60%, transparent); }
.lic-none { color: #8a8a8a; border-style: dashed; }
.goodnum, .facts b.goodnum { color: #3ecf6e; }
.sbomform { display: grid; gap: 12px; }
.sbomform label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.sbomform textarea { width: 100%; box-sizing: border-box; font: 12px/1.4 ui-monospace, Consolas, monospace; background: #000; color: var(--text); border: 1px solid var(--line-2); border-radius: 7px; padding: 8px; }
.sbomrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sbomform input[type=text] { font: inherit; background: #000; color: var(--text); border: 1px solid var(--line-2); border-radius: 7px; padding: 7px 10px; }
.sbomform button { justify-self: start; }
.sbomsteps { display: grid; gap: 8px; padding-left: 20px; }
.sbomsteps ul { margin: 4px 0 0; padding-left: 18px; }
.sbomsteps code, #howto li code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #fff; overflow-wrap: anywhere; }

/* Server Sanity's badge card (sanity.php #badge): the badge itself (the same CSS the card hands out: app/badge.php's
   badge_css(), keep the two the same), shown on a dark and a light background, and its code boxes with Copy */
.ps-badge { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.ps-text { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 29px; font-size: 11px; line-height: 1.15; white-space: nowrap; }
.ps-text b { font-size: 14px; line-height: 1.1; font-weight: 700; }
.ps-badge:hover b { text-decoration: underline; }
.ps-shield { position: relative; display: block; width: 26px; height: 29px; flex: none; }
.ps-shield svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ps-shield path { fill: #14306a; stroke: #8c8c8c; stroke-width: 1.6; stroke-linejoin: round; animation: ps-shieldcycle 40s ease-in-out infinite; }
.ps-shield img { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: auto; height: 16px; }
@keyframes ps-shieldcycle { 0%, 100% { fill: #14306a; } 25% { fill: #0b0b0c; } 50% { fill: #5a0c12; } 75% { fill: #0b0b0c; } }
@media (prefers-reduced-motion: reduce) { .ps-shield path { animation: none; } }
body.calm .ps-shield path { animation: none; }
.badgeprev { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 14px; }
.badgeprev > div { flex: 1 1 260px; display: flex; justify-content: center; padding: 16px; border-radius: 9px; font-size: 14px; }
.badgeprev .dark { background: #0b0b0c; color: #a19c98; border: 1px solid var(--line); }
.badgeprev .dark b { color: #fff; }
.badgeprev .light { background: #f6f6f9; color: #5f6270; }
.badgeprev .light b { color: #1b1b1f; }
/* the badge's verify page (verify.php): a card per finding, green for a verified site, red for not verified or copied */
.verifycard { border-left-width: 5px; margin-top: 14px; }
.verifycard.v-ok { border-left-color: #3ecf6e; }
.verifycard.v-bad { border-left-color: var(--red-hot); }
.verifycard h2 { margin: 0 0 4px; }
.verifycard.v-ok h2 { color: #8fe0a4; }
.verifycard.v-bad h2 { color: #ff8a8e; }
.verifyhead { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.verifyhead .brand { padding: 0; }
.verifyhead p { margin: 0; }
.verifysub { margin: 14px 0 2px; font-size: 15px; color: #fff; }
.verifychecks { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 5px; }
.verifynote { margin: 12px 0 8px; padding: 10px 14px; border: 1px solid rgba(255, 207, 90, .45); border-radius: 8px; background: rgba(255, 207, 90, .05); font-size: 13px; }
.verifynote p { margin: 4px 0; }
.verifynote b { color: #ffcf5a; }
.verifyform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 18px 0 10px; }
.verifyform label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; max-width: 420px; }
.verifyform button { font: inherit; font-weight: 700; color: #fff; background: var(--red); border: 1px solid var(--red-hot); border-radius: 7px; padding: 8px 18px; cursor: pointer; }   /* the page's main action: red, as the controls key says */
.verifyform button:hover { background: var(--red-hot); }
.verifyform input { font: inherit; font-size: 15px; color: var(--text); background: #000; border: 1px solid var(--line-2); border-radius: 7px; padding: 8px 10px; }   /* (as Intelligence's search) */
/* the badge card's site picker: its own panel, so which site the code is for can't be missed */
.badgefor { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid rgba(61, 155, 255, .45); border-radius: 10px; background: rgba(61, 155, 255, .07); }
.badgeforhead { margin: 0 0 10px; font-size: 15px; color: var(--text); }
.badgeforhead b { color: #fff; font-size: 16px; }
.badgeforpills { display: flex; flex-wrap: wrap; gap: 6px; }
.badgeforpills a { font-size: 13px; color: var(--text); text-decoration: none; padding: 5px 13px; border: 1px solid var(--line-2); border-radius: 999px; background: #000; }
.badgeforpills a:hover { color: #fff; border-color: #3d9bff; }
.badgeforpills a.on { color: #fff; background: #1a56c4; border-color: #3d9bff; font-weight: 700; }
.badgeforpills a i { font-style: normal; color: #f5c542; }

/* the gold ★ Badge pill beside a site's checks: its Server Sanity badge is on its page */
.chip.gold { color: #f5c542; border-color: rgba(245, 197, 66, .6); background: rgba(245, 197, 66, .08); text-decoration: none; }
a.chip.gold:hover { color: #ffe08a; border-color: #f5c542; }
a.chip.off { text-decoration: none; }
#badge .codehead { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 6px 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; font-size: 12px; }
#badge pre { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0 0 8px 8px; overflow: auto; max-height: 260px; background: rgba(0, 0, 0, .35); }
#badge pre code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.5; color: #e6dcdc; white-space: pre-wrap; overflow-wrap: anywhere; }
.main { min-width: 0; }
.main h2 { font-size: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.main h2 a { color: #fff; text-decoration: none; font-family: ui-monospace, Consolas, monospace; }
.main h2 a:hover { color: #ffaaaa; }
.impact { font-size: 13px; font-weight: 400; color: var(--muted); }
.title { margin: 2px 0 4px; color: #f2e8e8; }
.desc { margin: 0 0 6px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.fix { margin: 0; font-size: 14px; }
.fix b { color: #8fd19e; }
/* CISA's fix-by date: a soft warm white, not red (easier on the eyes) */
.due { margin-left: 8px; font-size: 12px; color: #e8dccb; font-weight: 600; white-space: nowrap; }
.side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; text-align: right; }
.kbs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.kb { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--text); text-decoration: none; border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 6px; background: #000; }
.kb:hover { border-color: var(--red-hot); color: #fff; }
.more { font-size: 12px; }
time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pages { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 18px 0 0; }

/* one CVE */
.crumbs { margin: 0 0 10px; font-size: 14px; }
.detail .tags { flex-direction: row; flex-wrap: wrap; margin-bottom: 8px; }
.detail h1 { font-family: ui-monospace, Consolas, monospace; font-size: 30px; color: #fff; }
.big.title { font-size: 19px; margin: 4px 0 8px; }
.big.desc { font-size: 16px; color: var(--text); max-width: 900px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 16px 0 6px; }
.facts div { background: var(--panel); border: 2px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; }
.facts span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.facts b { font-size: 16px; color: #fff; }
.facts.centred div { justify-items: center; text-align: center; }
/* a figure that opens what it counts (Early Alert's "Already exploited"): underlined, like a link, brighter on hover */
.facts a.factlink { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--red-hot) 55%, transparent); text-underline-offset: 4px; }
.facts a.factlink:hover { text-decoration-color: var(--red-hot); }
.facts a.factlink:hover b { color: #fff; }
.epssfact b { display: grid; justify-items: center; gap: 3px; }
/* a fact card can shrink to its column (min-width 0), so one wide value can't push the row, and the page, wider than
   the window; the likelihood badge inside one keeps its own lettering (not the cards' small capitals) and wraps if it must */
.facts > div { min-width: 0; }
.facts .epss { max-width: 100%; flex-wrap: wrap; justify-content: center; white-space: normal; }
.facts .epss, .facts .epss span { font-size: 12px; text-transform: none; letter-spacing: normal; color: #e8e8e8; }
.epssfact small { font-size: 12px; font-weight: 400; }
.facts .factnote { font-size: 12px; line-height: 1.4; }
/* Inventory's "This device" card: long values (the User-Agent, the graphics card) wrap inside their box */
.hosthead { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 16px 0 0; }
.hostfacts { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: 8px; }
.hostfacts b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
/* a page's own tabs on its heading's line (Inventory: This device / Soft Inventory / Hard Inventory), like the header's, smaller */
.tabtagrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; border-bottom: 1px solid var(--line-2); margin-bottom: 14px; }
.tabtagrow .tabtag { margin-bottom: 8px; }
.subtabs { display: flex; gap: 4px; margin-bottom: -1px; }
.subtabs a { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none;
	border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; }
.subtabs a:hover { color: #fff; }
.subtabs a.on { color: #fff; background: var(--panel); border-color: var(--line-2); box-shadow: inset 0 2px 0 var(--red-hot); }
.subcount { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.subtabs a.on .subcount { color: #fff; }
/* phones: the sub-tabs (Intelligence's, Inventory's) scroll sideways inside their own row, a tab bar, instead of making
   the whole page scroll sideways (found by the 2026-10-31 health check) */
@media (max-width: 760px) {
	.tabtagrow { min-width: 0; }
	.subtabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.subtabs::-webkit-scrollbar { display: none; }
	.subtabs a { flex: none; white-space: nowrap; padding: 7px 11px; }
}
/* its Add / Update / Remove row, and the Soft and Hard Inventory lists: search, sortable headings, pages */
.invadd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 6px; padding: 12px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(0, 0, 0, .35); }
.invadd p { flex-basis: 100%; margin: 0; }
.invadd label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.invadd input[type=text], .invsearch input[type=search] { font: inherit; color: var(--text); background: #000; border: 1px solid var(--line-2); border-radius: 7px; padding: 7px 10px; min-width: 260px; }
.invsearch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.invsearch input[type=search] { flex: 1; max-width: 420px; }
.tablewrap { overflow-x: auto; }
.invtable td { vertical-align: top; padding: 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.invtable tr.thisdev td { background: rgba(255, 255, 255, .03); }
a.sortlink { color: inherit; text-decoration: none; }
a.sortlink:hover, a.sortlink.on { color: #fff; }
/* Discovered Devices: every This Device detail as a column, scrolling sideways, with the name pinned on the left */
.devtable th, .devtable td { white-space: nowrap; font-size: 13px; }
.devtable td.long { white-space: normal; min-width: 260px; max-width: 340px; overflow-wrap: anywhere; }
.devtable tr.groups th { font-size: 10px; color: #fff; border-bottom: 1px solid var(--line-2); padding-top: 0; }
.devtable tr.groups th[colspan] { border-left: 1px solid var(--line-2); }
.devtable .namecol, .devtable tr:not(.groups) > th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: 1px 0 0 var(--line-2); }
.devtable tr.thisdev .namecol { background: color-mix(in srgb, var(--panel) 94%, #fff); }
.devtable tr.stale td:not(.namecol) { opacity: .6; }
.chip.warn { color: #ffcf5a; border-color: rgba(255, 207, 90, .45); }
.chip.unknown { color: var(--muted); }
/* Intelligence: the browsers' newest releases, a small card each (browser_newest_box / _card, app/inventory.php): above the
   list when browsers are picked, and under a browser's fixes on a CVE page */
.newestbox { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); }
.newestbox h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; }
.newestbox > p { margin: 8px 0 0; }
details.newestbox > summary h3 { margin: 0; }
details.newestbox[open] > summary { margin-bottom: 8px; }
.newestgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }   /* (seven cards: four, then three) */
.newestcard { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .3); }
.newestcard > span { font-size: 12px; font-weight: 700; color: #fff; }
.newestcard > span small { font-weight: 400; color: var(--muted); }
.newestcard > b { font-size: 17px; color: #fff; font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.newestcard > small { font-size: 12px; line-height: 1.5; }
.newestcard > a { font-size: 12px; margin-top: 2px; }
.fixbox .newestbox { margin: 12px 0 4px; }
/* Website & Email Health's email table: each check's mark stays with its value on one line (mail.example.com, selector
   202609), the advice under it wraps; the domain and the overall grade don't squeeze the rest */
.mailgrid .mailval { white-space: nowrap; }
.mailgrid .mailwhy { display: block; margin-top: 3px; line-height: 1.4; }
.mailgrid td:first-child { white-space: nowrap; }
.mailgrid td:nth-child(2) { min-width: 120px; }
.mailgrid td:nth-child(4), .mailgrid td:nth-child(6) { min-width: 200px; }
/* the sign-in page's line pointing to it, under the sign-in card */
.loginstack .checkpromo { justify-self: center; text-align: center; margin: 2px 0 0; font-size: 13px; color: var(--muted); }
/* Browser Check (check.php, public): two verdict cards, edged by their verdict, each with an update link */
.checkpage h1 { font-size: 30px; color: #fff; margin: 4px 0 6px; }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
.checkgrid .box { margin-top: 0; }
.checkcard { border-left-width: 5px; }
.checkcard.v-ok { border-left-color: #3ecf6e; }
.checkcard.v-warn { border-left-color: #ffcf5a; }
.checkcard.v-bad { border-left-color: var(--red-hot); }
.checkverdict { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 18px; }
.checkverdict .chip { font-size: 13px; padding: 5px 10px; }
.checkverdict b { color: #fff; overflow-wrap: anywhere; }
/* its status chips on the This device card; the auto-update line; "Is this <name>?"; one system's history */
.invadd p .chip { margin-left: 4px; }
.invadd .checkline { color: var(--text); }
/* Inventory's main buttons and every "get the update" link: one blue pill (Steve, 2026-10-30). The buttons had no style of their own
   and took the operating system's look (blue on Steve's Windows), so it's now set here for everyone. Used for: Inventory's
   main actions (Add, Save, Upload, Get My One-Time Command), links to a device's updates, and links to a maker's update or
   download page, wherever they appear (Intelligence's newest-release cards, Browser Check, the reports). See the key at the top */
.invadd button:not(.smallbtn), .bluepill, .devrepagree .agreebtn { display: inline-block; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; color: #fff; background: #1d4ed8;
	border: 1px solid #3d9bff; border-radius: 999px; padding: 6px 14px; cursor: pointer; text-decoration: none; }
.invadd button:not(.smallbtn):hover, .bluepill:hover, .devrepagree .agreebtn:hover:not(:disabled) { background: #2563eb; color: #fff; }
.devrepagree .agreebtn:disabled { color: var(--muted); background: transparent; border-color: var(--line-2); cursor: default; }
.bluepill.small { font-size: 12px; padding: 3px 10px; }
/* a newest-release card's update link: at the bottom of its card, so the four line up (Steve, 2026-10-30) */
.newestcard .bluepill { align-self: flex-start; margin-top: auto; }
.newestcard > :nth-last-child(2) { margin-bottom: 8px; }   /* (the line above it keeps a little space) */
/* Browser Check, up to date: the update link dimmed (still there, but nothing to do) */
.checkcard.v-ok .bluepill { background: transparent; border-color: var(--line-2); color: var(--muted); font-weight: 600; opacity: .6; }
.checkcard.v-ok .bluepill:hover { opacity: 1; color: var(--text); background: transparent; }
.devreplist .mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }   /* (versions, in the browsers table) */
.devreplist .pillgap { display: block; height: 5px; }   /* (between a program's update-page pill and its command) */
.devreplist tr.upall td { border-top: 2px solid var(--line); padding-top: 10px; }   /* (the one-command row under the newer versions) */
.invadd .checkline input { accent-color: var(--red-hot); }
.invauto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.invmaybe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; padding: 12px; border: 1px solid rgba(255, 207, 90, .45); border-radius: 8px; background: rgba(255, 207, 90, .06); }
.invmaybe p { flex-basis: 100%; margin: 0; }
.invmaybe[hidden], .invmaybe [hidden] { display: none; }   /* (display: flex above would otherwise show it before a match is found) */
.invhist { margin: 10px 0 14px; padding: 12px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(0, 0, 0, .35); }
.invhist h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; color: #fff; margin: 0 0 6px; }
/* Sanity Check (Inventory's Sanity Check tab): the one-time command per OS, waiting for the report, then the results */
.sanitycheck .checkpoints { margin: 0 0 12px 18px; display: grid; gap: 6px; font-size: 14px; }
.sanitycheck kbd { font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 4px; background: #000; color: #fff; }
.devreprun { margin: 4px 0 10px; padding: 12px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(0, 0, 0, .35); }
.ostabs { display: flex; gap: 6px; margin-bottom: 10px; }
.ostabs .on { color: #fff; border-color: var(--red-hot); }
.ospanel[hidden] { display: none; }
.cmdline { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.cmdline code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; cursor: text; user-select: all; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: #fff;
	background: #000; border: 1px solid var(--line-2); border-radius: 7px; padding: 8px 10px; }
.waitdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ffcf5a; vertical-align: middle; animation: waitpulse 1.4s ease-in-out infinite; }
@keyframes waitpulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .waitdot { animation: none; } }
.devrep { margin: 6px 0 10px; }
.devrepverdict { font-size: 14px; }
.devreplist td.long { min-width: 260px; }
.devrepmore { margin-top: 8px; }
.devrepmore > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.devrepsave .checkline { flex-basis: 100%; }
/* Save: the two choices stacked on top, the name, then the buttons on their own row (Steve, 2026-10-31) */
.devrepsave .devrepchoices { flex-basis: 100%; display: grid; gap: 10px; }
.devrepsave .devrepname { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.devrepsave .devrepbtns { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.devrepagree { display: grid; gap: 10px; justify-items: start; margin: 4px 0 10px; }   /* Sanity Check's terms, before the command (like .agree) */
.devrepagree .warnnote { margin: 0; }
/* Sanity Check's Windows Copy, once it has selected the command: "Now press Ctrl+C" swells three times like Apply (applyflash) */
.cmdline .smallbtn.swell { color: #fff; border-color: var(--red-hot); animation: applyflash .6s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .cmdline .smallbtn.swell { animation: none; background: var(--red-hot); } }
body.calm .cmdline .smallbtn.swell { animation: none; background: var(--red-hot); }
.combineform select { font: inherit; font-size: 12px; color: var(--text); background: #000; border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 6px; max-width: 170px; }
.devrepsave select { font: inherit; color: var(--text); background: #000; border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 8px; margin-left: 6px; }
/* the Demo Video page (demo.php) */
.demopage .demovideo { margin: 14px 0 10px; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; background: #000; }
.demopage .demovideo video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.hostupdate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }   /* "Browser: Update available" + its link */
.hostupdate[hidden] { display: none; }
.sanitycheck .runsteps { margin: 0 0 10px 20px; display: grid; gap: 4px; }   /* the step-by-step under each OS tab */
.sanitycheck .runsteps .bluepill { margin: 2px 4px 0 0; }
.sanitycheck .wingetopt { display: block; margin: 0 0 8px; }
.sanitycheck .wingetopt[hidden] { display: none; }
.sanitycheck .reqline { border-left: 3px solid #3d9bff; padding: 6px 10px; background: rgba(61, 155, 255, .06); border-radius: 0 6px 6px 0; }   /* what it needs, before the command */
.disclaimerline { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
/* One device's updates (device-updates.php): a summary, then one roll-up per update with where to get it */
.devupdsum { margin-top: 10px; font-size: 14px; }
.devupdate h2 .chip { margin-left: 6px; vertical-align: middle; }
.devupdget { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
.devupdget .cmdline { flex-basis: 100%; }
/* a status chip that goes somewhere: the worst missing fix's CVE page, the maker's update page, a saved Sanity Check */
a.chip { text-decoration: none; cursor: pointer; }
a.chip:hover, a.chip:focus-visible { border-color: currentColor; filter: brightness(1.2); }
.vector { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--muted); margin: 0 0 16px; overflow-wrap: anywhere; }
.box { background: var(--panel); border: 2px solid var(--line); border-radius: 10px; padding: 16px; margin-top: 14px; }
.box h2 { font-size: 16px; color: #fff; margin-bottom: 10px; }
.box p { margin: 0 0 8px; }
.hotbox { border-color: var(--line-2); background: var(--panel); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.osname[class*="fam-"] { color: #fff; border-color: color-mix(in srgb, var(--c) 55%, #000) !important; }
.families a[class*="fam-"] { border-color: color-mix(in srgb, var(--c) 45%, #000); }
.families a[class*="fam-"]:hover { border-color: var(--c); }
.families a.on[class*="fam-"] { background: var(--c); border-color: color-mix(in srgb, var(--c) 65%, #fff); color: var(--on); }
/* picked by a category pill that's on ("via"): the button's own picked look (its locked colour, unchanged), faded, with
   a dashed edge, so it reads as "included" rather than picked by hand; click it to leave it out (app.js) */
.families a.via { background: var(--red); border-color: var(--red-hot); color: #fff; opacity: .6; border-style: dashed; }
.families a.via[class*="fam-"] { background: var(--c); border-color: color-mix(in srgb, var(--c) 65%, #fff); color: var(--on); }
.families a.via .osi { background: currentColor; }
.families a.via:hover { opacity: .9; }
.fixbox[class*="fam-"] { border-left: 4px solid var(--c); scroll-margin-top: 14px; }
.fixbox:target { box-shadow: 0 0 0 2px var(--c); }
.fixbox[class*="fam-"] h2 { color: var(--c); }
/* a group's box: a heading per member (its own colour and logo), then its fix line and table */
.fixbox h3.member { margin: 16px 0 2px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 16px; color: var(--c); display: flex; align-items: center; }
.fixbox h3.member .osi { background: currentColor; }
.fixbox h3.member + .fix { margin: 0 0 6px; }
/* Each OS's fixes roll up: the summary (title + the short fix line) is always shown, the table opens on click */
details.fixbox > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
details.fixbox > summary::-webkit-details-marker { display: none; }
details.fixbox > summary h2 { margin: 0; grid-column: 1; }
details.fixbox > summary .fix { grid-column: 1; margin: 0; }
details.fixbox > summary::after { content: "Show Fixes \25BE"; grid-column: 2; grid-row: 1 / span 2; font-size: 12px; font-weight: 600; white-space: nowrap;
	color: var(--c, var(--text)); border: 1px solid color-mix(in srgb, var(--c, #888) 55%, #000); border-radius: 6px; padding: 5px 10px; }
details.fixbox[open] > summary::after { content: "Hide \25B4"; }
details.fixbox[open] > summary { margin-bottom: 4px; }
/* Roll Up / Expand as a real button (app.js puts one in each rolling card's title row): only it opens and closes the card,
   so the title row isn't a click target any more; the stylesheet-drawn button it replaces is hidden */
summary.jsroll { cursor: default; }
summary.jsroll::after { content: none !important; display: none !important; }
.rolltoggle { cursor: pointer; flex: none; font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 10px; white-space: nowrap; }
.rolltoggle:hover, summary.jsroll .rollbtn:hover { color: #fff; border-color: var(--muted); }
summary.jsroll .rollbtn { cursor: pointer; }
/* a CVE page's fix box opens from its title too (app.js; Steve, 2026-10-30): the title is clickable, just its own width */
details.fixbox > summary.jsroll h2 { cursor: pointer; justify-self: start; }
details.fixbox > summary.jsroll h2:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
.rolltoggle::after { content: "Roll Up \25B4"; }
details:not([open]) > summary > .rolltoggle::after { content: "Expand \25BE"; }
details.fixbox > summary > .rolltoggle { grid-column: 2; grid-row: 1 / span 2; color: var(--c, var(--text)); border-color: color-mix(in srgb, var(--c, #888) 55%, #000); padding: 5px 10px; }
details.fixbox[open] > summary > .rolltoggle::after { content: "Hide \25B4"; }
details.fixbox:not([open]) > summary > .rolltoggle::after { content: "Show Fixes \25BE"; }
details.fixbox:not([open]) { opacity: .85; }
details.fixbox:not([open]):hover { opacity: 1; }
.osname { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); padding: 3px 7px; border-radius: 5px; }
td.what { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
span.kb { display: inline-block; }
.kb { white-space: nowrap; }
/* Disclaimer: the footer line, the note above the scripts, the full page */
.foot .disclaim { max-width: 900px; margin: 6px auto 8px; line-height: 1.5; }
.warnnote { font-size: 13px; color: #e8d7a8; background: rgba(211, 155, 44, .08); border: 1px solid rgba(211, 155, 44, .35); border-radius: 7px; padding: 8px 12px; }
.warnnote b { color: #f3c96b; }
/* a red card around anything that could break a machine (the leftover-package remove steps: Steve, 2026-10-31) */
.dangercard { font-size: 13px; background: rgba(255, 59, 59, .07); border: 1px solid rgba(255, 59, 59, .45); border-left: 4px solid var(--crit); border-radius: 7px; padding: 10px 14px; margin: 10px 0; }
.dangercard p { margin: 0 0 8px; }
.dangercard p:last-child { margin-bottom: 0; }
.legal .box p { line-height: 1.6; }
/* Server Sanity (sanity.php): each site's state as a coloured dot and word, and the add form on one line */
.sstate { font-weight: 700; white-space: nowrap; }
.sstate.up { color: #3ecf6e; }
.sstate.down { color: var(--red-hot); }
.sstate.wait { color: var(--muted); }
.sstate.warn { color: #ffcf5a; }
.certsoon { color: #ffcf5a; }
/* each site's checks as small chips (green passing, red failing, grey not yet run), and the ticks to pick them */
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip { font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 7px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; cursor: default; }
.chip.ok { color: #3ecf6e; border-color: rgba(62, 207, 110, .45); }
.chip.bad { color: var(--red-hot); border-color: color-mix(in srgb, var(--red-hot) 60%, transparent); }
/* (a full-width row: .setform's grid would otherwise shrink it to one column) */
/* the add form's picks look like a site's pills: picked = green with a tick, not picked = dimmed and dashed */
.checkpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; margin: 2px 0 0; }
.checkpick span.muted { margin-right: 4px; }
.setform .checkpick label.chip { display: inline-flex; width: auto; max-width: none; gap: 0; font-size: 12px; padding: 5px 10px; position: relative; cursor: pointer;
	color: #6b6b6b; border-style: dashed; border-color: #444; }
.setform .checkpick label.chip:has(input:checked) { color: #3ecf6e; border-style: solid; border-color: rgba(62, 207, 110, .45); }
.setform .checkpick label.chip:has(input:checked)::before { content: "\2713\00a0"; }
.setform .checkpick label.chip:hover { border-color: #fff; color: var(--text); }
.setform .checkpick label.chip:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.checkpick label.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* the DKIM selector box only while DKIM is picked */
.sanityadd:not(:has(input[value=dkim]:checked)) .selrow { display: none; }
/* the add form as its own card inside the box */
.setform.sanityadd { margin-top: 20px; padding: 16px 18px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255, 255, 255, .025); justify-items: stretch; }
.sanityadd .subhead { margin: 0; }
.setform .selrow { display: block; max-width: 420px; margin-top: 8px; }
.setform .selrow input { width: 100%; box-sizing: border-box; }
.sitechecks summary { cursor: pointer; font-size: 12px; color: var(--muted); margin-top: 6px; }
.sitechecks[open] { padding-bottom: 6px; }
/* Recheck and Remove, side by side; Recheck greyed for a minute after a check */
.siteacts { white-space: nowrap; }
.siteacts form + form { margin-left: 6px; }
.smallbtn:disabled { opacity: .4; cursor: not-allowed; }
.smallbtn:disabled:hover { border-color: var(--line-2); color: var(--text); }
/* the pills as buttons (Owners and Admins click one to turn that check on or off); an off check is dimmed and dashed */
button.chip { font-family: inherit; background: none; cursor: pointer; }
button.chip:hover { border-color: #fff; }
.chip.off { color: #6b6b6b; border-style: dashed; border-color: #444; font-weight: 600; }
button.chip.off:hover { color: var(--text); }
/* a site's DKIM selector editor: a short box, Save / Cancel */
.checksedit { margin-top: 6px; font-size: 12px; }
.checksedit p { margin: 4px 0 0; }
.autofound { font-style: italic; color: var(--muted); font-size: 11px; }
.checksedit .selrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.sitechecks .checksedit input[type=text] { width: 220px; padding: 3px 8px; font-size: 12px; border-radius: 5px; }
.checksedit .editbtns { margin-top: 8px; display: flex; gap: 6px; }
.sanityadd .addrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; width: 100%; }
.sanityadd .addrow label { flex: 1 1 260px; max-width: none; }
.sanityadd .addrow input { width: 100%; box-sizing: border-box; }
.setform.sanityadd input[type=text], .sitechecks input[type=text] { font: inherit; color: var(--text); background: #000; border: 1px solid var(--line-2); border-radius: 7px; padding: 9px 12px; }
/* System (operator/system.php): a status mark, the check and its detail, a figure on the right */
.systable td { vertical-align: top; }
.systable td.sysicon { width: 28px; font-size: 18px; }
.systable tr.sys-problem { background: color-mix(in srgb, var(--red-hot) 8%, transparent); }
.sysnow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
/* Demo Video (operator/video.php): the player at a comfortable size, and the remake steps */
.videowrap video { display: block; width: 100%; max-width: 960px; height: auto; border-radius: 8px; border: 1px solid var(--line-2); background: #000; }
ol.steps { padding-left: 22px; } ol.steps li { margin: 6px 0; line-height: 1.55; }
/* To-Do (operator/todo.php): a tick box, the item, who it's waiting on; due ones edged red; problems' group edged red */
.todolist { list-style: none; margin: 4px 0 0; padding: 0; }
.todolist li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); }
.todolist li:first-child { border-top: 0; }
.todolist li.due { box-shadow: -3px 0 0 var(--red-hot); padding-left: 8px; }
.todotext { flex: 1; min-width: 0; line-height: 1.5; }
.todotick { flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 0; border: 2px solid var(--line-2); border-radius: 5px; background: #000; color: #3ecf6e; font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer; }
.todotick:hover { border-color: #3ecf6e; }
.todotick.ticked { border-color: rgba(62, 207, 110, .45); }
.todowho { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); margin-left: 6px; white-space: nowrap; }
.todowho.who-steve { color: #ffcf5a; border-color: rgba(255, 207, 90, .45); }
.todowho.who-claude { color: #7fb2ff; border-color: rgba(127, 178, 255, .45); }
.todogroup.todo-problem { border-color: color-mix(in srgb, var(--red-hot) 45%, var(--line)); }
.todogroup.todo-hold { opacity: .8; }
body.opview .todotick { pointer-events: none; }
span.todotick { display: inline-flex; align-items: center; justify-content: center; cursor: default; }
.tododay { font-size: 13px; margin: 16px 0 2px; color: var(--muted); }
.tododay:first-of-type { margin-top: 10px; }
/* a view-only operator (the operator role): the console's change forms hidden (op_require refuses them anyway); the
   page pickers (GET forms) and Sign Out stay */
body.opview main form[method="post"], body.opview main form[method="POST"] { display: none; }
/* Scheduled Jobs (operator/jobs.php): the job column wide, the raw crontab scrolling sideways */
.jobtable td:first-child { min-width: 340px; }
.cronraw { font-size: 12px; line-height: 1.5; overflow-x: auto; background: #000; border: 1px solid var(--line-2); border-radius: 7px; padding: 10px 12px; margin: 8px 0 0; white-space: pre; }
/* Licences & Payments (operator/licenses.php): the form in a grid (long fields full width), and each entry's status */
.licform { justify-items: stretch; }
.licgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; width: 100%; }
.licgrid label { max-width: none; }
.licgrid label.wide { grid-column: 1 / -1; }
.licgrid input, .licgrid select, .licgrid textarea { width: 100%; box-sizing: border-box; }
.licgrid input[type=date], .licgrid textarea { font: inherit; color: var(--text); background: #000; border: 1px solid var(--line-2); border-radius: 7px; padding: 8px 10px; color-scheme: dark; }
.lictable td:first-child { min-width: 320px; }
/* its receipts: thumbnails (or a PDF badge) with the file name, opening full size */
.licfiles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.licfiles a { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--muted); max-width: 130px; }
.licfiles img { width: 120px; height: 80px; object-fit: cover; object-position: top; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; }
.licfiles a:hover img { border-color: #fff; }
.licpdf { display: grid; place-items: center; width: 120px; height: 80px; border: 1px solid var(--line-2); border-radius: 6px; font-weight: 800; color: var(--red-hot); }
.licattach { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 14px 0 8px; }
.licattach label { display: grid; gap: 5px; color: var(--muted); }
.licattach input[type=file] { color: var(--text); }
.licnotes { white-space: normal; }
.licst { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.licst-paid, .licst-free { color: #3ecf6e; border-color: rgba(62, 207, 110, .45); }
.licst-pending, .licst-attempted { color: #ffcf5a; border-color: rgba(255, 207, 90, .45); }
.licst-unpaid, .licst-check { color: var(--red-hot); border-color: color-mix(in srgb, var(--red-hot) 60%, transparent); }
.licst-cancelled, .licst-refunded { color: var(--muted); }
/* the status as a dropdown (picking one saves it): the pill's look, with a small arrow */
/* (form.inline: to win over the general inline-form dropdown style) */
form.inline select.licst { appearance: none; font: inherit; font-size: 12px; font-weight: 700; border-radius: 999px; color: var(--muted); border: 1px solid var(--line-2);
	background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center / 8px 5px;
	padding: 4px 26px 4px 11px; cursor: pointer; }
form.inline select.licst-paid, form.inline select.licst-free { color: #3ecf6e; border-color: rgba(62, 207, 110, .45); }
form.inline select.licst-pending, form.inline select.licst-attempted { color: #ffcf5a; border-color: rgba(255, 207, 90, .45); }
form.inline select.licst-unpaid, form.inline select.licst-check { color: var(--red-hot); border-color: color-mix(in srgb, var(--red-hot) 60%, transparent); }
form.inline select.licst:hover { border-color: #fff; }
form.inline select.licst option { color: var(--text); background: #111; font-weight: 400; }
/* each entry's Edit button (opens the full form and the receipts) */
details.licedit { margin-top: 8px; }
details.licedit > summary { display: inline-block; list-style: none; cursor: pointer; font-size: 12px; color: var(--text); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 12px; }
details.licedit > summary::-webkit-details-marker { display: none; }
details.licedit > summary:hover { border-color: #fff; }
details.licedit[open] > summary { margin-bottom: 4px; }
/* About (about.php): the full page width like the other pages (not the legal pages' narrower one), and the developer's
   motto set off as a pull quote */
.about .pullquote { margin: 18px 0; padding: 12px 18px; border-left: 4px solid var(--red-hot); background: color-mix(in srgb, var(--red-hot) 7%, transparent);
	font-size: 20px; font-weight: 700; font-style: italic; color: #fff; border-radius: 0 8px 8px 0; }
.about ul li { margin: 8px 0; line-height: 1.55; }

/* "Check your system" tabs + copy box */
/* a section that rolls up by its heading (Detection scripts): big bold uppercase title with a Roll up / Expand pill */
details.rollbox > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
details.rollbox > summary::-webkit-details-marker { display: none; }
details.rollbox > summary h2 { font-size: 22px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
details.rollbox > summary::after { content: "Roll Up \25B4"; flex: none; font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 10px; }
details.rollbox:not([open]) > summary::after { content: "Expand \25BE"; }
details.rollbox > summary:hover::after { color: #fff; border-color: var(--muted); }
details.rollbox[open] > summary { margin-bottom: 8px; }
/* Resolution scripts: the scripts only show after "I accept" (without JavaScript the agreement step is skipped) */
html.js .resolve .gated { display: none; }
html.js .resolve.ok .gated { display: block; }
.resolve.ok .agree, html:not(.js) .agree { display: none; }
.agree { display: grid; gap: 10px; justify-items: start; }
.agree .warnnote { margin: 0; }
.agreebox { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.agreebox input { width: 16px; height: 16px; accent-color: var(--red-hot); }
.agreebtn { font: inherit; font-weight: 700; color: #fff; background: var(--red); border: 1px solid var(--red-hot); border-radius: 7px; padding: 8px 18px; cursor: pointer; }
.agreebtn:disabled { color: var(--muted); background: transparent; border-color: var(--line-2); cursor: default; }
/* script tabs: folder tabs in an even grid, OS-coloured top strip, logo + name with the language under it */
.tabbar { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 6px 5px; margin-top: 8px; }
.tab { font: inherit; font-size: 13px; line-height: 1.2; cursor: pointer; display: grid; grid-template-columns: auto 1fr; align-items: center; justify-items: start;
	text-align: left; padding: 6px 10px 5px; color: #cfc4c4; background: linear-gradient(180deg, #1d1717, #120e0e); border: 1px solid var(--line-2);
	border-top: 3px solid color-mix(in srgb, var(--c, #888) 70%, #000); border-radius: 10px 10px 3px 3px; box-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.tab .osi { grid-row: 1 / span 2; width: 1.35em; height: 1.35em; margin-right: .55em; }
.tab span:not(.osi) { grid-column: 2; font-size: 10.5px; color: var(--muted); }
.tab:hover { color: #fff; border-top-color: var(--c, #888); }
.tab.on { color: #fff; font-weight: 600; border-color: color-mix(in srgb, var(--c, #888) 70%, #000); border-top-color: var(--c, #888);
	background: linear-gradient(180deg, color-mix(in srgb, var(--c, #888) 30%, #000), color-mix(in srgb, var(--c, #888) 12%, #000));
	box-shadow: 0 0 10px color-mix(in srgb, var(--c, #888) 35%, transparent); }
.tab.on span:not(.osi) { color: #e8dede; font-weight: 400; }
.pane { border: 1px solid var(--line-2); border-radius: 8px; background: #000; margin: 8px 0 10px; }
@media (max-width: 760px) { .tabbar { grid-template-columns: 1fr 1fr; } }
.js .pane { display: none; }
.js .pane.on { display: block; }
.panehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.copy { font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--red); border: 1px solid var(--red-hot); border-radius: 6px; padding: 5px 14px; cursor: pointer; white-space: nowrap; }
.copy:hover { background: var(--red-hot); }
.copy.done { background: #1f6b35; border-color: #2e9a4f; }
/* a key shown on the Account page (the installation key): the whole key in one box, picked up with one click, and Copy */
.keyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 10px; }
.keyval { font: 14px/1.4 Consolas, ui-monospace, monospace; color: #fff; background: #000; border: 1px solid var(--line-2); border-radius: 7px;
	padding: 8px 12px; word-break: break-all; user-select: all; }
.pane pre { margin: 0; padding: 12px 14px; overflow: auto; max-height: 460px; }
.pane code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; line-height: 1.5; color: #e6dcdc; white-space: pre; }
.links { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
.links h2 { width: 100%; margin-bottom: 2px; }

@media (max-width: 760px) {
	.wrap { padding: 14px 14px 24px; }
	/* phones: the header scrolls away (it would cover too much), the logo above the tabs, the tabs scroll sideways */
	.top { position: static; flex-wrap: wrap; gap: 8px; padding: 10px 14px 0; }
	html { scroll-padding-top: 0; }
	.brand img { height: 34px; width: 34px; }
	.brand.full img { height: 60px; width: auto; }
	.brand, .brand:has(.shield) { padding-bottom: 0; }
	.brand .shield { width: 36px; height: 40px; }
	.brand .shield img { height: 23px; }
	.sitetabs { flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
	.top:not(.signedout) { display: flex; padding: 10px 14px 0; }   /* phones: back to one wrapping row, each tab group full width */
	.top:not(.signedout) .brand { margin-left: 0; }
	.top:not(.signedout) .usermenu, .top:not(.signedout) .sitetabs.tabsright { margin-right: 0; }
	.sitetabs.main, .sitetabs.tabsright { justify-self: auto; }
	.osbtn { min-width: 0; }
	.fixes { display: block; }
	.fixhead { display: flex; flex-wrap: wrap; gap: 2px 14px; }
	.fixline { grid-template-columns: 1fr; row-gap: 6px; }
	.fixline .osbtn { justify-self: start; width: auto; }
	.fixline .kbs { grid-column: 1; }
	/* OS buttons on phones: only the OS list scrolls, so All / Apply / Group stay in view */
	.famroll[open] { max-height: 55vh; overflow-y: auto; }   /* (the sections scroll as one) */
	.famcard .famactions { padding: 10px; }
	.statusbar time { margin-left: 0; width: 100%; }
	.kbs { justify-content: flex-start; }
	.filters label { flex: 1 1 45%; }
	.filters select { width: 100%; }
	.strip .sort { margin-left: 0; width: 100%; }
	/* the three counts on one line: smaller, and "exploited" without "in the wild" */
	.strip { gap: 6px 14px; }
	.strip .counts { flex-basis: 100%; justify-content: flex-start; gap: 6px 14px; order: -1; }   /* the counts first on a phone */
	.strip .counts > div, .strip .counts > a { white-space: nowrap; font-size: 14px; }
	.strip b { font-size: 17px; margin-right: 3px; }
	.strip .wide { display: none; }
	.detail h1 { font-size: 23px; }
}

/* Where a Microsoft KB is available: Windows Update, WSUS, Hotpatch, and Catalog ✓ once confirmed in the Microsoft Update Catalog */
.chans { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; margin-left: 6px; }
.chan { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 2px 7px; border-radius: 4px; border: 1px solid; white-space: nowrap; cursor: help; }
.chan-wu { color: #8cc4ff; border-color: #2f6db5; background: rgba(47, 109, 181, .15); }
.chan-wsus { color: #b9a6ff; border-color: #5b46b0; background: rgba(91, 70, 176, .15); }
.chan-hotpatch { color: #ffcf7a; border-color: #a8761f; background: rgba(168, 118, 31, .15); }
.chan-cat { color: #8fe0a4; border-color: #2e8a4a; background: rgba(46, 138, 74, .15); }
/* as a button: to the KB in the Microsoft Update Catalog (or to the fix table when there are several KBs) */
a.chan-cat { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; cursor: pointer; padding: 3px 8px; }
a.chan-cat .ico { width: 9px; height: 9px; fill: currentColor; }
a.chan-cat:hover { color: #fff; border-color: #4fc274; background: rgba(46, 138, 74, .4); }
td a.chan-cat { margin-left: 6px; vertical-align: middle; }
/* not confirmed in the catalog yet: a plain grey search link */
a.chan-cat.unconfirmed { color: var(--muted); border-color: var(--line-2); background: transparent; }
a.chan-cat.unconfirmed:hover { color: #fff; border-color: var(--muted); background: transparent; }
td .chans { margin-left: 0; }

/* My Intel list (Settings): a section per kind, each item a pill in its OS / brand colour, lit when picked */
.mlbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; }
.mlbar input[type=search] { font: inherit; font-size: 14px; color: var(--text); background: #000; border: 1px solid var(--line-2); border-radius: 7px; padding: 7px 10px; width: 260px; max-width: 100%; }
.mlsec { border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px 10px; margin: 0 0 10px; }
.mlsec legend { padding: 0 6px; font-weight: 700; color: #fff; }
.mlsec .mlall { display: flex; gap: 6px; margin: 2px 0 6px; }
.mylist { display: flex; flex-wrap: wrap; gap: 8px; }
.mylist label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
	border: 1px solid color-mix(in srgb, var(--c, #888) 45%, #000); background: color-mix(in srgb, var(--c, #888) 7%, transparent); }
.mylist label:has(input:checked) { background: var(--c); border-color: color-mix(in srgb, var(--c) 65%, #fff); color: var(--on); font-weight: 600; }
.mylist label:has(input:checked) .osi { background: currentColor; }
.mylist input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mylist label:has(input:focus-visible) { outline: 2px solid var(--red-hot); outline-offset: 1px; }
.mylist label[hidden], .mlsec[hidden], .setform label[hidden] { display: none; }
/* rolled up (app.js): the first part of the list, fading out into the card, with Show All under it */
.mlbody.rolled { max-height: 300px; overflow: hidden; position: relative; }
.mlbody.rolled::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none;
	background: linear-gradient(to bottom, transparent, var(--panel)); }
.mlmore { text-align: center; margin: 6px 0 12px; }
.families a.mylistbtn { font-size: 13px; font-weight: 700; color: #ffd75e; background: #000; border: 1px solid #8a6d1c; }
.families a.mylistbtn:hover { border-color: #ffd75e; }
.families a.mylistbtn.on { background: #ffd75e; border-color: #fff0b8; color: #000; }
.savelistform { display: inline; margin: 0; }
.savelistbtn { font: inherit; font-size: 13px; font-weight: 700; color: #ffd75e; background: #000; border: 1px dashed #8a6d1c; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.savelistbtn:hover:not(:disabled) { border-style: solid; border-color: #ffd75e; }
.savelistbtn:disabled { opacity: .4; cursor: default; }

/* Update boxes on the cards: filt = an update id (funnel, solid teal edge: lists every CVE it fixes),
   ver = a version number (arrow, dashed edge: opens the fix details) */
.kb .ico, .fixfilter .ico { width: 10px; height: 10px; fill: currentColor; margin-right: 5px; vertical-align: -1px; }
.kb.filt { border-color: #2d7f86; color: #bfe9ec; }
.kb.filt:hover { border-color: #4fd1db; color: #fff; background: rgba(79, 209, 219, .1); }
/* on a card, each update box is a shade of its OS's colour */
.kb.filt[class*="fam-"] { border-color: color-mix(in srgb, var(--c) 60%, #000); color: color-mix(in srgb, var(--c) 45%, #fff);
	background: color-mix(in srgb, var(--c) 12%, #000); }
.kb.filt[class*="fam-"]:hover { border-color: var(--c); color: #fff; background: color-mix(in srgb, var(--c) 28%, #000); }
.kb.ver { border-style: dashed; color: var(--text); }
.kb.ver:hover { border-style: solid; border-color: var(--red-hot); }
.legend { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.legend .kb { pointer-events: none; }
.legend b { color: var(--text); font-weight: 600; }
.fixfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; margin: 4px 0 10px; border-radius: 9px;
	border: 1px solid #2d7f86; background: rgba(45, 127, 134, .14); color: #d8f3f5; font-size: 14px; }
.fixfilter b { color: #fff; }
.fixfilter a { margin-left: auto; color: #8fe6ee; font-weight: 600; text-decoration: none; border: 1px solid #2d7f86; border-radius: 6px; padding: 3px 10px; }
.fixfilter a:hover { background: rgba(79, 209, 219, .15); color: #fff; }

/* Check scripts: This machine / Remote machines switch, instructions and the machine list */
.modes { display: inline-flex; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; margin-right: auto; }
.mode { font: inherit; font-size: 13px; color: var(--muted); background: transparent; border: 0; padding: 5px 12px; cursor: pointer; }
.mode + .mode { border-left: 1px solid var(--line-2); }
.mode.on { background: #2d7f86; color: #fff; font-weight: 600; }
.mode:not(.on):hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.panehead { justify-content: flex-end; }
.howto { margin: 0; padding: 8px 12px 0; font-size: 13px; color: var(--muted); }
.hostsrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px 0; }
.hostsrow label { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.hostsrow input { font: 13px ui-monospace, Consolas, monospace; color: var(--text); background: #000; border: 1px solid #2d7f86; border-radius: 6px; padding: 5px 9px; width: 320px; max-width: 100%; }
.hostsrow input:focus { outline: 2px solid #4fd1db; outline-offset: 1px; }
/* "Your machines" only belongs to the Remote machines version */
.hostsrow[hidden], .howto[hidden] { display: none; }
@media (max-width: 760px) { .modes { margin-right: 0; } .hostsrow input { width: 100%; } }