/* QSA portal design system. * * Every colour, size and radius is a token in :root. Components read tokens and * never hardcode values, so a rebrand or a dark mode is an edit to this block * rather than a sweep through the file. * * The governing rule: the only saturated colour on screen is a verdict. * Everything else is greyscale plus one accent. An assessor scanning a hundred * findings should have their eye pulled by FAIL and NOT ASSESSED, not by a * button, a heading, or a table header. That is why buttons are quiet by * default and why there is at most one filled button per view. */ :root { color-scheme: light; /* Surfaces, lightest last */ --bg: #f6f7f9; --surface: #ffffff; --surface-sunk: #f1f3f6; --surface-hover: #f7f8fa; /* Ink. Every step is contrast-checked against --surface; see tests/test_contrast.py, which fails the build rather than leaving it to whoever picked the colours. */ --ink: #11151a; --ink-2: #4a525c; --ink-3: #67707c; --line: #e3e7ec; --line-strong: #cbd2da; /* One accent: links, focus, and the single primary action per view */ --accent: #1d4ed8; --accent-ink: #1e40af; --accent-wash: #eef3ff; --accent-on: #ffffff; /* Verdicts. Tinted surface with saturated ink rather than a solid block: legible at small sizes, and four solid badges per row is noise. */ --pass: #146c37; --pass-wash: #e9f6ee; --pass-line: #b9e0c8; --fail: #a4231a; --fail-wash: #fdeceb; --fail-line: #f4c6c2; --warn: #855b06; --warn-wash: #fdf4e3; --warn-line: #eedaa8; --err: #5b21b6; --err-wash: #f3edfd; --err-line: #d9c9f5; --chrome: #171c23; --chrome-ink: #ffffff; /* Intentionally absent from the dark block below. See .qr. */ --qr-plate: #ffffff; --qr-ink: #000000; /* Type. System stack: native everywhere, nothing to self-host, and no font-src exception needed in the CSP. */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Bumped a step from the first pass: this is a tool people read all day, and 11.5px table text was too small to work in comfortably. */ --t-xs: 12px; --t-sm: 13px; --t-md: 14.5px; --t-lg: 16.5px; --t-xl: 21px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --r-sm: 5px; --r: 7px; --r-lg: 11px; --shadow-pop: 0 1px 2px rgba(16,22,30,.05), 0 8px 28px rgba(16,22,30,.10); --shadow-modal: 0 24px 64px rgba(16,22,30,.26); --focus: 0 0 0 3px rgba(29,78,216,.25); } /* Dark mode. * * Only the token block changes; no component rule below knows which mode it is * in. Two entry points: the OS preference, and an explicit choice the server * renders onto from a cookie. The explicit choice wins, and because it * is server-rendered there is no flash of the wrong theme on load, which an * inline script would have caused and which the CSP forbids anyway. */ :root[data-theme="dark"], :root:not([data-theme="light"]) { --dark-ready: 1; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e1116; --surface: #161a20; --surface-sunk: #1c222a; --surface-hover: #1b2028; --ink: #e9ecf1; --ink-2: #b3bcc8; --ink-3: #8b95a3; --line: #262d37; --line-strong: #3a434f; --accent: #85b4ff; --accent-ink: #a6c8ff; --accent-wash: #15243c; --accent-on: #0a1120; --pass: #6ee7a0; --pass-wash: #0f2419; --pass-line: #1f4a33; --fail: #ff9b91; --fail-wash: #2b1414; --fail-line: #5c2523; --warn: #f6c352; --warn-wash: #2a2010; --warn-line: #574318; --err: #c9b3fb; --err-wash: #201a34; --err-line: #40356b; --chrome: #0a0d12; --chrome-ink: #f2f4f7; --shadow-pop: 0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.55); --shadow-modal: 0 24px 64px rgba(0,0,0,.7); --focus: 0 0 0 3px rgba(133,180,255,.32); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1116; --surface: #161a20; --surface-sunk: #1c222a; --surface-hover: #1b2028; --ink: #e9ecf1; --ink-2: #b3bcc8; --ink-3: #8b95a3; --line: #262d37; --line-strong: #3a434f; --accent: #85b4ff; --accent-ink: #a6c8ff; --accent-wash: #15243c; --accent-on: #0a1120; --pass: #6ee7a0; --pass-wash: #0f2419; --pass-line: #1f4a33; --fail: #ff9b91; --fail-wash: #2b1414; --fail-line: #5c2523; --warn: #f6c352; --warn-wash: #2a2010; --warn-line: #574318; --err: #c9b3fb; --err-wash: #201a34; --err-line: #40356b; --chrome: #0a0d12; --chrome-ink: #f2f4f7; --shadow-pop: 0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.55); --shadow-modal: 0 24px 64px rgba(0,0,0,.7); --focus: 0 0 0 3px rgba(133,180,255,.32); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--t-md); line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.011em; } h1 { font-size: var(--t-xl); } h2 { font-size: var(--t-lg); } h3 { font-size: var(--t-md); } .muted { color: var(--ink-2); } .small { font-size: var(--t-sm); } .hint { color: var(--ink-3); font-size: var(--t-sm); font-weight: 400; } .mono { font-family: var(--mono); font-size: var(--t-sm); } /* Timestamps. The zone recedes: it is there so the time is unambiguous, not because anyone is reading it. Both parts stay on one line, because a timestamp split across two is worse than no zone at all. */ time { white-space: nowrap; } time .tz { color: var(--ink-3); font-size: 0.85em; font-weight: 400; letter-spacing: .02em; } .grow { flex: 1; } /* ---------------------------------------------------------------- chrome */ .topbar { display: flex; align-items: center; gap: var(--s5); background: var(--chrome); color: var(--chrome-ink); padding: 0 var(--s5); height: 48px; /* Pinned. On a long page the navigation was scrolling away, which on a browsable Drive export means scrolling back to the top to get anywhere. A no-op on the two-pane pages, where the body does not scroll at all, so one rule covers both. Above the cards, below the modals, which sit in the browser's top layer and are not affected by z-index here. */ position: sticky; top: 0; z-index: 20; } .topbar a { color: color-mix(in srgb, var(--chrome-ink) 74%, transparent); font-size: var(--t-md); } .topbar a:hover { color: var(--chrome-ink); text-decoration: none; } .brand { font-weight: 600; color: var(--chrome-ink) !important; letter-spacing: -0.01em; } .topbar nav { display: flex; gap: var(--s4); flex: 1; } .who { color: color-mix(in srgb, var(--chrome-ink) 58%, transparent); font-size: var(--t-sm); margin-right: var(--s2); } .who em { font-style: normal; color: color-mix(in srgb, var(--chrome-ink) 42%, transparent); } main { max-width: 1180px; margin: var(--s5) auto var(--s7); padding: 0 var(--s5); } footer { max-width: 1180px; margin: 0 auto var(--s6); padding: 0 var(--s5); color: var(--ink-3); font-size: var(--t-sm); } .crumbs { color: var(--ink-3); font-size: var(--t-sm); margin: 0 0 var(--s1); } .crumbs a { color: var(--ink-2); } .page-head { display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s4); flex-wrap: wrap; } /* ---------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); margin-bottom: var(--s4); } .card > h2, .card > h3 { margin-bottom: var(--s3); } .card.narrow { max-width: 380px; margin: 12vh auto; padding: var(--s5); } /* ---------------------------------------------------------------- forms */ label { display: block; margin-bottom: var(--s3); font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); } input, select, textarea { width: 100%; margin-top: var(--s1); padding: 7px 10px; font: inherit; font-size: var(--t-md); font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); transition: border-color .12s, box-shadow .12s; } input:hover, select:hover, textarea:hover { border-color: var(--ink-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); } input::placeholder, textarea::placeholder { color: var(--ink-3); } select { appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2367707c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } input[type=file] { padding: 6px; border-style: dashed; background: var(--surface-sunk); color: var(--ink); } .row { display: flex; gap: var(--s2); align-items: flex-end; flex-wrap: wrap; } .row input, .row select { width: auto; min-width: 190px; margin-top: 0; } .inline { display: inline; } /* -------------------------------------------------------------- buttons */ /* Quiet by default. .primary is the one filled button a view is allowed. */ button, .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font: inherit; font-size: var(--t-md); font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, box-shadow .12s; } button:hover, .btn:hover { background: var(--surface-hover); border-color: var(--ink-3); text-decoration: none; } button:active, .btn:active { background: var(--surface-sunk); } button:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--focus); } .primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); } .primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); } .primary:active { background: var(--accent-ink); } .ghost { background: transparent; border-color: transparent; color: var(--accent); padding: 4px 6px; } .ghost:hover { background: var(--accent-wash); border-color: transparent; } button.link, .link { background: none; border: 0; color: var(--accent); padding: 2px 4px; font-weight: 500; } button.link:hover { background: none; text-decoration: underline; } /* The one destructive link in the portal. Coloured as a verdict rather than as an accent, because the rule everywhere else is that saturated colour means a result: here it means the row goes and does not come back. */ button.link.danger { color: var(--fail); } .btn.small, button.small { padding: 3px 8px; font-size: var(--t-sm); } /* --------------------------------------------------------------- tables */ table.grid { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s4); } table.grid th { background: var(--surface); border-bottom: 1px solid var(--line); text-align: left; padding: 9px var(--s3); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } table.grid td { padding: 10px var(--s3); border-top: 1px solid var(--line); vertical-align: middle; } table.grid tbody tr:first-child td { border-top: 0; } table.grid tbody tr:hover { background: var(--surface-hover); } table.tight td, table.tight th { padding: 7px var(--s3); } /* Findings table. Column widths are fixed so every requirement group lines up with the next, instead of each table sizing itself independently. */ table.findings { table-layout: fixed; } table.findings td { font-size: var(--t-sm); vertical-align: top; padding-top: 10px; padding-bottom: 10px; } /* Wide enough for "NOT ASSESSED" at --t-xs plus pill padding. With table-layout: fixed a nowrap pill silently overflows into the next column rather than widening the cell, which is exactly what happened before. */ .col-status { width: 136px; } .col-region { width: 118px; } .col-account { width: 136px; } .col-integrity { width: 112px; } .col-counts { width: 172px; } .col-role { width: 130px; } .col-active { width: 88px; } /* Trimmed to pay for the columns above. A rendered timestamp is "11 Aug 2026, 14:23", which does not need 190px. */ .col-lastlogin { width: 176px; } .col-useractions { width: 210px; } /* Sized to the header, not to the cell. These two were sized to their contents ("S3", a "JSON" link), which is the narrower of the two and the wrong one: "SERVICE" and "EVIDENCE" are 8 uppercase characters at --t-xs with letter spacing, about 63px, and 24px of cell padding on top. Under-size them and the nowrap header runs out of its column and lands on top of the next heading. */ .col-service { width: 96px; } .col-resource { width: 160px; } .col-check { width: 146px; } .col-evidence { width: 104px; } .col-assessor { width: 220px; } /* The guard, so this is a layout to fix rather than a collision to read. A header too long for its column is clipped; two headings printed over each other are unreadable, and worse, they look like a data problem. */ table.findings th { overflow: hidden; text-overflow: ellipsis; } td.detail { color: var(--ink-2); line-height: 1.55; } td.resource { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink); overflow-wrap: anywhere; } /* ----------------------------------------------------------------- meta */ dl.meta { display: grid; grid-template-columns: 150px 1fr; gap: 2px var(--s3); margin: 0 0 var(--s3); font-size: var(--t-sm); } dl.meta dt { color: var(--ink-3); } dl.meta dd { margin: 0; } /* ---------------------------------------------------------------- pills */ .pill { display: inline-block; max-width: 100%; padding: 3px 9px; border-radius: 20px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-size: var(--t-xs); font-weight: 600; letter-spacing: .01em; white-space: nowrap; border: 1px solid transparent; } .pill.pass { color: var(--pass); background: var(--pass-wash); border-color: var(--pass-line); } .pill.fail { color: var(--fail); background: var(--fail-wash); border-color: var(--fail-line); } .pill.warn { color: var(--warn); background: var(--warn-wash); border-color: var(--warn-line); } .pill.err { color: var(--err); background: var(--err-wash); border-color: var(--err-line); } a.pill:hover { text-decoration: none; filter: brightness(.97); } .tag { background: var(--surface-sunk); color: var(--ink-2); padding: 2px 8px; border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 500; } /* Count chips used as filters above the findings table */ .counts { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; } .count { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font-size: var(--t-sm); color: var(--ink-2); } .count:hover { border-color: var(--line-strong); text-decoration: none; } .count b { font-size: var(--t-md); font-weight: 600; color: var(--ink); } .count.on { border-color: var(--accent); background: var(--accent-wash); } .count .dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; } .dot.pass { background: var(--pass); } .dot.fail { background: var(--fail); } .dot.warn { background: var(--warn); } .dot.err { background: var(--err); } /* --------------------------------------------------------------- alerts */ .alert { padding: 10px var(--s3); border-radius: var(--r); font-size: var(--t-sm); margin: var(--s3) 0; border: 1px solid; } .alert.pass { color: var(--pass); background: var(--pass-wash); border-color: var(--pass-line); } .alert.fail { color: var(--fail); background: var(--fail-wash); border-color: var(--fail-line); } .alert.warn { color: var(--warn); background: var(--warn-wash); border-color: var(--warn-line); } .alert.err { color: var(--err); background: var(--err-wash); border-color: var(--err-line); } /* -------------------------------------------------- assessor note editor */ .adjudicate { display: flex; gap: 6px; align-items: center; } .adjudicate select { width: 112px; flex: none; margin-top: 0; padding: 4px 22px 4px 8px; font-size: var(--t-sm); } /* The Save button only exists for browsers where the note dialog cannot run. portal.js sets .has-dialog once it is enhancing, and then the dropdown commits on change instead. */ .has-dialog .adjudicate .save-fallback { display: none; } .note-open { flex: 1; min-width: 0; padding: 4px 8px; font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); background: var(--surface); border: 1px dashed var(--line-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; text-align: left; } .note-open:hover { color: var(--ink); background: var(--surface-hover); } .note-open.has-note { color: var(--ink); border-style: solid; background: var(--surface); } /* ----------------------------------------------------------------- sheets */ /* One modal shape, used by the note editor and by every action form. Head, body and a footer holding the buttons. Native