/* ============================================================================
   rv-theme.css — Rogue Vikings shared color token system
   ----------------------------------------------------------------------------
   One palette for every RV surface: RV-HUB launcher, RV-LIVE, marketing web.
   RULES: solid colors only — no gradients, ever. The app background is always
   pure black (#000000). Elevation is expressed with solid neutral surface
   steps + crisp 1px solid borders, never shadows-as-color.
   Accent themes: set data-rv-theme="red|green|purple|blue" on <html>.
   Only the accent ramp changes per theme; black base, neutrals, text and
   semantic colors are identical everywhere.
   ============================================================================ */

:root {
  /* ----- Base ------------------------------------------------------------ */
  --rv-bg:            #000000;  /* the one true background, all themes       */

  /* ----- Neutral surface ramp (solid elevation steps on black) ----------- */
  --rv-surface-1:     #17171e;  /* chrome: top bar, left menu, wells         */
  --rv-surface-2:     #24242e;  /* cards, posts, panels — a clear dark grey that pops on pure black */
  --rv-surface-3:     #30303c;  /* nested cards, inputs on cards, hover      */
  --rv-elev:          #3a3a47;  /* topmost solids: popovers, menus, toasts   */

  /* ----- Borders (crisp 1px, do the work shadows would) ------------------ */
  --rv-hairline:      #1a1a1f;  /* subtle in-card separators                 */
  --rv-border-1:      #26262c;  /* default card/panel edge                   */
  --rv-border-2:      #3a3a42;  /* emphasized edge: hover, active, popovers  */

  /* ----- Text ------------------------------------------------------------ */
  --rv-text-strong:   #f4f4f6;  /* headings, primary values                  */
  --rv-text:          #cfcfd6;  /* body copy                                 */
  --rv-text-dim:      #9a9aa4;  /* secondary, meta, labels                   */
  --rv-text-faint:    #5c5c66;  /* placeholders, disabled, timestamps        */
  --rv-text-on-accent:#ffffff;  /* text/icons sitting on --rv-accent         */

  /* ----- Accent ramp (default: RV Red) ------------------------------------
     press < accent < hover < contrast. -weak is a SOLID dark-tinted chip
     background (not translucent), -line is its matching solid border.      */
  --rv-accent:          #dd2a32;  /* RV red, tuned down from the pure logo red so it's easy on the eyes as text on black */
  --rv-accent-hover:    #f23a42;
  --rv-accent-press:    #b01f26;
  --rv-accent-weak:     #2a0809;  /* solid chip/badge/selected-row bg        */
  --rv-accent-line:     #6e161a;  /* solid chip border / active outlines     */
  --rv-accent-contrast: #ff6167;  /* accent-colored text/icons on black      */

  /* ----- Semantic (theme-stable — identical under every accent) ---------- */
  --rv-success:       #34b567;
  --rv-success-weak:  #0c2114;
  --rv-warning:       #e8a51c;
  --rv-warning-weak:  #241a07;
  --rv-danger:        #e5484d;
  /* Reward rarity grade. Data, not an accent — but it lives HERE so a theme can retune it,
     like every other colour. Five of the six grades reuse the semantic tokens above; epic is the
     only one needing its own, so it is defined once rather than hardcoded in a feature stylesheet. */
  --rv-rarity-epic:   #9d6fd0;
  --rv-danger-weak:   #2a0e10;
  --rv-info:          #4c9df0;
  --rv-info-weak:     #0d1b2c;

  /* ----- Utility ---------------------------------------------------------- */
  --rv-focus:         var(--rv-accent-contrast);  /* follows the theme       */

  /* ----- Geometry ---------------------------------------------------------
     Four radii and one 4px spacing grid, per `Docs/RV-Theme & UI Design Doc.md`.
     Before these existed the renderer carried 22 distinct radius values, 35
     paddings and 22 gaps: 8px and 9px are not two design decisions, they are
     the same decision made twice by different hands. Colour never drifted
     because there was always a token to reach for. Geometry drifted because
     there was not. Reach for these and never type a raw pixel again.        */
  /* RV is SQUARE. The reference implementation is the Giveaways page: crisp
     rectangular panels, decisive scale jumps, gold used scarcely. Square reads
     as engineered, which is right for a launcher that patches game servers.

     Not 0px, though. On a dark UI at high DPI a true zero corner aliases into a
     hard stair-step and reads as unfinished; 2 to 4px reads as square to the eye
     while staying clean. The whole ladder is deliberately narrow, because on a
     square system radius is not a hierarchy signal. Scale, weight and borders
     carry hierarchy. Radius just stops the corner looking broken.             */
  --rv-r-sm:          2px;    /* inputs, chips, badges, small controls       */
  --rv-r-md:          3px;    /* buttons, tiles, list rows, inner blocks     */
  --rv-r-lg:          4px;    /* cards, panels, modals, page sections        */
  --rv-r-full:        999px;  /* avatars ONLY. Not pills, not buttons.       */

  /* Legacy aliases. Kept so the ~2,000 existing call sites stay correct while
     they are migrated sheet by sheet. Both were far rounder than the house
     style (10px and 6px), so snapping them here is what actually squares off
     most of the app in one move.                                             */
  --rv-radius:        var(--rv-r-lg);
  --rv-radius-sm:     var(--rv-r-md);

  --rv-s-1:           4px;    /* icon to its label; inside a chip            */
  --rv-s-2:           8px;    /* tightly related rows; inside a button       */
  --rv-s-3:           12px;   /* control to control within one group         */
  --rv-s-4:           16px;   /* default card padding; cards in a grid       */
  --rv-s-5:           24px;   /* distinct groups inside one card             */
  --rv-s-6:           32px;   /* between sections of a page                  */
  --rv-s-7:           48px;   /* between major regions                       */
  --rv-s-8:           64px;   /* page top and bottom margin, wide screens    */

  /* ----- Type -------------------------------------------------------------
     Hierarchy comes from scale and weight, never colour: a heading is not
     "the gold one", it is the big one. Line height RISES as size falls,
     because tight body copy is the commonest cause of a cramped page.       */
  --rv-fs-display:    32px;
  --rv-fs-h1:         24px;
  --rv-fs-h2:         18px;
  --rv-fs-h3:         15px;
  --rv-fs-body:       14px;
  --rv-fs-small:      13px;   /* hints, captions, meta                       */
  --rv-fs-micro:      11px;   /* badge and tag text                          */
  /* The FLOOR, and it is a floor rather than a step: reach for --rv-fs-micro
     first and use this only where a number genuinely has to sit inside a tight
     control (a chart axis, a superscript). The sweep found 23 declarations at
     8 to 9.5px, which is not a design choice, it is text nobody can read. If a
     label does not fit at 10px the container is too small, not the type.      */
  --rv-fs-nano:       10px;
  --rv-lh-tight:      1.25;
  --rv-lh-body:       1.55;
  --rv-measure:       72ch;   /* prose never runs wider than this            */

  /* The one legitimate translucent surface. Everything else in RV is a solid
     fill from the surface ladder; a scrim has to be see-through because its
     whole job is to show that the thing behind it is still there and merely
     out of reach. Without a token every modal invented its own opacity.      */
  --rv-scrim:         rgba(0, 0, 0, 0.55);

  /* ----- Text on a filled state or data chip ------------------------------
     --rv-text-on-accent follows the theme, so under Gold it is near-black.
     That is right on a gold button and wrong on a red or purple chip, where
     the fill is fixed and the text must stay legible whatever theme is on.  */
  --rv-text-on-state: #ffffff;
  --rv-ink-on-light:  #0a2a06;  /* for the two bright fills below           */

  /* ----- External platform marks (DATA, not accents) ----------------------
     A creator's links are tagged with the colour of the service they point
     at, which is how a reader tells them apart at a glance. That makes these
     data, in exactly the sense --rv-rarity-epic above is data: not part of
     the accent system, never used for emphasis or decoration, but still
     colour, so it lives here where a theme can retune it rather than being
     hardcoded in a feature stylesheet.

     Named by HUE, never by company. The colours are facts about the world;
     the trademarks are not ours to write into a codebase.                   */
  --rv-plat-red:      #ff0000;
  --rv-plat-blue:     #1877f2;
  --rv-plat-purple:   #9146ff;
  --rv-plat-lime:     #53fc18;
  --rv-plat-green:    #85c742;
  --rv-plat-pink:     #d6249f;
  --rv-plat-ink:      #000000;
  --rv-plat-ink-line: #333333;

  /* Console marks, same reasoning: which machine a score came from is a FACT
     about the row, so it is data and it rides a token. Muted on purpose:
     these are 1px dividers, not fills, and a saturated hairline would read
     as an accent. */
  --rv-plat-c-blue:   #2a5a80;
  --rv-plat-c-green:  #2f6a2a;
  --rv-plat-c-indigo: #2a4a8a;
  --rv-plat-c-amber:  #8a6a10;
}

/* ============================================================================
   ACCENT THEMES — override ONLY the accent ramp (+ text-on-accent where the
   accent is bright enough to demand dark text). Everything else is inherited.
   ============================================================================ */

/* Each theme's accent is hue-faithful to the matching Rogue Vikings logo set.
   Red-White (default) · Red-Gold · Green-White · Purple-White · Blue-White. */

/* Red — Red-White logo. Accent tuned down from the pure logo red (#fa0113) so red text
   reads comfortably on black (the logo images keep the vivid red). White text on the accent. */
:root[data-rv-theme="red"] {
  --rv-accent:          #dd2a32;
  --rv-accent-hover:    #f23a42;
  --rv-accent-press:    #b01f26;
  --rv-accent-weak:     #2a0809;
  --rv-accent-line:     #6e161a;
  --rv-accent-contrast: #ff6167;
  --rv-text-on-accent:  #ffffff;
}

/* Gold — Red-Gold logo (accent #e3b72c); luminous → near-black text */
:root[data-rv-theme="gold"] {
  --rv-accent:          #e3b72c;
  --rv-accent-hover:    #f2c94a;
  --rv-accent-press:    #bf9a1f;
  --rv-accent-weak:     #221b06;
  --rv-accent-line:     #6e5717;
  --rv-accent-contrast: #f0c948;
  --rv-text-on-accent:  #12100a;
}

/* Green — Green-White logo (accent #95e919); luminous → near-black text */
:root[data-rv-theme="green"] {
  --rv-accent:          #95e919;
  --rv-accent-hover:    #a8f23c;
  --rv-accent-press:    #79c112;
  --rv-accent-weak:     #101f04;
  --rv-accent-line:     #3d6910;
  --rv-accent-contrast: #a3ef2f;
  --rv-text-on-accent:  #0c1206;
}

/* Purple — Purple-White logo (accent #8225e9), white text */
:root[data-rv-theme="purple"] {
  --rv-accent:          #8225e9;
  --rv-accent-hover:    #9743f0;
  --rv-accent-press:    #6a19c4;
  --rv-accent-weak:     #180a2c;
  --rv-accent-line:     #431a7d;
  --rv-accent-contrast: #a982ff;
  --rv-text-on-accent:  #ffffff;
}

/* Blue — Blue-White logo (accent #076bfc), white text */
:root[data-rv-theme="blue"] {
  --rv-accent:          #076bfc;
  --rv-accent-hover:    #3585ff;
  --rv-accent-press:    #0556cc;
  --rv-accent-weak:     #06152e;
  --rv-accent-line:     #124a91;
  --rv-accent-contrast: #5e9bff;
  --rv-text-on-accent:  #ffffff;
}

/* ============================================================================
   CLASSIC — the original 2025 "gold on warm brown" RV look, restored verbatim
   from the pre-overhaul palette (git aaeea12^). UNLIKE the accent-only themes
   above, Classic overrides the FULL surface + border + text ramp (warm browns
   + cream + gold) so nostalgic users can bring back the old identity exactly.
   Values are the literal old --bg/--bg2/--bg3/--bg4, --line/--line2, --ink/
   --dim/--mute, --gold, and the epic warm card browns.
   ============================================================================ */
:root[data-rv-theme="classic"] {
  /* warm surface ramp (old --bg / --bg2 / --bg3 / --bg4) */
  --rv-bg:            #0d0b0a;
  --rv-surface-1:     #15110d;
  --rv-surface-2:     #1c1610;
  --rv-surface-3:     #241d14;
  --rv-elev:          #2a2117;
  /* gold-tinted hairlines (old --line-soft / --line / --line2) */
  --rv-hairline:      rgba(230,192,104,.10);
  --rv-border-1:      rgba(230,192,104,.16);
  --rv-border-2:      rgba(230,192,104,.30);
  /* warm cream text (old --cream / --ink / --dim / --mute) */
  --rv-text-strong:   #efe7d4;
  --rv-text:          #e9e0cd;
  --rv-text-dim:      #9c9384;
  --rv-text-faint:    #7a7161;
  --rv-text-on-accent:#1a1410;
  /* gold accent (old --gold / --gold-dim) */
  --rv-accent:          #e6c068;
  --rv-accent-hover:    #f0d089;
  --rv-accent-press:    #c8962f;
  --rv-accent-weak:     #201806;
  --rv-accent-line:     #6e5717;
  --rv-accent-contrast: #e6c068;
  --rv-focus:           #e6c068;
}

/* Accent as raw "r,g,b" so surfaces that need a themed glow/tint can do
   rgba(var(--rv-accent-rgb), .NN) and still follow the theme. */
:root,
:root[data-rv-theme="red"]    { --rv-accent-rgb: 221,42,50; }
:root[data-rv-theme="gold"]   { --rv-accent-rgb: 227,183,44; }
:root[data-rv-theme="green"]  { --rv-accent-rgb: 149,233,25; }
:root[data-rv-theme="purple"] { --rv-accent-rgb: 130,37,233; }
:root[data-rv-theme="blue"]   { --rv-accent-rgb: 7,107,252; }

/* ── Digi Viking ────────────────────────────────────────────────────────────
   The second FULL-PALETTE theme (Classic is the other). Where Classic is warm
   brown and gold, this is the cool near-black instrument palette: the exact
   ramp RV-Digi Cortex uses as its default, brought across so the Hub and the
   Cortex can look like one product.

   Values are identical to the Cortex "midnight" theme in
   renderer/cortex/cortex-theme.css. If either is retuned, retune BOTH: the
   whole point of this theme is that they match. The accent is the Developer
   cyan, which reads as the technical one across the ecosystem. */
/* ── The Digi family ─────────────────────────────────────────────────────────
   Four themes carrying the RV-Digi Cortex palette into the Hub. The LADDER is
   declared once for all of them and only the accent changes per theme, which is
   the same discipline cortex-theme.css uses for its four categories: six
   properties move, everything else stays neutral, and that restraint is exactly
   what makes the accent read.

   Declaring the ladder four times would guarantee it drifts. It is one rule.

   Accents are the Cortex category colours verbatim, so a workspace and the Hub
   around it are the same colour rather than two near-misses:
     teal   #4fb8c9  developer     red    #c9453f  modder
     green  #3fa860  gamer         purple #8a5cc9  content creator            */
:root[data-rv-theme="digiviking"],
:root[data-rv-theme="digired"],
:root[data-rv-theme="digigreen"],
:root[data-rv-theme="digipurple"] {
  /* cool near-black ladder on the shared RV ground */
  --rv-bg:            #0d0b0a;
  --rv-surface-1:     #121417;
  --rv-surface-2:     #171a1e;
  --rv-surface-3:     #1d2126;
  --rv-elev:          #242930;
  /* neutral hairlines: the structure is carried by 1px lines, not shadows */
  --rv-hairline:      rgba(255,255,255,.06);
  --rv-border-1:      rgba(255,255,255,.10);
  --rv-border-2:      rgba(255,255,255,.18);
  /* a deliberately wide text range; a narrow one is what makes dark UI muddy */
  --rv-text-strong:   #eef2f6;
  --rv-text:          #c9d1d9;
  --rv-text-dim:      #8b949e;
  --rv-text-faint:    #5c6570;
}

/* Teal. The original Digi Viking, kept under its shipped id so nobody's saved
   preference silently changes theme under them. */
:root[data-rv-theme="digiviking"] {
  --rv-accent:          #4fb8c9;
  --rv-accent-hover:    #63cbdb;
  --rv-accent-press:    #3d9aa9;
  --rv-accent-weak:     #0b1e22;
  --rv-accent-line:     #2a5f68;
  --rv-accent-contrast: #4fb8c9;
  --rv-text-on-accent:  #04161a;
  --rv-focus:           #4fb8c9;
  --rv-accent-rgb:      79,184,201;
}
/* Red. Deeper and far more SATURATED than the Cortex modder red it started from.
   #c9453f is R201 G69 B63: that green and blue is what turned it salmon, and it
   read washed out against the RV artwork, whose red sits at #880000 to #a00000
   with zero green or blue at all. Saturation was the problem more than darkness.

   Measured, not eyeballed. As a FILL, #a4161a carries white text at 7.75:1, where
   the old #c9453f managed only 4.11:1 with its dark ink and was already marginal.
   As TEXT on this ground #a4161a scores 2.53:1 and is unreadable, which is exactly
   why -contrast exists and stays light: #e5484d gives 5.02:1 and passes AA.
   The fill goes dark; the thing you read never does. */
:root[data-rv-theme="digired"] {
  --rv-accent:          #a4161a;
  --rv-accent-hover:    #c01d22;
  --rv-accent-press:    #7d1114;
  --rv-accent-weak:     #1d0709;
  --rv-accent-line:     #5c1013;
  /* Red TEXT on this ground. #e5484d cleared 5.02:1 but is R229 G72 B77: that green and blue is the
     same desaturation that made the old accent look salmon, just lighter, and a big headline in it read
     washed out. #c61b1f is the same hue and saturation as the fill, lightened only until it clears the
     3.0:1 that large text needs, at 3.35:1. The fill itself is 2.53:1 and can never be text.
     Small red body copy would need 4.5:1 and cannot have this. That is fine: the accent is not an
     emphasis tool, so red small text should not exist. Headlines, icons and the focus ring can. */
  --rv-accent-contrast: #c61b1f;   /* large red text and icons on black: 3.35:1 */
  --rv-text-on-accent:  #ffffff;   /* on the fill: 7.75:1 */
  --rv-focus:           #c61b1f;
  --rv-accent-rgb:      164,22,26;
}
/* Green */
:root[data-rv-theme="digigreen"] {
  --rv-accent:          #3fa860;
  --rv-accent-hover:    #4cbd70;
  --rv-accent-press:    #338a4f;
  --rv-accent-weak:     #0b1a10;
  --rv-accent-line:     #215732;
  --rv-accent-contrast: #4cbd70;
  --rv-text-on-accent:  #04140a;
  --rv-focus:           #4cbd70;
  --rv-accent-rgb:      63,168,96;
}
/* Purple */
:root[data-rv-theme="digipurple"] {
  --rv-accent:          #8a5cc9;
  --rv-accent-hover:    #9d73d6;
  --rv-accent-press:    #734bab;
  --rv-accent-weak:     #160f1f;
  --rv-accent-line:     #483069;
  --rv-accent-contrast: #9d73d6;
  --rv-text-on-accent:  #0f0819;
  --rv-focus:           #9d73d6;
  --rv-accent-rgb:      138,92,201;
}
:root[data-rv-theme="classic"]{ --rv-accent-rgb: 230,192,104; }

/* ============================================================================
   HELPERS — built strictly from tokens. Solid backgrounds + 1px borders only.
   ============================================================================ */

/* Card: the standard raised surface on black */
.rv-card {
  background: var(--rv-surface-2);
  border: 1px solid var(--rv-border-1);
  border-radius: var(--rv-radius);
  color: var(--rv-text);
}

/* Card level 2: nested inside .rv-card, or a stronger standalone panel */
.rv-card-2 {
  background: var(--rv-surface-3);
  border: 1px solid var(--rv-border-2);
  border-radius: var(--rv-radius);
  color: var(--rv-text);
}

/* Chip / badge / tag: solid tinted well + matching line + accent text */
.rv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--rv-accent-weak);
  border: 1px solid var(--rv-accent-line);
  border-radius: var(--rv-radius-sm);
  color: var(--rv-accent-contrast);
  padding: 0.25em 0.7em;
  font-weight: 600;
}

/* Primary button */
.rv-btn {
  background: var(--rv-accent);
  color: var(--rv-text-on-accent);
  border: 1px solid var(--rv-accent);
  border-radius: var(--rv-radius-sm);
  padding: 0.55em 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.rv-btn:hover {
  background: var(--rv-accent-hover);
  border-color: var(--rv-accent-hover);
}
.rv-btn:active {
  background: var(--rv-accent-press);
  border-color: var(--rv-accent-press);
}

/* Ghost button: quiet until engaged */
.rv-btn-ghost {
  background: transparent;
  color: var(--rv-text);
  border: 1px solid var(--rv-border-1);
  border-radius: var(--rv-radius-sm);
  padding: 0.55em 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.rv-btn-ghost:hover {
  border-color: var(--rv-accent);
  color: var(--rv-text-strong);
}
.rv-btn-ghost:active {
  border-color: var(--rv-accent-press);
}

/* Divider: one crisp hairline */
.rv-divider {
  border: none;
  border-top: 1px solid var(--rv-hairline);
  height: 0;
  margin: 0;
}

/* Keyboard focus: visible ring in the theme accent, offset off the edge */
.rv-btn:focus-visible,
.rv-btn-ghost:focus-visible,
.rv-chip:focus-visible,
.rv-card:focus-visible,
.rv-card-2:focus-visible {
  outline: 2px solid var(--rv-focus);
  outline-offset: 2px;
}

/* ============================================================================
   THEME PICKER — the swatch selector used in RV-HUB Settings › Themes and
   RV-LIVE Settings › Theme. Rendered by rv-theme.js RVTheme.renderPicker().
   ============================================================================ */
.rv-theme-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--rv-s-4); }
.rv-theme-opt {
  position:relative; text-align:left; cursor:pointer;
  background:var(--rv-surface-2); border:1px solid var(--rv-border-1);
  border-radius:var(--rv-radius); padding:var(--rv-s-4) var(--rv-s-4) var(--rv-s-3); color:var(--rv-text);
  transition:border-color 120ms ease, background-color 120ms ease;
}
.rv-theme-opt:hover { border-color:var(--rv-border-2); background:var(--rv-surface-3); }
.rv-theme-opt.on { border-color:var(--rv-swatch); }
.rv-theme-opt .rv-theme-swatch {
  width:100%; height:54px; border-radius:var(--rv-radius-sm);
  background:var(--rv-swatch); border:1px solid rgba(255,255,255,.10);
  display:flex; align-items:flex-end; justify-content:flex-end; padding:var(--rv-s-2);
}
.rv-theme-opt .rv-theme-dot { width:14px; height:14px; border-radius:50%; background:#000; border:2px solid rgba(255,255,255,.55); }
.rv-theme-opt .rv-theme-name { margin-top: var(--rv-s-3); font-weight:700; font-size:14px; color:var(--rv-text-strong); }
.rv-theme-opt .rv-theme-tag  { font-size:12px; color:var(--rv-text-dim); }
.rv-theme-opt .rv-theme-check {
  position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%;
  background:var(--rv-swatch); color:#fff; display:none; align-items:center; justify-content:center; font-size:13px; font-weight:900;
}
.rv-theme-opt.on .rv-theme-check { display:flex; }

/* ============================================================================
   NO-UI-SLOP PRIMITIVES
   The shared structure every RV program builds settings and detail pages from.
   Spec: `Docs/RV-Theme & UI Design Doc.md` section 4.

   These exist because of one measured defect: on the Settings pages a help
   paragraph sat exactly as far below its own control as the NEXT setting's
   heading sat below it, so the paragraph belonged to neither and the reader had
   to parse the sentence to find out what it described. Nineteen rows of that is
   a wall of text with no way in. Nothing was wrong with any single row. The
   failure was entirely in the gaps.

   The rule: space BETWEEN groups is at least double the space INSIDE a group.
   Two steps up the scale, never one. One step does not read as a boundary.
   ============================================================================ */

/* ----- A titled cluster of settings ---------------------------------------- */
.rv-group { margin: 0 0 var(--rv-s-6); }
.rv-group__title {
  margin: 0 0 var(--rv-s-3);
  padding-bottom: var(--rv-s-2);
  border-bottom: 1px solid var(--rv-hairline);
  font-size: var(--rv-fs-h2);
  line-height: var(--rv-lh-tight);
  font-weight: 600;
  color: var(--rv-text-strong);
}
/* A group gets an optional one-line description. It is NOT the same size as the
   title, or the two read as one paragraph. */
.rv-group__desc {
  margin: calc(var(--rv-s-2) * -1) 0 var(--rv-s-3);
  max-width: var(--rv-measure);
  font-size: var(--rv-fs-small);
  line-height: var(--rv-lh-body);
  color: var(--rv-text-dim);
}

/* ----- ONE setting. The boundary that was missing. ------------------------- */
.rv-setting {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  align-items: center;
  gap: var(--rv-s-2) var(--rv-s-4);
  padding: var(--rv-s-4);
  background: var(--rv-surface-1);
  border: 1px solid var(--rv-border-1);
  border-radius: var(--rv-r-lg);
}
.rv-setting + .rv-setting { margin-top: var(--rv-s-3); }

.rv-setting__label {
  font-size: var(--rv-fs-h3);
  line-height: var(--rv-lh-tight);
  font-weight: 600;
  color: var(--rv-text-strong);
}
/* The control column. Right-aligned so every control on the page shares one
   edge, which is what lets the eye run down the page instead of hunting. */
.rv-setting__ctl {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--rv-s-2);
  min-width: 0;
}
/* The fix: the hint lives INSIDE the bordered setting, so its owner is never
   ambiguous and it can be skipped wholesale. Capped short of the full width
   because past ~75 characters the eye loses the line return. */
.rv-setting__hint {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 68ch;
  font-size: var(--rv-fs-small);
  line-height: var(--rv-lh-body);
  color: var(--rv-text-dim);
}
/* A setting whose control needs the full width (a text area, a long list). */
.rv-setting--stacked { grid-template-columns: 1fr; }
.rv-setting--stacked .rv-setting__ctl { justify-content: flex-start; }
.rv-setting__wide { grid-column: 1 / -1; }

/* Emphasis inside hint copy. NOT the accent: gold is trained to mean
   "clickable", so a gold phrase in a paragraph reads as a button that is not
   there. Weight and a brighter neutral carry emphasis instead. */
.rv-setting__hint strong,
.rv-group__desc strong { font-weight: 600; color: var(--rv-text-strong); }

/* ----- Prose ---------------------------------------------------------------- */
.rv-prose { max-width: var(--rv-measure); line-height: var(--rv-lh-body); }
.rv-prose p { margin: 0; }
.rv-prose p + p { margin-top: var(--rv-s-4); }

/* ----- Page scaffold -------------------------------------------------------- */
.rv-page { padding: var(--rv-s-6) var(--rv-s-6) var(--rv-s-8); }
.rv-page__title {
  margin: 0 0 var(--rv-s-5);
  font-size: var(--rv-fs-h1);
  line-height: var(--rv-lh-tight);
  font-weight: 700;
  color: var(--rv-text-strong);
}
/* A heading belongs to what FOLLOWS it, so it needs more air above than below.
   Roughly 2.5:1. Equal space on both sides leaves it floating between two
   blocks, belonging to neither. */
.rv-section-title {
  margin: var(--rv-s-6) 0 var(--rv-s-3);
  font-size: var(--rv-fs-h2);
  line-height: var(--rv-lh-tight);
  font-weight: 600;
  color: var(--rv-text-strong);
}
.rv-section-title:first-child { margin-top: 0; }