/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --ri-canvas: #ffffff;
  --ri-surface: #ffffff;
  --ri-surface-muted: #f7f8f8;
  --ri-rail: #18201c;
  --ri-ink: #171b19;
  --ri-muted: #66706b;
  --ri-faint: #8a9388;
  --ri-rule: #d5ddd8;
  --ri-soft-rule: #e8edeb;
  --ri-primary: #176149;
  --ri-primary-dark: #0b3228;
  --ri-accent: #b98316;
  --ri-accent-sharp: #b8cf37;
  --ri-sell: #b7352d;
  --ri-info: #2f6f9f;
  --ri-buy-bg: #e2f2e8;
  --ri-buy-text: #176149;
  --ri-sell-bg: #f6e2df;
  --ri-sell-text: #b7352d;
  --ri-trim-bg: #f4ecd8;
  --ri-trim-text: #94630f;
  --ri-neutral-bg: #edf1ef;
  --ri-neutral-text: #66706b;
  --ri-radius-sm: 5px;
  --ri-radius-md: 8px;
  --ri-font-display: "Cabinet Grotesk", "DM Sans", sans-serif;
  --ri-font-body: "DM Sans", "Source Sans 3", sans-serif;
  --ri-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.ri-app-shell {
  background: var(--ri-canvas);
  color: var(--ri-ink);
  font-family: var(--ri-font-body);
  font-variant-numeric: tabular-nums;
}

.ri-brand-mark {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.ri-dashboard {
  padding-top: 24px;
  padding-bottom: 40px;
}

.ri-page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 18px;
}

.ri-kicker,
.ri-label {
  color: var(--ri-faint);
  font-family: var(--ri-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ri-page-title {
  margin-bottom: 0;
  color: var(--ri-ink);
  font-family: var(--ri-font-display);
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.ri-title-highlight {
  position: relative;
  display: inline-block;
  color: var(--ri-primary-dark);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ri-title-highlight {
    background-image: linear-gradient(
      90deg,
      var(--ri-primary),
      var(--ri-info),
      var(--ri-accent),
      var(--ri-sell)
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.ri-title-highlight::after {
  position: absolute;
  right: 0.03em;
  bottom: -0.05em;
  left: 0.03em;
  height: 0.09em;
  border-radius: 999px;
  background-image: linear-gradient(
    90deg,
    var(--ri-primary),
    var(--ri-info),
    var(--ri-accent)
  );
  content: "";
}

.ri-page-copy {
  max-width: 780px;
  margin: 10px 0 0;
  color: var(--ri-muted);
  font-size: 15px;
  line-height: 1.45;
}

.ri-command-box {
  display: grid;
  gap: 4px;
  min-width: 236px;
  padding: 12px 14px;
  border: 1px solid var(--ri-rule);
  border-radius: var(--ri-radius-md);
  background: var(--ri-surface);
  color: var(--ri-muted);
  font-family: var(--ri-font-mono);
  font-size: 11px;
}

.ri-command-box strong {
  color: var(--ri-ink);
  font-family: var(--ri-font-body);
  font-size: 15px;
}

.ri-link,
.ri-panel-link {
  color: var(--ri-primary);
  text-decoration: none;
}

.ri-link:hover,
.ri-panel-link:hover,
.ri-mono-link:hover,
.ri-ticker a:hover {
  text-decoration: underline;
}

.ri-panel-link {
  flex-shrink: 0;
  font-family: var(--ri-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ri-mono-link,
.ri-ticker {
  color: var(--ri-primary);
  font-family: var(--ri-font-mono);
  font-size: 12px;
  font-weight: 600;
}

.ri-tabular {
  font-family: var(--ri-font-mono);
  font-variant-numeric: tabular-nums;
}

.ri-muted {
  color: var(--ri-muted);
}

.ri-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.ri-stat {
  border: 1px solid var(--ri-rule);
  border-radius: var(--ri-radius-md);
  background: var(--ri-surface);
  padding: 12px 14px;
}

.ri-stat-value {
  margin-top: 6px;
  color: var(--ri-ink);
  font-family: var(--ri-font-mono);
  font-size: 20px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ri-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
  grid-template-areas:
    "grand conviction";
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

.ri-grand-panel {
  grid-area: grand;
}

.ri-conviction-map {
  grid-area: conviction;
}

.ri-table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.ri-panel {
  overflow: hidden;
  border: 1px solid var(--ri-soft-rule);
  border-radius: var(--ri-radius-md);
  background: var(--ri-surface);
}

.ri-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ri-soft-rule);
  background: var(--ri-surface);
}

.ri-panel-title {
  margin: 0;
  color: var(--ri-ink);
  font-family: var(--ri-font-display);
  font-size: 15px;
  font-weight: 700;
}

.ri-panel-caption {
  margin: 3px 0 0;
  color: var(--ri-muted);
  font-size: 12px;
  line-height: 1.3;
}

.ri-empty-copy {
  padding: 28px 14px;
  color: var(--ri-muted);
  font-size: 14px;
  text-align: center;
}

.ri-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ri-table th,
.ri-table td {
  overflow: hidden;
  padding: 11px 12px;
  border-bottom: 1px solid var(--ri-soft-rule);
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.ri-table th {
  background: transparent;
  color: var(--ri-faint);
  font-family: var(--ri-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
}

.ri-table th.text-center,
.ri-table td.text-center {
  text-align: center;
}

.ri-table th.text-right,
.ri-table td.text-right {
  text-align: right;
}

.ri-table th.text-left,
.ri-table td.text-left {
  text-align: left;
}

.ri-table tr:last-child td {
  border-bottom: 0;
}

.ri-table tbody tr:hover {
  background: var(--ri-surface-muted);
}

.ri-change-badge {
  display: inline-flex;
  min-width: 42px;
  min-height: 21px;
  align-items: center;
  justify-content: center;
  border-radius: var(--ri-radius-sm);
  font-family: var(--ri-font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.ri-change-badge--success {
  background: var(--ri-buy-bg);
  color: var(--ri-buy-text);
}

.ri-change-badge--danger {
  background: var(--ri-sell-bg);
  color: var(--ri-sell-text);
}

.ri-change-badge--warning {
  background: var(--ri-trim-bg);
  color: var(--ri-trim-text);
}

.ri-change-badge--neutral {
  background: var(--ri-neutral-bg);
  color: var(--ri-neutral-text);
}

/* Curated strategy/focus tags on funds ("Value", "AI / Compute", "VC", ...).
   Vocabulary, labels, and color assignment live in Fund::TAGS. Compact
   rectangular badges per DESIGN.md — tinted fill + colored text; the label
   text carries the meaning, color never stands alone. Not links. */
.ri-fund-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  vertical-align: middle;
}

.ri-fund-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--ri-radius-sm);
  font-family: var(--ri-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.ri-fund-tag--green  { background: var(--ri-buy-bg);  color: var(--ri-buy-text); }
.ri-fund-tag--red    { background: var(--ri-sell-bg); color: var(--ri-sell-text); }
.ri-fund-tag--orange { background: var(--ri-trim-bg); color: var(--ri-trim-text); }
.ri-fund-tag--blue   { background: #e3eef6; color: var(--ri-info); }
.ri-fund-tag--purple { background: #ece7f6; color: #66489d; }
.ri-fund-tag--teal   { background: #ddf0ee; color: #11675e; }

/* Signed change in share count next to a move badge — green up, red down. */
.ri-delta {
  font-family: var(--ri-font-mono);
  font-size: 11px;
  font-weight: 600;
}

.ri-delta--buy {
  color: var(--ri-buy-text);
}

.ri-delta--sell {
  color: var(--ri-sell-text);
}

/* Greenish/reddish "card" holding a fund's last-quarter move on a stock —
   color = buy vs. sell, text = the signed share-count change ("+20%"). */
.ri-delta-card {
  display: inline-flex;
  min-width: 56px;
  padding: 4px 9px;
  align-items: center;
  justify-content: center;
  border-radius: var(--ri-radius-sm);
  font-family: var(--ri-font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.ri-delta-card--buy {
  background: var(--ri-buy-bg);
  color: var(--ri-buy-text);
}

.ri-delta-card--sell {
  background: var(--ri-sell-bg);
  color: var(--ri-sell-text);
}

.ri-conviction-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 12px;
}

.ri-strategy-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 12px 12px 0;
  padding: 3px;
  border: 1px solid var(--ri-soft-rule);
  border-radius: var(--ri-radius-md);
  background: var(--ri-surface-muted);
}

.ri-strategy-button {
  min-height: 30px;
  border: 0;
  border-radius: var(--ri-radius-sm);
  background: transparent;
  color: var(--ri-muted);
  cursor: pointer;
  font-family: var(--ri-font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.ri-strategy-button:hover,
.ri-strategy-button.is-active {
  background: var(--ri-surface);
  color: var(--ri-primary-dark);
  box-shadow: 0 1px 2px rgba(11, 50, 40, 0.08);
}

.ri-strategy-caption {
  margin: 8px 12px 0;
  color: var(--ri-muted);
  font-size: 12px;
  line-height: 1.35;
}

.ri-conviction-tile {
  display: grid;
  min-height: 76px;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(23, 97, 73, 0.12);
  border-radius: var(--ri-radius-sm);
  color: var(--ri-primary-dark);
  text-decoration: none;
}

.ri-conviction-tile:hover {
  border-color: var(--ri-primary);
  transform: translateY(-1px);
}

.ri-conviction-tile--1 { background: #edf2ef; }
.ri-conviction-tile--2 { background: #deebe4; }
.ri-conviction-tile--3 { background: #cde3d8; }
.ri-conviction-tile--4 { background: #b9d8c8; }
.ri-conviction-tile--5 { background: #a4cdb9; }
.ri-conviction-tile--6 { background: #8dc1a8; }
.ri-conviction-tile--7 { background: #6fb38f; }
.ri-conviction-tile--8 { background: #176149; color: #f1f6ef; }

.ri-conviction-rank,
.ri-conviction-meta {
  font-family: var(--ri-font-mono);
  font-size: 10px;
  opacity: 0.78;
}

.ri-conviction-symbol {
  font-family: var(--ri-font-mono);
  font-size: 15px;
  font-weight: 600;
}

.ri-conviction-weight {
  font-family: var(--ri-font-mono);
  font-size: 13px;
  font-weight: 600;
}

.ri-conviction-leader {
  display: grid;
  gap: 4px;
  margin: 0 12px 12px;
  padding: 10px 12px;
  border: 1px solid var(--ri-soft-rule);
  border-radius: var(--ri-radius-sm);
  background: #f8faf8;
  font-size: 12px;
}

.ri-position-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--ri-primary);
  font-family: var(--ri-font-mono);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ri-position-chip:hover {
  text-decoration: underline;
}

/* ====================================================================
   Landing — minimal, sidebar-free marketing home (ri-home-*).
   Quiet top nav, centered hero with one primary action, and a real
   "highest conviction" list. Show the product; don't pitch it.
   ==================================================================== */

.ri-home-body {
  background: var(--ri-surface);
}

/* ---- Top nav ---- */
.ri-home-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--ri-soft-rule);
  backdrop-filter: saturate(180%) blur(12px);
}

.ri-home-nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(1080px, calc(100% - 40px));
  height: 60px;
  margin: 0 auto;
}

.ri-home-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ri-ink);
  font-family: var(--ri-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.ri-home-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
}

.ri-home-nav-links a {
  padding: 7px 12px;
  border-radius: var(--ri-radius-sm);
  color: var(--ri-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease;
}

.ri-home-nav-links a:hover {
  color: var(--ri-ink);
  background: var(--ri-surface-muted);
}

.ri-home-nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.ri-home-nav-signin {
  padding: 7px 12px;
  color: var(--ri-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.ri-home-nav-signin:hover {
  color: var(--ri-primary);
}

/* App top nav: extends the landing nav with active states, search + account. */
.ri-home-nav-links a.is-active {
  color: var(--ri-ink);
  background: var(--ri-surface-muted);
}

.ri-app-nav-account {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.ri-app-nav-account:hover {
  background: var(--ri-surface-muted);
  border-color: var(--ri-soft-rule);
}

.ri-app-nav-avatar {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ri-surface-muted);
  color: var(--ri-ink);
  font-size: 12px;
  font-weight: 600;
}

.ri-app-nav-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: 232px;
  padding: 6px;
  border: 1px solid var(--ri-soft-rule);
  border-radius: var(--ri-radius-md);
  background: var(--ri-surface);
  box-shadow: 0 8px 28px rgba(11, 50, 40, 0.12);
}

.ri-app-nav-menu-head {
  display: grid;
  gap: 2px;
  margin-bottom: 4px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--ri-soft-rule);
}

.ri-app-nav-menu-name {
  color: var(--ri-ink);
  font-size: 13px;
  font-weight: 600;
}

.ri-app-nav-menu-email {
  color: var(--ri-faint);
  font-size: 11px;
}

.ri-app-nav-menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--ri-radius-sm);
  color: var(--ri-ink);
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ri-app-nav-menu-item:hover {
  background: var(--ri-surface-muted);
}

.ri-app-nav-menu-item--button {
  border: 0;
  background: transparent;
  font-family: var(--ri-font-body);
}

.ri-app-nav-menu-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--ri-soft-rule);
}

/* ---- Buttons ---- */
.ri-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--ri-radius-md);
  font-family: var(--ri-font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.ri-home-btn--primary {
  background: var(--ri-primary);
  border-color: var(--ri-primary);
  color: #f1f6ef;
}

.ri-home-btn--primary:hover {
  background: var(--ri-primary-dark);
  border-color: var(--ri-primary-dark);
}

.ri-home-btn--lg {
  padding: 13px 22px;
  font-size: 15px;
}

/* ---- Hero ---- */
.ri-home-hero {
  width: min(820px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(72px, 12vh, 144px) 0 clamp(44px, 7vh, 80px);
  text-align: center;
}

.ri-home-title {
  margin: 0;
  color: var(--ri-ink);
  font-family: var(--ri-font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ri-home-lede {
  max-width: 620px;
  margin: 22px auto 0;
  color: var(--ri-muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.ri-home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 34px;
}

.ri-home-link {
  color: var(--ri-primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.ri-home-link:hover {
  color: var(--ri-primary-dark);
  text-decoration: underline;
}

/* ---- Conviction list ---- */
.ri-home-list {
  width: min(720px, calc(100% - 40px));
  margin: 0 auto;
  padding-bottom: 24px;
}

.ri-home-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ri-rule);
}

.ri-home-list-head h2 {
  margin: 0;
  color: var(--ri-ink);
  font-family: var(--ri-font-display);
  font-size: 17px;
  font-weight: 700;
}

/* Small "?" help marker beside a list title — reveals a hover/focus tooltip
   (tooltip_controller) explaining what the feed includes. */
.ri-home-help {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  padding: 0;
  vertical-align: middle;
  background: transparent;
  border: 1px solid var(--ri-rule);
  border-radius: 50%;
  color: var(--ri-faint);
  font-family: var(--ri-font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: help;
  transition: color 0.15s, border-color 0.15s;
}

.ri-home-help:hover,
.ri-home-help:focus-visible {
  color: var(--ri-ink);
  border-color: var(--ri-ink);
}

.ri-home-list-caption {
  margin: 0;
  color: var(--ri-faint);
  font-family: var(--ri-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ri-home-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ri-home-row {
  display: grid;
  grid-template-columns: 28px auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--ri-soft-rule);
}

.ri-home-rank {
  color: var(--ri-faint);
  font-family: var(--ri-font-mono);
  font-size: 12px;
  text-align: right;
}

.ri-home-ticker {
  color: var(--ri-primary);
  font-family: var(--ri-font-mono);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.ri-home-ticker:hover {
  text-decoration: underline;
}

.ri-home-name {
  overflow: hidden;
  color: var(--ri-muted);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ri-home-weight {
  color: var(--ri-ink);
  font-family: var(--ri-font-mono);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

.ri-home-funds {
  min-width: 60px;
  color: var(--ri-faint);
  font-family: var(--ri-font-mono);
  font-size: 12px;
  text-align: right;
}

.ri-home-list-more {
  display: inline-block;
  margin-top: 16px;
  color: var(--ri-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.ri-home-list-more:hover {
  text-decoration: underline;
}

/* ---- Latest insider trades (a second "list of real things", parallel to the
   conviction list above): date · ticker · insider/role · buy|sell · value. ---- */
.ri-home-list--insiders {
  margin-top: 40px;        /* breathing room below the conviction list */
  padding-bottom: 56px;    /* breathing room above the email opt-in */
}

/* Buys + sells stack as two feeds. Tighten the gap between them — the first
   drops its tall bottom padding, the second its top margin — while the outer
   margins above the pair / below the pair stay as set above. */
.ri-home-list--insiders:has(+ .ri-home-list--insiders) { padding-bottom: 0; }
.ri-home-list--insiders + .ri-home-list--insiders { margin-top: 44px; }

.ri-home-row--insider {
  grid-template-columns: 52px auto minmax(0, 1fr) auto auto;
}

.ri-home-owner-link {
  color: var(--ri-ink);
  text-decoration: none;
}

.ri-home-owner-link:hover {
  text-decoration: underline;
}

.ri-home-date {
  color: var(--ri-faint);
  font-family: var(--ri-font-mono);
  font-size: 12px;
  white-space: nowrap;
}

.ri-home-ticker--plain {
  color: var(--ri-muted);
}

.ri-home-owner {
  overflow: hidden;
  color: var(--ri-ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ri-home-role::before {
  content: "·";
  margin: 0 6px;
}

.ri-home-role {
  color: var(--ri-faint);
  font-size: 12px;
}

/* ---- Email opt-in wrapper ---- */
.ri-home-cta {
  width: min(720px, calc(100% - 40px));
  margin: 0 auto;
  padding: 8px 0 64px;
}

@media (max-width: 720px) {
  .ri-home-nav-links { display: none; }
  .ri-home-name { display: none; }
  .ri-home-row {
    grid-template-columns: 22px 1fr auto auto;
    gap: 12px;
  }
  /* Keep the trade date visible on phones — it's the row's first fact. Only
     the secondary role drops; hover/tap the insider link to recover it. The
     date column hugs its content (11px mono) so the owner keeps most of the
     row, and the tighter gap buys that space back. */
  .ri-home-role { display: none; }
  .ri-home-date { font-size: 11px; }
  .ri-home-row--insider {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    gap: 10px;
  }
}

.ri-brand-text {
  color: var(--ri-primary);
}

.ri-button-primary {
  background: var(--ri-primary);
  color: #f1f6ef;
  border-color: var(--ri-primary);
}

.ri-button-primary:hover {
  background: var(--ri-primary-dark);
}

.ri-focus-ring:focus {
  border-color: var(--ri-primary);
  box-shadow: 0 0 0 2px rgba(23, 97, 73, 0.22);
}

.ri-search-trigger {
  display: inline-flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--ri-rule);
  border-radius: var(--ri-radius-md);
  background: var(--ri-surface);
  color: var(--ri-muted);
  cursor: pointer;
  font-family: var(--ri-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.ri-search-trigger:hover,
.ri-search-trigger:focus-visible {
  border-color: var(--ri-primary);
  background: #f8faf8;
  color: var(--ri-primary-dark);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(23, 97, 73, 0.12);
}

.ri-search-trigger-icon {
  flex: 0 0 auto;
  color: var(--ri-primary);
}

.ri-search-trigger-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ri-search-trigger-key,
.ri-search-esc {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 3px 7px;
  border: 1px solid var(--ri-rule);
  border-radius: var(--ri-radius-sm);
  background: #f3f6f5;
  color: var(--ri-muted);
  font-family: var(--ri-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
}

.ri-search-trigger--compact {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  justify-content: center;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.ri-search-trigger--compact .ri-search-trigger-text,
.ri-search-trigger--compact .ri-search-trigger-key {
  display: none;
}

/* Mini: icon + ⌘K only (no long text label) — used in the landing nav. */
.ri-search-trigger--mini {
  width: auto;
  min-height: 36px;
  gap: 8px;
  padding: 6px 8px 6px 10px;
}

.ri-search-trigger--mini .ri-search-trigger-text {
  display: none;
}

.ri-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(24, 32, 28, 0.72);
  backdrop-filter: blur(8px);
}

.ri-search-overlay[hidden],
.ri-search-results[hidden],
.ri-search-empty[hidden],
.ri-search-hint[hidden] {
  display: none !important;
}

.ri-search-dialog {
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(241, 246, 239, 0.18);
  border-radius: var(--ri-radius-md);
  background: var(--ri-surface);
  box-shadow: 0 24px 80px rgba(11, 50, 40, 0.32);
}

.ri-search-dialog-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--ri-soft-rule);
  background: var(--ri-surface-muted);
}

.ri-search-dialog-header h2 {
  margin: 0;
  color: var(--ri-ink);
  font-family: var(--ri-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

.ri-search-form {
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ri-rule);
  background: var(--ri-surface);
}

.ri-search-input-icon {
  flex: 0 0 auto;
  color: var(--ri-primary);
}

.ri-search-input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: var(--ri-ink);
  font-family: var(--ri-font-body);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  outline: 0;
}

.ri-search-input::placeholder {
  color: var(--ri-faint);
}

.ri-search-input:focus {
  outline: 0;
  box-shadow: none;
}

.ri-search-empty {
  display: grid;
  gap: 10px;
  padding: 18px 16px 20px;
  border-bottom: 1px solid var(--ri-soft-rule);
  color: var(--ri-muted);
  font-size: 13px;
}

.ri-search-empty p {
  margin: 0;
}

.ri-search-example-label,
.ri-search-example {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0 4px 6px 0;
  padding: 5px 8px;
  border: 1px solid var(--ri-soft-rule);
  border-radius: var(--ri-radius-sm);
  background: #f8faf8;
  font-family: var(--ri-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

.ri-search-example-label {
  border-color: transparent;
  background: transparent;
  color: var(--ri-accent);
  padding-left: 0;
}

.ri-search-results {
  max-height: 380px;
  overflow: auto;
}

.ri-search-suggestion-group {
  border-bottom: 1px solid var(--ri-soft-rule);
}

.ri-search-suggestion-group:last-child {
  border-bottom: 0;
}

.ri-search-suggestion-label {
  padding: 10px 16px 6px;
  color: var(--ri-muted);
  font-family: var(--ri-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.ri-search-suggestion-group--fund .ri-search-suggestion-label,
.ri-search-suggestion-group--fund .ri-search-option-eyebrow {
  color: var(--ri-primary);
}

.ri-search-suggestion-group--stock .ri-search-suggestion-label,
.ri-search-suggestion-group--stock .ri-search-option-eyebrow {
  color: var(--ri-info);
}

.ri-search-suggestion-group--insider .ri-search-suggestion-label,
.ri-search-suggestion-group--insider .ri-search-option-eyebrow {
  color: var(--ri-accent);
}

.ri-search-option {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 10px 16px;
  color: var(--ri-ink);
  text-decoration: none;
  transition: background 100ms ease, color 100ms ease;
}

.ri-search-option:hover,
.ri-search-option:focus,
.ri-search-option.is-active {
  background: #f4f8f5;
  color: var(--ri-primary-dark);
  outline: 0;
  text-decoration: none;
}

.ri-search-option-eyebrow,
.ri-search-option-meta,
.ri-search-count,
.ri-search-result-eyebrow,
.ri-search-result-meta {
  font-family: var(--ri-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.ri-search-option-main,
.ri-search-result-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ri-search-option-primary,
.ri-search-result-primary {
  overflow: hidden;
  color: var(--ri-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ri-search-option-secondary,
.ri-search-result-secondary {
  overflow: hidden;
  color: var(--ri-muted);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ri-search-option-meta,
.ri-search-result-meta {
  color: var(--ri-faint);
}

.ri-search-no-match {
  padding: 24px 16px;
  color: var(--ri-muted);
  font-family: var(--ri-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ri-search-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border-top: 1px solid var(--ri-rule);
  background: #f8faf8;
  color: var(--ri-muted);
  font-family: var(--ri-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ri-search-hint strong {
  color: var(--ri-primary-dark);
  font-weight: 600;
}

.ri-search-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 48px;
}

.ri-search-page-header {
  margin-bottom: 18px;
}

.ri-search-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ri-search-result-panel {
  overflow: hidden;
  border: 1px solid var(--ri-rule);
  border-radius: var(--ri-radius-md);
  background: var(--ri-surface);
}

.ri-search-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ri-rule);
  background: var(--ri-surface-muted);
}

.ri-search-count {
  color: var(--ri-muted);
}

.ri-search-result-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ri-search-result-row {
  display: grid;
  grid-template-columns: minmax(68px, auto) minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ri-soft-rule);
  color: var(--ri-ink);
  text-decoration: none;
}

.ri-search-result-row:hover,
.ri-search-result-row:focus {
  background: #f7faf8;
  outline: 0;
  text-decoration: none;
}

.ri-search-result-list li:last-child .ri-search-result-row {
  border-bottom: 0;
}

.ri-search-result-eyebrow {
  color: var(--ri-primary);
}

.ri-search-result-meta {
  grid-column: 2;
}

@media (max-width: 1180px) {
  .ri-overview-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "grand"
      "conviction";
  }

  .ri-table-grid {
    grid-template-columns: 1fr;
  }

  .ri-search-results-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ri-page-intro {
    grid-template-columns: 1fr;
  }

  .ri-command-box {
    min-width: 0;
  }

  .ri-search-overlay {
    align-items: flex-start;
    padding: 72px 12px 12px;
  }

  .ri-search-dialog {
    max-height: calc(100vh - 84px);
  }

  .ri-search-dialog-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .ri-search-form {
    min-height: 64px;
    gap: 10px;
    padding: 0 12px;
  }

  .ri-search-input {
    font-size: 16px;
  }

  .ri-search-esc {
    display: none;
  }

  .ri-search-option {
    grid-template-columns: minmax(48px, auto) minmax(0, 1fr);
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .ri-search-option-meta {
    grid-column: 2;
  }

  .ri-search-page {
    padding: 20px 14px 36px;
  }

  .ri-stat-grid,
  .ri-conviction-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ri-overview-grid {
    grid-template-areas:
      "conviction"
      "grand";
  }

  .ri-table {
    font-size: 12px;
  }
}

/* ------------------------------------------------------------------ */
/* Company financials (stock page): period toggle, metric cards, inline
   SVG charts. Green = positive, red = negative, matching the buy/sell
   language used elsewhere. */

.ri-fin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ri-seg {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--ri-rule);
  border-radius: var(--ri-radius-sm);
  background: var(--ri-surface);
}

.ri-seg-btn {
  padding: 6px 15px;
  border: 0;
  background: transparent;
  color: var(--ri-muted);
  font-family: var(--ri-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.ri-seg-btn + .ri-seg-btn {
  border-left: 1px solid var(--ri-rule);
}

.ri-seg-btn[aria-selected="true"] {
  background: var(--ri-primary);
  color: #fff;
}

.ri-fin-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 768px) {
  .ri-fin-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ri-fin-card {
  border: 1px solid var(--ri-soft-rule);
  border-radius: var(--ri-radius-md);
  background: var(--ri-surface);
  padding: 12px 12px 10px;
}

.ri-fin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.ri-fin-card-value {
  color: var(--ri-ink);
  font-family: var(--ri-font-mono);
  font-size: 18px;
  font-weight: 600;
}

.ri-fin-card-foot {
  margin-top: 4px;
  color: var(--ri-faint);
  font-family: var(--ri-font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
}

.ri-fin-chart {
  display: block;
  width: 100%;
  height: 54px;
  margin-top: 6px;
  overflow: visible;
}

.ri-fin-bar--pos { fill: var(--ri-primary); }
.ri-fin-bar--neg { fill: var(--ri-sell); }
.ri-fin-baseline { stroke: var(--ri-rule); stroke-width: 0.5; }
.ri-fin-line {
  fill: none;
  stroke: var(--ri-primary);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.ri-fin-area { fill: var(--ri-buy-bg); opacity: 0.65; stroke: none; }
.ri-fin-dot { fill: var(--ri-primary); }

.ri-fin-delta {
  font-family: var(--ri-font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: var(--ri-radius-sm);
  white-space: nowrap;
}
.ri-fin-delta--up { background: var(--ri-buy-bg); color: var(--ri-buy-text); }
.ri-fin-delta--down { background: var(--ri-sell-bg); color: var(--ri-sell-text); }
.ri-fin-delta--flat { background: var(--ri-surface-muted); color: var(--ri-faint); }

.ri-fin-table-wrap { margin-top: 12px; }
.ri-fin-table-toggle {
  cursor: pointer;
  color: var(--ri-primary);
  font-family: var(--ri-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.ri-fin-table { table-layout: auto; }

.ri-fin-derived {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border: 1px solid var(--ri-rule);
  border-radius: 3px;
  color: var(--ri-accent);
  font-family: var(--ri-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ri-fin-source {
  margin-top: 8px;
  color: var(--ri-faint);
  font-size: 11px;
}

/* --- Financial statements explorer (/stocks/:ticker/financials) -----------
   roic.ai-style grid: metrics as rows, fiscal periods as columns. Sticky
   metric column, YoY growth sub-rows, and a hero chart the Stimulus
   controller redraws when a row is selected. */

.ri-stmt-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ri-stmt-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--ri-soft-rule);
  /* Four tabs outgrow a phone viewport — swipe within the strip instead of
     widening the page (scrollbar hidden like the nav's .no-scrollbar). */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.ri-stmt-tabs::-webkit-scrollbar {
  display: none;
}

.ri-stmt-tab {
  padding: 8px 12px 9px;
  border: 0;
  background: transparent;
  color: var(--ri-muted);
  font-family: var(--ri-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.ri-stmt-tab:hover {
  color: var(--ri-ink);
}

.ri-stmt-tab[aria-selected="true"] {
  color: var(--ri-ink);
  box-shadow: inset 0 -2px 0 var(--ri-primary);
}

.ri-stmt-chart-card {
  border: 1px solid var(--ri-soft-rule);
  border-radius: var(--ri-radius-md);
  background: var(--ri-surface);
  padding: 14px 16px 10px;
  margin-bottom: 16px;
}

.ri-stmt-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.ri-stmt-chart-meta {
  color: var(--ri-muted);
  font-family: var(--ri-font-mono);
  font-size: 11px;
}

.ri-stmt-chart svg {
  display: block;
}

.ri-stmt-grid { stroke: var(--ri-soft-rule); stroke-width: 1; }
.ri-stmt-zero { stroke: var(--ri-rule); }

.ri-stmt-axis {
  fill: var(--ri-faint);
  font-family: var(--ri-font-mono);
  font-size: 10px;
  paint-order: stroke;
  stroke: var(--ri-surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.ri-stmt-bar-label {
  fill: var(--ri-muted);
  font-family: var(--ri-font-mono);
  font-size: 10px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--ri-surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Frozen grid: the region scrolls both axes (capped height), the header row
   sticks to its top and the metric column to its left — Bloomberg-style fixed
   reference points while panning a large numeric surface. */
.ri-stmt-scroll {
  overflow: auto;
  max-height: min(72vh, 720px);
  margin-bottom: 4px;
}

.ri-stmt-scroll:focus-visible {
  outline: 2px solid var(--ri-primary);
  outline-offset: -2px;
}

.ri-stmt-table {
  table-layout: auto;
  font-size: 12.5px;
  /* border-collapse breaks position:sticky borders — separate + spacing 0
     keeps the per-cell hairlines and lets header/column freeze cleanly. */
  border-collapse: separate;
  border-spacing: 0;
}

.ri-stmt-table th,
.ri-stmt-table td {
  padding: 8px 10px;
}

.ri-stmt-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ri-surface);
}

.ri-stmt-table td {
  font-family: var(--ri-font-mono);
  font-size: 12px;
}

.ri-stmt-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 168px;
  background: var(--ri-surface);
  border-right: 1px solid var(--ri-soft-rule);
  font-family: var(--ri-font-body);
  font-size: 12.5px;
}

/* .ri-table th sets a transparent background at higher specificity — repaint
   the sticky header cell or scrolled column headers bleed through it. The
   corner cell freezes on both axes, so it must also outstack both. */
.ri-stmt-table th.ri-stmt-sticky {
  background: var(--ri-surface);
  z-index: 3;
}

/* Column crosshair (added by the Stimulus controller on hover) — combines
   with the row hover into a crosshair over the numeric surface. */
.ri-stmt-table td.ri-stmt-col-hover,
.ri-stmt-table th.ri-stmt-col-hover {
  background: var(--ri-surface-muted);
}

/* Section dividers between row groups. */
.ri-stmt-section-row td {
  padding-top: 14px;
  padding-bottom: 5px;
}

.ri-stmt-table td.ri-stmt-section {
  color: var(--ri-faint);
  font-family: var(--ri-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* TTM and CAGR columns: quiet tint + a hairline seam so the appended columns
   read as analysis, not another filed period. */
.ri-stmt-table td.ri-stmt-ttm-col,
.ri-stmt-table th.ri-stmt-ttm-col {
  background: var(--ri-surface-muted);
}

.ri-stmt-row[aria-selected="true"] td.ri-stmt-ttm-col {
  background: var(--ri-buy-bg);
}

.ri-stmt-table td.ri-stmt-trend-col,
.ri-stmt-table th.ri-stmt-trend-col {
  border-left: 1px solid var(--ri-soft-rule);
}

.ri-stmt-row { cursor: pointer; }

/* The sticky cell paints its own background, so row hover/selection must
   recolor the td (a tr background would scroll away underneath it). */
.ri-stmt-table tbody tr:hover td { background: var(--ri-surface-muted); }
.ri-stmt-row[aria-selected="true"] td { background: var(--ri-buy-bg); }
.ri-stmt-row[aria-selected="true"] td:first-child { box-shadow: inset 2px 0 0 var(--ri-primary); }

.ri-stmt-row--strong td:first-child { font-weight: 600; }
.ri-stmt-row--has-growth td { border-bottom: 0; }

.ri-stmt-growth-row td {
  padding-top: 0;
  padding-bottom: 7px;
  color: var(--ri-faint);
  font-family: var(--ri-font-mono);
  font-size: 10.5px;
}

.ri-stmt-indent {
  padding-left: 24px !important;
  color: var(--ri-muted);
}

.ri-stmt-neg { color: var(--ri-sell); }
.ri-stmt-up { color: var(--ri-buy-text); }
.ri-stmt-down { color: var(--ri-sell-text); }

@media (max-width: 640px) {
  .ri-stmt-sticky { min-width: 128px; }
  .ri-stmt-tab { padding: 8px 8px 9px; }
}

/* --- Flash toasts (the app's single flash surface) ------------------------
   Rendered once per layout by layouts/shared/_flash (the `#flash` element
   that turbo_stream_flash swaps). Quiet Ledger register: white surface,
   hairline border, semantic tint from the badge tokens. */
.ri-toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}

.ri-toast {
  padding: 10px 16px;
  border: 1px solid var(--ri-rule);
  border-radius: var(--ri-radius-md);
  background: var(--ri-surface);
  box-shadow: 0 8px 24px rgba(23, 27, 25, 0.08);
  color: var(--ri-ink);
  font-family: var(--ri-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  transition: opacity 200ms ease-in;
}

.ri-toast--notice { background: var(--ri-buy-bg); border-color: var(--ri-buy-bg); color: var(--ri-buy-text); }
.ri-toast--alert  { background: var(--ri-sell-bg); border-color: var(--ri-sell-bg); color: var(--ri-sell-text); }

.ri-toast.is-dismissing { opacity: 0; }

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