/* ==========================================================================
   ARBY — revision 2 · screen styles
   Tracked · Stats · Search · Component library · Onboarding
   Loaded after arby.css. Inherits the same tokens.
   ========================================================================== */

/* ─── shared page head ─────────────────────────────────────────────────── */
.pagehead { padding: 26px 0 4px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pagehead h1 { font-size: 26px; font-weight: 680; letter-spacing: -0.03em; }
.pagehead .sub { color: var(--muted); font-size: 13.5px; margin-top: 7px; max-width: 62ch; }
.pagehead .side { display: flex; align-items: center; gap: 10px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0 12px; }
.panel-head h2 { font-size: 15px; font-weight: 640; letter-spacing: -0.015em; }

/* ─── tracked / watchlist ──────────────────────────────────────────────── */
.wl-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 28px; padding: 20px 0 34px; align-items: start; }
.savedsearch {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); padding: 14px 16px 12px; margin-bottom: 12px;
}
.savedsearch-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.savedsearch-top h3 { font-size: 14.5px; font-weight: 620; letter-spacing: -0.015em; }
.newbadge {
  font-family: var(--font-mono); font-size: 11px; font-weight: 650;
  padding: 3px 8px; border-radius: var(--radius-ctl);
  background: var(--ok-wash); color: var(--margin-ink);
  border: 1px solid color-mix(in oklab, var(--margin) 42%, var(--border));
  white-space: nowrap;
}
.newbadge[data-zero="true"] { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.filterline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.filterline span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em;
  padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius-ctl);
  color: var(--muted);
}
.savedsearch-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--border-soft); }
.savedsearch-foot .spacer { margin-left: auto; }

.saverow {
  display: grid; grid-template-columns: 116px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); margin-bottom: 10px;
}
.saverow > img { width: 116px; height: 76px; object-fit: cover; border-radius: var(--radius-ctl); }
.saverow h3 { font-size: 14.5px; font-weight: 620; letter-spacing: -0.015em; }
.saverow .deal-meta { margin-top: 5px; }
.saverow-math { display: flex; align-items: baseline; gap: 12px; margin-top: 7px; flex-wrap: wrap; }
.saverow-math .buy { font-family: var(--font-mono); font-size: 15px; font-weight: 650; }
.saverow-math .mag { font-family: var(--font-mono); font-size: 13.5px; font-weight: 650; color: var(--margin-ink); }
.saverow-actions { display: flex; gap: 8px; align-items: center; }
.pricechange { font-family: var(--font-mono); font-size: 11.5px; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.pricechange--down { color: var(--margin-ink); }
.pricechange--up { color: var(--hot-ink); }
.pricechange--flat { color: var(--muted); }

/* ─── stats ────────────────────────────────────────────────────────────── */
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 20px; }
.statcard { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); padding: 16px 18px 18px; min-height: 132px; display: flex; flex-direction: column; }
.statcard-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.statcard-v { font-family: var(--font-mono); font-size: 38px; font-weight: 750; letter-spacing: -0.035em; margin-top: 12px; line-height: 1; }
.statcard-v.green { color: var(--margin-ink); }
.statcard-sub { color: var(--muted); font-size: 12px; margin-top: auto; padding-top: 12px; }
.statcard-best { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.statcard-best img { width: 56px; height: 40px; object-fit: cover; border-radius: var(--radius-ctl); }
.statcard-best .t { font-size: 13.5px; font-weight: 620; letter-spacing: -0.01em; }
.statcard-best .m { font-family: var(--font-mono); font-size: 13px; color: var(--margin-ink); font-weight: 650; margin-top: 3px; }

.stats-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; padding: 30px 0 8px; align-items: start; }
.chart { display: grid; gap: 14px; }
.chart-row { display: grid; grid-template-columns: 74px 1fr 52px; gap: 12px; align-items: center; }
.chart-label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.chart-track { height: 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.chart-bar { height: 100%; background: var(--margin); border-radius: 2px; width: calc(var(--v) / var(--max) * 100%); }
.chart-val { font-family: var(--font-mono); font-size: 13px; font-weight: 650; text-align: right; }
.country-list { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.country-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 11px 14px; }
.country-row + .country-row { border-top: 1px solid var(--border-soft); }
.country-row .flag { width: 18px; height: 12px; }
.country-row .nm { font-size: 13px; color: var(--fg-2); }
.country-row .ct { font-family: var(--font-mono); font-size: 14px; font-weight: 650; }
.country-bar { grid-column: 2; height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: -4px; }
.country-bar i { display: block; height: 100%; background: var(--margin); width: calc(var(--v) / var(--max) * 100%); }

/* ─── search ───────────────────────────────────────────────────────────── */
.searchwrap { position: relative; padding-top: 22px; max-width: 720px; }
.searchbox {
  display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.searchbox:focus-within { border-color: color-mix(in oklab, var(--margin) 60%, var(--border)); box-shadow: var(--focus); }
.searchbox svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.searchbox input { flex: 1; border: 0; background: none; outline: none; font-size: 15px; color: var(--fg); }
.searchbox input::placeholder { color: var(--muted); }
.searchbox .kbd { font-family: var(--font-mono); font-size: 10px; color: var(--faint); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; }
.suggest {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop); padding: 8px; display: none; max-height: 420px; overflow-y: auto;
}
.suggest[data-open="true"] { display: block; }
.suggest > .micro { display: block; padding: 8px 10px 6px; }
.suggest button {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 9px 10px; border-radius: var(--radius-ctl); text-align: left; color: var(--fg);
}
.suggest button:hover { background: var(--surface-2); }
.sug-name { font-size: 13.5px; font-weight: 560; }
.sug-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; display: block; }
.suggest .n { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.suggest .n b { color: var(--margin-ink); }

.pop-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.surprise { margin-top: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.surprise p { color: var(--muted); font-size: 12.5px; max-width: 46ch; }

.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 8px 0 40px; }
.mk {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); color: var(--fg); transition: border-color var(--motion), background var(--motion);
}
.mk:hover { border-color: color-mix(in oklab, var(--margin) 45%, var(--border)); background: var(--surface-2); color: var(--fg); }
.mk-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.mk .n { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.mk .best { font-family: var(--font-mono); font-size: 13px; font-weight: 650; color: var(--margin-ink); }

/* ─── onboarding ───────────────────────────────────────────────────────── */
.onb { height: 100%; display: flex; flex-direction: column; background: var(--bg); }
.onb-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 0; }
.onb-skip { color: var(--muted); font-size: 12.5px; }
.onb-skip:hover { color: var(--fg); }
.onb-stage { flex: 1; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; }
.onb-slide { display: none; width: min(680px, 100%); text-align: center; }
.onb-slide[data-on="true"] { display: block; animation: onbIn 420ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes onbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.onb-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--margin-ink); }
.onb-slide h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.035em; margin-top: 14px; line-height: 1.12; }
.onb-slide > p { color: var(--muted); font-size: 14.5px; margin-top: 12px; line-height: 1.6; }
.onb-flags { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.onb-flag {
  width: 58px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-ctl);
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.onb-flag .flag { width: 26px; height: 18px; }
.onb-visual { margin-top: 28px; display: flex; justify-content: center; }
.onb-photo { position: relative; width: min(440px, 100%); border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border); }
.onb-photo img { width: 100%; height: 210px; object-fit: cover; }
.onb-photo .badge-margin { top: 14px; right: 14px; animation: badgePop 640ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both; }
@keyframes badgePop { from { opacity: 0; transform: rotate(2deg) scale(0.7); } to { opacity: 1; transform: rotate(2deg) scale(1); } }
.onb-feedpreview { margin-top: 26px; display: grid; gap: 8px; text-align: left; }
.onb-mini { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-ctl); }
.onb-mini img { width: 64px; height: 40px; object-fit: cover; border-radius: 4px; }
.onb-mini .t { font-size: 12.5px; font-weight: 560; }
.onb-mini .s { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.onb-mini .m { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--margin-ink); }
.onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px 26px; }
.onb-dots { display: flex; gap: 6px; }
.onb-dots i { width: 22px; height: 3px; border-radius: 99px; background: var(--surface-3); }
.onb-dots i[data-on="true"] { background: var(--margin); }
.onb-nav { display: flex; gap: 10px; align-items: center; }
.frame[data-bp="mobile"] .onb-slide h2 { font-size: 26px; }
.frame[data-bp="mobile"] .onb-flags { flex-wrap: wrap; }
.frame[data-bp="mobile"] .onb-photo img { height: 160px; }
.frame[data-bp="mobile"] .onb-foot { padding: 0 16px 20px; }

/* ─── component library ────────────────────────────────────────────────── */
.comp-wrap { padding: 26px 0 60px; }
.comp-sec { padding: 26px 0; border-top: 1px solid var(--border-soft); }
.comp-sec:first-of-type { border-top: 0; }
.comp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.comp-head h2 { font-size: 17px; font-weight: 660; letter-spacing: -0.02em; }
.comp-head .note { color: var(--muted); font-size: 12.5px; max-width: 70ch; }
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.comp-cell { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); padding: 16px; display: grid; gap: 12px; align-content: start; }
.comp-cell > .micro { display: block; }
.comp-note { font-size: 12px; color: var(--muted); line-height: 1.55; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.swatch { border: 1px solid var(--border); border-radius: var(--radius-ctl); overflow: hidden; }
.swatch i { display: block; height: 44px; }
.swatch span { display: block; padding: 7px 9px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); background: var(--surface-2); }
.swatch b { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); font-weight: 500; }
.type-spec { display: grid; gap: 14px; }
.type-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: baseline; }
.type-row .micro { padding-top: 4px; }
.badgerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.badgerow .tag--approx, .badgerow .tag--ok { font-family: var(--font-mono); font-size: 11px; }
.badge-cell { position: relative; border-radius: var(--radius-ctl); overflow: hidden; border: 1px solid var(--border); }
.badge-cell img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.badge-cell .badge-margin { animation: none; }
.badge-cell .micro { position: absolute; left: 10px; bottom: 8px; color: var(--chip-ink); text-shadow: 0 1px 6px var(--photo-scrim); }
.qa-demo { display: flex; gap: 8px; flex-wrap: wrap; }
.frame[data-bp="mobile"] .wl-grid, .frame[data-bp="mobile"] .stats-cols { grid-template-columns: 1fr; }
.frame[data-bp="mobile"] .statgrid { grid-template-columns: 1fr; }
.frame[data-bp="mobile"] .saverow { grid-template-columns: 84px 1fr; }
.frame[data-bp="mobile"] .saverow > img { width: 84px; height: 62px; grid-row: span 2; }
.frame[data-bp="mobile"] .saverow-actions { grid-column: 2; }
.frame[data-bp="mobile"] .comp-grid { grid-template-columns: 1fr; }
.frame[data-bp="mobile"] .type-row { grid-template-columns: 1fr; gap: 4px; }
.frame[data-bp="mobile"] .mk-grid { grid-template-columns: 1fr; }
.frame[data-bp="mobile"] .chart-row { grid-template-columns: 58px 1fr 40px; }

/* overview page (index.html) lives in its own inline styles */