/* ==========================================================================
   rediray.css — design tokens + shared components (product + marketing register)
   Source of truth: docs/design/brand-guidelines.md §9/§9.1 and docs/design/app.md §1/§6.
   Class contract: docs/design/frontend-contract.md. Prefix `rr-`, modifiers `--`,
   state classes .is-active .is-on .is-paused .is-open .is-selected.
   Page-specific rules live in static/css/pages/<area>.css and only reference --rr-* tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens (brand-guidelines.md §9, verbatim) + a few product-only additions
   -------------------------------------------------------------------------- */
:root {
  /* ---------- Core colors ---------- */
  --rr-orange:        #F97316;   /* primary action, the arrow, one highlight per view */
  --rr-ink:           #2b1d12;   /* text, outlines, hard shadows, dark blocks */
  --rr-cream:         #fff7ea;   /* page background; text on Ink */
  --rr-white:         #ffffff;   /* cards */
  --rr-input-bg:      #fffdf9;   /* inputs */

  /* ---------- Sand scale ---------- */
  --rr-sand-50:       #fff1de;   /* lightest tint; row/ghost hover */
  --rr-peach:         #ffe9c9;
  --rr-peach-2:       #ffd8a8;
  --rr-peach-3:       #fcd9b6;
  --rr-line-light:    #f3e3cc;   /* table-row dividers */
  --rr-line:          #e8d9c4;   /* 1.5px product borders, toggle-off, disabled fill */
  --rr-text-faint:    #b59a80;   /* placeholders, captions, disabled text */
  --rr-text-muted:    #8a6a4f;   /* secondary labels, eyebrows */
  --rr-text-soft:     #5b4636;   /* body prose, destinations */

  /* ---------- On-Ink (dark surface) colors ---------- */
  --rr-on-ink:            var(--rr-cream);
  --rr-on-ink-secondary:  #d8c2a8;   /* keys, labels */
  --rr-on-ink-highlight:  #ffb27a;   /* record types / highlighted tokens */
  --rr-on-ink-success:    #a3e635;   /* success in code/DNS blocks */

  /* ---------- Semantic / status (pale fill + dark text, same hue) ---------- */
  --rr-success-bg:    #dcfce7;  --rr-success-fg: #166534;  --rr-success-dot: #16a34a;
  --rr-warning-bg:    #fef3c7;  --rr-warning-fg: #92400e;
  --rr-info-bg:       #dbeafe;  --rr-info-fg:    #1e40af;
  --rr-method-bg:     #ede9fe;  --rr-method-fg:  #5b21b6;
  --rr-danger-bg:     #fef2f2;  --rr-danger-fg:  #b91c1c;  --rr-danger-border: #fecaca;
  --rr-paused-bg:     #f3e3cc;  --rr-paused-fg:  #5b4636;
  /* redirect-code aliases */
  --rr-code-301-bg: var(--rr-success-bg); --rr-code-301-fg: var(--rr-success-fg);
  --rr-code-302-bg: var(--rr-warning-bg); --rr-code-302-fg: var(--rr-warning-fg);
  --rr-code-308-bg: var(--rr-info-bg);    --rr-code-308-fg: var(--rr-info-fg);
  --rr-code-307-bg: var(--rr-method-bg);  --rr-code-307-fg: var(--rr-method-fg);

  /* ---------- Hover tints [cross-ref sibling prototypes] ---------- */
  --rr-hover-row:     #fff1de;
  --rr-hover-faint:   #fffaf1;
  --rr-hover-chip:    #ffe4c2;
  --rr-hover-danger:  #fef2f2;

  /* ---------- Typography ---------- */
  --rr-font-display:  'Bricolage Grotesque', sans-serif;
  --rr-font-text:     'DM Sans', sans-serif;
  --rr-font-mono:     ui-monospace, Menlo, monospace;

  --rr-fs-display-xl: 56px;   --rr-lh-display-xl: 1;     --rr-ls-display-xl: -.035em;  /* 56–72 */
  --rr-fs-display-l:  40px;   --rr-lh-display-l:  1.05;  --rr-ls-display-l:  -.03em;   /* 40–44 */
  --rr-fs-h1:         clamp(40px, 5vw, 60px);            /* page h1, lh 1, ls -.035em */
  --rr-fs-h2:         34px;   --rr-lh-h2: 1.05;          --rr-ls-h2: -.03em;
  --rr-fs-title:      30px;   --rr-lh-title: 1.1;        --rr-ls-title: -.03em;        /* 28–30 */
  --rr-fs-card-title: 20px;   --rr-lh-card-title: 1.2;   --rr-ls-card-title: -.02em;   /* 20–23 */
  --rr-fs-stat:       24px;                              /* product card stat, ls -.02em */
  --rr-fs-body-lg:    17px;   --rr-lh-body-lg: 1.6;      /* marketing prose */
  --rr-fs-body:       16px;   --rr-lh-body: 1.55;        /* 15–17 */
  --rr-fs-input:      15px;
  --rr-fs-ui:         14px;   --rr-lh-ui: 1.4;           /* 13–14, weight 500–700 */
  --rr-fs-ui-sm:      13px;
  --rr-fs-caption:    12px;   --rr-ls-caption: .02em;    /* weight 700, color text-faint */
  --rr-fs-badge:      11px;                              /* 11–12, weight 700 */
  --rr-fs-code:       13px;   --rr-lh-code: 1.9;         /* 13–14 */

  --rr-fw-display:    800;
  --rr-fw-body:       400;
  --rr-fw-label:      500;    /* nav, labels */
  --rr-fw-semibold:   600;    /* secondary/ghost buttons, chips, input labels */
  --rr-fw-bold:       700;    /* primary buttons, row titles, captions, badges */

  /* ---------- Radii ---------- */
  --rr-r-badge:       6px;
  --rr-r-input:       10px;
  --rr-r-button:      12px;   /* 12–14 */
  --rr-r-block:       14px;   /* Ink code blocks, small note cards */
  --rr-r-card-sm:     16px;
  --rr-r-card:        18px;   /* 18–22 */
  --rr-r-card-lg:     22px;
  --rr-r-pill:        999px;
  --rr-r-mark:        28%;    /* logo mark: 28% of side */

  /* ---------- Borders ---------- */
  --rr-bw-marketing:  2px;    /* Ink outlines, marketing + primary */
  --rr-bw-product:    1.5px;  /* sand borders, product cards + inputs */
  --rr-border-mkt:    2px solid var(--rr-ink);
  --rr-border:        1.5px solid var(--rr-line);
  --rr-border-row:    1.5px solid var(--rr-line-light);
  --rr-border-danger: 2px solid var(--rr-danger-border);

  /* ---------- Hard shadows (solid Ink offsets, zero blur) ---------- */
  --rr-shadow-3:      3px 3px 0 var(--rr-ink);    /* product primary button, sticker badge */
  --rr-shadow-4:      4px 4px 0 var(--rr-ink);    /* marketing primary button */
  --rr-shadow-5:      5px 5px 0 var(--rr-ink);    /* marketing card (small) */
  --rr-shadow-6:      6px 6px 0 var(--rr-ink);    /* marketing cards */
  --rr-shadow-10:     10px 10px 0 var(--rr-ink);  /* hero mockups */
  --rr-shadow-float:  0 10px 30px rgba(43,29,18,.18);  /* [derived] toasts/drawers only */

  /* ---------- Focus ring ---------- */
  --rr-focus-ring:    2px solid var(--rr-orange);
  --rr-focus-offset:  1px;

  /* ---------- Tilt (marketing only) ---------- */
  --rr-tilt-mark:     -8deg;
  --rr-tilt-card:     -2deg;
  --rr-tilt-sticker:  6deg;

  /* ---------- Motion ---------- */
  --rr-dur-fast:      150ms;
  --rr-dur:           200ms;
  --rr-dur-slow:      250ms;
  --rr-ease:          ease;
  --rr-float-dur:     4.5s;   /* 4–5s hero-sticker float, the only loop */

  /* ---------- Layout ---------- */
  --rr-page-max:      1080px;
  --rr-page-pad-x:    32px;
  --rr-page-pad-top:  56px;
  --rr-page-pad-bot:  96px;
  --rr-section-gap:   72px;
  --rr-grid-gap:      16px;
  --rr-prose-max:     640px;

  /* ---------- Toggle ---------- */
  --rr-toggle-w: 38px; --rr-toggle-h: 22px; --rr-toggle-knob: 16px; --rr-toggle-pad: 3px;

  /* ---------- Product-register additions (app.md §6, not in the §9 sheet) ---------- */
  --rr-shadow-8:      8px 8px 0 var(--rr-ink);          /* auth / onboarding cards */
  --rr-shadow-toast:  0 10px 30px rgba(43,29,18,.25);   /* toast soft shadow */
  --rr-scrim:         rgba(43,29,18,.35);               /* drawer scrim */
  --rr-dot-off:       #d6c2a8;                          /* paused status dot */
  --rr-side-w:        232px;                            /* app sidebar */
  --rr-drawer-w:      min(100%, 520px);
}

/* --------------------------------------------------------------------------
   2. Global styles (app.md §1.0, dc-dsl-runtime.md §15)
   -------------------------------------------------------------------------- */
html { color-scheme: light; }
html, body { height: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--rr-cream);
  color: var(--rr-ink);
  font-family: var(--rr-font-text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--rr-ink); text-decoration: none; }
a:hover { color: var(--rr-orange); }
input, select, button, textarea { font-family: inherit; }
button { cursor: pointer; }
input:focus, select:focus, textarea:focus { outline: var(--rr-focus-ring); outline-offset: var(--rr-focus-offset); }
:focus-visible { outline: var(--rr-focus-ring); outline-offset: var(--rr-focus-offset); }
code, kbd, pre, samp { font-family: var(--rr-font-mono); }
img, svg { max-width: 100%; }
/* The hidden attribute must beat author `display` values (app.js toggles el.hidden on grid rows). */
[hidden] { display: none !important; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toastin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Visually hidden but focusable (radio inputs behind pill/zone labels). */
.rr-vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Logo lockup (brand §2; app shell uses --sm)
   <a class="rr-logo [rr-logo--sm|--on-ink|--on-orange]"><span class="rr-logo__mark">↪</span>rediray</a>
   -------------------------------------------------------------------------- */
.rr-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--rr-font-display); font-weight: 800; font-size: 23px; letter-spacing: -.02em;
  color: var(--rr-ink); line-height: 1; text-transform: none;
}
.rr-logo:hover { color: var(--rr-ink); }
.rr-logo__mark {
  width: 32px; height: 32px; flex: none;
  background: var(--rr-orange); color: #fff; border-radius: 9px;
  display: grid; place-items: center; font-size: 19px; line-height: 1;
  transform: rotate(var(--rr-tilt-mark));
}
.rr-logo--sm { font-size: 21px; }
.rr-logo--sm .rr-logo__mark { width: 30px; height: 30px; font-size: 18px; }
.rr-logo--on-ink, .rr-logo--on-ink:hover { color: var(--rr-cream); }
.rr-logo--on-orange, .rr-logo--on-orange:hover { color: #fff; }
.rr-logo--on-orange .rr-logo__mark { background: var(--rr-ink); color: var(--rr-cream); }
.rr-logo__duck { width: 41px; height: 42px; object-fit: contain; flex: none; }
.rr-logo--sm { font-size: 21px; gap: 10px; }
.rr-logo--sm .rr-logo__duck { width: 33px; height: 34px; }
.rr-duck-empty { display: block; width: 104px; height: 106px; object-fit: contain; margin: 0 auto 10px; }
.rr-duck-paused { width: 54px; height: 55px; object-fit: contain; }
.rr-duck-health { width: 62px; height: 63px; object-fit: contain; }
.rr-health__status { display: inline-flex; align-items: center; gap: 10px; }
.rr-duck-upsell { position: absolute; left: 16px; bottom: 8px; width: 92px; height: 94px; object-fit: contain; pointer-events: none; }
.rr-duck-billing { position: absolute; right: 12px; bottom: 10px; width: 88px; height: 90px; object-fit: contain; opacity: .9; pointer-events: none; }

/* --------------------------------------------------------------------------
   4. Buttons
   <button class="rr-btn rr-btn--primary">+ New redirect</button>
   <a class="rr-btn rr-btn--secondary" href="…">Import CSV</a>
   -------------------------------------------------------------------------- */
.rr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; flex-shrink: 0; vertical-align: middle;
  font-size: var(--rr-fs-ui); font-weight: 600; line-height: 20px; text-align: center;
  border: 0; border-radius: var(--rr-r-button); background: transparent; color: var(--rr-ink);
  padding: 10px 16px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--rr-dur-fast) var(--rr-ease), box-shadow var(--rr-dur-fast) var(--rr-ease),
              background var(--rr-dur-fast) var(--rr-ease), color var(--rr-dur-fast) var(--rr-ease);
}
.rr-btn:focus-visible { outline: var(--rr-focus-ring); outline-offset: 2px; }
.rr-btn:disabled, .rr-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* Primary: the one orange element. In-app 3px shadow → 4px on hover. */
.rr-btn--primary { font-weight: 700; background: var(--rr-orange); color: #fff; padding: 11px 18px; box-shadow: var(--rr-shadow-3); }
.rr-btn--primary:hover { color: #fff; transform: translate(-1px, -1px); box-shadow: var(--rr-shadow-4); }
/* Large (auth / onboarding): 15px, 4px shadow → 5px on hover.
   --lg = 12px 18px ("Back", "Continue with GitHub"); --xl = 14px all sides ("Sign in →", "Continue →"). */
.rr-btn--lg { min-height: 48px; font-size: 15px; padding: 12px 18px; }
.rr-btn--xl { min-height: 52px; font-size: 15px; padding: 14px; }
.rr-btn--primary.rr-btn--lg, .rr-btn--primary.rr-btn--xl { box-shadow: var(--rr-shadow-4); }
.rr-btn--primary.rr-btn--lg:hover, .rr-btn--primary.rr-btn--xl:hover { box-shadow: var(--rr-shadow-5); }
/* Success primary (onboarding "Go to dashboard →" once DNS is verified). */
.rr-btn--primary.is-ok { background: var(--rr-success-dot); }

/* Secondary: white, 2px Ink border, sand-50 hover. */
.rr-btn--secondary { background: #fff; border: var(--rr-border-mkt); color: var(--rr-ink); padding: 10px 16px; }
.rr-btn--secondary:hover { background: var(--rr-sand-50); color: var(--rr-ink); }
.rr-btn--secondary.rr-btn--lg { padding: 12px 18px; }

/* Dark: Ink "commit" action inside forms; hover orange. Matches "Add" (app.md §1.6: 2px border,
   10px 16px). "Invite" (app.md §1.8) is border 0 + 11px 18px — the Team page CSS overrides that. */
.rr-btn--dark { font-weight: 700; background: var(--rr-ink); color: var(--rr-cream); border: 2px solid var(--rr-ink); border-radius: var(--rr-r-input); padding: 10px 16px; }
.rr-btn--dark:hover { background: var(--rr-orange); border-color: var(--rr-orange); color: #fff; }

/* Danger: pale red border, red text, pale red hover. */
.rr-btn--danger { background: #fff; border: var(--rr-border-danger); color: var(--rr-danger-fg); padding: 10px 16px; }
.rr-btn--danger:hover { background: var(--rr-hover-danger); color: var(--rr-danger-fg); }

/* Small row action ("Verify", "Remove", "Add rule"). */
.rr-btn--sm { min-height: 32px; font-size: 12px; font-weight: 600; line-height: 16px; background: #fff; border: var(--rr-border); border-radius: 8px; padding: 6px 10px; color: var(--rr-ink); }
.rr-btn--sm:hover { background: var(--rr-sand-50); color: var(--rr-ink); }
.rr-btn--sm.rr-btn--danger { border: var(--rr-border); color: var(--rr-danger-fg); }
.rr-btn--sm.rr-btn--danger:hover { background: var(--rr-hover-danger); }

/* Text-only link button ("Upgrade →", "PDF", "Skip for now" with .rr-muted). */
.rr-btn--link { min-height: 0; background: none; border: 0; border-radius: 0; padding: 0; font-weight: 700; color: var(--rr-orange); white-space: normal; }
.rr-btn--link:hover { color: var(--rr-orange); text-decoration: underline; }
.rr-btn--link.rr-muted { font-weight: 400; color: var(--rr-text-muted); }
.rr-btn--link.rr-muted:hover { color: var(--rr-orange); }

.rr-btn--block { width: 100%; }
.rr-btn--grow { flex: 1; }

/* --------------------------------------------------------------------------
   5. Inputs
   <label class="rr-field">Source<input class="rr-input rr-input--mono" …></label>
   <div class="rr-hint">…</div>  <div class="rr-error">…</div>
   -------------------------------------------------------------------------- */
.rr-input, .rr-select, .rr-textarea {
  width: 100%; min-height: 44px; border: var(--rr-border); border-radius: var(--rr-r-input);
  padding: 11px 13px; font-size: var(--rr-fs-input); background: var(--rr-input-bg); color: var(--rr-ink);
  font-family: inherit; line-height: normal;
}
.rr-input::placeholder, .rr-textarea::placeholder { color: var(--rr-text-faint); opacity: 1; }
.rr-input--mono { font-family: var(--rr-font-mono); }
.rr-input--md { padding: 12px 14px; }                       /* login fields: 15px, 12px 14px */
.rr-input--lg { font-size: 16px; padding: 12px 14px; }      /* onboarding fields: 16px */
.rr-input--sm { font-size: var(--rr-fs-ui); padding: 9px 12px; }
.rr-input--auto, .rr-select--auto { width: auto; }
.rr-select { padding: 10px 12px; font-size: var(--rr-fs-ui); cursor: pointer; }
.rr-select--sm { min-height: 32px; border-radius: 8px; padding: 7px 10px; font-size: var(--rr-fs-ui-sm); }
.rr-input[aria-invalid="true"], .rr-input.is-invalid { border-color: var(--rr-danger-border); }

.rr-label { display: block; font-size: var(--rr-fs-ui-sm); font-weight: 600; color: var(--rr-text-soft); }
.rr-field { display: grid; gap: 6px; font-size: var(--rr-fs-ui-sm); font-weight: 600; color: var(--rr-text-soft); }
.rr-field + .rr-field { margin-top: 14px; }
.rr-hint { font-size: 12px; color: var(--rr-text-muted); margin: 6px 0 0; font-weight: 400; }
.rr-hint code, .rr-inline-code { font-family: var(--rr-font-mono); font-size: .95em; background: var(--rr-sand-50); border-radius: 4px; padding: 1px 4px; }
.rr-error { margin-top: 12px; color: var(--rr-danger-fg); font-size: var(--rr-fs-ui-sm); font-weight: 600; }

/* Divider with a word in the middle ("or"). */
.rr-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--rr-text-faint); font-size: var(--rr-fs-ui-sm); }
.rr-divider::before, .rr-divider::after { content: ""; flex: 1; height: 1.5px; background: var(--rr-line-light); }

/* --------------------------------------------------------------------------
   6. Pills, badges, chips, dots, status, switch
   -------------------------------------------------------------------------- */
/* Filter / range pill. <a|button class="rr-pill is-active">All</a> */
.rr-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: var(--rr-border); background: #fff; color: var(--rr-text-soft);
  border-radius: var(--rr-r-pill); padding: 7px 12px; font-size: var(--rr-fs-ui-sm); font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: normal; white-space: nowrap;
}
/* No hover state: the prototype's filter pills carry none (app.md §1.4). */
.rr-pill.is-active, .rr-pill:has(input:checked) { background: var(--rr-ink); color: var(--rr-cream); border-color: var(--rr-ink); }
.rr-pill--sm { padding: 6px 12px; font-size: 12px; }
.rr-pills { display: flex; gap: 6px; flex-wrap: wrap; }

/* Status-code badge. <span class="rr-code {{ r.code|code_class }}">301</span> */
.rr-code {
  display: inline-block; font-weight: 700; font-size: var(--rr-fs-badge); line-height: normal;
  padding: 4px 10px; border-radius: var(--rr-r-badge); text-align: center; white-space: nowrap;
  background: var(--rr-paused-bg); color: var(--rr-paused-fg);
}
.rr-code--cell { display: block; padding: 4px 0; }          /* fills its grid column */
.rr-code--sm { padding: 3px 8px; }
.code-301 { background: var(--rr-code-301-bg); color: var(--rr-code-301-fg); }
.code-302 { background: var(--rr-code-302-bg); color: var(--rr-code-302-fg); }
.code-307 { background: var(--rr-code-307-bg); color: var(--rr-code-307-fg); }
.code-308 { background: var(--rr-code-308-bg); color: var(--rr-code-308-fg); }
.code-other { background: var(--rr-paused-bg); color: var(--rr-paused-fg); }

/* Zone chip. <span class="rr-chip">US</span> */
.rr-chip {
  display: inline-block; font-size: var(--rr-fs-badge); font-weight: 700; line-height: normal;
  background: var(--rr-sand-50); border: var(--rr-border); border-radius: var(--rr-r-badge);
  padding: 3px 8px; text-align: center; white-space: nowrap;
}
.rr-chip--cell { display: block; padding: 3px 0; }

/* 8px status dot. <span class="rr-dot rr-dot--on"></span> */
.rr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rr-dot-off); flex: none; vertical-align: middle; }
.rr-dot--on { background: var(--rr-success-dot); }
.rr-dot--off { background: var(--rr-dot-off); }
.rr-dot--pending { background: var(--rr-orange); }

/* Status pill (detail header). <span class="rr-status rr-status--live">Live</span> */
.rr-status { display: inline-block; font-size: 12px; font-weight: 700; border-radius: var(--rr-r-pill); padding: 4px 10px; line-height: normal; }
.rr-status--live { background: var(--rr-success-bg); color: var(--rr-success-fg); }
.rr-status--paused { background: var(--rr-paused-bg); color: var(--rr-paused-fg); }
/* Inline status text (dot + word): Verified / Pending DNS / Active / Invited. */
.rr-status-text { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.rr-status-text--ok { color: var(--rr-success-fg); }
.rr-status-text--pending { color: var(--rr-warning-fg); }

/* Switch 38×22. Works as <button type="submit" class="rr-switch is-on"> and as
   <label class="rr-switch"><input type="checkbox" class="rr-vh" checked></label>. */
.rr-switch {
  position: relative; display: inline-block; flex: none;
  width: var(--rr-toggle-w); height: var(--rr-toggle-h); border-radius: calc(var(--rr-toggle-h) / 2);
  border: 0; padding: 0; margin: 0; background: var(--rr-line); cursor: pointer; vertical-align: middle;
  transition: background var(--rr-dur-fast) var(--rr-ease);
}
.rr-switch::after {
  content: ""; position: absolute; top: var(--rr-toggle-pad); left: var(--rr-toggle-pad);
  width: var(--rr-toggle-knob); height: var(--rr-toggle-knob); border-radius: 50%; background: #fff;
  transition: left var(--rr-dur-fast) var(--rr-ease);
}
.rr-switch.is-on, .rr-switch:has(input:checked) { background: var(--rr-orange); }
.rr-switch.is-on::after, .rr-switch:has(input:checked)::after { left: 19px; }
.rr-switch:has(input:focus-visible) { outline: var(--rr-focus-ring); outline-offset: 2px; }

/* Option row with a switch on the right (drawer toggles). */
.rr-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: var(--rr-border); border-radius: var(--rr-r-button); padding: 12px 14px; }
.rr-option__label { font-size: var(--rr-fs-ui); font-weight: 600; }
.rr-option__desc { font-size: 12px; color: var(--rr-text-muted); }
.rr-options { display: grid; gap: 10px; }

/* Choice tile: status-code option / edge-zone option (radio behind a label).
   <label class="rr-choice"><input type="radio" class="rr-vh" …><span class="rr-choice__label">301</span><span class="rr-choice__desc">Permanent</span></label> */
.rr-choice {
  display: grid; gap: 1px; text-align: left; cursor: pointer;
  border: var(--rr-border); background: #fff; color: var(--rr-text-soft);
  border-radius: var(--rr-r-input); padding: 8px 12px; font-size: var(--rr-fs-ui-sm); font-weight: 700; line-height: normal;
}
/* No hover state: zone / status-code tiles carry none in the prototype. */
.rr-choice.is-selected, .rr-choice:has(input:checked) { background: var(--rr-ink); color: var(--rr-cream); border-color: var(--rr-ink); }
.rr-choice:has(input:focus-visible) { outline: var(--rr-focus-ring); outline-offset: 2px; }
.rr-choice__desc { font-size: 11px; font-weight: 500; opacity: .75; }
.rr-choices { display: flex; gap: 6px; flex-wrap: wrap; }
/* Zone variant: 2-column grid, 12px radius, 14px label. */
.rr-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rr-zone { border-radius: var(--rr-r-button); padding: 10px 12px; font-size: var(--rr-fs-ui); }
.rr-zone .rr-choice__desc { font-size: 12px; }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.rr-card { background: #fff; border: var(--rr-border); border-radius: var(--rr-r-card); padding: 22px; }
.rr-card--flush { padding: 0; overflow: hidden; }            /* table cards */
.rr-card--kpi { border-radius: var(--rr-r-card-sm); padding: 18px 20px; }
.rr-card--auth { border: var(--rr-border-mkt); border-radius: var(--rr-r-card-lg); padding: 36px; box-shadow: var(--rr-shadow-8); width: 100%; position: relative; }
.rr-card--panel { border: var(--rr-border-mkt); border-radius: var(--rr-r-card); }
.rr-card--panel.is-open { animation: fadein var(--rr-dur-slow) var(--rr-ease); }
.rr-card--orange { background: var(--rr-orange); color: #fff; border: var(--rr-border-mkt); box-shadow: var(--rr-shadow-6); }
.rr-card__label { font-size: var(--rr-fs-ui-sm); color: var(--rr-text-muted); font-weight: 600; margin: 0 0 14px; }
.rr-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.rr-kpi-label { font-size: var(--rr-fs-ui-sm); color: var(--rr-text-muted); font-weight: 600; }
.rr-kpi-value { font-family: var(--rr-font-display); font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; line-height: 1.1; }
.rr-kpi-sub { font-size: 12px; font-weight: 600; margin-top: 2px; color: var(--rr-text-muted); }
.rr-kpi-sub--up { color: var(--rr-success-dot); }
.rr-kpi-sub--accent { color: var(--rr-orange); }

/* Key/value row list inside a card ("Rule" card). */
.rr-kv { display: grid; gap: 10px; }
.rr-kv__row { display: flex; justify-content: space-between; gap: 12px; border-bottom: var(--rr-border-row); padding-bottom: 10px; font-size: var(--rr-fs-ui); }
.rr-kv__key { color: var(--rr-text-muted); }
.rr-kv__val { font-weight: 600; text-align: right; }

/* --------------------------------------------------------------------------
   8. Table primitives (CSS-grid rows; columns come from a --cols custom property)
   <div class="rr-table" style="--cols: …; --min: 760px">
     <div class="rr-table__inner">
       <div class="rr-table__head"><span>SOURCE</span>…</div>
       <div class="rr-table__row [is-paused]" data-row data-href="…">…</div>
   -------------------------------------------------------------------------- */
.rr-table { overflow-x: auto; }
.rr-table__inner { min-width: var(--min, 0); }
.rr-table__head, .rr-table__row { display: grid; grid-template-columns: var(--cols, 1fr); gap: 12px; align-items: center; }
.rr-table__head { padding: 10px 18px; font-size: 12px; font-weight: 700; color: var(--rr-text-faint); border-bottom: var(--rr-border-row); }
.rr-table__row { padding: 13px 18px; border-bottom: var(--rr-border-row); font-size: var(--rr-fs-ui); transition: background var(--rr-dur-fast) var(--rr-ease); }
.rr-table__row:hover { background: var(--rr-hover-faint); }
.rr-table__row[data-href] { cursor: pointer; }
.rr-table__row.is-paused { opacity: .55; }
.rr-table__row > * { min-width: 0; }
.rr-table__cell--title { font-weight: 700; }
.rr-table__cell--dst { color: var(--rr-text-soft); }
.rr-table__cell--num { text-align: right; font-weight: 600; color: var(--rr-text-soft); }
.rr-table__cell--end { display: flex; justify-content: flex-end; }
.rr-table__cell--mono { font-family: var(--rr-font-mono); font-size: var(--rr-fs-ui-sm); }
.rr-toolbar { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-bottom: var(--rr-border-row); flex-wrap: wrap; }
.rr-toolbar .rr-input { flex: 1; min-width: 200px; width: auto; }

/* --------------------------------------------------------------------------
   9. Ink blocks (DNS records, previews)
   -------------------------------------------------------------------------- */
.rr-ink-block {
  background: var(--rr-ink); color: var(--rr-cream); border-radius: var(--rr-r-block); padding: 18px 20px;
  font-family: var(--rr-font-mono); font-size: var(--rr-fs-code); line-height: var(--rr-lh-code);
}
.rr-ink-block .k, .rr-ink-block__key { color: var(--rr-on-ink-secondary); }
.rr-ink-block .rec, .rr-ink-block__type { color: var(--rr-on-ink-highlight); }
.rr-ink-block .ok, .rr-ink-block__ok { color: var(--rr-on-ink-success); }
.rr-dns { display: grid; grid-template-columns: auto auto 1fr; gap: 0 22px; }
.rr-dns > span { min-width: 0; overflow-wrap: anywhere; }
.rr-dns__h { color: var(--rr-on-ink-secondary); }
.rr-dns__type { color: var(--rr-on-ink-highlight); }
.rr-dns__foot { margin-top: 8px; color: var(--rr-on-ink-secondary); font-size: 11px; }
/* includes/dns_record.html root. --compact = Add-domain panel variant (app.md §1.6 right column). */
.rr-dns-block--compact { padding: 16px 18px; align-self: center; }
/* Drawer preview variant. */
.rr-preview { padding: 16px 18px; font-size: 12.5px; line-height: 1.8; margin-top: 18px; }
.rr-preview__label { color: var(--rr-on-ink-secondary); font-size: 11px; margin-bottom: 4px; }
.rr-preview__line { overflow-wrap: anywhere; }
.rr-preview__ok { color: var(--rr-on-ink-success); }
.rr-preview__key { color: var(--rr-on-ink-secondary); }

/* --------------------------------------------------------------------------
   10. Progress, avatar, sparkline, chart
   -------------------------------------------------------------------------- */
.rr-track { height: 6px; background: var(--rr-line-light); border-radius: 3px; overflow: hidden; }
.rr-track__fill { height: 100%; background: var(--rr-orange); border-radius: inherit; }
.rr-track__fill--lime { background: var(--rr-on-ink-success); }
.rr-track__fill--ink { background: var(--rr-ink); }
.rr-usage { display: grid; gap: 6px; }
.rr-usage__head { display: flex; justify-content: space-between; gap: 12px; font-size: var(--rr-fs-ui); }
.rr-usage__head span:last-child { color: var(--rr-text-soft); }

.rr-avatar {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--avatar-bg, var(--rr-peach-2)); color: var(--rr-ink);
  font-size: var(--rr-fs-ui-sm); font-weight: 700; line-height: 1;
}
.rr-avatar--lg { width: 36px; height: 36px; }
.rr-avatar--ink { background: var(--rr-ink); color: var(--rr-cream); }

/* Sparkline: 7 bars, heights as inline style="height:43%". */
.rr-spark { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.rr-spark > span, .rr-spark__bar { flex: 1; background: var(--rr-peach-2); border-radius: 2px; min-height: 1px; }
/* Chart: N bars, 160px tall. Last bar orange. */
.rr-chart { display: flex; gap: 4px; align-items: flex-end; height: 160px; margin-top: 18px; border-bottom: var(--rr-border-row); padding-bottom: 2px; }
.rr-chart > span, .rr-chart__bar { flex: 1; background: var(--rr-peach-2); border-radius: 4px 4px 0 0; min-height: 2px; transition: background var(--rr-dur-fast) var(--rr-ease); }
.rr-chart > span:hover, .rr-chart__bar:hover, .rr-chart .is-last { background: var(--rr-orange); }
.rr-chart--plain { border-bottom: 0; padding-bottom: 0; }
.rr-chart__axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--rr-text-faint); margin-top: 8px; }

/* Breakdown row (label / value + track). */
.rr-break { display: grid; gap: 10px; }
.rr-break__row { display: grid; gap: 6px; }
.rr-break__head { display: flex; justify-content: space-between; gap: 12px; font-size: var(--rr-fs-ui); }
.rr-break__head .rr-break__k { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-break__head .rr-break__v { color: var(--rr-text-soft); flex: none; }

/* --------------------------------------------------------------------------
   11. Centered pages (login, onboarding, error pages), blobs, stepper, verify banner
   -------------------------------------------------------------------------- */
.rr-center { min-height: 100vh; display: grid; place-items: center; padding: 32px; position: relative; overflow: hidden; }
.rr-center__col { position: relative; width: 100%; max-width: var(--col-max, 420px); animation: fadein .4s var(--rr-ease); }
.rr-center__col--wide { --col-max: 560px; }
.rr-center__below { text-align: center; margin-top: 18px; font-size: var(--rr-fs-ui); color: var(--rr-text-muted); }
/* Accent link ("Create a free account", app.md §1.1 pt 9). Add .rr-muted for "Skip for now" (§1.2). */
.rr-center__below a:not(.rr-muted) { font-weight: 700; color: var(--rr-orange); }

.rr-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.rr-blob--tr { right: -10vw; top: -10vh; width: min(50vw, 560px); aspect-ratio: 1; background: var(--rr-peach-2); }
.rr-blob--bl { left: -120px; bottom: -140px; width: 340px; height: 340px; background: var(--rr-peach); }

.rr-stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: var(--rr-fs-ui-sm); font-weight: 700; color: var(--rr-text-muted); }
.rr-stepper__step { background: #fff; color: var(--rr-ink); border: var(--rr-border-mkt); border-radius: var(--rr-r-pill); padding: 4px 12px; line-height: normal; }
.rr-stepper__step.is-active { background: var(--rr-ink); color: var(--rr-cream); }
.rr-stepper__line { width: 24px; height: 2px; background: var(--rr-ink); flex: none; }

.rr-down-arrow { display: grid; place-items: center; margin: 14px 0; color: var(--rr-orange); font-size: 22px; font-weight: 800; line-height: 1; }

/* Verify banner. <div class="rr-verify rr-verify--idle"><span class="rr-verify__icon">●</span>Waiting for DNS…</div> */
.rr-verify { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 14px; border-radius: var(--rr-r-button); font-size: var(--rr-fs-ui); font-weight: 600; color: var(--rr-ink); background: var(--rr-sand-50); }
.rr-verify--idle { background: var(--rr-sand-50); }
.rr-verify--idle .rr-verify__icon { color: var(--rr-orange); }
.rr-verify--checking { background: var(--rr-warning-bg); }
.rr-verify--ok { background: var(--rr-success-bg); }
.rr-verify--ok .rr-verify__icon { color: var(--rr-success-dot); }
.rr-verify--error { background: var(--rr-danger-bg); }
.rr-verify--error .rr-verify__icon { color: var(--rr-danger-fg); }
.rr-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--rr-warning-fg); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex: none; }

/* --------------------------------------------------------------------------
   12. Drawer + scrim, toast, empty state
   -------------------------------------------------------------------------- */
.rr-scrim { position: fixed; inset: 0; background: var(--rr-scrim); z-index: 10; }
.rr-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--rr-drawer-w);
  background: #fff; border-left: var(--rr-border-mkt); z-index: 11;
  padding: 28px 30px; overflow: auto; animation: fadein var(--rr-dur) var(--rr-ease);
}
.rr-drawer__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.rr-drawer__title { margin: 0; font-family: var(--rr-font-display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.rr-drawer__close { width: 32px; height: 32px; border: var(--rr-border); background: #fff; border-radius: 8px; font-size: 16px; line-height: 1; cursor: pointer; color: var(--rr-ink); display: grid; place-items: center; padding: 0; flex: none; }
.rr-drawer__close:hover { background: var(--rr-sand-50); }
.rr-drawer__foot { display: flex; gap: 10px; margin-top: 22px; }
.rr-drawer__section { margin-top: 16px; }
/* app.js adds this while a [data-drawer] is open: lock page scroll under the scrim.
   (.rr-body-app / .rr-body-centered are template hooks only — no styles by design.) */
body.rr-has-drawer { overflow: hidden; }

.rr-toasts { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; max-width: calc(100vw - 32px); }
.rr-toast {
  background: var(--rr-ink); color: var(--rr-cream); border-radius: var(--rr-r-button); padding: 12px 18px;
  font-size: var(--rr-fs-ui); font-weight: 600; box-shadow: var(--rr-shadow-toast); animation: toastin var(--rr-dur-slow) var(--rr-ease);
  white-space: nowrap; pointer-events: auto; cursor: default; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.rr-toast::before { content: "●"; color: var(--rr-on-ink-success); margin-right: 6px; }
.rr-toast--error::before, .rr-toast--warning::before { color: var(--rr-on-ink-highlight); }

.rr-empty { padding: 40px; text-align: center; color: var(--rr-text-muted); font-size: var(--rr-fs-ui); }

/* --------------------------------------------------------------------------
   13. Page header + type helpers
   -------------------------------------------------------------------------- */
.rr-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.rr-page-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rr-page-head__actions > form { display: flex; margin: 0; }
.rr-h1 { margin: 0; font-family: var(--rr-font-display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.rr-h1--detail { font-size: 28px; overflow-wrap: anywhere; }
.rr-h1--auth { font-size: 32px; line-height: 1.05; }
.rr-h2 { margin: 0; font-family: var(--rr-font-display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.rr-h3 { margin: 0; font-family: var(--rr-font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.rr-stat { font-family: var(--rr-font-display); font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.rr-stat--lg { font-size: 44px; letter-spacing: -.04em; line-height: 1; }
.rr-sub { color: var(--rr-text-muted); font-size: var(--rr-fs-ui); margin-top: 2px; }
.rr-lede { margin: 6px 0 24px; color: var(--rr-text-muted); font-size: 15px; text-wrap: pretty; }
.rr-lede b { color: var(--rr-ink); }
.rr-caption { font-size: var(--rr-fs-caption); font-weight: 700; letter-spacing: var(--rr-ls-caption); color: var(--rr-text-faint); text-transform: uppercase; }
.rr-back { font-size: var(--rr-fs-ui); font-weight: 600; color: var(--rr-text-muted); }

/* Source → destination (the arrow pattern). */
.rr-route { display: flex; align-items: center; gap: 10px; font-size: 15px; flex-wrap: wrap; min-width: 0; }
.rr-route__src { font-weight: 700; color: var(--rr-ink); }
.rr-route__dst { color: var(--rr-text-soft); }
.rr-arrow { color: var(--rr-orange); font-weight: 800; }

/* --------------------------------------------------------------------------
   14. App shell (app.md §1.3)
   -------------------------------------------------------------------------- */
.rr-app { min-height: 100vh; display: grid; grid-template-columns: var(--rr-side-w) minmax(0, 1fr); }
.rr-side {
  min-width: 0;
  background: var(--rr-sand-50); border-right: var(--rr-border); padding: 20px 14px;
  display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh;
}
.rr-side__logo { padding: 4px 8px 18px; display: flex; }
.rr-side__spacer { flex: 1; }
.rr-nav { display: flex; flex-direction: column; gap: 6px; }
.rr-nav__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: var(--rr-r-input); font-size: var(--rr-fs-ui); font-weight: 600;
  background: transparent; color: var(--rr-text-soft); transition: background var(--rr-dur-fast) var(--rr-ease);
}
.rr-nav__item.is-active { background: var(--rr-ink); color: var(--rr-cream); }
/* Hover wins on every item, the active one included (prototype style-hover is !important). */
.rr-nav__item:hover, .rr-nav__item.is-active:hover { background: var(--rr-hover-chip); color: var(--rr-ink); }
.rr-nav__count { font-size: 12px; font-weight: 600; opacity: .6; }

.rr-plan-card { border: var(--rr-border); background: #fff; border-radius: var(--rr-r-block); padding: 14px; }
.rr-plan-card__label { font-size: 12px; font-weight: 700; color: var(--rr-text-muted); margin-bottom: 6px; }
.rr-plan-card__usage { font-size: var(--rr-fs-ui-sm); color: var(--rr-text-soft); margin-bottom: 10px; }
.rr-plan-card__link { display: inline-block; margin-top: 12px; font-size: var(--rr-fs-ui-sm); font-weight: 700; color: var(--rr-orange); }
.rr-plan-card__link:hover { color: var(--rr-orange); text-decoration: underline; }

.rr-user-row { display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; }
.rr-user-row__meta { min-width: 0; }
.rr-user-row__name { font-size: var(--rr-fs-ui-sm); font-weight: 700; }
.rr-user-row__ws { font-size: 12px; color: var(--rr-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-user-row__form { margin-left: auto; display: flex; }
.rr-user-row__out { background: none; border: 0; padding: 0; font-size: 12px; color: var(--rr-text-muted); cursor: pointer; }
.rr-user-row__out:hover { color: var(--rr-orange); }

.rr-main { padding: 28px 36px 60px; min-width: 0; }

/* --------------------------------------------------------------------------
   15. Layout + utility helpers
   -------------------------------------------------------------------------- */
.rr-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.rr-grid-cards--sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.rr-grid-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.rr-span-all { grid-column: 1 / -1; }
.rr-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rr-row--between { justify-content: space-between; }
.rr-row--wrap { flex-wrap: wrap; }
.rr-stack { display: grid; gap: 10px; }
.rr-mono { font-family: var(--rr-font-mono); }
.rr-muted { color: var(--rr-text-muted); }
.rr-faint { color: var(--rr-text-faint); }
.rr-soft { color: var(--rr-text-soft); }
.rr-right { text-align: right; }
.rr-center-text { text-align: center; }
.rr-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rr-mt-1 { margin-top: 8px; } .rr-mt-2 { margin-top: 16px; } .rr-mt-3 { margin-top: 24px; }
.rr-mb-1 { margin-bottom: 8px; } .rr-mb-2 { margin-bottom: 16px; } .rr-mb-3 { margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   16. Responsive: below 900px the sidebar becomes a top bar
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .rr-app { grid-template-columns: 1fr; }
  .rr-side {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 8px; padding: 12px 14px; border-right: 0; border-bottom: var(--rr-border);
  }
  .rr-side__logo { padding: 0; }
  .rr-side__spacer, .rr-plan-card { display: none; }
  .rr-user-row { margin-left: auto; padding: 0; order: 1; }
  .rr-user-row__meta { display: none; }
  .rr-nav { flex: 1 1 100%; min-width: 0; max-width: 100%; flex-direction: row; gap: 4px; overflow-x: auto; order: 2; padding-bottom: 2px; }
  .rr-nav__item { padding: 8px 12px; white-space: nowrap; }
  .rr-main { padding: 20px 16px 48px; }
  .rr-drawer { padding: 22px 18px; }
  .rr-center { padding: 20px; }
  .rr-card--auth { padding: 26px 22px; }
  .rr-toast { white-space: normal; }
}

/* ---------- Plan upsell (analytics below Pro, redirect detail on Free) ---------- */
.rr-upsell { position: relative; border: 2px dashed var(--rr-line); border-radius: var(--rr-r-card); padding: 22px; overflow: hidden; min-height: 260px; display: grid; align-items: center; }
.rr-upsell__preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; filter: blur(3px); opacity: .55; pointer-events: none; user-select: none; }
.rr-upsell__ghost { background: var(--rr-white); border: var(--rr-border); border-radius: var(--rr-r-block); padding: 16px; }
.rr-upsell__ghost-title { font-size: var(--rr-fs-caption); color: var(--rr-text-muted); font-weight: 600; margin-bottom: 10px; }
.rr-upsell__ghost-rows { display: grid; gap: 8px; }
.rr-upsell__ghost-rows span { display: block; height: 6px; background: var(--rr-peach-2); border-radius: 3px; }
.rr-upsell__overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; }
.rr-upsell__card { background: var(--rr-white); border: var(--rr-border-mkt); border-radius: var(--rr-r-card-sm); padding: 22px 26px; box-shadow: var(--rr-shadow-6); max-width: 420px; text-align: center; }
.rr-upsell__title { font-family: var(--rr-font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.rr-upsell__desc { margin: 8px 0 16px; font-size: var(--rr-fs-ui); color: var(--rr-text-soft); line-height: 1.5; text-wrap: pretty; }
.rr-upsell__cta { display: inline-block; }
.rr-upsell__cta:hover { background: var(--rr-ink); }

/* Integration, workspace and rule tools use the shared application components. */
.rr-settings-stack { display:grid; grid-template-columns:minmax(0, 1fr); gap:24px; }
.rr-settings-stack > .rr-card { padding:28px; }
.rr-settings-stack h2 { font-size:20px; margin:0 0 12px; }
.rr-settings-stack p { margin:10px 0; line-height:1.6; }
.rr-settings-form { display:grid; gap:16px; max-width:620px; margin:20px 0; }
.rr-settings-form > p { margin:0; }
.rr-settings-form > .rr-btn { justify-self:start; }
.rr-settings-form label { display:block; font-weight:600; }
.rr-settings-form input:not([type=checkbox]):not([type=color]):not([type=hidden]), .rr-settings-form select, .rr-settings-form textarea { width:100%; min-height:44px; margin-top:6px; border:var(--rr-border); border-radius:10px; padding:11px 13px; font-family:inherit; font-size:var(--rr-fs-input); font-weight:400; background:var(--rr-input-bg); color:var(--rr-ink); }
.rr-settings-form input[type=checkbox] { margin-right:8px; }
.rr-settings-form .errorlist { color:#b42318; }
.rr-settings-list { margin-top:24px; }
.rr-settings-item { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid #e9e5dc; padding:18px 0; }
.rr-settings-item > div { min-width:0; }
.rr-wrap, .rr-secret code { overflow-wrap:anywhere; }
.rr-secret { border-color:#f97316; }
.rr-tools { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:18px 0; }
.rr-pre { padding:20px; overflow:auto; background:#192127; color:#fff; border-radius:12px; font-size:13px; }
.rr-review-row { padding:18px 0; border-top:1px solid #e9e5dc; overflow-wrap:anywhere; }
.rr-review-row del { color:#b42318; }
.rr-review-row ins { color:#087443; text-decoration:none; }
@media(max-width:600px) { .rr-settings-stack > .rr-card { padding:18px; } .rr-settings-item { flex-wrap:wrap; } }