/* RentalInsights app shell + screen layout, built entirely from the Organic
   tokens in organic.css. No hard-coded colors/fonts/px outside var(...). */

/* The `hidden` attribute must actually hide things. The browser's default
   [hidden]{display:none} lives in the UA stylesheet, which ANY author rule
   outranks -- so a component that sets its own display (organic.css's
   .dialog-backdrop{display:grid}, for one) silently ignores el.hidden and
   stays on screen. Force it here once rather than per-component. */
[hidden] { display: none !important; }

/* ---- shell ---- */
.ri-shell { display: flex; align-items: stretch; min-height: 100vh; }
.ri-sidebar {
  width: 252px; flex: none; padding: 26px 16px 26px 26px;
  display: flex; flex-direction: column; gap: 24px;
  position: sticky; top: 0; align-self: flex-start;
  max-height: 100vh; overflow-y: auto; scrollbar-width: none;
}
.ri-sidebar::-webkit-scrollbar { width: 0; height: 0; }
.ri-main { flex: 1; min-width: 0; padding: 26px 32px 64px 14px; }

/* Mobile chrome. Off above 900px -- the drawer, its top bar and its scrim only
   exist inside the media query at the end of this file, so the desktop shell
   above is untouched by all of it. */
.ri-topbar, .ri-scrim, .ri-drawer-close { display: none; }

.ri-nav-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--color-accent); z-index: 2000;
  transition: width 0.4s ease, opacity 0.2s ease 0.2s; opacity: 0;
}
body.ri-loading .ri-nav-progress {
  width: 70%; opacity: 1; transition: width 8s cubic-bezier(0.1, 0.6, 0.2, 1);
}

/* ---- brand + nav ---- */
.ri-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.ri-brand-dot { width: 30px; height: 30px; border-radius: 999px; background: var(--color-accent); flex: none; }
.ri-brand-name { font-family: var(--font-heading); font-size: 20px; letter-spacing: -0.02em; white-space: nowrap; }

.ri-nav { display: flex; flex-direction: column; gap: 16px; }
.ri-nav-group { display: flex; flex-direction: column; gap: 3px; }
.ri-nav-group-label { display: flex; align-items: center; gap: 7px; padding: 0 0 5px 14px; }
.ri-nav-dot { width: 6px; height: 6px; border-radius: 999px; flex: none; }
.ri-nav-dot-accent { background: var(--color-accent); }
.ri-nav-dot-sage { background: var(--color-accent-2-500); }
.ri-nav-group-title { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-600); }
.ri-nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 14px; border-radius: 999px; font-size: 13.5px;
  color: var(--color-text); text-decoration: none;
}
.ri-nav-link:hover { background: var(--color-neutral-100); }
.ri-nav-link.active { background: var(--color-surface); font-weight: 600; }
.ri-nav-badge { font-size: 10px; padding: 1px 8px; border-radius: 999px; background: var(--color-accent-200); color: var(--color-accent-800); flex: none; }

/* ---- sidebar cards ---- */
.ri-coach { margin-top: auto; padding: 18px; border-radius: 26px; background: var(--color-accent-100); }
.ri-coach-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 7px; }
.ri-coach-kicker { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-800); }
.ri-coach-close {
  width: 20px; height: 20px; flex: none; border-radius: 999px; background: var(--color-accent-200);
  color: var(--color-accent-800); font-size: 12px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
}
.ri-coach-close:hover { background: var(--color-accent-300); }
.ri-coach-title { font-family: var(--font-heading); font-size: 16px; line-height: 1.2; margin-bottom: 6px; color: var(--color-accent-900); }
.ri-coach-body { font-size: 12.5px; line-height: 1.5; color: var(--color-accent-900); opacity: 0.85; }

.ri-progress-card { padding: 18px; border-radius: 26px; background: var(--color-neutral-100); }
.ri-progress-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 8px; }
.ri-progress-stage { font-family: var(--font-heading); font-size: 17px; line-height: 1.15; margin-bottom: 11px; }
.ri-progress-track { height: 7px; border-radius: 999px; background: var(--color-neutral-300); overflow: hidden; }
.ri-progress-fill { height: 100%; border-radius: 999px; background: var(--color-accent); }
.ri-progress-note { font-size: 11.5px; color: var(--color-neutral-700); margin-top: 9px; }
.ri-progress-big { font-family: var(--font-heading); font-size: 40px; line-height: 1; margin-bottom: 4px; }

/* ---- page header ---- */
.ri-page-header { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.ri-page-kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 6px; }
.ri-page-title { font-size: 38px; margin: 0 0 7px; letter-spacing: -0.02em; }
.ri-page-sub { font-size: 14px; color: var(--color-neutral-700); max-width: 64ch; }

.ri-mode-toggle-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.ri-mode-toggle { display: flex; padding: 4px; border-radius: 999px; background: var(--color-neutral-100); }
.ri-mode-opt {
  padding: 8px 17px; border-radius: 999px; font-size: 13px; cursor: pointer; white-space: nowrap;
  color: var(--color-neutral-700); text-decoration: none; font-family: var(--font-body);
}
.ri-mode-opt.active { background: var(--color-accent); color: var(--color-bg); font-family: var(--font-heading); }
.ri-mode-note { font-size: 11px; color: var(--color-neutral-600); max-width: 30ch; text-align: right; }

/* ---- generic layout ---- */
.ri-row { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.ri-col { flex: 1 1 460px; min-width: 0; }
.ri-col-side { flex: 0 1 320px; min-width: 262px; }
/* Calculator's verdict + metrics stack; a touch wider than a plain side
   column because the verdict number needs the room. */
.ri-verdict-col { flex: 1 1 330px; display: flex; flex-direction: column; gap: 14px; }
.ri-panel { padding: 26px 30px; border-radius: 36px; background: var(--color-surface); }
.ri-panel-soft { padding: 24px 26px; border-radius: 32px; background: var(--color-neutral-100); }
.ri-panel-outline { padding: 20px; border-radius: 28px; border: 1px solid var(--color-divider); }

.ri-pills { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ri-pill {
  padding: 8px 17px; border-radius: 999px; font-size: 13px; cursor: pointer;
  background: transparent; color: var(--color-neutral-700); border: 1px solid var(--color-divider);
  text-decoration: none; display: inline-flex; align-items: center;
}
.ri-pill:hover { background: var(--color-neutral-100); }
.ri-pill.active { background: var(--color-accent); color: var(--color-bg); border-color: transparent; font-family: var(--font-heading); }
.ri-pill-sm { padding: 6px 14px; font-size: 12px; }

.ri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

/* ---- stats ---- */
.ri-stat-row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 16px; }
.ri-stat-k { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 2px; }
.ri-stat-v { font-size: 15px; font-weight: 600; }

.ri-kv-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-divider); font-size: 13px; }
.ri-kv-row .k { color: var(--color-neutral-700); }
.ri-kv-row .v { font-weight: 600; text-align: right; }
.ri-kv-row:last-child { border-bottom: none; }

/* ---- listing card ---- */
.ri-listing { border-radius: 34px; background: var(--color-surface); overflow: hidden; display: flex; flex-direction: column; }
.ri-listing-photo {
  height: 150px; background: repeating-linear-gradient(135deg, #e2d2b6 0 12px, #d9c7a7 12px 24px);
  display: flex; align-items: flex-end; padding: 13px;
}
.ri-listing-photo span {
  font: 10px ui-monospace, Menlo, monospace; color: var(--color-neutral-700);
  background: var(--color-neutral-100); padding: 4px 11px; border-radius: 999px;
}
.ri-listing-body { padding: 20px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.ri-listing-clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.ri-listing-clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ri-listing-clickable:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ri-listing-price { font-family: var(--font-heading); font-size: 23px; }

/* ---- provider card (agents/managers/lenders) ---- */
.ri-person { padding: 24px; border-radius: 34px; background: var(--color-surface); display: flex; flex-direction: column; gap: 14px; }
.ri-person-head { display: flex; gap: 14px; align-items: center; }
.ri-avatar {
  width: 54px; height: 54px; flex: none; border-radius: 999px; background: var(--color-accent-300);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 19px; color: var(--color-accent-900);
}

/* ---- checklist (closing) ---- */
.ri-phase { padding: 24px 26px; border-radius: 34px; background: var(--color-surface); }
.ri-task { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 20px; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; font: inherit; color: inherit; }
.ri-task:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.ri-task-box {
  width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  border: 1.5px solid var(--color-neutral-300); color: transparent;
}
.ri-task-box.done { background: var(--color-accent-2-500); border-color: var(--color-accent-2-500); color: var(--color-bg); }
.ri-task-label { font-size: 13.5px; font-weight: 600; }
.ri-task-label.done { opacity: 0.55; text-decoration: line-through; font-weight: 400; }
.ri-task-note { font-size: 11.5px; color: var(--color-neutral-600); }
.ri-task-owner { margin-left: auto; flex: none; font-size: 11px; padding: 3px 11px; border-radius: 999px; background: var(--color-neutral-200); color: var(--color-neutral-800); }

/* ---- KPI tiles (portfolio) ---- */
.ri-kpi { flex: 1 1 180px; min-width: 160px; padding: 22px 24px; border-radius: 30px; background: var(--color-surface); }
.ri-kpi-k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 8px; }
.ri-kpi-v { font-family: var(--font-heading); font-size: 30px; line-height: 1; }
.ri-kpi-note { font-size: 11.5px; color: var(--color-neutral-700); margin-top: 6px; }

/* ---- verdict banner (analyzer) ---- */
.ri-verdict { padding: 26px 28px; border-radius: 34px; }
.ri-verdict-kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; margin-bottom: 8px; }
.ri-verdict-num { font-family: var(--font-heading); font-size: 46px; line-height: 1; margin-bottom: 8px; }
.ri-verdict-note { font-size: 14px; max-width: 40ch; }
.ri-verdict-good { background: var(--color-accent-2-500); color: var(--color-accent-2-900); }
.ri-verdict-warn { background: var(--color-accent-400); color: var(--color-accent-900); }
.ri-verdict-risky { background: var(--color-accent-700); color: var(--color-bg); }

.ri-metric-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--color-divider); }
.ri-metric-row:last-child { border-bottom: none; }
.ri-metric-help {
  width: 17px; height: 17px; flex: none; border-radius: 999px; background: var(--color-accent-200);
  color: var(--color-accent-800); font-size: 10px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
}
.ri-metric-help:hover { background: var(--color-accent-300); }
.ri-metric-help.active { background: var(--color-accent); color: var(--color-bg); }

.ri-metric-explain {
  margin-top: 14px; padding: 14px 16px; border-radius: 20px;
  background: var(--color-accent-100);
}
.ri-metric-explain-title {
  font-family: var(--font-heading); font-size: 15px; color: var(--color-accent-900);
}
.ri-metric-explain-body {
  font-size: 12.5px; line-height: 1.5; color: var(--color-accent-900); margin-top: 4px;
}
.ri-metric-explain-close {
  border: 0; background: transparent; cursor: pointer; flex: none;
  font-size: 16px; line-height: 1; color: var(--color-accent-800); padding: 0 2px;
}
.ri-metric-explain-close:hover { color: var(--color-accent); }

.ri-slider-row + .ri-slider-row { margin-top: 22px; }
.ri-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.ri-slider-hint { font-size: 11.5px; color: var(--color-neutral-600); margin-top: 4px; }
input[type="range"].ri-slider { width: 100%; accent-color: var(--color-accent); height: 20px; }

/* ---- onboarding option cards ---- */
.ri-option-card {
  position: relative; display: block; padding: 16px 20px; border-radius: 24px; cursor: pointer;
  background: var(--color-bg); border: 1px solid var(--color-divider);
}
.ri-option-card:hover { border-color: var(--color-neutral-500); }
.ri-option-card input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.ri-option-card:has(input:checked) { background: var(--color-accent-100); border-color: var(--color-accent); }
.ri-option-card-label { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ri-option-card-title { font-family: var(--font-heading); font-size: 16px; }
.ri-option-card-tag { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-2-700); }
.ri-option-card-desc { font-size: 13px; color: var(--color-neutral-700); margin-top: 3px; }

.ri-step-dots { display: flex; gap: 6px; margin-bottom: 24px; }
.ri-step-dot { height: 8px; width: 8px; border-radius: 999px; background: var(--color-neutral-300); transition: width 0.2s; }
.ri-step-dot.done { background: var(--color-accent); }
.ri-step-dot.current { width: 26px; background: var(--color-accent); }

/* Secondary context that folds away on a phone. Above 900px the summary is
   hidden and the block is open, so it renders exactly as a plain panel. */
.ri-disclosure-summary { display: none; }
.ri-disclosure-title { margin-bottom: 14px; }

.ri-journey-row { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; }
.ri-journey-text { min-width: 0; }
.ri-journey-dot { width: 11px; height: 11px; flex: none; margin-top: 4px; border-radius: 999px; background: var(--color-neutral-300); }
.ri-journey-dot.done { background: var(--color-accent); }
.ri-journey-label { font-size: 13.5px; }
.ri-journey-label.done { font-weight: 600; }
.ri-journey-note { font-size: 11.5px; color: var(--color-neutral-600); }

/* ---- empty state ---- */
.ri-empty { text-align: center; padding: 48px 24px; border-radius: 32px; background: var(--color-neutral-100); }
.ri-empty-icon {
  width: 48px; height: 48px; border-radius: 999px; background: var(--color-accent-100); color: var(--color-accent-700);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.ri-empty-title { font-family: var(--font-heading); font-size: 19px; margin-bottom: 6px; }
.ri-empty-body { font-size: 13.5px; color: var(--color-neutral-700); max-width: 46ch; margin: 0 auto 16px; }

/* ---- glossary / learn ---- */
.ri-chip {
  padding: 5px 13px; border-radius: 999px; background: var(--color-accent-100); color: var(--color-accent-800);
  font-size: 12px; cursor: pointer; text-decoration: none; display: inline-flex; border: 0; font-family: inherit;
}
.ri-chip:hover { background: var(--color-accent-200); }

/* ---- auth ---- */
.ri-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; }
.ri-auth-card { width: min(420px, 100%); padding: 34px; border-radius: 40px; background: var(--color-surface); box-shadow: var(--shadow-md); }
.ri-auth-tabs { display: flex; gap: 8px; padding: 4px; border-radius: 999px; background: var(--color-neutral-100); margin-bottom: 22px; }
.ri-auth-tab { flex: 1; text-align: center; padding: 8px; border-radius: 999px; font-size: 13px; font-family: var(--font-heading); cursor: pointer; color: var(--color-neutral-700); text-decoration: none; border: 0; background: transparent; }
.ri-auth-tab.active { background: var(--color-accent); color: var(--color-bg); }
.ri-field { margin-bottom: 16px; }
.ri-alert { padding: 10px 14px; border-radius: var(--radius-md); font-size: 13px; margin-bottom: 14px; }
.ri-alert-info { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.ri-alert-danger { background: var(--color-accent-100); color: var(--color-accent-800); }

/* ---- misc ---- */
.ri-legend-scale { display: flex; height: 9px; border-radius: 999px; overflow: hidden; margin: 11px 0 6px; }
.ri-legend-scale span { flex: 1; }
[data-lucide] { display: inline-block; vertical-align: -3px; }

/* A table too wide for its column, with an edge fade so it reads as
   scrollable instead of as a column that's been cut off. Replaces the ad-hoc
   style="overflow-x:auto" wrappers. */
.ri-scroll-x {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ri-scroll-x > table { min-width: 100%; }

/* Filter/entry form rows. Every field grows and shrinks from its basis --
   the failure mode being replaced was a fixed `width:120px` field stranded
   next to empty space once the row wrapped. */
.ri-form-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
.ri-form-row .field { flex: 1 1 170px; min-width: 0; }
.ri-form-row .field-sm { flex: 1 1 110px; }
.ri-form-row .field-grow { flex: 2 1 190px; }
.ri-form-row .ri-form-submit { flex: none; }
.ri-form-note { font-size: 12px; color: var(--color-neutral-600); margin-left: auto; }
.ri-field-note { font-size: 11px; color: var(--color-neutral-600); margin-top: 5px; }

/* A row of actions where the primary one must stay reachable without the
   secondary stranding itself on its own line. */
.ri-action-row { display: flex; gap: 10px; flex-wrap: wrap; }

.ri-rate-block { flex: none; text-align: right; }
.ri-rate-v { font-family: var(--font-heading); font-size: 30px; line-height: 1; }

/* ---- property detail dialog ---- */
.ri-modal-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.ri-modal-stats > div { min-width: 0; }
.ri-modal-stat-v { font-family: var(--font-heading); font-size: 26px; line-height: 1.1; }
.ri-history-scroll { max-height: 230px; overflow-y: auto; }


/* ============================================================
   Responsive
   Two tiers: <=900px swaps the sidebar for a drawer, <=620px is
   phone density (type, padding, tap targets). Nothing above 900px.
   ============================================================ */

@media (max-width: 900px) {
  /* The shell stops being a two-column flex row: <main> is the only thing in
     normal flow, the sidebar is lifted out of it into a fixed drawer. */
  .ri-shell { display: block; }

  .ri-topbar {
    display: flex; align-items: center; gap: 4px;
    position: sticky; top: 0; z-index: 1200;
    height: 56px; padding: 0 8px 0 4px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-divider);
  }
  .ri-topbar-btn {
    width: 44px; height: 44px; flex: none; border: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: transparent; color: var(--color-text); cursor: pointer;
  }
  .ri-topbar-btn:active { background: var(--color-neutral-200); }
  .ri-topbar-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
  .ri-topbar-brand .ri-brand-dot { width: 24px; height: 24px; }
  .ri-topbar-brand .ri-brand-name { font-size: 18px; }

  /* display:block here re-enables it for this tier; the open/closed state is
     the `hidden` property, which [hidden]{display:none !important} at the top
     of this file enforces over this rule. */
  .ri-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 1250;
    background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent);
  }

  .ri-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1300;
    width: min(296px, 86vw); max-height: none;
    padding: 22px 16px 26px 20px;
    background: var(--color-bg); box-shadow: var(--shadow-lg);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); transition: transform 0.22s ease;
  }
  .ri-shell.ri-nav-open .ri-sidebar { transform: none; }

  .ri-drawer-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 14px; right: 12px;
    width: 34px; height: 34px; border: 0; padding: 0;
    border-radius: 999px; background: var(--color-neutral-200);
    color: var(--color-neutral-800); font-size: 20px; line-height: 1; cursor: pointer;
  }
  /* The brand is already in the top bar; in the drawer it would only collide
     with the close button. */
  .ri-sidebar .ri-brand { display: none; }

  /* ~44px tap targets, the reason the drawer is 296px and not 252px. */
  .ri-nav-link { padding: 11px 14px; font-size: 14.5px; }

  .ri-main { padding: 18px 18px 56px; }

  /* Once .ri-row has wrapped to one column, a side column sized to sit
     beside the content (flex: 0 1 320px) is just a narrow card floating in a
     full-width column. Let it fill the row. */
  .ri-row > .ri-col-side { flex: 1 1 100%; min-width: 0; }

  /* Where the side column is the summary the user came for (closing
     progress, portfolio totals, the calculator's verdict), put it above the
     long list instead of under it. */
  .ri-row > .ri-side-first { order: -1; }

  /* Collapsed here -- syncDisclosures() in app_base.html drops the `open`
     attribute at this same breakpoint. */
  .ri-disclosure-summary {
    display: block; cursor: pointer; list-style: none;
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-neutral-600);
    padding: 6px 0;
  }
  .ri-disclosure-summary::-webkit-details-marker { display: none; }
  .ri-disclosure-summary::after { content: " +"; }
  .ri-disclosure[open] .ri-disclosure-summary::after { content: " \2212"; }
  .ri-disclosure[open] .ri-disclosure-summary { margin-bottom: 8px; }
  .ri-disclosure-title { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ri-sidebar { transition: none; }
}

@media (max-width: 620px) {
  /* Type that was sized against a ~1100px column. */
  .ri-page-title { font-size: clamp(26px, 7.5vw, 38px); }
  .ri-verdict-num { font-size: clamp(30px, 9vw, 46px); }
  .ri-kpi-v { font-size: 25px; }
  .ri-progress-big { font-size: 34px; }
  .ri-progress-stage, .ri-coach-title { font-size: 16px; }

  /* Padding: .ri-panel's 30px sides cost 16% of a 375px screen. */
  .ri-panel { padding: 18px; }
  .ri-panel-soft, .ri-phase, .ri-person, .ri-verdict { padding: 18px; }
  .ri-panel, .ri-panel-soft, .ri-phase, .ri-person, .ri-verdict { border-radius: 26px; }
  .ri-listing { border-radius: 26px; }
  .ri-empty { padding: 32px 18px; }

  /* The mode toggle is right-aligned against a left-aligned title, which only
     reads as intentional while they share a row. */
  .ri-mode-toggle-wrap { align-items: stretch; width: 100%; }
  .ri-mode-toggle { justify-content: stretch; }
  .ri-mode-opt { flex: 1; text-align: center; }
  .ri-mode-note { text-align: left; max-width: none; }
  .ri-page-header { gap: 16px; margin-bottom: 18px; }

  /* Tap targets. */
  .ri-chip { padding: 9px 14px; }
  .ri-metric-help { width: 26px; height: 26px; font-size: 12px; }
  .ri-coach-close { width: 28px; height: 28px; font-size: 15px; }
  /* Height is the hit area here -- the native thumb is already ~28px on
     touch, it was the 20px input box clipping it. Restyling the thumb would
     mean -webkit-appearance:none and hand-building the whole track, which
     would also throw away accent-color. */
  input[type="range"].ri-slider { height: 32px; }

  /* A label and its value at 279px need to be allowed to wrap rather than
     squeeze each other mid-token. */
  .ri-slider-head { flex-wrap: wrap; gap: 4px 12px; }
  .ri-slider-head > * { min-width: 0; }
  .ri-stat-row { gap: 16px; }
  .ri-kv-row { gap: 8px; }
  .ri-modal-stats { gap: 14px 18px; }
  .ri-modal-stats > div { flex: 1 1 130px; }
  .ri-modal-stat-v { font-size: 22px; }
  /* Drop the inner cap: one scroller (the dialog's) instead of three nested. */
  .ri-history-scroll { max-height: none; overflow-y: visible; }

  /* Submit goes full width at the end of the stack, and the match count above
     it -- `margin-left:auto` means nothing once every field is its own row. */
  .ri-form-row { gap: 12px; }
  .ri-form-row .ri-form-submit { flex: 1 1 100%; }
  .ri-form-note { margin-left: 0; order: -1; flex: 1 1 100%; }

  .ri-auth-wrap { padding: 16px; }
  .ri-auth-card { padding: 22px; border-radius: 30px; }

  /* Both actions full width and stacked, rather than one of them stranded. */
  .ri-action-row { flex-direction: column; align-items: stretch; }
  .ri-action-row .btn { width: 100%; }

  /* The rate belongs under the lender's name reading left-to-right with it,
     not right-aligned into the middle of the card. */
  .ri-rate-block { text-align: left; }
  .ri-rate-v { font-size: 26px; }

  /* Long-form prose: the panel's own padding is most of what's left of the
     screen, so let the text use the page gutter instead. */
  .ri-panel-flush { padding: 0; background: transparent; }

  /* Stacked, primary-first: a right-pinned CTA is the wrong corner for a thumb. */
  .dialog-actions { flex-direction: column-reverse; align-items: stretch; }
  .dialog-actions .btn { width: 100%; }
}