/* The client portal's look (0.4.0).

   RTGroup's brand, not Q's (Ian, 10 October 2026): colours from IanRVic/rtgroup-branding
   (assets/colour/rtgroup-palette.json, version 2.0) with that file's own dark values; IBM Plex Sans
   for everything, Source Serif 4 for page titles, as rtgroup.ca does. Signal colours (good, caution,
   bad) are RTGroup's in light; the dark values and the info blue are q-core's tested ones.

   Phone first (Ian, 15 October 2026: most clients will use it on a phone): one column, thumb-sized
   targets, 17px inputs so iOS never zooms, safe-area padding; wider screens only add room.

   Light and dark: the theme follows the device, and the footer's switch can fix it (the rtg_theme
   cookie, read by the server so there is no flash). Dark values are written twice, once for the device
   setting and once for the switch; portal/tests.py fails the build if the two blocks differ, if a light
   token has no dark value, or if any text pair falls below WCAG AA in either theme.

   Templates use these tokens and classes only, never a colour of their own. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Variable.b2c9031d9fd6.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Variable-Italic.ed273b4064f8.woff2") format("woff2");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Variable.e9192c2fe0a3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --rtg-app-tile-light: #F3F0F9;   /* behind an icon made only for light mode (0.31.0): the same in both themes */
  --rtg-app-tile-dark: #2E1A55;    /* behind an icon made only for dark mode */
  --rtg-page: #FBFAFD;
  --rtg-paper: #FFFFFF;
  --rtg-band: #F3F0F9;
  --rtg-border: #E4DFEF;
  --rtg-border-strong: #CFC6E4;
  --rtg-field: #8A7EA8;
  --rtg-ink: #191327;
  --rtg-slate: #5C5474;
  --rtg-purple: #523092;
  --rtg-purple-hover: #3E2372;
  --rtg-purple-soft: #EFEAF8;
  --rtg-orchid: #8D3092;
  --rtg-orchid-soft: #F8EAF9;
  --rtg-on-purple: #FFFFFF;
  --rtg-deep: #2E1A55;
  --rtg-on-deep: #FFFFFF;
  --rtg-good: #1C774C;
  --rtg-good-tint: #E6F4EC;
  --rtg-caution: #8F5400;
  --rtg-caution-tint: #FFF3DF;
  --rtg-bad: #B3261E;
  --rtg-bad-tint: #FBEAE9;
  --rtg-info: #1D5A86;
  --rtg-info-tint: #E6F1F9;
  --rtg-shadow: 0 1px 2px rgba(25, 19, 39, 0.05), 0 8px 24px -12px rgba(82, 48, 146, 0.22);
  --rtg-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --rtg-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --rtg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rtg-radius: 10px;
  --rtg-radius-card: 16px;
  --rtg-gutter: max(1rem, env(safe-area-inset-left));
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rtg-app-tile-light: #F3F0F9;
    --rtg-app-tile-dark: #2E1A55;
    --rtg-page: #120F1A;
    --rtg-paper: #1E1830;
    --rtg-band: #1A1526;
    --rtg-border: #302748;
    --rtg-border-strong: #453862;
    --rtg-field: #7A6BA0;
    --rtg-ink: #EFEBF7;
    --rtg-slate: #A99FC0;
    --rtg-purple: #A585EC;
    --rtg-purple-hover: #BFA6F7;
    --rtg-purple-soft: #241C3A;
    --rtg-orchid: #D07BD6;
    --rtg-orchid-soft: #2C1C33;
    --rtg-on-purple: #120F1A;
    --rtg-deep: #2E1A55;
    --rtg-on-deep: #FFFFFF;
    --rtg-good: #58D3A0;
    --rtg-good-tint: #122B23;
    --rtg-caution: #E7B465;
    --rtg-caution-tint: #2E2517;
    --rtg-bad: #F0907A;
    --rtg-bad-tint: #331914;
    --rtg-info: #79BCE6;
    --rtg-info-tint: #142631;
    --rtg-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
    --rtg-app-tile-light: #F3F0F9;
    --rtg-app-tile-dark: #2E1A55;
  --rtg-page: #120F1A;
  --rtg-paper: #1E1830;
  --rtg-band: #1A1526;
  --rtg-border: #302748;
  --rtg-border-strong: #453862;
  --rtg-field: #7A6BA0;
  --rtg-ink: #EFEBF7;
  --rtg-slate: #A99FC0;
  --rtg-purple: #A585EC;
  --rtg-purple-hover: #BFA6F7;
  --rtg-purple-soft: #241C3A;
  --rtg-orchid: #D07BD6;
  --rtg-orchid-soft: #2C1C33;
  --rtg-on-purple: #120F1A;
  --rtg-deep: #2E1A55;
  --rtg-on-deep: #FFFFFF;
  --rtg-good: #58D3A0;
  --rtg-good-tint: #122B23;
  --rtg-caution: #E7B465;
  --rtg-caution-tint: #2E2517;
  --rtg-bad: #F0907A;
  --rtg-bad-tint: #331914;
  --rtg-info: #79BCE6;
  --rtg-info-tint: #142631;
  --rtg-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* ---- Base ---- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0;
  background: var(--rtg-page);
  color: var(--rtg-ink);
  font-family: var(--rtg-font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--rtg-purple);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--rtg-purple-hover); }

:focus-visible {
  outline: 3px solid var(--rtg-purple);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 { color: var(--rtg-ink); margin: 0; }

strong { font-weight: 600; }

.rtg-skip {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: var(--rtg-paper);
  border-radius: var(--rtg-radius);
  z-index: 10;
}

.rtg-skip:focus { left: 0.5rem; }

/* ---- The shell ---- */

.rtg-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.rtg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: calc(0.9rem + env(safe-area-inset-top)) var(--rtg-gutter) 0.9rem;
}

.rtg-brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.rtg-logo { display: block; height: 1.75rem; width: auto; }
.rtg-logo-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rtg-logo-light { display: none; }
  :root:not([data-theme="light"]) .rtg-logo-dark { display: block; }
}

:root[data-theme="dark"] .rtg-logo-light { display: none; }
:root[data-theme="dark"] .rtg-logo-dark { display: block; }

.rtg-top-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.rtg-top-actions form { margin: 0; }

.rtg-frame { flex: 1; display: flex; flex-direction: column; width: 100%; }

.rtg-main {
  flex: 1;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.5rem var(--rtg-gutter) 3rem;
}

.rtg-foot {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem var(--rtg-gutter) calc(1.75rem + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  color: var(--rtg-slate);
  font-size: 0.875rem;
}

/* The Quartermaster lockup signs every client page (Ian, 16 October 2026). Its artwork carries its own
   colours, purple on light and white on dark, so the light and dark files swap like the header logo. */
.rtg-qm { height: 2rem; width: auto; }

.rtg-foot a, .rtg-foot button { color: var(--rtg-slate); }

/* RTGroup's number, to call (0.52.0, Settings, Clients): at the foot of the page wherever the desktop menu is not. */
.rtg-foot-call { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; text-decoration: none; }
.rtg-foot-call:hover .rtg-number { text-decoration: underline; }
.rtg-foot .rtg-foot-call { order: -1; flex-basis: 100%; }
.rtg-number { color: var(--rtg-ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Type ---- */

.rtg-title {
  font-family: var(--rtg-serif);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.75rem, 1.45rem + 1.5vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}

.rtg-lead {
  margin: 0 0 1.25rem;
  color: var(--rtg-slate);
  font-size: 1.0625rem;
  text-wrap: pretty;
}

.rtg-eyebrow {
  margin: 0 0 0.4rem;
  color: var(--rtg-orchid);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rtg-small { font-size: 0.9375rem; color: var(--rtg-slate); }
.rtg-after { margin: 1.5rem 0 0; text-align: center; }

/* ---- Cards ---- */

.rtg-card {
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border);
  border-radius: var(--rtg-radius-card);
  box-shadow: var(--rtg-shadow);
  padding: 1.5rem 1.25rem;
}

/* Sign-in pages: one card, near the top on a phone, centred on a tall screen. */
.rtg-auth .rtg-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1.5rem;
}

.rtg-auth .rtg-card { width: 100%; max-width: 27rem; }

/* ---- Forms ---- */

.rtg-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin: 0.5rem 0 0; }

.rtg-form label { font-weight: 600; font-size: 0.9375rem; }

.rtg-input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--rtg-ink);
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-field);
  border-radius: var(--rtg-radius);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.rtg-input:focus {
  outline: none;
  border-color: var(--rtg-purple);
  box-shadow: 0 0 0 3px var(--rtg-purple-soft);
}

.rtg-code {
  text-align: center;
  font-family: var(--rtg-mono);
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  font-variant-numeric: tabular-nums;
}

/* Verify your tech (0.63.0, links/): the passphrase, large enough to read back over the phone, words kept whole. */
.rtg-phrase {
  margin: 1rem 0;
  padding: 1rem;
  text-align: center;
  font-size: clamp(1.25rem, 1rem + 1.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: var(--rtg-ink);
  background: var(--rtg-purple-soft);
  border-radius: var(--rtg-radius);
}

.rtg-phrase-done { opacity: 0.55; }

.rtg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  font: inherit;
  font-weight: 600;
  color: var(--rtg-on-purple);
  background: var(--rtg-purple);
  border: 1px solid transparent;
  border-radius: var(--rtg-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, transform 60ms ease;
}

.rtg-button:hover { color: var(--rtg-on-purple); background: var(--rtg-purple-hover); }
.rtg-button:active { transform: translateY(1px); }
.rtg-form .rtg-button { width: 100%; margin-top: 0.5rem; }

.rtg-button-quiet {
  color: var(--rtg-purple);
  background: transparent;
  border-color: var(--rtg-border-strong);
}

.rtg-button-quiet:hover { color: var(--rtg-purple-hover); background: var(--rtg-purple-soft); }

/* Sign in with Microsoft (0.60.0): under the email form, a quiet full-width button with Microsoft's own mark, after a
   thin "or". */
.rtg-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0 1rem; color: var(--rtg-slate); font-size: 0.875rem; }
.rtg-or::before, .rtg-or::after { content: ""; flex: 1; border-top: 1px solid var(--rtg-border); }
.rtg-ms { width: 100%; color: var(--rtg-ink); }
.rtg-ms:hover { color: var(--rtg-ink); }
.rtg-ms img { flex: none; }

.rtg-text-button {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--rtg-purple);
  background: none;
  border: 0;
  border-radius: var(--rtg-radius);
  cursor: pointer;
}

.rtg-text-button:hover { background: var(--rtg-purple-soft); }

/* The theme switch (0.13.3): one quiet icon that shows the theme in use, a half circle for automatic, a sun for
   light, a moon for dark, and moves to the next on a click. Which icon shows follows data-theme on the page, which
   the server sets from the cookie, so it is right from the first paint. */
.rtg-theme {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--rtg-slate);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.rtg-theme[hidden] { display: none; }
.rtg-theme:hover { color: var(--rtg-purple); background: var(--rtg-purple-soft); }
.rtg-theme svg { display: none; width: 1.125rem; height: 1.125rem; }
:root:not([data-theme="light"]):not([data-theme="dark"]) .rtg-theme-auto,
:root[data-theme="light"] .rtg-theme-light,
:root[data-theme="dark"] .rtg-theme-dark { display: block; }

.rtg-choices { display: grid; gap: 0.6rem; margin-top: 0.5rem; }

.rtg-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  padding: 0.8rem 1rem;
  font: inherit;
  font-weight: 500;
  text-align: left;
  color: var(--rtg-ink);
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border-strong);
  border-radius: var(--rtg-radius);
  cursor: pointer;
}

.rtg-choice::after { content: "\203A"; color: var(--rtg-slate); font-size: 1.4rem; line-height: 1; }
.rtg-choice:hover { border-color: var(--rtg-purple); background: var(--rtg-purple-soft); }

/* ---- Notes: always a word as well as a colour ---- */

.rtg-note {
  margin: 0 0 1.25rem;
  padding: 0.8rem 1rem;
  border-radius: var(--rtg-radius);
  border-left: 3px solid currentColor;
}

.rtg-note.rtg-good { color: var(--rtg-good); background: var(--rtg-good-tint); }
.rtg-note.rtg-caution { color: var(--rtg-caution); background: var(--rtg-caution-tint); }
.rtg-note.rtg-bad { color: var(--rtg-bad); background: var(--rtg-bad-tint); }
.rtg-note.rtg-info { color: var(--rtg-info); background: var(--rtg-info-tint); }

/* ---- Home ---- */

.rtg-hello { margin: 1.25rem 0 1.75rem; }

.rtg-tiles { display: grid; gap: 1rem; }

.rtg-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  align-items: start;
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border);
  border-radius: var(--rtg-radius-card);
  box-shadow: var(--rtg-shadow);
  padding: 1.25rem;
  color: var(--rtg-ink);
  text-decoration: none;
}

a.rtg-tile:hover { border-color: var(--rtg-border-strong); color: var(--rtg-ink); }

.rtg-tile-icon {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  color: var(--rtg-purple);
  background: var(--rtg-purple-soft);
}

.rtg-tile-icon svg { width: 1.4rem; height: 1.4rem; }
.rtg-tile h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.rtg-tile p { margin: 0; color: var(--rtg-slate); }

.rtg-pill {
  justify-self: start;
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.15rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rtg-slate);
  background: var(--rtg-band);
  border-radius: 999px;
}

/* ---- Staff acting as a client (0.5.0): impossible to miss, the same in both themes ---- */

.rtg-staff-banner {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: calc(0.6rem + env(safe-area-inset-top)) var(--rtg-gutter) 0.6rem;
  color: var(--rtg-on-deep);
  background: var(--rtg-deep);
  font-size: 0.9375rem;
}

.rtg-staff-banner form { margin: 0; }
.rtg-staff-text { line-height: 1.45; }
.rtg-staff-small { font-size: 0.875rem; opacity: 0.85; }

.rtg-staff-banner button {
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: var(--rtg-deep);
  background: var(--rtg-on-deep);
  border: 0;
  border-radius: var(--rtg-radius);
  cursor: pointer;
}

/* ---- Long-form reading: articles ---- */

.rtg-prose { max-width: 42rem; margin: 1rem auto 0; line-height: 1.7; }
.rtg-prose h2 { font-family: var(--rtg-serif); font-weight: 600; font-size: 1.35rem; line-height: 1.25; margin: 2rem 0 0.5rem; }
.rtg-prose h3 { font-size: 1.0625rem; font-weight: 600; margin: 1.5rem 0 0.4rem; }
.rtg-prose p { margin: 0 0 1rem; }
.rtg-prose ul, .rtg-prose ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.rtg-prose li { margin: 0.25rem 0; }
.rtg-prose img { max-width: 100%; height: auto; border-radius: var(--rtg-radius); }
.rtg-prose iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--rtg-radius); }
.rtg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.25rem; border: 1px solid var(--rtg-border); border-radius: var(--rtg-radius); }
.rtg-table-wrap table { border-collapse: collapse; min-width: 100%; font-size: 0.9375rem; }
.rtg-table-wrap th, .rtg-table-wrap td { padding: 0.55rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rtg-border); }
.rtg-table-wrap th { background: var(--rtg-band); font-weight: 600; }
.rtg-table-wrap tr:last-child td { border-bottom: 0; }
.rtg-table-wrap td > :last-child, .rtg-table-wrap th > :last-child { margin-bottom: 0; }
.rtg-table-wrap caption { caption-side: bottom; text-align: left; padding: 0.5rem 0.8rem; color: var(--rtg-slate); font-size: 0.875rem; }
.rtg-prose h4 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.3rem; }
.rtg-prose a { overflow-wrap: anywhere; }
.rtg-prose blockquote { margin: 0 0 1rem; padding: 0.25rem 0 0.25rem 1rem; border-left: 3px solid var(--rtg-orchid); color: var(--rtg-slate); }
.rtg-prose blockquote > :last-child { margin-bottom: 0; }
.rtg-prose code { font-family: var(--rtg-mono); font-size: 0.9em; padding: 0.1em 0.3em; background: var(--rtg-band); border-radius: 4px; overflow-wrap: anywhere; }
.rtg-prose pre { margin: 0 0 1rem; padding: 0.85rem 1rem; overflow-x: auto; font-family: var(--rtg-mono); font-size: 0.875rem; line-height: 1.55; background: var(--rtg-band); border: 1px solid var(--rtg-border); border-radius: var(--rtg-radius); }
.rtg-prose pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.rtg-prose hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--rtg-border); }
.rtg-prose figure { margin: 0 0 1.25rem; }
.rtg-prose figcaption { margin-top: 0.4rem; color: var(--rtg-slate); font-size: 0.875rem; }
.rtg-prose sub, .rtg-prose sup { line-height: 0; }
.rtg-embed { margin: 0 0 1.25rem; }
.rtg-embed iframe { background: var(--rtg-band); }

/* What the editor's colour, size and alignment become (articles/clean.py): palette tokens, so an article
   follows the reader's light or dark theme. */
.rtg-c-slate { color: var(--rtg-slate); }
.rtg-c-purple { color: var(--rtg-purple); }
.rtg-c-orchid { color: var(--rtg-orchid); }
.rtg-c-good { color: var(--rtg-good); }
.rtg-c-caution { color: var(--rtg-caution); }
.rtg-c-bad { color: var(--rtg-bad); }
.rtg-c-info { color: var(--rtg-info); }
.rtg-bg-band { background: var(--rtg-band); }
.rtg-bg-purple-soft { background: var(--rtg-purple-soft); }
.rtg-bg-orchid-soft { background: var(--rtg-orchid-soft); }
.rtg-bg-good-tint { background: var(--rtg-good-tint); }
.rtg-bg-caution-tint { background: var(--rtg-caution-tint); }
.rtg-bg-bad-tint { background: var(--rtg-bad-tint); }
.rtg-bg-info-tint { background: var(--rtg-info-tint); }
.rtg-prose span[class*="rtg-bg-"], .rtg-prose strong[class*="rtg-bg-"], .rtg-prose em[class*="rtg-bg-"] { padding: 0.05em 0.25em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rtg-prose p[class*="rtg-bg-"], .rtg-prose div[class*="rtg-bg-"], .rtg-prose blockquote[class*="rtg-bg-"],
.rtg-prose ul[class*="rtg-bg-"], .rtg-prose ol[class*="rtg-bg-"] { padding: 0.75rem 1rem; border-radius: var(--rtg-radius); }
.rtg-prose ul[class*="rtg-bg-"], .rtg-prose ol[class*="rtg-bg-"] { padding-left: 2.3rem; }
/* A callout from GitHub's "> [!NOTE]" (0.16.0): a tinted box whose paragraphs sit snug inside it. */
.rtg-prose div[class*="rtg-bg-"] { margin: 0 0 1rem; }
.rtg-prose div[class*="rtg-bg-"] > :first-child { margin-top: 0; }
.rtg-prose div[class*="rtg-bg-"] > :last-child { margin-bottom: 0; }
.rtg-size-small { font-size: 0.875rem; }
.rtg-size-large { font-size: 1.125rem; }
.rtg-size-xlarge { font-size: 1.5rem; line-height: 1.35; }
.rtg-align-center { text-align: center; }
.rtg-align-right { text-align: right; }
.rtg-align-justify { text-align: justify; }

/* ---- The knowledge base (0.6.0) ---- */

.rtg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rtg-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.4rem;
  margin: 0.25rem 0 0;
  color: var(--rtg-slate);
  font-size: 0.9375rem;
}

.rtg-crumbs a { display: inline-block; padding: 0.4rem 0; color: var(--rtg-slate); text-decoration: none; }
.rtg-crumbs a:hover { color: var(--rtg-purple); text-decoration: underline; }
.rtg-crumbs + .rtg-hello { margin-top: 0.5rem; }

.rtg-search { display: flex; gap: 0.5rem; margin: 1rem 0 0; }
.rtg-search .rtg-input { flex: 1; min-width: 0; }
.rtg-search .rtg-button { flex: none; }

.rtg-section { margin: 2rem 0 0; }

.rtg-section-title {
  margin: 0 0 0.6rem;
  color: var(--rtg-slate);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rtg-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border);
  border-radius: var(--rtg-radius-card);
  box-shadow: var(--rtg-shadow);
  overflow: hidden;
}

.rtg-list li + li { border-top: 1px solid var(--rtg-border); }

.rtg-list-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.1rem 0.75rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.1rem;
  color: var(--rtg-ink);
  text-decoration: none;
}

.rtg-list-link::after { content: "\203A"; grid-column: 2; grid-row: 1 / span 3; color: var(--rtg-slate); font-size: 1.4rem; line-height: 1; }
.rtg-list-link:hover { color: var(--rtg-ink); background: var(--rtg-purple-soft); }
.rtg-list-title { grid-column: 1; font-weight: 500; line-height: 1.4; }
.rtg-list-summary { grid-column: 1; color: var(--rtg-slate); font-size: 0.9375rem; line-height: 1.45; }
.rtg-list-meta { grid-column: 1; color: var(--rtg-slate); font-size: 0.875rem; }

.rtg-empty { margin: 0; padding: 1rem 0; color: var(--rtg-slate); }

.rtg-article { margin-top: 0.75rem; }
.rtg-article > .rtg-title { margin-bottom: 0.35rem; }
.rtg-meta { margin: 0 0 1.75rem; color: var(--rtg-slate); font-size: 0.9375rem; }
.rtg-more { max-width: 42rem; margin: 3rem auto 0; }

/* ---- Tickets (0.9.0) ---- */

.rtg-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  max-width: 100%;
  margin: 0.5rem 0.5rem 0 0;
  padding: 0.25rem;
  background: var(--rtg-band);
  border-radius: 14px;
}

.rtg-segmented a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.35rem 1rem;
  color: var(--rtg-slate);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--rtg-radius);
}

.rtg-segmented a:hover { color: var(--rtg-ink); }
.rtg-segmented a[aria-current] { color: var(--rtg-ink); background: var(--rtg-paper); box-shadow: var(--rtg-shadow); }
.rtg-segmented-small a { min-height: 2.25rem; font-size: 0.9375rem; }

.rtg-status {
  display: inline-block;
  padding: 0 0.5rem;
  color: var(--rtg-info);
  background: var(--rtg-info-tint);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
}

.rtg-status-closed { color: var(--rtg-slate); background: var(--rtg-band); }

.rtg-pager { display: flex; justify-content: space-between; margin: 1rem 0 0; }
.rtg-pager a { padding: 0.6rem 0; }

.rtg-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem 1rem;
  margin: 1.25rem 0 0;
}

.rtg-facts dt { color: var(--rtg-slate); font-size: 0.8125rem; }
.rtg-facts dd { margin: 0.1rem 0 0; font-weight: 500; }

.rtg-thread { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }

.rtg-msg {
  padding: 0.9rem 1rem;
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border);
  border-radius: var(--rtg-radius-card);
}

.rtg-msg-ours { background: var(--rtg-purple-soft); border-color: transparent; }
.rtg-msg-meta { margin: 0 0 0.4rem; color: var(--rtg-slate); font-size: 0.875rem; }
.rtg-msg-meta strong { color: var(--rtg-ink); }
.rtg-msg-text { line-height: 1.6; overflow-wrap: anywhere; }
.rtg-pill-small { margin: 0; padding: 0 0.5rem; font-size: 0.75rem; vertical-align: 1px; }
.rtg-textarea { min-height: 7rem; line-height: 1.5; resize: vertical; }
.rtg-optional { color: var(--rtg-slate); font-weight: 400; }
.rtg-file { max-width: 100%; padding: 0.4rem 0; font: inherit; font-size: 0.9375rem; color: var(--rtg-slate); }
.rtg-file::file-selector-button {
  min-height: 2.75rem;
  margin-right: 0.75rem;
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--rtg-purple);
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border-strong);
  border-radius: var(--rtg-radius);
  cursor: pointer;
}
.rtg-act { padding: 1.25rem 1.1rem; }
.rtg-act .rtg-small { margin: 0.25rem 0 0; }
.rtg-pill-good { color: var(--rtg-good); background: var(--rtg-good-tint); }

/* ---- Wider screens ---- */

@media (min-width: 40rem) {
  .rtg-logo { height: 2rem; }
  .rtg-qm { height: 3rem; }
  .rtg-card { padding: 2.25rem 2.25rem 2rem; }
  .rtg-auth .rtg-main { padding-top: 4vh; }
  .rtg-tiles { grid-template-columns: 1fr 1fr; }
  .rtg-tile { padding: 1.5rem; }
}

/* ---- A desktop (0.15.0, Ian): wider, with the portal's menu down the left ----
   The page uses the width: up to 88rem, the menu in a 15rem column, the content beside it. An article reads at
   up to 50rem, wider than before but short enough to follow a line back. Phones are unchanged: no menu, the home
   page's tiles instead. */

.rtg-nav { display: none; }

@media (min-width: 64rem) {
  .rtg-top, .rtg-foot { max-width: 88rem; }
  .rtg-main { max-width: 72rem; }
  .rtg-prose, .rtg-more { max-width: 50rem; }

  /* From 0.52.0 (Ian, 20 October 2026: "the left column (with the menu) should scroll independantly from whatever is
     on the right") the menu is a column of its own down the whole left side, the logo at its top. It stays in view
     and scrolls on its own when it is taller than the window, while the page beside it scrolls as before. At its foot:
     who you are, RTGroup's number, the theme, Sign out, and the Quartermaster mark, so the page's own foot is not
     needed beside it. */
  .rtg-has-nav {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 3rem;
    width: 100%;
    max-width: 88rem;
    margin: 0 auto;
    padding: 0 var(--rtg-gutter);
  }
  .rtg-has-nav .rtg-frame-nav { display: contents; }
  .rtg-has-nav .rtg-top { grid-column: 2; grid-row: 1; max-width: none; margin: 0; padding-left: 0; padding-right: 0; justify-content: flex-end; }
  .rtg-has-nav .rtg-top .rtg-brand { display: none; }
  .rtg-has-nav .rtg-main { grid-column: 2; grid-row: 2; }
  .rtg-has-nav .rtg-foot { display: none; }
  .rtg-frame-nav .rtg-main { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
  .rtg-frame-nav .rtg-prose, .rtg-frame-nav .rtg-more { margin-left: 0; margin-right: 0; }

  .rtg-nav {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: calc(0.9rem + env(safe-area-inset-top)) 0.25rem calc(1rem + env(safe-area-inset-bottom)) 0;
  }
  .rtg-acting .rtg-nav { top: var(--rtg-banner-h, 4.25rem); height: calc(100dvh - var(--rtg-banner-h, 4.25rem)); }
  .rtg-nav-brand { display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.85rem; margin-bottom: 0.75rem; }
  .rtg-nav-links { display: flex; flex-direction: column; gap: 0.2rem; }
  .rtg-nav-foot { display: flex; flex-direction: column; gap: 0.2rem; margin-top: auto; padding-top: 1rem; }
  .rtg-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.5rem;
    padding: 0.4rem 0.85rem;
    color: var(--rtg-ink);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--rtg-radius);
  }
  button.rtg-nav-link { width: 100%; font: inherit; font-weight: 500; text-align: left; background: none; border: 0; cursor: pointer; }
  .rtg-nav-link svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--rtg-slate); }
  .rtg-nav-link:hover { background: var(--rtg-band); }
  .rtg-nav-on, .rtg-nav-on:hover { color: var(--rtg-purple); font-weight: 600; background: var(--rtg-purple-soft); }
  .rtg-nav-on svg { color: var(--rtg-purple); }
  .rtg-nav-who {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.4rem;
    padding: 0.75rem 0.85rem 0;
    border-top: 1px solid var(--rtg-border);
    font-size: 0.875rem;
  }
  .rtg-nav-name { color: var(--rtg-ink); font-weight: 600; }
  .rtg-nav-company { color: var(--rtg-slate); }
  .rtg-nav-switch { display: block; margin-top: 0.35rem; font-size: 0.875rem; }
  .rtg-nav-two { display: flex; flex-direction: column; line-height: 1.3; }
  .rtg-nav-small { color: var(--rtg-slate); font-size: 0.8125rem; font-weight: 400; }
  .rtg-nav-call .rtg-number { font-size: 1rem; }
  .rtg-nav-theme { color: var(--rtg-slate); font-size: 0.9375rem; }
  .rtg-nav-theme[hidden] { display: none; }
  .rtg-nav-theme svg { display: none; }
  .rtg-nav-out { margin: 0; }
  .rtg-nav-out .rtg-nav-link { color: var(--rtg-slate); font-size: 0.9375rem; }
  .rtg-nav-qm { display: block; padding: 0.6rem 0.85rem 0; }
  .rtg-nav-qm .rtg-qm { width: 100%; max-width: 10rem; height: auto; }
  .rtg-phone-only { display: none; }
  .rtg-form-page { max-width: 46rem; }
}

/* A request on a wide screen: the conversation on the left, what the client can do on the right. Two lists that
   sit one under the other on a phone (the knowledge base's Start here and Topics) sit side by side. */
@media (min-width: 80rem) {
  .rtg-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); column-gap: 2.5rem; align-items: start; }
  .rtg-request-split { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 2.5rem; align-items: start; }
  .rtg-request-side > .rtg-section:first-child { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Reading lists (0.19.0): numbered rows in RTG's order, a tick once read, and next and previous on an article
   opened from a list. Quiet: the number sits in a soft circle, the tick in the good tint. */
.rtg-steps .rtg-list-link { grid-template-columns: 2rem 1fr auto; column-gap: 0.85rem; }
.rtg-steps .rtg-list-link::after { grid-column: 3; grid-row: 1 / span 3; }
.rtg-steps .rtg-list-title, .rtg-steps .rtg-list-summary, .rtg-steps .rtg-list-meta { grid-column: 2; }
.rtg-step {
  grid-column: 1; grid-row: 1 / span 3; align-self: start;
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--rtg-purple-soft); color: var(--rtg-purple); font-size: 0.875rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rtg-step svg { width: 1.1rem; height: 1.1rem; }
.rtg-step-done { background: var(--rtg-good-tint); color: var(--rtg-good); }
.rtg-progress { margin: 0.75rem 0 0; color: var(--rtg-slate); font-size: 0.9375rem; }
.rtg-see-all { margin: 0.75rem 0 0; font-size: 0.9375rem; }
.rtg-home-list { margin-top: 2rem; }
.rtg-list-nav-links { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.rtg-list-nav-links a { max-width: 100%; overflow-wrap: anywhere; }
@media (min-width: 64rem) { .rtg-prose-width { max-width: 50rem; } }

/* ---- An article in Wikipedia's shape (0.21.0, Ian: "that feel", in RTGroup's own look) ----
   On a phone: the title and summary, At a glance as a small box, Contents to open, the article, then what it is
   filed under. On a wide screen the box and the contents sit in a column beside the article and stay in view while
   it scrolls; the contents mark the section being read (portal/article.js). Section headings carry a hairline rule,
   and an anchor lands a little below the top of the screen. */

.rtg-wiki { max-width: 42rem; margin: 0.75rem auto 0; }
.rtg-wiki-head .rtg-title { margin-bottom: 0.35rem; }
.rtg-wiki-lead { margin-bottom: 0.5rem; }
/* A GitHub draft shown while Drafts on the portal is on (0.24.0). */
.rtg-draft-mark {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.05rem 0.55rem;
  color: var(--rtg-caution);
  background: var(--rtg-caution-tint);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
}
/* Only management may read it (0.30.0): said quietly wherever the article shows. */
.rtg-for-mgmt {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  color: var(--rtg-purple);
  background: var(--rtg-purple-soft);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  vertical-align: 0.05em;
}
.rtg-qs-item .rtg-for-mgmt { align-self: flex-start; margin-top: 0.2rem; }
/* RTGroup's service terms (0.30.0): the service agreement comes first. */
.rtg-terms-note {
  margin: 0.6rem 0 1.25rem;
  padding: 0.5rem 0.8rem;
  color: var(--rtg-slate);
  background: var(--rtg-band);
  border-left: 3px solid var(--rtg-border-strong);
  border-radius: 0 var(--rtg-radius) var(--rtg-radius) 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.rtg-wiki-body { max-width: none; margin: 0; }
.rtg-wiki-body h2 { padding-bottom: 0.3rem; border-bottom: 1px solid var(--rtg-border); }
.rtg-wiki-body h2, .rtg-wiki-body h3, .rtg-wiki-body h4 { scroll-margin-top: 1rem; }
/* A link to another website opens in a new tab (0.23.1) and carries a small arrow, as Wikipedia marks one. The arrow
   is decoration: the link's hidden words tell a screen reader. */
.rtg-wiki-body a[target="_blank"]::after {
  content: "\2197";
  content: "\2197" / "";
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.8em;
  line-height: 1;
  text-decoration: none;
}

.rtg-box-title {
  margin: 0 0 0.5rem;
  color: var(--rtg-slate);
  font-family: var(--rtg-font);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rtg-glance {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border);
  border-radius: var(--rtg-radius);
}
.rtg-glance-rows { display: grid; gap: 0.4rem; margin: 0; }
.rtg-glance-rows div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 0.75rem; }
.rtg-glance-rows dt { color: var(--rtg-slate); font-size: 0.875rem; line-height: 1.5; }
.rtg-glance-rows dd { margin: 0; color: var(--rtg-ink); font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
/* The article's number (0.29.1): small but readable, for quoting to RTGroup. */
.rtg-glance-id {
  margin: 0.75rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rtg-border);
  color: var(--rtg-slate);
  font-size: 0.75rem;
  line-height: 1.4;
}
.rtg-glance-number { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; user-select: all; }

.rtg-toc ol { margin: 0; padding: 0; list-style: none; }
.rtg-toc a {
  display: block;
  padding: 0.35rem 0 0.35rem 0.75rem;
  border-left: 2px solid var(--rtg-border);
  color: var(--rtg-slate);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
}
.rtg-toc ol ol a { padding-left: 1.5rem; font-size: 0.875rem; }
.rtg-toc a:hover { color: var(--rtg-purple); border-left-color: var(--rtg-purple); }
.rtg-toc a[aria-current="true"] { color: var(--rtg-purple); border-left-color: var(--rtg-purple); font-weight: 600; }

/* On a desktop, Contents is the first thing at the top right (0.23.2, Ian): a box like At a glance, its sections
   numbered as Wikipedia once numbered them (2, then 2.1 for the parts of 2), with Top to go back to the title. */
.rtg-toc-rail {
  display: none;
  margin: 0 0 1rem;
  padding: 0.85rem 0.75rem 0.75rem 1rem;
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border);
  border-radius: var(--rtg-radius);
}
.rtg-toc-rail a { display: flex; gap: 0.4rem; }
.rtg-toc-rail a::before { flex: none; min-width: 1.1rem; color: var(--rtg-slate); font-weight: 400; font-variant-numeric: tabular-nums; }
.rtg-toc-rail > ol { counter-reset: rtg-s; }
.rtg-toc-rail > ol > li:not(.rtg-toc-top) { counter-increment: rtg-s; }
.rtg-toc-rail > ol > li:not(.rtg-toc-top) > a::before { content: counter(rtg-s); }
.rtg-toc-rail > ol > li > ol { counter-reset: rtg-t; }
.rtg-toc-rail li li { counter-increment: rtg-t; }
.rtg-toc-rail li li > a::before { content: counter(rtg-s) "." counter(rtg-t); min-width: 1.9rem; }
.rtg-toc-rail ol ol a { padding-left: 1.25rem; }

.rtg-toc-fold {
  margin: 0 0 1.25rem;
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border);
  border-radius: var(--rtg-radius);
}
.rtg-toc-fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  color: var(--rtg-ink);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.rtg-toc-fold summary::-webkit-details-marker { display: none; }
.rtg-toc-fold summary::after { content: "\203A"; color: var(--rtg-slate); font-size: 1.4rem; line-height: 1; transform: rotate(90deg); }
.rtg-toc-fold[open] summary::after { transform: rotate(-90deg); }
.rtg-toc-fold > ol { padding: 0 1rem 0.75rem; }
.rtg-toc-fold a { display: flex; align-items: center; min-height: 2.5rem; }

.rtg-filed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--rtg-band);
  border: 1px solid var(--rtg-border);
  border-radius: var(--rtg-radius);
  font-size: 0.9375rem;
}
.rtg-filed-label { margin-right: 0.25rem; color: var(--rtg-slate); font-weight: 600; }
.rtg-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.8rem;
  color: var(--rtg-ink);
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border-strong);
  border-radius: 999px;
  text-decoration: none;
}
a.rtg-chip:hover { color: var(--rtg-purple); border-color: var(--rtg-purple); }
.rtg-chip-main { color: var(--rtg-purple); background: var(--rtg-purple-soft); border-color: var(--rtg-purple-soft); font-weight: 600; }

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .rtg-glance-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}

/* A desktop: the article, and beside it a column at the top right holding Contents, then At a glance. */
@media (min-width: 64rem) {
  .rtg-frame-nav .rtg-wiki { margin-left: 0; margin-right: 0; }
  .rtg-wiki {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14rem;
    column-gap: 2rem;
    max-width: 68rem;
  }
  .rtg-wiki-head { grid-column: 1; grid-row: 1; }
  .rtg-wiki-body { grid-column: 1; grid-row: 2; }
  .rtg-filed { grid-column: 1; grid-row: 3; align-self: start; }
  .rtg-wiki-rail {
    grid-column: 2;
    grid-row: 1 / span 3;
    position: sticky;
    top: 1.5rem;
    align-self: start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding-top: 0.5rem;
  }
  .rtg-wiki-rail .rtg-glance-rows { gap: 0.55rem; }
  .rtg-wiki-rail .rtg-glance-rows div { grid-template-columns: minmax(0, 1fr); }
  .rtg-wiki-rail .rtg-glance-rows dt { font-size: 0.8125rem; line-height: 1.4; }
  .rtg-toc-rail { display: block; }
  .rtg-toc-fold { display: none; }
}

@media (min-width: 80rem) {
  .rtg-wiki { grid-template-columns: minmax(0, 1fr) 16rem; column-gap: 2.5rem; }
}

/* A link's preview (0.22.0): the other article's category, title and summary in a small card near the link, on
   hover or keyboard focus, on screens with a pointer. */
.rtg-peek {
  position: absolute;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: min(20rem, calc(100vw - 1rem));
  padding: 0.8rem 0.95rem;
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border-strong);
  border-radius: var(--rtg-radius);
  box-shadow: var(--rtg-shadow);
  pointer-events: none;
}
.rtg-peek[hidden] { display: none; }
.rtg-peek-category { color: var(--rtg-orchid); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.rtg-peek-title { color: var(--rtg-ink); font-size: 0.9875rem; line-height: 1.35; }
.rtg-peek-summary { color: var(--rtg-slate); font-size: 0.875rem; line-height: 1.45; }

/* ---- Request forms (0.25.0) ----
   The list: two kinds up front when there are both (something not working, asking for something), a search, then
   each kind's categories as lists. A form: one card, sections with a quiet title, questions spaced for a thumb,
   choices as large rows that take the accent when chosen, and follow-up questions set in under the answer that
   brought them, with a thin line to say whose they are. An error is always words under the question as well as
   the colour, with a summary at the top that links to each. */
.rtg-rf-kinds { display: grid; gap: 0.75rem; margin: 0 0 1.25rem; }
.rtg-rf-kind {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.1rem 0.9rem;
  align-items: center;
  padding: 1rem 1.1rem;
  color: var(--rtg-ink);
  text-decoration: none;
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border);
  border-radius: var(--rtg-radius-card);
  box-shadow: var(--rtg-shadow);
}
.rtg-rf-kind .rtg-tile-icon { grid-row: span 2; }
a.rtg-rf-kind:hover { color: var(--rtg-ink); border-color: var(--rtg-border-strong); }
.rtg-rf-kind-name { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.rtg-rf-kind-lead { color: var(--rtg-slate); font-size: 0.9375rem; line-height: 1.45; }
.rtg-rf-kinds[hidden], .rtg-rf-search[hidden], .rtg-rf-none[hidden], .rtg-rf-kindgroup[hidden], .rtg-rf-cat[hidden],
[data-rf-words][hidden] { display: none; }
.rtg-rf-search { margin: 0 0 0.25rem; }
.rtg-rf-none { padding-top: 1.25rem; }
.rtg-rf-kindgroup { scroll-margin-top: 1rem; }
.rtg-rf-search + .rtg-rf-none + .rtg-rf-kindgroup, .rtg-rf-search + .rtg-rf-kindgroup { margin-top: 1.5rem; }
.rtg-rf-group-title { margin: 0 0 0.85rem; font-family: var(--rtg-serif); font-size: 1.35rem; font-weight: 600; line-height: 1.25; }
.rtg-rf-cat + .rtg-rf-cat { margin-top: 1.25rem; }
/* Categories that fold (0.55.0): each a card whose heading opens it, with how many forms it holds and a chevron. A
   way with only a few forms keeps plain headings, everything showing. */
.rtg-rf-cat > summary { list-style: none; }
.rtg-rf-cat > summary::-webkit-details-marker { display: none; }
.rtg-rf-cat-head { display: flex; align-items: center; gap: 0.75rem; }
.rtg-rf-cat-name { flex: 1; min-width: 0; }
.rtg-rf-folded .rtg-rf-cat {
  background: var(--rtg-paper); border: 1px solid var(--rtg-border); border-radius: var(--rtg-radius-card);
  box-shadow: var(--rtg-shadow); overflow: hidden;
}
.rtg-rf-folded .rtg-rf-cat + .rtg-rf-cat { margin-top: 0.6rem; }
.rtg-rf-folded .rtg-rf-cat-head { min-height: 3.25rem; padding: 0.85rem 1.1rem; color: var(--rtg-ink); font-weight: 600;
  font-size: 1.0625rem; cursor: pointer; }
.rtg-rf-folded .rtg-rf-cat-head:hover { background: var(--rtg-purple-soft); }
.rtg-rf-folded .rtg-rf-cat-head:focus-visible { outline: 2px solid var(--rtg-purple); outline-offset: -2px; }
.rtg-rf-cat-count { display: inline-block; min-width: 1.75rem; padding: 0.1rem 0.5rem; border-radius: 999px;
  background: var(--rtg-band); color: var(--rtg-slate); font-size: 0.8125rem; font-weight: 600; text-align: center; }
.rtg-rf-chevron { display: block; flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--rtg-slate);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.rtg-rf-folded .rtg-rf-cat[open] .rtg-rf-chevron { transform: rotate(90deg); }
.rtg-rf-folded .rtg-rf-cat-list { border: 0; border-top: 1px solid var(--rtg-border); border-radius: 0; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .rtg-rf-chevron { transition: none; } }
.rtg-rf-elsewhere[hidden] { display: none; }
.rtg-rf-elsewhere { margin-top: 1.5rem; }
.rtg-rf-other { margin-top: 2.5rem; }

.rtg-rf-head .rtg-lead + .rtg-lead { margin-top: 0.6rem; }
.rtg-rf { gap: 0; }
.rtg-rf-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.rtg-rf-section[hidden], .rtg-rf-q[hidden], .rtg-rf-error[hidden], .rtg-rf-summary[hidden] { display: none; }
.rtg-rf-section-title {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--rtg-serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
}
.rtg-rf-section-title ~ * { clear: left; }
.rtg-rf-section:not(:first-of-type) { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rtg-border); }
.rtg-rf-section-text { margin: 0.35rem 0 0; color: var(--rtg-slate); line-height: 1.55; }

.rtg-rf-q { padding: 1.1rem 0 0; }
.rtg-rf-section > .rtg-rf-q:first-child { padding-top: 0; }
.rtg-rf-section-title + .rtg-rf-q, .rtg-rf-section-text + .rtg-rf-q { padding-top: 0.9rem; }
.rtg-rf .rtg-rf-label { display: block; margin: 0 0 0.45rem; padding: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.rtg-rf-help { margin: -0.2rem 0 0.55rem; color: var(--rtg-slate); font-size: 0.9375rem; line-height: 1.45; }
.rtg-rf-file .rtg-rf-help:last-of-type { margin: 0.2rem 0 0; font-size: 0.875rem; }
.rtg-rf-error { margin: 0.45rem 0 0; color: var(--rtg-bad); font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
.rtg-rf-bad .rtg-input { border-color: var(--rtg-bad); }
.rtg-rf-bad .rtg-rf-option { border-color: var(--rtg-bad); }
.rtg-rf-when { display: none; }

.rtg-rf-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.rtg-rf-group > legend { float: left; width: 100%; }
.rtg-rf-group > legend ~ * { clear: left; }
.rtg-rf-options { display: grid; gap: 0.5rem; }
@media (min-width: 40rem) {
  .rtg-rf-choice .rtg-rf-options:not(.rtg-rf-many) { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
.rtg-rf .rtg-rf-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.65rem 0.95rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--rtg-ink);
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border-strong);
  border-radius: var(--rtg-radius);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.rtg-rf .rtg-rf-option:hover { border-color: var(--rtg-purple); }
.rtg-rf .rtg-rf-option:has(input:checked) { border-color: var(--rtg-purple); background: var(--rtg-purple-soft); }
.rtg-rf .rtg-rf-option:has(input:focus-visible) { border-color: var(--rtg-purple); box-shadow: 0 0 0 3px var(--rtg-purple-soft); }
.rtg-rf-option input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--rtg-purple); }
.rtg-rf-option input:focus-visible { outline: none; }
.rtg-rf-tick > span { flex: 1 1 auto; }
.rtg-rf-words { margin: 0; padding: 0.85rem 1rem; color: var(--rtg-ink); background: var(--rtg-band); border-radius: var(--rtg-radius); line-height: 1.55; }
/* A question template's group, among a section's questions (0.28.0): a small heading over its questions, quieter
   than a section's title. */
.rtg-rf-heading { padding-top: 1.6rem; }
.rtg-rf-section > .rtg-rf-heading:first-child { padding-top: 0.25rem; }
.rtg-rf-subhead { margin: 0; color: var(--rtg-slate); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; }
.rtg-rf-heading .rtg-rf-section-text { margin-top: 0.2rem; }
.rtg-rf-heading + .rtg-rf-q { padding-top: 0.75rem; }

/* A follow-up sits in under the question that brought it, with a thin line down to say so. Its own spacing is
   padding, so the lines of follow-ups in a row join up. */
.rtg-rf-follow { margin-left: 0.55rem; padding-left: 1rem; border-left: 2px solid var(--rtg-border-strong); }
.rtg-rf-d2 { margin-left: 1.55rem; }
.rtg-rf-d3 { margin-left: 2.55rem; }
@media (min-width: 40rem) {
  .rtg-rf-follow { margin-left: 0.75rem; padding-left: 1.25rem; }
  .rtg-rf-d2 { margin-left: 2rem; }
  .rtg-rf-d3 { margin-left: 3.25rem; }
}
@keyframes rtg-rf-arrive { from { opacity: 0; transform: translateY(-0.3rem); } to { opacity: 1; transform: none; } }
.rtg-rf-arrive { animation: rtg-rf-arrive 180ms ease-out; }
@media (prefers-reduced-motion: reduce) { .rtg-rf-arrive { animation: none; } }

.rtg-rf-summary { scroll-margin-top: 1rem; }
.rtg-rf-summary:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.rtg-rf-summary-head { margin: 0; font-weight: 600; }
.rtg-rf-summary ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.rtg-rf-summary li { margin: 0.2rem 0; }
.rtg-rf-summary a { color: inherit; font-weight: 600; }

.rtg-rf-send { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rtg-border); }
.rtg-rf .rtg-rf-send .rtg-button { width: 100%; margin: 0; }
.rtg-rf-send .rtg-button[aria-disabled="true"], .rtg-rf-send .rtg-button:disabled { opacity: 0.7; cursor: progress; }
.rtg-rf-send .rtg-button:disabled { cursor: not-allowed; }
.rtg-rf-foot { margin: 0.75rem 0 0; color: var(--rtg-slate); font-size: 0.875rem; text-align: center; }
@media (min-width: 40rem) {
  .rtg-rf .rtg-rf-send .rtg-button { width: auto; min-width: 14rem; }
  .rtg-rf-foot { display: inline-block; margin: 0 0 0 1rem; text-align: left; }
}

/* ---- Two ways in (0.26.0) ----
   Report a problem and Ask for something: two buttons on the Requests page, the first two tiles on the home page,
   and just under Requests in the menu. Each request made in the portal carries a quiet Problem or Service label. */
.rtg-ways { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0; }
.rtg-ways .rtg-button { flex: 1 1 13rem; }
.rtg-button svg { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; }
@media (min-width: 40rem) { .rtg-ways .rtg-button { flex: 0 0 auto; } }
.rtg-kind {
  display: inline-block;
  padding: 0 0.45rem;
  color: var(--rtg-slate);
  background: var(--rtg-band);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: 1px;
}
.rtg-kind-service { color: var(--rtg-purple); background: var(--rtg-purple-soft); }
.rtg-tile-way .rtg-tile-icon { color: var(--rtg-on-purple); background: var(--rtg-purple); }
@media (min-width: 64rem) {
  .rtg-nav-way { padding-left: 1.6rem; font-size: 0.9375rem; }
  .rtg-nav-way svg { width: 1.1rem; height: 1.1rem; }
}

/* ---- Search as you type (0.27.0, Ian, 18 October 2026) ----
   A box at the top right of the knowledge base's pages from a tablet up, and a magnifying glass on a phone that opens
   the same box over the page. The best few articles drop down under the box as you type, the searched words marked
   in their titles. The knowledge base's own big box does the same. */
.rtg-qs { position: relative; }
.rtg-qs-open {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--rtg-ink);
  border-radius: 50%;
}
.rtg-qs-open:hover { color: var(--rtg-purple); background: var(--rtg-purple-soft); }
.rtg-qs-open svg { width: 1.375rem; height: 1.375rem; }
.rtg-qs-form { position: relative; display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.rtg-qs-top .rtg-qs-form { display: none; }
.rtg-qs-glass {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: -0.5625rem;
  color: var(--rtg-slate);
  pointer-events: none;
}
.rtg-qs-input {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem 0.5rem 2.5rem;
  font: inherit;
  font-size: 1rem;
  color: var(--rtg-ink);
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border-strong);
  border-radius: 999px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.rtg-qs-input::placeholder { color: var(--rtg-slate); opacity: 1; }
.rtg-qs-input:focus { outline: none; border-color: var(--rtg-purple); box-shadow: 0 0 0 3px var(--rtg-purple-soft); }
.rtg-qs-cancel {
  flex: none;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  font: inherit;
  font-weight: 500;
  color: var(--rtg-purple);
  background: none;
  border: 0;
  cursor: pointer;
}
.rtg-qs-cancel[hidden] { display: none; }
.rtg-qs-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  max-height: calc(100vh - 6rem);
  overflow: auto;
  overscroll-behavior: contain;
  text-align: left;
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border);
  border-radius: var(--rtg-radius-card);
  box-shadow: var(--rtg-shadow);
}
.rtg-qs-panel[hidden] { display: none; }
.rtg-qs-top .rtg-qs-panel { left: auto; width: min(30rem, calc(100vw - 2rem)); }
.rtg-qs-list { margin: 0; padding: 0.4rem; list-style: none; }
.rtg-qs-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.65rem 0.75rem;
  color: var(--rtg-ink);
  text-decoration: none;
  border-radius: var(--rtg-radius);
}
.rtg-qs-item:hover, .rtg-qs-item:focus { color: var(--rtg-ink); background: var(--rtg-purple-soft); outline: none; }
.rtg-qs-item:focus-visible, .rtg-qs-all:focus-visible { box-shadow: inset 0 0 0 2px var(--rtg-purple); }
.rtg-qs-category { color: var(--rtg-slate); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.rtg-qs-title { font-weight: 500; line-height: 1.35; }
.rtg-qs-title mark { color: var(--rtg-purple); font-weight: 700; background: none; }
.rtg-qs-summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--rtg-slate);
  font-size: 0.875rem;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.rtg-qs-all {
  position: sticky;
  bottom: 0;
  display: block;
  padding: 0.8rem 1.15rem;
  background: var(--rtg-paper);
  font-weight: 500;
  color: var(--rtg-purple);
  text-decoration: none;
  border-top: 1px solid var(--rtg-border);
  outline: none;
}
.rtg-qs-all:hover, .rtg-qs-all:focus { background: var(--rtg-purple-soft); }
.rtg-qs-none { margin: 0; padding: 1rem 1.15rem; color: var(--rtg-slate); }
/* One search (0.56.0): each section's heading in the box, and a line when a section cannot answer. */
.rtg-qs-head { margin: 0; padding: 0.75rem 1.15rem 0.1rem; color: var(--rtg-slate); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; }
.rtg-qs-head + .rtg-qs-list { padding-top: 0.2rem; }
.rtg-qs-list + .rtg-qs-head { border-top: 1px solid var(--rtg-border); }
.rtg-qs-note { margin: 0; padding: 0.3rem 1.15rem 0.6rem; color: var(--rtg-slate); font-size: 0.875rem; }
.rtg-search-section + .rtg-search-section { margin-top: 1.75rem; }
.rtg-qs-main .rtg-qs-panel { top: calc(100% + 0.4rem); }
/* One search for articles and policies on the home page (0.35.0, P7), between the greeting and the tiles. */
.rtg-home-search { margin: -0.5rem 0 1.5rem; }
.rtg-home-search .rtg-search { margin: 0; }

@media (min-width: 40rem) {
  .rtg-qs-top .rtg-qs-open { display: none; }
  .rtg-qs-top .rtg-qs-form { display: flex; width: 18rem; }
}
@media (min-width: 64rem) {
  .rtg-qs-top .rtg-qs-form { width: 21rem; }
}

/* A phone: the glass opens the search over the whole page, the box at the top and the articles under it, until
   Cancel. The page behind does not scroll meanwhile. */
@media (max-width: 39.99rem) {
  .rtg-qs-top.rtg-qs-on {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    padding: calc(0.9rem + env(safe-area-inset-top)) var(--rtg-gutter) 1rem;
    background: var(--rtg-page);
  }
  .rtg-qs-top.rtg-qs-on .rtg-qs-open { display: none; }
  .rtg-qs-top.rtg-qs-on .rtg-qs-form { display: flex; }
  .rtg-qs-top.rtg-qs-on .rtg-qs-panel { position: static; flex: 0 1 auto; width: auto; min-height: 0; max-height: none; margin-top: 0.75rem; }
  .rtg-qs-locked, .rtg-qs-locked body { overflow: hidden; }
}

/* ---- Applications (0.31.0) ---------------------------------------------------------------------------------
   Phone first: a plain list, an icon and a name per row, the tooltip as a second line. From 560 px the
   applications are tiles, unless the person chose the list (remembered in that browser). An icon with only a
   light version sits on a pale tile in dark mode, and one with only a dark version on a deep tile in light mode,
   so lettering never disappears into the page. */
.rtg-apps-head { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.rtg-apps-head .rtg-lead { margin-bottom: 0; }
.rtg-apps-tools { display: flex; gap: 0.5rem; align-items: center; }
.rtg-apps-find {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--rtg-ink);
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border-strong);
  border-radius: 999px;
}
.rtg-apps-find:focus { outline: 2px solid var(--rtg-purple); outline-offset: 1px; border-color: var(--rtg-purple); }
.rtg-apps-view { display: none; }
.rtg-apps-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--rtg-slate);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rtg-radius);
  cursor: pointer;
}
.rtg-apps-view-btn svg { width: 1.25rem; height: 1.25rem; }
.rtg-apps-view-btn[aria-pressed="true"] { color: var(--rtg-purple); background: var(--rtg-purple-soft); border-color: var(--rtg-border); }
.rtg-apps-view-btn:focus-visible { outline: 2px solid var(--rtg-purple); outline-offset: 1px; }
.rtg-apps-none { margin: 0 0 1rem; color: var(--rtg-slate); }
.rtg-apps-row { margin: 0 0 1.5rem; }
.rtg-apps-row .rtg-section-title { margin-bottom: 0.5rem; }
.rtg-app-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.rtg-app { position: relative; border-bottom: 1px solid var(--rtg-border); }
.rtg-app[hidden] { display: none; }
.rtg-app-link {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.5rem 3rem 0.5rem 0.25rem;
  color: var(--rtg-ink);
  text-decoration: none;
  border-radius: var(--rtg-radius);
}
.rtg-app-link:hover { background: var(--rtg-band); }
.rtg-app-link:focus-visible { outline: 2px solid var(--rtg-purple); outline-offset: -2px; }
.rtg-app-name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.rtg-app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6rem;
  overflow: hidden;
}
.rtg-app-img { display: block; width: 2.5rem; height: 2.5rem; object-fit: contain; }
.rtg-app-img-dark { display: none; }
.rtg-app-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--rtg-purple);
  background: var(--rtg-purple-soft);
  font-weight: 700;
}
/* An application with no icon yet (0.50.0): a quiet question mark rather than a guess at a logo. */
.rtg-app-missing { color: var(--rtg-slate); background: var(--rtg-band); font-size: 1.2rem; }
.rtg-app-icon-dark-only { background: var(--rtg-app-tile-dark); padding: 0.25rem; }
.rtg-app-icon-dark-only .rtg-app-img { width: 2rem; height: 2rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rtg-app-img-light { display: none; }
  :root:not([data-theme="light"]) .rtg-app-img-dark { display: block; }
  :root:not([data-theme="light"]) .rtg-app-icon-light-only { background: var(--rtg-app-tile-light); padding: 0.25rem; }
  :root:not([data-theme="light"]) .rtg-app-icon-light-only .rtg-app-img { width: 2rem; height: 2rem; }
  :root:not([data-theme="light"]) .rtg-app-icon-dark-only { background: transparent; padding: 0; }
  :root:not([data-theme="light"]) .rtg-app-icon-dark-only .rtg-app-img { width: 2.5rem; height: 2.5rem; }
}
:root[data-theme="dark"] .rtg-app-img-light { display: none; }
:root[data-theme="dark"] .rtg-app-img-dark { display: block; }
:root[data-theme="dark"] .rtg-app-icon-light-only { background: var(--rtg-app-tile-light); padding: 0.25rem; }
:root[data-theme="dark"] .rtg-app-icon-light-only .rtg-app-img { width: 2rem; height: 2rem; }
:root[data-theme="dark"] .rtg-app-icon-dark-only { background: transparent; padding: 0; }
:root[data-theme="dark"] .rtg-app-icon-dark-only .rtg-app-img { width: 2.5rem; height: 2.5rem; }
/* The tooltip: a second line in the list, a label on hover and focus on the tiles. */
.rtg-app-tip { display: block; margin: -0.35rem 3rem 0.5rem 3.5rem; color: var(--rtg-slate); font-size: 0.875rem; line-height: 1.4; }
.rtg-app-star-form { position: absolute; top: 0.4rem; right: 0.25rem; margin: 0; }
.rtg-app-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--rtg-field);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.rtg-app-star svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.rtg-app-star:hover { color: var(--rtg-purple); background: var(--rtg-purple-soft); }
.rtg-app-star:focus-visible { outline: 2px solid var(--rtg-purple); outline-offset: 1px; }
.rtg-app-star[aria-pressed="true"] { color: var(--rtg-orchid); }
.rtg-app-star[aria-pressed="true"] svg { fill: currentColor; }
.rtg-app-star:disabled { cursor: not-allowed; opacity: 0.6; }
.rtg-apps-hint, .rtg-apps-first { color: var(--rtg-slate); font-size: 0.9375rem; }
.rtg-apps-first { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rtg-border); }
.rtg-apps-first p { margin: 0 0 0.35rem; }
.rtg-apps-small { font-size: 0.8125rem; }
.rtg-apps-address { font-family: var(--rtg-mono); font-size: 0.8125rem; color: var(--rtg-ink); }

@media (min-width: 560px) {
  .rtg-apps-view { display: inline-flex; gap: 0.25rem; }
  .rtg-apps-view[hidden] { display: none; }
  .rtg-apps:not(.rtg-apps-as-list) .rtg-app-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; }
  .rtg-apps:not(.rtg-apps-as-list) .rtg-app { border: 1px solid var(--rtg-border); border-radius: var(--rtg-radius-card); background: var(--rtg-paper); }
  .rtg-apps:not(.rtg-apps-as-list) .rtg-app:hover { border-color: var(--rtg-border-strong); box-shadow: var(--rtg-shadow); }
  .rtg-apps:not(.rtg-apps-as-list) .rtg-app-link {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 0.6rem;
    min-height: 7.5rem;
    padding: 1.1rem 0.75rem 0.9rem;
    text-align: center;
    border-radius: var(--rtg-radius-card);
  }
  .rtg-apps:not(.rtg-apps-as-list) .rtg-app-name { font-size: 0.9375rem; }
  .rtg-apps:not(.rtg-apps-as-list) .rtg-app-star-form { top: 0.2rem; right: 0.2rem; }
  .rtg-apps:not(.rtg-apps-as-list) .rtg-app-star[aria-pressed="false"] { opacity: 0; }
  .rtg-apps:not(.rtg-apps-as-list) .rtg-app:hover .rtg-app-star,
  .rtg-apps:not(.rtg-apps-as-list) .rtg-app:focus-within .rtg-app-star { opacity: 1; }
  .rtg-apps:not(.rtg-apps-as-list) .rtg-app-tip {
    position: absolute;
    z-index: 5;
    top: calc(100% + 0.35rem);
    left: 50%;
    width: max-content;
    max-width: 16rem;
    margin: 0;
    padding: 0.45rem 0.65rem;
    color: var(--rtg-on-deep);
    background: var(--rtg-deep);
    border-radius: var(--rtg-radius);
    box-shadow: var(--rtg-shadow);
    font-size: 0.8125rem;
    text-align: left;
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 120ms ease 300ms, visibility 0s linear 420ms;
    pointer-events: none;
  }
  .rtg-apps:not(.rtg-apps-as-list) .rtg-app:hover .rtg-app-tip,
  .rtg-apps:not(.rtg-apps-as-list) .rtg-app-link:focus-visible + .rtg-app-tip { visibility: visible; opacity: 1; transition-delay: 300ms, 0s; }
}
@media (hover: none) {
  .rtg-apps:not(.rtg-apps-as-list) .rtg-app-star[aria-pressed="false"] { opacity: 1; }
}
@media (min-width: 768px) {
  .rtg-apps-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .rtg-apps-tools { flex: 0 1 26rem; }
}

/* Which organisation a request is for (0.33.0), for someone with more than one. */
.rtg-for-org {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.8rem;
  color: var(--rtg-ink);
  background: var(--rtg-purple-soft);
  border-radius: var(--rtg-radius);
  font-size: 0.9375rem;
}
.rtg-for-org { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }

/* Policies (0.34.0): the history of changes, and a clean page on paper or as a PDF. */
.rtg-policy-history { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rtg-border); }
.rtg-policy-history ul { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--rtg-slate); line-height: 1.6; }
.rtg-policy-when { color: var(--rtg-ink); font-weight: 600; }
.rtg-print { margin-left: 0.5rem; }
@media print {
  .rtg-printable .rtg-nav, .rtg-printable .rtg-top, .rtg-printable .rtg-crumbs, .rtg-printable .rtg-staff-banner,
  .rtg-printable .rtg-toc, .rtg-printable .rtg-print, .rtg-printable .rtg-skip, .rtg-printable footer.rtg-foot { display: none !important; }
  .rtg-printable { background: #fff; color: #000; }
  .rtg-printable .rtg-frame { display: block; }
  .rtg-printable .rtg-wiki { max-width: none; }
  .rtg-printable .rtg-glance { break-inside: avoid; border-color: #000; }
  .rtg-printable a { color: #000; text-decoration: underline; }
}

/* ---- Banners (0.36.0, Ian's B1 to B4) ----
   A short notice across the top of the sign-in page, the home page and the two ways in, phone first. The words are
   ink on the style's tint, with the style's colour as a strong left edge, in both themes. */
.rtg-banners { display: grid; gap: 0.75rem; margin: 0.25rem 0 1.25rem; }
.rtg-auth .rtg-banners { width: 100%; max-width: 27rem; margin-bottom: 1rem; }
.rtg-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.85rem 0.6rem 0.85rem 1rem;
  color: var(--rtg-ink);
  background: var(--rtg-info-tint);
  border-left: 4px solid var(--rtg-info);
  border-radius: var(--rtg-radius);
}
.rtg-banner[hidden] { display: none; }
.rtg-banner-good { background: var(--rtg-good-tint); border-left-color: var(--rtg-good); }
.rtg-banner-warning { background: var(--rtg-caution-tint); border-left-color: var(--rtg-caution); }
.rtg-banner-alert { background: var(--rtg-bad-tint); border-left-color: var(--rtg-bad); }
.rtg-banner-words { flex: 1; min-width: 0; }
.rtg-banner-title { margin: 0; font-weight: 600; line-height: 1.4; }
.rtg-banner-text { margin: 0.2rem 0 0; font-size: 0.9375rem; line-height: 1.5; }
.rtg-banner-more { margin: 0.4rem 0 0; font-size: 0.9375rem; }
.rtg-banner-more a { color: var(--rtg-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }
.rtg-banner-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: -0.4rem 0 -0.4rem 0;
  padding: 0;
  color: var(--rtg-ink);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.rtg-banner-close[hidden] { display: none; }
.rtg-banner-close:hover { background: var(--rtg-paper); }
.rtg-banner-close:focus-visible { outline: 2px solid var(--rtg-purple); outline-offset: 1px; }
.rtg-banner-close svg { width: 1.1rem; height: 1.1rem; }
@media print { .rtg-banners { display: none; } }

/* ---- A policy's quick read (0.40.0) ----
   The unofficial short version, above the policy: a quiet band with a strong left edge. Printing the policy leaves it
   out; Print the quick read prints it alone, with the title and version above it. */
.rtg-quick {
  margin: 0.75rem 0 1.5rem;
  padding: 0.9rem 1rem 0.6rem;
  background: var(--rtg-band);
  border-left: 4px solid var(--rtg-purple);
  border-radius: 0 var(--rtg-radius) var(--rtg-radius) 0;
}
.rtg-quick-title { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rtg-purple); }
.rtg-quick-note { margin: 0.25rem 0 0.6rem; color: var(--rtg-slate); font-size: 0.875rem; line-height: 1.45; }
.rtg-quick-list { margin: 0; padding-left: 1.15rem; color: var(--rtg-ink); line-height: 1.55; }
.rtg-quick-list li { margin: 0 0 0.45rem; }
@media (min-width: 64rem) {
  .rtg-policy .rtg-quick { grid-column: 1; grid-row: 2; }
  .rtg-policy .rtg-quick ~ .rtg-wiki-body { grid-row: 3; }
  .rtg-policy .rtg-quick ~ .rtg-policy-history { grid-column: 1; grid-row: 4; }
  .rtg-policy .rtg-wiki-rail { grid-row: 1 / span 4; }
}
@media print {
  html:not(.rtg-print-quick) .rtg-quick { display: none; }
  .rtg-print-quick .rtg-wiki-body, .rtg-print-quick .rtg-wiki-rail, .rtg-print-quick .rtg-policy-history,
  .rtg-print-quick .rtg-toc-fold { display: none !important; }
  .rtg-print-quick .rtg-quick { background: #fff; border-left-color: #000; }
  .rtg-print-quick .rtg-quick-title, .rtg-print-quick .rtg-quick-note, .rtg-print-quick .rtg-quick-list { color: #000; }
}

/* ---- Notices, service updates and Waiting for you (0.42.0) ----
   A service update's state is a pill in the status colours: investigating and identified are a caution, monitoring
   is information, resolved is good. Happening now and Waiting for you sit at the top of the home page, quiet bands
   with a strong left edge, phone first. */
.rtg-svc-investigating, .rtg-svc-identified { color: var(--rtg-caution); background: var(--rtg-caution-tint); }
.rtg-svc-monitoring { color: var(--rtg-info); background: var(--rtg-info-tint); }
.rtg-svc-resolved { color: var(--rtg-good); background: var(--rtg-good-tint); }
.rtg-svc-state { margin: 0.25rem 0 0; }
.rtg-svc-state .rtg-pill { margin: 0; }
.rtg-svc-timeline { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.rtg-svc-timeline li { padding: 0.9rem 1rem; background: var(--rtg-paper); border: 1px solid var(--rtg-border); border-radius: var(--rtg-radius); }
.rtg-notice-text { max-width: 42rem; line-height: 1.65; overflow-wrap: anywhere; }
.rtg-notice-text p { margin: 0 0 0.9rem; }
.rtg-alerts { display: grid; gap: 0.75rem; margin: 0 0 1.5rem; }
.rtg-alert {
  padding: 0.85rem 1rem;
  background: var(--rtg-band);
  border-left: 4px solid var(--rtg-purple);
  border-radius: 0 var(--rtg-radius) var(--rtg-radius) 0;
}
.rtg-alert-now { border-left-color: var(--rtg-caution); }
.rtg-alert-todo { border-left-color: var(--rtg-orchid); }
.rtg-alert-title { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rtg-slate); }
.rtg-alert-list { display: grid; gap: 0.6rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.rtg-alert-list a { font-weight: 600; color: var(--rtg-ink); text-decoration: none; }
.rtg-alert-list a:hover { color: var(--rtg-purple); text-decoration: underline; }
.rtg-alert-list p { margin: 0.15rem 0 0; color: var(--rtg-slate); font-size: 0.9375rem; line-height: 1.45; }
.rtg-alert-list .rtg-pill { margin: 0 0.35rem 0 0; }

/* ---- Agreements (0.43.0) ----
   To sign is a caution pill and Cancelled or Device returned a quiet one; the signing box is a quiet band with the
   name typed in the serif, as a signature. Phone first: the form is full width. */
.rtg-agr-waiting { color: var(--rtg-caution); background: var(--rtg-caution-tint); }
.rtg-agr-ended { color: var(--rtg-slate); background: var(--rtg-band); }
.rtg-agr-actions { margin: 1rem 0 0; }
/* Who the agreement is between, RTGroup administering only (0.48.0). */
.rtg-agr-parties { margin: .4rem 0 1rem; padding: .7rem .9rem; max-width: 46rem; background: var(--rtg-band); border-left: 3px solid var(--rtg-purple); border-radius: 0 var(--rtg-radius) var(--rtg-radius) 0; color: var(--rtg-ink); }
/* An agreement's serial reads as a code: even figures, a little space between characters (0.49.0). */
.rtg-agr-serial { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.rtg-agr-words { margin: 1.5rem 0 0; padding: 1rem 1.1rem; max-width: 46rem; background: var(--rtg-paper); border: 1px solid var(--rtg-border); border-radius: var(--rtg-radius); }
.rtg-agr-sign { margin: 1.5rem 0 0; padding: 1rem 1.1rem; max-width: 46rem; background: var(--rtg-band); border-left: 4px solid var(--rtg-purple); border-radius: 0 var(--rtg-radius) var(--rtg-radius) 0; }
.rtg-agr-sign .rtg-section-title { margin-top: 0; }
.rtg-agr-name { font-family: var(--rtg-serif); font-style: italic; font-size: 1.25rem; }
@media (min-width: 40rem) { .rtg-agr-sign .rtg-form .rtg-button { width: auto; justify-self: start; } }

/* ---- Client links: detail checks (0.64.0, links/templates/links/verify/details.html) ----
   One card per phone number, so a thumb has a whole card to hit and "Call me here first" sits under its own number.
   A field that could not be accepted says why in words under it, and its card gets a red edge as well. */
.rtg-check { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.75rem 0 0; font-weight: 400; cursor: pointer; }
.rtg-check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--rtg-purple); }
.rtg-field-error { margin: 0.4rem 0 0; color: var(--rtg-bad); font-size: 0.9375rem; font-weight: 600; }
.rtg-dc-bad { border-color: var(--rtg-bad); }
.rtg-dc-departed { background: var(--rtg-caution-tint); }
.rtg-dc-departed [data-departed-who] { margin-top: 0.75rem; }
.rtg-dc-phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.9rem; }
.rtg-dc-phone { margin: 0; }
.rtg-dc-phone:has(input[type="radio"]:checked) { border-color: var(--rtg-purple); box-shadow: inset 0 0 0 1px var(--rtg-purple); }
.rtg-dc-numline { display: flex; gap: 0.5rem; }
.rtg-dc-numline .rtg-input { flex: 1 1 auto; min-width: 0; }
.rtg-dc-numline .rtg-dc-ext { flex: 0 0 5rem; text-align: center; }
.rtg-dc .rtg-form .rtg-button { margin-top: 0.75rem; }
[data-details-body][hidden], [data-departed-who][hidden] { display: none; }

/* Confirmations (0.65.0): green to approve, red to decline, as in Q. */
.rtg-button-approve { background: var(--rtg-good); }
.rtg-button-approve:hover { background: var(--rtg-good); filter: brightness(1.08); }
.rtg-button-decline { background: var(--rtg-bad); }
.rtg-button-decline:hover { background: var(--rtg-bad); filter: brightness(1.08); }

/* ---- Cybersecurity Training (0.66.0, portal/templates/portal/home.html) ----
   A card on home with the person's own figures across the top. Phone first: two figures a row, four across from
   40rem. A good figure gets the good tint, one that needs them gets the caution tint; the rest stay quiet. */
.rtg-training {
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  background: var(--rtg-paper);
  border: 1px solid var(--rtg-border);
  border-radius: var(--rtg-radius-card);
  box-shadow: var(--rtg-shadow);
}
.rtg-training-head { display: flex; gap: 1rem; align-items: center; color: var(--rtg-ink); text-decoration: none; }
a.rtg-training-head:hover { color: var(--rtg-ink); }
a.rtg-training-head:hover .rtg-training-title { color: var(--rtg-purple); text-decoration: underline; }
.rtg-training-head .rtg-tile-icon { flex: none; }
.rtg-training-title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.rtg-training-lead { margin: 0.15rem 0 0; color: var(--rtg-slate); font-size: 0.9375rem; }
.rtg-training-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0 0; }
.rtg-training-stat { padding: 0.75rem 0.85rem; background: var(--rtg-band); border-radius: var(--rtg-radius); min-width: 0; }
.rtg-training-stat dt { color: var(--rtg-slate); font-size: 0.8125rem; font-weight: 600; }
.rtg-training-stat dd { margin: 0; }
.rtg-training-value { color: var(--rtg-ink); font-size: 1.5rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rtg-training-stat .rtg-training-value { margin-top: 0.2rem; }
.rtg-training-note { color: var(--rtg-slate); font-size: 0.8125rem; line-height: 1.35; }
.rtg-training-good { background: var(--rtg-good-tint); }
.rtg-training-good .rtg-training-value { color: var(--rtg-good); }
.rtg-training-caution { background: var(--rtg-caution-tint); }
.rtg-training-caution .rtg-training-value { color: var(--rtg-caution); }
@media (min-width: 40rem) { .rtg-training-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- The training page (0.67.0, portal/templates/portal/training.html) ----
   Complete your training is a quiet band with the to-do edge, as To do on home. The people under a manager are a list
   of cards: who on top, then three figures in a row, so a phone never scrolls sideways. A figure that needs them is
   in the caution colour, a good one in the good colour; the rest stay ink. */
.rtg-training-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; }
.rtg-training-finish {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--rtg-band);
  border-left: 4px solid var(--rtg-orchid);
  border-radius: 0 var(--rtg-radius) var(--rtg-radius) 0;
}
.rtg-training-finish p { margin: 0.35rem 0 0; color: var(--rtg-slate); }
.rtg-training-finish .rtg-training-actions { margin-top: 0.85rem; }
.rtg-team-lead { margin: 0 0 0.75rem; color: var(--rtg-slate); font-size: 0.9375rem; }
.rtg-team-heading { margin: 1.1rem 0 0.5rem; font-size: 1rem; font-weight: 600; }
.rtg-team-count { margin-left: 0.35rem; color: var(--rtg-slate); font-weight: 500; font-variant-numeric: tabular-nums; }
.rtg-team-row { display: grid; gap: 0.6rem; padding: 0.85rem 1.1rem; }
.rtg-team-who { display: grid; gap: 0.1rem; min-width: 0; }
.rtg-team-who strong { font-weight: 600; overflow-wrap: anywhere; }
.rtg-team-who span { color: var(--rtg-slate); font-size: 0.875rem; overflow-wrap: anywhere; }
.rtg-team-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.rtg-team-figs dt { color: var(--rtg-slate); font-size: 0.75rem; font-weight: 600; }
.rtg-team-figs dd { margin: 0; color: var(--rtg-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rtg-team-caution dd { color: var(--rtg-caution); }
.rtg-team-good dd { color: var(--rtg-good); }
@media (min-width: 40rem) {
  .rtg-team-row { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: center; }
}

/* The training page's PDF button (0.69.0): a sheet of paper with its corner turned down and PDF on it, beside the
   title. Ian: "a button that is a piece of paper with the corner turned down that says "PDF" on it". */
.rtg-training-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.rtg-pdf {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 4rem;
  margin-top: 0.25rem;
  color: var(--rtg-purple);
  border-radius: var(--rtg-radius);
  text-decoration: none;
}
.rtg-pdf svg { width: 2.9rem; height: 3.5rem; overflow: visible; }
.rtg-pdf-sheet { fill: var(--rtg-paper); stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.rtg-pdf-fold { fill: var(--rtg-purple-soft); stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.rtg-pdf text { fill: currentColor; font-family: var(--rtg-font); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.rtg-pdf:hover { color: var(--rtg-purple-hover); }
.rtg-pdf:hover .rtg-pdf-sheet { fill: var(--rtg-purple-soft); }