:root { color-scheme: dark; /* Surfaces: a cool, near-neutral slate. Low chroma keeps the severity colours — the only thing that should shout — legible against it. */ --bg: #080b11; --panel: #10151e; --panel-soft: #161d28; --line: #1e2733; --line-strong: #2c3847; --text: #e7ecf3; --muted: #8593a6; --dim: #5d6b7d; /* One accent, an indigo-blue that reads as instrumentation rather than decoration. Everything accent-tinted derives from --accent-rgb. */ --accent-rgb: 82, 130, 246; --accent: rgb(var(--accent-rgb)); --accent-hi: #7ba0f9; --accent-hover: #6b93f8; --accent-press: #3f6be0; --accent-deep: #3159c4; --accent-100: #dbe5fe; --accent-200: #b4cafc; --accent-link: #9cbafb; --accent-link-hover: #c3d6fd; --accent-soft: rgba(var(--accent-rgb), .14); /* Status. Desaturated a step from the neon defaults so a critical finding looks urgent instead of the whole page looking urgent. */ --green: #35c98b; --yellow: #e8b23c; --orange: #ef8744; --red: #ef5a5a; --blue: #5b9df7; --cyan: #38bdf8; --content-width: 1500px; --secondary: #1c2532; --secondary-hover: #263243; --ring: rgba(var(--accent-rgb), .55); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 12px 28px rgba(0, 0, 0, .3); --ease: cubic-bezier(.4, 0, .2, 1); --speed: 160ms; --speed-slow: 260ms; } * { box-sizing: border-box; } /* A class-level `display` outranks the UA stylesheet's [hidden] rule, so any component styled with display:grid/flex stays on screen when scripts hide it. That is how the download progress bar and the password strength meter both rendered at rest. Settle it once, here. */ [hidden] { display: none !important; } /* Full-bleed bands are 100vw inside a centred column, so the sliver they overhang by has to be clipped or the page scrolls sideways. The clip belongs on , not . On the root element overflow propagates to the viewport and the root itself paints as `visible`, so nothing is left holding a clip. Put it on and becomes a clipping box that eats its own fixed-position children — which is why the back-to-top button never appeared no matter what the script did to it. `clip` rather than `hidden` throughout: hidden would make the viewport a scroll container on both axes and break every sticky rail. */ /* `scrollbar-gutter` reserves the vertical scrollbar's strip whether or not there is one to draw. Without it a tall tab and a short tab lay out against viewports ~15px apart, and every switch between them nudged the whole console sideways. */ html { scroll-behavior: smooth; overflow-x: clip; scrollbar-gutter: stable; } body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; background: radial-gradient(900px 520px at 50% -8%, rgba(var(--accent-rgb), .1), transparent 70%), linear-gradient(180deg, #10151f 0, var(--bg) 46%) fixed; color: var(--text); font: 14px/1.55 Inter, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent-link); text-underline-offset: 3px; transition: color var(--speed) var(--ease); } a:hover { color: var(--accent-link-hover); } code, pre { font-family: "Cascadia Code", Consolas, monospace; } main { flex: 1 0 auto; width: min(var(--content-width), calc(100% - 32px)); margin: 24px auto 72px; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---------- motion ---------- */ @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } /* Scroll-revealed sections opt out: a filled animation would pin opacity to 1 and defeat the reveal's starting state. */ main > *:not([data-reveal]) { animation: rise var(--speed-slow) var(--ease) both; } details[open] > *:not(summary) { animation: reveal 220ms var(--ease); } /* Scroll reveals. Scoped to .js-ready so the content is never stranded invisible when the script does not run. Reversible: scrolling back up returns each element to its starting position, so the page reads the same in both directions rather than going flat once seen. */ .js-ready [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); will-change: opacity, transform; } .js-ready [data-reveal="left"] { transform: translateX(-38px); } .js-ready [data-reveal="right"] { transform: translateX(38px); } .js-ready [data-reveal="zoom"] { transform: scale(.94); } .js-ready [data-reveal="rise"] { transform: translateY(44px); } .js-ready [data-reveal].is-visible { opacity: 1; transform: none; } .js-ready [data-reveal-delay="1"] { transition-delay: 80ms; } .js-ready [data-reveal-delay="2"] { transition-delay: 160ms; } .js-ready [data-reveal-delay="3"] { transition-delay: 240ms; } .js-ready [data-reveal-delay="4"] { transition-delay: 320ms; } .js-ready [data-reveal-delay="5"] { transition-delay: 400ms; } /* A side-in reveal only makes sense while the thing it reveals sits beside something else. Once the showcase folds to a single column each half is already the full width of the page, so translating it 38px to the right simply hangs it over the edge — which is the horizontal scrollbar that appeared on phones. Below the fold-point they all rise instead. */ @media (max-width: 1100px) { .js-ready [data-reveal="left"], .js-ready [data-reveal="right"] { transform: translateY(26px); } } /* ---------- top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 20; flex: 0 0 auto; border-bottom: 1px solid var(--line); background: rgba(9, 12, 18, .78); backdrop-filter: blur(14px); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(var(--content-width), calc(100% - 32px)); margin: 0 auto; padding: 16px 0; } .topnav { display: flex; gap: 4px; align-items: center; } .topnav a, .linklike { display: inline-flex; align-items: center; min-height: 36px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0 12px; background: none; color: var(--muted); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; transition: color var(--speed) var(--ease), background var(--speed) var(--ease); } .topnav a:hover, .linklike:hover { background: rgba(255, 255, 255, .06); color: var(--text); } .inline-form { display: inline-flex; margin: 0; } h1, h2, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: 23px; font-weight: 650; letter-spacing: -.01em; } h2 { margin-bottom: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; } .eyebrow { margin-bottom: 4px; color: var(--accent-link); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } /* ---------- status pills ---------- */ .pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; line-height: 1.45; white-space: nowrap; animation: pop-in 200ms var(--ease) both; } .pill::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; } /* Each status/severity class publishes its own RGB triple, so every component that carries one (pill, score chip, icon tile) can derive a matching tint, border, and ring from a single source instead of restating the colour. */ .risk-low, .pill.active { --sev: 53, 201, 139; color: var(--green); } .risk-medium, .pill.warning { --sev: 232, 178, 60; color: var(--yellow); } .risk-high { --sev: 239, 135, 68; color: var(--orange); } .risk-critical, .pill.revoked { --sev: 239, 90, 90; color: var(--red); } .pill.neutral { --sev: 133, 147, 166; color: #c3cddb; } .risk-low, .risk-medium, .risk-high, .risk-critical { background: rgba(var(--sev), .1); } .pill.active, .pill.revoked, .pill.warning, .pill.neutral, .pill.risk-low, .pill.risk-medium, .pill.risk-high, .pill.risk-critical { border-color: rgba(var(--sev), .3); background: rgba(var(--sev), .1); } /* ---------- surfaces ---------- */ .summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .summary-grid article, .panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(23, 31, 45, .96), rgba(13, 18, 27, .96)); box-shadow: var(--shadow-md); } .summary-grid article { padding: 18px; animation: rise 320ms var(--ease) both; transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease); } .summary-grid article:hover { border-color: var(--line-strong); transform: translateY(-2px); } .summary-grid article:nth-child(2) { animation-delay: 50ms; } .summary-grid article:nth-child(3) { animation-delay: 100ms; } .summary-grid article:nth-child(4) { animation-delay: 150ms; } .summary-grid article:nth-child(5) { animation-delay: 200ms; } .summary-grid article:nth-child(6) { animation-delay: 250ms; } .summary-grid span { display: block; color: var(--muted); } .summary-grid strong { display: block; margin-top: 8px; font-size: 28px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .summary-grid code { display: block; margin-top: 10px; overflow-wrap: anywhere; } .panel { margin-bottom: 18px; overflow: hidden; animation: rise 320ms var(--ease) both; } .panel-heading { padding: 18px 20px; border-bottom: 1px solid var(--line); } .panel-body { padding: 20px; } /* ---------- forms ---------- */ .upload-form { display: grid; gap: 20px; padding: 22px 20px; } .upload-group { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 18px 18px; background: rgba(8, 11, 16, .3); } .upload-group legend { padding: 0 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .upload-fields { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 18px; align-items: start; } label { color: var(--muted); font-weight: 600; } input, select { width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: #0c1119; color: var(--text); font: inherit; transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease); } /* The rule above is written for text fields. A checkbox is not one: left to inherit it, it stretches to the width of its row and grows a 6px top margin, which is why the profile module list read as a column of smeared boxes. */ input[type="checkbox"], input[type="radio"] { width: auto; margin-top: 0; padding: 0; accent-color: var(--accent); } input:hover, select:hover { border-color: var(--line-strong); } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); } input::placeholder { color: var(--dim); } /* The native control parks its arrow hard against the right edge, far from the value. Draw our own and inset it instead. */ select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2394a3b8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px 8px; cursor: pointer; } select:hover, select:focus { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23eef3fa' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E"); } select option { background: #0c1119; color: var(--text); } input[type="file"] { padding: 6px; } input[type="file"]::file-selector-button { min-height: 34px; margin-right: 10px; border: 1px solid var(--line); border-radius: 7px; padding: 7px 12px; background: var(--secondary); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: background var(--speed) var(--ease); } input[type="file"]::file-selector-button:hover { background: var(--secondary-hover); } .upload-fields label { display: flex; flex-direction: column; min-width: 0; } .upload-fields label small { margin-top: 6px; color: var(--muted); font-weight: 400; } /* ---------- buttons ---------- */ button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; /* White-on-accent must clear 4.5:1, which the bright accent does not (3.6). The ramp below runs 5.6 → 6.3 at rest and 4.8 → 5.6 on hover, so the button still lifts visibly without dropping under AA. The bright accent stays for borders, icons, and links, where the rules are looser. */ background: linear-gradient(180deg, #3760cf, var(--accent-deep)); color: #fff; font: inherit; font-weight: 600; letter-spacing: .01em; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .18); transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } button:hover, .button:hover { background: linear-gradient(180deg, var(--accent-press), #3760cf); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .22); } button:active, .button:active { background: linear-gradient(180deg, var(--accent-deep), #2a4dae); transform: translateY(0); box-shadow: var(--shadow-sm); } button:disabled, .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } button.secondary, .button.secondary { border-color: var(--line-strong); background: var(--secondary); color: var(--text); box-shadow: var(--shadow-sm); } button.secondary:hover, .button.secondary:hover { border-color: #384657; background: var(--secondary-hover); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); } button.secondary:active, .button.secondary:active { background: var(--secondary); } button.compact, .button.compact { min-height: 34px; padding: 7px 12px; font-size: 13px; } button.danger { border-color: rgba(239, 90, 90, .4); background: rgba(239, 90, 90, .12); color: #fecdd3; box-shadow: none; } button.danger:hover { background: rgba(239, 90, 90, .2); color: #fff; box-shadow: 0 4px 14px rgba(239, 90, 90, .2); } button.danger:active { background: rgba(239, 90, 90, .28); } /* ---------- tables ---------- */ .table-wrap { overflow-x: auto; } /* A wide table scrolls, and with a mouse it has to *look* like it scrolls: the default bar fades out when the pointer is elsewhere, leaving a table that is merely truncated as far as the reader can tell. Only for fine pointers, though. Touch devices scroll a table by dragging it and draw an overlay bar while you do; styling ::-webkit-scrollbar there replaces that with a permanent classic bar under every table, which is clutter nobody asked for. */ @media (pointer: fine) { .table-wrap { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .table-wrap::-webkit-scrollbar { height: 9px; } .table-wrap::-webkit-scrollbar-track { background: transparent; } .table-wrap::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--line-strong); } .table-wrap::-webkit-scrollbar-thumb:hover { background: #3d4b5e; } } table { width: 100%; border-collapse: collapse; } th, td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } th { background: rgba(8, 11, 16, .45); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } tbody tr { transition: background var(--speed) var(--ease); } tbody tr:hover { background: rgba(255, 255, 255, .025); } tbody tr:last-child td { border-bottom: 0; } td small { display: block; color: var(--muted); } td code { overflow-wrap: anywhere; } .empty { padding: 28px; color: var(--muted); text-align: center; } .empty strong { display: block; margin-bottom: 4px; color: var(--text); font-weight: 600; } /* ---------- flashes ---------- */ .flash { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; cursor: pointer; overflow: hidden; /* A concrete height to animate from: max-height cannot transition out of `none`, and the flash is a line or two of text. */ max-height: 12rem; animation: rise 300ms var(--ease) both; transition: opacity var(--speed-slow) var(--ease), transform var(--speed-slow) var(--ease), margin var(--speed-slow) var(--ease), max-height var(--speed-slow) var(--ease); } /* Collapse the row as it goes, so the content below does not jump. */ .flash.is-leaving { max-height: 0; margin-bottom: 0; padding-block: 0; border-width: 0; opacity: 0; transform: translateY(-6px); } .flash.success { border-color: rgba(53, 201, 139, .35); background: rgba(53, 201, 139, .08); } .flash.error { border-color: rgba(239, 90, 90, .35); background: rgba(239, 90, 90, .08); } pre { margin: 0; overflow: auto; padding: 18px; background: #06090e; color: #d8e2f0; } .finding { border-top: 1px solid var(--line); padding: 16px 20px; } .finding summary { display: flex; gap: 10px; align-items: center; cursor: pointer; } .finding pre { margin-top: 14px; border-radius: var(--radius-sm); } /* ---------- headings ---------- */ .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 10px 0 22px; } .page-heading h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 650; letter-spacing: -.02em; } .page-subtitle { margin: 8px 0 0; color: var(--muted); } .back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--muted); text-decoration: none; transition: color var(--speed) var(--ease), transform var(--speed) var(--ease); } .back-link:hover { color: var(--text); transform: translateX(-2px); } /* The block sits at the right of the heading (the flex row puts it there), but its text reads left-aligned: right-aligning a sentence that wraps leaves a ragged left edge, which is what made the account help text look crooked. */ .heading-help { max-width: 480px; margin: 0; color: var(--muted); } .split-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* ---------- expand all ---------- Always the last thing on the right of the panel's own heading — never beside the title on one panel and out at the edge on another. It governs that panel, so its antecedent is obvious, and it lands in the same place on every one of them. */ .heading-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: flex-end; } .heading-actions .heading-help { text-align: right; } .expand-toggle { display: inline-grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; min-height: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--secondary); color: var(--muted); box-shadow: none; } .finding-group-heading .expand-toggle { margin-left: auto; } .expand-toggle:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), .5); background: var(--accent-soft); color: var(--accent-100); transform: none; box-shadow: none; } .expand-toggle:active { transform: none; box-shadow: none; } .expand-toggle svg { grid-area: 1 / 1; transition: opacity var(--speed) var(--ease), transform var(--speed-slow) var(--ease); } .expand-toggle .collapse-glyph, .expand-toggle[aria-expanded="true"] .expand-glyph { opacity: 0; transform: scale(.7); } .expand-toggle[aria-expanded="true"] .collapse-glyph { opacity: 1; transform: none; } .expand-toggle[aria-expanded="true"] { border-color: rgba(var(--accent-rgb), .45); background: var(--accent-soft); color: var(--accent-100); } .muted { color: var(--muted); } .field-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; } .risk-badge { display: grid; grid-template-columns: auto auto; align-items: baseline; min-width: 150px; border: 1px solid rgba(var(--sev, 133, 147, 166), .35); border-radius: var(--radius-lg); padding: 12px 16px; background: rgba(var(--sev, 133, 147, 166), .12); box-shadow: inset 0 0 24px rgba(var(--sev, 133, 147, 166), .1); } .risk-badge span { grid-column: 1 / -1; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; } .risk-badge strong { font-size: 38px; font-weight: 650; line-height: 1; letter-spacing: -.02em; } .risk-badge small { margin-left: 3px; } .summary-grid .summary-text { font-size: 20px; } /* Seven tiles sharing a column with the rail: auto-fit keeps them on one row when they fit and reflows them evenly when they do not, rather than stranding the last tile alone on a second row. */ .scan-summary { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); } .scan-summary strong { font-size: 24px; } .scan-summary .summary-text { font-size: 16px; } /* Coverage is one status story, not seven unrelated dashboard cards. The completion figure anchors the row while exceptions remain easy to scan. */ .coverage-overview { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(520px, 1.8fr); align-items: stretch; border-bottom: 1px solid var(--line); background: rgba(8, 12, 19, .24); } .coverage-completion { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-right: 1px solid var(--line); } .coverage-completion-value { display: flex; align-items: baseline; min-width: max-content; } .coverage-completion-value strong { color: var(--accent-100); font-size: 38px; font-weight: 680; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .coverage-completion-value span { margin-left: 5px; color: var(--muted); font-size: 16px; } .coverage-completion-label { display: block; font-weight: 650; } .coverage-completion p { margin: 5px 0 0; color: var(--muted); font-size: 13px; } .coverage-metrics { display: grid; grid-template-columns: repeat(6, minmax(92px, 1fr)); align-items: stretch; margin: 0; } .coverage-metrics > div { display: flex; min-width: 0; flex-direction: column-reverse; justify-content: center; gap: 6px; padding: 18px 16px; border-right: 1px solid rgba(133, 147, 166, .12); } .coverage-metrics > div:last-child { border-right: 0; } .coverage-metrics dt { color: var(--muted); font-size: 12px; line-height: 1.35; } .coverage-metrics dd { margin: 0; color: var(--text); font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; } .coverage-metrics dd.has-exception { color: var(--red); } .coverage-metrics dd.has-warning { color: var(--yellow); } .coverage-details { background: rgba(8, 12, 19, .18); } .coverage-details > summary { display: flex; align-items: center; gap: 10px; padding: 15px 24px; color: var(--accent-link); cursor: pointer; font-weight: 600; list-style: none; transition: color var(--speed) var(--ease), background var(--speed) var(--ease); } .coverage-details > summary::-webkit-details-marker { display: none; } .coverage-details > summary::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--speed) var(--ease); } .coverage-details[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); } .coverage-details > summary:hover { color: var(--accent-link-hover); background: var(--accent-soft); } .coverage-details > summary small { margin-left: auto; color: var(--muted); font-weight: 500; } .coverage-details .evidence-summary { padding-top: 0; } /* ---------- tabs ---------- */ .tab-list { position: sticky; top: calc(var(--topbar-h, 90px) + 8px); z-index: 10; display: flex; gap: 6px; margin: 0 0 18px; padding: 6px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #0b0f16; scrollbar-width: thin; } .tab-list button { flex: 1 0 auto; min-width: 120px; border: 1px solid transparent; background: transparent; color: var(--muted); font-weight: 500; box-shadow: none; } .tab-list button:hover { background: rgba(255, 255, 255, .05); color: var(--text); transform: none; box-shadow: none; } .tab-list button span { margin-left: 6px; border-radius: 999px; padding: 2px 8px; background: rgba(255, 255, 255, .08); font-size: 11px; font-weight: 600; transition: background var(--speed) var(--ease), color var(--speed) var(--ease); } .tab-list button[aria-selected="true"] { border-color: rgba(var(--accent-rgb), .45); background: var(--accent-soft); color: var(--accent-100); font-weight: 600; } .tab-list button[aria-selected="true"] span { background: rgba(var(--accent-rgb), .3); color: var(--accent-100); } .tab-panel { scroll-margin-top: calc(var(--topbar-h, 90px) + 76px); } .tab-panel:focus { outline: none; } .tab-panel:not([hidden]) { animation: rise var(--speed-slow) var(--ease) both; } /* ---------- workspace rail ---------- Two levels of navigation in one column: the category tabs, and the sections inside whichever tab is open. A scan can carry hundreds of rows per tab, so every section is reachable without scrolling the panel end to end. */ .workspace { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 20px; align-items: start; } .workspace-main { min-width: 0; } .workspace-rail { position: sticky; top: calc(var(--topbar-h, 90px) + 16px); z-index: 10; display: grid; gap: 12px; max-height: calc(100vh - var(--topbar-h, 90px) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* Opaque, not blurred. A backdrop-filter on a sticky element repaints its whole area on every scroll frame; the top bar already pays that cost, and a second blurred layer sitting over a page of evidence tables is what made scrolling stutter. Nothing shows through behind the rail anyway. */ .tab-rail { display: grid; gap: 3px; padding: 7px; border: 1px solid var(--line); border-radius: 14px; background: #0b0f16; } .tab-rail button { justify-content: space-between; min-height: 38px; padding: 8px 12px; border: 1px solid transparent; background: transparent; color: var(--muted); font-weight: 500; text-align: left; box-shadow: none; } .tab-rail button:hover { background: rgba(255, 255, 255, .05); color: var(--text); transform: none; box-shadow: none; } .tab-rail button[aria-selected="true"] { border-color: rgba(var(--accent-rgb), .45); background: var(--accent-soft); color: var(--accent-100); font-weight: 600; } .rail-count { border-radius: 999px; padding: 2px 8px; background: rgba(255, 255, 255, .08); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background var(--speed) var(--ease), color var(--speed) var(--ease); } .tab-rail button[aria-selected="true"] .rail-count { background: rgba(var(--accent-rgb), .3); color: var(--accent-100); } .section-rail { border: 1px solid var(--line); border-radius: 14px; padding: 12px 10px; background: rgba(9, 12, 18, .6); } .rail-title { margin: 0 0 8px; padding-left: 12px; color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .section-links { display: grid; gap: 2px; } .section-link { display: flex; gap: 8px; align-items: center; justify-content: space-between; border-left: 2px solid var(--line); padding: 7px 10px; color: var(--muted); font-size: 13px; text-decoration: none; transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease), color var(--speed) var(--ease); } .section-link:hover { border-left-color: var(--line-strong); background: rgba(255, 255, 255, .04); color: var(--text); } .section-link.is-current { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent-100); font-weight: 600; } .rail-tally { flex: 0 0 auto; border-radius: 999px; padding: 1px 7px; background: rgba(255, 255, 255, .07); font-size: 11px; font-variant-numeric: tabular-nums; } /* The rail parks a section under the sticky top bar, not behind it. */ [data-section] { scroll-margin-top: calc(var(--topbar-h, 90px) + 20px); } .required-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--red); } .field-required, .field-optional { margin-left: 4px; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; } .field-required { color: #fda4af; font-weight: 600; } .field-optional { color: var(--dim); font-weight: 500; } .form-action { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 4px; } .form-action small { margin-right: auto; color: var(--muted); } /* ---------- score list ---------- Two different facts sit in one row and must not be confused. The score badge is tinted for contribution size; the pill is tinted for finding severity. */ .panel-collapse-details > summary { cursor: pointer; list-style: none; transition: background var(--speed) var(--ease); } .panel-collapse-details > summary::-webkit-details-marker { display: none; } .panel-collapse-details > summary:hover { background: rgba(255, 255, 255, .025); } .panel-collapse-details:not([open]) > summary { border-bottom: 0; } .panel-collapse-title, .panel-collapse-title > span { display: block; } .panel-collapse-heading { font-size: 19px; font-weight: 600; letter-spacing: -.01em; } .panel-collapse-summary { display: flex; gap: 16px; align-items: center; } .panel-collapse-disclosure { flex: 0 0 auto; width: 13px; height: 9px; background: currentColor; color: var(--muted); clip-path: polygon(0 12%, 50% 65%, 100% 12%, 100% 42%, 50% 95%, 0 42%); transition: transform var(--speed-slow) var(--ease), color var(--speed) var(--ease); } .panel-collapse-details:not([open]) .panel-collapse-disclosure { transform: rotate(-90deg); } .panel-collapse-details > summary:hover .panel-collapse-disclosure { color: var(--text); } .score-list { --score-columns: minmax(190px, 1fr) 92px 92px 84px; display: grid; } .score-legend { display: grid; grid-template-columns: var(--score-columns); gap: 16px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--line); background: rgba(8, 11, 16, .45); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .score-row { display: grid; grid-template-columns: var(--score-columns); gap: 16px; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--line); transition: background var(--speed) var(--ease); } .score-row:hover { background: rgba(255, 255, 255, .02); } .score-row:last-child { border-bottom: 0; } /* A shared fixed track keeps every finding aligned while leaving enough room for the full 0–100 contribution range. */ .score-value { display: grid; place-items: center; min-height: 40px; padding: 6px 12px; border: 1px solid rgba(var(--sev, 133, 147, 166), .28); border-radius: 10px; background: rgba(var(--sev, 133, 147, 166), .14); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } .score-row > .pill { justify-self: start; } .score-copy strong, .score-copy span { display: block; } .score-copy strong { font-weight: 600; } .score-copy span { color: var(--muted); font-size: 12px; } .score-confidence { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } /* ---------- findings ---------- `minmax(0, 1fr)`, not the implicit `auto` track. An auto track refuses to go below the min-content width of what is in it, and a finding holding a wide evidence table has a min-content width of about 1200px — so the track grew to 1200, the card overflowed the panel, and `.panel { overflow: hidden }` quietly painted the last column away. Nothing could scroll, because as far as the table's own wrapper was concerned it had all the room it asked for. Capping the track at the panel's width pushes the overflow back down into .table-wrap, which is the one box on the page equipped to scroll it. */ .finding-list { --finding-columns: 8px minmax(180px, 1fr) 110px 92px 24px; display: grid; grid-template-columns: minmax(0, 1fr); } .finding-legend { display: grid; grid-template-columns: var(--finding-columns); gap: 14px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--line); background: rgba(8, 11, 16, .45); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .finding-legend .legend-confidence, .confidence { justify-self: end; } .finding-card { border-bottom: 1px solid var(--line); transition: background var(--speed) var(--ease); } .finding-card:last-child { border-bottom: 0; } .finding-card > summary { display: grid; grid-template-columns: var(--finding-columns); gap: 14px; align-items: center; padding: 17px 20px; cursor: pointer; list-style: none; transition: background var(--speed) var(--ease); } .finding-card > summary:hover { background: rgba(255, 255, 255, .03); } .finding-card > summary::-webkit-details-marker { display: none; } .finding-card[open] > summary { background: var(--accent-soft); } .finding-marker { width: 8px; height: 36px; border-radius: 999px; background: currentColor; } .finding-title strong, .finding-title small { display: block; } .finding-title strong { font-weight: 600; } .finding-title small, .confidence { color: var(--muted); font-size: 12px; } .disclosure { font-size: 22px; color: var(--muted); transition: transform var(--speed-slow) var(--ease), color var(--speed) var(--ease); } .finding-card[open] .disclosure { transform: rotate(45deg); color: var(--text); } .finding-evidence { padding: 0 20px 20px 42px; } .finding-evidence h3 { margin: 8px 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; } /* The subject is what tells two findings of the same type apart, so it sits on the headline itself rather than inside the evidence. */ .finding-headline { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; } .finding-subject { color: var(--accent-link); font-size: 13px; overflow-wrap: anywhere; } .finding-reason { margin: 14px 0; color: #dbeafe; } /* Each finding category is its own panel so the rail can jump straight to it. */ .finding-group-heading { display: flex; align-items: center; gap: 12px; } .finding-group-heading h2, .finding-group-heading p { margin: 0; } .finding-group-heading p { color: var(--muted); font-size: 12px; } .category-icon { display: grid; place-items: center; width: 42px; height: 32px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-200); font-size: 10px; font-weight: 700; letter-spacing: .06em; } .finding-group-network .category-icon { background: rgba(56, 189, 248, .12); color: var(--cyan); } .finding-group-device_integrity .category-icon { background: rgba(239, 90, 90, .12); color: #fda4af; } .finding-group-applications .category-icon { background: rgba(91, 157, 247, .12); color: #93c5fd; } .finding-group-configuration .category-icon { background: rgba(232, 178, 60, .12); color: var(--yellow); } /* ---------- expandable evidence tables ---------- DNS packets, VPN flows, and installed apps are all the same shape of problem: hundreds of rows you want to sort and scan, each hiding a page of evidence. One component: a sortable table whose rows open in place. Fixed layout with a shared column rhythm, so the three tables line up as one system. Auto layout sized each column to whatever happened to be in it, which is why DOMAIN and PACKAGE sprawled while their neighbours were squeezed. Each table declares its own : one flexible identifier column, the rest on the scale below. */ .evidence-table[data-expandable] { table-layout: fixed; width: 100%; } .evidence-table[data-expandable] th, .evidence-table[data-expandable] td { overflow-wrap: anywhere; } /* A floor, one per table: the sum of its colgroup plus a usable identifier column. Given column widths that add up to more than the table is allowed to be, a fixed layout does not overflow — it quietly scales every column down, past the width its own heading needs, and the headings wrap. That is what stacked the DNS header row three lines deep on a 1280px screen while the apps table beside it stayed on one, and it is why the three tables stopped looking like one system. Below its floor a table scrolls in its wrapper instead, and every header row on the page stays exactly one line tall, whatever the window is doing. */ #vpn-flows .evidence-table { min-width: 1030px; } #dns-packets .evidence-table { min-width: 1110px; } #apps-list .evidence-table { min-width: 900px; } .col-time { width: 190px; } .col-badge { width: 116px; } /* Wide enough for the longest header on the scale ("DECLARED", "ANSWERS") plus the cell padding *and* the room the sort arrow reserves on its right: a column that cannot hold its own heading wraps it. */ .col-narrow { width: 114px; } .col-medium { width: 132px; } .col-expand { width: 52px; } /* The nested permission table keeps auto layout: it has its own shape. */ .evidence-detail .evidence-table { table-layout: auto; } .evidence-row { cursor: pointer; } .evidence-row > td { transition: background var(--speed) var(--ease); } .evidence-row:hover > td { background: rgba(255, 255, 255, .035); } .evidence-row.is-open > td { background: var(--accent-soft); border-bottom-color: transparent; } .evidence-row > td > code { overflow-wrap: anywhere; } .expand-cell { width: 46px; padding-left: 0 !important; text-align: right; } .row-expand { display: inline-grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); box-shadow: none; } .row-expand:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .06); color: var(--text); transform: none; box-shadow: none; } .row-expand:active { transform: none; box-shadow: none; } .evidence-row.is-open .disclosure { transform: rotate(45deg); color: var(--accent-100); } .evidence-detail > td { padding: 4px 20px 20px; background: rgba(8, 11, 16, .55); border-bottom: 1px solid var(--line-strong); } .evidence-detail .evidence-summary { padding: 12px 0 0; } .evidence-detail .dns-sections { padding: 8px 0 0; } .evidence-detail .dns-route { padding: 12px 0 0; } .permission-name { overflow-wrap: break-word; } /* ---------- evidence search ---------- */ .evidence-search { display: flex; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: rgba(8, 11, 16, .35); } .evidence-search input { margin: 0; } .evidence-search button, .evidence-search .button { flex: 0 0 auto; min-width: 104px; } /* ---------- evidence ---------- */ .evidence-summary { padding: 16px 20px; } /* Inside a finding the wrapper already carries the inset, so the summary must not add its own — that is what pushed the evidence cards out of line with the "Evidence" heading above them. */ .finding-evidence .evidence-summary { padding: 0; } /* One rule decides how wide any evidence field is, everywhere in the console: a field is as wide as its own value needs, and no wider. An auto-fit grid could not express that — every column came out the same width, so a one-word resolver address got the same box as a SHA-256, and a field holding a single chip was promoted to a full row because a longer list might have needed one. Flex sizes each box from its content (flex-basis: auto), lets the boxes on a line share what is left over, and hands the full row only to the values that genuinely are row-sized things: a table, a nested record, or a list long enough to have been collapsed. */ .evidence-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .evidence-grid > div { flex: 1 1 auto; min-width: min(160px, 100%); max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: rgba(8, 11, 16, .45); transition: border-color var(--speed) var(--ease); } .evidence-grid > div:hover { border-color: var(--line-strong); } .evidence-grid.compact > div { min-width: min(130px, 100%); } .evidence-grid dt { margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .evidence-grid dd { margin: 0; min-width: 0; } .evidence-value { white-space: normal; overflow-wrap: anywhere; color: #dbeafe; } .metric-value { font-weight: 600; font-variant-numeric: tabular-nums; } /* The three row-sized values. Anything else keeps the width of its content. */ .evidence-grid > div:has(.table-wrap), .evidence-grid > div:has(.evidence-grid), .evidence-grid > div:has([data-collapsible]) { flex-basis: 100%; } .evidence-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .evidence-list > li { min-width: 0; border-radius: 6px; padding: 3px 8px; background: #1a2230; } .evidence-list > li:has(.evidence-grid) { width: 100%; padding: 0; background: transparent; } /* ---------- long lists ---------- Forty granted permissions used to be penned into a fixed height with their own scrollbar: it hid how many there were, and putting the pointer over it stole the page's scroll. Show a couple of rows, fade the cut so it plainly continues, and let the reader ask for the rest. Every item stays in the DOM, so find-in-page and printing still see the whole list. */ .evidence-list-wrap { display: grid; gap: 8px; justify-items: start; min-width: 0; } .evidence-list-wrap.is-collapsed .evidence-list { max-height: 82px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 46px, transparent); mask-image: linear-gradient(180deg, #000 46px, transparent); } .list-toggle { min-height: 26px; padding: 3px 10px; border-color: var(--line-strong); border-radius: 999px; background: var(--secondary); color: var(--muted); font-size: 12px; font-weight: 600; box-shadow: none; } .list-toggle:hover { background: var(--secondary-hover); color: var(--text); transform: none; box-shadow: none; } /* The frame and its rounding belong to the scroll box, not to the table. `overflow: hidden` on a makes the table clip its own cells: the table box stays at width:100% while the columns inside need more, so the last column is simply painted away — and the wrapper never sees an overflow to scroll. That is what cut "Is System" off the end of the app evidence table. Move the frame out to the wrapper, which can actually scroll. */ .table-wrap:has(> .record-table), .table-wrap:has(> .answer-table) { border: 1px solid var(--line); border-radius: var(--radius-md); } .record-table { border-collapse: collapse; } /* Headers keep the console's header scale. At 13px these read a size larger than every other table on the page. */ .record-table th, .record-table td { padding: 9px 12px; vertical-align: middle; } .record-table td { font-size: 13px; } /* Headers sit on one baseline, at the bottom of the header row. Centred, a header that fits on one line ("Is System") floats to the middle of a row whose height is set by one that takes two ("Permissions Truncated") — so no two headers in the row start at the same height. Bottom-aligned they all land on the line directly above the data they label, however many lines each of them needs. */ .record-table th, .answer-table th { vertical-align: bottom; } .record-table tbody tr:last-child td { border-bottom: 0; } /* `anywhere` lets a cell shrink to one character wide, which is how a column of package names ended up crushed to four letters beside a column of permission chips. `break-word` keeps the longest word as the column's minimum, so an identifier gets the width it needs and the table scrolls if the row is wide. */ .record-table code { overflow-wrap: break-word; color: #dbeafe; } /* A floor, not a target. At 180px five of these columns alone came to 900px and the table could not fit any panel it was put in; 130px still holds a package name without crushing it, and leaves the chip column the room it actually needs. */ .record-table td:not(:has(.evidence-list)) { min-width: 130px; } /* ---------- indicators ---------- */ /* See .finding-list: an auto track will not shrink below its content's min-content width, and these hold provider evidence that can be very wide. */ .card-table { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 20px; } .indicator-card { display: grid; grid-template-columns: minmax(220px, 1fr) 130px auto; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; background: rgba(8, 11, 16, .4); transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease); } .indicator-card:hover { border-color: var(--line-strong); transform: translateY(-1px); } .indicator-main code { display: block; margin-top: 4px; font-size: 14px; overflow-wrap: anywhere; } .indicator-main p { margin: 6px 0 0; color: var(--muted); } .indicator-type { color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .08em; } .indicator-provider span, .indicator-provider strong { display: block; } .indicator-provider span { color: var(--muted); font-size: 11px; } .indicator-provider strong { font-weight: 600; } .indicator-score { display: inline-flex; align-items: baseline; justify-content: center; gap: 1px; border: 1px solid rgba(var(--sev, 133, 147, 166), .3); border-radius: var(--radius-md); padding: 8px 12px; background: rgba(var(--sev, 133, 147, 166), .14); } .indicator-score strong { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .indicator-score span { color: var(--muted); font-size: 12px; } .inline-details { grid-column: 1 / -1; } .inline-details > summary { width: fit-content; border-radius: 6px; padding: 2px 6px; color: var(--accent-link); cursor: pointer; transition: color var(--speed) var(--ease), background var(--speed) var(--ease); } .inline-details > summary:hover { background: var(--accent-soft); color: var(--accent-link-hover); } .inline-details .evidence-grid { margin-top: 10px; } .protocol-badge, .direction-badge { display: inline-flex; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; background: rgba(133, 147, 166, .12); color: #c3cddb; font-size: 11px; font-weight: 600; letter-spacing: .03em; } .direction-badge { border-color: rgba(91, 157, 247, .28); background: rgba(91, 157, 247, .12); color: #93c5fd; } .protocol-tcp { border-color: rgba(91, 157, 247, .3); background: rgba(91, 157, 247, .14); color: #93c5fd; } .protocol-udp { border-color: rgba(167, 139, 250, .32); background: rgba(167, 139, 250, .16); color: var(--accent-200); } .protocol-icmp { border-color: rgba(239, 135, 68, .3); background: rgba(239, 135, 68, .14); color: #fdba74; } .traffic-up, .traffic-down { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; } .traffic-up { color: var(--yellow); } .traffic-down { color: #67e8f9; } .evidence-table small { display: block; color: var(--muted); } /* ---------- dns ---------- */ .direction-badge.response { background: rgba(53, 201, 139, .12); color: var(--green); } .dns-route { display: flex; gap: 12px; align-items: center; padding: 14px 20px 0; color: var(--muted); } /* ---------- downloads / artifacts ---------- */ .download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px; } .download-card { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; background: rgba(8, 11, 16, .42); transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease); } .download-card:hover { border-color: var(--line-strong); transform: translateY(-2px); } .download-card h3 { margin: 0 0 5px; font-size: 15px; font-weight: 600; } .download-card p { margin: 0; color: var(--muted); } .download-icon, .artifact-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-200); font-size: 11px; font-weight: 700; letter-spacing: .08em; } .delivery-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .delivery-row strong, .delivery-row small { display: block; } .delivery-row small { margin-top: 4px; color: var(--muted); } /* ---------- search ---------- */ .search-panel { border-bottom: 1px solid var(--line); background: rgba(8, 11, 16, .35); } .primary-search { padding: 18px 20px 14px; } .primary-search > label { display: block; margin-bottom: 8px; } .search-input { display: flex; gap: 10px; } .search-input input { margin: 0; font-size: 15px; } .search-input button { min-width: 120px; } .advanced-filters { border-top: 1px solid var(--line); } .advanced-filters > summary { padding: 12px 20px; color: var(--muted); cursor: pointer; font-weight: 600; transition: color var(--speed) var(--ease), background var(--speed) var(--ease); } .advanced-filters > summary:hover { background: rgba(255, 255, 255, .03); color: var(--text); } .active-filter-dot { margin-left: 8px; border-radius: 999px; padding: 2px 8px; background: var(--accent-soft); color: var(--accent-200); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .filter-grid { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 12px; align-items: end; padding: 4px 20px 18px; } .audit-filter-grid { grid-template-columns: repeat(4, minmax(160px, 1fr)); padding: 18px 20px; } .filter-actions { display: flex; gap: 8px; } .results-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 20px; color: var(--muted); } .results-meta strong { color: var(--text); font-weight: 600; } /* Pushed to the far end of the strip: it governs the rows below, but it is a setting, not a result. */ .rows-per-page { display: flex; gap: 8px; align-items: center; margin-left: auto; font-size: 13px; font-weight: 500; } .rows-per-page .select { margin-top: 0; } .rows-per-page select, .rows-per-page .select-button { min-height: 32px; margin-top: 0; padding: 4px 10px; font-size: 13px; } .rows-per-page .select-button { padding-right: 8px; } .filter-chip { border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 999px; padding: 2px 10px; background: var(--accent-soft); color: var(--accent-100); font-size: 12px; font-weight: 600; } /* Score only — the tint carries the severity. Fixed width and tabular figures keep "5" and "100" aligned down the column. */ .risk-score { display: inline-flex; align-items: baseline; justify-content: center; gap: 1px; width: 82px; padding: 6px 10px; border: 1px solid rgba(var(--sev, 133, 147, 166), .28); border-radius: 999px; background: rgba(var(--sev, 133, 147, 166), .1); font-variant-numeric: tabular-nums; } .risk-score strong { font-size: 17px; font-weight: 650; letter-spacing: -.02em; } .risk-score-max { color: var(--muted); font-size: 10px; font-weight: 500; } .evidence-count { display: inline-flex; gap: 4px; margin: 0 8px 4px 0; color: var(--muted); white-space: nowrap; } .evidence-count strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .is-loading { opacity: .5; pointer-events: none; transition: opacity var(--speed) var(--ease); } /* ---------- module picker ---------- The steps of a profile are chosen here. The server orders them by the order the checkboxes appear in the form, so the badge on each selected card is its real execution step — the script numbers them in DOM order, never in click order. */ .picker-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; } .picker-count { margin: 0; color: var(--muted); } .picker-count strong { color: var(--text); font-variant-numeric: tabular-nums; } .picker-count small { display: block; margin-top: 2px; color: var(--dim); font-size: 12px; } .picker-actions { display: flex; gap: 8px; } .picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .picker-card { /* The real checkbox is taken out of flow below, so the card has to be the box it is taken out of — otherwise it lands against some far-off ancestor and sits, invisible but clickable, over whatever happens to be there. */ position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; background: rgba(8, 11, 16, .45); color: var(--text); font-weight: 400; cursor: pointer; transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease); } .picker-card:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .03); } .picker-card:has(:checked) { border-color: rgba(var(--accent-rgb), .5); background: var(--accent-soft); } /* The native box is kept — it is what submits, and what a screen reader reads — but it draws differently on every platform, so hide it and draw the indicator beside it. The focus ring has to be re-hung on the card, or keyboard users lose the only cue they had. */ .picker-card input[type="checkbox"] { position: absolute; opacity: 0; width: 18px; height: 18px; } .picker-card:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; } .picker-box { width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: 5px; background: #0c1119; transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease); } .picker-card:has(:checked) .picker-box { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.4'/%3E%3C/svg%3E") center / 10px no-repeat; } .picker-copy { min-width: 0; } .picker-copy strong, .picker-copy small { display: block; overflow-wrap: anywhere; } .picker-copy strong { font-weight: 600; } .picker-copy small { color: var(--muted); font-size: 12px; } /* Empty until the card is chosen, so an unselected list carries no phantom steps. */ .picker-order { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: rgba(var(--accent-rgb), .3); color: var(--accent-100); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; } .picker-order:empty { background: none; } /* Seven columns of device telemetry beside a 252px rail is the tightest fit in the console. At the shared 16px the cell padding alone came to 224px of the row — enough on its own to push the table off the panel on a 1200px screen. */ .stack-table th, .stack-table td { padding-inline: 12px; } /* ---------- profile steps ---------- */ /* Steps is the only column that should absorb the slack. Left to itself it took most of the row, and Status and Action ended up at the far right edge, a long way from the profile they describe. */ .col-profile { width: 260px; } .profile-table { table-layout: fixed; } .profile-table th, .profile-table td { overflow-wrap: anywhere; } .step-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .step-chips li { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 3px; background: rgba(8, 11, 16, .5); font-size: 12px; } .step-index { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-100); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; } /* ---------- device assignment ---------- The cell reports what the device is running, and nothing more. Choosing a scanner needs three selects, and three selects in a table cell is what dragged the devices table wider than the page — so that lives in a dialog, reached from the Action column with every other control that acts on the device. */ .mode-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .mode-chip { border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; background: rgba(8, 11, 16, .5); color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; } /* Unassign is destructive and belongs at the far end from Save, not next to it. */ .modal-foot-start { margin-right: auto; } /* ---------- audit timeline ---------- */ /* See .finding-list: audit details render the same evidence tables. */ .audit-list { display: grid; grid-template-columns: minmax(0, 1fr); } .audit-event { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); animation: rise 320ms var(--ease) both; transition: background var(--speed) var(--ease); } .audit-event:hover { background: rgba(255, 255, 255, .025); } .audit-event:last-child { border-bottom: 0; } .audit-event:nth-child(2) { animation-delay: 40ms; } .audit-event:nth-child(3) { animation-delay: 80ms; } .audit-event:nth-child(4) { animation-delay: 120ms; } .audit-event:nth-child(5) { animation-delay: 160ms; } .audit-event:nth-child(n + 6) { animation-delay: 200ms; } .audit-rail { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .audit-copy { min-width: 0; } .audit-copy strong { display: block; font-weight: 600; } .audit-actor, .audit-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; } .audit-time { justify-self: end; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; } .audit-time small { display: block; margin-top: 2px; color: var(--dim); } .audit-details { grid-column: 2 / -1; margin-top: 4px; } /* ---------- account ---------- */ .account-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .account-card { overflow: visible; } .account-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .account-details > div { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; background: rgba(8, 11, 16, .4); transition: border-color var(--speed) var(--ease); } .account-details > div:hover { border-color: var(--line-strong); } .account-details span, .account-details strong { display: block; } .account-details span { margin-bottom: 5px; color: var(--muted); font-size: 12px; } .account-details strong { font-weight: 600; overflow-wrap: anywhere; } .session-action { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .session-action p { margin: 5px 0 0; color: var(--muted); } .session-action form { flex: 0 0 auto; margin: 0; } /* ---------- credentials ---------- */ .password-form { display: grid; gap: 18px; max-width: 520px; padding: 22px 20px; } .password-form .form-action { justify-content: space-between; } .session-list { display: grid; } .session-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); transition: background var(--speed) var(--ease); } .session-row:last-child { border-bottom: 0; } .session-row:hover { background: rgba(255, 255, 255, .02); } /* The session you are reading this in: tinted so revoking the wrong one is hard. */ .session-row.is-current { background: rgba(var(--accent-rgb), .07); } .session-row form { margin: 0; } .session-copy { min-width: 0; } .session-copy strong { display: block; font-weight: 600; overflow-wrap: anywhere; } .session-copy span, .session-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; } .session-copy small { color: var(--dim); } /* `minmax(0, 1fr)`, not the implicit `auto` track — see .finding-list. The facts row below holds a 64-character digest, so its min-content width is far wider than a phone; an auto track would size to that and push the whole panel off the side of the screen. */ .artifact-panel-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } .artifact-summary { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 16px; align-items: center; } .artifact-summary strong, .artifact-action strong, .artifact-action small { display: block; } .artifact-summary strong { font-weight: 600; } .artifact-summary p { margin: 4px 0 0; color: var(--muted); } .artifact-action small { color: var(--muted); font-weight: 400; } .artifact-action { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); padding-top: 18px; } .artifact-action strong { font-weight: 600; } /* Same principle as the evidence grid: each fact is as wide as its value needs. The digest is 64 characters and the other two are a handful, so they are not given matching columns. */ .artifact-facts { display: flex; flex-wrap: wrap; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; } .artifact-facts > div { flex: 1 1 auto; min-width: min(180px, 100%); max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: rgba(8, 11, 16, .45); } .artifact-fact-wide { flex-basis: 340px; } .artifact-facts code { color: #dbeafe; font-size: 12px; } .artifact-facts strong { font-weight: 600; font-variant-numeric: tabular-nums; } .download-hash { display: grid; gap: 4px; } .download-hash code { overflow: hidden; color: #dbeafe; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .inline-notice { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: rgba(8, 11, 16, .4); color: var(--muted); } /* ---------- device groups ---------- */ .group-manager { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 18px 20px; } .group-rename-form { display: flex; gap: 7px; align-items: center; } .group-rename-form input { min-width: 150px; margin: 0; padding: 8px 10px; } /* Every control that acts on a device lives here, so it has to hold four of them without making the row twice the height of the data beside it. Two columns, each button stretched to its cell, so the group reads as one block rather than four buttons of four different widths. */ .action-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; /* Wide enough for the longest label on it ("Edit details") in both columns, and not a pixel wider: this column and the device id were between them costing the table more width than the page had to give it. */ min-width: 220px; } .action-stack form { margin: 0; } .action-stack button, .action-stack .button { width: 100%; } /* The one primary action when there is nothing else to pair it with. */ .action-wide { grid-column: 1 / -1; } .local-time { display: inline-block; white-space: nowrap; } .audit-time .local-time { white-space: normal; } .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); } .filter-bar input, .filter-bar select { min-width: 160px; } .pagination { display: flex; gap: 16px; align-items: center; justify-content: center; padding: 14px 20px; border-top: 1px solid var(--line); color: var(--muted); } .pagination a { border-radius: 7px; padding: 6px 10px; text-decoration: none; transition: background var(--speed) var(--ease), color var(--speed) var(--ease); } .pagination a:hover { background: var(--accent-soft); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- back to top ---------- Visibility rides on .is-visible, never the [hidden] attribute: the global `[hidden] { display: none !important }` rule would win over any display here and there would be nothing to transition from. */ .to-top { position: fixed; right: 26px; bottom: 26px; z-index: 40; display: grid; place-items: center; width: 46px; height: 46px; min-height: 0; padding: 0; border: 1px solid rgba(var(--accent-rgb), .55); border-radius: 50%; /* Filled with the accent, not tinted glass. A dark circle on a dark page at the very edge of the viewport is there but not *seen*, which is indistinguishable from broken. */ background: linear-gradient(180deg, #3760cf, var(--accent-deep)); color: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 0 5px rgba(var(--accent-rgb), .12); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px) scale(.92); transition: opacity var(--speed-slow) var(--ease), transform var(--speed-slow) var(--ease), visibility var(--speed-slow) var(--ease), border-color var(--speed) var(--ease), background var(--speed) var(--ease); } .to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .to-top:hover { border-color: var(--accent-hi); background: linear-gradient(180deg, var(--accent-hover), var(--accent-press)); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(var(--accent-rgb), .45), 0 0 0 6px rgba(var(--accent-rgb), .16); } .to-top:active { transform: none; box-shadow: var(--shadow-sm); } /* ---------- brand ---------- */ .brand-block { display: flex; gap: 12px; align-items: center; border-radius: var(--radius-md); padding: 6px 10px 6px 6px; color: inherit; text-decoration: none; transition: background var(--speed) var(--ease); } .brand-block:hover { background: rgba(255, 255, 255, .05); } .brand-mark { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid rgba(var(--accent-rgb), .45); border-radius: 11px; background: linear-gradient(150deg, rgba(var(--accent-rgb), .35), rgba(var(--accent-rgb), .12)); } .brand-glyph { width: 24px; height: 24px; transition: transform var(--speed-slow) var(--ease); } .brand-block:hover .brand-glyph { transform: scale(1.06); } .brand-text { display: grid; } .brand-text .eyebrow { margin-bottom: 1px; } /* "Mobile Hexii" is the product's name, not a paragraph: let the nav beside it wrap instead of breaking the wordmark across two lines. */ .brand-name { color: var(--text); font-size: 19px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; } /* ---------- dropzones ---------- */ .dropzone-field { display: flex; flex-direction: column; min-width: 0; } .dropzone-caption { margin-bottom: 6px; } .dropzone { position: relative; display: block; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); padding: 20px 16px; background: rgba(8, 11, 16, .45); text-align: center; cursor: pointer; transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease); } .dropzone:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); } .dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; } .dropzone.is-focused { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); } .dropzone.is-dragging { border-color: var(--accent); border-style: solid; background: rgba(var(--accent-rgb), .14); transform: scale(1.005); } .dropzone.has-file { border-style: solid; border-color: rgba(53, 201, 139, .45); background: rgba(53, 201, 139, .07); } .dropzone-body { display: grid; gap: 5px; justify-items: center; pointer-events: none; } .dropzone-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-200); font-size: 15px; font-weight: 700; } .dropzone.has-file .dropzone-icon { background: rgba(53, 201, 139, .16); color: var(--green); } .dropzone-title { color: var(--text); font-weight: 600; } .dropzone-browse { color: var(--accent-link); text-decoration: underline; text-underline-offset: 2px; } .dropzone-hint { color: var(--muted); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; } .dropzone-hint strong { color: var(--text); font-weight: 600; } /* ---------- modal ---------- */ dialog.modal { width: min(440px, calc(100vw - 32px)); margin: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 0; background: linear-gradient(160deg, #19212f, #0e131c); color: var(--text); box-shadow: 0 30px 70px rgba(0, 0, 0, .55); } dialog.modal::backdrop { background: rgba(4, 6, 10, .68); backdrop-filter: blur(3px); animation: fade-in 200ms var(--ease); } dialog.modal[open] { animation: pop-in 200ms var(--ease); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); } .modal-head h3 { margin: 0; font-size: 18px; font-weight: 600; } .modal-close { min-height: 32px; padding: 0 10px; border-color: transparent; background: transparent; color: var(--muted); font-size: 20px; box-shadow: none; } .modal-close:hover { background: rgba(255, 255, 255, .07); color: var(--text); transform: none; box-shadow: none; } .modal-body { display: grid; gap: 16px; padding: 20px; } .modal-context { display: grid; gap: 2px; margin: 0; } .modal-context code { overflow-wrap: anywhere; color: var(--muted); } .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); background: rgba(8, 11, 16, .4); } .field { display: grid; gap: 6px; } .field label { color: var(--muted); font-size: 13px; font-weight: 600; } /* The field already spaces its own rows; the control must not add a second gap. `.select` is the scripted listbox that stands in for a native