/* RiskOS — the app, rebuilt in the browser.
   Every figure on this site is the real interface redrawn in HTML: the same
   grouped cards, the same glossy severity bars, the same banded matrix. The
   whole mock scales from one unit, `--u`, so a window drawn at Mac size fits
   any column without a single magic number changing. */

.stage {
  container-type: inline-size;
  width: 100%;
}

.app {
  --u: min(1px, calc(100cqi / 980));
  --card-r: calc(var(--u) * 12);
  --win-r: calc(var(--u) * 12);

  position: relative;
  width: 100%;
  border-radius: var(--win-r);
  overflow: hidden;
  background: var(--app-canvas, #f2f2f4);
  color: #1d1d1f;
  font-family: var(--font-sans);
  font-size: calc(var(--u) * 13);
  line-height: 1.35;
  letter-spacing: -0.005em;
  /* The interface reads left to right whatever the page around it is doing;
     a centred layout must not reach in and centre a sidebar label. */
  text-align: left;
  box-shadow:
    0 0 0 calc(var(--u) * 1) rgba(0, 0, 0, 0.1),
    0 calc(var(--u) * 24) calc(var(--u) * 70) calc(var(--u) * -18) rgba(0, 0, 0, 0.34);
  --app-canvas: #f2f2f4;
  --app-card: #ffffff;
  --app-side: #ececed;
  --app-ink: #1d1d1f;
  --app-ink-2: #6b6b70;
  --app-ink-3: #8e8e93;
  --app-line: rgba(0, 0, 0, 0.09);
  --app-field: #e9e9ec;
  --app-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, 0.08),
    0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0, 0, 0, 0.05);
  --app-blue: #0a72f0;

  /* The sidebar material, sampled down the shipping app's own sidebar. */
  --side-glass: linear-gradient(180deg, #e6ebf2 0%, #e1e6ee 8%, #dee4ed 13%,
      #dde2ec 20%, #dde3eb 28%, #dde2ea 42%, #dde2ea 54%, #dfe3ea 62%,
      #e0e4e9 73%, #e2e5e9 84%, #e3e6e9 100%);
  --side-rim: rgba(255, 255, 255, 0.92);
  --side-shadow: rgba(0, 0, 0, 0.13);
  --side-hairline: rgba(0, 0, 0, 0.12);
  --sel-gel: linear-gradient(180deg, #3d91fe 0%, #2b83ff 20%, #1a72ff 39%,
      #0f66ff 58%, #0b5fff 71%, #0a5ffe 100%);
  --sel-glow: rgba(10, 95, 255, 0.4);
}

:root[data-theme="dark"] .app,
.app.dark {
  --app-canvas: #1d1e23;
  --app-card: #26272d;
  --app-side: #202126;
  --app-ink: #f2f2f5;
  --app-ink-2: #a3a3ac;
  --app-ink-3: #78787f;
  --app-line: rgba(255, 255, 255, 0.1);
  --app-field: #191a1e;
  --app-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, 0.09);
  --app-blue: #2f86ff;

  /* No shot of the new sidebar exists in the dark appearance, so this is the
     same construction transposed: the same blue wash and the same gloss down
     the top third, over graphite rather than light grey. */
  --side-glass: linear-gradient(180deg, #34373f 0%, #2f323b 8%, #2c2f38 14%,
      #2a2d36 22%, #292c35 30%, #282b34 42%, #282b34 54%, #272a32 62%,
      #262931 73%, #252830 84%, #25282f 100%);
  --side-rim: rgba(255, 255, 255, 0.1);
  --side-shadow: rgba(0, 0, 0, 0.55);
  --side-hairline: rgba(0, 0, 0, 0.5);
  --sel-gel: linear-gradient(180deg, #4d9bff 0%, #3a8bff 20%, #2a7cff 39%,
      #1d70ff 58%, #1668ff 71%, #1466fe 100%);
  --sel-glow: rgba(22, 104, 255, 0.45);
  color: #f2f2f5;
  box-shadow:
    0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, 0.1),
    0 calc(var(--u) * 24) calc(var(--u) * 70) calc(var(--u) * -18) rgba(0, 0, 0, 0.7);
}

/* Figures that must stay paper — report pages — keep the light palette. */
.app.paper-light { color-scheme: light; }

/* A figure that is a piece of the app rather than a whole window. */
.app.flat { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.stage.card .app { --u: min(1.2px, calc(100cqi / 430)); }

/* --------------------------------------------------------- window chrome -- */

.app-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  height: calc(var(--u) * 38);
  padding-inline: calc(var(--u) * 14);
  background: var(--app-side);
  border-bottom: calc(var(--u) * 1) solid var(--app-line);
}
.lights { display: flex; gap: calc(var(--u) * 8); }
.lights i {
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  border-radius: 50%;
  display: block;
  background: #ddd;
}
.lights i:nth-child(1) { background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.app-title {
  font-size: calc(var(--u) * 12.5);
  font-weight: 620;
  color: var(--app-ink);
}
.app-title span {
  display: block;
  font-size: calc(var(--u) * 10.5);
  font-weight: 400;
  color: var(--app-ink-3);
}

.app-body {
  display: flex;
  min-height: calc(var(--u) * 100);
  background: var(--app-canvas);
}

/* Glyphs inside the window are all one size unless a component says otherwise;
   an unsized SVG would otherwise take its 300x150 default and wreck a row. */
.app svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); flex: none; }

/* -------------------------------------------------------------- sidebar -- */

/* The sidebar is a floating panel inset in the window, drawn the way the app
   draws it: a vibrant material pinned active so it keeps its colour when the
   window is not frontmost, a wash of accent through the middle, a gloss down
   the top third, and a real edge — a lit rim held inside a soft shadow.
   The gradient stops are sampled from the shipping app, not invented. */
.rs-side {
  width: calc(var(--u) * 204);
  flex: none;
  margin: calc(var(--u) * 8) 0 calc(var(--u) * 8) calc(var(--u) * 8);
  border-radius: calc(var(--u) * 13);
  overflow: hidden;
  background: var(--side-glass);
  -webkit-backdrop-filter: saturate(180%) blur(calc(var(--u) * 30));
  backdrop-filter: saturate(180%) blur(calc(var(--u) * 30));
  box-shadow:
    inset 0 0 0 calc(var(--u) * 1) var(--side-rim),
    0 calc(var(--u) * 2) calc(var(--u) * 10) calc(var(--u) * -2) var(--side-shadow),
    0 0 calc(var(--u) * 24) calc(var(--u) * -4) var(--side-shadow);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

/* Traffic lights and the sidebar toggle ride on the panel itself. */
.rs-side-top {
  display: flex;
  align-items: center;
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 12);
  margin-bottom: calc(var(--u) * 34);
  flex: none;
}
.rs-side-top .toggle {
  margin-left: auto;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 4);
  border: calc(var(--u) * 1.4) solid var(--app-ink-3);
  position: relative;
  opacity: 0.75;
}
.rs-side-top .toggle::after {
  content: "";
  position: absolute;
  left: calc(var(--u) * 5.5);
  top: 0;
  bottom: 0;
  border-left: calc(var(--u) * 1.4) solid var(--app-ink-3);
}

/* The list clips; the footer stays put. A short window loses rows off the
   bottom rather than squeezing them, which is what the app does. */
.rs-side-list {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 calc(var(--u) * 8);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

/* The profile switcher, under a dark hairline with a lit one beneath it. */
.rs-side-foot {
  flex: none;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 9);
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 14);
  font-size: calc(var(--u) * 13);
  color: var(--app-ink);
  border-top: calc(var(--u) * 1) solid var(--side-hairline);
  box-shadow: inset 0 calc(var(--u) * 1) 0 var(--side-rim);
}
.rs-side-foot .chev {
  margin-left: auto;
  color: var(--app-ink-3);
  font-size: calc(var(--u) * 11);
  line-height: 1;
}
.rs-group {
  margin: calc(var(--u) * 14) 0 calc(var(--u) * 5) calc(var(--u) * 11);
  font-size: calc(var(--u) * 11);
  font-weight: 620;
  letter-spacing: 0.01em;
  color: var(--app-ink-3);
  flex: none;
}
.rs-item {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 9);
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 9);
  font-size: calc(var(--u) * 13);
  color: var(--app-ink);
  flex: none;
  transition: background 0.18s var(--smooth), color 0.18s var(--smooth);
}

/* Selection is drawn by the app rather than the system, so it keeps its
   vibrancy in the background: an accent gel with a gloss and a soft glow. */
.rs-item.on {
  background: var(--sel-gel);
  color: #fff;
  font-weight: 620;
  box-shadow:
    0 calc(var(--u) * 3) calc(var(--u) * 9) var(--sel-glow),
    inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, 0.26);
}
/* A selected section inverts its tile: white ground, the section's own
   colour as the glyph. */
.rs-item.on .rs-tile { background: #fff; box-shadow: none; }
.rs-item.on .rs-tile svg { color: var(--tile); }
.rs-tile {
  width: calc(var(--u) * 21);
  height: calc(var(--u) * 21);
  flex: none;
  border-radius: calc(var(--u) * 6);
  display: grid;
  place-items: center;
  background: var(--tile, #8e8e93);
  box-shadow: inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, 0.35);
}
.rs-tile svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); color: #fff; }
.rs-tile.blue { --tile: #0a72f0; }
.rs-tile.red { --tile: #f03d34; }
.rs-tile.green { --tile: #2aab55; }
.rs-tile.indigo { --tile: #5a5ce0; }
.rs-tile.mint { --tile: #12b6a0; }
.rs-tile.cyan { --tile: #16a8d8; }
.rs-tile.pink { --tile: #ee417e; }
.rs-tile.teal { --tile: #1a9fb0; }
.rs-tile.purple { --tile: #9440e0; }
.rs-tile.grey { --tile: #7c7c85; }
.rs-tile.brown { --tile: #a1714a; }
.rs-tile.orange { --tile: #ef8020; }
.rs-tile.graphite { --tile: #55565e; }

/* ---------------------------------------------------------------- canvas -- */

.rs-main {
  flex: 1;
  min-width: 0;
  padding: calc(var(--u) * 18) calc(var(--u) * 20);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
  background: var(--app-canvas);
}
.rs-main.tight { padding: calc(var(--u) * 12) calc(var(--u) * 14); gap: calc(var(--u) * 10); }

.rs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 16); }
.rs-h1 {
  font-size: calc(var(--u) * 30);
  font-weight: 640;
  letter-spacing: -0.028em;
  color: var(--app-ink);
}
.rs-sub { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 12); color: var(--app-ink-2); }
.rs-avg { text-align: right; }
.rs-avg b {
  display: block;
  font-size: calc(var(--u) * 34);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--sev-high-vivid);
  font-variant-numeric: tabular-nums;
}
.rs-avg span { font-size: calc(var(--u) * 10.5); color: var(--app-ink-3); }

/* ----------------------------------------------------------------- cards -- */

.rs-card {
  background: var(--app-card);
  border-radius: var(--card-r);
  padding: calc(var(--u) * 14);
  box-shadow: var(--app-shadow);
}
.rs-card-h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 7);
  margin-bottom: calc(var(--u) * 11);
  font-size: calc(var(--u) * 14);
  font-weight: 640;
  letter-spacing: -0.012em;
  color: var(--app-ink);
}
.rs-card-h svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); flex: none; }
.rs-card-h .sp { margin-left: auto; font-size: calc(var(--u) * 11.5); font-weight: 500; color: var(--app-blue); }

.rs-grid { display: grid; gap: calc(var(--u) * 12); }
.rs-grid.two { grid-template-columns: 1fr 1fr; }
.rs-grid.six { grid-template-columns: repeat(6, 1fr); }

/* Band counters. The colour lives in the glyph, never behind the numeral. */
.rs-stat {
  background: var(--app-card);
  border-radius: var(--card-r);
  padding: calc(var(--u) * 11) calc(var(--u) * 12) calc(var(--u) * 12);
  box-shadow: var(--app-shadow);
}
.rs-stat-t {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  font-size: calc(var(--u) * 11.5);
  font-weight: 560;
  color: var(--app-ink-2);
}
.rs-stat-t i {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  display: block;
  background: var(--dot, var(--app-ink-3));
}
.rs-stat b {
  display: block;
  margin-top: calc(var(--u) * 5);
  font-size: calc(var(--u) * 27);
  font-weight: 640;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--app-ink);
}
.rs-stat.q { opacity: 0.55; }
.rs-stat.q b { color: var(--app-ink-3); }

/* ---------------------------------------------------------------- matrix -- */

.rs-mx { display: flex; gap: calc(var(--u) * 8); }
.rs-mx-y {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: center;
  font-size: calc(var(--u) * 10);
  color: var(--app-ink-3);
}
.rs-mx-body { flex: 1; min-width: 0; }
.rs-mx-rows { display: grid; gap: calc(var(--u) * 5); }
.rs-mx-row { display: grid; grid-template-columns: calc(var(--u) * 62) repeat(5, 1fr); gap: calc(var(--u) * 5); align-items: center; }
.rs-mx-lab { font-size: calc(var(--u) * 10.5); color: var(--app-ink-2); text-align: right; }
.rs-mx-x { display: grid; grid-template-columns: calc(var(--u) * 62) repeat(5, 1fr); gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 6); }
.rs-mx-x span { font-size: calc(var(--u) * 10.5); color: var(--app-ink-2); text-align: center; }
.rs-mx-x .cap { grid-column: 2 / -1; margin-top: calc(var(--u) * 5); color: var(--app-ink-3); font-size: calc(var(--u) * 10); }

.mx {
  position: relative;
  aspect-ratio: 1 / 0.74;
  border-radius: calc(var(--u) * 7);
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 13);
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  background: var(--mx-fill);
  color: var(--mx-ink);
  transition: transform 0.2s var(--snappy), filter 0.2s var(--smooth);
}
.mx small { display: block; font-size: calc(var(--u) * 9); font-weight: 500; opacity: 0.85; }
.mx.n { font-weight: 660; }
.mx[data-band="low"] { --mx-fill: var(--sev-low-fill); --mx-ink: var(--sev-low); }
.mx[data-band="medium"] { --mx-fill: var(--sev-medium-fill); --mx-ink: var(--sev-medium); }
.mx[data-band="high"] { --mx-fill: var(--sev-high-fill); --mx-ink: var(--sev-high); }
.mx[data-band="critical"] { --mx-fill: var(--sev-critical-fill); --mx-ink: var(--sev-critical); }

/* The assessment marker — the ring that is also the O of the wordmark. */
.mx-mark {
  position: absolute;
  inset: calc(var(--u) * -2);
  border-radius: calc(var(--u) * 9);
  border: calc(var(--u) * 2.5) solid #fff;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 calc(var(--u) * 10) rgba(240, 130, 0, 0.75);
  pointer-events: none;
}

/* -------------------------------------------------------- severity bars -- */

.bar {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 7);
  font-variant-numeric: tabular-nums;
}
.bar > i {
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: 50%;
  flex: none;
  background: var(--sv);
  box-shadow: 0 0 calc(var(--u) * 5) color-mix(in srgb, var(--sv) 55%, transparent);
}
.bar-track {
  position: relative;
  width: var(--w, calc(var(--u) * 54));
  height: calc(var(--u) * 7);
  border-radius: 999px;
  background: var(--app-field);
  overflow: hidden;
  flex: none;
}
.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--f, 50%);
  border-radius: 999px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--sv) 74%, white 26%), var(--sv));
  box-shadow: 0 0 calc(var(--u) * 6) color-mix(in srgb, var(--sv) 50%, transparent);
  transition: width 0.55s var(--snappy), background 0.4s var(--smooth);
}
.bar-fill::after {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
}
.bar b { font-size: calc(var(--u) * 13); font-weight: 640; color: var(--app-ink); min-width: calc(var(--u) * 16); }
.bar em { font-style: normal; font-size: calc(var(--u) * 11.5); color: var(--app-ink-2); }
.bar[data-band="low"] { --sv: var(--sev-low-vivid); }
.bar[data-band="medium"] { --sv: var(--sev-medium-vivid); }
.bar[data-band="high"] { --sv: var(--sev-high-vivid); }
.bar[data-band="critical"] { --sv: var(--sev-critical-vivid); }

/* The one meter, wearing different tints. */
.meter {
  position: relative;
  width: var(--w, 100%);
  height: calc(var(--u) * 6);
  border-radius: 999px;
  background: var(--app-field);
  overflow: hidden;
}
.meter > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--f, 0%);
  border-radius: 999px;
  background: var(--tint, var(--sev-low-vivid));
  transition: width 0.6s var(--snappy);
}
/* A stepped meter is as wide as its steps; without this it keeps the base
   meter's `width: 100%` and pushes everything else out of the row. */
.meter.steps {
  display: inline-flex;
  width: auto;
  flex: none;
  gap: calc(var(--u) * 3);
  background: none;
  overflow: visible;
}
.meter.steps > i {
  position: static;
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 6);
  border-radius: 999px;
  background: var(--app-field);
}
.meter.steps > i.on { background: var(--tint, var(--sev-low-vivid)); }

/* ----------------------------------------------------------- rows, chips -- */

.rs-row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  padding: calc(var(--u) * 7) calc(var(--u) * 8);
  border-radius: calc(var(--u) * 7);
  font-size: calc(var(--u) * 12.5);
  transition: background 0.16s var(--smooth);
}
.rs-row + .rs-row { margin-top: calc(var(--u) * 1); }
.rs-row.hov { background: var(--app-field); }
.rs-row .ref { font-size: calc(var(--u) * 11); color: var(--app-ink-3); font-variant-numeric: tabular-nums; }
.rs-row .who { font-size: calc(var(--u) * 11); color: var(--app-ink-2); margin-left: auto; white-space: nowrap; }
.rs-row .ttl { color: var(--app-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 3) calc(var(--u) * 8);
  border-radius: 999px;
  font-size: calc(var(--u) * 11);
  font-weight: 560;
  background: var(--app-field);
  color: var(--app-ink-2);
}
.chip.alert { background: var(--sev-critical-fill); color: var(--sev-critical); }
.chip.good { background: var(--sev-low-fill); color: var(--sev-low); }

.line { height: calc(var(--u) * 7); border-radius: 999px; background: var(--app-line); }
.line.sm { height: calc(var(--u) * 5); }

/* --------------------------------------------------------- toolbar bits -- */

.rs-tools {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 8) calc(var(--u) * 12);
  border-bottom: calc(var(--u) * 1) solid var(--app-line);
  background: var(--app-side);
}
.rs-field {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  height: calc(var(--u) * 24);
  padding-inline: calc(var(--u) * 9);
  border-radius: calc(var(--u) * 6);
  background: var(--app-field);
  font-size: calc(var(--u) * 11.5);
  color: var(--app-ink-3);
  min-width: calc(var(--u) * 170);
}
.rs-seg {
  display: inline-flex;
  padding: calc(var(--u) * 2);
  border-radius: calc(var(--u) * 7);
  background: var(--app-field);
  font-size: calc(var(--u) * 11.5);
}
.rs-seg span { padding: calc(var(--u) * 3) calc(var(--u) * 10); border-radius: calc(var(--u) * 5.5); color: var(--app-ink-2); }
.rs-seg span.on { background: var(--app-card); color: var(--app-ink); font-weight: 600; box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 0, 0, 0.12); }

.rs-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  height: calc(var(--u) * 26);
  padding-inline: calc(var(--u) * 12);
  border-radius: 999px;
  font-size: calc(var(--u) * 12);
  font-weight: 600;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--app-blue) 100%, white 14%), var(--app-blue));
  color: #fff;
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(10, 114, 240, 0.34);
}
.rs-btn.sm { height: calc(var(--u) * 23); padding-inline: calc(var(--u) * 9); font-size: calc(var(--u) * 11); }
.rs-btn.quiet { background: var(--app-field); color: var(--app-ink); box-shadow: none; }

/* ------------------------------------------------------------- inspector -- */

.rs-insp {
  width: calc(var(--u) * 300);
  flex: none;
  padding: calc(var(--u) * 14);
  background: var(--app-card);
  border-left: calc(var(--u) * 1) solid var(--app-line);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
}
.rs-sec {
  border-radius: calc(var(--u) * 10);
  background: var(--app-canvas);
  padding: calc(var(--u) * 10) calc(var(--u) * 11);
}
.rs-sec-h {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 7);
  font-size: calc(var(--u) * 12.5);
  font-weight: 620;
  color: var(--app-ink);
}
.rs-sec-h .count { margin-left: auto; display: inline-flex; gap: calc(var(--u) * 5); }
.rs-kv { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 9); }
.rs-kv label { display: block; font-size: calc(var(--u) * 10.5); color: var(--app-ink-3); margin-bottom: calc(var(--u) * 3); }
.rs-kv .v {
  height: calc(var(--u) * 21);
  border-radius: calc(var(--u) * 5);
  background: var(--app-field);
  display: flex;
  align-items: center;
  padding-inline: calc(var(--u) * 8);
  font-size: calc(var(--u) * 11.5);
  color: var(--app-ink);
}
.rs-step { display: flex; gap: calc(var(--u) * 3); }
.rs-step span {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 20);
  border-radius: calc(var(--u) * 5);
  display: grid;
  place-items: center;
  background: var(--app-field);
  font-size: calc(var(--u) * 11.5);
  color: var(--app-ink-2);
}
.rs-step span.on { background: var(--app-ink-3); color: var(--app-card); font-weight: 640; }

/* --------------------------------------------------------- report paper -- */

/* A sheet is drawn at page scale, not window scale: it is a small object in
   its own right, so its unit comes from its own width. */
.stage.sheet .app { --u: min(1.5px, calc(100cqi / 172)); }

.paper {
  position: relative;
  background: #fff;
  color: #1d1d1f;
  border-radius: calc(var(--u) * 5);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(0, 0, 0, 0.26);
  aspect-ratio: 595 / 842;
  padding: calc(var(--u) * 14);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 7);
  overflow: hidden;
}
.paper .ph { height: calc(var(--u) * 6); border-radius: 999px; background: rgba(0, 0, 0, 0.12); }
.paper .ph.t { height: calc(var(--u) * 9); background: rgba(0, 0, 0, 0.42); }
.paper .brandline {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  padding-bottom: calc(var(--u) * 7);
  border-bottom: calc(var(--u) * 1) solid rgba(0, 0, 0, 0.14);
}
.paper .brandline .mk {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 3.5);
  background: var(--grad);
}
.paper .foot { margin-top: auto; padding-top: calc(var(--u) * 7); border-top: calc(var(--u) * 1) solid rgba(0, 0, 0, 0.14); display: flex; justify-content: space-between; }
.paper .foot .ph { width: calc(var(--u) * 60); }

/* ------------------------------------------------------------ animation -- */

/* Figures hold their finished frame until they are on screen, then play.
   Nothing loops off screen, and the last frame always carries the meaning. */
.app [data-anim] { animation-play-state: paused; }
.stage.live .app [data-anim] { animation-play-state: running; }

@keyframes rs-rise {
  from { opacity: 0; transform: translateY(calc(var(--u) * 14)); }
  to { opacity: 1; transform: none; }
}
@keyframes rs-pop {
  0% { opacity: 0; transform: scale(0.82); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes rs-glow {
  0%, 100% { box-shadow: 0 0 calc(var(--u) * 8) rgba(240, 130, 0, 0.55); }
  50% { box-shadow: 0 0 calc(var(--u) * 18) rgba(240, 130, 0, 0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .app [data-anim] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .bar-fill, .meter > i { transition: none !important; }
}

/* ------------------------------------------------- unified window layout -- */

/* macOS puts the traffic lights on the sidebar and the section title beside
   it, so the mock does the same. */

.rs-content { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--app-canvas); }
.rs-topbar {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
  padding: calc(var(--u) * 9) calc(var(--u) * 18) calc(var(--u) * 5);
  font-size: calc(var(--u) * 12.5);
  font-weight: 620;
  color: var(--app-ink);
}
.rs-topbar span { font-size: calc(var(--u) * 10.5); font-weight: 400; color: var(--app-ink-3); }
.rs-topbar .tools { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 7); }
.rs-split { flex: 1; display: flex; min-height: 0; }
.rs-split .rs-main { flex: 1; }

/* The walkthrough swaps the canvas but keeps one window and one sidebar. */
/* One window height for all six beats, so the page does not jump between
   them, and content that would not fit clips the way a real window clips. */
.wt .app-body { height: calc(var(--u) * 836); }
.wt .rs-content, .wt .rs-main, .wt .rs-insp, .wt .rs-split { overflow: hidden; }
.wt-scenes { flex: 1; min-width: 0; display: flex; }
.wt-scenes > .wt-scene { flex: 1; min-width: 0; display: flex; }
.wt-scenes > .wt-scene > * { flex: 1; min-width: 0; }
.wt[data-sel] .rs-item.on {
  background: none;
  color: var(--app-ink);
  font-weight: 400;
  box-shadow: none;
}
.wt[data-sel] .rs-item.on .rs-tile { background: var(--tile); }
.wt[data-sel] .rs-item.on .rs-tile svg { color: #fff; }
.wt[data-sel="dashboard"] .rs-item[data-sec="dashboard"],
.wt[data-sel="risks"] .rs-item[data-sec="risks"],
.wt[data-sel="controls"] .rs-item[data-sec="controls"],
.wt[data-sel="review"] .rs-item[data-sec="review"],
.wt[data-sel="indicators"] .rs-item[data-sec="indicators"],
.wt[data-sel="reports"] .rs-item[data-sec="reports"] {
  background: var(--sel-gel);
  color: #fff;
  font-weight: 620;
  box-shadow:
    0 calc(var(--u) * 3) calc(var(--u) * 9) var(--sel-glow),
    inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, 0.26);
}
.wt[data-sel="dashboard"] .rs-item[data-sec="dashboard"] .rs-tile,
.wt[data-sel="risks"] .rs-item[data-sec="risks"] .rs-tile,
.wt[data-sel="controls"] .rs-item[data-sec="controls"] .rs-tile,
.wt[data-sel="review"] .rs-item[data-sec="review"] .rs-tile,
.wt[data-sel="indicators"] .rs-item[data-sec="indicators"] .rs-tile,
.wt[data-sel="reports"] .rs-item[data-sec="reports"] .rs-tile {
  background: #fff;
  box-shadow: none;
}
.wt[data-sel="dashboard"] .rs-item[data-sec="dashboard"] .rs-tile svg,
.wt[data-sel="risks"] .rs-item[data-sec="risks"] .rs-tile svg,
.wt[data-sel="controls"] .rs-item[data-sec="controls"] .rs-tile svg,
.wt[data-sel="review"] .rs-item[data-sec="review"] .rs-tile svg,
.wt[data-sel="indicators"] .rs-item[data-sec="indicators"] .rs-tile svg,
.wt[data-sel="reports"] .rs-item[data-sec="reports"] .rs-tile svg {
  color: var(--tile);
}

/* Compact sidebar for the narrower figures. */
.rs-side.slim { width: calc(var(--u) * 172); }
.rs-side.icons-only { width: calc(var(--u) * 46); }
.rs-side.icons-only .rs-item { justify-content: center; padding-inline: 0; }
.rs-side.icons-only .rs-item span, .rs-side.icons-only .rs-group { display: none; }

/* The window sheds its panes the way a real one would, narrowest first. */
@container (max-width: 620px) { .rs-insp { display: none; } }
@container (max-width: 420px) { .rs-side { display: none; } }

/* ============================================================== figures ==
   The animated scenes. Each one is a beat from the app's own welcome tour,
   replayed in CSS: the marker touring the matrix, a control coming into
   operation and dragging the residual down, the pages fanning out. Every
   loop stops under Reduce Motion, and the frame that remains is the one
   that carries the meaning. */

.bar-fill, .meter > i { transform-origin: left center; }

/* Things arrive when their figure reaches the stage, on a stagger. */
.stage.live [data-in],
.wt-scene.live [data-in],
.scene.live [data-in] {
  animation: rs-rise 0.55s var(--ease-reveal) both;
  animation-delay: calc(var(--d, 0) * 1ms);
}
.stage.live .bar-fill,
.wt-scene.live .bar-fill,
.scene.live .bar-fill {
  animation: bar-grow 0.9s var(--snappy) both;
  animation-delay: calc(var(--d, 0) * 1ms + 180ms);
}
.stage.live .meter > i,
.wt-scene.live .meter > i,
.scene.live .meter > i {
  animation: bar-grow 0.9s var(--snappy) both;
  animation-delay: calc(var(--d, 0) * 1ms + 220ms);
}
@keyframes bar-grow { from { transform: scaleX(0.02); } to { transform: scaleX(1); } }

.stage.live .mx[data-in],
.wt-scene.live .mx[data-in] { animation: rs-pop 0.44s var(--spring) both; }

/* -- the assessment marker, touring three ratings ------------------------ */

.sv {
  position: relative;
  display: flex;
  gap: calc(var(--u) * 26);
  align-items: center;
}
.sv > .seq { flex: 1; min-width: 0; }
.sv-grid {
  position: relative;
  display: grid;
  gap: calc(var(--u) * 5);
  width: calc(var(--u) * 200);
  flex: none;
}
.sv-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 5); }
.sv-cell { aspect-ratio: 1; border-radius: calc(var(--u) * 7); background: var(--mx-fill); }
.sv-cell[data-band="low"] { --mx-fill: var(--sev-low-fill); }
.sv-cell[data-band="medium"] { --mx-fill: var(--sev-medium-fill); }
.sv-cell[data-band="high"] { --mx-fill: var(--sev-high-fill); }
.sv-cell[data-band="critical"] { --mx-fill: var(--sev-critical-fill); }

/* The ring is positioned in grid cells, so it lands where the cells land. */
.sv-mark {
  position: absolute;
  width: calc((100% - var(--gaps)) / 5);
  aspect-ratio: 1;
  border-radius: calc(var(--u) * 8);
  border: calc(var(--u) * 2.5) solid #fff;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 calc(var(--u) * 1.5) rgba(0, 0, 0, 0.22),
    0 0 calc(var(--u) * 12) rgba(242, 129, 0, 0.75),
    0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, 0.2);
  --gaps: calc(var(--u) * 20);
  --step: calc((100% - var(--gaps)) / 5 + var(--u) * 5);
  left: 0;
  top: 0;
}
.scene.live .sv-mark, .wt-scene.live .sv-mark { animation: sv-tour 8.4s var(--snappy) infinite both; }
@keyframes sv-tour {
  0%, 26% { transform: translate(calc(var(--step) * 1), calc(var(--step) * 3)); }
  33%, 59% { transform: translate(calc(var(--step) * 3), calc(var(--step) * 2)); }
  66%, 96% { transform: translate(calc(var(--step) * 4), 0); }
  100% { transform: translate(calc(var(--step) * 1), calc(var(--step) * 3)); }
}

/* A cross-fading stack: three readings, one after another, looping. */
.seq { display: grid; }
.seq > * { grid-area: 1 / 1; }
.scene.live .seq > :nth-child(1), .wt-scene.live .seq > :nth-child(1) { animation: seq3-1 8.4s linear infinite both; }
.scene.live .seq > :nth-child(2), .wt-scene.live .seq > :nth-child(2) { animation: seq3-2 8.4s linear infinite both; }
.scene.live .seq > :nth-child(3), .wt-scene.live .seq > :nth-child(3) { animation: seq3-3 8.4s linear infinite both; }
.seq > :nth-child(n + 2) { opacity: 0; }
@keyframes seq3-1 { 0%, 28% { opacity: 1; } 32%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes seq3-2 { 0%, 28% { opacity: 0; } 32%, 61% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes seq3-3 { 0%, 61% { opacity: 0; } 65%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* -- a control coming into operation ------------------------------------- */

.treat { display: grid; gap: calc(var(--u) * 13); }
.treat-row { display: grid; grid-template-columns: calc(var(--u) * 62) 1fr; align-items: center; gap: calc(var(--u) * 12); }
.treat-row > span:first-child { font-size: calc(var(--u) * 12); color: var(--app-ink-2); }

.scene.live .treat .t-fill, .wt-scene.live .treat .t-fill {
  animation: t-drop 6.4s var(--smooth) infinite both;
}
@keyframes t-drop {
  0%, 20% { width: 80%; background: linear-gradient(180deg, #ff7a70, #e03528); }
  40%, 92% { width: 24%; background: linear-gradient(180deg, #ffd96b, #e8b101); }
  100% { width: 80%; background: linear-gradient(180deg, #ff7a70, #e03528); }
}
.scene.live .treat .t-ctl, .wt-scene.live .treat .t-ctl {
  animation: t-ctl 6.4s var(--smooth) infinite both;
}
@keyframes t-ctl {
  0%, 12% { width: 2%; }
  30%, 92% { width: 75%; }
  100% { width: 2%; }
}
.t-swap { display: grid; }
.t-swap > * { grid-area: 1 / 1; }
.scene.live .t-swap > :first-child, .wt-scene.live .t-swap > :first-child { animation: t-was 6.4s linear infinite both; }
.scene.live .t-swap > :last-child, .wt-scene.live .t-swap > :last-child { animation: t-now 6.4s linear infinite both; }
.t-swap > :last-child { opacity: 0; }
@keyframes t-was { 0%, 20% { opacity: 1; } 26%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes t-now { 0%, 20% { opacity: 0; } 26%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* -- indicators, breaching --------------------------------------------- */

.kri-row { display: grid; grid-template-columns: 1fr calc(var(--u) * 96) calc(var(--u) * 56); gap: calc(var(--u) * 12); align-items: center; }
.kri-track { position: relative; height: calc(var(--u) * 8); border-radius: 999px; background: var(--app-field); }
.kri-track > i {
  position: absolute;
  top: calc(var(--u) * -3);
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 14);
  border-radius: 999px;
  background: var(--app-ink-3);
  opacity: 0.55;
}
.kri-dot {
  position: absolute;
  top: 50%;
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  margin: calc(var(--u) * -5.5) 0 0 calc(var(--u) * -5.5);
  border-radius: 50%;
  background: var(--sev-critical-vivid);
  box-shadow: 0 0 calc(var(--u) * 8) color-mix(in srgb, var(--sev-critical-vivid) 60%, transparent);
}
.scene.live .kri-dot, .wt-scene.live .kri-dot { animation: kri-move 5.6s var(--snappy) infinite both; }
@keyframes kri-move {
  0%, 10% { left: 22%; background: var(--sev-low-vivid); }
  45%, 60% { left: 58%; background: var(--sev-medium-vivid); }
  85%, 96% { left: 86%; background: var(--sev-critical-vivid); }
  100% { left: 22%; background: var(--sev-low-vivid); }
}

@media (prefers-reduced-motion: reduce) {
  .stage.live [data-in], .wt-scene.live [data-in], .scene.live [data-in],
  .stage.live .bar-fill, .wt-scene.live .bar-fill, .scene.live .bar-fill,
  .stage.live .meter > i, .wt-scene.live .meter > i, .scene.live .meter > i,
  .stage.live .mx[data-in], .wt-scene.live .mx[data-in],
  .scene.live .sv-mark, .wt-scene.live .sv-mark,
  .scene.live .seq > *, .wt-scene.live .seq > *,
  .scene.live .treat .t-fill, .wt-scene.live .treat .t-fill,
  .scene.live .treat .t-ctl, .wt-scene.live .treat .t-ctl,
  .scene.live .t-swap > *, .wt-scene.live .t-swap > *,
  .scene.live .kri-dot, .wt-scene.live .kri-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* The still frame has to hold the whole meaning on its own. */
  .seq > :nth-child(n + 2), .t-swap > :first-child { display: none; }
  .treat .t-fill { width: 24%; background: linear-gradient(180deg, #ffd96b, #e8b101); }
  .treat .t-ctl { width: 75%; }
  .sv-mark { transform: translate(calc(var(--step) * 4), 0) !important; }
  .kri-dot { left: 86%; }
}

/* -- a score history drawing itself ------------------------------------- */

.app svg.spark {
  display: block;
  width: 100%;
  height: calc(var(--u) * 54);
  overflow: visible;
}
.spark path {
  fill: none;
  stroke: var(--sev-low-vivid);
  stroke-width: calc(var(--u) * 2.5);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}
.spark circle { fill: var(--sev-low-vivid); opacity: 0; }
.stage.live .spark path, .scene.live .spark path, .wt-scene.live .spark path {
  animation: spark-draw 1.1s var(--smooth) 0.25s both;
}
.stage.live .spark circle, .scene.live .spark circle, .wt-scene.live .spark circle {
  animation: rs-pop 0.4s var(--spring) 1.25s both;
}
@keyframes spark-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .spark path { stroke-dashoffset: 0; animation: none !important; }
  .spark circle { opacity: 1; animation: none !important; }
}