/*!
 * Radio Rosetta — app styles.
 *
 * ARMOR TIER: .rr.rr.rr (0,3,0) + !important. Three-tier specificity alone is
 * not enough — a theme rule carrying !important beats any non-important rule
 * whatever its specificity, and themes use !important constantly. Triple scope
 * also outranks rules like `.site .entry-content p` that carry both. Blanket
 * strip first, then per-component restores at the same specificity, so source
 * order decides.
 *
 * Transitions always name their properties. `transition: .16s` means
 * transition-property: all, which animates the focus outline width up from 0 —
 * the focus ring looks missing for 160ms and reads as outline-width: 0.
 */
/* ===========================================================================
   RADIO ROSETTA — prototype styles
   Armor tier is .rr.rr.rr (0,3,0) + !important so it outranks theme rules that
   carry !important of their own. Blanket strip first, then restores, same
   specificity, source order decides. Lesson carried over from Exposure Forge.
   =========================================================================== */

/* --- blanket strip -------------------------------------------------------- */
.rr.rr.rr, .rr.rr.rr *, .rr.rr.rr *::before, .rr.rr.rr *::after {
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  background: none !important; box-shadow: none !important;
  font: inherit !important; color: inherit !important;
  text-align: left !important; text-transform: none !important;
  letter-spacing: normal !important; line-height: 1.55 !important;
  list-style: none !important; text-decoration: none !important;
  box-sizing: border-box !important; float: none !important;
  max-width: none !important; text-shadow: none !important;
  border-radius: 0 !important; outline-offset: 2px !important;
}

/* --- tokens --------------------------------------------------------------- */
.rr.rr.rr {
  /* Structure borrowed deliberately from Pocket Elmer so the two read as one
     system: a tinted canvas with white surfaces floating on it, generous
     radii, and two-layer shadows rather than hairline borders. The ink ramp is
     Pocket Elmer's, which was tuned for contrast — do not lighten it back.
     The accent is already shared: Pocket Elmer's --pe-cyan is this #0891b2. */
  --ink:      #0d1b2e;
  --ink-soft: #4a5b73;
  --ink-mute: #5f6e84;
  --line:     #dde5ef;
  --line-2:   #c6d3e3;
  --paper:    #ffffff;
  --wash:     #f4f7fb;
  --wash-2:   #eef3f9;
  --canvas:   #f2f6fb;

  --brand:      #0a7290;
  --brand-mid:  #0891b2;
  --brand-lite: #ecfeff;
  --brand-edge: #a5f3fc;
  --navy:       #10284a;

  --shadow:      0 1px 2px rgba(13,27,46,.04), 0 8px 24px rgba(13,27,46,.06);
  --shadow-lift: 0 2px 4px rgba(13,27,46,.06), 0 16px 40px rgba(13,27,46,.12);

  --warn:      #b45309;
  --warn-lite: #fffbeb;
  --warn-edge: #fde68a;

  --stop:      #b91c1c;
  --stop-lite: #fef2f2;
  --stop-edge: #fecaca;

  --ok:        #15803d;
  --ok-lite:   #f0fdf4;
  --ok-edge:   #bbf7d0;

  --r:  10px;
  --r2: 16px;
  --r3: 24px;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  background: var(--canvas) !important;
  display: block !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: var(--r3) !important;
  -webkit-text-size-adjust: 100% !important;
  isolation: isolate !important;
}

/* --- restores ------------------------------------------------------------- */
.rr.rr.rr b, .rr.rr.rr strong { font-weight: 700 !important; }
.rr.rr.rr em { font-style: italic !important; }
.rr.rr.rr button { cursor: pointer !important; font-family: inherit !important;
  -webkit-appearance: none !important; appearance: none !important; }
.rr.rr.rr input { font-family: inherit !important;
  -webkit-appearance: none !important; appearance: none !important; }
.rr.rr.rr :focus-visible {
  outline: 3px solid var(--brand-mid) !important; outline-offset: 2px !important;
  border-radius: 6px !important;
}

/* --- header --------------------------------------------------------------- */
/* The header is a deep band rather than another white panel. It anchors the
   app so it reads as a tool sitting on the page rather than as more page
   content — and it gives the family mark somewhere to sit that is properly
   its own. Navy is already the family colour: Pocket Elmer's --pe-navy. */
.rr.rr.rr .rr-top {
  position: relative !important; overflow: hidden !important;
  display: flex !important; align-items: center !important; gap: 16px !important;
  padding: 26px 28px 24px !important;
  flex-wrap: wrap !important;
  background: linear-gradient(115deg, #0a1b33 0%, var(--navy) 42%, #0d5f77 100%) !important;
  border-radius: var(--r3) var(--r3) 0 0 !important;
}
/* A single carrier wave across the band. Low contrast on purpose — it should
   register as texture, not as a picture of a sine wave. */
.rr.rr.rr .rr-top::after {
  content: "" !important; position: absolute !important; inset: 0 !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='80' viewBox='0 0 240 80'%3E%3Cpath d='M0 40 C 30 4, 60 4, 90 40 S 150 76, 180 40 S 240 4, 270 40' fill='none' stroke='%2367e8f9' stroke-width='2' stroke-opacity='.16'/%3E%3C/svg%3E") !important;
  background-repeat: repeat-x !important;
  background-position: right center !important;
  opacity: .42 !important;
  pointer-events: none !important;
}
.rr.rr.rr .rr-top > * { position: relative !important; z-index: 1 !important; }
/* The mark on the dark header. Its ring and body carry 32% and 55% opacity as
   presentation attributes, which is right on white and far too faint on navy —
   CSS overrides presentation attributes, so they are lifted here rather than
   forked into a second SVG. A soft glow separates it from the gradient. */
.rr.rr.rr .rr-top .rr-mark { color: #a5f3fc !important;
  filter: drop-shadow(0 0 14px rgba(103,232,249,.45)) !important; }
.rr.rr.rr .rr-top .rr-mark svg circle { opacity: .6 !important; }
.rr.rr.rr .rr-top .rr-mark svg rect { opacity: .95 !important; }
.rr.rr.rr .rr-top .rr-mark svg path { opacity: 1 !important; }
.rr.rr.rr .rr-h1 { color: #ffffff !important; }
.rr.rr.rr .rr-top .rr-sub { color: #e8f2fb !important; font-size: 16px !important;
  font-weight: 500 !important; }
.rr.rr.rr .rr-pill {
  color: #a5f3fc !important; background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(165,243,252,.28) !important;
}
.rr.rr.rr .rr-mark { flex: 0 0 auto !important; width: 62px !important; height: 62px !important;
  color: var(--brand) !important; }
.rr.rr.rr .rr-mark svg { display: block !important; width: 62px !important; height: 62px !important; }
.rr.rr.rr .rr-titles { flex: 1 1 240px !important; min-width: 0 !important; }
.rr.rr.rr .rr-h1 { font-size: 27px !important; font-weight: 800 !important;
  letter-spacing: -.025em !important; line-height: 1.1 !important; }
/* A direct child of the header so the mobile rules can reorder it. It takes a
   full row of its own and indents to line up under the title rather than the
   mark. */
.rr.rr.rr .rr-sub { font-size: 16px !important;
  flex: 1 0 100% !important; margin-top: 5px !important;
  line-height: 1.5 !important; padding-left: 78px !important; }
.rr.rr.rr .rr-pill {
  flex: 0 0 auto !important; font-size: 12px !important; font-weight: 700 !important;
  color: var(--brand) !important; background: var(--brand-lite) !important;
  border: 1px solid var(--brand-edge) !important; border-radius: 999px !important;
  padding: 5px 11px !important; white-space: normal !important;
}

/* --- layout --------------------------------------------------------------- */
.rr.rr.rr .rr-body { padding: 24px 26px 32px !important; }
.rr.rr.rr .rr-screen { display: none !important; }
.rr.rr.rr .rr-screen.is-on { display: block !important; }
.rr.rr.rr h2 { font-size: 24px !important; font-weight: 800 !important;
  letter-spacing: -.022em !important; line-height: 1.2 !important;
  color: var(--ink) !important; }
.rr.rr.rr h3 { font-size: 16px !important; font-weight: 700 !important; }
.rr.rr.rr p { font-size: 15.5px !important; color: var(--ink-soft) !important; }
.rr.rr.rr .rr-lede { margin-top: 8px !important; }
.rr.rr.rr .rr-gap { margin-top: 20px !important; }
.rr.rr.rr .rr-gap-s { margin-top: 12px !important; }

/* --- search --------------------------------------------------------------- */
.rr.rr.rr .rr-searchwrap { margin-top: 18px !important; position: relative !important; }
.rr.rr.rr .rr-search {
  width: 100% !important; padding: 15px 17px !important;
  border: 1px solid var(--line-2) !important; border-radius: var(--r2) !important;
  font-size: 16px !important; color: var(--ink) !important;
  background: var(--paper) !important;
  box-shadow: var(--shadow) !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
.rr.rr.rr .rr-search:focus { border-color: var(--brand-mid) !important;
  box-shadow: 0 0 0 4px var(--brand-lite) !important; outline: none !important; }
.rr.rr.rr .rr-search::placeholder { color: var(--ink-mute) !important; }
.rr.rr.rr .rr-hint { font-size: 13px !important; color: var(--ink-mute) !important;
  margin-top: 7px !important; }

/* --- cards ---------------------------------------------------------------- */
.rr.rr.rr .rr-grid { display: grid !important; gap: 12px !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  margin-top: 14px !important; }
/* Class heading. A rule and a label, so the break between handhelds and HF
   rigs is unmissable rather than implied by spacing. */
.rr.rr.rr .rr-classhead { margin-top: 26px !important; padding-top: 18px !important;
  border-top: 2px solid var(--line-2) !important; }
.rr.rr.rr .rr-classhead:first-child { margin-top: 20px !important;
  padding-top: 0 !important; border-top: 0 !important; }
.rr.rr.rr .rr-classhead h3 { font-size: 18px !important; font-weight: 800 !important;
  letter-spacing: -.015em !important; color: var(--ink) !important; }
.rr.rr.rr .rr-classhead h3::before {
  content: "" !important; display: inline-block !important;
  width: 9px !important; height: 9px !important; border-radius: 2px !important;
  background: var(--brand-mid) !important; margin-right: 9px !important;
  vertical-align: 1px !important;
}
.rr.rr.rr .rr-classhead p { font-size: 14px !important; color: var(--ink-mute) !important;
  margin-top: 4px !important; }
.rr.rr.rr .rr-card {
  /* Flex column with the meta line pushed to the bottom, so "13 tasks · 8
     models" lands on the same baseline across a row however long each
     description runs. Uneven boxes read as sloppy. */
  position: relative !important; overflow: hidden !important;
  display: flex !important; flex-direction: column !important;
  width: 100% !important; height: 100% !important;
  padding: 19px 20px !important; background: var(--paper) !important;
  border: 1px solid var(--line) !important; border-radius: var(--r2) !important;
  box-shadow: var(--shadow) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
/* A bar that runs in across the top edge on hover. Cheap, and it makes the
   grid feel responsive rather than static. */
.rr.rr.rr .rr-card::before {
  content: "" !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important;
  background: linear-gradient(90deg, var(--brand-mid), #67e8f9) !important;
  transform: scaleX(0) !important; transform-origin: left !important;
  transition: transform .22s ease !important;
}
.rr.rr.rr .rr-card:hover::before { transform: scaleX(1) !important; }
.rr.rr.rr .rr-card:hover { border-color: var(--brand-edge) !important;
  box-shadow: var(--shadow-lift) !important; transform: translateY(-3px) !important; }
/* These are <span> in the rendered markup. The blanket strip above sets no
   `display`, so without this they stay inline and the family name runs straight
   into its description with no break at all. Blockify explicitly rather than
   relying on the markup using divs — the markup has already differed once. */
.rr.rr.rr .rr-card-t { display: block !important;
  font-size: 16.5px !important; font-weight: 700 !important; line-height: 1.35 !important;
  color: var(--ink) !important; text-align: center !important; }
.rr.rr.rr .rr-card-d { display: block !important;
  font-size: 13.5px !important; color: var(--ink-mute) !important;
  line-height: 1.5 !important; margin-top: 8px !important; }
.rr.rr.rr .rr-card-m { display: block !important;
  font-size: 12.5px !important; color: var(--brand) !important;
  margin-top: auto !important; padding-top: 11px !important;
  border-top: 1px solid var(--line) !important;
  font-weight: 600 !important; text-align: center !important; }
.rr.rr.rr .rr-card-d { flex: 0 0 auto !important; padding-bottom: 11px !important; }

/* Says what kind of radio it is before you click. Genuinely useful — the
   interaction style is the thing that actually differs between families. */
.rr.rr.rr .rr-card-p {
  display: inline-block !important; align-self: center !important;
  margin-bottom: 9px !important; padding: 3px 10px !important;
  background: var(--wash-2) !important; border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .04em !important; text-transform: uppercase !important;
  color: var(--ink-mute) !important;
}

/* --- ask form ------------------------------------------------------------- */
.rr.rr.rr .rr-ask { margin-top: 16px !important; padding-top: 15px !important;
  border-top: 1px solid var(--line) !important; }
.rr.rr.rr .rr-ask-l { display: block !important; font-size: 14px !important;
  font-weight: 650 !important; color: var(--ink) !important; margin-bottom: 8px !important; }
.rr.rr.rr .rr-ask-row { display: flex !important; gap: 9px !important;
  flex-wrap: wrap !important; }
.rr.rr.rr .rr-ask-in {
  flex: 1 1 220px !important; min-width: 0 !important;
  padding: 11px 14px !important; font-size: 15px !important;
  border: 1px solid var(--line-2) !important; border-radius: var(--r) !important;
  background: var(--paper) !important; color: var(--ink) !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
.rr.rr.rr .rr-ask-in:focus { border-color: var(--brand-mid) !important;
  box-shadow: 0 0 0 4px var(--brand-lite) !important; outline: none !important; }
.rr.rr.rr .rr-ask .rr-btn { flex: 0 0 auto !important; }

/* --- task rows ------------------------------------------------------------ */
.rr.rr.rr .rr-tasks { display: grid !important; gap: 9px !important; margin-top: 14px !important; }
.rr.rr.rr .rr-task {
  display: flex !important; align-items: baseline !important; gap: 12px !important;
  width: 100% !important; padding: 15px 17px !important;
  background: var(--paper) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r2) !important;
  box-shadow: 0 1px 2px rgba(13,27,46,.04) !important;
  transition: background-color .16s ease, border-color .16s ease,
              box-shadow .16s ease, transform .16s ease !important;
}
.rr.rr.rr .rr-task:hover { background: var(--brand-lite) !important;
  border-color: var(--brand-edge) !important;
  box-shadow: var(--shadow) !important; transform: translateX(2px) !important; }
.rr.rr.rr .rr-task-t { display: block !important;
  font-weight: 650 !important; font-size: 15.5px !important;
  color: var(--ink) !important; flex: 0 1 auto !important; }
.rr.rr.rr .rr-task-d { display: block !important;
  font-size: 13.5px !important; color: var(--ink-mute) !important;
  flex: 1 1 auto !important; }

/* --- steps ---------------------------------------------------------------- */
.rr.rr.rr .rr-steps { margin-top: 20px !important;
  background: var(--paper) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r2) !important; box-shadow: var(--shadow) !important;
  padding: 4px 20px !important; }
.rr.rr.rr .rr-step {
  position: relative !important;
  display: grid !important; grid-template-columns: 34px 1fr !important;
  gap: 15px !important; padding: 18px 0 !important;
  border-top: 1px solid var(--line-soft, var(--line)) !important;
}
.rr.rr.rr .rr-step:first-child { border-top: 0 !important; }
/* The rail. Runs between consecutive step numbers so the procedure reads as
   one continuous path rather than a stack of unrelated boxes. */
.rr.rr.rr .rr-step::before {
  content: "" !important; position: absolute !important;
  left: 15px !important; top: 48px !important; bottom: -1px !important;
  width: 2px !important; background: var(--brand-edge) !important;
  border-radius: 2px !important;
}
.rr.rr.rr .rr-step:last-child::before { display: none !important; }
.rr.rr.rr .rr-num {
  position: relative !important; z-index: 1 !important;
  width: 32px !important; height: 32px !important; border-radius: 999px !important;
  background: linear-gradient(180deg, var(--brand-mid) 0%, var(--brand) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(10,114,144,.28) !important;
  font-size: 14px !important; font-weight: 700 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.rr.rr.rr .rr-say { font-size: 16.5px !important; color: var(--ink) !important;
  font-weight: 550 !important; }
.rr.rr.rr .rr-keys { display: flex !important; flex-wrap: wrap !important;
  gap: 6px !important; margin-top: 10px !important; align-items: center !important; }
/* The keystroke chips are this app's signature, so they are built to read as
   the physical keys they describe: a light top face, a darker bottom edge, and
   monospace lettering like the legend printed on a radio. */
.rr.rr.rr .rr-key {
  display: inline-block !important; padding: 5px 10px !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--wash-2) 100%) !important;
  border: 1px solid var(--line-2) !important;
  border-bottom: 2px solid #aebdd1 !important;
  border-radius: 7px !important;
  box-shadow: 0 1px 1px rgba(13,27,46,.05) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 12.5px !important; font-weight: 700 !important; color: var(--ink) !important;
  white-space: nowrap !important; letter-spacing: .01em !important;
}
.rr.rr.rr .rr-key.is-touch {
  background: linear-gradient(180deg, #f4feff 0%, var(--brand-lite) 100%) !important;
  border-color: var(--brand-edge) !important;
  border-bottom-color: #67d3e8 !important; color: var(--brand) !important; }
.rr.rr.rr .rr-key.is-type { background: #fff !important;
  border-style: dashed !important; border-bottom-style: dashed !important;
  border-bottom-color: var(--line-2) !important; box-shadow: none !important; }
.rr.rr.rr .rr-arrow { color: var(--ink-mute) !important; font-size: 12px !important; }

.rr.rr.rr .rr-screenline {
  margin-top: 11px !important; padding: 9px 12px !important;
  background: var(--wash) !important; border-left: 3px solid var(--brand-mid) !important;
  border-radius: 0 6px 6px 0 !important; font-size: 14px !important;
  color: var(--ink-soft) !important;
}
.rr.rr.rr .rr-screenline b { color: var(--brand) !important; }
.rr.rr.rr .rr-why { margin-top: 9px !important; font-size: 14px !important;
  color: var(--ink-mute) !important; }
.rr.rr.rr .rr-gotcha {
  margin-top: 11px !important; padding: 11px 13px !important;
  background: var(--warn-lite) !important; border: 1px solid var(--warn-edge) !important;
  border-radius: var(--r) !important; font-size: 14.5px !important; color: #78350f !important;
}
.rr.rr.rr .rr-gotcha b { color: var(--warn) !important; }

/* --- notices -------------------------------------------------------------- */
.rr.rr.rr .rr-note {
  margin-top: 16px !important; padding: 16px 18px !important;
  border-radius: var(--r2) !important; border: 1px solid var(--line) !important;
  background: var(--paper) !important;
  box-shadow: 0 1px 2px rgba(13,27,46,.04) !important;
}
.rr.rr.rr .rr-note h3 { margin-bottom: 5px !important; }
.rr.rr.rr .rr-note p { font-size: 14.5px !important; }
.rr.rr.rr .rr-note.is-stop { background: var(--stop-lite) !important;
  border-color: var(--stop-edge) !important; }
.rr.rr.rr .rr-note.is-stop h3 { color: var(--stop) !important; }
.rr.rr.rr .rr-note.is-warn { background: var(--warn-lite) !important;
  border-color: var(--warn-edge) !important; }
.rr.rr.rr .rr-note.is-warn h3 { color: var(--warn) !important; }
.rr.rr.rr .rr-note.is-ok { background: var(--ok-lite) !important;
  border-color: var(--ok-edge) !important; }
.rr.rr.rr .rr-note.is-ok h3 { color: var(--ok) !important; }
.rr.rr.rr .rr-note.is-brand { background: var(--brand-lite) !important;
  border-color: var(--brand-edge) !important; }
.rr.rr.rr .rr-note.is-brand h3 { color: var(--brand) !important; }

/* --- need-first list ------------------------------------------------------ */
.rr.rr.rr .rr-need { margin-top: 8px !important; }
.rr.rr.rr .rr-need li {
  font-size: 14.5px !important; color: var(--ink-soft) !important;
  padding-left: 20px !important; position: relative !important; margin-top: 5px !important;
}
.rr.rr.rr .rr-need li::before {
  content: "" !important; position: absolute !important; left: 4px !important; top: 9px !important;
  width: 6px !important; height: 6px !important; border-radius: 999px !important;
  background: var(--brand-mid) !important;
}

/* --- buttons -------------------------------------------------------------- */
.rr.rr.rr .rr-btn {
  display: inline-block !important; padding: 12px 20px !important;
  background: linear-gradient(180deg, var(--brand-mid) 0%, var(--brand) 100%) !important;
  color: #fff !important;
  border-radius: var(--r) !important; font-size: 15px !important; font-weight: 650 !important;
  box-shadow: 0 2px 8px rgba(10,114,144,.22) !important;
  transition: box-shadow .16s ease, transform .16s ease !important;
}
.rr.rr.rr .rr-btn:hover { box-shadow: 0 4px 14px rgba(10,114,144,.32) !important;
  transform: translateY(-1px) !important; }
.rr.rr.rr .rr-btn.is-ghost { background: var(--paper) !important; color: var(--brand) !important;
  border: 1px solid var(--line-2) !important; }
.rr.rr.rr .rr-btn.is-ghost:hover { background: var(--wash) !important;
  border-color: var(--brand-mid) !important; }
.rr.rr.rr .rr-btnrow { display: flex !important; gap: 10px !important;
  flex-wrap: wrap !important; margin-top: 18px !important; }

/* --- back / crumbs -------------------------------------------------------- */
/* The back control is the most-used thing on the screen after the content
   itself, and as a bare text link it read as decoration. It is a real button:
   bordered, on a white surface, with a chevron that moves on hover. */
.rr.rr.rr .rr-back {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font-size: 14px !important; color: var(--brand) !important; font-weight: 650 !important;
  padding: 9px 16px 9px 13px !important; margin-bottom: 16px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(13,27,46,.05) !important;
  transition: background-color .16s ease, border-color .16s ease,
              box-shadow .16s ease, color .16s ease !important;
}
.rr.rr.rr .rr-back::before {
  content: "\2190" !important;
  font-size: 16px !important; line-height: 1 !important;
  transition: transform .16s ease !important;
}
.rr.rr.rr .rr-back:hover {
  background: var(--brand-lite) !important; border-color: var(--brand-edge) !important;
  box-shadow: var(--shadow) !important;
}
.rr.rr.rr .rr-back:hover::before { transform: translateX(-3px) !important; }

.rr.rr.rr .rr-nav { display: flex !important; flex-wrap: wrap !important;
  gap: 9px !important; margin-bottom: 16px !important; }
.rr.rr.rr .rr-nav .rr-back { margin-bottom: 0 !important; }
/* The secondary route out reads as available but not as the default action. */
.rr.rr.rr .rr-back.is-alt { color: var(--ink-soft) !important;
  background: transparent !important; border-color: var(--line) !important;
  box-shadow: none !important; font-weight: 600 !important; }
.rr.rr.rr .rr-back.is-alt:hover { color: var(--brand) !important;
  background: var(--paper) !important; border-color: var(--line-2) !important; }

/* --- coverage ------------------------------------------------------------- */
.rr.rr.rr .rr-cover {
  display: flex !important; gap: 10px !important; flex-wrap: wrap !important;
  align-items: center !important; margin-top: 24px !important;
  padding: 14px 18px !important;
  background: var(--paper) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r2) !important;
  box-shadow: 0 1px 2px rgba(13,27,46,.04) !important;
  font-size: 13px !important; color: var(--ink-mute) !important;
}
.rr.rr.rr .rr-covnum { font-weight: 800 !important; color: var(--brand) !important;
  font-size: 15px !important; }

/* --- verification badge --------------------------------------------------- */
.rr.rr.rr .rr-vb {
  display: inline-block !important; font-size: 11.5px !important; font-weight: 700 !important;
  padding: 3px 9px !important; border-radius: 999px !important;
  letter-spacing: .02em !important; text-transform: uppercase !important;
}
.rr.rr.rr .rr-vb.is-verified { background: var(--ok-lite) !important; color: var(--ok) !important;
  border: 1px solid var(--ok-edge) !important; }
.rr.rr.rr .rr-vb.is-walked { background: var(--brand-lite) !important; color: var(--brand) !important;
  border: 1px solid var(--brand-edge) !important; }
.rr.rr.rr .rr-vb.is-primary { background: var(--wash-2) !important; color: var(--ink-soft) !important;
  border: 1px solid var(--line-2) !important; }
.rr.rr.rr .rr-vb.is-single { background: var(--warn-lite) !important; color: var(--warn) !important;
  border: 1px solid var(--warn-edge) !important; }
.rr.rr.rr .rr-vb.is-disputed { background: var(--stop-lite) !important; color: var(--stop) !important;
  border: 1px solid var(--stop-edge) !important; }

/* --- sources -------------------------------------------------------------- */
.rr.rr.rr .rr-src { margin-top: 22px !important; padding-top: 14px !important;
  border-top: 1px solid var(--line) !important; }
.rr.rr.rr .rr-src h3 { font-size: 13px !important; text-transform: uppercase !important;
  letter-spacing: .05em !important; color: var(--ink-mute) !important; }
.rr.rr.rr .rr-src li { font-size: 13.5px !important; color: var(--ink-mute) !important;
  margin-top: 6px !important; }
.rr.rr.rr .rr-src a { color: var(--brand) !important; text-decoration: underline !important; }

/* --- queue ---------------------------------------------------------------- */
.rr.rr.rr .rr-q { display: grid !important; gap: 7px !important; margin-top: 12px !important; }
.rr.rr.rr .rr-qrow {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 11px 14px !important; background: var(--wash) !important;
  border: 1px solid var(--line) !important; border-radius: var(--r) !important;
}
.rr.rr.rr .rr-qname { flex: 1 1 auto !important; font-size: 14.5px !important;
  font-weight: 600 !important; color: var(--ink) !important; }
.rr.rr.rr .rr-qvotes { font-size: 13px !important; color: var(--ink-mute) !important; }
.rr.rr.rr .rr-qbtn {
  flex: 0 0 auto !important; padding: 6px 13px !important; font-size: 13px !important;
  font-weight: 700 !important; color: var(--brand) !important;
  background: var(--paper) !important; border: 1px solid var(--brand-edge) !important;
  border-radius: 999px !important;
  transition: background-color .16s ease, color .16s ease !important;
}
.rr.rr.rr .rr-qbtn:hover { background: var(--brand) !important; color: #fff !important; }
.rr.rr.rr .rr-qbtn[disabled] { opacity: .5 !important; cursor: default !important; }

/* --- workbench (draft mode) ----------------------------------------------- */
.rr.rr.rr .rr-wb { margin-top: 26px !important; padding: 16px !important;
  background: #1e293b !important; border-radius: var(--r2) !important; }
.rr.rr.rr .rr-wb h3 { color: #e2e8f0 !important; }
.rr.rr.rr .rr-wb p, .rr.rr.rr .rr-wb li { color: #94a3b8 !important; font-size: 13.5px !important; }
.rr.rr.rr .rr-wb li { margin-top: 6px !important; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 560px) {
  .rr.rr.rr .rr-h1 { font-size: 21px !important; }
  .rr.rr.rr .rr-body { padding: 18px 14px 28px !important; }
  .rr.rr.rr .rr-top { padding: 16px 16px 14px !important;
    align-items: center !important; gap: 12px !important; }
  /* The mark and the title share the top row; the subtitle takes the full
     width underneath. Without this the title wraps into a narrow column beside
     the mark and the version pill is pushed onto a line of its own. */
  .rr.rr.rr .rr-mark { width: 44px !important; height: 44px !important; }
  .rr.rr.rr .rr-mark svg { width: 44px !important; height: 44px !important; }
  .rr.rr.rr .rr-titles { flex: 1 1 0 !important; }
  .rr.rr.rr .rr-h1 { font-size: 20px !important; }
  .rr.rr.rr .rr-sub { flex: 1 0 100% !important; order: 3 !important;
    margin-top: 6px !important; font-size: 15px !important;
    line-height: 1.45 !important; padding-left: 0 !important; }
  /* A version number is for us, not for the reader. It is the first thing to
     go when the row is tight. */
  .rr.rr.rr .rr-pill { display: none !important; }
  .rr.rr.rr .rr-steps { padding: 4px 14px !important; }
  .rr.rr.rr { border-radius: 0 !important; }
  .rr.rr.rr .rr-top { border-radius: 0 !important; }
  .rr.rr.rr .rr-step { grid-template-columns: 26px 1fr !important; gap: 11px !important; }
  .rr.rr.rr .rr-num { width: 26px !important; height: 26px !important; font-size: 13px !important; }
  .rr.rr.rr .rr-say { font-size: 15.5px !important; }
  .rr.rr.rr .rr-task { flex-direction: column !important; gap: 5px !important; }
  .rr.rr.rr .rr-card { padding: 15px 16px !important; }
  .rr.rr.rr .rr-pill { font-size: 11px !important; }
}

/* ===========================================================================
   GUIDE PAGES
   Server-rendered into ordinary theme content, so these stay unarmored and
   inherit the theme's typography on purpose — a reader should feel they are on
   the site, not inside a widget. But they carry the same visual language as the
   app: white surfaces on a tint, generous radii, layered shadows, and the same
   physical-key chips.

   These styles are loaded by KCG_RR_Pages::assets(). They are NOT loaded by the
   shortcode, because a guide page never runs it.
   =========================================================================== */
.rr-guide { max-width: 46rem; }
.rr-guide-lede { font-size: 1.14em; line-height: 1.6; }
.rr-guide h2 { margin-top: 2em; letter-spacing: -.015em; }

.rr-guide-grid { display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  margin: 1.2rem 0 1.8rem; }
.rr-guide-card { display: flex !important; flex-direction: column;
  position: relative; overflow: hidden;
  padding: 1.15rem 1.2rem; background: #fff;
  border: 1px solid #dde5ef; border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(13,27,46,.04), 0 8px 24px rgba(13,27,46,.06);
  text-decoration: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.rr-guide-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, #0891b2, #67e8f9);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.rr-guide-card:hover::before { transform: scaleX(1); }
.rr-guide-card:hover { border-color: #a5f3fc; transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(13,27,46,.06), 0 16px 40px rgba(13,27,46,.12); }
.rr-guide-card-t { display: block; font-weight: 700; text-align: center;
  color: #0d1b2e; font-size: 1.05em; line-height: 1.35; }
.rr-guide-card-d { display: block; font-size: .9em; color: #4a5b73;
  margin-top: .5rem; padding-bottom: .7rem; line-height: 1.5; }
.rr-guide-card-m { display: block; font-size: .8em; color: #0a7290; font-weight: 700;
  margin-top: auto; padding-top: .7rem; border-top: 1px solid #eaf0f7;
  text-align: center; }

.rr-guide-class { margin-top: 1.8rem !important; padding-top: 1rem;
  border-top: 2px solid #c6d3e3; }
.rr-guide-class-d { font-size: .95em; color: #5f6e84; margin-top: .25rem; }
.rr-guide-toc { margin: .6rem 0 1.6rem; }
.rr-guide-toc li { margin-bottom: .3rem; }

/* Steps, with the same rail the app uses. */
.rr-guide-steps { margin: 1.1rem 0 1.3rem; padding: .3rem 0 .3rem 1.6rem;
  list-style: decimal; }
.rr-guide-steps > li { margin-bottom: 1.4rem; padding-left: .3rem; }
.rr-guide-steps > li::marker { color: #0a7290; font-weight: 700; }
.rr-guide-say { display: block; font-weight: 650; color: #0d1b2e; }
.rr-guide-keys { display: block; margin: .6rem 0; line-height: 2.1; }
.rr-guide-keys kbd { display: inline-block; padding: .28rem .6rem;
  background: linear-gradient(180deg, #fff 0%, #eef3f9 100%);
  border: 1px solid #c6d3e3; border-bottom: 2px solid #aebdd1;
  border-radius: .45rem; box-shadow: 0 1px 1px rgba(13,27,46,.05);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78em; font-weight: 700; color: #0d1b2e; white-space: nowrap; }
.rr-guide-keys kbd.is-touch { background: linear-gradient(180deg,#f4feff 0%,#ecfeff 100%);
  border-color: #a5f3fc; border-bottom-color: #67d3e8; color: #0a7290; }
.rr-guide-keys kbd.is-type { background: #fff; border-style: dashed;
  border-bottom-style: dashed; border-bottom-color: #c6d3e3; box-shadow: none; }
.rr-guide-sep { opacity: .45; margin: 0 .28rem; font-size: .8em; }
.rr-guide-shows { font-size: .78em; opacity: .62; margin-left: .3rem; }
.rr-guide-screen { display: block; margin: .55rem 0; padding: .6rem .85rem;
  background: #f4f7fb; border-left: 3px solid #0891b2;
  border-radius: 0 .45rem .45rem 0; font-size: .94em; color: #4a5b73; }
.rr-guide-screen b { color: #0a7290; }
.rr-guide-why { display: block; margin-top: .5rem; font-size: .94em; color: #5f6e84; }
.rr-guide-gotcha { display: block; margin-top: .6rem; padding: .7rem .9rem;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: .6rem;
  font-size: .95em; color: #78350f; }
.rr-guide-gotcha b { color: #b45309; }
.rr-guide-closing { padding: .9rem 1.1rem; background: #f0fdf4;
  border: 1px solid #bbf7d0; border-radius: .7rem; }
.rr-guide-verify { font-size: .84em; color: #5f6e84; font-style: italic; }

.rr-guide-need, .rr-guide-warn, .rr-guide-ok, .rr-guide-cta, .rr-guide-next {
  padding: 1rem 1.2rem; border-radius: .85rem; margin: 1.1rem 0 1.5rem;
  border: 1px solid #dde5ef; background: #fff;
  box-shadow: 0 1px 2px rgba(13,27,46,.04); }
.rr-guide-need { background: #ecfeff; border-color: #a5f3fc; }
.rr-guide-warn { background: #fffbeb; border-color: #fde68a; }
.rr-guide-ok   { background: #f0fdf4; border-color: #bbf7d0; }
.rr-guide-cta  { background: #f4f7fb; }
.rr-guide-need h3, .rr-guide-warn h3, .rr-guide-ok h3,
.rr-guide-cta h3, .rr-guide-next h3 { margin-top: 0; }
.rr-guide-need ul { margin: .5rem 0 0; }

.rr-guide-btn { display: inline-block; padding: .7rem 1.2rem;
  background: linear-gradient(180deg,#0891b2 0%,#0a7290 100%);
  color: #fff !important; border-radius: .6rem; font-weight: 650;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(10,114,144,.22);
  transition: box-shadow .16s ease, transform .16s ease; }
.rr-guide-btn:hover { box-shadow: 0 4px 14px rgba(10,114,144,.32);
  transform: translateY(-1px); }

.rr-guide-gotchas { margin: 1.1rem 0 1.5rem; padding-left: 0; list-style: none; }
.rr-guide-gotchas > li { padding: .9rem 1.1rem; margin-bottom: .7rem;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: .7rem;
  font-size: .96em; color: #78350f; }
.rr-guide-gotchas > li a { text-decoration: none; color: #0a7290; }
.rr-guide-gotchas > li a:hover { text-decoration: underline; }

.rr-related { max-width: 46rem; margin: 2rem auto 0; padding: 1.1rem 1.3rem;
  background: #f4f7fb; border: 1px solid #dde5ef; border-radius: .9rem; }
.rr-related h3 { margin-top: 0; }

@media (max-width: 560px) {
  .rr-guide-steps { padding-left: 1.2rem; }
  .rr-guide-keys { line-height: 2.3; }
}