/* ARWA Rates Dashboard — kit styles */
@import url('../../colors_and_type.css');
@import url('../../motion.css');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,900&display=swap');

body { margin: 0; background: var(--bone-50); }

.rd-app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* -------- Sidebar -------- */
.rd-sidebar {
  background: var(--navy-900);
  color: var(--bone-50);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky; top: 0; height: 100vh;
}
.rd-sidebar__brand { padding: 4px 6px 20px; display:flex; align-items:center; gap:12px; }
.rd-sidebar__mark { width: 30px; height: auto; display:block; flex-shrink:0; }
.rd-sidebar__lockup { display:flex; align-items:stretch; gap:10px; }
.rd-sidebar__wm { font-family:'Fraunces',serif; font-variation-settings:"opsz" 144,"SOFT" 100; font-weight:900; font-size:22px; letter-spacing:-0.02em; line-height:.9; color:#fff; align-self:center; }
.rd-sidebar__rule { width:1px; background:var(--aqua-400); align-self:stretch; opacity:.9; }
.rd-sidebar__product { font-family:var(--font-ui); font-weight:500; font-size:13px; letter-spacing:-0.005em; color:var(--aqua-300); align-self:center; }
.rd-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.rd-sidebar__item {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; cursor: pointer;
  color: #B8C6D6; font: 500 14px/1 var(--font-ui);
  padding: 10px 12px; border-radius: 8px; text-align: left;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.rd-sidebar__item:hover { background: rgba(255,255,255,.06); color: #fff; }
.rd-sidebar__item.is-active { background: var(--navy-800); color: #fff; }
.rd-sidebar__item svg { opacity: .9; }
.rd-sidebar__foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border-on-dark); }
.rd-sidebar__user { display: flex; align-items: center; gap: 10px; padding: 6px; }
.rd-sidebar__avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--aqua-500); color: #fff; font: 700 12px/34px var(--font-ui); text-align: center; }
.rd-sidebar__name { font: 600 13px/1.2 var(--font-ui); color: #fff; }
.rd-sidebar__role { font: 500 11px/1.4 var(--font-ui); color: #9AAFC6; }

/* -------- TopBar -------- */
.rd-topbar {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bone-50); position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(12px); background-color: rgba(250, 247, 241, 0.82);
}
.rd-topbar__eyebrow { font: 600 11px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua-700); margin-bottom: 6px; }
.rd-topbar__title { font: 600 30px/1.1 var(--font-display); color: var(--ink-950); margin: 0; letter-spacing: -0.01em; }
.rd-topbar__subtitle { font: 400 14px/1.4 var(--font-ui); color: var(--fg-muted); margin-top: 4px; }
.rd-topbar__tools { display: flex; gap: 10px; align-items: center; }
.rd-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; width: 280px; transition: border-color var(--dur-fast); }
.rd-search:focus-within { border-color: var(--aqua-500); box-shadow: var(--shadow-focus); }
.rd-search input { border: none; outline: none; font: 400 13px/1 var(--font-ui); width: 100%; color: var(--ink-950); background: transparent; }
.rd-search svg { color: var(--fg-muted); }

/* -------- Buttons -------- */
.btn { font: 600 13px/1 var(--font-ui); padding: 9px 14px; border-radius: 8px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.btn--primary { background: var(--coral-500); color: #fff; }
.btn--primary:hover { background: var(--coral-600); }
.btn--ghost { background: transparent; color: var(--navy-900); border: 1px solid var(--border); }
.btn--ghost:hover { background: var(--bone-100); }

/* -------- Main area -------- */
.rd-main { padding: 20px 28px 40px; }
.rd-grid { display: grid; gap: 16px; }
.rd-grid--stats { grid-template-columns: repeat(4, 1fr); }
.rd-grid--2 { grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 16px; }
.rd-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* -------- Stat cards -------- */
.rd-stat {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 18px; box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; gap: 4px;
}
.rd-stat__label { font: 600 11px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.rd-stat__value { font: 600 30px/1 var(--font-mono); color: var(--navy-900); margin-top: 4px; }
.rd-stat__unit { font: 500 14px/1 var(--font-ui); color: var(--fg-muted); margin-left: 4px; }
.rd-stat__delta { font: 600 12px/1 var(--font-ui); color: var(--fg-muted); }
.rd-stat__delta.is-up { color: var(--sage-700); }
.rd-stat__delta.is-down { color: var(--coral-700); }
.rd-stat__foot { font: 500 11px/1.3 var(--font-ui); color: var(--fg-subtle); margin-top: 2px; }

/* -------- Generic card -------- */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-xs);
}
.card__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.card__title { font: 600 18px/1.2 var(--font-display); color: var(--ink-950); margin: 2px 0 0; letter-spacing: -0.01em; }

/* -------- Table -------- */
.rd-table-wrap { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.rd-table { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--font-ui); }
.rd-table th { text-align: left; padding: 12px 14px; background: var(--bone-100); font: 600 11px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); border-bottom: 1px solid var(--border); }
.rd-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--ink-950); }
.rd-table tr:last-child td { border-bottom: none; }
.rd-table tr { cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
.rd-table tr:hover td { background: var(--bone-100); }
.rd-table tr.is-selected td { background: var(--sky-100); }
.rd-table__name { font-weight: 600; color: var(--navy-900); }
.rd-table__sub { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.rd-table .is-up { color: var(--sage-700); }
.rd-table .is-down { color: var(--coral-700); }

/* -------- Badges -------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font-ui); padding: 4px 9px; border-radius: 999px; }
.badge .dot { width: 6px; height: 6px; border-radius: 999px; }
.badge--healthy { background: rgba(95,143,71,.15); color: var(--sage-700); }
.badge--healthy .dot { background: var(--sage-500); }
.badge--watch { background: rgba(227,162,59,.18); color: #7a5712; }
.badge--watch .dot { background: #E3A23B; }
.badge--danger { background: rgba(240,107,71,.15); color: var(--coral-700); }
.badge--danger .dot { background: var(--coral-500); }

/* -------- Compare bars -------- */
.rd-compare { margin: 12px 0; }
.rd-compare__label { font: 500 12px/1 var(--font-ui); color: var(--fg-muted); margin-bottom: 6px; }
.rd-compare__track { position: relative; background: var(--bone-100); border-radius: 4px; height: 22px; overflow: hidden; }
.rd-compare__peer { position: absolute; inset: 0 auto 0 0; background: var(--sky-300); border-right: 2px dashed var(--navy-700); }
.rd-compare__you { position: absolute; inset: 0 auto 0 0; background: var(--aqua-500); }
.rd-compare__values { display: flex; justify-content: space-between; font: 500 12px/1 var(--font-mono); color: var(--ink-950); margin-top: 4px; }
.rd-compare__peer-tag { color: var(--fg-muted); }
.rd-legend { display: flex; gap: 12px; font: 500 11px/1 var(--font-ui); color: var(--fg-muted); }
.rd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.rd-legend__you i { background: var(--aqua-500); }
.rd-legend__peer i { background: var(--sky-300); }

/* -------- Rate tiers -------- */
.rd-tiers { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.rd-tiers__row { display: grid; grid-template-columns: 140px 1fr 90px; align-items: center; gap: 12px; }
.rd-tiers__label { font: 500 12px/1 var(--font-mono); color: var(--fg-muted); }
.rd-tiers__bar { height: 10px; background: var(--bone-100); border-radius: 4px; overflow: hidden; }
.rd-tiers__bar > div { height: 100%; background: linear-gradient(90deg, var(--aqua-400), var(--aqua-600)); border-radius: 4px; }
.rd-tiers__rate { font: 600 13px/1 var(--font-mono); color: var(--navy-900); text-align: right; }
.rd-tiers__rate small { font: 500 10px/1 var(--font-ui); color: var(--fg-muted); margin-left: 2px; }

/* -------- Chart -------- */
.rd-chart { width: 100%; height: auto; }
.rd-chart__foot { font: 500 11px/1 var(--font-ui); color: var(--fg-muted); margin-top: 4px; }

/* -------- Sparkline -------- */
.rd-spark { display: block; }

/* -------- Map -------- */
.rd-map { width: 100%; max-width: 360px; height: auto; display: block; }
.rd-map-legend { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; max-width: 280px; }
.rd-map-legend__label { font: 600 11px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.rd-map-legend__scale { display: flex; height: 12px; border-radius: 2px; overflow: hidden; }
.rd-map-legend__scale span { flex: 1; }
.rd-map-legend__ticks { display: flex; justify-content: space-between; font: 500 10px/1 var(--font-mono); color: var(--fg-muted); margin-top: 2px; }

/* -------- Section header -------- */
.rd-section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 24px 0 10px; }
.rd-section-head h2 { font: 600 20px/1.2 var(--font-display); color: var(--ink-950); margin: 0; letter-spacing: -0.01em; }
.rd-section-head .eyebrow { color: var(--aqua-700); }