@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700; src: url(/fonts/instrument-sans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700; src: url(/fonts/instrument-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 400 500; src: url(/fonts/jetbrains-mono-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 400 500; src: url(/fonts/jetbrains-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Tokens */
:root {
  color-scheme: light dark;
  --bg: #F5F6F7;
  --surface: #FFFFFF;
  --surface-2: #F0F1F3;
  --line: #E2E4E8;
  --line-strong: #CDD1D7;
  --text: #14161A;
  --text-2: #454B54;
  --text-3: #646B76;
  --code: #F6F7F9;
  --mark: #FFF1C2;
  --accent: #1F2328;
  --accent-soft: #EEF0F2;
  --on-accent: #FFFFFF;
  --signal: #0527FC;
  --signal-soft: #EBEEFF;
  --on-signal: #FFFFFF;
  --highlight: #D3FA37;
  --on-highlight: #14161A;
  --highlight-soft: #F1FBC6;
  /* Retired: an alias of the signal, so an old rule still draws it (write --signal) */
  --brand-ui: #0527FC;
  --crit: #CF222E;
  --crit-soft: #FFEBE9;
  --major: #BC4C00;
  --major-soft: #FFF1E5;
  --minor: #9A6700;
  --minor-soft: #FFF8C5;
  --refactor: #8250DF;
  --refactor-soft: #FBEFFF;
  --fixed: #13795B;
  --fixed-soft: #E7F5EF;
  --viz-1: #0527FC;
  --viz-2: #3094FF;
  --viz-3: #001C4D;
  --viz-muted: #878E99;
  --ring-selected: 0 0 0 1px #0527FC;
  --scrim: rgba(15, 17, 20, 0.45);
  --link-deco: var(--line-strong);
  --logo-ink: #000000;
  --logo-paper: #FFFFFF;
  --sev-critical: #CF222E;
  --sev-major: #BC4C00;
  --sev-minor: #9A6700;
  --sev-refactor: #8250DF;
  --sev-none: #59636E;
  --on-severity: #FFFFFF;
  --switch-knob: #FFFFFF;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-7: 7px;
  --radius-8: 8px;
  --radius-9: 9px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-pill: 9999px;
  --shadow-pressed-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-pressed: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-knob: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-tooltip: 0 6px 20px rgba(0, 0, 0, 0.12);
  --shadow-drawer: 0 12px 40px rgba(0, 0, 0, 0.25);
  --shadow-showcase: 0 12px 32px rgba(20, 22, 26, 0.06);
  --control-28: 28px;
  --control-30: 30px;
  --control-32: 32px;
  --control-34: 34px;
  --control-36: 36px;
  --control-40: 40px;
  --control-44: 44px;
  --control-48: 48px;
  --sidebar: 232px;
  --content: 1240px;
  --content-narrow: 1040px;
  --bar-max: 16px;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Dark: the system's, unless the browser picked light; or picked dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1114;
    --surface: #16191D;
    --surface-2: #1D2126;
    --line: #282D33;
    --line-strong: #383E46;
    --text: #E9EBEE;
    --text-2: #B4BAC3;
    --text-3: #8D949E;
    --code: #121418;
    --mark: #3A3220;
    --accent: #E9EBEE;
    --accent-soft: #262A30;
    --on-accent: #0F1114;
    --signal: #3094FF;
    --signal-soft: #001C4D;
    --on-signal: #0F1114;
    --highlight: #D3FA37;
    --on-highlight: #14161A;
    --highlight-soft: #2A3311;
    --brand-ui: #3094FF;
    --crit: #F85149;
    --crit-soft: #3A1D1F;
    --major: #F5A35B;
    --major-soft: #3A2A18;
    --minor: #D29922;
    --minor-soft: #3A3218;
    --refactor: #AB7DF8;
    --refactor-soft: #2C2443;
    --fixed: #5CCB9C;
    --fixed-soft: #17312A;
    --viz-1: #3094FF;
    --viz-2: #9EECFF;
    --viz-3: #1A61FE;
    --viz-muted: #737B86;
    --ring-selected: 0 0 0 1px #3094FF;
    --logo-ink: #FFFFFF;
    --logo-paper: #000000;
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0F1114;
    --surface: #16191D;
    --surface-2: #1D2126;
    --line: #282D33;
    --line-strong: #383E46;
    --text: #E9EBEE;
    --text-2: #B4BAC3;
    --text-3: #8D949E;
    --code: #121418;
    --mark: #3A3220;
    --accent: #E9EBEE;
    --accent-soft: #262A30;
    --on-accent: #0F1114;
    --signal: #3094FF;
    --signal-soft: #001C4D;
    --on-signal: #0F1114;
    --highlight: #D3FA37;
    --on-highlight: #14161A;
    --highlight-soft: #2A3311;
    --brand-ui: #3094FF;
    --crit: #F85149;
    --crit-soft: #3A1D1F;
    --major: #F5A35B;
    --major-soft: #3A2A18;
    --minor: #D29922;
    --minor-soft: #3A3218;
    --refactor: #AB7DF8;
    --refactor-soft: #2C2443;
    --fixed: #5CCB9C;
    --fixed-soft: #17312A;
    --viz-1: #3094FF;
    --viz-2: #9EECFF;
    --viz-3: #1A61FE;
    --viz-muted: #737B86;
    --ring-selected: 0 0 0 1px #3094FF;
    --logo-ink: #FFFFFF;
    --logo-paper: #000000;
}
:root[data-theme="light"] { color-scheme: light; }

/* Components */
/* The app's ground: wrap a page (or a preview) in .rr-app */
.rr-app { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.rr-app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rr-mono { font-family: var(--font-mono); }
.rr-num { font-variant-numeric: tabular-nums; }
.rr-icon { flex: none; display: inline-block; vertical-align: middle; }

/* Logo */
.rr-logo { display: inline-flex; align-items: center; gap: var(--space-10); color: var(--text); text-decoration: none; }
.rr-logo-sm { gap: var(--space-8); }
.rr-logo-name { font-weight: 600; letter-spacing: -0.01em; }
/* The black and white logo (decided by the maintainer on 30 Oct 2026, D1): an
   ink tile with paper diamonds, white on black in dark, whatever its classes */
.rr-logo-tile { fill: var(--logo-ink); }
.rr-logo-diamonds { fill: var(--logo-paper); }

/* Avatar */
.rr-avatar { flex: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--text-2); }
.rr-avatar-square { border-radius: var(--radius-8); font-size: 13px; }

/* Button */
.rr-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); height: var(--control-36); padding: 0 var(--space-14); border-radius: var(--radius-8); border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; }
.rr-btn-primary { border: 0; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.rr-btn-secondary { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
.rr-btn-ghost { border: 0; background: transparent; color: var(--text-2); padding: 0 var(--space-12); }
.rr-btn-inverse { border: 0; background: var(--text); color: var(--surface); font-weight: 600; padding: 0 var(--space-16); }
.rr-btn-30 { height: var(--control-30); padding: 0 var(--space-12); font-size: 13px; }
.rr-btn-32 { height: var(--control-32); padding: 0 var(--space-12); font-size: 13px; }
.rr-btn-34 { height: var(--control-34); font-size: 13px; }
.rr-btn-34.rr-btn-ghost { padding: 0 var(--space-12); gap: var(--space-6); }
.rr-btn-40 { height: var(--control-40); gap: var(--space-6); }
.rr-btn-40.rr-btn-primary { padding: 0 var(--space-18); gap: var(--space-8); }
.rr-btn-48 { height: var(--control-48); gap: var(--space-10); border-radius: var(--radius-10); font-size: 15px; }
.rr-btn-block { display: flex; width: 100%; }
.rr-btn-icon { padding: 0; width: var(--control-44); height: var(--control-44); }
.rr-btn:disabled, .rr-btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }

/* Links */
.rr-link { color: var(--accent); font-weight: 500; text-decoration: underline; text-decoration-color: var(--link-deco); text-underline-offset: 3px; }
.rr-link-plain { color: var(--accent); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-4); }
.rr-link-out { display: inline-flex; align-items: center; gap: var(--space-4); }
.rr-link-text { color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* Severity label: the reviewer's own word, white on GitHub's colour */
.rr-sev { display: inline-flex; align-items: center; gap: var(--space-6); height: 22px; padding: 0 var(--space-8); border-radius: var(--radius-6); color: var(--on-severity); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.rr-sev-inline { padding: 0 7px; margin-right: var(--space-6); vertical-align: 1px; }
.rr-sev-critical { background: var(--sev-critical); }
.rr-sev-major { background: var(--sev-major); }
.rr-sev-minor { background: var(--sev-minor); }
.rr-sev-refactor { background: var(--sev-refactor); }
.rr-sev-none { background: var(--sev-none); }

/* Status pill */
.rr-pill { flex: none; display: inline-flex; align-items: center; gap: var(--space-6); height: 24px; padding: 0 var(--space-10); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; }
.rr-pill-22 { height: 22px; padding: 0 9px; }
.rr-pill-muted { color: var(--text-2); }
.rr-pill-fixed { background: var(--fixed-soft); color: var(--fixed); }
.rr-pill-major { background: var(--major-soft); color: var(--major); }
.rr-pill-refactor { background: var(--refactor-soft); color: var(--refactor); }
.rr-dot { flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.rr-pill .rr-mono { font-size: 12px; font-weight: 500; }

/* Finding status, inline in a table cell */
.rr-fstatus { display: inline-flex; align-items: center; gap: var(--space-6); color: var(--text); font-size: 13px; }
a.rr-fstatus { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.rr-fstatus-sha { display: block; margin: 3px 0 0 18px; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }

/* Tags and chips */
.rr-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; box-sizing: border-box; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: 11px; font-weight: 500; line-height: 1; color: var(--text-2); white-space: nowrap; }
.rr-tag-18 { height: 18px; padding: 0 var(--space-6); }
.rr-tag-soft { border: 0; padding: 0 var(--space-8); background: var(--surface-2); font-weight: 600; }
.rr-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--radius-6); background: var(--surface-2); font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.rr-chip-role { box-sizing: border-box; gap: var(--space-8); height: var(--control-30); padding: 0 var(--space-12); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface); font-size: 13px; font-weight: 400; }
.rr-chip-role b { font-weight: 600; color: var(--text); }
.rr-fchip { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-6); height: var(--control-30); padding: 0 var(--space-12); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.rr-fchip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.rr-fchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.rr-fchip-n { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.rr-fchips-label { margin-right: var(--space-2); font-size: 12px; font-weight: 500; color: var(--text-3); }

/* Code */
.rr-code { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--space-8); box-sizing: border-box; border-radius: var(--radius-6); background: var(--code); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.rr-code-24 { height: 24px; }
.rr-code-inline { height: auto; padding: 1px var(--space-6); white-space: nowrap; }
.rr-code-file { height: auto; gap: var(--space-6); max-width: 100%; padding: 3px var(--space-8); color: var(--text); text-decoration: none; align-self: flex-start; }
.rr-code-file code { font-family: inherit; overflow-wrap: anywhere; }
.rr-codeblock { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-10); overflow: hidden; }
.rr-codeblock-head { padding: var(--space-8) var(--space-12); background: var(--surface-2); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.rr-codeblock pre { margin: 0; padding: var(--space-8) 0; background: var(--code); font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--text-2); overflow-x: auto; }
.rr-codeblock-line { display: block; padding: 0 var(--space-12); }
.rr-codeblock-line.is-marked { background: var(--mark); color: var(--text); }
.rr-codeblock-no { display: inline-block; width: 28px; color: var(--text-3); }

/* Fields */
.rr-field { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-8); height: var(--control-36); padding: 0 var(--space-12); border: 1px solid var(--line-strong); border-radius: var(--radius-8); background: var(--surface); font-size: 13px; color: var(--text-3); }
.rr-field-select { padding-right: 0; }
.rr-field select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; font: inherit; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; }
/* The select reaches the field's right edge and runs under the chevron, so a
   click on the chevron opens it; the chevron is centred and lets clicks through. */
.rr-field-select select { flex: 1 1 auto; align-self: stretch; min-width: 0; padding-right: 30px; }
.rr-field-chevron { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; color: var(--text-2); }
.rr-field input { border: 0; background: transparent; padding: 0; font: inherit; font-size: 14px; color: var(--text); outline-offset: 4px; }
.rr-field-search { flex: 1 1 260px; }
.rr-field-search input { flex: 1 1 auto; min-width: 0; }
.rr-field-search .rr-icon { color: var(--text-3); }
.rr-field-prefix { color: var(--text-3); }
.rr-field-money { padding: 0 var(--space-10); gap: var(--space-4); }
.rr-field-money input { width: 44px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rr-textarea { display: flex; flex-direction: column; gap: var(--space-6); font-size: 13px; font-weight: 500; color: var(--text-2); }
.rr-textarea textarea { resize: vertical; padding: var(--space-10) var(--space-12); border-radius: var(--radius-8); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 400; line-height: 1.5; }
.rr-textarea textarea.rr-mono { font-family: var(--font-mono); font-size: 13px; }
.rr-textarea-hint { font-size: 12px; font-weight: 400; color: var(--text-3); }
.rr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin: 0; }

/* Segmented control */
.rr-seg { display: inline-flex; flex-wrap: wrap; padding: var(--space-2); border-radius: var(--radius-8); background: var(--surface-2); border: 1px solid var(--line); }
.rr-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6); height: var(--control-28); padding: 0 var(--space-12); border: 0; border-radius: var(--radius-6); background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.rr-seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-pressed-sm); }
.rr-seg-30 { border-radius: var(--radius-9); }
.rr-seg-30 .rr-seg-btn { height: var(--control-30); border-radius: var(--radius-7); }
.rr-seg-32 { padding: 3px; border-radius: var(--radius-10); }
.rr-seg-32 .rr-seg-btn { height: var(--control-32); padding: 0 var(--space-14); border-radius: var(--radius-7); }
.rr-seg-36 { padding: 3px; border-radius: var(--radius-10); }
.rr-seg-36 .rr-seg-btn { height: var(--control-36); gap: var(--space-8); border-radius: var(--radius-8); font-size: 14px; }
.rr-seg-32 .rr-seg-btn[aria-pressed="true"], .rr-seg-36 .rr-seg-btn[aria-pressed="true"] { font-weight: 600; box-shadow: var(--shadow-pressed); }
.rr-seg-fill { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
.rr-seg-count { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 500; }
.rr-seg-note { font-size: 11px; font-weight: 600; color: var(--text-3); }

/* Tabs */
.rr-tabs { display: flex; flex-wrap: wrap; gap: var(--space-4); border-bottom: 1px solid var(--line); }
.rr-tab { display: inline-flex; align-items: center; gap: var(--space-8); height: var(--control-40); padding: 0 var(--space-12); margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.rr-tab[aria-pressed="true"] { border-bottom-color: var(--accent); font-weight: 600; color: var(--text); }
.rr-tab-count { min-width: 20px; height: 20px; padding: 0 var(--space-6); box-sizing: border-box; border-radius: var(--radius-10); background: var(--surface-2); font-size: 12px; font-weight: 500; line-height: 20px; text-align: center; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Switch */
.rr-switch-wrap { display: inline-flex; align-items: center; gap: var(--space-10); }
.rr-switch { flex: none; position: relative; width: 44px; height: 26px; padding: 0; border: 0; border-radius: 13px; background: var(--line-strong); cursor: pointer; }
.rr-switch[aria-pressed="true"] { background: var(--accent); }
.rr-switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--switch-knob); box-shadow: var(--shadow-knob); }
.rr-switch[aria-pressed="true"] .rr-switch-knob { left: 21px; }
.rr-switch-sm { width: 36px; height: 22px; border-radius: 11px; }
.rr-switch-sm .rr-switch-knob { width: 16px; height: 16px; }
.rr-switch-sm[aria-pressed="true"] .rr-switch-knob { left: 17px; }
.rr-switch-label { font-size: 14px; color: var(--text-2); }
.rr-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-14) var(--space-16); border-radius: var(--radius-10); border: 1px solid var(--line); }
.rr-setting-text { display: flex; flex-direction: column; gap: var(--space-2); }
.rr-setting-title { font-size: 15px; font-weight: 600; }
.rr-setting-note { font-size: 13px; line-height: 1.45; color: var(--text-2); }

/* Option card: a choice drawn as a card */
.rr-option { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); padding: var(--space-14) var(--space-14) var(--space-16); border-radius: var(--radius-10); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rr-option[aria-pressed="true"] { border-color: var(--signal); box-shadow: var(--ring-selected); background: var(--signal-soft); }
.rr-option:disabled { background: var(--surface-2); border-color: var(--line); opacity: 0.6; cursor: not-allowed; }
.rr-option-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); width: 100%; }
.rr-option-title { font-size: 14px; font-weight: 600; }
.rr-option-note { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.rr-option-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-12); align-items: start; padding: var(--space-12) var(--space-14); }
.rr-option-row .rr-radio { margin-top: 2px; }
.rr-option-row .rr-option-text { display: flex; flex-direction: column; gap: var(--space-2); }
.rr-option-compact { flex-direction: row; align-items: center; justify-content: center; height: var(--control-36); min-width: 72px; padding: 0 var(--space-14); border-radius: var(--radius-8); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rr-radio { flex: none; width: 16px; height: 16px; box-sizing: border-box; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--surface); }
[aria-pressed="true"] > .rr-radio, [aria-pressed="true"] .rr-option-head .rr-radio { border: 5px solid var(--accent); }
.rr-options-stack { display: flex; flex-direction: column; gap: var(--space-8); }

/* Steps */
.rr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--space-8); }
.rr-step { display: flex; flex-direction: column; gap: var(--space-8); }
.rr-step-bar { height: 4px; border-radius: var(--radius-2); background: var(--signal); }
.rr-step-label { display: inline-flex; align-items: center; gap: var(--space-6); font-size: 13px; font-weight: 500; color: var(--text-2); }
.rr-step[aria-current="step"] .rr-step-label { font-weight: 600; color: var(--text); }
.rr-step-ring { flex: none; width: 14px; height: 14px; box-sizing: border-box; border-radius: var(--radius-pill); border: 2px solid var(--signal); display: inline-flex; align-items: center; justify-content: center; }
.rr-step-ring::after { content: ""; width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--signal); }
.rr-step-upcoming .rr-step-bar { background: var(--line); }
.rr-step-upcoming .rr-step-label { color: var(--text-3); }
.rr-step-upcoming .rr-step-ring { border: 1.5px solid var(--line-strong); }
.rr-step-upcoming .rr-step-ring::after { display: none; }

/* Panels, tiles, cards */
.rr-panel { display: flex; flex-direction: column; gap: var(--space-14); padding: var(--space-20) var(--space-22); border: 1px solid var(--line); border-radius: var(--radius-12); background: var(--surface); }
.rr-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.rr-panel-head.has-desc { align-items: flex-start; gap: var(--space-16); }
.rr-panel-titles { display: flex; flex-direction: column; gap: var(--space-4); }
.rr-panel-title { margin: 0; font-size: 15px; font-weight: 600; }
.rr-panel-desc { margin: 0; font-size: 13px; color: var(--text-2); }
.rr-panel-meta { font-size: 13px; color: var(--text-3); }
.rr-panel-link { font-size: 13px; }
.rr-tile { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-16) var(--space-18); border: 1px solid var(--line); border-radius: var(--radius-12); background: var(--surface); }
.rr-tile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.rr-tile-label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.rr-tile-info { display: inline-flex; color: var(--text-3); }
.rr-tile-value { display: flex; align-items: baseline; gap: var(--space-8); }
.rr-tile-number { font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.rr-tile-unit { font-size: 14px; color: var(--text-2); }
.rr-tile-detail { font-size: 13px; color: var(--text-3); }
.rr-tile .rr-meter { margin-top: var(--space-4); }
.rr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-12); }
/* A tile told in one of several ways (ui.ts, waysTile): its radios beside
   the figure, and the way whose radio is picked shown; the one the page
   picked where :has() is not read. A way's figure and line are the grid's
   own items, so the line takes the tile's width under both. */
.rr-tile-ways { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-12); row-gap: var(--space-6); align-items: center; }
.rr-tile-ways > .rr-tile-head { grid-column: 1 / -1; }
.rr-tile-ways > .rr-seg { grid-column: 2; grid-row: 2; }
.rr-seg-sm .rr-seg-btn { height: 24px; padding: 0 var(--space-10); font-size: 12px; }
.rr-tile-way { display: none; }
.rr-tile-way.is-picked { display: contents; }
.rr-tile-way > .rr-tile-value { grid-column: 1; grid-row: 2; }
.rr-tile-way > .rr-tile-detail { grid-column: 1 / -1; grid-row: 3; }
.rr-tile-ways:has(input:checked) .rr-tile-way { display: none; }
.rr-tile-ways:has(.rr-seg-btn:nth-child(1) input:checked) .rr-tile-way:nth-child(3),
.rr-tile-ways:has(.rr-seg-btn:nth-child(2) input:checked) .rr-tile-way:nth-child(4),
.rr-tile-ways:has(.rr-seg-btn:nth-child(3) input:checked) .rr-tile-way:nth-child(5) { display: contents; }
.rr-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: 48px var(--space-24); border: 1px dashed var(--line-strong); border-radius: var(--radius-12); text-align: center; }
.rr-empty-title { font-size: 15px; font-weight: 600; }
.rr-empty-body { font-size: 14px; color: var(--text-2); }

/* Meter */
.rr-meter { display: block; height: 6px; border-radius: var(--radius-3); background: var(--surface-2); overflow: hidden; }
.rr-meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.rr-meter-8 { height: 8px; border-radius: var(--radius-4); }
.rr-meter-flat { border-radius: 0 var(--radius-4) var(--radius-4) 0; overflow: visible; }

/* Charts */
.rr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); font-size: 13px; color: var(--text-2); }
.rr-legend-item { display: inline-flex; align-items: center; gap: var(--space-6); }
.rr-legend-swatch { width: 10px; height: 10px; border-radius: var(--radius-3); }
.rr-chart { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-8); }
.rr-chart-plot { position: relative; margin-left: 28px; }
.rr-chart-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.rr-chart-grid.is-base { border-top-color: var(--line-strong); }
.rr-chart-ytick { position: absolute; left: -28px; top: -9px; width: 20px; text-align: right; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rr-chart-bars { position: absolute; inset: 0; display: flex; align-items: stretch; gap: var(--space-2); }
.rr-chart-day { position: relative; flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--space-2); border-radius: var(--radius-4); }
.rr-chart-day.is-hover { background: var(--surface-2); }
.rr-chart-bar { width: 100%; max-width: var(--bar-max); }
.rr-chart-bar.is-top { border-radius: var(--radius-4) var(--radius-4) 0 0; }
.rr-chart-xticks { display: flex; gap: var(--space-2); margin-left: 28px; height: 16px; }
.rr-chart-xtick { position: relative; flex: 1 1 0; }
.rr-chart-xtick span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: var(--text-3); }
.rr-tip { position: absolute; z-index: 2; min-width: 168px; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-10) var(--space-12); border-radius: var(--radius-10); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-tooltip); font-size: 13px; color: var(--text); white-space: nowrap; text-align: left; }
.rr-tip-row { display: flex; justify-content: space-between; gap: var(--space-16); }
.rr-tip-key { display: inline-flex; align-items: center; gap: var(--space-6); color: var(--text-2); }
.rr-tip-swatch { width: 8px; height: 8px; border-radius: var(--radius-2); }
.rr-tip-total { padding-top: var(--space-6); border-top: 1px solid var(--line); }

/* Tables */
.rr-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-12); background: var(--surface); overflow-x: auto; }
.rr-table-wrap.has-toolbar { overflow: hidden; }
.rr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rr-table thead tr { background: var(--surface-2); }
.rr-table th { padding: 9px var(--space-16); font-size: 12px; font-weight: 500; color: var(--text-3); text-align: left; border-bottom: 1px solid var(--line); }
.rr-table td { padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--line); vertical-align: top; }
.rr-table .is-right { text-align: right; font-variant-numeric: tabular-nums; }
.rr-table-compact { max-height: 236px; overflow: auto; border-radius: var(--radius-8); }
.rr-table-compact .rr-table { font-size: 13px; }
.rr-table-compact th { position: sticky; top: 0; padding: var(--space-8) var(--space-12); font-size: 13px; background: var(--surface-2); }
.rr-table-compact td { padding: 7px var(--space-12); }
.rr-table-bar { padding-top: 0; }
.rr-table-title { display: block; color: var(--text); font-weight: 500; text-decoration: none; line-height: 1.4; }
.rr-table-sub { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.rr-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--line); }
.rr-table-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-12); padding: var(--space-12) var(--space-16); font-size: 13px; color: var(--text-3); }

/* Pagination */
.rr-pages { display: flex; align-items: center; gap: var(--space-12); font-size: 13px; color: var(--text-3); }
.rr-pages-btns { display: inline-flex; gap: var(--space-4); }
.rr-page-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-8); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); cursor: pointer; padding: 0; }
.rr-page-btn:disabled, .rr-page-btn[aria-disabled="true"] { border-color: var(--line); color: var(--line-strong); cursor: default; }
a.rr-page-btn { text-decoration: none; }
.rr-scroll-x { overflow-x: auto; }
.rr-page-next { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-6); height: var(--control-32); padding: 0 var(--space-12); border-radius: var(--radius-8); border: 1px solid var(--line-strong); color: var(--text); font-weight: 500; text-decoration: none; }

/* Definitions */
.rr-defs { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-8); }
.rr-defs-title { margin: 0; font-size: 15px; font-weight: 600; }
.rr-defs dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-14) var(--space-32); font-size: 13px; line-height: 1.55; }
.rr-defs dt { font-weight: 600; color: var(--text); }
.rr-defs dd { margin: var(--space-2) 0 0; color: var(--text-2); }

/* Banner: an account notice above the page */
.rr-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-20); padding: var(--space-10) clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--text); }
.rr-banner-warning { background: var(--major-soft); }
.rr-banner-danger { background: var(--crit-soft); }
.rr-banner-msg { flex: 1 1 360px; display: flex; align-items: flex-start; gap: var(--space-10); }
.rr-banner-msg .rr-icon { margin-top: 1px; }
.rr-banner-warning .rr-banner-msg .rr-icon { color: var(--major); }
.rr-banner-danger .rr-banner-msg .rr-icon { color: var(--crit); }
.rr-banner strong { font-weight: 600; }
.rr-banner-actions { flex: none; display: flex; align-items: center; gap: var(--space-14); }
.rr-banner-actions .rr-link-text { font-weight: 600; text-decoration-color: currentColor; }
.rr-banner-note { flex: none; color: var(--text-2); }

/* Sidebar */
.rr-sidebar { display: flex; flex-direction: column; gap: var(--space-18); padding: var(--space-18) var(--space-12) var(--space-24); box-sizing: border-box; background: var(--surface); color: var(--text); font-size: 14px; line-height: 1.5; }
.rr-sidebar .rr-logo { padding: var(--space-4) var(--space-8); }
.rr-switcher { display: flex; align-items: center; gap: var(--space-10); padding: var(--space-8) var(--space-10); border: 1px solid var(--line); border-radius: var(--radius-10); background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; list-style: none; }
.rr-switcher::-webkit-details-marker { display: none; }
.rr-switcher:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rr-switcher-menu { position: relative; }
.rr-switcher-menu[open] > .rr-switcher { background: var(--surface-2); }
.rr-switcher-list { position: absolute; top: calc(100% + var(--space-4)); left: 0; right: 0; z-index: 30; display: flex; flex-direction: column; gap: var(--space-2); max-height: 60vh; overflow-y: auto; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-10); background: var(--surface); box-shadow: var(--shadow-tooltip); }
.rr-switcher-item { display: flex; align-items: center; gap: var(--space-10); padding: var(--space-6) var(--space-8); border-radius: var(--radius-8); color: var(--text); text-decoration: none; }
.rr-switcher-item:hover, .rr-switcher-item:focus-visible { background: var(--surface-2); }
.rr-switcher-item .rr-icon { margin-left: auto; color: var(--signal); }
.rr-switcher-all { margin-top: var(--space-2); padding-top: var(--space-8); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-8) var(--radius-8); font-size: 13px; color: var(--text-2); }
.rr-switcher-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.rr-switcher-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-switcher-detail { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-switcher .rr-icon { color: var(--text-3); }
.rr-nav { display: flex; flex-direction: column; gap: var(--space-2); }
.rr-nav-item { display: flex; align-items: center; gap: var(--space-10); height: var(--control-36); padding: 0 var(--space-10); border-radius: var(--radius-8); text-decoration: none; font-size: 14px; font-weight: 500; color: var(--text-2); }
.rr-nav-item .rr-icon { color: var(--text-3); }
.rr-nav-item[aria-current="page"] { font-weight: 600; color: var(--text); background: var(--surface-2); }
.rr-nav-item[aria-current="page"] .rr-icon { color: var(--signal); }
.rr-nav-rule { height: 1px; background: var(--line); margin: 0 var(--space-10); }
.rr-nav-minor { height: var(--control-34); font-size: 13px; }
/* Refer and earn, the Sidebar's promo (decided by the maintainer on 30 Oct
   2026, D6): below the pages, the app's one use of the highlight, its icon
   on a Lime 2 tile and the row on highlight-soft */
.rr-nav-promo { gap: var(--space-10); background: var(--highlight-soft); color: var(--text); font-weight: 500; }
.rr-nav-promo:hover { background: var(--surface-2); }
.rr-nav-promo-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-6); background: var(--highlight); }
.rr-nav-item.rr-nav-promo .rr-nav-promo-tile .rr-icon { color: var(--on-highlight); }
.rr-nav-promo-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-nav-promo[aria-current="page"] { background: var(--surface-2); font-weight: 600; }
.rr-nav-promo[aria-current="page"] .rr-nav-promo-tile .rr-icon { color: var(--on-highlight); }
.rr-sync { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: var(--space-12) var(--space-10) 0; font-size: 12px; color: var(--text-3); }
.rr-sync button { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 500; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* App header */
.rr-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; padding: var(--space-12) clamp(16px, 4vw, 40px); min-height: 60px; box-sizing: border-box; border-bottom: 1px solid var(--line); background: var(--surface); }
.rr-crumbs { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; font-size: 13px; color: var(--text-3); }
.rr-crumbs a { color: var(--text-3); text-decoration: none; }
.rr-crumbs [aria-current="page"] { color: var(--text); font-weight: 500; }
.rr-header-user { display: flex; align-items: center; gap: var(--space-12); }
.rr-header-name { font-size: 14px; font-weight: 500; }
.rr-header-mobile { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.rr-header-mobile-left { display: flex; align-items: center; gap: var(--space-4); }
.rr-header-mobile .rr-btn-icon { margin-left: -10px; color: var(--text); }
.rr-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }
.rr-page-titles { display: flex; flex-direction: column; gap: var(--space-6); }
.rr-page-title { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.rr-page-desc { margin: 0; max-width: 680px; font-size: 14px; color: var(--text-2); }

/* Finding card */
.rr-finding { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-18) var(--space-20); border: 1px solid var(--line); border-radius: var(--radius-12); background: var(--surface); }
.rr-finding-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; }
.rr-finding-lead { display: flex; align-items: flex-start; gap: var(--space-10); min-width: 0; flex: 1 1 360px; }
.rr-finding-lead .rr-sev { flex: none; margin-top: 1px; }
.rr-finding-title { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; text-wrap: pretty; }
.rr-finding-meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); font-size: 13px; color: var(--text-3); }
.rr-finding-meta code { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.rr-finding details { border-top: 1px solid var(--line); padding-top: var(--space-10); }
.rr-finding summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-2); }
.rr-finding-body { margin: var(--space-8) 0 0; max-width: 720px; font-size: 14px; line-height: 1.6; color: var(--text); text-wrap: pretty; }

/* Learning card */
.rr-learning { display: flex; flex-direction: column; gap: var(--space-14); padding: var(--space-20) var(--space-22); border: 1px solid var(--line); border-radius: var(--radius-12); background: var(--surface); }
.rr-learning-meta { display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap; font-size: 13px; color: var(--text-3); }
.rr-learning-text { margin: 0; max-width: 760px; font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--text); text-wrap: pretty; }
.rr-learning-paths { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.rr-quote { margin: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-10); padding: var(--space-12) var(--space-14); border-radius: var(--radius-10); background: var(--surface-2); }
.rr-quote .rr-icon { margin-top: 2px; color: var(--text-3); }
.rr-quote blockquote { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.rr-learning-source { margin: 0; font-size: 14px; color: var(--text-2); }
.rr-learning-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-20); flex-wrap: wrap; padding-top: var(--space-14); border-top: 1px solid var(--line); }
.rr-learning-history { display: flex; flex-direction: column; gap: var(--space-2); font-size: 13px; color: var(--text-3); }
.rr-learning-history span { display: inline-flex; align-items: center; gap: var(--space-6); }
.rr-learning-actions { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }

/* Push timeline */
.rr-pushes { list-style: none; margin: 0; padding: var(--space-18) var(--space-20); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-12); background: var(--surface); }
.rr-push { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--space-12); }
.rr-push-track { display: flex; flex-direction: column; align-items: center; }
.rr-push-node { margin-top: 5px; width: 10px; height: 10px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--surface); border: 2px solid var(--fixed); }
.rr-push.is-skipped .rr-push-node { border-color: var(--line-strong); }
.rr-push-rail { flex: 1 1 auto; width: 2px; margin: var(--space-4) 0; background: var(--line); }
.rr-push:last-child .rr-push-rail { background: transparent; }
.rr-push-body { display: flex; flex-direction: column; gap: 3px; padding-bottom: var(--space-18); }
.rr-push-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); }
.rr-push-sha { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--accent); text-decoration: none; }
.rr-push-at { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rr-push-outcome { display: inline-flex; align-items: center; gap: var(--space-6); font-size: 13px; color: var(--text); }
.rr-push-detail { font-size: 12px; color: var(--text-3); }
.rr-push-action { align-self: flex-start; margin-top: var(--space-2); font-size: 12px; font-weight: 600; }
.rr-push-files { margin-top: var(--space-4); font-size: 12px; color: var(--text-3); }
.rr-push-files summary { cursor: pointer; color: var(--text-2); }
.rr-push-files ul { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.rr-push-files li { display: flex; flex-direction: column; gap: var(--space-2); }
.rr-push-files code { color: var(--text-2); }
.rr-push-files li.is-left-out code, .rr-push-files li.is-partly code { color: var(--text); }

/* Bot comment, as the reviewer posts it on GitHub */
.rr-comment { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-14); }
.rr-comment-author { display: flex; align-items: center; gap: var(--space-8); font-size: 13px; font-weight: 600; }
.rr-comment p { margin: 0; font-size: 14px; line-height: 1.6; }
.rr-comment p + p { line-height: 1.55; color: var(--text-2); }
.rr-comment summary { cursor: pointer; font-size: 14px; font-weight: 500; }
.rr-comment details p { margin: var(--space-8) 0 0; font-size: 13px; color: var(--text-3); }

/* The app: the page, its shell, and the states a page without script shows */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent); text-decoration-color: var(--link-deco); text-underline-offset: 3px; }
code { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; color: inherit; }
.rr-muted { color: var(--text-3); }
.rr-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-3); max-width: 760px; }
/* Accepting the terms at sign-in: a box before its sentence */
.rr-accept { display: flex; gap: var(--space-8); align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.rr-accept input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.rr-gap { display: flex; flex-direction: column; gap: var(--space-12); }

/* States the components take from the server: the current link, a checked radio or checkbox */
a.rr-tab, a.rr-seg-btn, a.rr-fchip, a.rr-pill, a.rr-btn { text-decoration: none; }
.rr-beta-ways { display: flex; flex-direction: column; gap: var(--space-24); }
.rr-beta-tabs .rr-tab { flex: 1 1 0; justify-content: center; }
/* Every tab's panel is as tall as the tallest, the waitlist with its Turnstile
   widget (457px in a 400px box), so the centred box, and the tabs in it, stay
   where they are as the tabs change (asked for by the maintainer on 2026-11-06). */
.rr-beta-ways > section { min-height: 458px; }
/* Turnstile's widget is 65px high: the space is kept before it loads. */
.cf-turnstile { min-height: 65px; }
.rr-tab[aria-current] { border-bottom-color: var(--accent); font-weight: 600; color: var(--text); }
.rr-seg-btn[aria-current], .rr-seg-btn:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow-pressed-sm); }
.rr-fchip[aria-current] { border-color: var(--accent); background: var(--accent-soft); }
.rr-switch[aria-checked="true"] { background: var(--accent); }
.rr-switch[aria-checked="true"] .rr-switch-knob { left: 21px; }
.rr-switch-sm[aria-checked="true"] .rr-switch-knob { left: 17px; }
.rr-switch-input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 22px; margin: 0; border-radius: 11px; background: var(--line-strong); cursor: pointer; }
.rr-switch-input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--switch-knob); box-shadow: var(--shadow-knob); }
.rr-switch-input:checked { background: var(--accent); }
.rr-switch-input:checked::after { left: 17px; }
.rr-switch-input.rr-switch-lg { width: 44px; height: 26px; border-radius: 13px; }
.rr-switch-input.rr-switch-lg::after { width: 20px; height: 20px; }
.rr-switch-input.rr-switch-lg:checked::after { left: 21px; }
.rr-seg-32 .rr-seg-btn:has(input:checked), .rr-seg-32 .rr-seg-btn[aria-current], .rr-seg-36 .rr-seg-btn:has(input:checked), .rr-seg-36 .rr-seg-btn[aria-current] { font-weight: 600; box-shadow: var(--shadow-pressed); }
label.rr-option, label.rr-seg-btn { position: relative; }
.rr-option input, .rr-seg-btn input { position: absolute; opacity: 0; pointer-events: none; }
.rr-option:has(input:checked) { border-color: var(--signal); box-shadow: var(--ring-selected); background: var(--signal-soft); }
.rr-option:has(input:checked) .rr-radio { border: 5px solid var(--signal); background: var(--on-signal); }
.rr-option:has(input:focus-visible), .rr-seg-btn:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.rr-option-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-8); border-radius: var(--radius-pill); background: var(--surface-2); font-size: 11px; font-weight: 600; color: var(--text-2); }

/* Bars and meters are SVG, sized by attributes: the CSP allows no inline style */
.rr-bar { display: block; width: 100%; height: 6px; }
.rr-bar-8 { height: 8px; }
.rr-bar-track { fill: var(--surface-2); }
.rr-fill-accent { fill: var(--accent); }
.rr-fill-viz-1 { fill: var(--viz-1); }
.rr-fill-viz-2 { fill: var(--viz-2); }
.rr-fill-viz-muted { fill: var(--viz-muted); }
.rr-fill-fixed { fill: var(--fixed); }
.rr-fill-critical { fill: var(--sev-critical); }
.rr-fill-major { fill: var(--sev-major); }
.rr-fill-minor { fill: var(--sev-minor); }
.rr-fill-none { fill: var(--sev-none); }
.rr-fill-refactor { fill: var(--sev-refactor); }
.rr-legend-swatch.is-viz-1 { background: var(--viz-1); }
.rr-legend-swatch.is-viz-2 { background: var(--viz-2); }
.rr-legend-swatch.is-viz-muted { background: var(--viz-muted); }
.rr-legend-swatch.is-fixed { background: var(--fixed); }
.rr-dot-fixed { color: var(--fixed); }
.rr-dot-major { color: var(--major); }
.rr-dot-crit { color: var(--crit); }
.rr-dot-muted { color: var(--text-3); }
.rr-dot-line { color: var(--line-strong); }
.rr-dot-accent { color: var(--accent); }
.rr-dot-8 { width: 8px; height: 8px; }
.rr-ok { color: var(--fixed); }
.rr-warn { color: var(--major); }

/* A daily chart: y labels in a column, the bars in an SVG whose x and width are percentages */
.rr-chart-frame { display: grid; grid-template-columns: 28px minmax(0, 1fr); }
.rr-chart-y { position: relative; height: 180px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rr-chart-y span { position: absolute; right: 8px; transform: translateY(-50%); }
.rr-chart-y .is-top { top: 0; }
.rr-chart-y .is-mid { top: 50%; }
.rr-chart-y .is-base { top: 100%; }
.rr-chart-svg { display: block; width: 100%; height: 200px; overflow: visible; }
.rr-chart-svg .rr-grid { stroke: var(--line); stroke-width: 1; }
.rr-chart-svg .rr-grid.is-base { stroke: var(--line-strong); }
.rr-chart-svg text { font-family: var(--font-sans); font-size: 12px; fill: var(--text-3); }
.rr-chart-svg .rr-day:hover .rr-day-bg { fill: var(--surface-2); }
.rr-chart-svg .rr-day-bg { fill: transparent; }

/* The shell: a sidebar beside the page; under 900 px a header with a menu that opens as a drawer */
.rr-shell { display: flex; min-height: 100vh; }
.rr-aside { flex: none; width: var(--sidebar); background: var(--surface); border-right: 1px solid var(--line); }
.rr-aside .rr-sidebar { position: sticky; top: 0; }
/* The page is at most --content wide, centred in the room the assistant's
   panel leaves it, so closing the panel leaves nothing shifted (asked for by
   the maintainer on 2026-10-29); the header and the footer keep what they
   hold in line with it. --inset is resolved against .rr-main's width. */
.rr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; --gutter: clamp(16px, 4vw, 40px); --inset: max(var(--gutter), calc((100% - var(--content)) / 2 + var(--gutter))); }
.rr-content { width: 100%; max-width: var(--content); margin-inline: auto; padding: var(--space-32) var(--gutter) var(--space-64); display: flex; flex-direction: column; gap: var(--space-24); }
.rr-main > .rr-header { padding-inline: var(--inset); }
.rr-main > .rr-footer { padding-inline: var(--inset); }
.rr-content-narrow { max-width: var(--content-narrow); }
.rr-header-desktop { display: contents; }
.rr-header-mobile { display: none; }
.rr-header-user form { margin: 0; }
.rr-avatar img { border-radius: inherit; }
img.rr-avatar { object-fit: cover; }
.rr-avatar-24 { width: 24px; height: 24px; }
.rr-avatar-28 { width: 28px; height: 28px; }
.rr-avatar-30 { width: 30px; height: 30px; }
.rr-avatar-32 { width: 32px; height: 32px; }
.rr-menu-toggle { display: none; }
.rr-drawer, .rr-scrim { display: none; }
.rr-drawer-close { display: flex; justify-content: flex-end; padding: var(--space-8) var(--space-8) 0; }
.rr-drawer-user { margin-top: auto; display: flex; align-items: center; gap: var(--space-10); padding: var(--space-14) var(--space-20) var(--space-20); border-top: 1px solid var(--line); }
.rr-drawer-user > span { flex: 1 1 auto; font-size: 14px; font-weight: 500; }
.rr-drawer-user form { margin: 0; }

/* Theme: light, dark or the system's, beside sign-out */
.rr-theme { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-8); background: var(--surface); }
.rr-theme button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-6); background: transparent; color: var(--text-3); cursor: pointer; }
.rr-theme button:hover { color: var(--text); }
.rr-theme button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }
.rr-theme button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* In the drawer, a row of its own above the person */
.rr-drawer-theme { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: var(--space-14) var(--space-20) 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.rr-drawer-theme + .rr-drawer-user { margin-top: 0; border-top: 0; }
.rr-menu-open, .rr-menu-close { cursor: pointer; }
@media (max-width: 899px) {
  .rr-aside, .rr-header-desktop { display: none; }
  .rr-header-mobile { display: flex; }
  .rr-menu-toggle { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .rr-drawer { display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 21; width: min(300px, 86vw); flex-direction: column; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); transform: translateX(-105%); visibility: hidden; transition: transform 240ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 240ms; }
  .rr-scrim { display: block; position: fixed; inset: 0; z-index: 20; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
  .rr-menu-toggle:checked ~ .rr-drawer { transform: none; visibility: visible; box-shadow: var(--shadow-drawer); transition: transform 240ms cubic-bezier(0.2, 0, 0, 1), visibility 0s; }
  .rr-menu-toggle:checked ~ .rr-scrim { opacity: 1; pointer-events: auto; }
  .rr-menu-toggle:focus-visible ~ .rr-shell .rr-menu-open { outline: 2px solid var(--accent); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .rr-drawer, .rr-scrim, .rr-menu-toggle:checked ~ .rr-drawer { transition: none; }
}

/* A page without an account: the bar on top, and a message or a list below */
.rr-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; min-height: 60px; padding: var(--space-12) clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line); background: var(--surface); }
.rr-solo { width: 100%; max-width: var(--content-narrow); margin: 0 auto; padding: var(--space-32) clamp(16px, 4vw, 40px) var(--space-64); display: flex; flex-direction: column; gap: var(--space-24); }
.rr-message { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-10); padding: var(--space-24); border: 1px solid var(--line); border-radius: var(--radius-12); background: var(--surface); }
.rr-message h1, .rr-message h2 { margin: 0; font-size: 17px; font-weight: 600; }
.rr-message p { margin: 0; font-size: 14px; color: var(--text-2); max-width: 640px; }
.rr-account-link { display: inline-flex; align-items: center; gap: var(--space-10); color: var(--text); font-weight: 600; text-decoration: none; }

/* Sign in: the streams on the left and the form on the right (asked for by the
   maintainer on 2026-10-27); under 900 px, the form alone, and the streams not
   drawn. The streams stay in view while a long form scrolls. */
.rr-signin { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.rr-signin-main { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-40); padding: var(--space-32) clamp(20px, 5vw, 56px); background: var(--surface); }
.rr-signin-box { width: 100%; max-width: 400px; align-self: center; display: flex; flex-direction: column; gap: var(--space-24); }
/* The logo above the box, in line with its left edge */
.rr-signin-main > .rr-logo { align-self: flex-start; margin-left: max(0px, calc((100% - 400px) / 2)); }
.rr-signin-box h1 { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.rr-signin-lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.rr-signin-fine { margin: 0; display: flex; align-items: flex-start; gap: var(--space-8); font-size: 13px; line-height: 1.5; color: var(--text-3); }
.rr-signin-fine .rr-icon { margin-top: 2px; }
.rr-rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rr-signin-visual { display: none; }
@media (min-width: 900px) {
  .rr-signin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "visual form"; }
  .rr-signin-main { grid-area: form; border-left: 1px solid var(--line); }
  .rr-signin-visual { grid-area: visual; position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg); }
}
/* Over the streams' vanishing point: a smaller headline than a hero's, and one muted line */
.rr-signin-claim { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-10); max-width: 360px; padding: 0 var(--space-24); text-align: center; }
.rr-signin-claim-title { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.rr-signin-claim-line { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); text-wrap: balance; }
.rr-signin-claim-line span { white-space: nowrap; }

/* LightStreams, the website's hero art, as its stylesheet draws it
   (rapid-review-web, public/styles.css, .rr-streams). The app draws the mono
   palette only: ink strokes in the text's colours, so they are black on the
   light ground and white on the dark one, whichever way the theme is set. */
.rr-streams { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rr-streams > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rr-streams path { fill: none; stroke-linecap: round; }
.rr-streams.is-mono { --rr-trail: 0.16; --rr-pulse: 0.55; }
.rr-streams-trail { opacity: var(--rr-trail); }
.rr-streams-pulse { opacity: var(--rr-pulse); stroke-dasharray: 12 88; animation-name: rr-streams-run; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; }
.rr-streams-pulse.is-double { stroke-dasharray: 7 43; }
.rr-sc-ink { stroke: var(--text); }
.rr-sc-ink-2 { stroke: var(--text-3); }
.rr-streams-glow { filter: blur(3px); }
.rr-streams-glow .rr-streams-pulse { opacity: 0.7; stroke-width: 4; }
.rr-sv1 { animation-duration: 1.1s; }
.rr-sv2 { animation-duration: 1.4s; }
.rr-sv3 { animation-duration: 1.75s; }
.rr-sv4 { animation-duration: 2.1s; }
.rr-sv5 { animation-duration: 2.6s; }
.rr-sd0 { animation-delay: 0s; }
.rr-sd1 { animation-delay: -0.3s; }
.rr-sd2 { animation-delay: -0.6s; }
.rr-sd3 { animation-delay: -0.9s; }
.rr-sd4 { animation-delay: -1.2s; }
.rr-sd5 { animation-delay: -1.5s; }
.rr-sd6 { animation-delay: -1.8s; }
.rr-sd7 { animation-delay: -2.1s; }
.rr-streams.is-still .rr-streams-pulse, .rr-streams.is-still .rr-streams-glow { display: none; }
.rr-streams.is-still .rr-streams-trail { opacity: calc(var(--rr-trail) * 1.5); }
.rr-streams-pause { position: absolute; right: var(--space-12); bottom: var(--space-12); pointer-events: auto; background: var(--surface); }
.rr-streams:has(.rr-motion-toggle:checked) * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .rr-streams .rr-streams-pulse, .rr-streams .rr-streams-glow { display: none; }
  .rr-streams .rr-streams-trail { opacity: calc(var(--rr-trail) * 1.5); }
  .rr-streams-pause { display: none; }
}
/* On touch screens the streams run without their glow, as on the website
   (rapid-review-web, public/home.css): the glow is a blur over every moving
   pulse, and on an iPhone it stuttered. The mono palette draws none, so this
   holds only if the palette changes. */
@media (hover: none) and (pointer: coarse) { .rr-streams-glow { display: none; } }
@keyframes rr-streams-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* The control that pauses motion: a checkbox over a ghost button, checked
   meaning paused; it shows the pause mark, and the play mark once paused */
:where(.rr-motion) { position: relative; }
.rr-motion { color: var(--text-2); }
.rr-motion-toggle { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.rr-motion:has(.rr-motion-toggle:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.rr-motion-play { display: none; }
.rr-motion:has(.rr-motion-toggle:checked) .rr-motion-pause { display: none; }
.rr-motion:has(.rr-motion-toggle:checked) .rr-motion-play { display: inline-block; }
/* The public beta: the sign-in box holds the waitlist, an invite code and sign-in */
.rr-signin-box h2 { margin: 0; font-size: 16px; font-weight: 600; }
.rr-signin-box > .rr-callout, .rr-beta-form .rr-callout { margin: 0; }
.rr-beta-form { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; }
.rr-input.rr-mono { font-family: var(--font-mono); }

/* Cards in a grid, rows inside them */
.rr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: var(--space-12); }
.rr-rows { display: flex; flex-direction: column; }
.rr-row3 { display: grid; grid-template-columns: minmax(0, 1fr) 48px 44px; align-items: center; gap: var(--space-8); padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rr-row3 > :nth-child(2) { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.rr-row3 > :nth-child(3) { text-align: right; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rr-row3.is-first { border-top: 0; }
.rr-row3.is-sub { padding: 4px 0; border-top: 0; font-size: 13px; color: var(--text-2); }
.rr-row3.is-sub > :first-child { padding-left: var(--space-16); font-weight: 400; }
.rr-row3.is-sub > :nth-child(2) { font-weight: 400; }
.rr-label-dot { display: inline-flex; align-items: center; gap: var(--space-8); }
.rr-sevrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; align-items: center; gap: var(--space-12); padding: 6px 0; color: var(--text); text-decoration: none; }
.rr-sevrow .rr-sev { justify-self: start; }
.rr-sevrow > :last-child { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.rr-arearow { display: flex; flex-direction: column; gap: var(--space-6); }
.rr-arearow-head { display: flex; justify-content: space-between; gap: var(--space-8); font-size: 14px; }
.rr-arearow-head > :last-child { font-weight: 500; font-variant-numeric: tabular-nums; }
.rr-tile-info { text-decoration: none; }
.rr-cell-muted { display: block; font-size: 12px; color: var(--text-3); }
.rr-table td.is-nowrap, .rr-table th.is-nowrap { white-space: nowrap; }
.rr-table tbody tr:last-child td { border-bottom: 0; }
.rr-table .rr-share { display: flex; align-items: center; gap: var(--space-8); min-width: 120px; font-size: 13px; color: var(--text-3); }
.rr-table .rr-share svg { flex: 1 1 auto; }
.rr-repo-owner { color: var(--text-3); }
.rr-status-dot { display: inline-flex; align-items: center; gap: var(--space-6); font-size: 13px; color: var(--text-2); }

/* Pull request: findings beside pushes */
.rr-pr-head { display: flex; flex-direction: column; gap: var(--space-10); }
.rr-pr-tags { display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap; font-size: 13px; }
.rr-pr-title { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.rr-pr-meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-14); font-size: 13px; color: var(--text-3); }
.rr-pr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--space-24); align-items: start; }
@media (max-width: 1099px) { .rr-pr-cols { grid-template-columns: minmax(0, 1fr); } }
.rr-col { display: flex; flex-direction: column; gap: var(--space-12); }
.rr-col-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; }
.rr-col-title { margin: 0; font-size: 17px; font-weight: 600; display: inline-flex; align-items: baseline; gap: var(--space-8); }
.rr-col-title span { font-size: 13px; font-weight: 500; color: var(--text-3); }

/* Learnings */
.rr-learning-form { display: none; flex-direction: column; gap: var(--space-12); margin: 0; padding: var(--space-16); border: 1px solid var(--line-strong); border-radius: var(--radius-10); background: var(--bg); }
.rr-learning:has(.rr-edit-toggle:checked) .rr-learning-form { display: flex; }
.rr-learning-form > div { display: flex; gap: var(--space-8); }
.rr-learning { position: relative; }
.rr-learning-edit { cursor: pointer; }
.rr-edit-toggle:checked + .rr-learning-edit { background: var(--surface-2); }
.rr-edit-toggle:focus-visible + .rr-learning-edit { outline: 2px solid var(--accent); outline-offset: 2px; }
.rr-inline-form { display: inline-flex; gap: var(--space-8); margin: 0; flex-wrap: wrap; }
.rr-merge-replaces { display: flex; flex-direction: column; gap: var(--space-8); }
.rr-merge-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.rr-merge-members li { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-10) var(--space-14); border-radius: var(--radius-10); background: var(--surface-2); font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* Repositories: a list of rows, each with its switch and its settings */
.rr-list { border: 1px solid var(--line); border-radius: var(--radius-12); background: var(--surface); }
.rr-repo { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-20); padding: var(--space-16) var(--space-20); border-top: 1px solid var(--line); }
.rr-repo:first-child { border-top: 0; }
.rr-repo-switch { flex: none; margin: 0; display: flex; }
.rr-repo-spacer { flex: none; width: 36px; }
.rr-repo-select { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.rr-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; padding: var(--space-10) var(--space-20); background: var(--surface-2); border-bottom: 1px solid var(--line); border-radius: var(--radius-12) var(--radius-12) 0 0; font-size: 13px; }
.rr-list-toolbar form { display: none; }
.rr-list-toolbar + .rr-repo { border-top: 0; }
.rr-repo-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.rr-repo-state { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.rr-repo-credits { flex: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: 12px; color: var(--text-3); }
.rr-repo-credits b { font-size: 15px; font-weight: 600; color: var(--text); }
.rr-repo-name { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.rr-repo-name a { color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.rr-repo-name a:hover { text-decoration: underline; }
.rr-repo-perm { font-size: 12px; color: var(--text-3); }
.rr-repo-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.rr-repo-changed { font-size: 12px; color: var(--text-3); }
.rr-edit-toggle { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.rr-repo-edit { flex: none; cursor: pointer; }
.rr-edit-close, .rr-edit-toggle:checked + .rr-repo-edit .rr-edit-open { display: none; }
.rr-edit-toggle:checked + .rr-repo-edit .rr-edit-close { display: inline; }
.rr-edit-toggle:focus-visible + .rr-repo-edit { outline: 2px solid var(--accent); outline-offset: 2px; }
.rr-repo .rr-editor { display: none; }
.rr-edit-toggle:checked ~ .rr-editor { display: flex; }
.rr-editor { flex: 1 1 100%; flex-direction: column; margin: var(--space-4) 0 0; padding: var(--space-4) var(--space-20) var(--space-16); border: 1px solid var(--line); border-radius: var(--radius-10); background: var(--bg); }
.rr-editor-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-24); padding: var(--space-14) 0; border-top: 1px solid var(--line); }
.rr-editor > div:first-of-type { border-top: 0; }
.rr-editor-label { flex: 1 1 200px; display: flex; flex-direction: column; gap: var(--space-2); }
.rr-editor-label b { font-size: 14px; font-weight: 600; }
.rr-editor-label span { font-size: 12px; color: var(--text-3); }
.rr-editor-control { flex: 3 1 360px; display: flex; align-items: center; gap: var(--space-10); }
.rr-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; padding-top: var(--space-16); border-top: 1px solid var(--line); }
.rr-editor-foot > span:first-child { flex: 1 1 280px; font-size: 12px; line-height: 1.5; color: var(--text-3); }
.rr-editor-btns { display: flex; gap: var(--space-8); }
/* Onboarding (the canvas's Onboarding and OnboardingRepos, dev/design-2026-10-30):
   a layer over the account's frame, which stays behind it, inert. The page
   under it does not scroll while it is open. */
html:has(.rr-onb) { overflow: hidden; }
.rr-onb-behind { pointer-events: none; }
.rr-onb { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); color: var(--text); }
.rr-onb [hidden] { display: none !important; }
.rr-onb-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; min-height: 60px; box-sizing: border-box; padding: var(--space-12) clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line); background: var(--surface); }
.rr-onb-brand { display: flex; align-items: center; gap: var(--space-10); min-width: 0; }
.rr-onb-brand .rr-logo-name { font-size: 16px; }
.rr-onb-rule { width: 1px; height: 18px; margin: 0 var(--space-4); background: var(--line-strong); }
.rr-onb-what { font-size: 14px; color: var(--text-2); }
.rr-onb-who { display: flex; align-items: center; gap: var(--space-12); font-size: 14px; font-weight: 500; }
.rr-onb-body { flex: 1 0 auto; display: flex; justify-content: center; padding: var(--space-40) clamp(16px, 5vw, 56px) var(--space-64); box-sizing: border-box; background: var(--surface); }
.rr-onb-body.is-split { flex-wrap: wrap; align-items: stretch; padding: 0; }
.rr-onb-col { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: var(--space-24); }
.rr-onb-col.is-narrow { max-width: 560px; gap: 28px; }
.rr-onb-settings, .rr-onb-preview { flex: 1 1 520px; min-width: 0; display: flex; justify-content: center; box-sizing: border-box; padding: var(--space-40) clamp(16px, 5vw, 56px) 56px; }
.rr-onb-settings { background: var(--surface); }
.rr-onb-preview { background: var(--bg); border-left: 1px solid var(--line); }
@media (max-width: 1099px) { .rr-onb-settings, .rr-onb-preview { flex-basis: 100%; } .rr-onb-preview { border-left: 0; border-top: 1px solid var(--line); } }
.rr-onb-intro { display: flex; flex-direction: column; gap: var(--space-10); }
.rr-onb-title { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.rr-onb-intro p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.rr-onb-note, .rr-onb-error { margin: 0; padding: var(--space-10) var(--space-14); border-radius: var(--radius-10); background: var(--surface-2); font-size: 13px; line-height: 1.5; color: var(--text-2); }
.rr-onb-error { background: var(--crit-soft); color: var(--text); }
.rr-onb-form { display: flex; flex-direction: column; gap: var(--space-24); }
.rr-onb-col.is-narrow .rr-onb-form { gap: 28px; }
/* Step one: the search, the list and its foot */
.rr-onb-search { flex: none; display: flex; width: 100%; height: var(--control-36); padding: 0 var(--space-12); }
.rr-onb-search-btn { flex: none; display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; color: var(--text-3); cursor: pointer; }
.rr-onb-repos { min-width: 0; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-12); overflow: hidden; }
.rr-onb-repo { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); background: var(--surface); cursor: pointer; }
.rr-onb-repo + .rr-onb-repo { border-top: 1px solid var(--line); }
.rr-onb-repo:has(input:checked) { background: var(--accent-soft); }
.rr-onb-repo.is-on { cursor: default; }
.rr-onb-repo input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.rr-onb-repo-box { flex: none; width: 16px; height: 16px; }
.rr-onb-repo-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.rr-onb-repo-name { font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.rr-onb-repo-owner { font-weight: 400; color: var(--text-3); }
.rr-onb-repo-when { flex: none; display: inline-flex; align-items: center; gap: var(--space-6); font-size: 12px; color: var(--text-3); }
@media (max-width: 599px) {
  .rr-onb-login { display: none; }
  /* Four steps on a phone: the current one named, the others by their mark alone, still read */
  .rr-onb .rr-step:not([aria-current="step"]) .rr-step-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rr-onb-repo { flex-wrap: wrap; row-gap: var(--space-4); }
  .rr-onb-repo-main { flex-basis: calc(100% - 28px); }
  .rr-onb-repo-when { flex: 1 1 100%; padding-left: 28px; }
}
.rr-onb-repos-empty { margin: 0; padding: var(--space-14) var(--space-16); font-size: 13px; color: var(--text-3); }
.rr-onb-repos-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; padding: var(--space-10) var(--space-16); border-top: 1px solid var(--line); background: var(--surface-2); font-size: 13px; color: var(--text-3); }
.rr-onb-more { padding: 0; border: 0; background: transparent; font: inherit; font-weight: 500; color: var(--accent); text-decoration: underline; text-decoration-color: var(--link-deco); text-underline-offset: 3px; cursor: pointer; }
.rr-onb-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; padding-top: var(--space-20); border-top: 1px solid var(--line); }
.rr-onb-picked { font-size: 14px; color: var(--text-2); }
.rr-onb-btns { display: flex; gap: var(--space-8); }
/* Step two: the chosen repositories, the settings */
.rr-onb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding-top: var(--space-4); }
.rr-onb-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--space-8); border-radius: var(--radius-6); border: 1px solid var(--line); background: var(--code); font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.rr-onb-chips .rr-link { margin-left: var(--space-4); font-size: 13px; }
.rr-onb-field { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--space-10); }
.rr-onb-field > legend { padding: 0; margin-bottom: var(--space-8); font-size: 15px; font-weight: 600; }
.rr-onb-hint { margin: 0 0 var(--space-4); font-size: 13px; line-height: 1.55; color: var(--text-2); }
.rr-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--space-8); }
.rr-onb-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 3px; border-radius: var(--radius-10); }
.rr-onb-seg .rr-seg-btn { height: auto; min-height: var(--control-36); padding: var(--space-6) var(--space-8); border-radius: var(--radius-8); font-size: 14px; line-height: 1.25; text-align: center; }
.rr-onb-default { font-size: 11px; font-weight: 600; color: var(--text-3); }
/* The preview: an example pull request, as GitHub shows Rapid Review's review */
.rr-onb-pv-col { width: 100%; max-width: 580px; display: flex; flex-direction: column; gap: var(--space-16); }
.rr-onb-pv-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; }
.rr-onb-pv-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.rr-onb-pv-head span { font-size: 13px; color: var(--text-3); }
.rr-onb-pv { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-12); background: var(--surface); overflow: hidden; }
.rr-onb-pv code, .rr-onb-pv-code { font-family: var(--font-mono); font-size: 12px; }
.rr-onb-pv-pr { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.rr-onb-pv-pr b { font-weight: 600; color: var(--text); }
.rr-onb-pv-inner { display: flex; flex-direction: column; gap: var(--space-14); padding: var(--space-16); }
.rr-onb-pv-bot { display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap; font-size: 13px; color: var(--text-3); }
.rr-onb-pv-bot b { font-size: 14px; font-weight: 600; color: var(--text); }
.rr-onb-pv-bot.is-small { gap: var(--space-8); }
.rr-onb-pv-bot.is-small b { font-size: 13px; }
.rr-onb-mark { flex: none; }
.rr-onb-pv-summary { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-14) var(--space-16); border: 1px solid var(--line); border-radius: var(--radius-10); }
.rr-onb-pv-posted { margin: 0; font-size: 14px; font-weight: 600; }
.rr-onb-pv-list { margin: 0; padding-left: var(--space-20); display: flex; flex-direction: column; gap: var(--space-8); font-size: 14px; line-height: 1.6; }
.rr-onb-pv-list strong, .rr-onb-pv-finding strong { font-weight: 600; }
.rr-onb-pv-list .rr-sev, .rr-onb-pv-finding .rr-sev { margin-right: var(--space-6); vertical-align: 1px; }
.rr-onb-pv-list code { padding: 1px 6px; border-radius: var(--radius-6); border: 1px solid var(--line); background: var(--code); color: var(--text-2); white-space: nowrap; }
.rr-onb-pv-quiet { margin: 0; font-size: 13px; color: var(--text-3); }
.rr-onb-pv-details summary { cursor: pointer; font-size: 14px; font-weight: 500; }
.rr-onb-pv-details p { margin: var(--space-8) 0 0; font-size: 13px; color: var(--text-3); }
.rr-onb-pv-summary .rr-onb-pv-details { padding-top: var(--space-10); border-top: 1px solid var(--line); }
.rr-onb-pv-file { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-10); overflow: hidden; }
.rr-onb-pv-path { padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); }
.rr-onb-pv-code { margin: 0; padding: var(--space-8) 0; background: var(--code); line-height: 1.7; color: var(--text-2); overflow-x: auto; }
.rr-onb-pv-code > span { display: block; padding: 0 var(--space-12); white-space: pre; }
.rr-onb-pv-code i { display: inline-block; width: 28px; font-style: normal; color: var(--text-3); }
.rr-onb-pv-code .is-marked { background: var(--mark); color: var(--text); }
.rr-onb-pv-code .is-removed { background: var(--crit-soft); }
.rr-onb-pv-code .is-added { background: var(--fixed-soft); }
.rr-onb-pv-comment { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-14); border-top: 1px solid var(--line); }
.rr-onb-pv-finding { margin: 0; font-size: 14px; line-height: 1.6; }
.rr-onb-pv-why { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.rr-onb-pv-suggest { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-8); overflow: hidden; }
.rr-onb-pv-suggest .rr-onb-pv-code { padding: var(--space-6) 0; }
.rr-onb-pv-suggest .rr-onb-pv-code > span { padding: 0 var(--space-10); }
.rr-onb-pv-suggest-head { padding: var(--space-6) var(--space-10); border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-2); }
.rr-onb-pv-suggest-foot { display: flex; justify-content: flex-end; padding: var(--space-6) var(--space-10); border-top: 1px solid var(--line); }
.rr-onb-pv-suggest-foot span { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--space-10); border-radius: var(--radius-6); border: 1px solid var(--line-strong); font-size: 12px; font-weight: 500; color: var(--text); }
.rr-onb-pv-push { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-12); border-top: 1px solid var(--line); }
.rr-onb-pv-label { font-size: 12px; font-weight: 500; color: var(--text-3); }
.rr-onb-pv-next { display: flex; align-items: flex-start; gap: var(--space-10); }
.rr-onb-pv-next > svg { flex: none; margin-top: 1px; }
.rr-onb-pv-next > span { display: flex; flex-direction: column; gap: var(--space-2); }
.rr-onb-pv-next-title { font-size: 13px; font-weight: 500; }
.rr-onb-pv-next-note { font-size: 13px; color: var(--text-2); }
.rr-onb-pv-ok circle { fill: var(--fixed); }
.rr-onb-pv-ok path { fill: none; stroke: var(--surface); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rr-onb-pv-next .rr-icon { color: var(--text-2); }
.rr-onb-pv-left { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-14) var(--space-16); border: 1px dashed var(--line-strong); border-radius: var(--radius-12); }
.rr-onb-pv-left-title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.rr-onb-pv-left-row { display: flex; justify-content: space-between; gap: var(--space-12); font-size: 13px; color: var(--text-3); }
.rr-onb-pv-left-row > span:last-child { white-space: nowrap; }
/* The done step's check, filled: the signal with the check knocked out */
.rr-step-check { flex: none; }
.rr-step-check circle { fill: var(--signal); }
.rr-step-check path { fill: none; stroke: var(--on-signal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Free open-source reviews, below a repository's row: where its application stands, and an admin's forms, each opened by its button. */
.rr-repo-oss { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8) var(--space-16); }
.rr-oss-state { flex: 1 1 320px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-10); font-size: 13px; color: var(--text-2); }
.rr-oss-state .rr-cell-muted { flex: 1 1 100%; }
.rr-oss-open { flex: 0 1 auto; }
.rr-oss-open[open] { flex: 1 1 100%; }
.rr-oss-open > summary { list-style: none; }
.rr-oss-open > summary::-webkit-details-marker { display: none; }
.rr-oss-form { display: flex; flex-direction: column; gap: var(--space-10); margin: var(--space-10) 0 0; padding: var(--space-14) var(--space-20); border: 1px solid var(--line); border-radius: var(--radius-10); background: var(--bg); }
@media (min-width: 900px) {
  .rr-repo { display: grid; grid-template-columns: 36px minmax(0, 2fr) minmax(0, 3fr) 128px; }
  .rr-repo.has-select { grid-template-columns: 16px 36px minmax(0, 2fr) minmax(0, 3fr) 128px; }
  .rr-repo.has-credits { grid-template-columns: 36px minmax(0, 2fr) minmax(0, 3fr) 140px 128px; }
  .rr-repo-credits { align-items: flex-end; text-align: right; }
  .rr-repo-edit { justify-self: end; }
  .rr-editor { grid-column: 1 / -1; }
  .rr-repo-oss { grid-column: 1 / -1; }
}
.rr-editor-switch { display: inline-flex; align-items: center; gap: var(--space-10); font-size: 14px; color: var(--text-2); }
.rr-floor { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }
.rr-floor form { display: flex; align-items: center; gap: var(--space-8); margin: 0; flex-wrap: wrap; }

/* Usage */
.rr-signals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rr-signals li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8) var(--space-20); flex-wrap: wrap; padding: var(--space-10) 0; border-top: 1px solid var(--line); font-size: 14px; }
.rr-signals li:first-child { border-top: 0; padding-top: 0; }
.rr-signals strong { font-weight: 600; }
.rr-signals li > span { flex: 1 1 320px; }
.rr-signals li > a { flex: none; }
.rr-buy { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; }
.rr-buy > .rr-btn { align-self: flex-start; }
.rr-buy-row { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.rr-head-form { margin: 0; }
.rr-plan-status { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.rr-plan-by { margin: 0; font-size: 12px; color: var(--text-3); }
.rr-budget-meter { display: flex; flex-direction: column; gap: var(--space-8); max-width: 480px; }
.rr-budget-form { display: flex; align-items: center; gap: var(--space-8); margin: 0; flex-wrap: wrap; }
.rr-code-form { display: flex; align-items: center; gap: var(--space-8); margin: 0; flex-wrap: wrap; }
.rr-code-form .rr-field { flex: 1 1 14rem; max-width: 20rem; }
.rr-referral-code { width: 100%; max-width: 260px; font-size: 16px; letter-spacing: 0.04em; }
.rr-field-number input { width: 6em; }
/* The plan cards (asked for by the maintainer on 2026-10-23): each card's
   lines on the rows of the cards beside it, through subgrid, so a line that
   wraps moves its neighbours' too; the price the large figure. Without
   subgrid each card is a column of its own. Four cards since 2026-11-06
   (Developer, Pro, Max and pay as you go): in one row where each has 200px,
   else two rows of two, else one above another, never three with one
   alone; the panel is their container. A button's words may take two
   lines, as a card that narrow cannot hold "Switch to Developer in Stripe"
   on one. */
.rr-plan-panel { container-type: inline-size; }
.rr-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
@container (min-width: 412px) { .rr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 836px) { .rr-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rr-plan-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: var(--space-6); padding: var(--space-18) var(--space-18) var(--space-16); border: 1px solid var(--line-strong); border-radius: var(--radius-12); background: var(--surface); }
.rr-plan-card.is-current { border-color: var(--signal); box-shadow: var(--ring-selected); }
.rr-plan-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); font-size: 15px; font-weight: 600; }
.rr-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-6); margin-top: var(--space-6); }
.rr-plan-amount { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rr-plan-amount.is-unset { font-size: 20px; line-height: 1.6; color: var(--text-2); }
.rr-plan-per { font-size: 14px; color: var(--text-2); white-space: nowrap; }
.rr-plan-billed { font-size: 12px; color: var(--text-3); }
.rr-plan-gets { margin-top: var(--space-8); font-size: 15px; font-weight: 600; }
.rr-plan-note { font-size: 12px; line-height: 1.5; color: var(--text-3); }
.rr-plan-go { align-self: end; margin-top: var(--space-8); }
.rr-plan-go .rr-btn { width: 100%; height: auto; min-height: var(--control-36); padding-block: var(--space-8); white-space: normal; text-align: center; line-height: 1.3; }
.rr-plan-go .rr-btn:disabled { cursor: default; opacity: 0.7; }
@supports not (grid-template-rows: subgrid) {
  .rr-plan-card { grid-template-rows: none; display: flex; flex-direction: column; }
  .rr-plan-go { align-self: stretch; margin-top: auto; padding-top: var(--space-8); }
}
.rr-billing-switch { display: inline-flex; align-items: center; gap: var(--space-10); text-decoration: none; }
.rr-billing-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-8); }

.rr-subtle-title { font-size: 13px; font-weight: 500; color: var(--text-2); }
.rr-callout { padding: var(--space-10) var(--space-14); border-radius: var(--radius-10); background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.rr-callout-warning { background: var(--major-soft); color: var(--text); }
.rr-callout-danger { background: var(--crit-soft); color: var(--text); }

/* Support (rapid-review-web, dev/plan.md, section 6.1): the form, a thread's
   messages, and every page's foot. */
.rr-support-form { display: flex; flex-direction: column; gap: var(--space-14); max-width: 640px; }
.rr-support-form .rr-callout { margin: 0; }
.rr-input { box-sizing: border-box; height: var(--control-36); padding: 0 var(--space-12); border-radius: var(--radius-8); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 400; }
.rr-support-thread { display: flex; flex-direction: column; gap: var(--space-12); }
.rr-support-message { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-14) var(--space-16); border: 1px solid var(--line); border-radius: var(--radius-12); background: var(--surface); }
.rr-support-message.is-support { background: var(--surface-2); }
.rr-support-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; font-size: 13px; color: var(--text-3); }
.rr-support-head b { font-weight: 600; color: var(--text); }
.rr-support-text { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.rr-page-desc .rr-pill { margin-right: var(--space-8); }

/* The assistant (ARCHITECTURE.md, "The assistant"): a conversation in
   support's look, an answer's paragraphs, lists and sources, the newest
   answer's cards, what was done with them, and the person's conversations. */
.rr-answer { display: flex; flex-direction: column; gap: var(--space-8); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.rr-answer p, .rr-answer ul { margin: 0; }
.rr-answer p { white-space: pre-line; }
.rr-answer ul { padding-left: var(--space-20); }
.rr-assist-code .rr-codeblock-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: 2px 2px 2px var(--space-12); }
.rr-assist-code pre { overflow-wrap: normal; }
.rr-assist-code code { font-size: inherit; overflow-wrap: normal; white-space: pre; }
.rr-assist-code .rr-codeblock-line { min-height: 1.7em; }
.rr-assist-code .rr-assist-code-copy { width: 28px; height: 28px; }
.rr-sources { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-10); font-size: 13px; color: var(--text-3); }
.rr-sources ul { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); margin: 0; padding: 0; list-style: none; }
.rr-proposals { display: flex; flex-direction: column; gap: var(--space-8); }
.rr-proposal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-10) var(--space-16); padding: var(--space-12) var(--space-14); border: 1px solid var(--line-strong); border-radius: var(--radius-10); background: var(--surface); }
.rr-proposal-text { flex: 1 1 280px; display: flex; flex-direction: column; gap: var(--space-4); font-size: 14px; }
.rr-proposal-text b { font-weight: 600; overflow-wrap: anywhere; }
.rr-proposal-text span { font-size: 13px; color: var(--text-2); }
.rr-proposal-form { flex: 0 0 auto; }
.rr-proposal-unread { flex: 1 1 200px; font-size: 13px; color: var(--text-3); }
/* The assistant's panel (web/assistant-pages.ts): beside the page from
   1280 px, which makes room for it; over the page's right side below that;
   the whole screen under 600 px. Its body scrolls between the head and the
   question form. */
.rr-assist { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border-left: 1px solid var(--line); }
.rr-assist[hidden] { display: none; }
@media (min-width: 1280px) {
  .rr-assist { flex: none; width: 400px; position: sticky; top: 0; height: 100vh; height: 100dvh; }
}
@media (max-width: 1279px) {
  .rr-assist { position: fixed; top: 0; right: 0; bottom: 0; z-index: 22; width: min(420px, 100vw); box-shadow: var(--shadow-drawer); }
}
@media (max-width: 599px) {
  .rr-assist { left: 0; width: 100vw; border-left: 0; }
  html:has(.rr-assist:not([hidden])) { overflow: hidden; }
}
.rr-assist-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: 60px; box-sizing: border-box; padding: var(--space-8) var(--space-10) var(--space-8) var(--space-16); border-bottom: 1px solid var(--line); }
.rr-assist-title { display: flex; align-items: center; gap: var(--space-8); margin: 0; font-size: 15px; font-weight: 600; }
.rr-assist-title .rr-icon { color: var(--signal); }
.rr-assist-actions { display: flex; align-items: center; gap: var(--space-2); }
.rr-assist-actions [aria-current] { background: var(--surface-2); }
.rr-assist-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-14); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-16); }
/* It scrolls: what it holds keeps its height. */
.rr-assist-body > * { flex-shrink: 0; }
.rr-assist-thread { display: flex; flex-direction: column; gap: var(--space-16); }
.rr-assist-turn.is-you { display: flex; justify-content: flex-end; }
.rr-assist-turn.is-unsent .rr-assist-bubble { background: transparent; border: 1px dashed var(--line-strong); color: var(--text-2); }
.rr-assist-again { align-self: flex-start; margin: 0; }
.rr-assist-bubble { max-width: 85%; margin: 0; padding: var(--space-8) var(--space-12); border-radius: 14px 14px 4px 14px; background: var(--accent-soft); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rr-assist-turn.is-ai { display: flex; flex-direction: column; gap: var(--space-10); }
.rr-assist-places { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.rr-assist-place { display: inline-flex; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-10); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none; }
.rr-assist-place:hover { border-color: var(--accent); }
.rr-assist-place:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rr-assist-action { display: flex; align-items: flex-start; gap: var(--space-8); margin: 0; font-size: 13px; color: var(--text-2); }
.rr-assist-action svg { flex: none; margin-top: 4px; color: var(--fixed); }
.rr-assist-action .rr-assist-time { flex: none; margin-left: auto; padding-left: var(--space-8); }
/* Under an answer: copy, the thumbs and when it was written, quiet until pointed at. */
.rr-assist-tools { display: flex; align-items: center; gap: var(--space-2); margin-left: calc(-1 * var(--space-8)); }
.rr-assist-vote { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.rr-assist-tool { width: var(--control-32); height: var(--control-32); color: var(--text-3); }
.rr-assist-tool[hidden] { display: none; }
.rr-assist-tool:hover { background: var(--surface-2); color: var(--text); }
.rr-assist-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A thumb pressed is solid. */
.rr-assist-tool[aria-pressed="true"] { color: var(--text); }
.rr-assist-tool[aria-pressed="true"] path { fill: currentColor; }
.rr-assist-tool[data-rr-copy] .rr-icon + .rr-icon { display: none; }
.rr-assist-tool[data-rr-copied] .rr-icon:first-child { display: none; }
.rr-assist-tool[data-rr-copied] .rr-icon + .rr-icon { display: inline; color: var(--fixed); }
.rr-assist-time { margin-left: var(--space-6); font-size: 12px; color: var(--text-3); white-space: nowrap; }
.rr-assist .rr-proposal.is-plan, .rr-assist .rr-proposal.is-credits { flex-direction: column; align-items: stretch; }
/* In a column the text's basis would be its height. */
.rr-assist .rr-proposal.is-plan .rr-proposal-text, .rr-assist .rr-proposal.is-credits .rr-proposal-text { flex: 0 0 auto; }
.rr-assist-tiles { display: grid; gap: var(--space-8); }
.rr-assist-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-12); margin: 0; padding: var(--space-12); border: 1px solid var(--line-strong); border-radius: var(--radius-10); background: var(--surface); }
.rr-assist-tile-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-6); font-size: 14px; font-weight: 600; }
.rr-assist-tile-billed { font-size: 12px; font-weight: 400; color: var(--text-3); }
.rr-assist-tile-price { font-size: 14px; }
.rr-assist-tile-gets { font-size: 12px; color: var(--text-2); }
.rr-assist-tile .rr-btn { grid-column: 2; grid-row: 1 / span 3; }
.rr-assist-ticket { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); margin: 0; }
.rr-assist-ticket .rr-callout { margin: 0; }
.rr-assist-problem { margin: 0; }
.rr-assist-empty { display: flex; flex-direction: column; gap: var(--space-8); margin-top: auto; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.rr-assist-empty p { margin: 0; }
.rr-assist-empty-title { font-size: 16px; font-weight: 600; color: var(--text); }
.rr-assist-starters { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-6); }
.rr-assist-starters form { margin: 0; }
.rr-assist-starter { width: 100%; padding: var(--space-8) var(--space-12); border: 1px solid var(--line); border-radius: var(--radius-10); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.rr-assist-starter:hover { border-color: var(--line-strong); }
.rr-assist-section { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.rr-assist-history { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.rr-assist-history-item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8) var(--space-10); border-radius: var(--radius-8); color: var(--text); font-size: 14px; text-decoration: none; }
.rr-assist-history-item:hover { background: var(--surface-2); }
.rr-assist-composer { flex: none; display: flex; flex-direction: column; gap: var(--space-8); margin: 0; padding: var(--space-12) var(--space-16) var(--space-14); border-top: 1px solid var(--line); background: var(--surface); }
.rr-assist-input { display: flex; align-items: flex-end; gap: var(--space-8); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-12); border: 1px solid var(--line-strong); border-radius: var(--radius-12); background: var(--surface); }
.rr-assist-input:focus-within { border-color: var(--signal); box-shadow: var(--ring-selected); }
.rr-assist-input textarea { flex: 1 1 auto; min-width: 0; max-height: 12em; margin: 0; padding: var(--space-4) 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; }
.rr-assist-send { flex: none; }
.rr-assist-fine { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-3); }
.rr-assist-note { display: flex; align-items: flex-start; gap: var(--space-6); margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-3); }
.rr-assist-note svg { flex: none; margin-top: 2px; }
.rr-assist-data summary { cursor: pointer; font-size: 12px; color: var(--text-3); }
.rr-assist-data p { margin: var(--space-6) 0 0; font-size: 12px; line-height: 1.5; color: var(--text-3); }
.rr-assist-turn.rr-assist-waiting { flex-direction: row; align-items: center; gap: var(--space-8); font-size: 12px; color: var(--text-3); }
.rr-assist-dots { flex: none; }
/* The step the desk is at: one line, cut short where the panel is narrow. */
.rr-assist-wait { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rr-assist-dots { display: inline-flex; gap: 4px; }
.rr-assist-dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: rr-assist-dot 1.2s ease-in-out infinite; }
.rr-assist-dots span:nth-child(2) { animation-delay: 0.15s; }
.rr-assist-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes rr-assist-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .rr-assist-dots span { animation: none; opacity: 0.6; } }
.rr-header-mobile-right { display: flex; align-items: center; gap: var(--space-4); }
.rr-ask-toggle[aria-expanded="true"] { background: var(--surface-2); }
.rr-footer { box-sizing: border-box; width: 100%; padding: 0 clamp(16px, 4vw, 40px) var(--space-24); font-size: 13px; color: var(--text-3); }
.rr-solo + .rr-footer { max-width: var(--content-narrow); margin: 0 auto; }

/* Loading (asked for by the maintainer on 2026-10-28): while the next page
   loads, a thin bar in the signal at the top. /app.js turns it on, as
   data-loading on <html>, once a link or a form leads to another page of the
   app, and marks the control busy; the page between GitHub and the app runs
   it from the start (.is-on), without script. It is fixed, so nothing on the
   page moves, and it shows after 150 ms, so a quick page does not flash it.
   As no one knows how long the next page takes, it runs fast at first, then
   ever slower, and never fills. With reduced motion it does not move: a
   label, "Loading…", stands at the top in its place. */
.rr-loading-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 3px; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.rr-loading-bar span { display: none; }
:root[data-loading] .rr-loading-bar, .rr-loading.is-on .rr-loading-bar { animation: rr-loading 30s ease-out 150ms both; }
@keyframes rr-loading { 0% { transform: scaleX(0); } 2% { transform: scaleX(0.25); } 6% { transform: scaleX(0.45); } 15% { transform: scaleX(0.62); } 40% { transform: scaleX(0.78); } 100% { transform: scaleX(0.9); } }
:root[data-loading] body, [aria-busy="true"] { cursor: progress; }
.rr-btn[aria-busy="true"] { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .rr-loading-bar { top: var(--space-8); left: 50%; right: auto; height: auto; background: none; transform: translateX(-50%); visibility: hidden; }
  .rr-loading-bar span { display: block; padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill); background: var(--signal); color: var(--on-signal); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; box-shadow: var(--shadow-tooltip); }
  :root[data-loading] .rr-loading-bar, .rr-loading.is-on .rr-loading-bar { animation: none; visibility: visible; transition: visibility 0s 150ms; }
}
/* The page between GitHub and the app: its link on, for a browser that does
   not follow the page's refresh, shows after 10 seconds. */
.rr-signing-on { visibility: hidden; animation: rr-signing-on 0s 10s forwards; }
@keyframes rr-signing-on { to { visibility: visible; } }

/* The overview's latest pushes (web/live-pushes.ts; decided by the
   maintainer on 2026-10-30): the website's example of the check on each push
   (rapid-review-web, .rr-ticker in public/styles.css), drawn from the bot's
   pushes. The latest push sits in the slot, and the row of pushes before it
   is oldest first. Nothing moves, as the design's D7 has it for the app
   (dev/design-2026-10-30/handover.md): a new push and its check moving on are
   put in place, and the mark of a review running is a still ring, in ink. */
.rr-latest { gap: var(--space-12); }
.rr-latest-name { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.rr-latest-now { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-12) var(--space-14); border: 1px solid var(--line); border-radius: var(--radius-8); background: var(--bg); color: var(--text); text-decoration: none; }
.rr-latest-now:hover { border-color: var(--line-strong); }
.rr-latest-where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); min-width: 0; font-size: 13px; }
.rr-latest-title { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.rr-latest-number { color: var(--text-3); font-weight: 400; }
.rr-latest-slot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-12); font-size: 13px; }
.rr-latest-commit { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--text-3); }
.rr-latest-commit code { font-size: 12.5px; color: var(--text); }
.rr-latest-state { display: inline-flex; align-items: center; gap: var(--space-6); min-width: 0; }
.rr-latest-state > span:not(.rr-latest-ring) { overflow-wrap: anywhere; }
.rr-latest-state .rr-icon { flex: none; }
.rr-latest-state.is-done .rr-icon { color: var(--fixed); }
.rr-latest-state.is-partly .rr-icon { color: var(--major); }
.rr-latest-state.is-failed .rr-icon { color: var(--crit); }
.rr-latest-state.is-skipped .rr-icon { color: var(--text-3); }
.rr-latest-state.is-running, .rr-latest-state.is-waiting { color: var(--text-2); }
.rr-latest-by { color: var(--text-3); font-variant-numeric: tabular-nums; }
.rr-latest-ring { flex: none; box-sizing: border-box; width: 12px; height: 12px; border: 1.5px solid var(--line-strong); border-top-color: var(--accent); border-right-color: var(--accent); border-radius: var(--radius-pill); }
.rr-latest-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.rr-latest-row-label { margin-right: var(--space-4); font-size: 12px; color: var(--text-3); }
.rr-pips { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.rr-pip { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text-3); }
.rr-pip.is-done { border-color: var(--fixed); background: var(--fixed); color: var(--surface); }
.rr-pip.is-partly { border-color: var(--major); background: var(--major-soft); color: var(--major); }
.rr-pip.is-failed { border-color: var(--crit); background: var(--crit-soft); color: var(--crit); }
.rr-pip.is-running, .rr-pip.is-waiting { border-color: var(--accent); color: var(--accent); }
.rr-pip .rr-latest-ring { width: 10px; height: 10px; }
.rr-pip .rr-icon { width: 10px; height: 10px; }
.rr-latest-foot { margin: 0; padding-top: var(--space-8); border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }