/* Bitcoin time-machine page styles. Scoped to .btc-page and built from the site tokens, so it
   inherits the existing light/dark palette rather than introducing a second visual language. */
.btc-page .btc-calculator { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: start; }
.btc-page .btc-calculator .field input,
.btc-page .btc-calculator .field select { min-width: 0; }
.btc-page .btc-mode {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5px;
  padding: 5px;
  margin: 0 0 18px;
  background: var(--accent);
  border-radius: 12px;
}
.btc-page .btc-mode button {
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}
.btc-page .btc-mode button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.btc-page .btc-mode button:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }
.btc-page .btc-money-input {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.btc-page .btc-money-input:focus-within { outline: 2px solid var(--highlight); outline-offset: 2px; }
.btc-page .btc-money-input input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 0 11px 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.btc-page .btc-money-input input:focus { outline: none; }
.btc-page .btc-prefix { flex: 0 0 auto; color: var(--muted); font-weight: 600; white-space: nowrap; }
.btc-page .btc-date-chips,
.btc-page .btc-fee-chips { margin: 8px 0 4px; }
.btc-page .chip { min-height: 44px; }
.btc-page .btc-advanced { margin-top: 16px; }
.btc-page .btc-advanced summary {
  cursor: pointer;
  min-height: 44px;
  padding: 10px 0;
  font-weight: 600;
  line-height: 1.45;
}
.btc-page .btc-advanced summary span { display: block; color: var(--muted); font-size: 0.82rem; font-weight: 500; }
.btc-page .btc-advanced summary:focus-visible { outline: 2px solid var(--highlight); outline-offset: 3px; border-radius: 4px; }
.btc-page .btc-assumption {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}
.btc-page .privacy-note { margin-top: 8px; }

.btc-page .btc-hero { text-align: left; padding: 24px; }
.btc-page .btc-hero .label { font-size: 0.95rem; line-height: 1.45; }
.btc-page .btc-hero .value {
  margin: 8px 0;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.btc-page .btc-hero .sub { margin-top: 4px; font-size: 0.95rem; line-height: 1.5; opacity: 1; }
.btc-page .btc-hero-meta { margin-top: 10px; font-size: 0.82rem; line-height: 1.45; opacity: 0.9; }
.btc-page .btc-hero.is-loss { background: var(--danger); color: var(--on-primary); }
.btc-page .btc-hero.is-gain,
.btc-page .btc-hero.is-flat { color: var(--on-primary); }
.btc-page .btc-meaning {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.btc-page .btc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.btc-page .btc-tiles .value { font-size: 1.05rem; overflow-wrap: anywhere; }
.btc-page .btc-tiles .is-gain { color: var(--ok-text); }
.btc-page .btc-tiles .is-loss { color: var(--danger); }
.btc-page .btc-source-line {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}
.btc-page .btc-source-line a { color: inherit; text-decoration: underline; }
.btc-page .result-block { margin: 26px 0 0; }
.btc-page .result-block .rp-heading { margin-top: 0; }
.btc-page .btc-chart-card {
  margin: 10px 0 12px;
  padding: 10px 8px;
  background: var(--accent);
  border-radius: 12px;
}
.btc-page .btc-chart { width: 100%; overflow: hidden; }
.btc-page .btc-grid { stroke: var(--border); stroke-width: 1; }
.btc-page .btc-axis { fill: var(--muted); font-size: 11px; font-family: inherit; }
.btc-page .btc-axis-title { fill: var(--muted); font-size: 11px; font-family: inherit; }
.btc-page .btc-area { fill: var(--highlight); fill-opacity: 0.12; }
.btc-page .btc-value-line { fill: none; stroke: var(--highlight); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.btc-page .btc-cash-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-dasharray: 6 5; stroke-linejoin: round; }
.btc-page .btc-selected-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; }
.btc-page .btc-point { fill: var(--highlight); stroke: var(--card); stroke-width: 1; }
.btc-page .btc-point.is-selected { stroke: var(--primary); stroke-width: 2; }
.btc-page .btc-scrub-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 4px;
  font-size: 0.88rem;
  font-weight: 600;
}
.btc-page .btc-scrub-label output { color: var(--muted); font-weight: 500; text-align: right; }
.btc-page .btc-scrub-label + input[type="range"] { width: 100%; accent-color: var(--highlight); }
.btc-page .btc-scrub-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 12px;
  margin: 10px 0 12px;
  padding: 12px;
  background: var(--accent);
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
}
.btc-page .btc-scrub-card b { display: block; font-size: 0.9rem; overflow-wrap: anywhere; }
.btc-page .btc-scrub-date { grid-column: 1 / -1; font-weight: 700; }
.btc-page .btc-scrub-gain.is-gain { color: var(--ok-text); }
.btc-page .btc-scrub-gain.is-loss { color: var(--danger); }
.btc-page .btc-milestones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.btc-page .btc-milestones > div {
  min-width: 0;
  padding: 9px 10px;
  background: var(--accent);
  border-radius: 9px;
}
.btc-page .btc-milestones span { display: block; color: var(--muted); font-size: 0.74rem; }
.btc-page .btc-milestones strong { display: block; margin-top: 2px; font-size: 0.82rem; overflow-wrap: anywhere; }
.btc-page .btc-chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.8rem;
}
.btc-page .btc-chart-key span { display: inline-flex; align-items: center; gap: 6px; }
.btc-page .btc-chart-key i { display: inline-block; width: 20px; height: 3px; border-radius: 2px; }
.btc-page .btc-key-value { background: var(--highlight); }
.btc-page .btc-key-cash { background: var(--primary); }
.btc-page .btc-bars { margin: 12px 0 10px; }
.btc-page .btc-bar-row {
  display: grid;
  grid-template-columns: minmax(100px, 0.8fr) minmax(0, 2fr) minmax(86px, auto);
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.btc-page .btc-bar-label { font-size: 0.85rem; color: var(--muted); }
.btc-page .btc-bar-track {
  height: 16px;
  overflow: hidden;
  background: var(--accent);
  border-radius: 8px;
}
.btc-page .btc-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 8px;
  transition: width 0.25s ease;
}
.btc-page .btc-cash-fill { background: var(--primary); }
.btc-page .btc-btc-fill { background: var(--highlight); }
.btc-page .btc-btc-fill.is-loss { background: var(--danger); }
.btc-page .btc-bar-row strong { text-align: right; overflow-wrap: anywhere; }

.btc-page .btc-whatif-grid,
.btc-page .btc-lump-grid,
.btc-page .btc-feel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.btc-page .btc-whatif-card,
.btc-page .btc-lump-card,
.btc-page .btc-feel-card {
  min-width: 0;
  padding: 12px;
  background: var(--accent);
  border-radius: 10px;
}
.btc-page .btc-whatif-card strong,
.btc-page .btc-lump-card strong,
.btc-page .btc-feel-card strong {
  display: block;
  margin: 5px 0;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}
.btc-page .btc-whatif-label,
.btc-page .btc-feel-label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.btc-page .btc-whatif-card .hint,
.btc-page .btc-lump-card .hint,
.btc-page .btc-feel-card .hint { display: block; margin-top: 3px; line-height: 1.4; }
.btc-page .btc-whatif-delta { display: block; margin-top: 8px; font-size: 0.82rem; font-weight: 700; }
.btc-page .is-gain { color: var(--ok-text); }
.btc-page .is-loss { color: var(--danger); }
.btc-page .is-flat { color: var(--muted); }
.btc-page .btc-footnote {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}
.btc-page .btc-method {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.btc-page .btc-method summary {
  cursor: pointer;
  min-height: 44px;
  padding: 10px 0;
  font-weight: 600;
  line-height: 1.45;
}
.btc-page .btc-method summary:focus-visible { outline: 2px solid var(--highlight); outline-offset: 3px; border-radius: 4px; }
.btc-page .btc-method-body { color: var(--muted); font-size: 0.84rem; line-height: 1.55; }
.btc-page .btc-method-body p { margin: 0 0 10px; }
.btc-page .btc-method-body strong { color: var(--text); }
.btc-page .btc-method-body a { color: inherit; text-decoration: underline; }

.btc-page .calc-info .fact-list { display: grid; gap: 12px; margin-top: 14px; }
.btc-page .calc-info .fact { padding: 14px 16px; border-radius: 12px; background: var(--accent); }
.btc-page .calc-info .fact h3 { margin: 0 0 6px; font-size: 0.95rem; }
.btc-page .calc-info .fact p { margin: 0; font-size: 0.88rem; line-height: 1.6; }
.btc-page .calc-info .formula {
  margin: 10px 0 14px;
  padding: 12px;
  overflow-wrap: anywhere;
  white-space: normal;
  background: var(--accent);
  border-left: 3px solid var(--highlight);
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
  line-height: 1.7;
}

@media (max-width: 1000px) {
  .btc-page .btc-calculator { grid-template-columns: minmax(0, 1fr); }
  .btc-page .btc-calculator > .btc-results { margin-top: 18px; }
}

@media (max-width: 760px) {
  .btc-page .btc-whatif-grid,
  .btc-page .btc-lump-grid,
  .btc-page .btc-feel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btc-page .btc-scrub-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btc-page .btc-bar-row { grid-template-columns: minmax(88px, 0.7fr) minmax(0, 1.6fr) minmax(76px, auto); }
}
@media (max-width: 620px) {
  .btc-page .btc-hero { padding: 18px; }
  .btc-page .btc-hero .value { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .btc-page .btc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btc-page .btc-bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
  }
  .btc-page .btc-bar-label { grid-column: 1 / -1; }
  .btc-page .btc-bar-row strong { text-align: right; }
  .btc-page .calc-info .formula { font-size: 0.82rem; }
  .btc-page .btc-axis,
  .btc-page .btc-axis-title { font-size: 18px; }
}
@media (max-width: 430px) {
  .btc-page .btc-mode { grid-template-columns: minmax(0, 1fr); }
  .btc-page .btc-tiles { grid-template-columns: minmax(0, 1fr); }
  .btc-page .btc-milestones { grid-template-columns: minmax(0, 1fr); }
  .btc-page .btc-whatif-grid,
  .btc-page .btc-lump-grid,
  .btc-page .btc-feel-grid,
  .btc-page .btc-scrub-card { grid-template-columns: minmax(0, 1fr); }
  .btc-page .btc-chart-card { padding: 4px 2px; }
  .btc-page .btc-scrub-label { display: block; }
  .btc-page .btc-scrub-label output { display: block; margin-top: 2px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .btc-page .btc-bar-fill { transition: none; }
  .btc-page .btc-calculator *,
  .btc-page .calc-info * { scroll-behavior: auto; }
}