/* Page-specific styles. Shared tokens and components are in design.css. */

/* ---------- home: hero preview card and tool tiles ---------- */
.preview { padding: var(--space-5); position: relative; overflow: hidden; }
.preview .badge { margin-bottom: var(--space-3); }
.preview-figure { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-3) 0; }
.preview-bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; display: flex; margin: var(--space-2) 0 var(--space-2); }
.preview-bar span { display: block; height: 100%; }
.preview h2.label { font-size: var(--text-sm); font-weight: 550; margin: 0; letter-spacing: 0; }
#calculator { scroll-margin-top: calc(var(--header-h) + 16px); }
.hero + main > .card:first-child { margin-top: 0; }
.pb-impact { background: var(--chart-3); width: 82.4%; } .pb-fee { background: var(--chart-1); width: 16.6%; } .pb-net { background: var(--chart-2); width: 1%; min-width: 3px; }
.lg-impact { --c: var(--chart-3); } .lg-fee { --c: var(--chart-1); } .lg-net { --c: var(--chart-2); }
.preview-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--text-xs); color: var(--text-muted); list-style: none; padding: 0; margin: 0; }
.preview-legend li { display: inline-flex; align-items: center; gap: 6px; }
.preview-legend li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.tool-tiles { margin: var(--space-2) 0 var(--space-4); }
.tool-tiles .card { margin: 0; height: 100%; }
.tile-icon { width: 36px; height: 36px; border-radius: var(--radius); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-bottom: var(--space-3); }
.tile-icon svg { width: 20px; height: 20px; }
.tool-tiles h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.tool-tiles p { color: var(--text-muted); font-size: var(--text-sm); }
.section-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); font-weight: 650; margin: var(--space-6) 0 var(--space-3); }

/* ---------- calculator ---------- */
.calc-grid { display: grid; gap: 0 var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .calc-results { position: sticky; top: calc(var(--header-h) + 16px); }
  .calc-results .card { margin-top: var(--space-4); }
}
.narrow-col { max-width: var(--container-narrow); }
@media (min-width: 1000px) { .narrow-col { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); } .narrow-col > .prose { grid-row: span 3; } }
.snapshot { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.snapshot p { margin: 6px 0; }
.snapshot .badge { color: var(--warn); }
.unit { color: var(--text); font-weight: 600; }
.remove-hop { font-weight: 500; padding: 0 0 0 8px; }
.results .headline { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }
.headline > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.headline > div:first-child { background: var(--accent-soft); border-color: transparent; }
.headline > div:first-child .big { color: var(--accent-text); }
#legs tbody tr:last-child > * { font-weight: 700; background: var(--surface-2); }
.signup { text-align: center; }
.signup p { max-width: 56ch; margin-left: auto; margin-right: auto; color: var(--text-muted); }

/* ---------- services ---------- */
.tiers { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-3); }
.tier { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); display: flex; flex-direction: column; background: var(--surface); transition: border-color var(--dur), box-shadow var(--dur); }
.tier:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.tier h3 { margin: 0; font-size: var(--text-base); }
.tier .price { font-size: 1.9rem; font-weight: 750; letter-spacing: -.03em; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.tier .price small { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.tier ul { padding-left: 1.1rem; margin: 6px 0 var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.tier li { margin: .25rem 0; }
.tier .button { margin-top: auto; }
.tier.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); position: relative; }
.founding { border: 1px dashed var(--warn-border); background: linear-gradient(180deg, var(--warn-soft), var(--surface) 70%); }
.checklist { list-style: none; padding-left: 0; }
.checklist li { padding-left: 1.8rem; position: relative; margin: .5rem 0; }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--good-soft); color: var(--good); font-weight: 800; font-size: .75rem; display: grid; place-items: center; }
.checklist.never li::before { content: "✕"; background: var(--bad-soft); color: var(--bad); }
.steps { counter-reset: step; list-style: none; padding-left: 0; }
.steps li { counter-increment: step; padding-left: 2.4rem; position: relative; margin: .8rem 0; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; display: grid; place-items: center; font-size: var(--text-sm); }
@media (min-width: 720px) { .tiers { grid-template-columns: repeat(3, 1fr); } .tiers.two { grid-template-columns: repeat(2, 1fr); } }

/* ---------- sample report ---------- */
.report-banner { display: flex; gap: 10px; align-items: flex-start; background: var(--warn-soft); color: var(--text); border: 1px solid var(--warn-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); font-weight: 600; margin: var(--space-5) 0 0; }
.report-banner::before { content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--warn); color: var(--surface); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.report .page-head { padding-top: var(--space-5); }
.report .kpis { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .report .kpis { grid-template-columns: repeat(4, 1fr); } }
.report table td, .report table th { white-space: normal; }
.report table td { white-space: nowrap; }
.report table th[scope="row"] { min-width: 11rem; }
tr.ref td, tr.ref th { color: var(--text-muted); font-style: italic; }
tr.hl > * { font-weight: 700; background: var(--accent-soft); }
.dd-chart svg { width: 100%; height: auto; display: block; }
.dd-chart .axis { stroke: var(--chart-axis); }
.dd-chart .grid { stroke: var(--chart-grid); }
.dd-chart .tick { fill: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.dd-chart .panel-title { fill: var(--text); font-size: 13px; font-weight: 650; }
.dd-chart path { fill: none; stroke-width: 2; stroke-linejoin: round; }
.dd-chart .s-original { stroke: var(--chart-5); --c: var(--chart-5); }
.dd-chart .s-r1 { stroke: var(--chart-1); --c: var(--chart-1); }
.dd-chart .s-v2 { stroke: var(--chart-3); --c: var(--chart-3); stroke-dasharray: 6 3; }
.legend .sw { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 2px; }
.sw.s-original { background: var(--chart-5); } .sw.s-r1 { background: var(--chart-1); } .sw.s-v2 { background: repeating-linear-gradient(90deg, var(--chart-3) 0 6px, transparent 6px 9px); }
.dd-chart { overflow-x: auto; position: relative; }
.dd-chart svg { min-width: 560px; }

/* ---------- swap cost comparer ---------- */
.compare-row { margin-top: var(--space-4); }
.venue-list { list-style: none; padding: 0; margin: var(--space-3) 0; counter-reset: venue; display: grid; gap: var(--space-3); }
.venue { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); counter-increment: venue; background: var(--surface); transition: border-color var(--dur), box-shadow var(--dur); }
.venue:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.venue.failed { border-style: dashed; color: var(--text-muted); background: transparent; box-shadow: none; }
.venue-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.venue-name { margin: 0; font-weight: 650; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; }
.venue:not(.failed) .venue-name::before { content: counter(venue); width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; display: grid; place-items: center; flex: none; }
.venue-kind { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); padding-left: 34px; }
.venue.failed .venue-kind { padding-left: 0; }
.venue-cost { text-align: right; flex: none; }
.venue-cost .big { font-size: 1.6rem; }
.cost-bar { height: 4px; border-radius: 2px; background: var(--surface-3); margin: var(--space-3) 0 0; overflow: hidden; }
.cost-bar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .5s var(--ease); }
.cost-bar.high span { background: var(--warn); }
.receive { margin: var(--space-3) 0 4px; font-weight: 550; }
.breakdown { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-4); font-size: var(--text-sm); margin: var(--space-2) 0; }
.breakdown dt { color: var(--text-muted); }
.breakdown dd { margin: 0; font-variant-numeric: tabular-nums; }
.stamp { font-size: var(--text-xs); color: var(--text-faint); margin: var(--space-2) 0 0; }
.fees { margin-top: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.fee-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 var(--space-3); }

/* ---------- pools dashboard ---------- */
.pools-table th[scope="row"] { white-space: nowrap; }
.pool-name { display: block; font-weight: 650; }
.pool-venue, .reserves span { display: block; font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; }
.reserves span:first-child { color: var(--text); font-size: var(--text-sm); }
.warn-cell { color: var(--warn); font-weight: 650; }
.stamp-cell { font-size: var(--text-xs); color: var(--text-faint); }
.pools-chart svg { min-width: 560px; }
@media print { .pools-chart svg, .dd-chart svg { min-width: 0; } #refresh, .compare-row { display: none; } }

/* ---------- 404 ---------- */
.not-found { text-align: center; padding: var(--space-8) 0; }
.not-found .cta-row { justify-content: center; }
.not-found .lede { margin: 0 auto var(--space-5); }
.not-found .code { font-size: 4.5rem; font-weight: 800; letter-spacing: -.05em; color: var(--accent-text); margin: 0; line-height: 1; }
.state-cell { white-space: normal !important; text-align: center !important; padding: var(--space-4) !important; }
@media (max-width: 599px) {
  .pools-table.stack-sm th[scope="row"] { text-align: left; background: var(--surface-2); padding: 10px 12px; }
  .pools-table.stack-sm .reserves span { display: inline; }
  .pools-table.stack-sm .reserves span + span::before { content: " · "; }
}
.dd-chart .hover-dot.s-original { --c: var(--chart-5); } .dd-chart .hover-dot.s-r1 { --c: var(--chart-1); } .dd-chart .hover-dot.s-v2 { --c: var(--chart-3); }
.dd-chart circle.hover-dot { stroke: var(--surface); stroke-width: 2; stroke-dasharray: none; }
.dd-chart svg + svg { margin-top: var(--space-3); }
.tt-row.s-original { --c: var(--chart-5); } .tt-row.s-r1 { --c: var(--chart-1); } .tt-row.s-v2 { --c: var(--chart-3); }
.pools-table thead th { white-space: normal; line-height: 1.3; vertical-align: bottom; min-width: 4.5rem; }
.pools-table th, .pools-table td { padding-left: 10px; padding-right: 10px; }

/* Bot dashboard demo (bot-demo.html): a replay styled like the bot's own phone dashboard */
.demo-label { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--warn-border); background: var(--warn-soft); border-radius: var(--radius); color: var(--text); font-size: var(--text-base); }
.demo-label strong { color: var(--warn); }
.dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.dash-head h2 { margin: 0 0 4px; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.dash-head p { margin: 0; }
.dash-tag { white-space: nowrap; }
.replay-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.replay-controls .button { min-width: 6.5rem; }
.replay-controls .chips button { font-size: var(--text-xs); }
.replay-controls .scrub { flex: 1 1 220px; display: flex; align-items: center; }
.replay-controls input[type="range"] { width: 100%; accent-color: var(--accent); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.tile { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; min-width: 0; transition: border-color var(--dur), box-shadow var(--dur); }
.tile .l { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.tile .v { margin: 2px 0 0; font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile-flash { animation: flash .9s var(--ease); border-color: var(--accent); }
.dash .chart figcaption { display: flex; justify-content: space-between; gap: var(--space-2); }
.dash .chart svg { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.mk-buy { fill: var(--good); } .mk-sell { fill: var(--bad); }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--space-3); color: var(--text-muted); }
.legend .lg::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--chart-1); }
.legend .lg-buy::before { width: 0; height: 0; border-radius: 0; background: none; border: 6px solid transparent; border-bottom: 10px solid var(--good); border-top: 0; }
.legend .lg-sell::before { width: 0; height: 0; border-radius: 0; background: none; border: 6px solid transparent; border-top: 10px solid var(--bad); border-bottom: 0; }
.log-h { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-lg); }
.trade-log { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.trade-log:empty { display: none; }
.trade { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.trade:last-child { border-bottom: 0; }
.trade p { margin: 0; }
.trade-head { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trade-what { margin-top: 2px !important; font-variant-numeric: tabular-nums; }
.trade-result { font-weight: 600; font-variant-numeric: tabular-nums; }
.trade-fees { color: var(--text-muted); font-size: var(--text-xs); font-family: var(--font-mono); margin-top: 2px !important; overflow-wrap: anywhere; }
.trade.is-loss { background: linear-gradient(90deg, var(--bad-soft), transparent 60%); }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } }