/* ============================================================================
PERCIVAL — style.css
Governance · Risk · Compliance | sinanaugustus.com
----------------------------------------------------------------------------
Core CSS framework. All colour, spacing, and type decisions are defined
once as :root custom properties and reused throughout. Retheme the entire
application by editing Section 1 only.
Colour rule: the seven brand/risk colours are fixed. Surface, border, and
hover tones are NOT new colours — they are alpha-derived from the navy
palette, plus neutral white. No additional hues are introduced.
Section index:
1. Custom properties (palette, risk, derived tones, type, spacing)
2. Reset & base
3. Typography
4. Application layout (header / sidebar / main grid)
5. Header & brand wordmark
6. Sidebar navigation
7. Main content & view panels
8. Components — cards
9. Components — buttons
10. Components — tables
11. Components — forms
12. Components — badges (status & risk)
13. Utilities
14. Responsive (mobile)
15. Accessibility (focus & reduced motion)
============================================================================ */
/* ----------------------------------------------------------------------------
1. CUSTOM PROPERTIES
---------------------------------------------------------------------------- */
:root {
/* --- Fixed brand palette (do not alter without instruction) --- */
--colour-navy: #1A2B4C; /* Dominant base — authority, stability */
--colour-steel: #4A6984; /* Secondary tone — approachable, trustworthy */
--colour-gold: #D4AF37; /* Accent — premium quality, vigilance */
--colour-ice: #F4F7F9; /* Background neutral — maximum readability */
/* --- Fixed risk heat-map palette (do not alter without instruction) --- */
--risk-high: #8B1A1A; /* High risk */
--risk-medium: #C17F24; /* Medium risk */
--risk-low: #2D6A4F; /* Low risk */
/* --- CSMP Unit 1 five-band IRV palette --------------------------------
Authorised extension (owner instruction, Session 3). Renders the five
CSMP bands in their authentic colours rather than mapping onto three.
Negligible / Moderate / High reuse the existing palette; Low (yellow)
and Extreme (near-black) are the two new additions. These become the
canonical heat-map colours for Module 7. */
--band-negligible: #2D6A4F; /* green — reuses risk-low */
--band-low: #E0B62D; /* yellow — NEW */
--band-moderate: #C17F24; /* amber — reuses risk-medium */
--band-high: #8B1A1A; /* crimson — reuses risk-high */
--band-extreme: #1A1A22; /* near-black — NEW (navy-tinted) */
/* --- Neutral surface --- */
--colour-white: #FFFFFF; /* Card / panel surfaces against the ice base */
/* --- Derived tones (alpha of navy — NOT new hues) --- */
--tone-border: rgba(26, 43, 76, 0.12); /* hairline dividers, table rules */
--tone-border-strong: rgba(26, 43, 76, 0.22); /* input borders, emphasis */
--tone-hover: rgba(26, 43, 76, 0.05); /* row / control hover wash */
--tone-shadow: rgba(26, 43, 76, 0.10); /* card elevation */
--tone-overlay: rgba(26, 43, 76, 0.55); /* modal scrim (future use) */
/* --- Derived gold tones --- */
--gold-soft: rgba(212, 175, 55, 0.16); /* subtle accent fill */
/* --- Type scale (1.250 major-third ratio) --- */
--font-display: Georgia, 'Times New Roman', serif; /* wordmark & headings — built-in, no dependency */
--font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--text-xs: 0.75rem; /* 12px — captions, badges */
--text-sm: 0.875rem; /* 14px — secondary text */
--text-base: 1rem; /* 16px — body */
--text-md: 1.25rem; /* 20px — sub-headings */
--text-lg: 1.563rem; /* 25px — section headings */
--text-xl: 1.953rem; /* 31px — page titles */
/* --- Spacing scale --- */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
/* --- Structural metrics --- */
--header-height: 64px;
--sidebar-width: 256px;
--radius: 6px;
--radius-sm: 4px;
--transition: 150ms ease;
}
/* ----------------------------------------------------------------------------
2. RESET & BASE
---------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.55;
color: var(--colour-navy);
background-color: var(--colour-ice);
-webkit-font-smoothing: antialiased;
}
/* ----------------------------------------------------------------------------
3. TYPOGRAPHY
---------------------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.2;
color: var(--colour-navy);
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }
p { margin-bottom: var(--space-4); }
a {
color: var(--colour-steel);
text-decoration: none;
transition: color var(--transition);
}
a:hover { color: var(--colour-navy); }
/* ----------------------------------------------------------------------------
4. APPLICATION LAYOUT
CSS grid: fixed header row, then a sidebar + main content row.
---------------------------------------------------------------------------- */
.app {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
grid-template-rows: var(--header-height) 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
.app__header { grid-area: header; }
.app__sidebar { grid-area: sidebar; }
.app__main { grid-area: main; }
.app__footer { grid-area: footer; }
/* ----------------------------------------------------------------------------
5. HEADER & BRAND WORDMARK
Navy bar spanning full width, separated from the body by a gold hairline.
---------------------------------------------------------------------------- */
.app__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-5);
background-color: var(--colour-navy);
border-bottom: 2px solid var(--colour-gold); /* signature gold hairline */
}
/* Brand wordmark: serif "Percival" with a leading gold marker. */
.brand {
display: flex;
align-items: baseline;
gap: var(--space-3);
}
.brand__mark {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--colour-ice);
}
.brand__mark::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: var(--space-3);
background-color: var(--colour-gold); /* gold vigilance dot */
border-radius: 50%;
vertical-align: middle;
}
.brand__tagline {
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--colour-steel);
}
/* Version label on the right of the header. */
.header__meta {
font-size: var(--text-xs);
letter-spacing: 0.04em;
color: var(--colour-steel);
}
/* App shell footer — thin navy strip, gold hairline echoing the header,
present on every authenticated view (Session 103). Version string only;
no navigation, matches the login/share/status page footer precedent. */
.app__footer {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-3) var(--space-5);
background-color: var(--colour-navy);
border-top: 1px solid var(--colour-gold);
font-size: var(--text-xs);
letter-spacing: 0.06em;
color: var(--colour-steel);
}
/* ----------------------------------------------------------------------------
6. SIDEBAR NAVIGATION
Navy column with grouped module links; gold marker shows the active route.
---------------------------------------------------------------------------- */
.app__sidebar {
background-color: var(--colour-navy);
border-right: 1px solid var(--colour-gold);
padding: var(--space-5) 0;
overflow-y: auto;
}
/* Group label (e.g. "Risk", "Compliance"). */
.nav__group-label {
padding: var(--space-4) var(--space-5) var(--space-2);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--colour-gold);
}
.nav__list { list-style: none; }
/* Individual navigation link. */
.nav__link {
display: block;
padding: var(--space-3) var(--space-5);
font-size: var(--text-sm);
color: var(--colour-ice);
border-left: 3px solid transparent;
transition: background-color var(--transition), border-color var(--transition);
}
.nav__link:hover {
background-color: rgba(244, 247, 249, 0.06); /* faint ice wash on navy */
color: var(--colour-ice);
}
/* Active route: gold left marker + soft fill. */
.nav__link.is-active {
background-color: var(--gold-soft);
border-left-color: var(--colour-gold);
color: var(--colour-ice);
font-weight: 600;
}
/* ----------------------------------------------------------------------------
7. MAIN CONTENT & VIEW PANELS
---------------------------------------------------------------------------- */
.app__main {
padding: var(--space-6) var(--space-6);
overflow-y: auto;
}
/* Page header within a view: title + optional supporting line. */
.view__header {
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--tone-border);
}
.view__title { margin-bottom: var(--space-1); }
.view__subtitle {
font-size: var(--text-sm);
color: var(--colour-steel);
}
/* ----------------------------------------------------------------------------
8. COMPONENTS — CARDS
---------------------------------------------------------------------------- */
.card {
background-color: var(--colour-white);
border: 1px solid var(--tone-border);
border-radius: var(--radius);
box-shadow: 0 1px 3px var(--tone-shadow);
padding: var(--space-5);
}
.card__title {
font-size: var(--text-md);
margin-bottom: var(--space-3);
}
/* Responsive grid for laying out multiple cards. */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-4);
}
/* ----------------------------------------------------------------------------
9. COMPONENTS — BUTTONS
---------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.4;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition);
}
/* Primary action — navy fill. */
.btn--primary {
background-color: var(--colour-navy);
color: var(--colour-ice);
}
.btn--primary:hover { background-color: var(--colour-steel); }
/* Secondary action — outlined. */
.btn--secondary {
background-color: transparent;
border-color: var(--tone-border-strong);
color: var(--colour-navy);
}
.btn--secondary:hover { background-color: var(--tone-hover); }
/* Accent action — gold, reserved for sparing emphasis. */
.btn--accent {
background-color: var(--colour-gold);
color: var(--colour-navy);
}
.btn--accent:hover { filter: brightness(0.94); }
/* ----------------------------------------------------------------------------
10. COMPONENTS — TABLES
---------------------------------------------------------------------------- */
.table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.table th,
.table td {
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--tone-border);
vertical-align: middle; /* centre every cell so badge/action/multi-line cells share the row baseline */
}
.table th {
font-weight: 600;
color: var(--colour-steel);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: var(--text-xs);
}
.table tbody tr:hover { background-color: var(--tone-hover); }
/* ----------------------------------------------------------------------------
11. COMPONENTS — FORMS
---------------------------------------------------------------------------- */
.field { margin-bottom: var(--space-4); }
.field__label {
display: block;
margin-bottom: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
color: var(--colour-navy);
}
.field__input,
.field__select,
.field__textarea {
width: 100%;
padding: var(--space-2) var(--space-3);
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--colour-navy);
background-color: var(--colour-white);
border: 1px solid var(--tone-border-strong);
border-radius: var(--radius-sm);
transition: border-color var(--transition), box-shadow var(--transition);
}
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
outline: none;
border-color: var(--colour-steel);
box-shadow: 0 0 0 3px var(--gold-soft);
}
.field__textarea { min-height: 96px; resize: vertical; }
/* ----------------------------------------------------------------------------
12. COMPONENTS — BADGES (status & risk)
---------------------------------------------------------------------------- */
.badge {
display: inline-block;
padding: 2px var(--space-3);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 999px;
white-space: nowrap;
}
/* Build-status badges (used on the dashboard module grid). */
.badge--not-started {
background-color: var(--tone-hover);
color: var(--colour-steel);
border: 1px solid var(--tone-border-strong);
}
.badge--in-progress {
background-color: var(--gold-soft);
color: var(--colour-navy);
border: 1px solid var(--colour-gold);
}
.badge--complete {
background-color: rgba(45, 106, 79, 0.14);
color: var(--risk-low);
border: 1px solid var(--risk-low);
}
/* Risk-level badges — drive heat-map colour consistency across modules. */
.badge--risk-high {
background-color: var(--risk-high);
color: var(--colour-ice);
}
.badge--risk-medium {
background-color: var(--risk-medium);
color: var(--colour-ice);
}
.badge--risk-low {
background-color: var(--risk-low);
color: var(--colour-ice);
}
/* CSMP five-band IRV badges. Light bands carry navy text for contrast;
dark bands carry ice text. Colours sourced from the band-* variables. */
.badge--band-negligible {
background-color: var(--band-negligible);
color: var(--colour-ice);
}
.badge--band-low {
background-color: var(--band-low);
color: var(--colour-navy); /* dark text on yellow for legibility */
}
.badge--band-moderate {
background-color: var(--band-moderate);
color: var(--colour-ice);
}
.badge--band-high {
background-color: var(--band-high);
color: var(--colour-ice);
}
.badge--band-extreme {
background-color: var(--band-extreme);
color: var(--colour-ice);
}
/* ----------------------------------------------------------------------------
13. UTILITIES
---------------------------------------------------------------------------- */
.u-muted { color: var(--colour-steel); }
.u-mono { font-family: var(--font-mono); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
/* ----------------------------------------------------------------------------
14. RESPONSIVE (mobile)
Below 860px the sidebar collapses above the content as a horizontal bar.
---------------------------------------------------------------------------- */
@media (max-width: 860px) {
.app {
grid-template-columns: 1fr;
grid-template-rows: var(--header-height) auto 1fr auto;
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
}
.app__sidebar {
border-right: none;
border-bottom: 1px solid var(--colour-gold);
padding: var(--space-3) 0;
}
.nav__list {
display: flex;
flex-wrap: wrap;
}
.nav__group-label { display: none; }
.nav__link { border-left: none; border-bottom: 3px solid transparent; }
.nav__link.is-active { border-left: none; border-bottom-color: var(--colour-gold); }
.app__main { padding: var(--space-5) var(--space-4); }
}
/* ----------------------------------------------------------------------------
15. ACCESSIBILITY (focus & reduced motion)
---------------------------------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--colour-gold);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
scroll-behavior: auto !important;
}
}
/* ----------------------------------------------------------------------------
16. MODULE 2 — RISK REGISTER
Layout and small components for the risk register view. Uses existing
palette variables only — introduces no new colours.
---------------------------------------------------------------------------- */
/* Small button variant for inline table/form actions. */
.btn--sm {
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
}
/* Horizontal scroll guard for the register table on narrow viewports. */
.risk-table-wrap { overflow-x: auto; }
/* Numeric cells and secondary sub-line in the risk table. */
.risk-num { text-align: center; font-family: var(--font-mono); }
.risk-subline { font-size: var(--text-xs); margin-top: 2px; }
/* Action button cluster in the last table column. A | must NOT be
display:flex (it stops behaving as a table-cell and misaligns the row);
keep it a normal cell and space the buttons with inline-block + margin. */
.risk-actions {
white-space: nowrap;
}
.risk-actions .btn {
margin-right: var(--space-2);
}
.risk-actions .btn:last-child {
margin-right: 0;
}
/* Monospace score chip — used in the table and the live form preview. */
.score-chip {
display: inline-block;
min-width: 28px;
padding: 2px var(--space-2);
font-family: var(--font-mono);
font-weight: 600;
text-align: center;
color: var(--colour-navy);
background-color: var(--tone-hover);
border: 1px solid var(--tone-border-strong);
border-radius: var(--radius-sm);
}
/* Add / edit form: responsive field grid. */
.risk-form-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 var(--space-4);
}
.risk-span-2 { grid-column: span 2; }
.risk-span-3 { grid-column: span 3; }
/* Required-field marker (uses the high-risk accent, an existing palette hue). */
.risk-req { color: var(--risk-high); font-weight: 700; }
/* Live inherent-risk preview (score chip + band badge). */
.irv-preview {
display: flex;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-1);
}
/* Form action row. */
.risk-form-actions {
display: flex;
gap: var(--space-3);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--tone-border);
}
/* Transient status / error line above the table. */
.risk-message {
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
border: 1px solid var(--tone-border-strong);
}
.risk-message--ok {
color: var(--risk-low);
background-color: rgba(45, 106, 79, 0.10); /* alpha of existing low-risk green */
border-color: var(--risk-low);
}
.risk-message--error {
color: var(--risk-high);
background-color: rgba(139, 26, 26, 0.08); /* alpha of existing high-risk crimson */
border-color: var(--risk-high);
}
/* Collapse the form grid to a single column on narrow viewports. */
@media (max-width: 860px) {
.risk-form-grid { grid-template-columns: 1fr; }
.risk-span-2,
.risk-span-3 { grid-column: span 1; }
}
/* ----------------------------------------------------------------------------
17. MODULE 3 — CONTROL LIBRARY
Layout and components for the control library view. Reuses Module 2
primitives (.btn--sm, .risk-table-wrap, .risk-num, .score-chip, .risk-form*,
.risk-message) and introduces only the function/nature badges and the
coverage strip.
Colour discipline: function badges use the BRAND palette (navy / steel /
gold / neutral tones) — NOT the risk heat-map colours. Control function and
risk level are independent axes and must not be visually conflated. No new
hues are introduced; all values resolve to existing :root variables.
---------------------------------------------------------------------------- */
/* Coverage strip: four tiles (one per protective function). */
.ctrl-coverage {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.ctrl-tile {
background-color: var(--colour-white);
border: 1px solid var(--tone-border);
border-radius: var(--radius);
box-shadow: 0 1px 3px var(--tone-shadow);
padding: var(--space-4);
}
/* A function with zero active controls is flagged as a coverage gap using the
existing high-risk crimson as a left marker (an existing palette hue). */
.ctrl-tile--gap {
border-left: 3px solid var(--risk-high);
}
.ctrl-tile__count {
font-family: var(--font-mono);
font-size: var(--text-lg);
font-weight: 600;
color: var(--colour-navy);
}
.ctrl-tile__gap-label {
margin-top: var(--space-2);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--risk-high);
}
/* Function badges (Deter / Detect / Delay / Respond) — brand palette only.
Four visually distinct treatments achieved without new hues:
Deter — gold accent fill (visible, vigilant deterrence)
Detect — steel fill
Delay — navy fill
Respond — neutral outline (transparent fill, strong navy border) */
.badge--fn-deter {
background-color: var(--gold-soft);
color: var(--colour-navy);
border: 1px solid var(--colour-gold);
}
.badge--fn-detect {
background-color: var(--colour-steel);
color: var(--colour-ice);
}
.badge--fn-delay {
background-color: var(--colour-navy);
color: var(--colour-ice);
}
.badge--fn-respond {
background-color: var(--tone-hover);
color: var(--colour-navy);
border: 1px solid var(--tone-border-strong);
}
/* Nature badges (Active / Passive) — subtle, secondary to the function badge. */
.badge--nature-active {
background-color: var(--gold-soft);
color: var(--colour-navy);
border: 1px solid var(--colour-gold);
}
.badge--nature-passive {
background-color: var(--tone-hover);
color: var(--colour-steel);
border: 1px solid var(--tone-border-strong);
}
/* Retired controls are de-emphasised in the table. */
.ctrl-row--retired td { opacity: 0.55; }
/* Collapse the coverage strip to two columns, then one, on narrow viewports. */
@media (max-width: 860px) {
.ctrl-coverage { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.ctrl-coverage { grid-template-columns: 1fr; }
}
/* ----------------------------------------------------------------------------
17a. MODULE 3 — MULTI-FUNCTION ADDITIONS (Session 4)
Checkbox group for selecting multiple protective functions, and wrapping
for the multiple function badges shown per control. Existing variables only.
---------------------------------------------------------------------------- */
/* Function checkbox group in the add/edit form. */
.ctrl-fn-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
padding: var(--space-2) 0;
}
.ctrl-fn-option {
display: inline-flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
}
.ctrl-fn-option input { cursor: pointer; }
/* Table cell holding one-or-more function badges. A | must NOT be
display:flex (it breaks table-cell row alignment); badges are inline-block
and wrap naturally — space them with margins instead of a flex gap. */
.ctrl-fn-cell .badge {
margin: 2px var(--space-2) 2px 0;
}
/* ----------------------------------------------------------------------------
18. MODULE 4 — MITIGATION LAYER ENGINE
Layout and components for the inherent->residual view. Reuses Module 2/3
primitives (.btn--sm, .risk-table-wrap, .risk-num, .score-chip, .risk-form*,
.risk-message, .ctrl-fn-cell, function badges).
Colour discipline: treatment-priority badges map onto EXISTING tokens per
Master Doc §8.1 — Low = steel, Medium = risk-medium, High = risk-high,
Highest = band-extreme. Posture/function chips stay on neutral brand tones so
the controls axis is never visually conflated with the risk heat map. No new
hues are introduced.
---------------------------------------------------------------------------- */
/* Treatment-priority badges (§8.1 palette — existing tokens only). */
.badge--priority-low {
background-color: var(--colour-steel);
color: var(--colour-ice);
}
.badge--priority-medium {
background-color: var(--risk-medium);
color: var(--colour-ice);
}
.badge--priority-high {
background-color: var(--risk-high);
color: var(--colour-ice);
}
.badge--priority-highest {
background-color: var(--band-extreme);
color: var(--colour-ice);
}
/* Posture chip — neutral brand styling (NOT heat-mapped). */
.mit-posture {
font-size: var(--text-sm);
font-weight: 600;
color: var(--colour-navy);
white-space: nowrap;
}
.mit-posture__vuln {
font-weight: 400;
color: var(--colour-steel);
}
/* Footnote under the overview table. */
.mit-note {
margin-top: var(--space-3);
font-size: var(--text-xs);
}
/* Gap figure: over target (crimson) vs met/under (green) — existing hues. */
.mit-gap--over { color: var(--risk-high); font-weight: 700; }
.mit-gap--met { color: var(--risk-low); font-weight: 700; }
/* Links not counting toward the posture (proposed/planned/removed) dimmed. */
.mit-link--muted td { opacity: 0.55; }
/* Detail panel summary: four analysis cells. */
.mit-detail { margin-top: var(--space-5); }
.mit-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
padding-bottom: var(--space-4);
margin-bottom: var(--space-4);
border-bottom: 1px solid var(--tone-border);
}
.mit-summary__cell {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.mit-summary__label {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--colour-steel);
}
/* Per-function strength strip in the posture cell. */
.mit-fn-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-1);
}
.mit-fn {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.mit-fn__score {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 600;
color: var(--colour-navy);
}
/* A function with zero in-place strength is a coverage gap. */
.mit-fn--gap .mit-fn__score {
color: var(--risk-high);
letter-spacing: 0.04em;
}
.mit-fn--gap .badge { opacity: 0.5; }
/* Sub-headings within the detail panel. */
.mit-subhead {
font-family: var(--font-display);
font-size: var(--text-md);
color: var(--colour-navy);
margin: var(--space-5) 0 var(--space-3);
}
/* Compact select variant for inline status changes in the applied table. */
.field__select--sm {
padding: var(--space-1) var(--space-2);
font-size: var(--text-sm);
}
/* Collapse the summary grid on narrow viewports. */
@media (max-width: 860px) {
.mit-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.mit-summary { grid-template-columns: 1fr; }
}
/* ----------------------------------------------------------------------------
19. MODULE 5 — COMPLIANCE FRAMEWORK MAPPING
Layout and components for the framework register, mapping workspace and §7.2
gap analysis. Reuses Module 2/3/4 primitives (.card, .table, .risk-table-wrap,
.risk-form*, .risk-message, .mit-subhead, .mit-note, .badge, .btn--sm).
Colour discipline: framework lifecycle status uses NEUTRAL brand chips so the
compliance axis is never conflated with the risk heat map. The risk palette is
used ONLY for the coverage signal — a gap (an in-scope, unevidenced obligation)
is itself a risk, so crimson is appropriate; covered is green. No new hues.
---------------------------------------------------------------------------- */
/* --- Framework lifecycle status chips (neutral brand tones) --- */
.badge--fw-draft {
background-color: var(--tone-hover);
color: var(--colour-steel);
border: 1px solid var(--tone-border-strong);
}
.badge--fw-active {
background-color: rgba(74, 105, 132, 0.14); /* steel wash */
color: var(--colour-navy);
border: 1px solid var(--colour-steel);
}
.badge--fw-monitored {
background-color: var(--gold-soft);
color: var(--colour-navy);
border: 1px solid var(--colour-gold);
}
.badge--fw-reference {
background-color: var(--tone-hover);
color: var(--colour-navy);
border: 1px solid var(--tone-border-strong);
}
/* Out-of-force states are de-emphasised. */
.badge--fw-superseded,
.badge--fw-repealed {
background-color: transparent;
color: var(--colour-steel);
border: 1px dashed var(--tone-border-strong);
text-decoration: line-through;
}
/* --- Coverage signal badges (risk palette — gap is a risk) --- */
.badge--cov-gap {
background-color: var(--risk-high);
color: var(--colour-ice);
}
.badge--cov-covered {
background-color: var(--risk-low);
color: var(--colour-ice);
}
.badge--cov-unscoped {
background-color: var(--colour-steel);
color: var(--colour-ice);
}
/* --- Global vs tenant-private provenance chip --- */
.cmp-scope {
display: inline-block;
margin-left: var(--space-2);
padding: 1px var(--space-2);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 4px;
}
.cmp-scope--global {
background-color: var(--tone-hover);
color: var(--colour-steel);
}
.cmp-scope--private {
background-color: var(--gold-soft);
color: var(--colour-navy);
}
/* --- Gap analysis summary strip --- */
.cmp-gap-summary {
display: flex;
gap: var(--space-5);
flex-wrap: wrap;
font-size: var(--text-sm);
color: var(--colour-navy);
}
.cmp-gap-count--has { color: var(--risk-high); }
.cmp-gap-count--none { color: var(--risk-low); }
/* Highlight an in-scope, unevidenced framework row in the gap table. */
.cmp-row--gap td { background-color: rgba(139, 26, 26, 0.06); }
/* --- Mapping workspace mode toggle --- */
.cmp-mode-toggle {
display: inline-flex;
gap: var(--space-2);
margin-top: var(--space-2);
}
/* Active mode button reads as selected (gold accent, brand discipline). */
.cmp-mode-toggle .btn.is-active {
background-color: var(--colour-navy);
color: var(--colour-ice);
border-color: var(--colour-navy);
}
/* --- Inline framework add/edit form panel --- */
.cmp-form-panel {
margin-top: var(--space-4);
padding: var(--space-4);
background-color: var(--tone-hover);
border: 1px solid var(--tone-border);
border-radius: 8px;
}
.cmp-form-title {
font-family: var(--font-display);
font-size: var(--text-md);
color: var(--colour-navy);
margin: 0;
}
/* ----------------------------------------------------------------------------
20. MODULE 13 — AUTHENTICATION & ACCOUNTS
Login / password-change screens, header user block, and the users /
organisations admin tables. Built entirely on existing tokens — no new
colours introduced (palette is fixed, §4).
---------------------------------------------------------------------------- */
/* Header right-hand cluster: identity + environment meta. */
.header__right {
display: flex;
align-items: center;
gap: var(--space-5);
}
.header-user {
display: flex;
align-items: center;
gap: var(--space-3);
}
.header-user__name {
font-size: var(--text-sm);
font-weight: 600;
color: var(--colour-ice);
}
.header-user__meta {
font-size: var(--text-xs);
color: var(--colour-gold);
}
/* The header bar is navy, but the default .btn--secondary is navy text on a
transparent fill — i.e. navy-on-navy, invisible here. Invert it inside the
header only so "Sign out" reads as a legible outlined button on the dark
surface. Existing tokens only (ice / steel); the generic .btn--secondary
used on light surfaces (tables, forms) is unchanged. */
.app__header .btn--secondary {
color: var(--colour-ice);
border-color: var(--colour-ice);
background-color: transparent;
}
.app__header .btn--secondary:hover {
color: var(--colour-ice);
border-color: var(--colour-steel);
background-color: var(--colour-steel);
}
/* Pre-authentication: collapse to a single full-bleed area — Section 74's
login view supplies its own immersive chrome (see below), so the standard
app header/sidebar are hidden entirely rather than framing it. Also
applied for pending-password-change (S91): a forced rotation reached
straight after login/MFA is already is-authenticated, but the gate
screen (Section 74 reskin) still needs the same full-bleed treatment. */
body:not(.is-authenticated) .app,
body.pending-password-change .app {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "main";
}
body:not(.is-authenticated) .app__header,
body.pending-password-change .app__header { display: none; }
body:not(.is-authenticated) .app__sidebar,
body.pending-password-change .app__sidebar { display: none; }
body:not(.is-authenticated) .app__footer,
body.pending-password-change .app__footer { display: none; }
/* Auth screens (login + password change). */
.auth {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: var(--space-7);
}
.auth__card {
width: 100%;
max-width: 380px;
padding: var(--space-6);
background-color: var(--colour-white);
border: 1px solid var(--tone-border);
border-radius: var(--radius);
box-shadow: 0 2px 12px var(--tone-shadow);
}
.auth__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--colour-navy);
}
.auth__strapline {
margin: var(--space-2) 0 var(--space-1); /* tuck under the wordmark */
font-family: var(--font-display); /* echoes the Percival mark */
font-size: var(--text-md); /* 20px — above body, below title */
line-height: 1.3;
color: var(--colour-navy); /* authority tone, fixed palette */
}
.auth__subtitle {
margin: var(--space-1) 0 var(--space-5);
font-size: var(--text-sm);
color: var(--colour-steel);
}
.auth__hint {
font-weight: 400;
color: var(--colour-steel);
}
.auth__submit { width: 100%; margin-top: var(--space-2); }
/* Inline error banner (reuses the high-risk colour for emphasis). */
.auth__error {
margin-bottom: var(--space-4);
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
color: var(--colour-white);
background-color: var(--risk-high);
border-radius: var(--radius-sm);
}
/* Success variant of the same banner (S113 — e.g. "user suspended" confirmation). */
.auth__error--ok {
background-color: var(--risk-low);
}
/* Admin add-forms: two-column field grid that collapses on narrow screens. */
.admin-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-4);
}
@media (max-width: 720px) {
.admin-form { grid-template-columns: 1fr; }
}
/* Compact inline inputs used inside admin table rows. */
.field__input--inline,
.field__select--inline {
padding: var(--space-1) var(--space-2);
font-size: var(--text-sm);
}
/* Generic data table for the admin views. */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.data-table th,
.data-table td {
padding: var(--space-2) var(--space-3);
text-align: left;
border-bottom: 1px solid var(--tone-border);
vertical-align: middle;
}
.data-table th {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--colour-steel);
}
.data-table tbody tr:hover { background-color: var(--tone-hover); }
/* ----------------------------------------------------------------------------
21. MODULE 6 — POLICY & DOCUMENT REPOSITORY
Layout and components for the document register, inline form and the
detail/linkage panel. Reuses Module 2/5 primitives (.card, .table,
.risk-table-wrap, .field*, .risk-form-grid, .risk-span-*, .risk-form-actions,
.risk-message, .badge, .btn--sm, .u-mono).
Colour discipline: lifecycle status uses NEUTRAL brand chips (the same family
as the framework status chips) so the governance axis is never conflated with
the risk heat map. The risk palette is reused ONLY for the review-OVERDUE
signal (.badge--risk-high) and the destructive .btn--danger — an out-of-date
governing document, like a destructive delete, is a genuine risk. No new hues
are introduced; every value resolves to an existing :root variable.
---------------------------------------------------------------------------- */
/* --- Lifecycle status chips (neutral brand tones; mirror .badge--fw-*) --- */
.badge--pol-draft {
background-color: var(--tone-hover);
color: var(--colour-steel);
border: 1px solid var(--tone-border-strong);
}
.badge--pol-active {
background-color: rgba(74, 105, 132, 0.14); /* steel wash */
color: var(--colour-navy);
border: 1px solid var(--colour-steel);
}
.badge--pol-under_review {
background-color: var(--gold-soft); /* gold = attention/in-flight */
color: var(--colour-navy);
border: 1px solid var(--colour-gold);
}
/* Out-of-use states are de-emphasised (retained for record). */
.badge--pol-superseded,
.badge--pol-archived,
.badge--pol-withdrawn {
background-color: var(--tone-hover);
color: var(--colour-steel);
border: 1px dashed var(--tone-border-strong);
}
/* --- Register: type group heading --- */
.pol-group {
margin: var(--space-5) 0 var(--space-2);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--colour-steel);
}
.pol-group:first-child { margin-top: var(--space-2); }
/* --- Register: link-count chips (R / C / F) --- */
.pol-count {
display: inline-block;
padding: 0 var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--colour-navy);
background-color: var(--tone-hover);
border: 1px solid var(--tone-border);
border-radius: var(--radius-sm);
}
/* --- Register: file reference link --- */
.pol-file {
font-size: var(--text-sm);
word-break: break-all; /* long paths/URLs wrap rather than overflow */
}
/* --- Inline form: hint line beneath the grid --- */
.pol-form-hint {
margin: var(--space-3) 0 0;
font-size: var(--text-xs);
}
/* --- Detail / linkage panel --- */
.pol-linksets {
display: grid;
grid-template-columns: repeat(3, 1fr); /* risks | controls | frameworks */
gap: var(--space-4);
}
.pol-linkset {
padding: var(--space-3);
background-color: var(--colour-white);
border: 1px solid var(--tone-border);
border-radius: var(--radius-sm);
}
.pol-linkset__head {
margin: 0 0 var(--space-2);
font-size: var(--text-sm);
color: var(--colour-navy);
border-bottom: 1px solid var(--tone-border);
padding-bottom: var(--space-2);
}
.pol-link-list {
list-style: none;
margin: 0 0 var(--space-3);
padding: 0;
}
.pol-link {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--tone-border);
font-size: var(--text-sm);
}
.pol-link:last-child { border-bottom: none; }
.pol-link--empty { color: var(--colour-steel); }
.pol-link__ref {
flex: 0 0 auto;
color: var(--colour-steel);
}
.pol-link__name {
flex: 1 1 auto;
color: var(--colour-navy);
}
/* The add-link row: picker + button. */
.pol-link-add {
display: flex;
gap: var(--space-2);
align-items: center;
}
.pol-link-add .field__select,
.pol-link-add select {
flex: 1 1 auto;
width: auto;
padding: var(--space-2) var(--space-3);
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--colour-navy);
background-color: var(--colour-white);
border: 1px solid var(--tone-border-strong);
border-radius: var(--radius-sm);
}
/* --- Destructive action button (reuses --risk-high; no new hue) --- */
.btn--danger {
background-color: var(--risk-high);
color: var(--colour-ice);
}
.btn--danger:hover { filter: brightness(0.92); }
/* --- Utility: prevent action-cell button wrapping --- */
.u-nowrap { white-space: nowrap; }
/* Stack the linkage columns on narrow viewports. */
@media (max-width: 720px) {
.pol-linksets { grid-template-columns: 1fr; }
}
/* ----------------------------------------------------------------------------
22. MODULE 7 — DASHBOARD & HEAT MAPS
----------------------------------------------------------------------------
Read-only overview. Reuses existing primitives (.card, .card-grid, .badge,
.badge--cov-*, .u-muted, .risk-subline). All colour comes from existing
tokens: the five-band CSMP IRV ramp (--band-*) drives the heat-map cells and
band legend; the §8.1 priority palette (steel / --risk-medium / --risk-high /
--band-extreme) drives the treatment-priority bar. No new hues are introduced.
---------------------------------------------------------------------------- */
/* --- KPI tiles ------------------------------------------------------------- */
.dash-kpi {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.dash-kpi__value {
font-family: var(--font-display);
font-size: var(--text-xl);
line-height: 1.1;
color: var(--colour-navy);
}
.dash-kpi__label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--colour-navy);
}
.dash-kpi__sub { font-size: var(--text-xs); }
/* Left accent rule signals the tile's state without introducing new hues:
alert reuses the high-risk crimson, good reuses the low-risk green. */
.dash-kpi--alert { border-left: 3px solid var(--risk-high); }
.dash-kpi--good { border-left: 3px solid var(--risk-low); }
.dash-kpi--neutral { border-left: 3px solid var(--colour-steel); }
/* --- Two-column layout for heat maps and the gap/review panels ------------- */
.dash-grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-4);
}
/* --- Treatment-priority distribution bar ----------------------------------- */
.dash-prio-bar {
display: flex;
width: 100%;
height: 28px;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--tone-border);
}
.dash-prio-seg {
display: flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
font-size: var(--text-xs);
font-weight: 600;
color: var(--colour-ice);
}
/* §8.1 priority palette — existing tokens only (mirrors .badge--priority-*). */
.dash-prio-seg--low { background-color: var(--colour-steel); }
.dash-prio-seg--medium { background-color: var(--risk-medium); }
.dash-prio-seg--high { background-color: var(--risk-high); }
.dash-prio-seg--highest { background-color: var(--band-extreme); }
/* --- Legends (shared by the priority bar and the heat-map band ramp) ------- */
.dash-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-4);
font-size: var(--text-xs);
color: var(--colour-navy);
}
.dash-legend__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.dash-legend__swatch {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 3px;
border: 1px solid var(--tone-border-strong);
}
/* Marks the five-band IRV ramp legend, as against the treatment-priority one —
both wear .dash-legend and are otherwise identical.
IT DELIBERATELY SETS NOTHING, and that was measured rather than assumed. The
obvious rule to reach for is max-width: 360px, to line the legend up with the
.dash-heat block above it (which currently overhangs it by 10px). Applying it
WRAPS THE LEGEND ONTO THREE LINES: its five items need 369px on one line, nine
more than the grid is wide. A 10px overhang is a far better outcome than a
legend three deep, so the modifier stays a semantic hook only. */
.dash-legend--bands { /* see above — capping this to the grid width wraps it */ }
/* --- Heat maps ------------------------------------------------------------- */
.dash-heat { max-width: 360px; }
/* 6-column grid: a leading Impact-axis column + the 5 likelihood columns. The
final row carries the Likelihood-axis labels under a corner spacer. */
.dash-heat__grid {
display: grid;
grid-template-columns: 1.5rem repeat(5, 1fr);
gap: 3px;
}
.dash-heat__cell {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-sm);
font-weight: 600;
color: var(--colour-ice);
border-radius: var(--radius-sm);
background-color: var(--tone-hover); /* neutral — unoccupied position */
border: 1px solid var(--tone-border);
}
/* Occupied cells carry the SERVER-assigned band colour (five-band ramp). Light
bands take navy text for contrast, matching the .badge--band-* convention. */
.dash-heat__cell--negligible { background-color: var(--band-negligible); border-color: var(--band-negligible); }
.dash-heat__cell--low { background-color: var(--band-low); border-color: var(--band-low); color: var(--colour-navy); }
.dash-heat__cell--moderate { background-color: var(--band-moderate); border-color: var(--band-moderate); }
.dash-heat__cell--high { background-color: var(--band-high); border-color: var(--band-high); }
.dash-heat__cell--extreme { background-color: var(--band-extreme); border-color: var(--band-extreme); }
/* Axis labels. */
.dash-heat__axis {
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xs);
font-weight: 600;
color: var(--colour-steel);
}
.dash-heat__axis--x { padding-top: var(--space-1); }
.dash-heat__corner { /* spacer beneath the impact-axis column */ }
/* The impact-axis modifier needs no rule of its own: the axis column is a fixed
1.5rem grid track, so the digit already clears the cells by ~8px — the same
separation --x buys with its padding-top. Declared, not deleted, so the two
axes stay symmetrical in the markup and the modifier remains a live hook
(the .dash-heat__corner convention above). */
.dash-heat__axis--y { /* no separation needed — the grid track supplies it */ }
.dash-heat__axis-titles {
display: flex;
justify-content: space-between;
margin-top: var(--space-2);
font-size: var(--text-xs);
color: var(--colour-steel);
letter-spacing: 0.04em;
}
/* The two axis NAMES ("Impact ↑", "Likelihood →"). They inherit size, colour and
tracking from the wrapper above, but were inheriting weight 400 from the body
while the axis NUMBERS (.dash-heat__axis) are 600 — so the scale read bolder
than the thing it was labelling. Semibold restores the pairing. nowrap keeps
the arrow on the same line as its word if the panel ever narrows or the label
is translated into something longer. */
.dash-heat__axis-title {
font-weight: 600;
white-space: nowrap;
}
/* Positioned entirely by the wrapper's space-between — --y lands flush left and
--x flush right against the grid's own edges. Nothing to add without
inventing a layout the panel does not want. */
.dash-heat__axis-title--y,
.dash-heat__axis-title--x { /* placed by .dash-heat__axis-titles */ }
/* --- Gap / review detail lists --------------------------------------------- */
.dash-count {
font-size: var(--text-sm);
font-weight: 600;
margin-bottom: var(--space-3);
}
.dash-count--alert { color: var(--risk-high); }
.dash-allclear {
font-size: var(--text-sm);
color: var(--risk-low);
margin-bottom: 0;
}
.dash-list {
list-style: none;
display: flex;
flex-direction: column;
}
.dash-list__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--tone-border);
font-size: var(--text-sm);
}
.dash-list__item:last-child { border-bottom: none; }
.dash-list__primary { color: var(--colour-navy); }
.dash-list__meta { font-size: var(--text-xs); }
.dash-note {
font-size: var(--text-xs);
margin-top: var(--space-3);
margin-bottom: 0;
}
/* ----------------------------------------------------------------------------
23. MODULE 8 — SITE & ASSET PROFILES
Site register + per-site asset inventory. Reuses Module 2/6 primitives
(.card, .table, .risk-table-wrap, .risk-form*, .risk-message, .badge,
.btn--sm, .u-mono, .u-nowrap, .risk-subline). Two badge families are added,
both on existing tokens — no new hues:
- Criticality reuses the §8.1 treatment-priority palette (steel /
--risk-medium / --risk-high / --band-extreme): criticality is a
protection-priority axis, so it shares that idiom.
- Lifecycle status uses NEUTRAL brand chips (mirrors .badge--pol-*):
status is not a risk axis.
---------------------------------------------------------------------------- */
/* --- Criticality chips (mirror .badge--priority-*; §8.1 palette) --- */
.badge--crit-low {
background-color: var(--colour-steel);
color: var(--colour-ice);
}
.badge--crit-medium {
background-color: var(--risk-medium);
color: var(--colour-ice);
}
.badge--crit-high {
background-color: var(--risk-high);
color: var(--colour-ice);
}
.badge--crit-critical {
background-color: var(--band-extreme);
color: var(--colour-ice);
}
/* --- Lifecycle status chips (neutral brand tones; mirror .badge--pol-*) --- */
.badge--site-active {
background-color: rgba(74, 105, 132, 0.14); /* steel wash */
color: var(--colour-navy);
border: 1px solid var(--colour-steel);
}
.badge--site-inactive {
background-color: var(--gold-soft); /* gold = attention / mothballed */
color: var(--colour-navy);
border: 1px solid var(--colour-gold);
}
.badge--site-decommissioned {
background-color: var(--tone-hover); /* de-emphasised, retained for record */
color: var(--colour-steel);
border: 1px dashed var(--tone-border-strong);
}
/* --- Register: asset / risk count chip --- */
.site-count {
display: inline-block;
padding: 0 var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--colour-navy);
background-color: var(--tone-hover);
border-radius: 4px;
}
/* --- Detail panel: address summary + asset sub-heading --- */
.site-detail-meta {
font-size: var(--text-sm);
margin: 0;
}
.site-subhead {
margin: 0;
font-size: var(--text-md);
color: var(--colour-navy);
}
/* --- Inline field hint (e.g. legacy free-text site continuity note) --- */
.field__hint {
font-size: var(--text-xs);
margin: var(--space-1) 0 0;
}
/* ----------------------------------------------------------------------------
24. MODULE 10 — INCIDENT LOG
Incident register. Reuses Module 2/6/8 primitives (.card, .table,
.risk-table-wrap, .risk-form*, .risk-message, .badge, .btn--sm, .u-mono,
.u-nowrap, .risk-subline, .field*, .risk-span-*, .risk-form-actions). Two
badge families are added, both on existing tokens — no new hues:
- Severity reuses the §8.1 treatment-priority palette (steel /
--risk-medium / --risk-high / --band-extreme): severity is a
protection-priority axis, so it shares that idiom (mirrors
.badge--priority-* and .badge--crit-*).
- Lifecycle status uses NEUTRAL brand chips (mirrors .badge--site-*):
status is not a risk axis.
---------------------------------------------------------------------------- */
/* --- Severity chips (mirror .badge--priority-*; §8.1 palette) --- */
.badge--sev-low {
background-color: var(--colour-steel);
color: var(--colour-ice);
}
.badge--sev-medium {
background-color: var(--risk-medium);
color: var(--colour-ice);
}
.badge--sev-high {
background-color: var(--risk-high);
color: var(--colour-ice);
}
.badge--sev-critical {
background-color: var(--band-extreme);
color: var(--colour-ice);
}
/* --- Lifecycle status chips (neutral brand tones; mirror .badge--site-*) --- */
.badge--inc-open {
background-color: var(--gold-soft); /* gold = live / needs attention */
color: var(--colour-navy);
border: 1px solid var(--colour-gold);
}
.badge--inc-investigating {
background-color: rgba(74, 105, 132, 0.14); /* steel wash — in hand */
color: var(--colour-navy);
border: 1px solid var(--colour-steel);
}
.badge--inc-contained {
background-color: rgba(74, 105, 132, 0.14); /* steel wash — threat held */
color: var(--colour-navy);
border: 1px solid var(--colour-steel);
}
.badge--inc-closed {
background-color: var(--tone-hover); /* de-emphasised, retained for record */
color: var(--colour-steel);
border: 1px dashed var(--tone-border-strong);
}
/* --- Register: linked site / asset / risk cell --- */
.inc-links-cell {
font-size: var(--text-sm);
line-height: 1.5;
}
.inc-link {
display: block;
white-space: nowrap;
}
.inc-link__k {
display: inline-block;
min-width: 42px;
font-size: var(--text-xs);
font-weight: 700;
color: var(--colour-steel);
}
/* ----------------------------------------------------------------------------
25. MODULE 11 — UK LEGISLATION LIBRARY
----------------------------------------------------------------------------
Read-only library over the Module 5 framework data. Reuses existing primitives
(.card, .table, .badge, .badge--fw-* lifecycle chips, .cmp-scope provenance,
.mit-subhead, .risk-table-wrap, .field*). All colour comes from existing
tokens — neutral brand tones for the filter bar, mapping-count chips, the
detail panel, the supersession chain and the reverse-mapping lists. Lifecycle
status is the only "state" signal and it reuses the neutral Module 5 chips, so
the compliance axis is never conflated with the risk heat map. No new hues.
---------------------------------------------------------------------------- */
/* --- Generic neutral badge (used for control/risk/policy status pips) ------ */
.badge--neutral {
background-color: var(--tone-hover);
color: var(--colour-steel);
border: 1px solid var(--tone-border-strong);
}
/* --- Filter bar ------------------------------------------------------------ */
.leg-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--space-3);
margin-top: var(--space-3);
padding: var(--space-3);
background-color: var(--tone-hover);
border: 1px solid var(--tone-border);
border-radius: var(--radius-sm);
}
.leg-filter-bar .field { margin-bottom: 0; }
/* Let the search field take the remaining row width. */
.leg-filter-search { flex: 1 1 220px; }
.leg-filter-reset { flex: 0 0 auto; }
/* --- Mapping-count chips (Controls / Risks / Policies) --------------------- */
.leg-maps-cell { white-space: nowrap; }
.leg-count {
display: inline-block;
margin-right: var(--space-1);
padding: 1px var(--space-2);
font-size: var(--text-xs);
color: var(--colour-steel);
background-color: transparent;
border: 1px solid var(--tone-border-strong);
border-radius: var(--radius-sm);
}
/* Highlight a non-zero count: steel wash, navy text. */
.leg-count--has {
color: var(--colour-navy);
background-color: rgba(74, 105, 132, 0.14);
border-color: var(--colour-steel);
}
.leg-count strong { font-weight: 700; }
/* In-force window cell keeps to one line where it can. */
.leg-inforce { white-space: nowrap; font-size: var(--text-sm); }
/* Highlight the row whose detail panel is open. */
.leg-row--open { background-color: var(--gold-soft); }
/* --- Detail panel ---------------------------------------------------------- */
.leg-detail { border-left: 3px solid var(--colour-gold); }
/* Meta strip: provenance + status chips and labelled facts. */
.leg-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-4);
}
.leg-meta__item { font-size: var(--text-sm); color: var(--colour-navy); }
.leg-meta__k {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--colour-steel);
margin-right: var(--space-1);
}
/* Prose blocks (security relevance, notes). */
.leg-prose {
margin-top: var(--space-1);
color: var(--colour-navy);
line-height: 1.55;
white-space: pre-line;
}
/* In-panel deep link to Framework Mapping. */
.leg-link { color: var(--colour-steel); font-weight: 600; }
.leg-link:hover { color: var(--colour-navy); }
/* --- Supersession / amendment chain --------------------------------------- */
.leg-rel-list { list-style: none; margin: var(--space-1) 0 0; padding: 0; }
.leg-rel-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2);
padding: var(--space-1) 0;
border-bottom: 1px solid var(--tone-border);
font-size: var(--text-sm);
}
.leg-rel-item:last-child { border-bottom: none; }
.leg-rel-verb {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--colour-steel);
min-width: 110px;
}
.leg-rel-target { color: var(--colour-navy); font-weight: 600; }
.leg-rel-note { font-size: var(--text-sm); }
/* --- Reverse-mapping lists (Referenced by) -------------------------------- */
.leg-rev-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
margin-top: var(--space-2);
}
.leg-rev-block {
background-color: var(--tone-hover);
border: 1px solid var(--tone-border);
border-radius: var(--radius-sm);
padding: var(--space-3);
}
.leg-rev-title {
margin: 0 0 var(--space-2);
font-size: var(--text-sm);
font-weight: 700;
color: var(--colour-navy);
}
.leg-rev-list { list-style: none; margin: 0; padding: 0; }
.leg-rev-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2);
padding: var(--space-1) 0;
border-bottom: 1px solid var(--tone-border);
font-size: var(--text-sm);
}
.leg-rev-item:last-child { border-bottom: none; }
.leg-rev-ref { font-size: var(--text-xs); color: var(--colour-steel); }
.leg-rev-name { color: var(--colour-navy); flex: 1 1 auto; }
.leg-rev-status { font-size: var(--text-xs); }
/* Stack the filter bar and reverse-mapping columns on narrow viewports. */
@media (max-width: 720px) {
.leg-rev-grid { grid-template-columns: 1fr; }
.leg-filter-search { flex-basis: 100%; }
}
/* ----------------------------------------------------------------------------
26. MODULE 9 — REPORTING (+ print stylesheet)
----------------------------------------------------------------------------
Read-only report pack aggregating every module. Reuses existing primitives
(.card, .table, .risk-table-wrap, .badge families, .dash-kpi tiles, .btn,
.mit-subhead). The only genuinely new chrome is the no-print control bar, the
printed report masthead, and the @media print block that strips the app shell
so the browser's native "Save as PDF" prints just the document. All colour
comes from existing tokens — no new hues.
---------------------------------------------------------------------------- */
/* --- Print visibility utilities -------------------------------------------- */
.u-no-print { /* visible on screen, removed when printing (see @media print) */ }
.u-print-only { display: none; } /* hidden on screen, shown only when printing */
/* --- Control bar (screen only) --------------------------------------------- */
.rpt-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
}
.rpt-toolbar__row { flex: 1 1 320px; }
.rpt-toolbar__label {
display: block;
margin-bottom: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
color: var(--colour-navy);
}
.rpt-toggles {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
}
.rpt-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--colour-navy);
cursor: pointer;
}
.rpt-toolbar__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: flex-end;
}
.rpt-hint { margin: var(--space-3) 0; font-size: var(--text-sm); }
/* --- Report document ------------------------------------------------------- */
.rpt-doc { margin-top: var(--space-4); }
/* Printed masthead — serif wordmark + generation metadata. */
.rpt-dochead {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
padding-bottom: var(--space-4);
margin-bottom: var(--space-5);
border-bottom: 2px solid var(--colour-gold); /* signature gold hairline */
}
.rpt-dochead__brand { display: flex; flex-direction: column; gap: var(--space-1); }
.rpt-dochead__mark {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--colour-navy);
}
.rpt-dochead__sub {
font-size: var(--text-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--colour-steel);
}
.rpt-dochead__meta {
text-align: right;
font-size: var(--text-sm);
color: var(--colour-navy);
}
/* --- Sections -------------------------------------------------------------- */
.rpt-section { margin-bottom: var(--space-5); }
.rpt-section__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-3);
}
.rpt-count { margin-bottom: var(--space-3); font-size: var(--text-sm); }
/* Composite (estate) sub-tables. */
.rpt-sub { margin-top: var(--space-4); }
.rpt-sub__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-2);
}
/* Executive-summary tiles + treatment-priority line. */
.rpt-kpis { margin-bottom: var(--space-3); }
.rpt-prioline { font-size: var(--text-sm); }
/* ----------------------------------------------------------------------------
PRINT STYLESHEET
Strip the app chrome and all no-print controls so the browser prints only the
report document. Used for "Save as PDF" — the zero-dependency PDF path on
Stellar shared hosting (no server-side PDF library required).
---------------------------------------------------------------------------- */
@media print {
/* Force background/badge colours to render in print/PDF. */
*,
*::before,
*::after {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Remove the screen chrome and every no-print control. */
.app__header,
.app__sidebar,
.u-no-print {
display: none !important;
}
.u-print-only { display: revert; }
/* Collapse the app grid; let the main column own the full page width. */
.app {
display: block;
min-height: 0;
}
.app__main {
overflow: visible;
padding: 0;
}
body { background: #fff; }
/* Report cards print flat (no elevation / heavy borders eat ink). */
.rpt-section,
.card {
box-shadow: none;
border: 1px solid var(--tone-border);
break-inside: auto;
}
/* Keep table rows intact across page breaks; let tables flow naturally. */
.risk-table-wrap { overflow: visible; }
.table { font-size: var(--text-xs); }
thead { display: table-header-group; } /* repeat headers on each page */
tr { break-inside: avoid; }
/* Each major section starts on a fresh page after the summary. */
#rpt-sec-risk,
#rpt-sec-matrices,
#rpt-sec-compliance,
#rpt-sec-estate,
#rpt-sec-incident,
#rpt-sec-policy,
#rpt-sec-legislation {
break-before: page;
}
/* Sensible default page margins for the PDF. */
@page { margin: 14mm; }
}
/* ----------------------------------------------------------------------------
27. MODULE 12 — AUDIT TRAIL (read-only viewer)
----------------------------------------------------------------------------
A read-only view over the append-only audit_log. Reuses existing primitives
(.card, .table, .badge--neutral, .risk-table-wrap, .risk-subline, .field*,
.u-mono, .u-muted, .mit-note). Neutral chrome throughout — the only colour
signal is the existing crimson token on the security-relevant 'delete' and
'login_failed' actions. No new hues.
---------------------------------------------------------------------------- */
/* --- Filter bar (mirrors the legislation filter bar) ----------------------- */
.aud-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--space-3);
margin-top: var(--space-3);
padding: var(--space-3);
background-color: var(--tone-hover);
border: 1px solid var(--tone-border);
border-radius: var(--radius-sm);
}
.aud-filter-bar .field { margin-bottom: 0; }
.aud-filter-search { flex: 1 1 200px; }
.aud-filter-reset { flex: 0 0 auto; }
/* --- Event table ----------------------------------------------------------- */
.aud-table { font-size: var(--text-sm); }
.aud-time { white-space: nowrap; font-size: var(--text-xs); color: var(--colour-navy); }
.aud-actor { font-size: var(--text-sm); color: var(--colour-navy); }
.aud-ip { white-space: nowrap; font-size: var(--text-xs); }
.aud-summary { min-width: 240px; }
/* Action chip: neutral by default; crimson accent for security-signal actions.
The accent is a left border + tinted text on the existing high-risk token —
no fill, so it stays quiet but scannable. */
.aud-action { font-size: var(--text-xs); }
.aud-action--alert {
color: var(--risk-high);
border-color: var(--risk-high);
background-color: rgba(139, 26, 26, 0.06); /* alpha of existing high-risk crimson */
}
/* Entity cell: type label + monospace id. */
.aud-etype {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--colour-steel);
}
.aud-eid { font-size: var(--text-xs); color: var(--colour-navy); }
/* Inline detail (JSON) toggle + block. */
.aud-detail-toggle {
margin-left: var(--space-2);
padding: 0;
font-size: var(--text-xs);
color: var(--colour-steel);
background: none;
border: none;
border-bottom: 1px dotted var(--colour-steel);
cursor: pointer;
}
.aud-detail-toggle:hover { color: var(--colour-navy); border-bottom-color: var(--colour-navy); }
/* Detail container (revealed under the summary). */
.aud-detail { margin-top: var(--space-2); }
/* Field-level change list for 'update' events: "Field old → new". */
.aud-diff {
margin: 0;
padding: var(--space-2) var(--space-3);
list-style: none;
background-color: var(--tone-hover);
border: 1px solid var(--tone-border);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
}
.aud-diff li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-1) var(--space-2);
padding: 2px 0;
}
.aud-diff li + li { border-top: 1px dotted var(--tone-border); }
.aud-diff-field {
min-width: 130px;
font-weight: 700;
color: var(--colour-steel);
}
.aud-diff-from { color: var(--colour-navy); text-decoration: line-through; opacity: 0.75; }
.aud-diff-arrow { color: var(--colour-steel); }
.aud-diff-to { color: var(--colour-navy); font-weight: 600; }
/* Export / print events: compact meta line. */
.aud-detail-meta {
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
color: var(--colour-navy);
background-color: var(--tone-hover);
border: 1px solid var(--tone-border);
border-radius: var(--radius-sm);
}
/* Fallback raw-JSON detail. */
.aud-detail-pre {
margin: 0;
padding: var(--space-2) var(--space-3);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--colour-navy);
white-space: pre-wrap;
word-break: break-word;
background-color: var(--tone-hover);
border: 1px solid var(--tone-border);
border-radius: var(--radius-sm);
}
/* ============================================================================
28. CAPABILITY-AWARE VIEWER MODE (Session 16)
----------------------------------------------------------------------------
Roles without can_write get a read-only render of the existing edit forms:
the same fields, disabled, with no Save / Delete / Add / Remove / Map
controls. Server-side gating (auth.php capability flags) is unchanged — this
is the cosmetic layer that stops a role ever seeing a control it cannot use.
Existing tokens only; no new hues.
---------------------------------------------------------------------------- */
/* Disabled field controls in a locked form: muted, clearly non-editable, but
still fully legible. Applied by Percival.lock_inputs() via .is-readonly. */
.is-readonly .field__input:disabled,
.is-readonly .field__select:disabled,
.is-readonly .field__textarea:disabled {
background-color: var(--tone-hover); /* faint navy wash = inert */
color: var(--colour-navy); /* keep text fully readable */
border-color: var(--tone-border); /* softer than an active field */
cursor: default;
opacity: 1; /* override UA dimming — readability first */
-webkit-text-fill-color: var(--colour-navy); /* Safari keeps disabled text dark */
}
/* Neutral cue that the panel is a view of the record, not an editor. Reuses the
brand neutral surface; deliberately NOT a risk hue (this is not a warning). */
.form-readonly-note {
margin: 0 0 var(--space-3) 0;
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
color: var(--colour-steel);
background-color: var(--tone-hover);
border-left: 3px solid var(--colour-steel);
border-radius: var(--radius-sm);
}
/* ============================================================================
29. SESSION EXPIRY WARNING (Session 17)
----------------------------------------------------------------------------
The "about to be signed out" modal raised by app.js (8A) when the idle or
absolute session limit is within its warn window. Reuses the reserved
--tone-overlay scrim and the standard card/button primitives; existing tokens
only, no new hues. Hidden until app.js adds .is-visible.
---------------------------------------------------------------------------- */
/* Full-viewport scrim; sits above all app chrome. */
.session-timeout {
position: fixed;
inset: 0;
z-index: 1000;
display: none; /* shown via .is-visible */
align-items: center;
justify-content: center;
padding: var(--space-4);
background-color: var(--tone-overlay); /* navy scrim, reserved for modals */
}
.session-timeout.is-visible { display: flex; }
/* Centred dialogue panel — a card on the brand white surface. */
.session-timeout__panel {
width: 100%;
max-width: 420px;
background-color: var(--colour-white);
border: 1px solid var(--tone-border-strong);
border-radius: var(--radius);
box-shadow: 0 8px 24px var(--tone-shadow);
padding: var(--space-5);
}
.session-timeout__title {
font-size: var(--text-md);
margin-bottom: var(--space-3);
}
.session-timeout__body {
font-size: var(--text-sm);
color: var(--colour-steel);
margin-bottom: var(--space-4);
}
/* The live countdown — gold accent for vigilance, navy text for legibility. */
.session-timeout__count {
display: inline-block;
min-width: 2ch;
text-align: center;
font-weight: 700;
color: var(--colour-navy);
background-color: var(--gold-soft);
border-radius: var(--radius-sm);
padding: 0 var(--space-1);
}
/* Action row — right-aligned, primary "Stay" leads. */
.session-timeout__actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
}
/* ============================================================================
30. MODULE 10 — INCIDENT ATTACHMENTS (Session 21)
----------------------------------------------------------------------------
Supplementary-evidence panel inside the incident edit form: a file list with
download / delete, plus an upload row (shown only to can_write roles). Reuses
the shared primitives (.btn*, .field__input, .u-muted) and neutral brand
tones throughout — NO new hues, NO risk heat-map colours (attachments are not
a risk axis). The register's file-count chip mirrors the existing .inc-link
key/value idiom.
---------------------------------------------------------------------------- */
/* --- Register: file-count chip (neutral; reuses the .inc-link layout) --- */
.inc-attach-chip .inc-link__k {
color: var(--colour-steel);
}
/* --- Attachments panel: sits below the form actions, divided off --- */
.inc-attach {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--tone-border);
}
.inc-attach__title {
font-family: var(--font-display);
font-size: var(--text-sm);
color: var(--colour-navy);
margin: 0 0 var(--space-3);
}
.inc-attach__hint,
.inc-attach__empty {
font-size: var(--text-sm);
margin: 0;
}
/* --- File list --- */
.inc-att-list {
list-style: none;
margin: 0 0 var(--space-3);
padding: 0;
}
.inc-att-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--tone-border);
border-radius: var(--radius-sm);
margin-bottom: var(--space-2);
background-color: var(--colour-white);
}
.inc-att-item:hover {
background-color: var(--tone-hover);
}
.inc-att-item__main {
min-width: 0; /* allow the name to truncate rather than overflow */
}
.inc-att-item__name {
font-weight: 600;
color: var(--colour-navy);
word-break: break-word;
}
.inc-att-item__desc {
font-size: var(--text-sm);
color: var(--colour-steel);
margin-top: var(--space-1);
}
.inc-att-item__meta {
font-size: var(--text-xs);
margin-top: var(--space-1);
}
.inc-att-item__actions {
display: flex;
gap: var(--space-2);
flex-shrink: 0;
white-space: nowrap;
}
/* --- Upload row (can_write only) --- */
.inc-attach__upload {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
padding-top: var(--space-2);
}
.inc-attach__file {
flex: 1 1 14rem;
min-width: 12rem;
}
.inc-attach__desc {
flex: 2 1 18rem;
min-width: 12rem;
}
.inc-attach__limit {
font-size: var(--text-xs);
}
/* ============================================================================
31. REVIEW / APPROVAL SUBSYSTEM (Session — review subsystem)
----------------------------------------------------------------------------
Polymorphic second-pair-of-eyes review, surfaced first on the Risk Register:
a current-state chip in the register, plus a review/approval panel inside the
existing edit form (submit for review — can_write; record a decision —
can_review). Review state is NOT a risk level, so the chips use neutral brand
washes (the same idiom as the policy / framework lifecycle chips) — the risk
heat-map crimson is reused ONLY for the live-on-read "re-review due" overdue
flag, exactly as the policy module signals an overdue review. Existing tokens
only; no new hues.
---------------------------------------------------------------------------- */
/* --- Review-state chips ---------------------------------------------------- */
/* Pending: gold wash = awaiting attention (mirrors .badge--in-progress). */
.badge--review-pending {
background-color: var(--gold-soft);
color: var(--colour-navy);
border: 1px solid var(--colour-gold);
}
/* Approved: green wash = settled (mirrors .badge--complete). */
.badge--review-approved {
background-color: rgba(45, 106, 79, 0.14); /* risk-low wash */
color: var(--risk-low);
border: 1px solid var(--risk-low);
}
/* Changes requested: steel wash = action needed, but not a failure. */
.badge--review-changes {
background-color: rgba(74, 105, 132, 0.14); /* steel wash */
color: var(--colour-navy);
border: 1px solid var(--colour-steel);
}
/* Rejected: crimson wash (NOT a solid risk-high fill — a decision, not a risk
level), keeping the chip family visually consistent. */
.badge--review-rejected {
background-color: rgba(139, 26, 26, 0.12); /* risk-high wash */
color: var(--risk-high);
border: 1px solid var(--risk-high);
}
/* --- Review / approval panel (inside the risk edit form) ------------------- */
.rv-panel {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--tone-border);
}
.rv-panel__title {
font-family: var(--font-display);
font-size: var(--text-sm);
color: var(--colour-navy);
margin: 0 0 var(--space-3) 0;
}
/* Current-state summary block. */
.rv-state {
margin-bottom: var(--space-2);
}
.rv-meta {
font-size: var(--text-sm);
margin: 0 0 var(--space-2) 0;
}
.rv-comments {
font-size: var(--text-sm);
color: var(--colour-navy);
background-color: var(--tone-hover);
border-left: 3px solid var(--colour-steel);
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-3);
margin: 0 0 var(--space-3) 0;
white-space: pre-wrap; /* preserve reviewer line breaks */
}
/* Action blocks (submit / decision). */
.rv-action {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px dashed var(--tone-border);
}
.rv-action__buttons {
margin-top: var(--space-2);
display: flex;
gap: var(--space-2);
}
/* The decision block lays its small fields out in a responsive row. */
.rv-action--decision {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-3);
align-items: end;
}
.rv-action--decision .rv-action__buttons {
grid-column: 1 / -1;
}
/* The reviewer-comments field spans the full width of the decision grid. */
.rv-action--decision-comments {
grid-column: 1 / -1;
}
/* ============================================================================
32. MODULE 14 — CONTROL TEST & AUDIT CYCLE
----------------------------------------------------------------------------
Tabbed view (Test Definitions / Active Audits / Past Audits), result and
lifecycle badges, the audit working panel and its evidence rows. Reuses the
fixed brand + risk tokens only (no new hues): result chips use the risk
heat-map palette (a failed test IS a risk signal); audit lifecycle uses the
neutral brand chips already established for build status.
============================================================================ */
/* --- Tab bar ------------------------------------------------------------- */
.at-tabs {
display: flex;
gap: var(--space-2);
border-bottom: 1px solid var(--tone-border-strong);
margin-bottom: var(--space-4);
}
.at-tab {
appearance: none;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
padding: var(--space-3) var(--space-4);
font: inherit;
font-weight: 600;
color: var(--colour-steel);
cursor: pointer;
}
.at-tab:hover { color: var(--colour-navy); }
.at-tab--active {
color: var(--colour-navy);
border-bottom-color: var(--colour-gold);
}
/* --- Result badges (risk heat-map palette, soft-fill chips) -------------- */
.badge--result-pass {
background-color: rgba(45, 106, 79, 0.14);
color: var(--risk-low);
border: 1px solid var(--risk-low);
}
.badge--result-fail {
background-color: rgba(139, 26, 26, 0.12);
color: var(--risk-high);
border: 1px solid var(--risk-high);
}
.badge--result-incon {
background-color: rgba(193, 127, 36, 0.14);
color: var(--risk-medium);
border: 1px solid var(--risk-medium);
}
/* --- Audit lifecycle badges (neutral brand chips) ----------------------- */
.badge--audit-active {
background-color: var(--gold-soft);
color: var(--colour-navy);
border: 1px solid var(--colour-gold);
}
.badge--audit-complete {
background-color: rgba(45, 106, 79, 0.14);
color: var(--risk-low);
border: 1px solid var(--risk-low);
}
.badge--audit-cancelled {
background-color: var(--tone-hover);
color: var(--colour-steel);
border: 1px solid var(--tone-border-strong);
}
/* --- Overdue marker (inline next-due flag) ------------------------------- */
.at-overdue {
display: inline-block;
margin-left: var(--space-2);
padding: 0 var(--space-2);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--risk-high);
border: 1px solid var(--risk-high);
border-radius: 999px;
}
/* --- Past-audit filter bar ----------------------------------------------- */
.at-filter { max-width: 280px; }
.at-filter__select { width: 100%; }
/* --- Audit working panel ------------------------------------------------- */
.at-audit-panel .card__title { display: flex; align-items: center; gap: var(--space-3); }
.at-audit-sub { margin: 0 0 var(--space-4); }
/* --- Evidence block ------------------------------------------------------ */
.at-ev-block { margin-top: var(--space-3); }
.at-ev-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
padding: var(--space-3) 0;
}
.at-ev-name { font-weight: 600; }
.at-ev-empty { margin: var(--space-2) 0; }
.at-ev-upload {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-2);
}
.at-ev-file { max-width: 320px; }
.at-ev-hint { font-size: var(--text-xs); }
/* ============================================================================
33. PHASE 3 — EXCEPTION REGISTER
----------------------------------------------------------------------------
Tabbed register (Pending / Policy Exceptions / Control Exceptions), lifecycle
status chips and the inline raise/edit panel. Reuses the fixed brand + risk
tokens only (no new hues) and the shared form/table primitives (.card,
.table, .risk-table-wrap, .risk-form-grid, .risk-span-*, .field*,
.risk-form-actions). Only the exception-specific tab bar, status chips and
inline markers are defined here; the tab bar mirrors Module 14's pattern.
Status palette: pending = gold attention chip, approved = risk-low green,
closed = neutral brand chip; overdue reuses the risk-high signal.
============================================================================ */
/* --- Tab bar (mirrors .at-tabs) ------------------------------------------ */
.exc-tabs {
display: flex;
gap: var(--space-2);
border-bottom: 1px solid var(--tone-border-strong);
margin-bottom: var(--space-4);
}
.exc-tab {
appearance: none;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
padding: var(--space-3) var(--space-4);
font: inherit;
font-weight: 600;
color: var(--colour-steel);
cursor: pointer;
}
.exc-tab:hover { color: var(--colour-navy); }
.exc-tab--active {
color: var(--colour-navy);
border-bottom-color: var(--colour-gold);
}
/* --- Lifecycle status chips (existing tokens only) ----------------------- */
.badge--exc-pending {
background-color: var(--gold-soft); /* gold = awaiting a decision */
color: var(--colour-navy);
border: 1px solid var(--colour-gold);
}
.badge--exc-approved {
background-color: rgba(45, 106, 79, 0.14); /* green = accepted */
color: var(--risk-low);
border: 1px solid var(--risk-low);
}
.badge--exc-closed {
background-color: var(--tone-hover); /* neutral = resolved / ended */
color: var(--colour-steel);
border: 1px solid var(--tone-border-strong);
}
/* --- Closed rows are de-emphasised (mirror .ctrl-row--retired) ----------- */
.exc-row--closed td { opacity: 0.55; }
/* --- Overdue marker (expiry past, still open — mirror .at-overdue) -------- */
.exc-overdue {
display: inline-block;
margin-left: var(--space-2);
padding: 0 var(--space-2);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--risk-high);
border: 1px solid var(--risk-high);
border-radius: 999px;
}
/* --- Deleted-subject marker (parent policy/control removed) --------------- */
.exc-gone {
display: inline-block;
margin-left: var(--space-2);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--colour-steel);
}
/* --- Subject-type sublabel ----------------------------------------------- */
.exc-subtype {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ============================================================================
34. GLOBAL SEARCH (Module 16 — Session 29)
search.php · search.js
============================================================================ */
/* --- Search card and form ------------------------------------------------- */
.srch-card { padding: var(--space-6); }
.srch-form { display: flex; flex-direction: column; gap: var(--space-3); }
.srch-input-row {
display: flex;
gap: var(--space-3);
align-items: center;
}
/* The search input stretches to fill available width beside the button. */
.srch-input {
flex: 1 1 auto;
padding: var(--space-3) var(--space-4);
font-size: var(--text-base);
font-family: var(--font-body);
color: var(--colour-navy);
background: var(--colour-white);
border: 1px solid var(--tone-border-strong);
border-radius: var(--radius);
outline: none;
transition: border-color 0.15s;
}
.srch-input:focus {
border-color: var(--colour-steel);
box-shadow: 0 0 0 3px rgba(74, 105, 132, 0.18);
}
/* Remove the browser-native clear (×) button on search inputs. */
.srch-input::-webkit-search-cancel-button { display: none; }
.srch-btn { flex-shrink: 0; }
/* Hint line under the input row. */
.srch-hint { margin: 0; font-size: var(--text-sm); }
/* --- Result group cards --------------------------------------------------- */
.srch-group { margin-top: var(--space-5); }
.srch-group-heading {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
/* Count badge in the group heading — reuses existing badge token. */
.srch-count {
font-size: var(--text-xs);
font-weight: 700;
padding: 0 var(--space-2);
background: var(--gold-soft);
border: 1px solid var(--colour-gold);
color: var(--colour-navy);
border-radius: 999px;
}
/* --- Result table --------------------------------------------------------- */
.srch-table {
width: 100%;
border-collapse: collapse;
}
.srch-row {
border-bottom: 1px solid var(--tone-border);
}
.srch-row:last-child { border-bottom: none; }
.srch-result-cell {
padding: var(--space-3) var(--space-2);
vertical-align: middle;
}
/* Navigation link for each result — understated but clearly tappable. */
.srch-result-link {
font-weight: 600;
color: var(--colour-navy);
text-decoration: none;
transition: color 0.15s;
}
.srch-result-link:hover,
.srch-result-link:focus {
color: var(--colour-steel);
text-decoration: underline;
outline: none;
}
.srch-result-link:focus-visible {
outline: 2px solid var(--colour-gold);
outline-offset: 2px;
border-radius: 2px;
}
/* Meta context (status, IRV band, site, etc.) beside the title. */
.srch-meta {
font-size: var(--text-sm);
}
/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 640px) {
.srch-input-row { flex-direction: column; align-items: stretch; }
.srch-btn { width: 100%; }
}
/* ============================================================================
35. PHASE 5 — CSV IMPORT (Module 2 / G9a) + COMBINED EXPORT (Module 9 / G9b)
----------------------------------------------------------------------------
Layout-only. All status colour is carried by reused badge families
(.badge--band-low = create, .badge--band-moderate = update,
.badge--risk-high = error, .badge--neutral = skipped) — no new hues. Reuses
Module 2 primitives (.card, .table, .risk-table-wrap, .field__select,
.risk-message, .mit-subhead, .risk-req, .btn*).
============================================================================ */
/* Header action cluster — Import sits beside New risk. */
.risk-head-actions {
display: flex;
gap: var(--space-2);
align-items: center;
}
/* Import panel intro copy. */
.risk-import .imp-intro {
max-width: 70ch;
font-size: var(--text-sm);
margin-bottom: var(--space-4);
}
/* File-choose / template / filename toolbar. */
.imp-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
/* The file input is hidden; its |