@font-face {
  font-family: "Rubik";
  src: url("/assets/Rubik-Regular-981fe1c4.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("/assets/Rubik-Medium-67692fba.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("/assets/Rubik-Bold-eb329bc3.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

@font-face {
  font-family: "Fira Mono";
  src: url("/assets/FiraMono-Regular-7d26e5df.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Fira Mono";
  src: url("/assets/FiraMono-Medium-ecb17c30.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Fira Mono";
  src: url("/assets/FiraMono-Bold-1e6c4d22.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --of-red: #f40a14;
  --of-action-red: #e10912;
  --of-action-red-hover: #d50810;
  --of-black: #0b0b0b;
  --of-grey: #787878;
  --of-white: #ffffff;
  --content-width: 1180px;
  --reading-width: 760px;
  --form-width: 900px;
  --radius-small: 4px;
  --radius-medium: 6px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --transition-fast: 140ms;
  --transition-normal: 180ms;

  --page-background: #f5f5f3;
  --surface-primary: #ffffff;
  --surface-secondary: #eeeeec;
  --surface-raised: #ffffff;
  --surface-inverse: #0b0b0b;
  --text-primary: #0b0b0b;
  --text-secondary: #565656;
  --text-muted: #707070;
  --text-inverse: #ffffff;
  --border-primary: #d8d8d8;
  --border-strong: #a6a6a6;
  --border-inverse: #2b2b2b;
  --link-colour: #b9070e;
  --link-hover-colour: #8f050a;
  --input-background: #ffffff;
  --input-border: #a6a6a6;
  --input-text: #0b0b0b;
  --input-placeholder: #707070;
  --code-background: #0b0b0b;
  --code-text: #f4f4f4;
  --inline-code-background: #e8e8e5;
  --inline-code-text: #0b0b0b;
  --table-header-background: #eeeeec;
  --table-row-hover: #f0f0ed;
  --table-stripe: #fafaf8;
  --shadow-colour: rgba(11, 11, 11, .08);

  /* Compatibility aliases for established component classes. */
  --bg: var(--page-background);
  --paper: var(--surface-secondary);
  --panel: var(--surface-primary);
  --nav: var(--of-black);
  --nav-2: #181818;
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --quiet: var(--text-muted);
  --line: var(--border-primary);
  --line-strong: var(--border-strong);
  --blue: var(--of-action-red);
  --blue-dark: var(--link-colour);
  --cyan: var(--of-red);
  --green: #19764d;
  --red: #b9070e;
  --public-alt: var(--surface-primary);
  --public-nav-active: var(--surface-secondary);
  --public-callout: #fff0f0;
  --public-captcha: var(--surface-secondary);
  --public-disclaimer: var(--surface-secondary);
  --shadow: 0 10px 28px var(--shadow-colour);
  font-family: "Rubik", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
}

body.authenticated-page.theme-light { color-scheme: light; }

body.authenticated-page.theme-dark {
  color-scheme: dark;
  --page-background: #0b0b0b;
  --surface-primary: #151515;
  --surface-secondary: #1c1c1c;
  --surface-raised: #202020;
  --surface-inverse: #ffffff;
  --text-primary: #f5f5f3;
  --text-secondary: #c7c7c3;
  --text-muted: #9b9b97;
  --text-inverse: #0b0b0b;
  --border-primary: #333333;
  --border-strong: #555555;
  --border-inverse: #d8d8d8;
  --link-colour: #ff5b62;
  --link-hover-colour: #ff858a;
  --input-background: #111111;
  --input-border: #555555;
  --input-text: #ffffff;
  --input-placeholder: #9b9b97;
  --inline-code-background: #292929;
  --inline-code-text: #ffffff;
  --table-header-background: #202020;
  --table-row-hover: #242424;
  --table-stripe: #181818;
  --shadow-colour: rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: dark) {
  body.authenticated-page.theme-auto,
  body.public-body {
    color-scheme: dark;
    --page-background: #0b0b0b;
    --surface-primary: #151515;
    --surface-secondary: #1c1c1c;
    --surface-raised: #202020;
    --surface-inverse: #ffffff;
    --text-primary: #f5f5f3;
    --text-secondary: #c7c7c3;
    --text-muted: #9b9b97;
    --text-inverse: #0b0b0b;
    --border-primary: #333333;
    --border-strong: #555555;
    --border-inverse: #d8d8d8;
    --link-colour: #ff5b62;
    --link-hover-colour: #ff858a;
    --input-background: #111111;
    --input-border: #555555;
    --input-text: #ffffff;
    --input-placeholder: #9b9b97;
    --inline-code-background: #292929;
    --inline-code-text: #ffffff;
    --table-header-background: #202020;
    --table-row-hover: #242424;
    --table-stripe: #181818;
    --shadow-colour: rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(7, 16, 21, .04) 1px, transparent 1px),
    linear-gradient(rgba(7, 16, 21, .035) 1px, transparent 1px),
    var(--bg);
  background-size: 42px 42px;
  color: var(--text);
}

a { color: var(--blue-dark); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }

button, .button, input, select, textarea { font: inherit; }

button, .button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  padding: 8px 13px;
  cursor: pointer;
  font-weight: 700;
}

button:hover, .button:hover, input[type="submit"]:hover { border-color: var(--blue); text-decoration: none; }

.primary, input.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.primary:hover, input.primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

.danger-button, .danger-link, button.danger, .button.danger, input.blocked {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

input.blocked {
  opacity: 1;
  cursor: not-allowed;
}

.shell {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar-collapse-control {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

aside {
  background: #0b0b0b;
  color: #dce8ef;
  padding: 18px 14px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-right: 4px solid var(--cyan);
}

.sidebar-toggle {
  display: inline-flex;
  justify-content: center;
  margin: 0 0 12px;
  padding: 6px 9px;
  width: fit-content;
  border: 1px solid rgba(220, 232, 239, .28);
  border-radius: 4px;
  color: #dbe8f0;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.sidebar-toggle:hover {
  border-color: var(--cyan);
  background: var(--nav-2);
}

.sidebar-toggle-closed { display: none; }

.shell:has(.sidebar-collapse-control:checked) {
  grid-template-columns: 86px minmax(0, 1fr);
}

.shell:has(.sidebar-collapse-control:checked) aside {
  padding-inline: 10px;
}

.shell:has(.sidebar-collapse-control:checked) .brand img {
  width: 54px;
  max-width: none;
  object-fit: cover;
  object-position: left center;
}

.shell:has(.sidebar-collapse-control:checked) nav a,
.shell:has(.sidebar-collapse-control:checked) .session a,
.shell:has(.sidebar-collapse-control:checked) .session button,
.shell:has(.sidebar-collapse-control:checked) .session span:not(.theme-toggle-group),
.shell:has(.sidebar-collapse-control:checked) .nav-section,
.shell:has(.sidebar-collapse-control:checked) .theme-toggle-group {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  max-width: 58px;
  padding-inline: 6px;
  font-size: 0;
}

.shell:has(.sidebar-collapse-control:checked) nav a::first-letter,
.shell:has(.sidebar-collapse-control:checked) .session a::first-letter,
.shell:has(.sidebar-collapse-control:checked) .session button::first-letter {
  font-size: 14px;
}

.shell:has(.sidebar-collapse-control:checked) .sidebar-toggle-open { display: none; }
.shell:has(.sidebar-collapse-control:checked) .sidebar-toggle-closed { display: inline; }

.brand {
  display: block;
  width: fit-content;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 2px 0 28px;
}

.brand img { display: block; width: 220px; max-width: 100%; height: auto; }
.login-brand img { display: block; width: 190px; max-width: 100%; height: auto; }

nav {
  display: grid;
  align-content: start;
  gap: 5px;
  border-top: 1px solid rgba(220, 232, 239, .18);
  padding-top: 14px;
}

nav a, .session span {
  color: #dbe8f0;
  padding: 10px 11px;
  border-left: 3px solid transparent;
  font-size: 14px;
}

.nav-section {
  color: #7fb2cb;
  font-size: 11px;
  font-weight: 900;
  margin: 16px 11px 4px;
  text-transform: uppercase;
}

nav a:hover {
  background: var(--nav-2);
  border-left-color: var(--cyan);
  text-decoration: none;
}

.session {
  display: grid;
  gap: 8px;
  color: #9db3c1;
  font-size: 13px;
  border-top: 1px solid rgba(220, 232, 239, .18);
  padding-top: 14px;
}

.theme-toggle-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px !important;
  color: #dbe8f0 !important;
}

.theme-toggle-group form {
  margin: 0;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  background: transparent;
  color: #dbe8f0;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  padding: 5px 8px;
  border: 1px solid rgba(220, 232, 239, .28);
  border-radius: 999px;
}

.theme-toggle.active {
  border-color: var(--cyan);
  background: rgba(0, 169, 223, .22);
}

main { min-width: 0; padding: 34px; max-width: 1280px; }

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  max-width: none;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(0, 105, 168, .22), transparent 40%),
    linear-gradient(315deg, rgba(0, 163, 108, .18), transparent 35%),
    var(--nav);
}

.login-panel {
  width: min(450px, 100%);
  background: #fbfcfd;
  border: 1px solid #fff;
  border-top: 5px solid var(--cyan);
  border-radius: 4px;
  padding: 30px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}

.login-brand {
  display: inline-block;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 24px;
}

h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.1; letter-spacing: 0; }
h2 { margin: 0 0 14px; font-size: 18px; line-height: 1.2; }
p { color: var(--muted); }

.alert, .notice {
  background: #fff4f2;
  border: 1px solid #e6b4ad;
  border-left: 4px solid var(--red);
  color: #7f2922;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 18px;
}

.notice { background: #eefaf4; border-color: #b9dfcd; border-left-color: var(--green); color: #23563d; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  border-bottom: 3px solid var(--text);
  padding-bottom: 18px;
}

.head-actions, .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.stats, .grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
  align-items: start;
}
.grid > * { min-width: 0; }

.stats div, .stats .stat-link {
  grid-column: span 3;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: 4px;
  padding: 15px;
  box-shadow: var(--shadow);
  text-decoration: none;
}
.stats .stat-link.active { border-left-color: var(--red); }

.stats span { display: block; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.stats strong { display: block; margin-top: 8px; color: var(--text); font-size: 30px; }

.panel, .table-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

.manual-page {
  max-width: 1040px;
}

.manual-page .manual-intro {
  border-left: 5px solid var(--red);
}

.manual-page h2 {
  margin-top: 30px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.manual-page h3 { margin-top: 22px; }
.manual-page li + li { margin-top: 7px; }
.manual-page code { overflow-wrap: anywhere; }
.manual-page .manual-toc { columns: 2; column-gap: 32px; }
.manual-page .manual-toc li { break-inside: avoid; }

@media (max-width: 680px) {
  .manual-page .manual-toc { columns: 1; }
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.client-profile-map {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.collapsible-panel > summary {
  cursor: pointer;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.collapsible-panel > summary::marker {
  color: var(--red);
}

.collapsible-panel > summary + * {
  margin-top: 14px;
}

.case-admin-tools {
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 14px;
  background: #fff;
}

.batch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.batch-actions label {
  min-width: min(280px, 100%);
}

.stack {
  display: grid;
  gap: 12px;
}

.record-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px;
  background: var(--paper);
}

.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-4 { grid-column: span 4; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: 10px 8px; vertical-align: top; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
th .sort-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  font-weight: 900;
}
th .sort-link:hover {
  color: var(--blue-dark);
  text-decoration: none;
}
th .sort-link.active {
  color: var(--text);
}
.sort-arrow {
  color: var(--red);
  font-size: 10px;
}
td span { display: block; color: var(--muted); margin-top: 3px; font-weight: 400; }

.compact-filter form {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.compact-filter .actions {
  justify-content: flex-start;
}

.compact-bgp-sessions table,
table.compact-bgp-sessions {
  table-layout: fixed;
}
.compact-bgp-sessions th,
.compact-bgp-sessions td {
  overflow-wrap: anywhere;
}
.compact-bgp-sessions .session-endpoint {
  width: 26%;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.compact-bgp-sessions .session-endpoint span {
  font-family: inherit;
}
.compact-bgp-sessions .session-status {
  width: 9%;
}

#bgp-sessions th:nth-child(1) { width: 18%; }
#bgp-sessions th:nth-child(2) { width: 17%; }
#bgp-sessions th:nth-child(3) { width: 25%; }
#bgp-sessions th:nth-child(4) { width: 18%; }
#bgp-sessions th:nth-child(5) { width: 5%; }
#bgp-sessions th:nth-child(6) { width: 17%; }

#bgp-sessions th:nth-child(6),
#bgp-sessions td:nth-child(6) {
  overflow-wrap: normal;
  word-break: normal;
}

#bgp-sessions td:nth-child(5) > .pill,
#bgp-sessions td:nth-child(6) > .pill {
  min-width: 26px;
  min-height: 0;
  padding: 9px 4px;
  writing-mode: vertical-rl;
}
.compact-bgp-sessions .compact-meta {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.compact-bgp-sessions .inline-status {
  gap: 5px;
}
.compact-bgp-sessions .inline-status select {
  max-width: 145px;
}
.compact-bgp-sessions .inline-status input[type="submit"] {
  min-height: 30px;
  padding: 5px 9px;
}

.portal-bgp-sessions table {
  table-layout: auto;
}

.portal-bgp-sessions th:nth-child(1) { width: 18%; }
.portal-bgp-sessions th:nth-child(2) { width: 16%; }
.portal-bgp-sessions th:nth-child(3) { width: 46%; }
.portal-bgp-sessions th:nth-child(4) { width: 12%; }
.portal-bgp-sessions th:nth-child(5) { width: 8%; }

.portal-bgp-sessions .peer-details dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 10px;
  margin: 0;
  font-size: 12px;
}

.portal-bgp-sessions .peer-details dt {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.portal-bgp-sessions .peer-details dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
}

.compact-router-session-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: min(680px, 80vw);
}

.compact-router-session-form textarea {
  grid-column: 1 / -1;
  min-height: 96px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.compact-router-interfaces table {
  table-layout: fixed;
}

.compact-router-interfaces th,
.compact-router-interfaces td {
  overflow-wrap: anywhere;
}

.compact-router-interfaces .session-endpoint {
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--text);
}

dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 18px; margin: 0; }
dt { color: var(--muted); font-weight: 800; }
dd { margin: 0; overflow-wrap: anywhere; }

.pill {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  color: #073b2a;
  background: #dff4ec;
  font-weight: 800;
  font-size: 12px;
}

.pill.success { background: #dff4ec; color: #073b2a; }
.pill.warning { background: #fff3cf; color: #6e4300; }
.pill.info { background: #e2f3fb; color: #0a405d; }
.pill.danger { background: #fde2e1; color: #8c161f; }
.pill.muted { background: #eef1f4; color: #596772; }

body.authenticated-page.theme-dark .pill.success { background: #123c2e; color: #b8f2d9; }
body.authenticated-page.theme-dark .pill.warning { background: #4a3511; color: #ffe2a6; }
body.authenticated-page.theme-dark .pill.info { background: #15384a; color: #b9e8ff; }
body.authenticated-page.theme-dark .pill.danger { background: #4d181d; color: #ffc5c9; }
body.authenticated-page.theme-dark .pill.muted { background: #273039; color: #bdc8cf; }

@media (prefers-color-scheme: dark) {
  body.authenticated-page.theme-auto .pill.success { background: #123c2e; color: #b8f2d9; }
  body.authenticated-page.theme-auto .pill.warning { background: #4a3511; color: #ffe2a6; }
  body.authenticated-page.theme-auto .pill.info { background: #15384a; color: #b9e8ff; }
  body.authenticated-page.theme-auto .pill.danger { background: #4d181d; color: #ffc5c9; }
  body.authenticated-page.theme-auto .pill.muted { background: #273039; color: #bdc8cf; }
}

body.authenticated-page.theme-dark code,
body.authenticated-page.theme-dark .doc-article code {
  background: #18222a;
  border-color: var(--line);
  color: #dbe9f0;
}
body.authenticated-page.theme-dark .case-admin-tools { background: var(--paper); }
body.authenticated-page.theme-dark .ticket-thread { background: var(--paper); }
body.authenticated-page.theme-dark .ticket-article { background: #14222a; }
body.authenticated-page.theme-dark .ticket-article.staff-only { background: #2a2412; }
body.authenticated-page.theme-dark .alert {
  background: #2a1715;
  border-color: #5e3a36;
  color: #f3c9c5;
}
body.authenticated-page.theme-dark .notice {
  background: #14241d;
  border-color: #2f5d49;
  color: #bfe6d3;
}
body.authenticated-page.theme-dark .region-notice.ok {
  background: #14241d;
  border-color: #2f5d49;
  color: #bfe6d3;
}
body.authenticated-page.theme-dark .region-notice.warning {
  background: #2f2511;
  border-color: #5e4a1f;
  color: #ffe2a6;
}
body.authenticated-page.theme-dark .portal-credentials {
  background: rgba(25, 34, 40, .96);
}
body.authenticated-page.theme-dark .qr-box {
  background: #fff;
}

@media (prefers-color-scheme: dark) {
  body.authenticated-page.theme-auto code,
  body.authenticated-page.theme-auto .doc-article code {
    background: #18222a;
    border-color: var(--line);
    color: #dbe9f0;
  }
  body.authenticated-page.theme-auto .case-admin-tools { background: var(--paper); }
  body.authenticated-page.theme-auto .ticket-thread { background: var(--paper); }
  body.authenticated-page.theme-auto .ticket-article { background: #14222a; }
  body.authenticated-page.theme-auto .ticket-article.staff-only { background: #2a2412; }
  body.authenticated-page.theme-auto .alert {
    background: #2a1715;
    border-color: #5e3a36;
    color: #f3c9c5;
  }
  body.authenticated-page.theme-auto .notice {
    background: #14241d;
    border-color: #2f5d49;
    color: #bfe6d3;
  }
  body.authenticated-page.theme-auto .region-notice.ok {
    background: #14241d;
    border-color: #2f5d49;
    color: #bfe6d3;
  }
  body.authenticated-page.theme-auto .region-notice.warning {
    background: #2f2511;
    border-color: #5e4a1f;
    color: #ffe2a6;
  }
  body.authenticated-page.theme-auto .portal-credentials {
    background: rgba(25, 34, 40, .96);
  }
  body.authenticated-page.theme-auto .qr-box {
    background: #fff;
  }
}
.pill-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 3px 0;
}
.pill-label {
  display: inline;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.signature-diagnostics {
  margin-top: 6px;
  max-width: 520px;
  color: var(--text);
  font-size: 12px;
}
.signature-diagnostics summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 800;
}
.signature-diagnostics-list {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}
.signature-diagnostic {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
}
td .signature-diagnostic span,
td .signature-diagnostic strong {
  display: block;
  margin-top: 0;
  color: inherit;
}
.signature-diagnostic-status {
  color: var(--muted) !important;
  font-weight: 800 !important;
}
.signature-diagnostic ul {
  margin: 4px 0 0;
  padding-left: 18px;
}
.hint { font-size: 13px; }
.field-hint {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 5px;
}
.plain-text-block {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 8px 0 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--text);
  font: inherit;
}

.form { display: grid; gap: 14px; }
.form.one { grid-template-columns: 1fr; }
.form input[type="submit"], .form button { justify-self: start; width: auto; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.span-2 { grid-column: span 2; }

label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 800; }
input:not([type="submit"]), select, textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  padding: 9px 10px;
  font-weight: 500;
}
.readonly-field {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--text);
  padding: 9px 10px;
  font-weight: 800;
  box-sizing: border-box;
}

.readonly-inline {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

input::placeholder, textarea::placeholder { color: var(--quiet); }

input:not([type="submit"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 0;
  border-color: var(--cyan);
}

body.authenticated-page.theme-dark input:not([type="submit"]),
body.authenticated-page.theme-dark select,
body.authenticated-page.theme-dark textarea {
  background: #0c141a;
  color: #eef6fa;
  border-color: #72808c;
  caret-color: #eef6fa;
  color-scheme: dark;
}

body.authenticated-page.theme-dark option {
  background: #0f171d;
  color: #eef6fa;
}

body.authenticated-page.theme-dark input::placeholder,
body.authenticated-page.theme-dark textarea::placeholder {
  color: #9eacb6;
  opacity: 1;
}

body.authenticated-page.theme-dark input:-webkit-autofill,
body.authenticated-page.theme-dark input:-webkit-autofill:hover,
body.authenticated-page.theme-dark input:-webkit-autofill:focus,
body.authenticated-page.theme-dark textarea:-webkit-autofill,
body.authenticated-page.theme-dark select:-webkit-autofill {
  -webkit-text-fill-color: #eef6fa;
  box-shadow: 0 0 0 1000px #0f171d inset;
  caret-color: #eef6fa;
}

@media (prefers-color-scheme: dark) {
  body.authenticated-page.theme-auto input:not([type="submit"]),
  body.authenticated-page.theme-auto select,
  body.authenticated-page.theme-auto textarea {
    background: #0c141a;
    color: #eef6fa;
    border-color: #72808c;
    caret-color: #eef6fa;
    color-scheme: dark;
  }

  body.authenticated-page.theme-auto option {
    background: #0f171d;
    color: #eef6fa;
  }

  body.authenticated-page.theme-auto input::placeholder,
  body.authenticated-page.theme-auto textarea::placeholder {
    color: #9eacb6;
    opacity: 1;
  }

  body.authenticated-page.theme-auto input:-webkit-autofill,
  body.authenticated-page.theme-auto input:-webkit-autofill:hover,
  body.authenticated-page.theme-auto input:-webkit-autofill:focus,
  body.authenticated-page.theme-auto textarea:-webkit-autofill,
  body.authenticated-page.theme-auto select:-webkit-autofill {
    -webkit-text-fill-color: #eef6fa;
    box-shadow: 0 0 0 1000px #0f171d inset;
    caret-color: #eef6fa;
  }
}

textarea { resize: vertical; min-height: 82px; max-height: 180px; }
pre { overflow: auto; white-space: pre-wrap; font-size: 12px; }
.inline-upload { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-status { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.session a { color: #dbe8f0; padding: 8px 11px; }
.app-version { color: #8fb0c1 !important; font-size: 12px !important; }
.danger-text { color: var(--red); font-weight: 800; }

.public-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 34px;
  background: #fff;
  border-bottom: 4px solid var(--cyan);
}

.public-brand {
  display: inline-flex;
  align-items: center;
  background: #fff;
}

.public-brand img { width: 190px; height: auto; display: block; }

.public-topbar nav {
  display: flex;
  gap: 16px;
  border: 0;
  padding: 0;
}

.public-topbar nav a {
  color: var(--blue-dark);
  border: 0;
  padding: 8px 0;
}

.public-footer, .login-version {
  color: var(--muted);
  font-size: 12px;
  padding: 14px 34px;
}

.legal-text {
  max-width: 920px;
  margin: 0 auto;
}

.legal-text h1,
.legal-text h2 {
  color: var(--text);
}

.learning-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.learning-mobile-nav { display: none; }

.learning-nav {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
}

.learning-nav h2 {
  margin: 0;
  font-size: 18px;
}

.learning-nav nav {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.learning-nav a {
  color: var(--text);
  border-left: 3px solid transparent;
  padding: 8px 10px;
}

.learning-nav a:hover,
.learning-nav a.active {
  background: var(--public-nav-active);
  border-left-color: var(--red);
  text-decoration: none;
}

.learning-article {
  max-width: 900px;
}

.learning-article .lead {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.learning-article h1,
.learning-article h2,
.learning-article h3 {
  color: var(--text);
}

.learning-article blockquote {
  margin: 20px 0;
  padding: 14px 16px;
  border-left: 4px solid var(--red);
  background: var(--public-callout);
}

.learning-article pre {
  background: #101820;
  color: #f4f7f9;
  padding: 14px;
  border-radius: 4px;
}

.learning-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.spam-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.captcha-panel {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--public-captcha);
}

.captcha-panel h3 {
  margin: 0;
  font-size: 16px;
}

.captcha-panel fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.captcha-panel legend {
  padding: 0 6px;
  font-weight: 800;
}

.public-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.login-version {
  position: fixed;
  right: 18px;
  bottom: 12px;
  color: #b5c8d3;
}

.public-page {
  max-width: none;
  padding: 0;
}

.public-hero {
  min-height: 42vh;
  display: grid;
  align-items: center;
  padding: 64px 34px;
  background:
    linear-gradient(120deg, rgba(7, 16, 21, .90), rgba(0, 63, 102, .78)),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  color: #fff;
}

.public-hero.compact { min-height: 30vh; }
.public-hero > div, .public-band > * { max-width: 1120px; width: 100%; margin: 0 auto; }
.public-hero h1 { font-size: 56px; color: #fff; }
.public-hero p { max-width: 720px; color: #dbe8f0; font-size: 19px; }
.eyebrow { color: #85def6 !important; font-weight: 900; text-transform: uppercase; font-size: 13px !important; }
.public-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.public-band {
  padding: 38px 34px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.public-band:nth-of-type(odd) { background: var(--public-alt); }
.public-columns, .pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.public-columns > div, .price-card, .public-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.public-section-head { margin-bottom: 18px; }
.public-section-head p { max-width: 780px; }
.price-card h3 { margin: 0 0 10px; font-size: 18px; }
.price-card dl { grid-template-columns: 130px 1fr; }
.public-form { display: grid; gap: 18px; }

/* Anonymous homepage */
.public-home-body .public-topbar {
  display: flex;
  flex-wrap: wrap;
}

.public-home-body .public-topbar nav {
  flex-wrap: wrap;
}

.public-home .public-hero {
  min-height: auto;
  padding-block: 52px;
}

.public-home .public-hero h1 {
  margin-bottom: 12px;
}

.public-home .public-section-head h2 {
  margin-bottom: 8px;
}

.public-choice-grid,
.public-home .pricing-grid,
.before-request-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.public-choice-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: 4px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.public-choice-card h3,
.public-choice-card p {
  margin-top: 0;
}

.public-choice-card p {
  flex: 1;
  color: var(--muted);
  line-height: 1.55;
}

.public-choice-card .button {
  align-self: flex-start;
}

.public-policy > div,
.public-before-request > div,
.public-pricing > div,
.public-request-section > div {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}

.policy-summary {
  padding: 18px;
  border-left: 5px solid var(--red);
  background: var(--panel);
}

.policy-summary ul,
.request-checklist {
  margin: 0;
  padding-left: 22px;
}

.policy-summary li,
.request-checklist li {
  margin: 8px 0;
  line-height: 1.5;
}

.policy-summary p {
  margin: 14px 0 0;
  color: var(--muted);
}

.public-details {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}

.public-details summary {
  min-height: 44px;
  padding: 13px 16px;
  color: var(--blue-dark);
  cursor: pointer;
  font-weight: 800;
}

.public-details summary:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

.public-details[open] summary {
  border-bottom: 1px solid var(--line);
}

.details-content {
  padding: 4px 18px 18px;
}

.details-content p {
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.before-request-layout {
  align-items: start;
}

.request-checklist {
  padding: 16px 18px 16px 38px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.secondary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.public-home .price-card {
  min-width: 0;
  padding: 16px;
  box-shadow: none;
}

.public-home .price-card dl {
  display: grid;
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
  gap: 5px 10px;
}

.public-home .price-card dt,
.public-home .price-card dd {
  margin: 0;
}

.public-home .price-card dd {
  font-weight: 800;
}

.public-home .price-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.public-request-section .public-section-head,
.public-home-form {
  width: min(900px, 100%);
  margin-inline: auto;
}

.public-home-form {
  min-width: 0;
  padding: 16px;
}

.public-home-form .public-form-group {
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.public-home-form .public-form-group legend {
  padding: 0 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.public-home-form .form-grid {
  grid-template-columns: minmax(0, 1fr);
}

.public-home-form .span-2 {
  grid-column: 1;
}

.public-home-form label,
.public-home-form fieldset,
.public-home-form .conditional-group {
  min-width: 0;
}

.public-home-form input:not([type="checkbox"]):not([type="radio"]),
.public-home-form select,
.public-home-form textarea,
.public-home-form button,
.public-home-form .button {
  min-height: 44px;
}

.public-home-form input,
.public-home-form select,
.public-home-form textarea {
  max-width: 100%;
}

.public-home-form .check-row {
  min-height: 44px;
  align-items: center;
}

.public-home-form .check-row input {
  flex: 0 0 auto;
}

.public-home-form .public-disclaimer {
  border: 1px solid var(--line);
  border-left: 5px solid var(--cyan);
}

.public-home-form > input[type="submit"] {
  width: 100%;
  min-height: 46px;
}

.public-home-form .captcha-panel {
  min-width: 0;
  margin: 0;
  padding: 16px;
}

.public-home-form .captcha-panel fieldset {
  min-width: 0;
}

.public-home-body .public-footer {
  justify-content: center;
  padding: 20px;
}

@media (min-width: 700px) {
  .public-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .public-home .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .before-request-layout {
    grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
  }

  .before-request-layout .secondary-links {
    grid-column: 2;
  }

  .public-home-form {
    padding: 24px;
  }

  .public-home-form .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-home-form .span-2 {
    grid-column: span 2;
  }

  .public-home-form > input[type="submit"] {
    width: auto;
    justify-self: start;
  }
}

@media (min-width: 1000px) {
  .public-home .pricing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .public-home-body .public-topbar {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
  }

  .public-home-body .public-brand img {
    width: 164px;
  }

  .public-home-body .public-topbar nav {
    width: 100%;
    gap: 6px 14px;
  }

  .public-home-body .public-topbar nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .public-home .public-hero,
  .public-home .public-band {
    padding-inline: 16px;
  }

  .public-home .public-hero h1 {
    font-size: 38px;
  }

  .public-home .public-actions .button {
    width: 100%;
  }

  .public-choice-card,
  .policy-summary,
  .public-home-form,
  .public-home-form .public-form-group,
  .public-home-form .captcha-panel {
    padding: 14px;
  }
}

.doc-article {
  max-width: none;
  color: var(--ink);
}
.doc-article > * {
  max-width: 920px;
}
.doc-article h2 {
  margin: 34px auto 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 28px;
}
.doc-article h3 {
  margin: 22px auto 8px;
  font-size: 18px;
}
.doc-article p, .doc-article li {
  font-size: 16px;
  line-height: 1.65;
}
.doc-article ol, .doc-article ul {
  padding-left: 24px;
}
.doc-article code {
  background: #f1f4f6;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}
.public-disclaimer { border-left: 4px solid var(--cyan); padding: 12px 14px; background: var(--public-disclaimer); }
[hidden] { display: none !important; }
.region-notice {
  display: none;
  border-radius: 4px;
  padding: 10px 12px;
  font-weight: 700;
}
.region-notice:not(:empty) { display: block; }
.region-notice.ok {
  background: #eefaf4;
  border: 1px solid #b9dfcd;
  color: #23563d;
}
.region-notice.warning {
  background: #fff7e8;
  border: 1px solid #efc46f;
  color: #6e4300;
}
.portal-credentials {
  display: grid;
  gap: 6px;
  width: min(420px, 100%);
  margin: 20px 0;
  padding: 16px;
  background: rgba(255,255,255,.96);
  color: var(--text);
  border-left: 5px solid var(--green);
  border-radius: 4px;
}
.portal-credentials span { color: var(--muted); }
code {
  display: inline-block;
  background: #f3f6f8;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 6px;
  color: var(--text);
}
.totp-setup {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.qr-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px;
}
.qr-box svg { display: block; width: 100%; height: auto; }

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
}

.check-row input { width: auto; margin-top: 4px; }

.ticket-thread {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px;
  margin: 12px 0;
  background: #fff;
}
.ticket-thread-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}
.ticket-thread-head div:first-child {
  display: grid;
  gap: 4px;
}
.ticket-thread-body {
  margin-top: 2px;
}
.ticket-thread-body > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.ticket-articles {
  display: grid;
  gap: 10px;
}
.ticket-article {
  border-left: 4px solid var(--cyan);
  background: #f8fbfd;
  padding: 10px 12px;
}
.ticket-article.staff-only {
  border-left-color: #e6b24b;
  background: #fff9ec;
}
.ticket-article header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ticket-article p {
  margin: 4px 0;
  color: var(--muted);
  font-size: 13px;
}
.ticket-article pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 8px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.45;
}
.quoted-ticket-body {
  margin-top: 8px;
  color: var(--muted);
}
.quoted-ticket-body summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.quoted-ticket-body pre {
  opacity: 0.78;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar-collapse-control,
  .sidebar-toggle {
    display: none;
  }
  .shell:has(.sidebar-collapse-control:checked) {
    grid-template-columns: 1fr;
  }
  aside {
    position: sticky;
    top: 0;
    z-index: 20;
    display: block;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 3px solid var(--cyan);
  }
  .brand {
    display: inline-flex;
    margin: 0 0 8px;
    padding: 0;
    width: fit-content;
    border-radius: 0;
  }
  .brand img { width: 176px; }
  aside nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border-top: 1px solid rgba(220, 232, 239, .18);
    padding: 8px 0 4px;
    scrollbar-width: thin;
  }
  aside nav a {
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 7px 9px;
    font-size: 13px;
    white-space: nowrap;
  }
  aside nav a:hover { border-left-color: transparent; border-bottom-color: var(--cyan); }
  aside .nav-section { display: none; }
  .session {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-top: 0;
    padding-top: 4px;
    align-items: center;
  }
  .session span, .session a, .session button {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 5px 7px;
  }
  .session .app-version { display: none; }
  main { padding: 20px; }
  .page-head { display: grid; }
  .section-heading { display: grid; }
  .stats div, .stats .stat-link, .span-4, .span-5, .span-7 { grid-column: 1 / -1; }
  .compact-filter form { grid-template-columns: 1fr; }
  .form-grid, dl { grid-template-columns: 1fr; }
  .portal-bgp-sessions .peer-details dl { grid-template-columns: 1fr; }
  .portal-bgp-sessions .peer-details dt { margin-top: 6px; white-space: normal; }
  .span-2 { grid-column: span 1; }
  .public-topbar { display: grid; padding: 14px 20px; }
  .public-topbar nav { flex-wrap: wrap; }
  .public-hero { padding: 48px 20px; }
  .public-hero h1 { font-size: 40px; }
  .public-band { padding: 28px 20px; }
  .public-columns, .pricing-grid { grid-template-columns: 1fr; }
  .learning-layout { grid-template-columns: 1fr; }
  .learning-nav { position: static; }
  .totp-setup { grid-template-columns: 1fr; }
}

/* Openfactory visual system */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--page-background);
  color: var(--text-primary);
  font-family: "Rubik", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-family: "Rubik", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; }
h2 { font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.2; }
h3 { font-size: 1.25rem; line-height: 1.3; }
p { color: var(--text-secondary); }

a {
  color: var(--link-colour);
  text-underline-offset: .18em;
  transition: color var(--transition-fast) ease;
}

a:hover { color: var(--link-hover-colour); }

:focus-visible {
  outline: 3px solid var(--of-red);
  outline-offset: 3px;
}

code, pre, kbd, samp,
.app-version, .eyebrow, .route-identifier, .session-endpoint,
.compact-meta, time, td[data-technical], .technical {
  font-family: "Fira Mono", ui-monospace, monospace;
}

code {
  background: var(--inline-code-background);
  border-color: var(--border-primary);
  color: var(--inline-code-text);
}

pre,
.learning-article pre {
  background: var(--code-background);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  color: var(--code-text);
  font-family: "Fira Mono", ui-monospace, monospace;
  line-height: 1.55;
  padding: var(--space-4);
  white-space: pre;
}

.corporate-lockup {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-4);
  color: var(--of-white);
  text-decoration: none;
}

.corporate-lockup:hover { color: var(--of-white); text-decoration: none; }
.corporate-lockup img { display: block; width: 176px; max-width: 45vw; height: auto; }
.public-brand { background: transparent; }
.brand-divider { width: 1px; height: 30px; background: #555; flex: 0 0 auto; }
.product-wordmark { color: var(--of-white); font-size: 1.12rem; font-weight: 600; white-space: nowrap; }

.public-topbar,
.app-topbar {
  min-height: 72px;
  background: var(--of-black);
  border: 0;
  border-bottom: 1px solid #2b2b2b;
  color: var(--of-white);
}

.public-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: var(--space-3) clamp(1rem, 4vw, 2.5rem);
}

.public-topbar nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.5rem);
}

.public-topbar nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 2px solid transparent;
  color: #e5e5e2;
  font-weight: 500;
}

.public-topbar nav a:hover {
  border-bottom-color: var(--of-red);
  color: var(--of-white);
  text-decoration: none;
}

.shell {
  grid-template-columns: 252px minmax(0, 1fr);
  grid-template-rows: 72px minmax(0, 1fr) auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "sidebar footer";
  background: var(--page-background);
}

.app-topbar {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.app-topbar-context {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: #c7c7c3;
  font-size: .8rem;
}

.app-topbar-context .app-version { color: #9b9b97 !important; }

.shell > aside {
  grid-area: sidebar;
  background: var(--of-black);
  border: 0;
  border-right: 1px solid #2b2b2b;
  color: #d8d8d8;
  padding: var(--space-4) var(--space-3);
}

.shell > main {
  grid-area: main;
  width: 100%;
  max-width: 1440px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.app-footer {
  grid-area: footer;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--border-primary);
  color: var(--text-muted);
  font-size: .75rem;
}

.sidebar-label {
  display: block;
  margin: 0 var(--space-3) var(--space-3);
  color: #8f8f8b;
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
}

.shell > aside nav { border-top-color: #333; }
.shell > aside nav a,
.shell > aside .session span,
.shell > aside .session a { color: #d8d8d8; }

.shell > aside nav a {
  border-left: 3px solid transparent;
  border-radius: 0;
  font-weight: 500;
}

.shell > aside nav a:hover {
  background: #181818;
  border-left-color: var(--of-red);
  color: var(--of-white);
}
.shell:has(.sidebar-collapse-control:checked) .sidebar-label { display: none; }

.nav-section { color: #8f8f8b; font-family: "Fira Mono", ui-monospace, monospace; letter-spacing: 0; }
.sidebar-toggle { border-color: #444; color: #d8d8d8; }
.sidebar-toggle:hover { border-color: var(--of-red); background: #181818; }
.session { border-top-color: #333; }
.theme-toggle { border-radius: var(--radius-small); border-color: #555; color: #d8d8d8; }
.theme-toggle.active { border-color: var(--of-red); background: var(--of-red); color: var(--of-white); }

button, .button, input[type="submit"] {
  min-height: 46px;
  border-radius: var(--radius-small);
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text-primary);
  padding: .65rem 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color var(--transition-fast) ease, border-color var(--transition-fast) ease, color var(--transition-fast) ease;
}

button:hover, .button:hover, input[type="submit"]:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.primary, input.primary {
  background: var(--of-action-red);
  border-color: var(--of-action-red);
  color: var(--of-white);
}

.primary:hover, input.primary:hover {
  background: var(--of-action-red-hover);
  border-color: var(--of-action-red-hover);
  color: var(--of-white);
}

.danger-button, .danger-link, button.danger, .button.danger, input.blocked {
  background: #8f050a;
  border-color: #8f050a;
  color: var(--of-white);
}

.page-head {
  max-width: var(--content-width);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
}

.page-head::before {
  content: "";
  position: absolute;
}

.page-head p { max-width: var(--reading-width); margin-bottom: 0; }

.panel, .table-wrap, .record-card,
.public-columns > div, .price-card, .public-form,
.ticket-thread, .signature-diagnostic {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  border-radius: var(--radius-medium);
  color: var(--text-primary);
  box-shadow: 0 5px 18px var(--shadow-colour);
}

.panel, .table-wrap { padding: clamp(1rem, 2.5vw, 1.5rem); }

.stats {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  max-width: var(--content-width);
}

.stats div, .stats .stat-link {
  grid-column: auto;
  min-height: 118px;
  border: 1px solid var(--border-primary);
  border-top: 3px solid var(--of-red);
  border-left-width: 1px;
  border-radius: var(--radius-medium);
  background: var(--surface-primary);
  box-shadow: none;
}

.stats .stat-link.active { border-top-color: var(--of-black); border-left-color: var(--border-primary); }
.stats span { color: var(--text-muted); font-family: "Fira Mono", ui-monospace, monospace; letter-spacing: 0; }
.stats strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

table { font-size: .875rem; font-variant-numeric: tabular-nums; }
thead { background: var(--table-header-background); }
th { color: var(--text-secondary); font-family: "Fira Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: 0; }
th, td { border-bottom-color: var(--border-primary); }
tbody tr:nth-child(even) { background: var(--table-stripe); }
tbody tr:hover { background: var(--table-row-hover); }
td span { color: var(--text-muted); }

.pill {
  border-radius: var(--radius-small);
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: 0;
}

.pill.success { background: #d9eee4; color: #123c2e; }
.pill.warning { background: #fff0c7; color: #5c3c00; }
.pill.info { background: #e8e8e5; color: #292929; }
.pill.danger { background: #f8d7d9; color: #7a0710; }
.pill.muted { background: #e8e8e5; color: #565656; }

.alert, .notice {
  border-radius: var(--radius-small);
  color: var(--text-primary);
}

.alert { background: #fff0f0; border-color: #e8a3a7; border-left-color: #9d0710; }
.notice { background: #eaf5ef; border-color: #9bc9b3; border-left-color: #19764d; }

input:not([type="submit"]), select, textarea,
.readonly-field, .readonly-inline {
  min-height: 46px;
  background: var(--input-background);
  border-color: var(--input-border);
  color: var(--input-text);
}

input::placeholder, textarea::placeholder { color: var(--input-placeholder); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { opacity: .68; cursor: not-allowed; }
input[readonly], textarea[readonly] { background: var(--surface-secondary); }
input[type="checkbox"], input[type="radio"] { min-height: auto; accent-color: var(--of-red); }

input:not([type="submit"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--of-red);
  outline-offset: 2px;
  border-color: var(--of-red);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--input-text);
  box-shadow: 0 0 0 1000px var(--input-background) inset;
  caret-color: var(--input-text);
}

.form, .public-form { max-width: var(--form-width); }
fieldset { border-color: var(--border-primary); border-radius: var(--radius-small); }
legend { color: var(--text-primary); font-family: "Fira Mono", ui-monospace, monospace; }
label { color: var(--text-secondary); font-weight: 600; }
.field-hint, .hint { color: var(--text-muted); }

.public-hero {
  min-height: min(620px, 72vh);
  padding: clamp(4rem, 9vw, 7.5rem) clamp(1rem, 5vw, 3rem);
  background: var(--of-black);
  border-bottom: 4px solid var(--of-red);
  color: var(--of-white);
}

.public-home .public-hero {
  min-height: clamp(420px, 62vh, 580px);
  padding: clamp(4rem, 9vw, 7.5rem) clamp(1rem, 5vw, 3rem);
}

.public-hero > div,
.public-band > * { max-width: var(--content-width); }
.public-hero h1 { color: var(--of-white); font-size: clamp(3rem, 6vw, 5rem); }
.public-hero p { color: #d8d8d3; font-size: clamp(1rem, 2vw, 1.2rem); }
.eyebrow, .route-identifier { color: var(--of-red) !important; font-size: .75rem !important; font-weight: 700; text-transform: uppercase; }
.public-hero .eyebrow { color: #ff5b62 !important; }
.public-hero .button:not(.primary) { border-color: var(--of-white); color: var(--of-white); }
.public-hero .button:not(.primary):hover { background: var(--of-white); color: var(--of-black); }

.public-band {
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 5vw, 3rem);
  background: var(--page-background);
  border-bottom-color: var(--border-primary);
}

.public-band:nth-of-type(odd),
body.public-body .public-band:nth-of-type(odd) { background: var(--surface-primary); }
.public-section-head { margin-bottom: var(--space-6); }
.public-section-head p { font-size: 1.05rem; line-height: 1.6; }

.public-choice-grid { gap: var(--space-5); }
.public-choice-card {
  padding: var(--space-6);
  border: 1px solid var(--border-primary);
  border-top: 3px solid var(--of-red);
  border-radius: var(--radius-medium);
  background: var(--surface-primary);
  box-shadow: none;
}
.route-identifier { display: block; margin-bottom: var(--space-5); }
.public-choice-card h3 { font-size: 1.5rem; }

.public-policy {
  background: #151515 !important;
  color: var(--of-white);
  border-bottom: 0;
}
.public-policy h2 { color: var(--of-white); }
.public-policy p, .public-policy li { color: #d8d8d3; }
.public-policy .policy-summary,
.public-policy .public-details {
  background: #1c1c1c;
  border-color: #3b3b3b;
  color: var(--of-white);
}
.public-policy .policy-summary { border-left-color: var(--of-red); }
.public-policy .public-details summary { color: #ff858a; }

.public-details,
.request-checklist,
.public-home-form .public-form-group,
.captcha-panel,
.captcha-panel fieldset {
  background: var(--surface-primary);
  border-color: var(--border-primary);
}
.captcha-panel h3,
.captcha-panel legend,
.captcha-panel .check-row,
.captcha-panel .check-row span {
  color: var(--text-primary);
}
.public-details summary { color: var(--link-colour); }
.public-details summary:focus-visible { outline-color: var(--of-red); }

.price-card { box-shadow: none; border-top: 3px solid var(--of-red); }
.price-card dl { font-variant-numeric: tabular-nums; }
.price-card dt { font-family: "Fira Mono", ui-monospace, monospace; font-size: .75rem; text-transform: uppercase; }

.public-home-form {
  padding: clamp(1rem, 3vw, 2rem);
  border-top: 3px solid var(--of-red);
  box-shadow: none;
}
.public-home-form .public-form-group legend { color: var(--text-primary); }
.public-home-form .public-disclaimer { border-left-color: var(--of-red); background: var(--surface-secondary); }

.learning-layout {
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.learning-nav {
  top: 94px;
  padding: var(--space-5);
  background: #151515;
  border-radius: var(--radius-small);
}
.learning-nav h2 { color: var(--of-white); }
.learning-nav nav { border-top-color: #3b3b3b; }
.learning-nav a { color: #d8d8d3; }
.learning-nav a:hover, .learning-nav a.active,
body.public-body .learning-nav a:hover,
body.public-body .learning-nav a.active {
  background: #242424;
  border-left-color: var(--of-red);
  color: var(--of-white);
}
.learning-article { max-width: var(--reading-width); }
.learning-article .lead { font-size: 1.12rem; }
.learning-article h1,
.learning-article h2,
.learning-article h3 { color: var(--text-primary); }
.learning-article blockquote,
body.public-body .learning-article blockquote { background: var(--surface-secondary); border-left-color: var(--of-red); }
.doc-article > * { max-width: var(--reading-width); }
.doc-article code { background: var(--inline-code-background); color: var(--inline-code-text); }

.public-footer {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1fr);
  gap: var(--space-7);
  padding: var(--space-7) max(1rem, calc((100vw - var(--content-width)) / 2));
  background: var(--of-black);
  color: #b8b8b4;
}
.footer-brand { display: grid; gap: var(--space-3); max-width: 480px; }
.footer-brand img { display: block; width: 176px; height: auto; }
.footer-brand p { margin: 0; color: #b8b8b4; }
.public-footer nav { display: flex; flex-wrap: wrap; align-content: start; gap: var(--space-3) var(--space-5); border: 0; padding: 0; }
.public-footer a { color: #e5e5e2; font-weight: 500; }
.public-footer a:hover { color: var(--of-white); }

.login-shell {
  background: var(--of-black);
  padding: clamp(1rem, 4vw, 2rem);
}
.login-panel {
  width: min(460px, 100%);
  padding: clamp(1.5rem, 5vw, 2.25rem);
  background: #151515;
  border: 1px solid #333;
  border-top: 4px solid var(--of-red);
  color: var(--of-white);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .35);
}
.login-brand { margin-bottom: var(--space-6); }
.login-brand img { width: 176px; }
.login-panel h1 { color: var(--of-white); }
.login-panel p { color: #b8b8b4; }
.login-panel label { color: #d8d8d3; }
.login-panel input:not([type="submit"]) { background: #0b0b0b; border-color: #555; color: var(--of-white); }
.login-panel input::placeholder { color: #9b9b97; }
.login-panel a { color: #ff858a; }
.login-panel .corporate-lockup .product-wordmark { color: var(--of-white); }
.login-panel .corporate-lockup .brand-divider { background: #555; }
.login-panel .form input[type="submit"] { width: 100%; }
.login-version { color: #9b9b97; font-family: "Fira Mono", ui-monospace, monospace; }

.ticket-thread { background: var(--surface-primary); }
.ticket-article { border-left-color: var(--of-red); background: var(--surface-secondary); }
.ticket-article.staff-only { background: var(--surface-secondary); }
.plain-text-block { background: var(--surface-secondary); }

@media (prefers-color-scheme: dark) {
  body.public-body input:not([type="submit"]),
  body.public-body select,
  body.public-body textarea,
  body.authenticated-page.theme-auto input:not([type="submit"]),
  body.authenticated-page.theme-auto select,
  body.authenticated-page.theme-auto textarea {
    background: var(--input-background);
    border-color: var(--input-border);
    color: var(--input-text);
  }

  body.public-body option,
  body.authenticated-page.theme-auto option { background: var(--input-background); color: var(--input-text); }
  body.public-body code,
  body.public-body .doc-article code { background: var(--inline-code-background); color: var(--inline-code-text); }
}

body.authenticated-page.theme-dark input:not([type="submit"]),
body.authenticated-page.theme-dark select,
body.authenticated-page.theme-dark textarea {
  background: var(--input-background);
  border-color: var(--input-border);
  color: var(--input-text);
}
body.authenticated-page.theme-dark option { background: var(--input-background); color: var(--input-text); }
body.authenticated-page.theme-dark .panel,
body.authenticated-page.theme-dark .table-wrap,
body.authenticated-page.theme-dark .record-card,
body.authenticated-page.theme-dark .ticket-thread,
body.authenticated-page.theme-dark .case-admin-tools { background: var(--surface-primary); color: var(--text-primary); }
body.authenticated-page.theme-dark .alert { background: #351316; border-color: #74252b; color: #ffc5c9; }
body.authenticated-page.theme-dark .notice { background: #14241d; border-color: #2f5d49; color: #bfe6d3; }
body.authenticated-page.theme-dark .pill.success { background: #123c2e; color: #bfe6d3; }
body.authenticated-page.theme-dark .pill.warning { background: #3b2a09; color: #ffe2a6; }
body.authenticated-page.theme-dark .pill.info,
body.authenticated-page.theme-dark .pill.muted { background: #292929; color: #d8d8d3; }
body.authenticated-page.theme-dark .pill.danger { background: #4d181d; color: #ffc5c9; }

body.authenticated-page.theme-light .public-hero {
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-bottom: 4px solid var(--of-red);
  color: var(--text-primary);
}
body.authenticated-page.theme-light .public-hero h1 { color: var(--text-primary); }
body.authenticated-page.theme-light .public-hero p { color: var(--text-secondary); }
body.authenticated-page.theme-light .public-hero .eyebrow { color: var(--of-red) !important; }
body.authenticated-page.theme-light .public-hero .button:not(.primary) {
  border-color: var(--text-primary);
  color: var(--text-primary);
}
body.authenticated-page.theme-light .public-hero .button:not(.primary):hover {
  background: var(--text-primary);
  color: var(--surface-primary);
}
body.authenticated-page.theme-light .public-policy {
  background: var(--surface-secondary) !important;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-primary);
}
body.authenticated-page.theme-light .public-policy h2,
body.authenticated-page.theme-light .public-policy p,
body.authenticated-page.theme-light .public-policy li { color: var(--text-primary); }
body.authenticated-page.theme-light .public-policy .policy-summary,
body.authenticated-page.theme-light .public-policy .public-details {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}
body.authenticated-page.theme-light .public-policy .public-details summary { color: var(--link-colour); }

@media (prefers-color-scheme: light) {
  body.authenticated-page.theme-auto .public-hero {
    background: var(--surface-primary);
    border: 1px solid var(--border-primary);
    border-bottom: 4px solid var(--of-red);
    color: var(--text-primary);
  }
  body.authenticated-page.theme-auto .public-hero h1 { color: var(--text-primary); }
  body.authenticated-page.theme-auto .public-hero p { color: var(--text-secondary); }
  body.authenticated-page.theme-auto .public-hero .eyebrow { color: var(--of-red) !important; }
  body.authenticated-page.theme-auto .public-hero .button:not(.primary) {
    border-color: var(--text-primary);
    color: var(--text-primary);
  }
  body.authenticated-page.theme-auto .public-hero .button:not(.primary):hover {
    background: var(--text-primary);
    color: var(--surface-primary);
  }
  body.authenticated-page.theme-auto .public-policy {
    background: var(--surface-secondary) !important;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-primary);
  }
  body.authenticated-page.theme-auto .public-policy h2,
  body.authenticated-page.theme-auto .public-policy p,
  body.authenticated-page.theme-auto .public-policy li { color: var(--text-primary); }
  body.authenticated-page.theme-auto .public-policy .policy-summary,
  body.authenticated-page.theme-auto .public-policy .public-details {
    background: var(--surface-primary);
    border-color: var(--border-primary);
    color: var(--text-primary);
  }
  body.authenticated-page.theme-auto .public-policy .public-details summary { color: var(--link-colour); }
}

@media (max-width: 860px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "header" "sidebar" "main" "footer";
  }

  .app-topbar { min-height: 64px; }
  .app-topbar-context > span:first-child { display: none; }
  .shell > aside {
    position: static;
    border-right: 0;
    border-bottom: 1px solid #333;
  }
  .sidebar-label { display: none; }
  .shell > aside nav { border-top: 0; }
  .shell > aside nav a:hover { border-left-color: transparent; border-bottom-color: var(--of-red); }
  .shell > main { padding: clamp(1rem, 4vw, 1.5rem); }
  .learning-layout { grid-template-columns: 1fr; }
  .learning-nav { display: none; }
  .learning-mobile-nav {
    display: block;
    padding: var(--space-4);
    border: 1px solid var(--border-primary);
    border-top: 3px solid var(--of-red);
    border-radius: var(--radius-small);
    background: var(--surface-primary);
  }
  .learning-mobile-nav summary { color: var(--text-primary); cursor: pointer; font-weight: 700; }
  .learning-mobile-nav nav { display: grid; gap: var(--space-2); margin-top: var(--space-4); border: 0; padding: 0; }
  .learning-mobile-nav a { padding: var(--space-2); border-left: 3px solid transparent; color: var(--text-primary); }
  .learning-mobile-nav a.active { border-left-color: var(--of-red); background: var(--surface-secondary); }
  .public-footer { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .public-topbar { align-items: flex-start; gap: var(--space-2); }
  .corporate-lockup { gap: var(--space-2); }
  .corporate-lockup img { width: 136px; }
  .brand-divider { height: 24px; }
  .product-wordmark { font-size: .95rem; }
  .public-topbar nav { width: 100%; gap: .25rem 1rem; }
  .public-topbar nav a { font-size: .875rem; }
  .public-hero { min-height: 0; }
  .public-actions { display: grid; }
  .public-actions .button { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: 1; }
  .head-actions, .actions { justify-content: flex-start; }
  .app-footer { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    transition-duration: .01ms;
  }
}

@media print {
  body { background: #fff; color: #000; }
  .public-topbar, .app-topbar, aside, .public-footer, .app-footer,
  .theme-toggle-group, .head-actions, .actions, button, input[type="submit"] { display: none; }
  .shell { display: block; }
  .shell > main, .public-band { max-width: none; padding: 0; }
  .panel, .table-wrap, .public-form { box-shadow: none; border-color: #777; }
  a { color: #000; text-decoration: underline; }
  pre { white-space: pre-wrap; border-color: #444; }
}