/*
 * RF United panel: the skin for pages still drawn with the older
 * components - the staff tools (Server Admin, Support, Logs, Super Admin)
 * and the few player pages not yet on the .pn-page frame.
 *
 * Skin only (user, 2026-10-29: "don't re-layout or redesign anything,
 * just follow the colour theme and polish it"). Nothing here moves a
 * block or changes a grid; it repaints the older panels, boards, forms,
 * buttons, notices and Bootstrap pieces in the Abyss + Ocean system:
 * Archivo type, neutral black grounds stepped by tone, hairlines instead
 * of gradients, flat ocean buttons, sky for links and focus, 6-8px radii.
 *
 * Every rule is scoped to a page that has no .pn-page, so the redesigned
 * pages keep their own styles. Loaded after evo-gamecp-2026.css, whose
 * rules lean on !important, so the few that must beat them say so too.
 */

/* =====================================================================
   TYPE AND TOKENS
   ===================================================================== */

.rd-main:not(:has(.pn-page)) {
  --rd-font: var(--pn-font);
  --rd-display-font: var(--pn-font);
  --text-font-family: var(--pn-font);
  --rd-radius: 8px;
  --rd-radius-sm: 6px;
  --rfu-tone-good: 74, 222, 128;
  --rfu-tone-warn: 255, 189, 74;
  --rfu-tone-bad: 255, 138, 122;
  --rfu-tone-info: 108, 192, 255;
  font-family: var(--pn-font);
  color: var(--pn-ash);
}
.rd-main:not(:has(.pn-page)) :is(h1, h2, h3, h4, h5, h6, .card-title) { letter-spacing: normal; color: var(--pn-frost); }
.rd-main:not(:has(.pn-page)) a:not([class*="rd-cta"]):not(.btn):not(.page-link) { color: var(--pn-sky); }
.rd-main:not(:has(.pn-page)) a:not([class*="rd-cta"]):not(.btn):not(.page-link):hover { color: var(--pn-frost); }
.rd-main:not(:has(.pn-page)) :focus-visible { outline: 2px solid var(--pn-sky); outline-offset: 2px; }
.rd-main:not(:has(.pn-page)) :is(td, .rd-stat-value, .rd-board-metric, .rd-is-num) { font-variant-numeric: tabular-nums; }

/* The page title the shell draws above an older page: the same wide
   uppercase title the redesigned pages open with. */
.rd-app:not(:has(.pn-page)) .rd-topbar-title h1,
.rd-app:not(:has(.pn-page)) .rd-topbar-title strong {
  font-family: var(--pn-font) !important;
  font-weight: 800;
  font-stretch: 118%;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: 0.005em !important;
  text-transform: uppercase;
  color: var(--pn-frost);
}
/* The old title clipped to 42vw with an ellipsis; at this size that cut
   most titles short on a phone, so it wraps instead. */
@media (max-width: 767px) {
  .rd-app:not(:has(.pn-page)) .rd-topbar-title h1 { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; font-size: 1.25rem; text-wrap: balance; }
}
@media (min-width: 768px) {
  .rd-app:not(:has(.pn-page)) .rd-topbar-title h1,
  .rd-app:not(:has(.pn-page)) .rd-topbar-title strong { font-size: 1.75rem; }
}

/* =====================================================================
   PANELS AND CARDS
   ===================================================================== */

.rd-main:not(:has(.pn-page)) :is(.rd-panel, .card, .apm-panel) {
  background: var(--pn-surface) !important;
  border: 0 !important;
  border-radius: var(--pn-radius-lg) !important;
  box-shadow: inset 0 0 0 1px var(--pn-line) !important;
}
.rd-main:not(:has(.pn-page)) :is(.rd-panel-head, .card-header, .apm-panel-head) {
  background: transparent !important;
  border-bottom: 1px solid var(--pn-line) !important;
}
.rd-main:not(:has(.pn-page)) :is(.rd-panel-head h2, .card-header .card-title, .card-header :is(h2, h3, h4, h5), .apm-panel-head h2) {
  font-family: var(--pn-font) !important;
  font-weight: 800 !important;
  font-stretch: 118%;
  font-size: 1rem !important;
  line-height: 1.2;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
  color: var(--pn-frost) !important;
}
.rd-main:not(:has(.pn-page)) .rd-panel-head p { margin-top: 4px; font-size: 13px; color: var(--pn-ash); }
.rd-main:not(:has(.pn-page)) .rd-eyebrow {
  font-size: 10.5px;
  font-weight: 650;
  font-stretch: 108%;
  letter-spacing: 0.16em;
  color: var(--pn-ash);
}
.rd-main:not(:has(.pn-page)) .card-footer { background: rgba(5, 7, 10, 0.32) !important; border-top: 1px solid var(--pn-line) !important; }

/* Head icons: a quiet tile on the ground, the icon in sky. */
.rd-main:not(:has(.pn-page)) .rd-stat-icon {
  border-radius: var(--pn-radius);
  background: var(--pn-ground);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--pn-line-strong);
  color: var(--pn-sky);
}
.rd-main:not(:has(.pn-page)) .rd-stat-icon.rd-is-good { color: var(--pn-good); background: rgba(var(--rfu-tone-good), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--rfu-tone-good), 0.25); }
.rd-main:not(:has(.pn-page)) .rd-stat-icon.rd-is-warn { color: var(--pn-warn); background: rgba(var(--rfu-tone-warn), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--rfu-tone-warn), 0.25); }
.rd-main:not(:has(.pn-page)) .rd-stat-icon.rd-is-bad { color: var(--pn-bad); background: rgba(var(--rfu-tone-bad), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--rfu-tone-bad), 0.25); }

/* ---- figures ---- */
.rd-main:not(:has(.pn-page)) .rd-stat {
  background: var(--pn-surface);
  border: 0;
  border-radius: var(--pn-radius-lg);
  box-shadow: inset 0 0 0 1px var(--pn-line);
  transition: box-shadow 160ms var(--pn-ease);
}
.rd-main:not(:has(.pn-page)) .rd-stat:hover { transform: none; box-shadow: inset 0 0 0 1px var(--pn-line-strong); }
.rd-main:not(:has(.pn-page)) .rd-stat-label { font-size: 10.5px; font-weight: 650; font-stretch: 108%; letter-spacing: 0.14em; color: var(--pn-ash); }
.rd-main:not(:has(.pn-page)) .rd-stat-value {
  font-family: var(--pn-font) !important;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: 0;
  color: var(--pn-frost);
}
.rd-main:not(:has(.pn-page)) .rd-stat-meta { color: var(--pn-ash); }

/* ---- label and value rows ---- */
.rd-main:not(:has(.pn-page)) .rd-detail-row { border-bottom-color: var(--pn-line) !important; }
.rd-main:not(:has(.pn-page)) .rd-detail-key { color: var(--pn-ash); }
.rd-main:not(:has(.pn-page)) .rd-detail-key i { color: var(--pn-ash); opacity: 0.75; }
.rd-main:not(:has(.pn-page)) .rd-detail-val { color: var(--pn-frost); }
.rd-main:not(:has(.pn-page)) :is(.rd-detail-sub, .rd-detail-val.rd-is-muted, .rd-board-sub, .text-muted, .form-text, .rd-field-hint, .rd-filters-note) { color: var(--pn-ash) !important; }

/* =====================================================================
   BUTTONS
   The older call-to-action is a clipped, gradient-filled plate that
   lifts on hover. Here it is the panel's button: square-ish, flat ocean
   with white ink, a short dark shadow, and a 1px press.
   ===================================================================== */

.rd-main:not(:has(.pn-page)) :is(.rd-cta, .btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info) {
  --rd-cta-cut: 0px;
  --rd-cta-frame: transparent;
  --rd-cta-fill: var(--rd-btn-fill, #0b6fd6);
  --rd-cta-ink: var(--rd-btn-ink, #fff);
  --rd-cta-lift: 0px;
  --rd-cta-sheen: rgba(255, 255, 255, 0.18);
  min-height: 48px;
  padding: 0 20px;
  gap: 9px;
  border-radius: 3px !important;
  clip-path: none;
  font-family: var(--pn-font) !important;
  font-size: 12.5px;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.1em;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.9);
}
.rd-main:not(:has(.pn-page)) .rd-cta { white-space: nowrap; }
@media (max-width: 559px) { .rd-main:not(:has(.pn-page)) .rd-panel-head { flex-wrap: wrap; } }
.rd-main:not(:has(.pn-page)) .rd-cta::before { inset: 0; clip-path: none; border-radius: 3px; }
.rd-main:not(:has(.pn-page)) .rd-cta:hover { transform: none; }
.rd-main:not(:has(.pn-page)) .rd-cta:hover > i { transform: none; }
.rd-main:not(:has(.pn-page)) .rd-cta:hover::before { filter: none; }
.rd-main:not(:has(.pn-page)) .rd-cta:active { transform: translateY(1px); }
.rd-main:not(:has(.pn-page)) :is(.rd-cta-primary, .rd-cta-primary:hover) { box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.9); }
.rd-main:not(:has(.pn-page)) :is(.rd-cta, .rd-cta-primary):hover { --rd-cta-fill: var(--rd-btn-fill-hover, #095cb3); }
.rd-main:not(:has(.pn-page)) .rd-cta-sm { min-height: 40px; padding: 0 14px; font-size: 11.5px; }
.rd-main:not(:has(.pn-page)) .rd-cta-sm > i { font-size: 14px; }

/* Ghost: dark plate, frost ink, a hairline that turns sky. The frame
   is the outer background showing round the inset fill. */
.rd-main:not(:has(.pn-page)) .rd-cta.rd-cta-ghost {
  --rd-cta-frame: var(--pn-line-strong);
  --rd-cta-fill: var(--pn-ground);
  --rd-cta-ink: var(--pn-frost);
  box-shadow: none;
}
.rd-main:not(:has(.pn-page)) .rd-cta.rd-cta-ghost::before { inset: 1px; border-radius: 2px; }
.rd-main:not(:has(.pn-page)) .rd-cta.rd-cta-ghost:hover { --rd-cta-frame: rgba(108, 192, 255, 0.5); --rd-cta-fill: var(--pn-surface-2); }

/* Quiet: no plate until hovered. */
.rd-main:not(:has(.pn-page)) .rd-cta.rd-cta-quiet {
  --rd-cta-frame: transparent;
  --rd-cta-fill: transparent;
  --rd-cta-ink: var(--pn-ash);
  box-shadow: none;
}
.rd-main:not(:has(.pn-page)) .rd-cta.rd-cta-quiet:hover { --rd-cta-fill: var(--pn-surface-2); --rd-cta-ink: var(--pn-frost); color: var(--pn-frost) !important; }
.rd-main:not(:has(.pn-page)) .rd-cta.rd-cta-quiet:hover > i { transform: none; }

/* Danger: outlined in the soft red, filled only on hover. */
.rd-main:not(:has(.pn-page)) .rd-cta.rd-cta-danger {
  --rd-cta-frame: rgba(var(--rfu-tone-bad), 0.5);
  --rd-cta-fill: var(--pn-ground);
  --rd-cta-ink: #ffb3a8;
  box-shadow: none;
}
.rd-main:not(:has(.pn-page)) .rd-cta.rd-cta-danger::before { inset: 1px; border-radius: 2px; }
.rd-main:not(:has(.pn-page)) .rd-cta.rd-cta-danger:hover { --rd-cta-fill: rgba(var(--rfu-tone-bad), 0.12); --rd-cta-ink: #ffd4cd; color: #ffd4cd !important; }

.rd-main:not(:has(.pn-page)) .rd-cta.rd-cta-discord { --rd-cta-frame: transparent; --rd-cta-fill: #5865f2; --rd-cta-ink: #fff; }
.rd-main:not(:has(.pn-page)) .rd-cta.rd-cta-discord:hover { --rd-cta-fill: #4752c4; }

/* Plain Bootstrap buttons without the plate. */
.rd-main:not(:has(.pn-page)) .btn { border-radius: 3px !important; font-family: var(--pn-font) !important; font-weight: 700; letter-spacing: 0.04em; }
.rd-main:not(:has(.pn-page)) .btn:hover { transform: none; }
.rd-main:not(:has(.pn-page)) :is(.btn-default, .btn-dark, .btn-outline-light, .btn-outline-dark) {
  color: var(--pn-frost) !important;
  background: var(--pn-ground) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--pn-line-strong) !important;
}
.rd-main:not(:has(.pn-page)) :is(.btn-default, .btn-dark, .btn-outline-light, .btn-outline-dark):hover { background: var(--pn-surface-2) !important; box-shadow: inset 0 0 0 1px rgba(108, 192, 255, 0.5) !important; }
.rd-main:not(:has(.pn-page)) :is(.btn-danger, .btn-outline-danger) {
  color: #ffb3a8 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(var(--rfu-tone-bad), 0.5) !important;
}
.rd-main:not(:has(.pn-page)) :is(.btn-danger, .btn-outline-danger):hover { background: rgba(var(--rfu-tone-bad), 0.12) !important; color: #ffd4cd !important; }

/* Icon-only buttons in table rows. */
.rd-main:not(:has(.pn-page)) .rd-icon-btn {
  border-radius: var(--pn-radius) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--pn-line-strong) !important;
  color: var(--pn-ash) !important;
}
.rd-main:not(:has(.pn-page)) .rd-icon-btn:hover { transform: none; color: var(--pn-frost) !important; background: var(--pn-surface-2) !important; box-shadow: inset 0 0 0 1px rgba(108, 192, 255, 0.5) !important; }

/* =====================================================================
   FORMS
   ===================================================================== */

.rd-main:not(:has(.pn-page)) :is(.form-control, .form-select, select.form-control, textarea.form-control, .rd-board-select, .select2-container .select2-choice, .select2-container--default .select2-selection--single) {
  color: var(--pn-frost) !important;
  background-color: var(--pn-ground) !important;
  border: 1px solid var(--pn-line-strong) !important;
  border-radius: var(--pn-radius) !important;
  caret-color: var(--pn-sky);
}
.rd-main:not(:has(.pn-page)) :is(.form-control, .form-select, select.form-control, .rd-board-select) { font-size: 14px; }
.rd-main:not(:has(.pn-page)) :is(.form-control, .form-select, .rd-board-select):hover { border-color: rgba(238, 243, 248, 0.24) !important; }
.rd-main:not(:has(.pn-page)) :is(.form-control, .form-select, select.form-control, textarea.form-control, .rd-board-select):focus {
  color: var(--pn-frost) !important;
  background-color: var(--pn-ground) !important;
  border-color: var(--pn-sky) !important;
  box-shadow: 0 0 0 3px rgba(108, 192, 255, 0.18) !important;
  outline: 0;
}
.rd-main:not(:has(.pn-page)) :is(.form-control, textarea)::placeholder { color: rgba(154, 167, 180, 0.72) !important; }
.rd-main:not(:has(.pn-page)) :is(.form-control, .form-select):disabled,
.rd-main:not(:has(.pn-page)) .form-control[readonly] { color: var(--pn-ash) !important; background-color: rgba(238, 243, 248, 0.035) !important; }
.rd-main:not(:has(.pn-page)) select option { background: var(--pn-surface); color: var(--pn-frost); }
.rd-main:not(:has(.pn-page)) input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.75); cursor: pointer; }

.rd-main:not(:has(.pn-page)) :is(.rd-field > label, .rd-filters-field > label, .form-label) {
  color: var(--pn-ash);
  font-size: 10.5px;
  font-weight: 650;
  font-stretch: 108%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rd-main:not(:has(.pn-page)) .rd-input > i { color: var(--pn-ash); }
.rd-main:not(:has(.pn-page)) .rd-input:focus-within > i { color: var(--pn-sky); }

.rd-main:not(:has(.pn-page)) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--pn-sky); }
.rd-main:not(:has(.pn-page)) .rd-check { color: var(--pn-ash); }
.rd-main:not(:has(.pn-page)) .rd-check:hover { color: var(--pn-frost); }
.rd-main:not(:has(.pn-page)) .rd-check.rd-is-danger { color: #ffb3a8; }
.rd-main:not(:has(.pn-page)) .rd-check.rd-is-danger input[type="checkbox"] { accent-color: var(--pn-bad); }

/* Filter bars and danger zones: a surface on the ground, no stripe. */
.rd-main:not(:has(.pn-page)) .rd-filters {
  background: rgba(5, 7, 10, 0.5);
  border: 0;
  border-radius: var(--pn-radius);
  box-shadow: inset 0 0 0 1px var(--pn-line);
}
.rd-main:not(:has(.pn-page)) .rd-dangerzone {
  background: rgba(var(--rfu-tone-bad), 0.05);
  border: 0;
  border-radius: var(--pn-radius);
  box-shadow: inset 0 0 0 1px rgba(var(--rfu-tone-bad), 0.28);
}
.rd-main:not(:has(.pn-page)) .rd-dangerzone .rd-filters-field > label { color: #ffb3a8; }

/* =====================================================================
   TABLES
   ===================================================================== */

.rd-main:not(:has(.pn-page)) .table { --bs-table-color: rgba(238, 243, 248, 0.88); color: rgba(238, 243, 248, 0.88) !important; }
.rd-main:not(:has(.pn-page)) :is(.table thead th, .table > thead > tr > th, .rd-board thead th, .dataTable thead th) {
  color: var(--pn-ash) !important;
  background: transparent !important;
  font-size: 10.5px;
  font-weight: 650;
  font-stretch: 108%;
  letter-spacing: 0.14em;
}
.rd-main:not(:has(.pn-page)) :is(.table td, .table th) { border-color: var(--pn-line) !important; }
.rd-main:not(:has(.pn-page)) .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; background: rgba(238, 243, 248, 0.018) !important; }
.rd-main:not(:has(.pn-page)) .table-hover > tbody > tr:hover > * { background: rgba(238, 243, 248, 0.035) !important; color: var(--pn-frost) !important; }
.rd-main:not(:has(.pn-page)) .table th.bg-primary { color: var(--pn-frost) !important; background: var(--pn-sky-tint) !important; }
.rd-main:not(:has(.pn-page)) .table-responsive { border-radius: var(--pn-radius); }

/* Boards: the older row-cards keep their shape, at the panel's radius
   and on its tones. */
.rd-main:not(:has(.pn-page)) .rd-board tbody tr { background: var(--pn-surface); }
.rd-main:not(:has(.pn-page)) .rd-board tbody tr:hover { background: var(--pn-surface-2); }
.rd-main:not(:has(.pn-page)) .rd-board td { border-color: var(--pn-line); color: rgba(238, 243, 248, 0.88); }
.rd-main:not(:has(.pn-page)) .rd-board td:first-child { border-radius: var(--pn-radius) 0 0 var(--pn-radius); }
.rd-main:not(:has(.pn-page)) .rd-board td:last-child { border-radius: 0 var(--pn-radius) var(--pn-radius) 0; }
.rd-main:not(:has(.pn-page)) .rd-board-metric { color: var(--pn-frost); }
.rd-main:not(:has(.pn-page)) .rd-board-caption { color: var(--pn-ash); font-weight: 650; letter-spacing: 0.14em; }
.rd-main:not(:has(.pn-page)) .rd-board-empty-row td { color: var(--pn-ash); }

/* DataTables controls. */
.rd-main:not(:has(.pn-page)) .dataTables_wrapper { color: var(--pn-ash); }
.rd-main:not(:has(.pn-page)) .dataTables_wrapper :is(input, select) {
  color: var(--pn-frost) !important;
  background: var(--pn-ground) !important;
  border: 1px solid var(--pn-line-strong) !important;
  border-radius: var(--pn-radius) !important;
}
.rd-main:not(:has(.pn-page)) :is(.page-link, .dataTables_paginate .paginate_button) {
  color: var(--pn-ash) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--pn-radius) !important;
  box-shadow: none !important;
}
.rd-main:not(:has(.pn-page)) :is(.page-link, .dataTables_paginate .paginate_button):hover { color: var(--pn-frost) !important; background: var(--pn-surface-2) !important; }
.rd-main:not(:has(.pn-page)) :is(.page-item.active .page-link, .dataTables_paginate .paginate_button.current) {
  color: var(--pn-frost) !important;
  background: var(--pn-sky-tint) !important;
  box-shadow: inset 0 0 0 1px rgba(108, 192, 255, 0.4) !important;
}

/* =====================================================================
   NOTICES, ALERTS, PILLS
   Tone tint with a hairline all round; no coloured side stripe.
   ===================================================================== */

.rd-main:not(:has(.pn-page)) .rd-notice {
  --rfu-tone: var(--rfu-tone-info);
  border: 0 !important;
  border-radius: var(--pn-radius);
  background: rgba(var(--rfu-tone), 0.07);
  box-shadow: inset 0 0 0 1px rgba(var(--rfu-tone), 0.22);
  color: rgba(238, 243, 248, 0.84);
  font-size: 13.5px;
}
.rd-main:not(:has(.pn-page)) .rd-notice-good { --rfu-tone: var(--rfu-tone-good); }
.rd-main:not(:has(.pn-page)) .rd-notice-warn { --rfu-tone: var(--rfu-tone-warn); }
.rd-main:not(:has(.pn-page)) .rd-notice-bad { --rfu-tone: var(--rfu-tone-bad); }
.rd-main:not(:has(.pn-page)) .rd-notice > i { color: rgb(var(--rfu-tone)); }
.rd-main:not(:has(.pn-page)) .rd-notice strong { color: var(--pn-frost); font-weight: 650; }
.rd-main:not(:has(.pn-page)) .rd-notice li { color: rgba(238, 243, 248, 0.84); }

.rd-main:not(:has(.pn-page)) .alert {
  --rfu-tone: var(--rfu-tone-info);
  border: 0 !important;
  border-radius: var(--pn-radius) !important;
  background: rgba(var(--rfu-tone), 0.07) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--rfu-tone), 0.22);
  color: rgba(238, 243, 248, 0.86) !important;
}
.rd-main:not(:has(.pn-page)) .alert-success { --rfu-tone: var(--rfu-tone-good); }
.rd-main:not(:has(.pn-page)) .alert-warning { --rfu-tone: var(--rfu-tone-warn); }
.rd-main:not(:has(.pn-page)) .alert-danger { --rfu-tone: var(--rfu-tone-bad); }
.rd-main:not(:has(.pn-page)) .alert :is(strong, h4, .alert-heading) { color: var(--pn-frost); }

.rd-main:not(:has(.pn-page)) .rd-pill {
  --rfu-tone: 154, 167, 180;
  padding: 3px 10px;
  border: 0 !important;
  background: rgba(var(--rfu-tone), 0.1) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--rfu-tone), 0.28);
  color: rgb(var(--rfu-tone)) !important;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
}
.rd-main:not(:has(.pn-page)) .rd-pill-good { --rfu-tone: var(--rfu-tone-good); }
.rd-main:not(:has(.pn-page)) .rd-pill-bad { --rfu-tone: var(--rfu-tone-bad); }
.rd-main:not(:has(.pn-page)) .rd-pill-warn { --rfu-tone: var(--rfu-tone-warn); }
.rd-main:not(:has(.pn-page)) :is(.rd-pill-info, .rd-pill-sky) { --rfu-tone: var(--rfu-tone-info); }

.rd-main:not(:has(.pn-page)) .badge { border-radius: 999px; font-weight: 650; font-size: 11px; letter-spacing: 0.02em; }
.rd-main:not(:has(.pn-page)) :is(.badge.bg-success, .badge.badge-success) { background: rgba(var(--rfu-tone-good), 0.14) !important; color: var(--pn-good) !important; }
.rd-main:not(:has(.pn-page)) :is(.badge.bg-danger, .badge.badge-danger) { background: rgba(var(--rfu-tone-bad), 0.14) !important; color: var(--pn-bad) !important; }
.rd-main:not(:has(.pn-page)) :is(.badge.bg-warning, .badge.badge-warning) { background: rgba(var(--rfu-tone-warn), 0.14) !important; color: var(--pn-warn) !important; }
.rd-main:not(:has(.pn-page)) :is(.badge.bg-primary, .badge.bg-info, .badge.badge-primary, .badge.badge-info) { background: var(--pn-sky-tint) !important; color: var(--pn-sky) !important; }
.rd-main:not(:has(.pn-page)) :is(.badge.bg-secondary, .badge.bg-dark, .badge.badge-secondary) { background: rgba(154, 167, 180, 0.12) !important; color: var(--pn-ash) !important; }

/* Result marks: the clipped gradient plate becomes the panel's flat
   tone tile, as on the redesigned pages' result states. */
.rd-main:not(:has(.pn-page)) :is(.rd-state-mark, .rd-auth-result-mark, .rd-mkt-hero-icon) {
  --rfu-tone: var(--rfu-tone-info);
  clip-path: none;
  border-radius: var(--pn-radius-lg);
  background: rgba(var(--rfu-tone), 0.1) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--rfu-tone), 0.3) !important;
  color: rgb(var(--rfu-tone)) !important;
}
.rd-main:not(:has(.pn-page)) :is(.rd-state-mark, .rd-auth-result-mark).rd-is-good { --rfu-tone: var(--rfu-tone-good); }
.rd-main:not(:has(.pn-page)) :is(.rd-state-mark, .rd-auth-result-mark).rd-is-warn { --rfu-tone: var(--rfu-tone-warn); }
.rd-main:not(:has(.pn-page)) :is(.rd-state-mark, .rd-auth-result-mark).rd-is-bad { --rfu-tone: var(--rfu-tone-bad); }
.rd-main:not(:has(.pn-page)) .rd-state h2 { font-weight: 800; font-stretch: 118%; text-transform: uppercase; letter-spacing: 0.01em; }
.rd-main:not(:has(.pn-page)) .rd-secret-value { clip-path: none; border-radius: var(--pn-radius); }

/* Reading sizes. Archivo sets narrower than the Inter these pages were
   sized for, so the smallest running text comes up a step to read at
   the same size it did; nothing that sets a layout width changes. */
.rd-main:not(:has(.pn-page)) :is(.rd-state p, .rd-panel-body > p, .card-body > p) { font-size: 14px; line-height: 1.6; }
.rd-main:not(:has(.pn-page)) :is(.rd-field-hint, .form-text, .rd-filters-note, .rd-dangerzone-note, .rd-stat-meta) { font-size: 12.5px; }
.rd-main:not(:has(.pn-page)) :is(.rd-board td, .table td) { font-size: 13.5px; }
.rd-main:not(:has(.pn-page)) .rd-detail-val { font-size: 14px; }

/* =====================================================================
   DIALOGS AND THE REST
   ===================================================================== */

.modal-content {
  background: var(--pn-surface) !important;
  border: 0 !important;
  border-radius: var(--pn-radius-lg) !important;
  box-shadow: inset 0 0 0 1px var(--pn-line-strong), 0 30px 80px rgba(0, 0, 0, 0.55) !important;
  font-family: var(--pn-font);
}
.modal-content :is(.modal-header, .modal-footer) { border-color: var(--pn-line) !important; }
.modal-content .modal-title { font-family: var(--pn-font) !important; font-weight: 800; font-stretch: 118%; text-transform: uppercase; letter-spacing: 0.02em; color: var(--pn-frost); }

.rd-main:not(:has(.pn-page)) hr { border-color: var(--pn-line); opacity: 1; }
.rd-main:not(:has(.pn-page)) :is(code, kbd) { border-radius: 3px; }
.rd-main:not(:has(.pn-page)) .nav-tabs { border-bottom-color: var(--pn-line-strong); }
.rd-main:not(:has(.pn-page)) .nav-tabs .nav-link { color: var(--pn-ash); border: 0; font-weight: 600; }
.rd-main:not(:has(.pn-page)) .nav-tabs .nav-link:hover { color: var(--pn-frost); }
.rd-main:not(:has(.pn-page)) .nav-tabs .nav-link.active { color: var(--pn-frost); background: transparent; box-shadow: inset 0 -2px 0 var(--pn-sky); }
.rd-main:not(:has(.pn-page)) .progress { background: var(--pn-surface-3); border-radius: 999px; }
.rd-main:not(:has(.pn-page)) .progress-bar { background: var(--pn-sky); }