/* JetBrains Mono (SIL Open Font License 1.1), latin subset, variable weight */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format("woff2");
}

:root {
  --bg: #05070a;
  --panel: #080b10;
  --sheet: #0b0f16;
  --line: rgba(255, 255, 255, 0.1);
  --text: #f5f7fa;
  --muted: rgba(255, 255, 255, 0.5);
  --dim: rgba(255, 255, 255, 0.35);
  --orange: #f7931a;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  height: var(--app-h, 100dvh); /* the visible height, measured by app.js (fitViewport) */
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body { user-select: none; -webkit-user-select: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
a { color: var(--orange); }
[hidden] { display: none !important; }

/* Clip, so nothing parked off-screen (the pill bar before it rises in) can make the page
   taller than the screen: iPad Safari will scroll a page despite overflow: hidden on body */
#app { display: flex; flex-direction: column; height: var(--app-h, 100dvh); overflow: hidden; overflow: clip; }
/* ?vp: the viewport numbers, for checking a browser that sizes the page wrong */
.vp-debug {
  position: fixed; left: 8px; top: 50%; z-index: 70; padding: 8px 10px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.85); color: #9fe870; font-size: 11px; line-height: 1.5;
  white-space: pre; pointer-events: none;
}

/* ---------- Header ---------- */
.topbar {
  position: relative; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: calc(56px + env(safe-area-inset-top)); flex-shrink: 0;
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: rgba(5, 7, 10, 0.95);
}
/* Wordmark in the app icon's style: every letter on its own flap tile; 1 and .COM orange */
.logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; }
.logo-tiles { display: inline-flex; gap: 2px; }
.lt {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 21px; border-radius: 3px;
  background: linear-gradient(180deg, #1a212e 0%, #0e131b 50%, #0c1018 50%, #05070a 100%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: var(--text); font-size: 13px; font-weight: 800;
}
.lt.o { color: var(--orange); }
.lt::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px;
  background: #000; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.logo:hover .lt { border-color: rgba(247, 147, 26, 0.35); }
@media (min-width: 700px) {
  .lt { width: 18px; height: 25px; font-size: 15px; }
}
.topnav { display: flex; gap: 6px; }
.chip {
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px;
  background: transparent; padding: 6px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
}
.chip:hover { background: rgba(255, 255, 255, 0.08); }
.chip-orange { color: var(--orange); border-color: rgba(247, 147, 26, 0.5); }
.chip.icon { display: inline-flex; align-items: center; padding: 6px 9px; }
.chip.icon svg { display: block; }
#fsBtn[aria-pressed="false"] { opacity: 1; }
/* Narrow phones: a little tighter, so the logo and four buttons share one row */
@media (max-width: 400px) {
  .topnav { gap: 4px; }
  .chip { padding: 6px 8px; }
  .chip.icon { padding: 6px 7px; }
  .logo-tiles { gap: 1.5px; }
  .lt { width: 14px; }
}
@media (max-width: 359px) { #fsBtn { display: none; } } /* no room on the smallest phones */
.chip-orange:hover { background: rgba(247, 147, 26, 0.1); }
.chip[aria-pressed="false"] { opacity: 0.55; }

/* ---------- Stage ---------- */
.stage {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  width: 100%;
  padding: 12px max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}

.confetti { position: fixed; inset: 0; z-index: 45; width: 100%; height: 100%; pointer-events: none; }
/* On this day, in the header (renderEventBar in app.js): sized like the header's chips */
.otd {
  flex: 0 1 auto; min-width: 0; display: inline-flex; flex-direction: column; justify-content: center;
  padding: 5px 12px; border: 1px solid rgba(247, 147, 26, 0.5); border-radius: 999px;
  background: rgba(247, 147, 26, 0.1); color: var(--orange); text-decoration: none; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.25; white-space: nowrap;
}
.otd span { overflow: hidden; text-overflow: ellipsis; }
.otd:hover { background: rgba(247, 147, 26, 0.18); }
.otd[hidden] { display: none; }
.otd.two { padding: 2px 8px; font-size: 9.5px; line-height: 1.2; border-radius: 12px; }
.otd.two span + span { color: rgba(247, 147, 26, 0.8); }
.otd.covered { visibility: hidden; } /* a notice has the header for its two seconds */
@media (orientation: landscape) and (max-height: 560px) { .otd { display: none; } } /* the controls live there */

/* ---------- Split-flap board ---------- */
.board { flex-shrink: 0; opacity: 0; transition: opacity 500ms ease; cursor: pointer; container-type: inline-size; }
.board.on { opacity: 1; }
.board:not(.on) { pointer-events: none; }
.flap-row { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 2px; }
.flap-row.row2 { margin-top: 5px; }
.tile {
  position: relative; overflow: hidden;
  height: clamp(26px, 7.2vw, 48px);
  background: linear-gradient(180deg, #11161f 0%, #0a0e14 50%, #070a0f 100%);
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 3px;
  perspective: 420px;
  contain: layout paint; /* a letter change re-lays-out this tile, not the whole board */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.5);
  --fs: clamp(13px, 4.1vw, 28px);
}
.row2 .tile { height: clamp(19px, 5.1vw, 32px); --fs: clamp(10px, 3vw, 19px); }
/* The board fills the window's width at any size, ultrawide included: a tile's height follows
   its width (cqw: 1% of the board's width), so the letters grow with the screen, and the window's
   height reins it in so the chart keeps its share. Letters are 58% of the tile's height.
   (Browsers without container units keep the sizes above.) */
.tile { --h: min(calc(4.6cqw + 10px), 10dvh); height: var(--h); --fs: calc(var(--h) * 0.58); }
.row2 .tile { --h: min(calc(3.1cqw + 8px), 7dvh); height: var(--h); --fs: calc(var(--h) * 0.58); }
.tile .half, .tile .flap { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; }
.tile .half { z-index: 1; }
.tile .half-top, .tile .flap-top { top: 0; background: linear-gradient(180deg, #161c27, #0d1118); }
.tile .half-bottom, .tile .flap-bottom { bottom: 0; background: linear-gradient(180deg, #0b0f16, #06080c); }
.tile .full {
  position: absolute; left: 0; right: 0; height: 200%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs); font-weight: 700; color: var(--text);
}
.row2 .tile .full { color: #c8d0da; font-weight: 500; }
.tile .half-top > .full, .tile .flap-top > .full { top: 0; }
.tile .half-bottom > .full, .tile .flap-bottom > .full { top: -100%; }
.tile .flap { z-index: 3; backface-visibility: hidden; visibility: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45); }
.tile .flap-top { transform-origin: 50% 100%; }
.tile .flap-bottom { transform-origin: 50% 0%; }
.tile::after { /* centre seam, always above the flaps */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px;
  background: rgba(0, 0, 0, 0.85); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
  z-index: 4; pointer-events: none;
}
.tile.accent .full { color: var(--orange); }
/* ?flaps=lite: flat flaps and no shadows, much less for a slow browser to draw */
.lite .tile { perspective: none; box-shadow: none; }
.lite .tile .flap { box-shadow: none; backface-visibility: visible; }

.meta {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 8px 0 0; min-height: 14px;
  font-size: 10px; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase;
  white-space: nowrap;
}
#metaLeft { display: flex; flex: 1 1 0; min-width: 0; margin-right: auto; } /* shrinks (…) rather than pushing the price onto a line of its own */
.meta .who { color: var(--muted); font-weight: 700; }
/* Phones: whose bitcoin (SATOSHI'S STASH, EVERY BITCOIN MINED) gets its own line above */
@media (max-width: 600px) {
  .meta { flex-wrap: wrap; row-gap: 3px; }
  .meta .who { flex: 0 0 100%; }
}
#metaLeft span { overflow: hidden; text-overflow: ellipsis; }
#metaLeft b { flex-shrink: 0; margin-left: 0.6em; color: var(--orange); font-weight: 700; }
.live {
  flex-shrink: 0; padding: 4px 0; margin: -4px 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; white-space: nowrap;
}
.live:hover { color: var(--text); }
.live-dot {
  display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%;
  background: #3ddc84; box-shadow: 0 0 8px #3ddc84; vertical-align: 1px;
  animation: pulse 2s ease-in-out infinite;
}
.live-dot.stale { background: #e8a33d; box-shadow: none; animation: none; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- Chart ---------- */
.chart {
  position: relative; flex: 1; min-height: 120px; margin-top: 8px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  opacity: 0; transition: opacity 500ms ease; overflow: hidden;
}
.chart.on { opacity: 1; }
.chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.chart-head { position: absolute; left: 8px; top: 6px; right: 8px; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.chart-head > * { pointer-events: auto; }
.tf { display: flex; gap: 2px; }
.tf button {
  padding: 2px 6px; border: 0; border-radius: 999px; background: transparent;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--dim);
}
.tf button:hover { color: var(--text); }
.tf button.busy { animation: pulse 1s ease-in-out infinite; } /* fetching a short span's prices */
/* timeframes from an event (BSE, the last halving, your first sats), after the spans of time */
.tf.ev { padding-left: 6px; border-left: 1px solid var(--line); }
.tf.ev [data-tf="HALV"] { font-size: 11px; line-height: 1; }
/* Phones: the event timeframes and Go to a day share one menu, so the row fits */
.tf.ev { position: relative; }
.ev-pick { display: none; white-space: nowrap; }
.ev-pick .i { display: none; }
@media (max-width: 380px) { .ev-pick .w { display: none; } .ev-pick .i { display: inline; } .chart-head { gap: 3px; } }
.ev-menu:not([hidden]) ~ * { } /* (menu sits over the chart) */
.ev-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(11, 15, 22, 0.97);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.ev-menu[hidden] { display: none; }
.ev-menu button { padding: 7px 10px; text-align: left; white-space: nowrap; border-radius: 8px; }
.ev-head { margin: 4px 10px 2px; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); }
.ev-row { display: flex; gap: 2px; }
.ev-row button { padding: 7px 8px; }
/* Narrower screens: the less used spans (5D 3M YTD 3Y 10Y), the event spans and Go to a day
   share one MORE menu, so the row fits */
@media (max-width: 720px) {
  .tf > button.x, .tf.ev > button[data-tf], #dayBtn { display: none; }
  .ev-pick { display: inline-block; }
  .tf.ev { padding-left: 4px; }
}
.tf button[aria-pressed="true"] { background: rgba(247, 147, 26, 0.16); color: var(--orange); }
.hbtn {
  min-width: 26px; padding: 2px 6px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px;
  background: rgba(5, 7, 10, 0.6); font-size: 10px; font-weight: 700; color: var(--muted); line-height: 14px;
}
.hbtn:hover, .hbtn[aria-pressed="true"] { color: var(--orange); border-color: rgba(247, 147, 26, 0.5); }
.modes { display: flex; gap: 2px; margin-left: auto; }
.modes button {
  padding: 2px 6px; border: 0; border-radius: 999px; background: transparent;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--dim); font-family: var(--mono), system-ui;
}
.modes button:hover { color: var(--text); }
.modes button[aria-pressed="true"] { background: rgba(247, 147, 26, 0.16); color: var(--orange); }
.chart-foot { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 4px; }
.res-btn:disabled { opacity: 0.55; cursor: default; }
.res-btn.busy { animation: pulse 1s ease-in-out infinite; }
/* The ? panel: one column per group where there's room, stacked on a phone */
.modal.help { width: min(940px, calc(100vw - 32px)); }
.keys { columns: 3 250px; column-gap: 40px; margin: 4px 0 8px; }
.keys section { break-inside: avoid; padding: 12px 0 8px; }
.keys h3 { margin: 0 0 6px; }
.keys ul { list-style: none; padding: 0; margin: 0; }
.keys li { display: flex; gap: 12px; align-items: baseline; padding: 4px 0; font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.keys kbd, .keys-hint kbd {
  flex: 0 0 76px; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--orange); white-space: nowrap;
}
.keys-hint kbd { flex: none; }
@media (pointer: coarse) { .keys-hint { display: none; } }
@media (max-width: 420px) {
  .tf button, .modes button { padding: 2px 4px; }
}
@media (max-width: 460px) {
  .chart-head { gap: 4px; }
  .tf button { padding: 2px 5px; }
  .hbtn { min-width: 24px; padding: 2px 5px; }
}
.source {
  position: absolute; right: 12px; bottom: 30px; max-width: calc(100% - 70px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: var(--dim);
}
.source:hover { color: var(--orange); }
.scale-btn {
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; background: rgba(5, 7, 10, 0.6);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--muted);
}
.scale-btn:hover, .scale-btn[aria-pressed="true"] { color: var(--orange); border-color: rgba(247, 147, 26, 0.5); }

/* ---------- Bottom pill ---------- */
.pillbar {
  /* the home indicator only needs most of its safe area kept clear */
  position: relative; z-index: 30; flex-shrink: 0; padding: 12px 0 max(14px, calc(env(safe-area-inset-bottom) - 10px));
  transition: transform 850ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease;
}
.pillbar:not(.on) { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
.pill {
  display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.pill-btn {
  border: 0; border-radius: 999px; background: transparent; padding: 8px 14px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.pill-btn:hover { background: rgba(255, 255, 255, 0.08); }
.pill-btn:active { transform: scale(0.96); }
.pill-btn.active { background: var(--orange); color: var(--bg); }

/* ---------- Intro hero ---------- */
.hero {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
#heroText {
  font-weight: 800; line-height: 1; white-space: nowrap;
  font-size: min(11.5vw, 22dvh);
}
/* Each letter docks onto its own tile (centre on centre, at the tile's size and weight), so
   the board appears around the letters without moving them. No letter-spacing: it would
   shift each glyph off the centre of its box. */
#heroText span {
  display: inline-block; white-space: pre; line-height: normal; margin-right: -0.03em;
  transform-origin: 50% 50%; will-change: transform;
  text-shadow: 0 0 40px rgba(247, 147, 26, 0.18);
}
#heroText.docking span {
  font-weight: 700; text-shadow: 0 0 40px rgba(247, 147, 26, 0);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), font-weight 900ms ease, text-shadow 900ms ease;
}
#heroText.fading { transition: opacity 160ms ease; opacity: 0; }

/* Until the first tap/click, browsers keep the page silent. During the intro a quiet line
   under the hero says so; after it, the sound chip pulses until sound is really running. */
.sound-hint {
  position: absolute; left: 50%; top: calc(50% + min(11.5vw, 22dvh) * 0.75);
  transform: translateX(-50%); pointer-events: auto;
  padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: transparent;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); white-space: nowrap;
  animation: hint-in 600ms ease 500ms both;
}
.sound-hint:hover { color: var(--text); }
.hero:has(.docking) .sound-hint { opacity: 0; transition: opacity 300ms ease; }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 6px); } }
#soundBtn.locked { color: var(--orange); border-color: rgba(247, 147, 26, 0.6); animation: ring 2.2s ease-in-out infinite; }
@keyframes ring { 50% { box-shadow: 0 0 0 4px rgba(247, 147, 26, 0.18); } }

/* ---------- Toast ---------- */
.orange { color: var(--orange); }
.toast {
  position: fixed; left: 50%; top: 0; z-index: 60; transform: translateX(-50%);
  padding: 7px 14px; border-radius: 999px; background: var(--orange); color: var(--bg);
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap;
  max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.toast.in { animation: toast-in 380ms cubic-bezier(0.16, 1, 0.3, 1); } /* placed by toast() in app.js */
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }
/* How often the live price updates, beside it; tap to change */
.live-every {
  flex-shrink: 0; margin: -3px 0 -3px -6px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 999px;
  background: none; color: var(--dim); font: inherit; letter-spacing: 0.04em; text-transform: none; cursor: pointer;
}
.live-every:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
.live-every { position: relative; overflow: hidden; isolation: isolate; }
.live-every::before { /* the countdown to the next fetch (liveSweep in app.js) */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, 0.13); transform: scaleX(0); transform-origin: left;
}
.live-every.sweep::before { animation: sweep var(--every, 60s) linear forwards; }
@keyframes sweep { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .live-every.sweep::before { animation: none; } }

/* ---------- Dialogs ---------- */
dialog {
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px;
  background: var(--sheet); color: var(--text); padding: 20px;
  user-select: text; -webkit-user-select: text;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(2px); }
.modal { width: min(460px, calc(100vw - 32px)); max-height: calc(var(--app-h, 100dvh) - 24px); overflow-y: auto; }
.modal.center { text-align: center; }
.modal h2:focus { outline: none; } /* takes the opening focus, so no keyboard pops up on phones */
.modal h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: 0.04em; }
.modal h3 { margin: 18px 0 0; font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.modal p, .modal li { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.modal .small, .modal .small li { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.modal ul { padding-left: 18px; margin: 8px 0; }
.modal .dim { color: var(--dim); }
.modal .big { font-size: 28px; margin: 0; }
.btn {
  display: block; width: 100%; margin-top: 18px; padding: 11px; border: 0; border-radius: 999px;
  background: var(--orange); color: var(--bg); font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
}
.tip-box { margin-top: 14px; padding: 12px; border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 12px; text-align: left; }
.tip-box .label { font-size: 10px; letter-spacing: 0.16em; color: var(--muted); }
.tip-box code { display: block; margin: 6px 0 8px; font-size: 12px; word-break: break-all; color: var(--text); }
.tip-box .row { display: flex; gap: 6px; }
.tip-picks { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.tip-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 112px; padding: 12px 8px;
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; background: rgba(255, 255, 255, 0.03);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted);
}
.tip-pick .sym { font-size: 28px; line-height: 1; color: var(--orange); font-family: system-ui, sans-serif; }
.tip-pick:hover { background: rgba(255, 255, 255, 0.07); }
.tip-pick[aria-pressed="true"] { border-color: var(--orange); background: rgba(247, 147, 26, 0.12); color: var(--text); }
.modal .buy-list { list-style: none; padding: 0; margin: 14px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.buy-link {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px; background: rgba(255, 255, 255, 0.03); color: var(--text); text-decoration: none;
}
.buy-link:hover { border-color: var(--orange); background: rgba(247, 147, 26, 0.08); }
.buy-name { font-size: 14px; font-weight: 800; letter-spacing: 0.04em; color: var(--orange); }
.buy-tag { margin-left: 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); vertical-align: 2px; }
.buy-blurb { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid rgba(255, 255, 255, 0.18); margin-top: 8px; text-decoration: none; text-align: center; }
.share-preview { display: block; width: auto; max-width: 100%; max-height: 46dvh; margin: 14px auto 4px; border-radius: 10px; border: 1px solid var(--line); }
.form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.form input, .form textarea {
  padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05); font-size: 14px; outline: none; resize: vertical;
}
.form input:focus, .form textarea:focus { border-color: var(--orange); }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { margin-top: 4px; }
.btn:disabled { opacity: 0.4; cursor: default; }
.status:empty { display: none; }
.status { color: var(--orange) !important; letter-spacing: 0.06em; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.seg button, .presets button {
  flex: 1 1 auto; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted);
}
.seg button:hover, .presets button:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.seg button[aria-pressed="true"] { border-color: var(--orange); background: rgba(247, 147, 26, 0.14); color: var(--text); }
.seg.small { flex-wrap: nowrap; margin-top: 0; }
.seg.small button { padding: 8px 12px; }
.seg.tabs { flex-wrap: nowrap; margin: 12px 0 4px; }
.seg.tabs button { padding: 7px 8px; font-size: 10px; white-space: nowrap; }
.seg.tabs button[aria-selected="true"] { border-color: var(--orange); background: rgba(247, 147, 26, 0.14); color: var(--text); }
.modal .tab { min-height: 230px; }
/* Settings: label-and-control rows, kept short enough to fit a phone without scrolling */
.opt-line { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.opt-line .when-label { flex: 0 0 auto; min-width: 7.5em; }
.opt-line .seg.small { flex: 1; }
.opt-line .seg.small button { flex: 1; padding: 7px 4px; }
.opt-line .chip { padding: 7px 12px; }
.modal .block-line { margin: 2px 0 -4px 92px; font-size: 10px; line-height: 1.3; font-weight: 700; letter-spacing: 0.12em; }
.block-line a { text-decoration: none; }
#motionText { flex: 1; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.settings h3 { margin-top: 12px; }
.settings .seg { margin-top: 6px; }
.settings .seg button { padding: 7px 10px; }
.settings .presets button { padding: 5px 8px; }
.settings .amount-line { margin-top: 10px; }
.settings #pushNote { margin: 6px 0 0; }
.modal .when-label.sub { margin: 12px 0 0; font-size: 10px; line-height: normal; color: var(--muted); }
.settings-foot { margin: 8px 0 0; }
.settings-foot a { white-space: nowrap; }
.opt-line.gap { margin-top: 14px; }
.settings-foot:not(:has(:not([hidden]))) { display: none; }
.btn-row { display: flex; gap: 8px; margin-top: 12px; }
.settings .wide-only { display: none; }
/* Tablets and up: two columns, so Settings fits a landscape iPad without scrolling */
@media (min-width: 700px) {
  .modal.settings { width: min(780px, calc(100vw - 32px)); }
  .set-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .settings .wide-only { display: block; }
  .settings .opt-line.gap { margin-top: 8px; }
}
.btn-row .btn { margin-top: 0; }
.check { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, 0.8); }
.check input { width: 18px; height: 18px; accent-color: var(--orange); }
.day-input {
  display: block; width: 100%; margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05);
  color-scheme: dark; font-size: 16px; text-align: center; outline: none;
}
.day-input:focus { border-color: var(--orange); }
.day-row { display: flex; gap: 8px; }
.day-row .day-input { flex: 1 1 55%; min-width: 0; padding-left: 8px; padding-right: 8px; }
.day-row #dayTime { flex: 1 1 45%; }
.hbtn.day { display: inline-flex; align-items: center; justify-content: center; }
.hbtn.day svg { display: block; }
.push-line { align-items: center; }
.push-line select {
  padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.15);
  background: #0b0f16; color: var(--text); font: inherit; font-size: 13px;
}
.push-line .btn { width: auto; flex: 1; margin-top: 0; padding: 9px 12px; }
.push-line label { white-space: nowrap; }
/* What your notifications will look like, with these choices (renderPushPreview in app.js) */
.np-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.np-list[hidden] { display: none; }
.np { display: flex; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.07); text-transform: none; letter-spacing: normal; }
.np img { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
.np > div { min-width: 0; flex: 1; font-family: system-ui, -apple-system, sans-serif; }
.np-top { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 1px; font-size: 11px; color: var(--muted); }
.np-title { margin: 0; font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--text); }
.np-body { margin: 1px 0 0; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, 0.82); }
.np-send { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--orange); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; }
#pushSince { flex: 1; min-width: 0; width: auto; }
.amount.off { opacity: 0.35; pointer-events: none; }
.amount-line { display: flex; gap: 8px; margin-top: 8px; }
.amount-line input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05); font-size: 15px; outline: none;
}
.amount-line input:focus { border-color: var(--orange); }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.presets button { flex: 0 1 auto; padding: 5px 10px; font-size: 10px; }
.presets button[aria-pressed="true"] { border-color: var(--orange); color: var(--text); background: rgba(247, 147, 26, 0.14); }
/* Phones: the presets share one row that scrolls sideways (fading at the edge), so Settings
   still fits the screen */
@media (max-width: 460px) {
  .settings .presets {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .settings .presets::-webkit-scrollbar { display: none; }
  .settings .presets button { flex: 0 0 auto; }
}
/* a dot on a button: your own stack (Settings), a day being shown (Items), something new (About) */
#moreBtn.dot::after, #itemsBtn.dot::after, #aboutBtn.dot::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--orange); vertical-align: 2px; }
.item-btn.suggest { margin-top: 8px; border: 1px dashed rgba(255, 255, 255, 0.18); }
.tip-box .qr { width: 168px; margin: 10px auto 2px; padding: 6px; border-radius: 10px; background: #fff; }
.tip-box .qr svg { display: block; width: 100%; height: auto; }
.pill-btn.speed { min-width: 46px; color: var(--orange); }

/* Home Screen app: the header sits right on the line iOS reports as the bottom of the status bar
   (the safe area), the same edge on every iPhone, with only its own content's height below it */
@media (orientation: portrait) {
  .app-mode .topbar { height: auto; padding-top: calc(env(safe-area-inset-top) + 2px); padding-bottom: 8px; }
}
/* Fixed height, so the search box stays put while results filter. With the on-screen
   keyboard up, app.js pins it to the visible area (see fitSheet). */
.sheet {
  width: min(920px, calc(100vw - 24px)); max-width: none;
  margin: auto auto 84px; padding: 8px;
  height: min(70dvh, 640px);
}
.sheet.kb {
  --gap-top: max(8px, env(safe-area-inset-top)); /* clear the status bar in the Home Screen app */
  margin: 0 auto; inset: auto 0 auto 0;
  top: calc(var(--vv-top, 0px) + var(--gap-top));
  height: calc(var(--vv-h, 70dvh) - var(--gap-top) - 8px);
}
.sheet[open] { display: flex; flex-direction: column; }
.sheet-head { display: flex; gap: 8px; padding: 4px 4px 8px; }
.sheet-head input {
  flex: 1; min-width: 0; padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05);
  font-size: 13px; outline: none;
}
.sheet-head input:focus { border-color: var(--orange); }
.sheet-list { overflow-y: auto; min-height: 0; }
.sheet-when { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; padding: 0 4px 8px; border-bottom: 1px solid var(--line); }
.when-line { display: flex; align-items: center; gap: 10px; }
.when-date { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--orange); white-space: nowrap; }
.when-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: var(--muted); }
.sheet-when .seg.small button { padding: 6px 10px; font-size: 10px; }
#shareDayBtn { padding: 4px 12px; font-size: 15px; }
.sheet-when .seg.small button { white-space: nowrap; }
@media (max-width: 460px) { .sheet-when .long { display: none; } } /* "GAINS": the row fits a phone on one line */
#shareDayBtn .share-label { font-size: 10px; }
@media (max-width: 460px) {
  #shareDayBtn .share-label { display: none; }
  .sheet-when .when-line > .when-label:first-child:not(:only-child) { letter-spacing: 0.1em; }
}
.sheet-cat { margin: 10px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--muted); }
.item-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left;
}
.item-btn:hover { background: rgba(255, 255, 255, 0.05); }
.item-btn.active { background: rgba(255, 255, 255, 0.08); border-color: var(--orange); }
.sheet:has(#itemsSearch:focus) .item-btn.hl { background: rgba(247, 147, 26, 0.12); }
.sheet:has(#itemsSearch:focus) .item-btn.hl .x::before { content: "↵ "; }
.item-btn .v { font-size: 13px; font-weight: 700; }
.item-btn .n { display: block; font-size: 11px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.item-btn .x { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--orange); }
.item-btn .r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.item-btn .g { font-size: 12px; font-weight: 800; color: var(--text); white-space: nowrap; }
.item-btn .g small { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); }
.item-btn.nodata .v { color: var(--muted); }

/* iOS zooms the page into any text field under 16px; touch screens get 16px fields */
@media (pointer: coarse) {
  input, textarea, select, .sheet-head input, .form input, .form textarea, .amount-line input, .push-line select { font-size: 16px; }
}

@media (max-width: 520px) {
  .pill.cycling .pill-btn:not(#cycleBtn) .pill-label { display: none; }
}
@media (max-width: 460px) {
  .pill-btn:not(#cycleBtn) .pill-label { display: none; }
  .pill-btn { padding: 8px 13px; font-size: 14px; }
  #cycleBtn { font-size: 12px; }
}
.topbar.tight .chip-label { display: none; } /* app.js: when the header's buttons don't fit */
.chip-icon { display: none; }
.topbar.tighter .chip-label, .topbar.tighter .chip-word { display: none; } /* room for the on-this-day pill */
.topbar.tighter .chip-icon { display: inline; }
@media (max-width: 420px) {
  .chip-label { display: none; }
  .pill-btn { padding: 8px 11px; }
}
@media (max-width: 360px) {
  .pill-label { display: none; }
}
@media (min-width: 700px) {
  .meta { font-size: 11px; }
  .tf button, .modes button, .hbtn, .scale-btn { font-size: 11px; }
  .source { font-size: 10px; }
  .chip { font-size: 12px; }
  .pill-btn { font-size: 13px; }
  .item-btn .v { font-size: 14px; }
  .sound-hint { font-size: 11px; }
}
@media (min-width: 1000px) {
  .flap-row.row2 { margin-top: 6px; }
}
@media (max-width: 460px) {
  .live-word { display: none; }
}
/* Short landscape screens (phones on their side): slim header with the controls in it,
   tiles sized from the height, chart gets everything that's left */
@media (orientation: landscape) and (max-height: 560px) {
  .topbar { height: calc(44px + env(safe-area-inset-top)); }
  .chip-label { display: none; }
  .stage { padding-top: 8px; z-index: 31; } /* lets the pill sit in the header */
  .tile { --h: min(9.6dvh, calc(4.6cqw + 10px)); height: var(--h); --fs: calc(var(--h) * 0.58); }
  .row2 .tile { --h: min(6.4dvh, calc(3.1cqw + 8px)); height: var(--h); --fs: calc(var(--h) * 0.58); }
  .flap-row.row2 { margin-top: 4px; }
  .meta { margin-top: 5px; }
  .chart { margin-top: 6px; margin-bottom: max(8px, env(safe-area-inset-bottom)); min-height: 90px; }
  .pillbar {
    position: fixed; top: env(safe-area-inset-top); left: 50%; transform: translateX(-50%);
    height: 44px; padding: 0; display: flex; align-items: center;
  }
  .pillbar:not(.on) { transform: translate(-50%, -16px); }
  .pill { padding: 2px; box-shadow: none; background: transparent; border-color: rgba(255, 255, 255, 0.12); }
  .pill-btn { padding: 5px 10px; font-size: 11px; }
  .orange { color: var(--orange); }
  .sheet { margin-bottom: auto; max-height: 86dvh; }
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 900px) {
  .pill-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #heroText.docking span, .board, .chart, .pillbar { transition-duration: 1ms; }
  .live-dot { animation: none; }
}

/* Reading text in the panels (About, Get bitcoin, the tip jar): a plain sans at a size made for
   reading, with the monospace kept for headings, tabs and labels. Each About tab opens with a
   line or two (.lead) and keeps the rest in sections that open on a tap (.more). */
/* a panel with tabs (About, or any other) is for reading: wider, see "fixed size" below */
.modal:has(> .seg.tabs) { width: min(600px, calc(100vw - 32px)); }
.modal .prose, .modal .prose p, .modal .prose li, .modal p.prose {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px; line-height: 1.55; letter-spacing: normal; text-transform: none; color: rgba(255, 255, 255, 0.86);
}
.modal .prose .lead { font-size: 17px; line-height: 1.45; color: var(--text); margin: 14px 0 10px; }
.modal .prose .fine, .modal p.prose.fine { font-size: 13px; color: var(--muted); }
.modal .prose a, .modal p.prose a { color: var(--orange); }
.modal .prose h3 { margin: 20px 0 6px; }
.modal .prose ul { padding-left: 20px; margin: 6px 0 8px; }
.modal .prose li { margin: 4px 0; }
@media (max-width: 460px) {
  .modal .prose, .modal .prose p, .modal .prose li, .modal p.prose { font-size: 14px; }
  .modal .prose .lead { font-size: 16px; }
}
.modal details.more { border-top: 1px solid var(--line); }
.modal details.more:last-of-type { border-bottom: 1px solid var(--line); }
.modal details.more + details.more { border-top: 1px solid var(--line); }
.modal details.more > summary {
  display: flex; align-items: center; gap: 10px; padding: 14px 4px; cursor: pointer; list-style: none;
  font-family: var(--mono), monospace; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
}
.modal details.more > summary::-webkit-details-marker { display: none; }
.modal details.more > summary::after { content: "+"; margin-left: auto; font-size: 20px; line-height: 1; color: var(--muted); }
.modal details.more[open] > summary::after { content: "−"; }
.modal details.more > summary:hover { color: var(--text); }
.modal details.more > :not(summary) { margin-top: 0; padding-bottom: 10px; }
/* Data › Sources */
.src .count { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 12px; color: var(--muted); }
.modal .prose .src-items { margin: 0; line-height: 1.9; }
.src-items .by { color: var(--muted); font-size: 13px; }
.modal .prose .src-one { margin: 0; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
/* New: the changelog (renderChangelog in app.js) */
.log-head { display: flex; align-items: center; gap: 10px; }
.log-head p { flex: 1; }
.log-new { padding: 2px 8px; border-radius: 999px; background: var(--orange); color: var(--bg); font-size: 11px; letter-spacing: 0.1em; }
.log-sum { margin-left: auto; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--muted); text-transform: none; }
.log-rel > summary::after { margin-left: 10px !important; }
.modal .prose .log-rel ul { list-style: none; padding: 0; margin: 0; }
.modal .prose .log-rel li { display: flex; gap: 10px; align-items: baseline; margin: 6px 0; }
.log-kind { flex: 0 0 84px; font-family: var(--mono), monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.log-kind.new { color: var(--orange); }
.log-kind.fixed { color: #6fd39b; }
.modal .prose h3 { font-family: var(--mono), monospace; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 460px) { .modal details.more > summary { font-size: 13px; } .log-sum { display: none; } }
/* Every panel: at most the visible height (the app's own measure, --app-h), scrolling inside only
   past that; it keeps its place as it grows (placeDialog in app.js). A panel with tabs keeps one
   size while it's open, its tab scrolling inside, so switching tabs or opening a section never
   resizes it. These follow from what a panel contains, not which panel it is. */
.modal:has(> .seg.tabs)[open] { display: flex; flex-direction: column; height: min(780px, calc(var(--app-h, 100dvh) - 24px)); overflow: hidden; }
.modal:has(> .seg.tabs) > .tab { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.modal:has(> .seg.tabs) > :not(.tab) { flex-shrink: 0; }
.modal .seg.tabs button { font-size: 12px; padding: 9px 10px; }
@media (max-width: 460px) { .modal .seg.tabs button { font-size: 10.5px; padding: 8px 7px; } }
/* where the arrow keys are */
.modal :focus-visible, .sheet :focus-visible { outline: none; }
.kbd .modal :focus-visible, .kbd .sheet :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.modal li[tabindex]:focus { outline: none; }
.kbd .modal li[tabindex]:focus { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; background: rgba(247, 147, 26, 0.06); }
/* Feedback: the view that a bug report or comment can carry: the choice, with the picture beside it */
.fb-shot { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 2px; }
.fb-shot label.check { flex: 1; display: flex; flex-direction: row; align-items: flex-start; gap: 10px; text-align: left; margin: 0; }
.fb-shot label.check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; }
.fb-shot img { flex: 0 0 auto; display: block; width: 76px; border: 1px solid var(--line); border-radius: 6px; }
.fb-shot:has(#fbShot:not(:checked)) img { opacity: 0.3; }
.acc-space { transition: height 0.28s ease; } /* room held above a section that just opened (app.js) */
@media (prefers-reduced-motion: reduce) { .acc-space { transition: none; } }