/* Workhorse — security & inventory console */ /* ------------------------------------------------------------------------- Theme tokens. Default = light. Dark is opt-in via [data-theme="dark"] on , OR auto- selected when the OS prefers dark and the user has not pinned light. Print always rendered in light tokens by re-applying them inside @media print. ------------------------------------------------------------------------- */ :root { --bg: #f3f5fa; --sidebar: #ffffff; --panel: #ffffff; --panel-2: #eef2f8; --border: #d8deea; --text: #1c2333; /* primary body text */ --text-strong: #0a0f1c; /* headings, KPI numbers */ --muted: #5b6478; --code: #43506b; --accent: #0284c7; --btn-text: #ffffff; /* text drawn on accent fills */ --shadow: 0 2px 6px rgba(15, 23, 42, .06); --shadow-soft: 0 6px 18px rgba(15, 23, 42, .08); /* Semantic colors (used for both fills and accents). */ --crit: #e11d48; --high: #f97316; --med: #eab308; --low: #3b82f6; --good: #22c55e; --warn: #f59e0b; --bad: #e11d48; /* Theme-aware foregrounds for severity/score badges (text on tinted bg). */ --crit-fg: #b91c1c; --high-fg: #c2410c; --med-fg: #a16207; --low-fg: #1d4ed8; --good-fg: #15803d; --warn-fg: #b45309; /* --- Design tokens ----------------------------------------------------- A small, deliberate set of scales. Every component pulls spacing, radius and elevation from here so the whole console keeps one rhythm. ---------------------------------------------------------------------- */ /* Spacing — 4px base. Use these for margins, gaps and padding. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; /* Radius scale. xs = badges, sm = controls, md = cards/panels. */ --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-pill: 999px; --radius: 12px; /* legacy alias — equals --r-md */ /* Standard easing + duration so motion feels uniform. */ --ease: cubic-bezier(.3, .1, .2, 1); --dur-fast: .12s; --dur: .18s; /* Accent tint used for soft fills (active chips, hovers). */ --accent-soft: rgba(2, 132, 199, .10); --focus-ring: 0 0 0 3px rgba(2, 132, 199, .28); } /* User pinned dark mode. */ :root[data-theme="dark"] { --bg: #0b0f17; --sidebar: #0d1320; --panel: #141b2b; --panel-2: #1c2638; --border: #243049; --text: #e8ecf3; --text-strong: #ffffff; --muted: #8893a7; --code: #aebbd2; --accent: #38bdf8; --btn-text: #03121c; --shadow: 0 2px 8px rgba(0, 0, 0, .35); --shadow-soft: 0 8px 22px rgba(0, 0, 0, .55); --crit-fg: #fb7185; --high-fg: #fdba74; --med-fg: #fde047; --low-fg: #93c5fd; --good-fg: #4ade80; --warn-fg: #fbbf24; --accent-soft: rgba(56, 189, 248, .14); --focus-ring: 0 0 0 3px rgba(56, 189, 248, .32); } /* OS prefers dark + the user has not pinned light → apply dark tokens. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #0b0f17; --sidebar: #0d1320; --panel: #141b2b; --panel-2: #1c2638; --border: #243049; --text: #e8ecf3; --text-strong: #ffffff; --muted: #8893a7; --code: #aebbd2; --accent: #38bdf8; --btn-text: #03121c; --shadow: 0 2px 8px rgba(0, 0, 0, .35); --shadow-soft: 0 8px 22px rgba(0, 0, 0, .55); --crit-fg: #fb7185; --high-fg: #fdba74; --med-fg: #fde047; --low-fg: #93c5fd; --good-fg: #4ade80; --warn-fg: #fbbf24; --accent-soft: rgba(56, 189, 248, .14); --focus-ring: 0 0 0 3px rgba(56, 189, 248, .32); } } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } h1 { font-size: 22px; margin: 0 0 var(--s-1); font-weight: 680; letter-spacing: -.015em; color: var(--text-strong); } h2 { font-size: 15px; margin: 0 0 var(--s-3); font-weight: 650; letter-spacing: -.005em; color: var(--text-strong); } h3 { font-size: 13px; font-weight: 650; color: var(--text-strong); margin: var(--s-5) 0 var(--s-2); } .muted { color: var(--muted); } /* Numerals line up in tables and KPIs — a small but defining polish detail. */ .data-table, .kv-table, .sev-tile-num, .kpi-num, .acct-stat-num, .svc-card-count, .dil-cover-score, .donut-value { font-variant-numeric: tabular-nums; } code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; } code { background: var(--panel-2); padding: 1px 6px; border-radius: var(--r-xs); color: var(--code); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); } /* --- app shell --- */ .app { display: flex; min-height: 100vh; } .sidebar { width: 236px; flex-shrink: 0; background: var(--sidebar); border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; transition: transform .15s ease, width .15s ease; /* The brand + account switcher stay pinned at the top of the sidebar; * the nav itself scrolls inside the remaining vertical space. The * min-height:0 on .side-nav lets it shrink below its natural content * height so overflow-y can take effect. Without this the sidebar * overflows the viewport (the inventory > services drawer alone is * 16 entries tall) and the bottom-most groups become unreachable. */ overflow: hidden; } .side-nav { flex: 1; min-height: 0; overflow-y: auto; } /* Subtle scrollbar so it doesn't draw attention until the user hovers. */ .side-nav { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .side-nav::-webkit-scrollbar { width: 6px; } .side-nav::-webkit-scrollbar-track { background: transparent; } .side-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .side-nav:hover::-webkit-scrollbar-thumb { background: var(--muted); } .brand { font-size: 16px; font-weight: 700; color: var(--text-strong); padding: 4px 8px 18px; display: flex; align-items: center; gap: 8px; } .brand-mark { color: var(--accent); } .main { flex: 1; padding: var(--s-6) var(--s-8) 64px; max-width: 1320px; transition: max-width .15s ease; } /* Gentle staggered reveal on page load — the console settles into place rather than snapping. Sections fade + rise; later ones trail slightly. Fill-mode is `backwards` (NOT `both`): `both` would hold the final `transform: translateY(0)` forever, and a non-none transform creates a stacking context that traps each card's hover tooltips behind later cards. */ @media (prefers-reduced-motion: no-preference) { .main > .topbar, .main > .card, .main > section, .main > .hero, .main > .sev-tiles, .main > .card-grid, .main > .fw-tabs, .main > .kpi-row { animation: wh-rise var(--dur) var(--ease) backwards; } .main > * + * { animation-delay: .03s; } .main > * + * + * { animation-delay: .06s; } .main > * + * + * + * { animation-delay: .09s; } .main > * + * + * + * + * { animation-delay: .12s; } /* Overview cards stagger individually for a Wiz-style settle. */ .dash-grid > .card { animation: wh-rise var(--dur) var(--ease) backwards; } .dash-grid > .card:nth-child(2) { animation-delay: .04s; } .dash-grid > .card:nth-child(3) { animation-delay: .08s; } .dash-grid > .card:nth-child(4) { animation-delay: .12s; } .dash-grid > .card:nth-child(5) { animation-delay: .16s; } .dash-grid > .card:nth-child(n+6) { animation-delay: .2s; } } @keyframes wh-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* --- chrome controls (theme + sidebar toggles) --- */ .chrome-bar { position: fixed; top: 14px; right: 18px; z-index: 60; display: flex; gap: 8px; } .chrome-btn { width: 34px; height: 34px; border-radius: var(--r-sm); cursor: pointer; background: var(--panel); border: 1px solid var(--border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: var(--shadow); } .chrome-btn:hover { border-color: var(--accent); color: var(--accent); } .chrome-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); } .chrome-icon { width: 17px; height: 17px; display: block; } /* Time-travel "as of" picker that lives in the chrome bar alongside the other display controls. Visually matches .chrome-btn so it reads as part of the same toolbar; the dropdown grows wide enough to show the date. */ .chrome-asof { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); } .chrome-asof:hover { border-color: var(--accent); } .chrome-asof-icon { font-size: 14px; line-height: 1; color: var(--muted); } .chrome-asof select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 12px; padding: 0 18px 0 0; cursor: pointer; max-width: 160px; text-overflow: ellipsis; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right center; } .chrome-asof:has(option[value=""]:not(:checked)) { border-color: var(--warn); color: var(--warn-fg); } .chrome-asof:has(option[value=""]:not(:checked)) .chrome-asof-icon { color: var(--warn-fg); } /* Chrome-bar Export dropdown: the button mirrors the other chrome-btn icons; the menu drops down right-aligned, lazy-opened by whToggleExport. */ .chrome-export { position: relative; display: inline-flex; } .chrome-export-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 6px; z-index: 70; display: flex; flex-direction: column; gap: 2px; } /* The `display: flex` above outranks the user-agent's `[hidden]{display:none}` so without this explicit rule the menu is ALWAYS visible on first paint — showing JSON/CSV/MD links "floating" before any click. */ .chrome-export-menu[hidden] { display: none; } .chrome-export-item { display: block; padding: 8px 10px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: 13px; } .chrome-export-item:hover { background: var(--panel-2, var(--bg-2, rgba(127,127,127,0.08))); color: var(--accent); } /* Hidden sidebar collapses to zero and the main panel can use the full width. */ :root[data-sidebar="hidden"] .sidebar { display: none; } :root[data-sidebar="hidden"] .main { max-width: none; padding-left: 64px; } /* --- account switcher --- */ /* Compact account switcher — single-line tab-like control. The wide * "ACCOUNT / Display Name / ID" stacked layout was eating prime * sidebar real estate; the account name is also surfaced as a divider * inside the nav and as a chip in the chrome bar, so this control's * primary job is now "open the picker to jump accounts." */ .switcher { margin-bottom: 10px; } .switcher summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 12px; } .switcher summary:hover { border-color: var(--accent); } .switcher summary::-webkit-details-marker { display: none; } .switcher-label { font-size: 9.5px; text-transform: uppercase; color: var(--muted); letter-spacing: .6px; font-weight: 700; margin-right: 6px; } .switcher-id { font-weight: 600; font-size: 12.5px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .switcher-sub { display: none; } /* ID lives in the chrome chip + breadcrumb now */ .switcher-cur { display: flex; align-items: baseline; gap: 0; min-width: 0; } .switcher-caret { color: var(--muted); margin-left: 6px; } .switcher-menu { margin-top: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); max-height: 320px; overflow-y: auto; padding: 4px; } .switcher-menu a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-xs); font-size: 12.5px; } .switcher-menu a:hover { background: var(--panel-2); } .switcher-menu a.current { color: var(--accent); } .switcher-menu-name { font-weight: 600; } .switcher-meta { color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; } /* --- sortable headers + scrollable tables --- */ .table-scroll { overflow-x: auto; background: linear-gradient(to right, var(--panel) 32%, transparent) 0 0, linear-gradient(to left, var(--panel) 32%, transparent) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), transparent) 0 0, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), transparent) 100% 0; background-repeat: no-repeat; background-size: 46px 100%, 46px 100%, 18px 100%, 18px 100%; background-attachment: local, local, scroll, scroll; } .table-scroll .data-table { width: auto; min-width: 100%; } .table-scroll::-webkit-scrollbar { height: 11px; } .table-scroll::-webkit-scrollbar-track { background: var(--panel-2); border-radius: var(--r-pill); } .table-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-pill); border: 2px solid var(--panel-2); } .table-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); } .sort-link { color: var(--muted); font-weight: 600; white-space: nowrap; } .sort-link:hover { color: var(--text); } .sort-link.sorted { color: var(--accent); } /* --- side nav --- The nav is grouped into categories (Security / Inventory / Activity for per-account views; Fleet / Settings for the fleet-level views). Each category has an emoji-prefixed muted header and each link gets an item-level emoji aligned in a fixed-width gutter so the text columns stay aligned regardless of which emoji renders wider on a given OS. */ /* Three tiers of typography for an at-a-glance hierarchy: Tier 1 — top-level category header (14px, bold, strong color) Tier 2 — nested sub-category header (11px uppercase, muted) Tier 3 — page link (13.5px regular, 20px icon gutter) Indentation reinforces the hierarchy: pages indent past the category icon column; pages inside a nested sub-category indent further. */ .side-nav { display: flex; flex-direction: column; gap: 1px; } /* --- Tier 0: section divider (Fleet / Account name / Settings) --- * Uppercase scoped label that breaks the long sidebar into 3 zones so * the operator can scan "where am I" at a glance. The footer variant * (Settings) gets a margin-top:auto so it floats to the bottom of the * visible nav, no matter how short the account section is. */ .side-nav-divider { margin: 16px 16px 4px; padding: 4px 0; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--border); padding-top: 10px; } .side-nav-divider:first-child { border-top: 0; margin-top: 4px; padding-top: 0; } .side-nav-divider-foot { margin-top: auto; } /* --- Tier 3: page link (covers both direct * children and nested inside collapsible
groups). */ .side-nav a, .side-nav .side-nav-link { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 12px; margin: 0 6px; border-radius: var(--r-xs); color: var(--muted); font-weight: 500; font-size: 13px; line-height: 1.3; border-left: 2px solid transparent; text-decoration: none; transition: background .1s ease, color .1s ease, border-color .1s ease; } .side-nav a:hover { color: var(--text); background: var(--panel-2); } .side-nav a.active { color: var(--text-strong); background: var(--panel-2); border-left-color: var(--accent); font-weight: 600; } .side-nav-icon { display: inline-flex; justify-content: center; align-items: center; width: 18px; height: 18px; font-size: 13px; line-height: 1; flex-shrink: 0; opacity: .85; } .side-nav a.active .side-nav-icon { opacity: 1; } /* --- Tier 1: collapsible group header (Security, Inventory, ...) --- */ .side-nav-section { display: flex; align-items: center; gap: 10px; margin: 8px 6px 2px; padding: 6px 10px; font-size: 13px; font-weight: 650; letter-spacing: -0.1px; color: var(--text-strong); cursor: pointer; user-select: none; list-style: none; border-radius: var(--r-xs); transition: background .1s ease; } .side-nav-section:hover { background: var(--panel-2); } .side-nav-section::-webkit-details-marker { display: none; } .side-nav-section-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 14px; line-height: 1; flex-shrink: 0; } .side-nav-caret { margin-left: auto; font-size: 10px; opacity: .55; transition: transform .15s ease; } .side-nav-group:not([open]) > .side-nav-section .side-nav-caret { transform: rotate(-90deg); } .side-nav-group > .side-nav-group-body { display: flex; flex-direction: column; gap: 1px; padding-top: 1px; } .side-nav-group:not([open]) > .side-nav-group-body { display: none; } /* --- Tier 2: nested sub-category header (Per-service drill) --- */ .side-nav-group-nested { margin: 4px 0; } .side-nav-subsection { display: flex; align-items: center; gap: 8px; margin: 4px 6px 2px; padding: 4px 10px 4px 30px; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); cursor: pointer; user-select: none; list-style: none; border-radius: var(--r-xs); transition: background .1s ease, color .1s ease; } .side-nav-subsection::-webkit-details-marker { display: none; } .side-nav-subsection:hover { background: var(--panel-2); color: var(--text); } .side-nav-group-nested:not([open]) > .side-nav-subsection .side-nav-caret { transform: rotate(-90deg); } .side-nav-group-nested > .side-nav-group-body > a { padding-left: 30px; } .side-foot { margin-top: auto; padding: 12px 10px 0; color: var(--muted); font-size: 11px; } .side-foot-sub { opacity: .7; margin-top: 2px; } /* --- topbar --- Page title block on the left, optional actions on the right. The two align on their first baseline area so a one-line title and a row of buttons sit level regardless of how long the description wraps. */ .topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-6); padding-bottom: var(--s-5); /* Reserve the top-right corner for the fixed chrome controls so page actions never slide underneath them. The reservation has to be wide enough for the time-travel picker that lives alongside the icon buttons in the chrome bar. */ padding-right: 340px; border-bottom: 1px solid var(--border); } .topbar > div:first-child { min-width: 0; } .topbar h1 { margin-bottom: var(--s-1); } .topbar p { margin: 0; max-width: 76ch; font-size: 13px; } .topbar-actions { flex-shrink: 0; } /* --- account picker --- */ .acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .acct-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; transition: border-color .12s, transform .12s; box-shadow: var(--shadow); } .acct-card:hover { border-color: var(--accent); transform: translateY(-2px); } .acct-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; } .acct-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); flex-shrink: 0; } .acct-card-id { font-family: ui-monospace, monospace; font-size: 16px; font-weight: 600; color: var(--text-strong); } .acct-card-stats { display: flex; gap: 26px; margin-bottom: 16px; } .acct-stat-num { display: block; font-size: 26px; font-weight: 700; color: var(--text-strong); } .acct-stat-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .acct-card-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; } .acct-card-go { color: var(--accent); font-weight: 600; } /* --- hero (score + severity tiles) --- */ .hero { display: flex; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; } .hero-score { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; box-shadow: var(--shadow); } .hero-score.score-good { box-shadow: inset 0 -3px 0 var(--good), var(--shadow); } .hero-score.score-warn { box-shadow: inset 0 -3px 0 var(--warn), var(--shadow); } .hero-score.score-bad { box-shadow: inset 0 -3px 0 var(--bad), var(--shadow); } .hero-score-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); } /* The tile strip auto-fits any count — 3, 5 or 7 boxes all read as one deliberate row instead of an awkward wrap on a fixed 4-up grid. */ .sev-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); flex: 1; min-width: 380px; margin-bottom: var(--s-6); } .sev-tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); border-top: 3px solid var(--border); box-shadow: var(--shadow); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .sev-tile.crit { border-top-color: var(--crit); } .sev-tile.high { border-top-color: var(--high); } .sev-tile.med { border-top-color: var(--med); } .sev-tile.low { border-top-color: var(--low); } .sev-tile-num { font-size: 30px; font-weight: 720; color: var(--text-strong); line-height: 1.05; letter-spacing: -.02em; } .sev-tile-num.score-good { color: var(--good-fg); } .sev-tile-num.score-warn { color: var(--warn-fg); } .sev-tile-num.score-bad { color: var(--crit-fg); } /* Portfolio fleet tiles split into two rows so 7 boxes don't overflow a 6-wide grid: top row is "what's there + how secure" (Accounts / Resources / Avg Posture); bottom row is the severity breakdown (Critical / High / Medium / Low). The tile look is shared via the base .sev-tile rules; only the column count + margin change. */ .fleet-tiles { margin-bottom: 12px; } .fleet-tiles-context { grid-template-columns: repeat(3, 1fr); } .fleet-tiles-severity { grid-template-columns: repeat(4, 1fr); margin-bottom: var(--s-5); } .score-pill { font-weight: 700; padding: 3px 11px; border-radius: var(--r-sm); } .score-pill.score-good { color: var(--good-fg); background: rgba(34,197,94,.15); } .score-pill.score-warn { color: var(--warn-fg); background: rgba(245,158,11,.15); } .score-pill.score-bad { color: var(--crit-fg); background: rgba(225,29,72,.15); } .sev-tile-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; line-height: 1.4; } a.sev-tile { text-decoration: none; } a.sev-tile:hover { border-color: var(--accent); transform: translateY(-2px); } /* --- KPI row (scan detail) --- */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); } .kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; box-shadow: var(--shadow); } .kpi-num { font-size: 26px; font-weight: 700; color: var(--text-strong); } .kpi-num.added { color: var(--good-fg); } .kpi-num.modified { color: var(--warn-fg); } .kpi-num.removed { color: var(--crit-fg); } .kpi-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; } /* --- cards --- The card is the single surface primitive: one radius, one padding, one elevation. Every section on every page is a .card so the page rhythm is uniform. card-sub is the description line that pairs with an h2. */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-6); margin-bottom: var(--s-6); } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); margin-bottom: var(--s-6); box-shadow: var(--shadow); } .card > h2:first-child { margin-top: 0; } .card-wide { grid-column: span 2; } .card-alert { border-color: rgba(225,29,72,.5); } /* Informational note — accent-tinted left rule, never alarming red. */ .card-info { border-color: var(--border); border-left: 3px solid var(--accent); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--panel); } /* Severity-accented card — a coloured left rule marking a risk surface. Used on the Overview's Identity Risk / Internet Exposure cards. */ .card.accent-crit { border-left: 3px solid var(--crit); } .card.accent-high { border-left: 3px solid var(--high); } .card.accent-low { border-left: 3px solid var(--low); } .card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); } .card-head h2 { margin: 0; } /* Description line directly under a card heading. Sits tight to the h2 without a margin hack: the h2's own bottom margin is collapsed away. */ .card-sub { margin: calc(-1 * var(--s-2)) 0 var(--s-4); font-size: 13px; line-height: 1.5; } h2 + .card-sub { margin-top: calc(-1 * var(--s-2)); } .count-pill { font-size: 11px; background: var(--panel-2); color: var(--muted); border-radius: var(--r-pill); padding: 2px 9px; font-weight: 650; font-variant-numeric: tabular-nums; } /* --- tables --- */ .data-table { width: 100%; border-collapse: collapse; } .data-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; padding: 9px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); z-index: 1; } .data-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .data-table tbody tr { transition: background var(--dur-fast) var(--ease); } .data-table tbody tr:hover { background: var(--panel-2); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table th.th-sort { cursor: pointer; user-select: none; } .data-table th.th-sort:hover { color: var(--text); } .data-table th.th-asc::after { content: " \25B2"; color: var(--accent); } .data-table th.th-desc::after { content: " \25BC"; color: var(--accent); } .table-filter { display: block; margin: 0 0 12px; width: 280px; max-width: 100%; padding: 7px 11px; border-radius: var(--r-sm); font-size: 13px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); } .table-filter:focus { outline: none; border-color: var(--accent); } .kv-table { width: 100%; border-collapse: collapse; } .kv-table th { text-align: left; color: var(--muted); font-weight: 500; padding: 7px 14px 7px 0; vertical-align: top; white-space: nowrap; width: 1%; } .kv-table td { padding: 7px 0; word-break: break-word; color: var(--text); } .kv-table tr { border-bottom: 1px solid var(--border); } .kv-table tr:last-child { border-bottom: none; } /* --- findings --- */ .finding-title { font-weight: 600; color: var(--text-strong); } .finding-detail { color: var(--muted); font-size: 12.5px; margin-top: 2px; } .finding-fix { color: var(--text); font-size: 12.5px; margin-top: 4px; } .finding-fix-label { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: var(--r-xs); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: color-mix(in srgb, var(--good-fg) 16%, transparent); color: var(--good-fg); } .ok-line { color: var(--good-fg); font-weight: 500; margin: 4px 0; } /* --- severity badges & chips --- */ .sev-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-xs); white-space: nowrap; } .sev-badge.crit { background: rgba(225,29,72,.18); color: var(--crit-fg); } .sev-badge.high { background: rgba(249,115,22,.18); color: var(--high-fg); } .sev-badge.med { background: rgba(234,179,8,.22); color: var(--med-fg); } .sev-badge.low { background: rgba(59,130,246,.18); color: var(--low-fg); } .sev-chips { display: flex; gap: var(--s-2); margin-bottom: var(--s-5); flex-wrap: wrap; } .chip { padding: 6px 14px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; background: var(--panel); border: 1px solid var(--border); color: var(--muted); } .chip:hover { color: var(--text); } .chip.on { background: var(--panel-2); color: var(--text-strong); border-color: var(--accent); } .chip.crit.on { border-color: var(--crit); color: var(--crit-fg); } .chip.high.on { border-color: var(--high); color: var(--high-fg); } .chip.med.on { border-color: var(--med); color: var(--med-fg); } .chip.low.on { border-color: var(--low); color: var(--low-fg); } .chip-count { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: var(--panel-2, rgba(127,127,127,0.12)); color: var(--text); font-size: 11px; font-weight: 700; min-width: 16px; text-align: center; } .chip.on .chip-count { background: var(--accent); color: #fff; } .chip.crit.on .chip-count { background: var(--crit); } .chip.high.on .chip-count { background: var(--high); } .chip.med.on .chip-count { background: var(--med); color: var(--med-fg); } .chip.low.on .chip-count { background: var(--low); color: var(--low-fg); } /* --- card heading with right-aligned actions (e.g. per-table CSV download) --- */ .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } .card-head > h2 { margin: 0; } .card-csv { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); text-decoration: none; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--panel); white-space: nowrap; } .card-csv:hover { color: var(--text); border-color: var(--accent); } /* --- portfolio Resource Mix: filter pill + actions row --- */ .mix-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mix-filter { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--panel); white-space: nowrap; } .mix-filter:hover { color: var(--text); border-color: var(--accent); } .mix-filter-on { color: var(--accent); border-color: var(--accent); background: var(--panel-2); } /* --- in-card tabs (Resource Mix on /portfolio) --- */ .mix-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); border-bottom: 1px solid var(--border); } .mix-tab { background: transparent; border: 0; color: var(--muted); padding: 6px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; border-radius: 0; } .mix-tab:hover { color: var(--text); } .mix-tab.active { color: var(--text); border-bottom-color: var(--accent); } .mix-pane[hidden] { display: none; } /* --- compliance framework tabs --- */ .fw-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-5); } .fw-tab { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); min-width: 150px; } .fw-tab:hover { border-color: var(--accent); } .fw-tab.active { background: var(--panel-2); border-color: var(--accent); } .fw-tab-name { font-size: 12.5px; font-weight: 600; color: var(--text); } .fw-tab-ver { font-size: 10.5px; color: var(--muted); font-family: ui-monospace, monospace; } /* --- sub-page tabs (server-routed section navigation, e.g. /resilience) --- */ .subtabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: 0 0 var(--s-5); border-bottom: 1px solid var(--border); padding-bottom: 2px; } .subtab { padding: 8px 14px; border-radius: var(--r-sm) var(--r-sm) 0 0; font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid transparent; border-bottom: none; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; } .subtab:hover { color: var(--text); background: var(--panel-2); } .subtab.active { color: var(--text); background: var(--panel); border-color: var(--border); border-bottom: 1px solid var(--panel); } .subtab-count { font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--high) 22%, transparent); color: var(--high-fg); } /* --- per-diagram SVG download button (resilience topology/risks) --- */ .diagram-dl { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; padding: 4px 10px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; white-space: nowrap; } .diagram-dl:hover { color: var(--text); border-color: var(--accent); } @media print { .diagram-dl { display: none; } } /* --- control status badges --- */ .ctrl-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-xs); white-space: nowrap; } .ctrl-badge.ctrl-pass { background: rgba(34,197,94,.16); color: var(--good-fg); } .ctrl-badge.ctrl-fail { background: rgba(225,29,72,.18); color: var(--crit-fg); } .ctrl-badge.ctrl-manual { background: var(--panel-2); color: var(--muted); } /* --- change badges --- */ .badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; } .badge-added { background: rgba(34,197,94,.16); color: var(--good-fg); } .badge-modified { background: rgba(245,158,11,.18); color: var(--warn-fg); } .badge-removed { background: rgba(225,29,72,.16); color: var(--crit-fg); } .badge-neutral { background: var(--panel-2); color: var(--muted); } /* --- forms / buttons --- */ .filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); } .filters select, .search-input { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: var(--r-sm); font-size: 13px; } .search-input { flex: 1; min-width: 240px; } .filters select:focus, .search-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 15px; border-radius: var(--r-sm); cursor: pointer; background: var(--accent); color: var(--btn-text); font-weight: 650; font-size: 13px; border: 1px solid transparent; white-space: nowrap; transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .btn:hover { filter: brightness(1.08); } .btn:active { transform: translateY(1px); } .btn-ghost { background: var(--panel-2); color: var(--text); border-color: var(--border); } .btn-ghost:hover { filter: none; border-color: var(--accent); color: var(--accent); } .topbar-actions { display: flex; gap: var(--s-2); align-items: center; } /* --- region filter --- */ .region-filter { display: inline-flex; gap: 8px; } .region-select { padding: 8px 12px; border-radius: var(--r-sm); font-size: 13px; cursor: pointer; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); } .region-select:hover, .region-select:focus { border-color: var(--accent); outline: none; } .region-note { margin: -8px 0 16px; font-size: 12.5px; color: var(--muted); } /* --- config page --- */ .config-list { display: flex; flex-direction: column; } .config-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); } .config-row:last-child { border-bottom: none; } .config-row-id { width: 150px; flex-shrink: 0; color: var(--muted); } /* Hint below the override input: "Default from AWS Organizations: X". Sits on its own line under the input so it doesn't shrink the editable width on narrow viewports. */ .account-name-hint { flex-basis: 100%; padding-left: 162px; font-size: 12px; } .config-input { flex: 1; min-width: 0; padding: 7px 11px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; } .config-input:focus { outline: none; border-color: var(--accent); } .config-h3 { font-size: 14px; margin: 24px 0 10px; color: var(--text-strong); } .config-h4 { font-size: 12.5px; margin: 22px 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } /* --- Configuration top tabs (one per sub-page) --- */ .config-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 22px; border-bottom: 1px solid var(--border); } .config-tab { padding: 9px 16px; border-radius: var(--r-sm) var(--r-sm) 0 0; font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; } .config-tab:hover { color: var(--text); background: var(--panel-2); } .config-tab.active { color: var(--text-strong); background: var(--panel); border-color: var(--border); border-bottom-color: var(--panel); } /* --- OPA Policies sub-nav + bulk actions --- */ .opa-subnav { display: flex; gap: 6px; margin: 6px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .opa-subnav a { color: var(--muted); padding: 6px 12px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; } .opa-subnav a:hover { color: var(--text); background: var(--panel-2); } .bulk-form { margin-bottom: 22px; } .bulk-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-sm); } .bulk-bar .btn { padding: 6px 12px; font-size: 12.5px; } .bulk-form .data-table input[type="checkbox"] { transform: scale(1.15); cursor: pointer; } .policy-form { display: flex; flex-direction: column; gap: 10px; } .policy-fields { display: flex; gap: 8px; flex-wrap: wrap; } .policy-fields .config-input { flex: 1; min-width: 140px; } .policy-textarea { width: 100%; padding: 12px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.5; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); resize: vertical; } .policy-textarea:focus { outline: none; border-color: var(--accent); } .policy-form .btn { align-self: flex-start; } .policytest-label { font-size: 12px; font-weight: 650; color: var(--text-strong); margin-top: var(--s-2); } .policytest-error { white-space: pre-wrap; color: var(--crit-fg); margin-top: var(--s-2); } .rego-view { margin-top: 6px; } .rego-view summary { cursor: pointer; color: var(--accent); font-size: 12px; } .rego-view pre { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--r-sm); overflow-x: auto; background: var(--panel-2); border: 1px solid var(--border); font-size: 12px; color: var(--code); } .btn.disabled { opacity: .4; pointer-events: none; } .link { color: var(--accent); } .link:hover { text-decoration: underline; } /* --- access wizard --- Six-input form at the top, then ten code blocks (5 AWS + 5 GCP) below. Layout is a responsive two-column grid for the inputs and a vertical stack of 
 blocks below; each block has a Copy button in the head. */
.access-form { margin-bottom: 4px; }
.access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 16px;
}
.access-input { display: flex; flex-direction: column; gap: 4px; }
.access-input label { font-size: 12.5px; color: var(--muted); }
.access-input .muted { font-size: 11.5px; }
.access-block { margin-top: 14px; }
.access-block-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.access-block-head .config-h3 { margin: 0; }
.access-code {
  margin: 8px 0 0; padding: 12px 14px; border-radius: var(--r-sm); overflow-x: auto;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--code); line-height: 1.5;
  white-space: pre; tab-size: 2;
}
.btn-copy { font-size: 12px; padding: 4px 10px; }

/* --- pre-warm banner on /portfolio --- */
.warning-card {
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
}
.warning-card h2 { margin-top: 0; }

/* --- cross-cloud-incompatible rows ---
   In the per-account bundle / policy tables we render rows whose cloud
   doesn't match the account's cloud with a disabled checkbox + a "wrong
   cloud" badge. Lower opacity makes the gating visible at a glance. */
tr.row-incompatible td { opacity: 0.55; }
tr.row-incompatible td:first-child { opacity: 1; }

/* --- pager --- */
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.pager-controls { display: flex; align-items: center; gap: 12px; }

/* --- charts --- */
.chart-svg { width: 100%; height: auto; }
.bar-label { fill: var(--text); font-size: 20px; }
.bar-value { fill: var(--muted); font-size: 19px; font-weight: 600; }
.bar-track { fill: var(--panel-2); }
.chart-axis { stroke: var(--border); stroke-width: 1.5; }
.line-val { fill: var(--muted); font-size: 18px; text-anchor: middle; }
.line-lbl { fill: var(--muted); font-size: 17px; text-anchor: middle; }
.pie-wrap, .donut-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.pie-svg { width: 170px; height: 170px; flex-shrink: 0; }
.donut-svg { width: 190px; height: 190px; flex-shrink: 0; }
.donut-hole { fill: var(--panel); }
.donut-value { fill: var(--text-strong); font-size: 38px; font-weight: 750; text-anchor: middle; }
.donut-label { fill: var(--muted); font-size: 13px; text-anchor: middle; text-transform: uppercase; }
.pie-legend, .donut-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 170px; }
.pie-legend li, .donut-legend li { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 13px; }
.swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.legend-label { flex: 1; }
.legend-value { color: var(--muted); }
.gauge-svg { width: 168px; height: 100px; }
.gauge-text { font-size: 38px; font-weight: 750; text-anchor: middle; }
.gauge-track { stroke: var(--panel-2); }

/* --- treemap (resource composition) --- */
.treemap { width: 100%; height: auto; }
.treemap-tile { stroke: var(--bg); stroke-width: 2; }
.treemap-label { fill: var(--text-strong); font-size: 13px; font-weight: 600; pointer-events: none; }
.treemap-count { fill: var(--text-strong); font-size: 11px; opacity: .85; pointer-events: none; }

/* --- sparkline (inline trend in a table cell) --- */
.sparkline { width: 168px; height: 36px; display: block; }
.spark-cell { width: 180px; }

/* --- meters --- */
.meter { display: inline-block; width: 150px; height: 8px; vertical-align: middle; background: var(--panel-2); border-radius: var(--r-pill); overflow: hidden; margin-right: 8px; }
.meter-fill { height: 100%; background: var(--accent); border-radius: var(--r-pill); }

/* --- new chart primitives (round 2: service-inventory pages) --- */
.tm-block { stroke: var(--bg); stroke-width: 2; }
.tm-label { fill: #fff; font-size: 14px; font-weight: 600; pointer-events: none; }
.tm-value { fill: #fff; font-size: 13px; opacity: .9; pointer-events: none; }
/* Each ring is a CSS grid with a fixed-height row for the SVG and an auto
   row for the label. With .ring-row also top-aligning its children, this
   guarantees the graphic never moves regardless of how the label wraps —
   labels can be 1, 2, or 3 lines and the rings always share the same y. */
.kpi-ring {
  display: grid;
  grid-template-rows: 84px auto;
  justify-items: center;
  padding: 6px 10px;
  gap: 6px;
  min-width: 110px;
}
.kpi-ring-svg { width: 84px; height: 84px; align-self: center; }
.kpi-ring-num { fill: var(--text-strong); font-size: 28px; font-weight: 700; }
.kpi-ring-lbl { color: var(--muted); font-size: 12px; text-align: center; max-width: 120px; align-self: start; line-height: 1.3; }

/* --- service hub tile grid --- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.svc-card {
  display: flex; flex-direction: column;
  padding: 18px 18px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  position: relative; overflow: hidden;
  min-height: 200px;
}
.svc-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.svc-card-head { display: flex; align-items: flex-start; gap: 12px; }
.svc-card-emoji {
  font-size: 28px; line-height: 1;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--panel-2); border-radius: var(--r-md);
}
.svc-card-titlewrap { flex: 1; min-width: 0; }
.svc-card-title {
  font-size: 17px; font-weight: 700; color: var(--text-strong);
  line-height: 1.2; margin-bottom: 3px;
}
.svc-card-sub {
  color: var(--muted); font-size: 12px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-card-statrow {
  display: flex; align-items: baseline; gap: 8px;
  margin: 14px 0 10px;
}
.svc-card-count {
  font-size: 36px; font-weight: 750; color: var(--text-strong);
  line-height: 1; letter-spacing: -0.5px;
}
.svc-card-countlbl { color: var(--muted); font-size: 12px; }
.svc-card-types {
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--border);
  padding-top: 10px; margin-top: auto;
}
.svc-card-type {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
}
.svc-card-typelbl {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.svc-card-typeval { color: var(--text-strong); font-weight: 600; padding-left: 8px; }
.svc-card-type.muted .svc-card-typelbl { opacity: .7; font-style: italic; }
.svc-card-empty-note {
  border-top: 1px solid var(--border);
  padding-top: 10px; margin-top: auto;
  color: var(--muted); font-size: 12px; font-style: italic;
}
.svc-card-empty { opacity: .5; }
.svc-card-empty:hover { opacity: 1; }

/* --- fleet landing page: collapsible public-IP groups --- */
.card-sub-inline { font-size: 13px; }
.fleet-ipgroup {
  border-top: 1px solid var(--border);
  padding: 10px 0;
}
.fleet-ipgroup:first-of-type { border-top: 0; padding-top: 16px; }
.fleet-ipgroup > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 4px 0;
}
.fleet-ipgroup > summary::-webkit-details-marker { display: none; }
.fleet-ipgroup > summary::before {
  content: "▸"; color: var(--muted); font-size: 11px;
  transition: transform .15s ease;
  margin-right: 4px;
}
.fleet-ipgroup[open] > summary::before { transform: rotate(90deg); }
.fleet-ipgroup-name { font-weight: 700; font-size: 14px; }
.fleet-ipgroup > summary:hover .fleet-ipgroup-name { color: var(--accent); }
.fleet-ipgroup > .table-scroll { margin-top: 10px; }

/* Breadcrumb above the topbar — "Fleet › Account › Section". Renders on
 * every account-scoped page and on fleet rollups (except the homes
 * themselves). Subtle so it doesn't compete with the page title. */
.breadcrumb {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px; font-size: 12px; color: var(--muted);
  margin-bottom: var(--s-3);
  letter-spacing: 0.02em;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }
.breadcrumb-sep { color: var(--border); font-weight: 700; }

/* Back-from-fleet contextual link — appears on per-account pages when
 * the Referer is a fleet page, so the operator returns to the rollup
 * they came from with one click instead of using browser back. */
.back-from-fleet {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  margin-bottom: var(--s-2);
}
.back-from-fleet:hover { color: var(--accent); }

/* Always-visible account chip in the chrome bar — sticky-scrolls with
 * the user so they always know which account they're inspecting,
 * regardless of how far they've scrolled past the sidebar. */
.chrome-acct {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; margin-right: 4px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 12px; color: var(--text-strong);
  text-decoration: none; max-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chrome-acct:hover { border-color: var(--accent); color: var(--accent); }
.chrome-acct .chrome-acct-label {
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 9.5px;
  color: var(--muted); font-weight: 700;
}

/* Sticky data-table headers so long fleet tables (IAM Audit, Changes,
 * Certificates) keep their column labels visible as the user scrolls
 * down. Cheap: pure CSS, no JS. Lives on the  so it works
 * regardless of whether the table is inside .table-scroll or not. */
.data-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel);
  /* Tiny shadow under the row when content scrolls behind, so the
   * header stays visually separated from body rows. */
  box-shadow: inset 0 -1px 0 var(--border);
}
@media print { .data-table thead th { position: static; box-shadow: none; } }

/* --- skip-to-content keyboard shortcut (a11y) ---
 * Hidden until focused via Tab, then jumps the keyboard user past the
 * sidebar straight into the page content. Standard a11y pattern. */
.skip-to-content {
  position: absolute; top: -100px; left: 8px; z-index: 200;
  background: var(--accent); color: #fff;
  padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 700; font-size: 13px; text-decoration: none;
  transition: top .15s ease;
}
.skip-to-content:focus { top: 8px; outline: 2px solid var(--text); outline-offset: 2px; }

/* Account-switcher quick-filter input — appears at the top of the
 * dropdown for fleets large enough to make scrolling annoying. */
.switcher-filter {
  width: 100%;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); font-size: 12.5px;
  padding: 6px 10px; margin-bottom: 6px;
  border-radius: var(--r-xs);
}
.switcher-filter:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.switcher-menu a.filtered-out { display: none; }

/* --- fleet stale-scan warning banner on / --- */
.stale-scan-banner {
  border-left: 4px solid var(--crit, #e11d48);
  background: linear-gradient(180deg, rgba(225,29,72,0.06) 0%, var(--panel) 60%);
}
.stale-scan-banner h2 { color: var(--text); }
.stale-scan-list {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.stale-scan-list li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13px;
}

/* --- certificates page: in-use-by list --- */
.cert-inuse {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px;
}
.cert-inuse li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.cert-inuse .muted { font-size: 10.5px; }

/* --- service-group detail page: TOC + collapsible sections --- */
.svc-toc .svc-toc-actions { display: flex; gap: 6px; }
.svc-toc-btn {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  padding: 4px 10px; border-radius: var(--r-xs);
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
.svc-toc-btn:hover { color: var(--text); border-color: var(--accent); }
.svc-toc-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px 14px; margin-top: 8px;
}
.svc-toc-list a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 10px; border-radius: var(--r-xs);
  color: var(--text); text-decoration: none;
  border: 1px solid transparent;
  font-size: 13px;
}
.svc-toc-list a:hover { background: var(--panel-2); border-color: var(--border); color: var(--accent); }

/* The collapsible section card. We reuse the .card surface but turn off
 * the default 
/ marker and provide our own chevron so
 * the row looks like the card heading the operator already knows. */
.svc-section { padding: 0; }
.svc-section > .svc-section-head {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; user-select: none;
  border-radius: var(--r-md);
}
.svc-section > .svc-section-head::-webkit-details-marker { display: none; }
.svc-section > .svc-section-head::before {
  content: "▸"; color: var(--muted); font-size: 12px;
  width: 12px; text-align: center;
  transition: transform .15s ease;
}
.svc-section[open] > .svc-section-head::before { transform: rotate(90deg); }
.svc-section > .svc-section-head:hover { background: var(--panel-2); }
.svc-section-title {
  flex: 1; font-size: 15px; font-weight: 700; color: var(--text-strong);
  line-height: 1.2;
}
.svc-section-head .count-pill { margin-left: 4px; }
.svc-section-body { padding: 0 18px 18px; }
.svc-section[open] > .svc-section-head { border-bottom: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) 0 0; margin-bottom: 14px; }
.svc-section:target > .svc-section-head { box-shadow: inset 3px 0 0 var(--accent); }
@media print {
  .svc-section { padding: var(--s-4); }
  .svc-section > .svc-section-head { padding: 0; cursor: default; }
  .svc-section > .svc-section-head::before { content: ""; width: 0; }
  .svc-section > .svc-section-body { padding: 8px 0 0; }
  .svc-section:not([open]) > .svc-section-body { display: block !important; }
  .svc-toc, .svc-toc-actions { display: none; }
}

/* --- service hub overview (donut + top-types side by side) --- */
.services-overview {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.4fr);
  gap: 28px;
  align-items: start;
}
.services-overview-left h2,
.services-overview-right h2 { margin-top: 0; }
@media (max-width: 900px) {
  .services-overview { grid-template-columns: 1fr; }
}

/* --- ring row used to display several KPIs side by side --- */
/* align-items:start so every tile's top edge (the SVG) lines up. Was
   flex-end, which made the longest-label tile push every shorter-label
   ring upward — exactly the misalignment users see on /services/compute. */
.ring-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }

/* --- discovery report ---
   A standalone document: a centred column of standard .card containers, one
   per section, so the report uses the exact same card the rest of the
   console does. .dil-page only adds print-page-break behaviour. */
.diligence { display: flex; flex-direction: column; gap: var(--s-6); max-width: 940px; margin: 0 auto; }
.diligence > .card { margin-bottom: 0; }
.dil-page { page-break-after: always; }
.dil-page:last-child { page-break-after: auto; }
.dil-page h3 {
  margin: var(--s-6) 0 var(--s-3); font-size: 13px;
  text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
}

/* Numbered section header — a number chip, a title and a one-line brief. */
.dil-section-head {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding-bottom: var(--s-4); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.dil-num {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--btn-text);
  font-weight: 750; font-size: 16px;
}
.dil-section-head h2 { margin: 2px 0 0; font-size: 19px; }
.dil-section-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Cover page — restrained, centred, with the score as the focal element.
   It is a standard .card; the extra vertical padding gives it a title-page
   feel without changing the card surface. */
.dil-cover {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-6);
  text-align: center; padding: var(--s-8) var(--s-6);
}
.dil-cover-eyebrow { color: var(--muted); letter-spacing: 4px; text-transform: uppercase; font-size: 11px; }
.dil-cover-account { font-size: 34px; font-weight: 720; color: var(--text-strong); margin-top: var(--s-2); letter-spacing: -.02em; }
.dil-cover-id { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; color: var(--muted); font-size: 13px; margin-top: 4px; }
.dil-cover-grade {
  display: inline-flex; align-items: center; gap: var(--s-6);
  padding: var(--s-5) var(--s-8); border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.dil-cover-grade.grade-good { background: rgba(34,197,94,.10);  border-color: rgba(34,197,94,.4); }
.dil-cover-grade.grade-warn { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.4); }
.dil-cover-grade.grade-bad  { background: rgba(225,29,72,.10);  border-color: rgba(225,29,72,.4); }
.dil-cover-scorewrap { text-align: center; }
.dil-cover-score { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.dil-cover-scoremax { font-size: 22px; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.dil-cover-scorelbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); margin-top: var(--s-2);
}
.grade-good .dil-cover-score { color: var(--good-fg); }
.grade-warn .dil-cover-score { color: var(--warn-fg); }
.grade-bad  .dil-cover-score { color: var(--crit-fg); }
/* The grade word sits behind a divider so it never reads as part of the
   number — it is the qualitative verdict, not a count. */
.dil-cover-gradeword {
  font-size: 26px; font-weight: 750; color: var(--text-strong);
  padding-left: var(--s-6); border-left: 1px solid var(--border);
}
.dil-cover-stats { display: flex; gap: var(--s-6); flex-wrap: wrap; justify-content: center; }
.dil-cover-stat { display: flex; flex-direction: column; gap: 2px; }
.dil-cover-stat .n { font-size: 26px; font-weight: 720; color: var(--text-strong); }
.dil-cover-stat .n.crit { color: var(--crit-fg); }
.dil-cover-stat .n.high { color: var(--high-fg); }
.dil-cover-stat .l { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.dil-toc {
  width: 100%; max-width: 440px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--panel-2); padding: var(--s-4) var(--s-5);
  text-align: left;
}
.dil-toc-head { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 700; margin-bottom: var(--s-2); }
.dil-toc ol { margin: 0; padding-left: 24px; }
.dil-toc li { padding: 3px 0; color: var(--text); font-size: 13px; }
.dil-cover-foot { font-size: 12px; color: var(--muted); }

/* Executive summary — donut beside the four roll-up facts. */
.dil-summary {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-6);
  align-items: center; margin-bottom: var(--s-2);
}
.dil-summary-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.dil-fact {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
}
.dil-fact-n { display: block; font-size: 24px; font-weight: 720; color: var(--text-strong); }
.dil-fact-l { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

.dil-risks { list-style: none; counter-reset: dilrisk; margin: 0; padding: 0; }
.dil-risks li {
  display: flex; gap: var(--s-3); align-items: baseline;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--border);
}
.dil-risks li:last-child { border-bottom: none; }
.dil-risk-body { flex: 1; line-height: 1.55; }
.dil-risk-count {
  display: inline-block;
  margin: 0 4px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--panel-2);
  color: var(--text-strong);
  border: 1px solid var(--border);
}

/* Identity stat grid + readiness summary chips. */
.dil-statgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-3); margin-bottom: var(--s-5);
}
.dil-stat {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
}
.dil-stat .n { display: block; font-size: 22px; font-weight: 720; color: var(--text-strong); }
.dil-stat .n.bad { color: var(--crit-fg); }
.dil-stat .n.warn { color: var(--warn-fg); }
.dil-stat .l { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.dil-readiness-summary { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }

/* Compliance pass-rate bar inside the scoreboard table. */
.dil-bar {
  display: inline-block; width: 140px; height: 8px; vertical-align: middle;
  background: var(--panel-2); border-radius: var(--r-pill); overflow: hidden; margin-right: 8px;
}
.dil-bar-fill { height: 100%; border-radius: var(--r-pill); }
.dil-bar-fill.good { background: var(--good); }
.dil-bar-fill.warn { background: var(--warn); }
.dil-bar-fill.bad  { background: var(--crit); }
.dil-bar-pct { font-weight: 650; font-variant-numeric: tabular-nums; }

/* Remediation playbook tiers. */
.dil-tier { margin-bottom: var(--s-6); }
.dil-tier:last-child { margin-bottom: 0; }
.dil-tier-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.dil-tier-badge {
  font-weight: 700; font-size: 12px; padding: 4px 12px; border-radius: var(--r-pill);
}
.dil-tier-badge.tier-0  { background: rgba(225,29,72,.16);  color: var(--crit-fg); }
.dil-tier-badge.tier-30 { background: rgba(245,158,11,.18); color: var(--warn-fg); }
.dil-tier-badge.tier-90 { background: var(--panel-2);       color: var(--muted); }
.dil-tier-cap { color: var(--muted); font-size: 13px; flex: 1; }

/* Sign-off page. */
.dil-signoff { min-height: 420px; }
.dil-signoff-meta { max-width: 460px; margin-bottom: var(--s-8); }
.dil-sign-rows { display: flex; flex-direction: column; gap: var(--s-8); max-width: 460px; }
.dil-sign-row { display: flex; flex-direction: column; gap: var(--s-1); }
.dil-sign-line { border-bottom: 1.5px solid var(--text); height: 26px; }
.dil-sign-cap { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }

@media (max-width: 720px) {
  .dil-summary { grid-template-columns: 1fr; }
  .dil-page { padding: var(--s-6) var(--s-5); }
}

@media print {
  body { background: white !important; color: black !important; }
  .sidebar, .chrome-bar, .topbar, .no-print { display: none !important; }
  .main { padding: 0 !important; margin: 0 !important; }
  .app { display: block !important; }
  .dil-page { border: none !important; background: white !important; box-shadow: none !important; padding: 16mm 14mm; }
  .diligence { gap: 0; max-width: none; }
  .data-table { font-size: 11px; }
  /* Confidentiality footer renders on EVERY printed page via @page fixed
     position. Required by legal so an exported PDF can't be passed around
     without the notice. White-space: pre-line keeps operator-authored
     line breaks intact. */
  .confidentiality-footer {
    position: fixed; bottom: 6mm; left: 14mm; right: 14mm;
    border-top: 1px solid #999; padding-top: 4px;
    font-size: 9px; color: #444; text-align: center;
    white-space: pre-line;
  }
}
/* Hide print-only elements on screen — they exist in the DOM so they can
   appear on every printed page via the @page rule above. */
.print-only { display: none; }
@media print { .print-only { display: block !important; } }
.meter-fill.ok { background: var(--good); }
.meter-fill.bad { background: var(--warn); }
.control-cell { white-space: nowrap; }
.formula {
  font-family: ui-monospace, monospace; font-size: 13px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 12px 14px; margin: 0 0 14px;
}

/* --- account Overview dashboard ----------------------------------------
   A 12-column grid whose cells are the SAME .card primitive used on every
   other page — so the Overview reads as part of the same product, not a
   bolt-on. Cards in the grid flex-column so chart bodies and stat lists
   stretch to give every row a level baseline. */
.dash-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--s-6); align-items: stretch;
}
.dash-grid > .card {
  margin-bottom: 0;
  display: flex; flex-direction: column;
}
.span-4  { grid-column: span 4; }
.span-6  { grid-column: span 6; }
.span-8  { grid-column: span 8; }
.span-12 { grid-column: span 12; }

/* card-link — the muted "drill-in" affordance in a .card-head. */
.card-link {
  font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.card-link:hover { color: var(--accent); }

/* Chart.js canvases need a sized, positioned parent (responsive + no aspect
   ratio means the chart fills the box). Helper-emitted charts carry an inline
   pixel height; Overview cards instead let the box flex to fill the card so
   every row of the dashboard keeps a level baseline. */
.wh-chart-box { position: relative; }
.dash-grid .wh-chart-box { flex: 1 1 auto; min-height: 158px; }
.dash-grid .wh-chart-gauge { min-height: 150px; max-height: 188px; }
.dash-grid .wh-chart-tall { min-height: 230px; }

/* Posture card — gauge + grade + a 4-up severity row. */
.ov-posture { flex: 1; display: flex; flex-direction: column; gap: var(--s-3); justify-content: space-between; }
.ov-gauge { display: flex; flex-direction: column; align-items: center; flex: 1; }
.ov-grade { font-size: 15px; font-weight: 700; margin-top: var(--s-1); }
.ov-grade.grade-good { color: var(--good-fg); }
.ov-grade.grade-warn { color: var(--warn-fg); }
.ov-grade.grade-bad  { color: var(--crit-fg); }
.ov-sevrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); width: 100%; }
.ov-sevcell {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: var(--s-2) 4px; border-radius: var(--r-xs);
  background: var(--panel-2); text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.ov-sevcell:hover { background: var(--border); }
.ov-sevcell .n { font-size: 20px; font-weight: 720; font-variant-numeric: tabular-nums; }
.ov-sevcell .n.crit { color: var(--crit-fg); }
.ov-sevcell .n.high { color: var(--high-fg); }
.ov-sevcell .n.med  { color: var(--med-fg); }
.ov-sevcell .n.low  { color: var(--low-fg); }
.ov-sevcell .l { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }

/* Stat-list — "big number + label" rows. Fills the card so a short stat
   card paired with a tall list card leaves no dead space. */
.stat-list {
  list-style: none; margin: 0; padding: 0;
  flex: 1; display: flex; flex-direction: column; justify-content: space-evenly;
}
.stat-list li {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--border);
}
.stat-list li:first-child { padding-top: 0; }
.stat-list li:last-child { border-bottom: none; padding-bottom: 0; }
.stat-n {
  font-size: 26px; font-weight: 720; color: var(--text-strong);
  font-variant-numeric: tabular-nums; min-width: 52px;
}
.stat-n.bad  { color: var(--crit-fg); }
.stat-n.warn { color: var(--warn-fg); }
.stat-l { color: var(--muted); font-size: 13px; line-height: 1.4; }

/* Overview list — severity badge + title/sub + optional count. */
.ov-list { list-style: none; margin: 0; padding: 0; }
.ov-list li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--border);
}
.ov-list li:first-child { padding-top: 0; }
.ov-list li:last-child { border-bottom: none; padding-bottom: 0; }
.ov-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ov-list-title {
  font-weight: 600; color: var(--text-strong); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-list-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Org-readiness segmented bar. */
.ov-readybar {
  display: flex; height: 12px; border-radius: var(--r-pill);
  overflow: hidden; background: var(--panel-2); margin-bottom: var(--s-4);
}
.ov-readybar .seg { display: block; }
.ov-readybar .seg-pass   { background: var(--good); }
.ov-readybar .seg-fail   { background: var(--crit); }
.ov-readybar .seg-manual { background: var(--muted); }
.ov-readystats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); flex: 1; align-content: center; }
.ov-readystats > div { text-align: center; }
.ov-readystats .n { display: block; font-size: 24px; font-weight: 720; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ov-readystats .l { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

/* Compliance framework list. */
.fw-list { list-style: none; margin: 0; padding: 0; }
.fw-list li {
  display: grid; grid-template-columns: 1.4fr 140px 48px 1.6fr;
  align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--border);
}
.fw-list li:first-child { padding-top: 0; }
.fw-list li:last-child { border-bottom: none; padding-bottom: 0; }
.fw-list-name { font-weight: 600; color: var(--text-strong); font-size: 13px; }
.fw-list-pct { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.fw-list-meta { font-size: 11.5px; }
.fw-list .dil-bar { width: 100%; margin: 0; }

@media (max-width: 1180px) {
  .span-4 { grid-column: span 6; }
  .span-8 { grid-column: span 6; }
}
@media (max-width: 760px) {
  .dash-grid { grid-template-columns: 1fr; }
  .span-4, .span-6, .span-8, .span-12 { grid-column: span 1; }
}

/* --- hover tooltips --- */
.info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; vertical-align: middle;
  border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); font: italic 700 10px/1 Georgia, "Times New Roman", serif;
  cursor: help; position: relative; flex-shrink: 0;
}
.info:hover, .info:focus { color: var(--text); border-color: var(--accent); outline: none; }
.info::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 280px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 11px;
  font: 400 12px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: left; white-space: normal; letter-spacing: normal; text-transform: none;
  box-shadow: var(--shadow-soft);
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
  z-index: 60; pointer-events: none;
}
.info:hover::after, .info:focus::after { opacity: 1; visibility: visible; }

/* --- calc popovers (rich tooltip used next to scores) --------------------- */
/* .info is single-string only because it puts content in ::after's attr().
   .calc-pop hosts real HTML so we can show the per-severity breakdown table
   that explains how a score was derived. */
.calc-pop {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px; margin-left: 6px;
  vertical-align: middle;
  border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); font: 600 10.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.04em; text-transform: uppercase; cursor: help;
  position: relative;
}
.calc-pop:hover, .calc-pop:focus, .calc-pop:focus-within {
  color: var(--text); border-color: var(--accent); outline: none;
}
.calc-pop-body {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: max-content; max-width: 360px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 12px 14px; box-shadow: var(--shadow-soft);
  font: 400 12px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: left; white-space: normal; letter-spacing: normal; text-transform: none;
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
  z-index: 60;
}
.calc-pop:hover .calc-pop-body,
.calc-pop:focus .calc-pop-body,
.calc-pop:focus-within .calc-pop-body { opacity: 1; visibility: visible; }
.calc-pop-body h4 {
  margin: 0 0 8px 0; font-size: 12px; font-weight: 700;
  color: var(--text); letter-spacing: 0.02em;
}
.calc-pop-body table {
  width: 100%; border-collapse: collapse; margin: 4px 0;
  font-variant-numeric: tabular-nums;
}
.calc-pop-body th, .calc-pop-body td {
  padding: 3px 8px 3px 0; font-size: 11.5px; text-align: left;
  border: 0;
}
.calc-pop-body th { color: var(--muted); font-weight: 600; }
.calc-pop-body td.num, .calc-pop-body th.num { text-align: right; padding-right: 0; }
.calc-pop-body tr.calc-total td {
  border-top: 1px solid var(--border); font-weight: 700; padding-top: 5px;
}
.calc-pop-body .calc-formula {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow-x: auto;
}
.calc-pop-body .calc-note { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
@media print { .calc-pop { display: none; } }

/* --- misc --- */
.empty {
  color: var(--muted); padding: var(--s-5);
  text-align: center; border: 1px dashed var(--border);
  border-radius: var(--r-sm); background: var(--panel-2);
  font-size: 13px;
}
.json-block { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px; overflow-x: auto; font-size: 12px; color: var(--code); max-height: 460px; }
.error-page { text-align: center; padding: 90px 20px; }
.error-code { font-size: 64px; font-weight: 800; color: var(--accent); }
.error-page h1 { margin: 8px 0; }
.error-page .btn { margin-top: 18px; }

/* --- faceted inventory layout ------------------------------------------- */
.facet-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.facet-rail { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 12px; }
.facet-group {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px 12px; box-shadow: var(--shadow);
}
.facet-group-head {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); font-weight: 700; margin-bottom: 6px;
}
.facet-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.facet-list li { margin: 0; }
.facet-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--r-xs); font-size: 12px; color: var(--text);
}
.facet-row:hover { background: var(--panel-2); }
.facet-row.active { background: var(--panel-2); color: var(--accent); font-weight: 600; }
.facet-row.active::before { content: "× "; color: var(--accent); font-weight: 700; }
.facet-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-count { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.facet-row.active .facet-count { color: var(--accent); }
.facet-content { margin-bottom: 0; }

.facet-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.facet-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
}
.facet-pill:hover { border-color: var(--bad); color: var(--bad); }
.facet-pill-x { color: var(--muted); font-weight: 700; }

@media (max-width: 980px) {
  .facet-layout { grid-template-columns: 1fr; }
  .facet-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .facet-group { min-width: 220px; flex: 1; }
}

/* --- modals (palette + help) --------------------------------------------- */
.wh-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: 84px; }
.wh-modal[hidden] { display: none; }
.wh-modal-backdrop {
  position: absolute; inset: 0; background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}
:root[data-theme="dark"] .wh-modal-backdrop,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wh-modal-backdrop { background: rgba(0, 0, 0, .65); }
}

.wh-palette-box {
  position: relative; width: min(720px, 92vw); max-height: 80vh;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-soft); display: flex; flex-direction: column;
  overflow: hidden;
}
#wh-palette-input {
  width: 100%; padding: 16px 20px; font-size: 17px;
  background: transparent; color: var(--text-strong);
  border: none; border-bottom: 1px solid var(--border);
  outline: none;
}
#wh-palette-input::placeholder { color: var(--muted); }
.wh-palette-results {
  flex: 1; overflow-y: auto; padding: 4px;
}
.wh-palette-row {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: baseline;
  padding: 9px 14px; border-radius: var(--r-sm); color: var(--text);
}
.wh-palette-row:hover, .wh-palette-row.selected { background: var(--panel-2); }
.wh-palette-row.selected { outline: 1px solid var(--accent); }
.wh-palette-kind {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--accent); font-weight: 700;
}
.wh-palette-label { font-weight: 600; color: var(--text-strong); }
.wh-palette-sub { font-size: 12px; font-family: ui-monospace, monospace; }
.wh-palette-empty { padding: 22px; color: var(--muted); text-align: center; }
.wh-palette-foot {
  display: flex; gap: 14px; padding: 8px 16px; font-size: 11.5px;
  border-top: 1px solid var(--border); background: var(--panel-2);
  align-items: center;
}
.wh-palette-foot kbd {
  font-family: ui-monospace, monospace; font-size: 11px; padding: 1px 6px;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
  background: var(--panel); color: var(--text);
}
.wh-palette-took { margin-left: auto; }

.wh-help-box {
  position: relative; width: min(540px, 92vw); max-height: 80vh;
  overflow: auto; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-soft);
  padding: 20px 24px;
}
.wh-help-box h2 { margin-bottom: 12px; }
.wh-help-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wh-help-table th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px 12px 6px 0; vertical-align: middle; }
.wh-help-table td { padding: 6px 0; vertical-align: middle; }
.wh-help-table kbd {
  font-family: ui-monospace, monospace; font-size: 12px; padding: 1px 7px;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
  background: var(--panel-2); color: var(--text); margin: 0 1px;
}
.wh-help-section {
  padding-top: 14px !important; color: var(--accent) !important; text-transform: uppercase;
  font-size: 11px !important; letter-spacing: .6px; font-weight: 700;
}

/* --- license / attribution page --- */
.license-block {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 14px 16px; font-family: ui-monospace, monospace; font-size: 12px;
  line-height: 1.55; color: var(--text); white-space: pre-wrap; overflow-x: auto;
  margin: 12px 0 0;
}
.license-block-long { max-height: 540px; overflow: auto; }
.license-details { margin-top: 10px; }
.license-details summary {
  cursor: pointer; color: var(--accent); font-weight: 600; padding: 6px 0;
  user-select: none;
}
.license-details summary:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Print / Save-as-PDF. Force the light token set regardless of the active
   screen theme, hide chrome controls + sidebar, and let main expand fully.
   ------------------------------------------------------------------------- */
@media print {
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    --bg:           #ffffff;
    --sidebar:      #ffffff;
    --panel:        #ffffff;
    --panel-2:      #f4f6fa;
    --border:       #c9d0dc;
    --text:         #15192a;
    --text-strong:  #060a14;
    --muted:        #4d5566;
    --code:         #3a4258;
    --accent:       #0369a1;
    --btn-text:     #ffffff;
    --shadow:       none;
    --shadow-soft:  none;

    --crit-fg: #991b1b;
    --high-fg: #9a3412;
    --med-fg:  #854d0e;
    --low-fg:  #1e40af;
    --good-fg: #166534;
    --warn-fg: #92400e;
  }
  .sidebar, .chrome-bar, .no-print { display: none !important; }
  .app, .main {
    display: block; max-width: none; padding: 0;
  }
  .card, .card-alert, .kpi, .acct-card, .sev-tile, .hero-score {
    background: #fff; border: 1px solid #c9d0dc; break-inside: avoid; box-shadow: none;
  }
  .data-table tbody tr:hover { background: transparent; }
  a { color: inherit !important; text-decoration: none !important; }
  .topo-svg { height: 480px; break-inside: avoid; }
}

/* --- small screens collapse the sidebar into a horizontal strip --- */
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .side-foot { display: none; }
  .card-wide { grid-column: span 1; }
  .sev-tiles { grid-template-columns: repeat(2, 1fr); min-width: 0; }
  .main { padding: var(--s-4) var(--s-4) 48px; }
  .topbar { padding-right: 0; flex-wrap: wrap; }
}

/* --- scan staleness ----------------------------------------------------- */
/* The dashboard is only as current as the last scan. These styles flag
   inventory whose newest scan has aged past the freshness thresholds
   (see staleClass / staleLabel in server.go). */
.scan-stale-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-6);
  border-radius: var(--r-md);
  border: 1px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--panel));
  color: var(--warn-fg);
  font-size: 13px;
}
.scan-stale-banner.scan-stale {
  border-color: var(--crit);
  background: color-mix(in srgb, var(--crit) 12%, var(--panel));
  color: var(--crit-fg);
}
.scan-stale-banner strong { color: inherit; }
.scan-stale-icon { font-size: 15px; line-height: 1; }

/* Table-cell tinting for the fleet picker's Last Scan column. */
td.scan-aging { color: var(--warn-fg); }
td.scan-stale { color: var(--crit-fg); }
.stale-flag {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--warn) 20%, transparent);
  color: var(--warn-fg);
}
td.scan-stale .stale-flag {
  background: color-mix(in srgb, var(--crit) 20%, transparent);
  color: var(--crit-fg);
}

/* Time-travel scan picker shown on pages that support point-in-time views.
   A subtle inline form rather than a popup so the operator can switch
   without losing the page they're on. */
.time-travel {
  display: flex;
  align-items: center;
  margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: var(--r-md);
  font-size: 12.5px;
}
.time-travel-form {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
}
.time-travel-form label { color: var(--muted); font-weight: 600; }
.time-travel-form select {
  flex: 1;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12.5px;
}

/* Callout — a compact inline notice used by the tag drill-down banner and
   the resilience page. Colour variants tint the border + wash. */
.callout {
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-6);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--panel);
  font-size: 13px;
  line-height: 1.5;
}
.callout code { font-size: 12px; }
.callout-info {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.callout-warn {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
  color: var(--warn-fg);
}
.callout-bad {
  border-left-color: var(--crit);
  background: color-mix(in srgb, var(--crit) 10%, var(--panel));
  color: var(--crit-fg);
}
.callout-good {
  border-left-color: var(--good);
  background: color-mix(in srgb, var(--good) 10%, var(--panel));
  color: var(--good-fg);
}

/* Time-travel banner sits at the top of every page, so it has to keep
   clear of the fixed chrome bar in the top-right corner. */
.time-travel-banner { margin-right: 340px; }
@media (max-width: 900px) { .time-travel-banner { margin-right: 0; margin-top: 56px; } }

/* Uploaded branding logo sits in the topbar where the wordmark used to live.
   max-height/max-width with object-fit:contain means any image scales down
   to fit cleanly while preserving aspect ratio — a wide logo, a tall one,
   and a square one all land at the right size with no distortion, and a
   small logo keeps its natural size rather than being stretched up. */
.brand-logo {
  display: block;
  max-height: 40px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.brand-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.branding-preview {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.branding-preview .brand-logo {
  max-height: 64px;
  max-width: 280px;
}

/* Footer the layout shows when a website or tagline is configured. */
.branding-footer {
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}
.branding-footer .branding-tagline { color: var(--text); }

/* Branded header block on the M&A discovery report cover. Centred column
   that stretches across the cover card so the border-bottom is a full-
   width divider rather than a stray underline beneath the content. */
.dil-cover-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  align-self: stretch;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.dil-cover-brand .dil-cover-logo {
  max-height: 64px;
  max-width: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.dil-cover-brand .dil-cover-brandname {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.dil-cover-brand .dil-cover-tagline {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Resilience-risk row dim once an operator has chosen to accept or claim
   the risk as mitigated. In-progress rows get a subtle warning tint. */
.data-table tr.risk-mitigated,
.data-table tr.risk-accepted { opacity: 0.55; }
.data-table tr.risk-in-progress {
  background: color-mix(in srgb, var(--warn) 6%, transparent);
}
.risk-status-select {
  font-size: 11.5px;
  padding: 2px 6px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
}

/* Mermaid diagram containers. The library renders SVG into the 
; we
   center it, give it breathing room, and let it scale with the viewport. */
pre.mermaid {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin: var(--s-3) 0;
  overflow-x: auto;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  min-height: 80px;
}
pre.mermaid svg { max-width: 100%; height: auto; }
pre.mermaid[data-processed="true"] { color: inherit; }

/* Collapsible "How is this calculated?" explainer on the Resilience page. */
.score-explainer {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.score-explainer > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  user-select: none;
  padding: 4px 0;
  list-style: none;
}
.score-explainer > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 120ms ease;
}
.score-explainer[open] > summary::before { transform: rotate(90deg); }
.score-explainer > summary:hover { color: var(--text); }
.score-explainer[open] > summary { color: var(--text); margin-bottom: var(--s-3); }
.explainer-body { font-size: 13px; line-height: 1.55; color: var(--text); }
.explainer-body p { margin: var(--s-2) 0; }
.explainer-h4 {
  margin: var(--s-4) 0 var(--s-2);
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-strong);
}
.explainer-formula {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  margin: var(--s-2) 0;
  white-space: pre-wrap;
}
.explainer-list { margin: var(--s-2) 0; padding-left: var(--s-5); }
.explainer-list li { margin: 4px 0; }

/* AZ-spread badges on the Resilience page. */
.az-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.az-badge.multi {
  background: color-mix(in srgb, var(--good) 20%, transparent);
  color: var(--good-fg);
}
.az-badge.single {
  background: color-mix(in srgb, var(--warn) 20%, transparent);
  color: var(--warn-fg);
}
.az-badge.none {
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  color: var(--muted);
}

/* --- per-workload resilience insights (resilience.html) ------------------- */
.wl-insights > summary {
  cursor: pointer; font-size: 12px; color: var(--accent);
  list-style: none; white-space: nowrap;
}
.wl-insights > summary::-webkit-details-marker { display: none; }
.wl-insights > summary::before { content: "▸ "; }
.wl-insights[open] > summary::before { content: "▾ "; }
.wl-insight-body { margin-top: 6px; font-size: 12.5px; max-width: 520px; }
.wl-insight-body strong {
  display: block; margin-top: 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.wl-insight-body ul { margin: 3px 0 0; padding-left: 18px; }
.wl-insight-body li { margin: 2px 0; line-height: 1.45; }
.wl-flags { margin-top: 8px; font-size: 11.5px; }

/* --- RBAC: auth, login & user management ----------------------------------- */

/* Inline banners reused by the login page and the Users config section. */
.banner { padding: 10px 14px; border-radius: var(--r-pill, 8px); margin: 0 0 14px;
          font-size: 13.5px; border: 1px solid transparent; }
.banner-ok  { background: rgba(34,197,94,.12);  color: var(--good-fg); border-color: rgba(34,197,94,.30); }
.banner-bad { background: rgba(225,29,72,.12);  color: var(--crit-fg); border-color: rgba(225,29,72,.30); }

.badge-bad { background: rgba(225,29,72,.16); color: var(--crit-fg); }

.btn-danger { color: var(--crit-fg); border-color: rgba(225,29,72,.35); }
.btn-danger:hover { background: rgba(225,29,72,.10); border-color: var(--bad); color: var(--bad); filter: none; }

/* One-time credential reveal after create / reset. */
.cred-box { display: flex; flex-direction: column; gap: 3px; margin-top: 8px;
            padding: 8px 12px; background: var(--panel-2); border-radius: 6px;
            user-select: all; word-break: break-all; }

.config-subhead { margin: 22px 0 10px; font-size: 15px; }
.config-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.inline-form { display: inline; margin: 0; }

/* Standalone login page (rendered without the chrome bar / sidebar). */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
              padding: 24px; background: var(--bg); }
.login-card { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--border);
              border-radius: 12px; padding: 28px 26px; box-shadow: 0 8px 30px rgba(0,0,0,.10); }
.login-logo { display: block; max-height: 48px; margin: 0 auto 14px; }
.login-card h1 { font-size: 19px; margin: 0 0 4px; text-align: center; }
.login-card .login-sub { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 20px; }
.login-field { margin-bottom: 14px; }
.login-field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.login-field input { width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 14px;
                     background: var(--bg); color: var(--text); border: 1px solid var(--border);
                     border-radius: 7px; }
.login-field input:focus { outline: none; border-color: var(--accent); }
.btn-block { width: 100%; box-sizing: border-box; justify-content: center; padding: 10px; font-size: 14px; }

/* Signed-in identity block in the chrome bar. */
.chrome-user { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
               padding-left: 8px; border-left: 1px solid var(--border); }
.chrome-user-name { display: inline-flex; flex-direction: column; line-height: 1.1;
                    text-decoration: none; color: var(--text); font-size: 12px; padding: 2px 4px; }
.chrome-user-name:hover { color: var(--accent); }
.chrome-user-role { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }