/* Drift — a radio dial at night. Warm near-black, printed amber, nothing that glows. */

:root {
  --bg: #0d0a08;
  --card: #16110d;
  --raise: #1f1813;
  --line: #2b221b;
  --ink: #c9b49b;          /* parchment, kept low: 9.4:1 on --bg, never white */
  --ink-2: #93806b;        /* 5.1:1 */
  --muted: #6f604f;        /* 3.2:1, only for large or non-essential marks */
  --amber: #c98f47;
  --amber-ink: #1a1009;
  --amber-soft: rgba(201, 143, 71, .14);
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --dial: 'Dial', ui-rounded, -apple-system, system-ui, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --card-w: min(92vw, 420px);
  color-scheme: dark;
}

/* dial printing: Bricolage pulled narrow, like the numbers on a tuning scale */
@font-face { font-family: 'Dial'; src: url('../fonts/bricolage.woff2') format('woff2'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.42 var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
  height: 100dvh;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i.fill { fill: currentColor; stroke: none; }
.num { font-variant-numeric: tabular-nums; }
::selection { background: var(--amber-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 12px; }

/* the room light: a faint amber when you lean toward Save, darker still toward Not tonight */
.tint { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.tint::before, .tint::after { content: ''; position: absolute; inset: 0; transition: opacity .6s var(--ease); }
.tint::before { opacity: var(--keep, 0); background: linear-gradient(270deg, rgba(201, 143, 71, .2), rgba(201, 143, 71, .05) 60%, transparent); }
.tint::after { opacity: var(--later, 0); background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2) 60%, transparent); }
body.live .tint::before, body.live .tint::after { transition: none; }

/* ---------- header ---------- */

.head {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-t) + 14px) 22px 6px;
}
.mark { font: 600 21px/1 var(--dial); font-stretch: 75%; letter-spacing: .04em; color: var(--ink-2); }
.count {
  display: flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px 0 11px; border-radius: 99px;
  background: var(--raise); color: var(--ink);
  font: 600 15px/1 var(--round);
}
.count svg { width: 18px; height: 18px; color: var(--amber); }
.count.bump { animation: bump .5s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.12); } }

/* ---------- cards ---------- */

.stage { position: relative; z-index: 1; display: grid; place-items: center; min-height: 0; padding: 4px 0; }
.card {
  grid-area: 1 / 1;
  width: var(--card-w);
  border-radius: 28px; padding: 10px 10px 18px;
  background: var(--card);
  box-shadow: 0 1px 0 rgba(255, 236, 210, .04) inset, 0 18px 40px rgba(0, 0, 0, .45);
  touch-action: none; user-select: none; -webkit-user-select: none;
  transform-origin: 50% 90%;
  will-change: transform;
}
.card.back {
  --p: 0;
  transform: translateY(calc(14px - 14px * var(--p))) scale(calc(.94 + .06 * var(--p)));
  opacity: calc(.45 + .55 * var(--p));
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.card.back .meta { opacity: calc(var(--p)); }
.card.top { transition: transform .6s var(--ease), opacity .6s var(--ease), scale .35s var(--ease-out); }
.card.held, .card.phys, .card.gone { transition: scale .35s var(--ease-out); }
.card.held { scale: 1.02; }
.card.enter { animation: rise .8s var(--ease-out) both; }
@keyframes rise { from { transform: translateY(26px) scale(.95); opacity: 0; } }

.thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 19px; overflow: hidden; background: var(--raise); }
/* night print: a thumbnail is someone else's daylight, so it comes in dimmed and warmed */
.thumb img, .thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: brightness(.62) saturate(.72) sepia(.18); }
.thumb img { object-fit: cover; pointer-events: none; }
.thumb img { transition: opacity .6s var(--ease); }
.thumb iframe { opacity: 0; transition: opacity .6s var(--ease); }
.thumb.on iframe { opacity: 1; }
.thumb.on img, .thumb.on .play { opacity: 0; pointer-events: none; }
.thumb.loading .play { animation: breathe .9s ease-in-out infinite alternate; }
.play:disabled { opacity: .3; cursor: default; }
.play {
  position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(13, 10, 8, .62); color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity .3s;
}
.play svg { width: 18px; height: 18px; margin-left: 2px; }

.stamp {
  position: absolute; top: 18px; padding: 7px 13px 6px; border-radius: 10px;
  font: 700 24px/1 var(--dial); font-stretch: 75%; letter-spacing: .03em;
  border: 2.5px solid currentColor; background: rgba(13, 10, 8, .7);
  opacity: var(--s, 0); pointer-events: none;
}
.stamp.keep { left: 16px; color: var(--amber); transform: rotate(-9deg) scale(calc(.75 + .25 * var(--s, 0))); }
.stamp.later { right: 16px; color: var(--ink-2); transform: rotate(9deg) scale(calc(.75 + .25 * var(--s, 0))); }

.meta { padding: 16px 8px 0; }
.title {
  font: 600 19px/1.28 var(--text); letter-spacing: -.012em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-wrap: pretty;
}
.chan { margin-top: 6px; font-size: 15px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; min-width: 0; }
.tag { flex: none; font: 600 12px/1 var(--round); color: var(--amber); padding: 4px 8px; border-radius: 99px; background: var(--amber-soft); }

/* the dial: printed scale, amber needle, readout on the left */
.dial { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.read { flex: none; min-width: 66px; font: 600 20px/1 var(--dial); font-stretch: 75%; color: var(--amber); }
.band { position: relative; flex: 1; height: 30px; border-bottom: 1px solid var(--line); }
.band u { position: absolute; bottom: 0; width: 1px; height: 5px; background: var(--line); }
.band i { position: absolute; bottom: 0; width: 1px; height: 10px; background: var(--amber); opacity: .8; }
.band i b { position: absolute; bottom: 14px; left: 0; transform: translateX(-50%); font: 600 12px/1 var(--dial); font-stretch: 75%; color: var(--amber); font-style: normal; }
.band em { position: absolute; bottom: -1px; width: 2px; height: 13px; margin-left: -1px; border-radius: 1px; background: var(--ink); }

.card.wait .thumb { animation: breathe 1.8s ease-in-out infinite alternate; }
.card.wait .meta i { display: block; height: 15px; border-radius: 8px; background: var(--raise); margin-top: 12px; }
.card.wait .meta i:first-child { width: 78%; height: 20px; margin-top: 0; }
.card.wait .meta i:last-child { width: 42%; }
@keyframes breathe { to { opacity: .5; } }

.msg { text-align: center; padding: 0 32px; color: var(--ink-2); display: grid; gap: 6px; justify-items: center; }
.msg strong { font: 600 23px/1.2 var(--dial); font-stretch: 75%; color: var(--ink); }
.link { height: 44px; padding: 0 20px; border-radius: 99px; background: var(--raise); color: var(--ink); font-weight: 600; font-size: 15px; }
.msg .link { margin-top: 12px; }

/* ---------- controls ---------- */

.controls {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 22px;
  padding: 8px 20px calc(var(--safe-b) + 20px);
}
.btn { position: relative; display: grid; place-items: center; border-radius: 50%; overflow: hidden; transition: transform .45s var(--ease), opacity .3s; }
.btn:active:not(:disabled) { transform: scale(.9); }
.btn:disabled { opacity: .3; cursor: default; }
.btn.sm { width: 48px; height: 48px; color: var(--ink-2); }
.btn.sm svg { width: 20px; height: 20px; }
.btn.lg { width: 72px; height: 72px; background: var(--raise); color: var(--ink); }
.btn.lg svg { width: 28px; height: 28px; position: relative; }
.btn.keep { background: var(--amber); color: var(--amber-ink); box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 26px rgba(0, 0, 0, .35); }
.btn.spacer { visibility: hidden; }
#keepBtn { scale: calc(1 + .14 * var(--keep, 0)); }
#laterBtn { scale: calc(1 + .14 * var(--later, 0)); }
body:not(.live) #keepBtn, body:not(.live) #laterBtn { transition: transform .45s var(--ease), scale .45s var(--ease); }
/* hold ✕: the button fills from the middle, then the channel is gone */
#laterBtn::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #3a2d23; transform: scale(0); transition: transform .2s; }
#laterBtn.charging::before { transform: scale(1); transition: transform .6s linear; }

/* ---------- saved sheet ---------- */

.scrim { position: fixed; inset: 0; z-index: 6; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .4s var(--ease); }
body.sheeted .scrim { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 7;
  max-height: 84dvh; display: flex; flex-direction: column;
  padding: 10px 0 calc(var(--safe-b) + 10px);
  border-radius: 28px 28px 0 0; background: var(--card);
  box-shadow: 0 -1px 0 rgba(255, 236, 210, .05), 0 -20px 50px rgba(0, 0, 0, .5);
  transform: translateY(100%); transition: transform .5s var(--ease);
}
body.sheeted .sheet { transform: none; }
.sheet[hidden] { display: none; }
@media (min-width: 640px) { .sheet { left: 50%; right: auto; width: 520px; margin-left: -260px; } }
.grab { width: 36px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.sheethead { display: flex; align-items: center; gap: 12px; padding: 0 20px 10px; }
.sheethead h2 { font: 600 24px/1 var(--dial); font-stretch: 75%; color: var(--ink); }
.sheethead h2 span { color: var(--muted); font-weight: 500; margin-left: 4px; }
.sheethead .link { height: 34px; padding: 0 14px; font-size: 14px; }
.deckage { margin-left: auto; font-size: 13px; color: var(--ink-2); }
.rows { list-style: none; padding: 0 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.row { display: flex; align-items: center; gap: 4px; }
.row + .row { border-top: 1px solid var(--line); }
.open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px; text-align: left; border-radius: 14px; }
.open:active { background: var(--raise); }
.open img { flex: none; width: 104px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--raise); filter: brightness(.62) saturate(.72) sepia(.18); }
.txt { min-width: 0; display: grid; gap: 4px; }
.txt .t { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.txt .c { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txt .c svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; color: var(--amber); }
.row.seen .t { color: var(--ink-2); }
.rm { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.rm svg { width: 16px; height: 16px; }
.rm:active { background: var(--raise); }
.none { padding: 28px 20px 36px; text-align: center; color: var(--ink-2); }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + 116px); z-index: 9;
  max-width: calc(100vw - 48px); padding: 11px 18px; border-radius: 99px;
  background: var(--raise); color: var(--ink); font-size: 14.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .4);
  transform: translate(-50%, 14px); opacity: 0; pointer-events: none;
  transition: transform .5s var(--ease), opacity .35s;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }

/* short phones: the card gives up a little title, never the controls */
@media (max-height: 700px) {
  .title { -webkit-line-clamp: 2; font-size: 17.5px; }
  .btn.lg { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .card.enter, .card.wait .thumb, .thumb.loading .play { animation: none; }
  .card.top, .card.back, .sheet, .tint::before, .tint::after { transition: none; }
}