/* Phone-sized swipe UI. Sized for a Samsung Galaxy S25 Ultra viewport:
   480 x 1040 CSS pixels (1440 x 3120 hardware pixels at a 3x device ratio).
   On a real phone the frame drops away and the app fills the screen. */

:root {
  --phone-w: 480px;
  --phone-h: 1040px;
  --bg: #0b0e13;
  --panel: #151a22;
  --card: #1c222c;
  --card-2: #232b37;
  --line: #2c3444;
  --text: #eef2f8;
  --muted: #98a3b6;
  --green: #22c55e;
  --red: #f43f5e;
  --blue: #3b82f6;
  --in-right: 0;
  --in-left: 0;
  --in-down: 0;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  color: var(--text);
  background: #05070a;
}

/* The frame is pinned to the viewport instead of being sized in dvh. Sized in dvh,
   the installed Android app lost its tab bar below the window after a
   pull-to-refresh, until it was closed and reopened. A fixed box follows the
   window the browser actually has. */
.frame {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background:
    radial-gradient(900px 600px at 15% 0%, #15203a 0%, transparent 60%),
    radial-gradient(700px 500px at 100% 100%, #1d1430 0%, transparent 55%),
    #05070a;
}

.phone {
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 42px;
  border: 1px solid #262e3d;
  background: var(--bg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 0 10px #0a0d12;
}

@media (max-width: 540px), (max-height: 720px) {
  .frame { padding: 0; }
  .phone {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* --- swipe direction feedback ------------------------------------------- */

.glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.glow-layer {
  position: absolute;
  inset: 0;
  transition: opacity .12s linear;
}

.glow-right {
  opacity: var(--in-right);
  background: linear-gradient(270deg, rgba(34, 197, 94, .92) 0%,
              rgba(34, 197, 94, .35) 32%, transparent 68%);
}

.glow-left {
  opacity: var(--in-left);
  background: linear-gradient(90deg, rgba(244, 63, 94, .92) 0%,
              rgba(244, 63, 94, .35) 32%, transparent 68%);
}

.glow-down {
  opacity: var(--in-down);
  background: linear-gradient(0deg, rgba(59, 130, 246, .95) 0%,
              rgba(59, 130, 246, .38) 34%, transparent 70%);
}

/* --- chrome ------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.progress {
  position: relative;
  z-index: 2;
  height: 4px;
  margin: 0 40px 10px;
  border-radius: 4px;
  background: #212938;
  overflow: hidden;
}

.progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width .25s ease;
}

.main {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  padding-top: env(safe-area-inset-top, 0px);
}
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view[hidden] { display: none; }

/* The deck is centred rather than stretched: a sparse event should not leave a
   void in the middle of a 1040 pixel tall card. */
#view-swipe { justify-content: center; }

/* --- card stack --------------------------------------------------------- */

.stack {
  position: relative;
  z-index: 2;  /* a card dragged downwards passes over the buttons, not under */
  flex: 1;
  min-height: 0;
  /* A card taller than its content is mostly empty, so cap it. The group of card
     and buttons is centred in the screen and floats with room around it. */
  max-height: 600px;
  margin: 12px 16px 0;
}

.card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--card-2), var(--card) 55%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  overflow: hidden;
  user-select: none;
  touch-action: none;
  /* The card's own height, not the screen's, decides what it can afford to
     show. See the container queries at the end. */
  container: card / size;
}

/* Nothing on a card may be squeezed. The queries at the end drop the least
   important parts before anything gets clipped. */
.card > * { flex-shrink: 0; }

/* A faint glow along the three edges a card can be thrown toward, in the colour
   of each decision: green on the right, red on the left and blue at the bottom.
   It follows the rounded corners, shows before any dragging starts, and grows
   with the drag, using the same variables as the glow behind the phone. */
.card.is-top::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 23px;
  pointer-events: none;
  box-shadow:
    inset -2px 0 6px -1px rgb(34 197 94 / calc(.5 + .5 * var(--in-right))),
    inset -6px 0 14px -6px rgb(34 197 94 / calc(.22 + .4 * var(--in-right))),
    inset 2px 0 6px -1px rgb(244 63 94 / calc(.5 + .5 * var(--in-left))),
    inset 6px 0 14px -6px rgb(244 63 94 / calc(.22 + .4 * var(--in-left))),
    inset 0 -2px 6px -1px rgb(59 130 246 / calc(.55 + .45 * var(--in-down))),
    inset 0 -6px 14px -6px rgb(59 130 246 / calc(.25 + .4 * var(--in-down)));
}

.card.is-top { cursor: grab; }
.card.is-top:active { cursor: grabbing; }
.card.is-sliding { transition: transform .26s cubic-bezier(.4, 0, .6, 1), opacity .26s ease; }
.card.is-springing { transition: transform .22s cubic-bezier(.2, .9, .3, 1.2); }

@keyframes card-return {
  from { transform: translate(0, -46px) scale(.94); opacity: .2; }
  to { transform: none; opacity: 1; }
}

.card.is-returning { animation: card-return .3s ease-out; }

.card-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.chip {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid var(--line);
  background: #2a3241;
  color: #cbd5e5;
  white-space: nowrap;
}

.chip-cat { background: #2b3a55; border-color: #3a4c6c; color: #bcd3ff; text-transform: uppercase; }
.chip-status { background: #3a2222; border-color: #6a3030; color: #ffb4b4; }

.card-when { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.when-day { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.when-time { font-size: clamp(26px, 4.6cqh, 38px); font-weight: 800; line-height: 1; letter-spacing: -.5px; }
.when-date { font-size: 12px; color: var(--muted); }

/* Spare height is shared between the gap above the title and the gap above the
   meta boxes, so a short card reads as top, middle and bottom groups instead of
   one empty band. A crowded card has no spare height and the gaps collapse. */
.card-title {
  margin: auto 0 0;
  font-size: clamp(22px, 4.6cqh, 30px);
  line-height: 1.16;
  font-weight: 750;
  letter-spacing: -.3px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-where {
  display: flex;
  gap: 7px;
  font-size: clamp(13.5px, 2.3cqh, 16px);
  color: #c3ccdb;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pin { flex: none; opacity: .8; }

.card-meta { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: auto; }

.meta-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #171d26;
  border: 1px solid #262f3d;
  min-width: 0;
}

.meta-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.meta-value { font-size: clamp(13.5px, 2.3cqh, 16px); font-weight: 600; overflow-wrap: anywhere; }
.meta-value.is-free { color: var(--green); }

.card-notes { display: flex; flex-wrap: wrap; gap: 6px; }
.card-notes:empty { display: none; }

.card-notes span {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  background: #2a2a1c;
  border: 1px solid #45452c;
  color: #e4e0a8;
}

.card-links { display: flex; gap: 8px; }

.link-btn {
  flex: 1;
  padding: 9px 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #1a212b;
  color: #cfe0ff;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.link-btn:hover { border-color: #46546d; }
.link-btn[hidden] { display: none; }

.card-id { display: flex; min-width: 0; }

/* The text and the icon are one button, so a tap on either copies. The padding
   widens the target without making the row taller. */
.copy-id {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin: -9px -8px;
  padding: 9px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #7f8aa0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, .08);
}

.copy-id-text { font-family: ui-monospace, monospace; font-size: 11px; overflow-wrap: anywhere; }

.copy-id svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.copy-id .done-icon { display: none; }
.copy-id:hover { color: #b9c3d3; }
.copy-id:focus-visible { outline: 2px solid #6d8fd6; outline-offset: 1px; }
.copy-id.is-copied { color: var(--green); }
.copy-id.is-copied .copy-icon { display: none; }
.copy-id.is-copied .done-icon { display: block; }

/* All three stamps sit in the same band near the top of the card. Only one
   direction is ever active, and a card dragged downwards keeps its top edge on
   screen, so the stamp cannot slide out of view. */
.stamp {
  position: absolute;
  top: 56px;
  z-index: 3;
  padding: 5px 13px;
  border-radius: 12px;
  border: 4px solid currentColor;
  background: rgba(10, 13, 18, .78);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}

.card.is-top .stamp-interested { color: var(--green); left: 16px; transform: rotate(-13deg); opacity: var(--in-right); }
.card.is-top .stamp-rejected { color: var(--red); right: 16px; transform: rotate(13deg); opacity: var(--in-left); }
.card.is-top .stamp-maybe { color: var(--blue); left: 50%; transform: translateX(-50%); opacity: var(--in-down); }

/* --- deck finished ------------------------------------------------------ */

.done {
  flex: 1;
  min-height: 0;
  max-height: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 24px;
  border-radius: 26px;
  border: 1px dashed var(--line);
  text-align: center;
}

.done[hidden] { display: none; }
.done h2 { margin: 0; font-size: 22px; }
.done p { margin: 0; color: var(--muted); font-size: 14px; }
.done-mark { font-size: 40px; }

.wide-btn {
  margin-top: 8px;
  padding: 12px 22px;
  border-radius: 14px;
  border: 1px solid #3a4a68;
  background: #1d2a41;
  color: #cfe0ff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

/* --- action buttons ----------------------------------------------------- */

.actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 16px 2px;
}

.act {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .12s ease, box-shadow .12s ease;
}

.act:hover:not(:disabled) { transform: translateY(-2px); }
.act:disabled { cursor: default; }
.act-undo:disabled { opacity: .35; }
/* With nothing left to decide the buttons go quiet, but their counts stay
   readable, so they fade by colour and not by opacity. */
.act:disabled:not(.act-undo) { border-color: var(--line); color: #4c5666; }
.act:disabled:not(.act-undo) .act-count { color: #98a3b5; border-color: #3a4456; }
.act-undo { width: 40px; height: 40px; font-size: 17px; color: var(--muted); }
.act-reject { border-color: rgba(244, 63, 94, .55); color: var(--red); }
.act-maybe { border-color: rgba(59, 130, 246, .55); color: var(--blue); }
.act-interested { border-color: rgba(34, 197, 94, .55); color: var(--green); }
.act-reject:hover { box-shadow: 0 0 0 4px rgba(244, 63, 94, .16); }
.act-maybe:hover { box-shadow: 0 0 0 4px rgba(59, 130, 246, .16); }
.act-interested:hover { box-shadow: 0 0 0 4px rgba(34, 197, 94, .16); }

.act-count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background: var(--bg);
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.act-count.is-zero { opacity: .55; }

/* The one line of text under the buttons: how many are left to decide. */
.hint { margin: 0; padding: 12px 16px 8px; text-align: center; font-size: 13px; font-weight: 600; color: #9aa5b8; }

/* --- review ------------------------------------------------------------- */

.segments {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 12px 16px 8px;
}

.seg {
  min-width: 0;
  padding: 9px 2px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seg b { display: block; font-size: 15px; color: var(--text); }
.seg.is-on { color: var(--text); background: #232d3d; border-color: #46546d; }
.seg[data-seg="interested"].is-on { border-color: var(--green); }
.seg[data-seg="maybe"].is-on { border-color: var(--blue); }
.seg[data-seg="rejected"].is-on { border-color: var(--red); }
.seg[data-seg="undecided"].is-on { border-color: #8b95a7; }

.list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
}

.list-head {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 6px 0 0;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
}

.list-empty { padding: 40px 10px; text-align: center; color: var(--muted); font-size: 14px; }

.row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  position: relative;
  cursor: pointer;
}

.row:hover { border-color: #3d4759; }

.row-date { text-align: center; font-size: 11px; color: var(--muted); line-height: 1.45; }
.row-date b { display: block; font-size: 13px; color: var(--text); }
.row-body { min-width: 0; }
.row-body h3 { margin: 0 0 3px; padding-right: 16px; font-size: 15px; line-height: 1.25; }

.row-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.row-title:focus-visible { outline: 2px solid #6d8fd6; outline-offset: 3px; border-radius: 4px; }

.row-more {
  position: absolute;
  top: 10px;
  right: 12px;
  color: #5f6a7d;
  font-size: 20px;
  line-height: 1;
}
.row-where, .row-meta { margin: 0 0 3px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.rows { display: flex; flex-direction: column; gap: 8px; }

/* --- filter bar ---------------------------------------------------------- */

.filterbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 8px;
}

.filter-row { display: flex; align-items: center; gap: 6px; }
.search { position: relative; flex: 1; min-width: 0; }

.search-input, .field-input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0f141b;
  color: var(--text);
  color-scheme: dark;
  font: inherit;
  font-size: 15px;
}

.search-input { padding-right: 44px; -webkit-appearance: none; appearance: none; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-input::placeholder { color: #6b778c; }

.search-clear {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}

.search-clear[hidden], .badge[hidden], .filter-hint[hidden], .filter-chips[hidden],
.filter-panel[hidden], .field[hidden], .filter-clear[hidden], .selbar[hidden],
.sheet-decide[hidden], .dec[hidden] { display: none; }

.bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.bar-btn:hover { color: var(--text); border-color: #46546d; }
.bar-btn[aria-expanded="true"], .bar-btn[aria-pressed="true"] {
  color: var(--text);
  background: #232d3d;
  border-color: #46546d;
}

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue);
  color: #07101f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.filter-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(340px, 48vh);
  overflow-y: auto;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  scrollbar-width: thin;
}

.filter-panel > * { flex-shrink: 0; }
.filter-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.field > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.filter-hint { margin: 0; color: #f0d79a; font-size: 12.5px; line-height: 1.4; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.fchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #1b222c;
  color: #c3ccdb;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.fchip:hover { border-color: #46546d; }
.fchip[aria-pressed="true"] { background: #1d2f4d; border-color: #3d6bb8; color: #dbe8ff; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip-active { background: #1d2f4d; border-color: #3d6bb8; color: #dbe8ff; }
.fchip-active span[aria-hidden] { color: #9db8e8; font-size: 12px; }

.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.switch-track {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #232b37;
  transition: background-color .15s ease, border-color .15s ease;
}

.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #98a3b6;
  transition: transform .15s ease, background-color .15s ease;
}

.switch[aria-checked="true"] .switch-track { background: #14301f; border-color: #1f6a3a; }
.switch[aria-checked="true"] .switch-knob { background: var(--green); transform: translateX(18px); }

.filter-foot { display: none; align-items: center; justify-content: space-between; gap: 10px; }
.filter-foot.is-on { display: flex; }
.filter-result { margin: 0; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.filter-clear {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #3d6bb8;
  background: #1d2f4d;
  color: #dbe8ff;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.search-input:focus-visible, .field-input:focus-visible, .search-clear:focus-visible,
.bar-btn:focus-visible, .fchip:focus-visible, .switch:focus-visible, .filter-clear:focus-visible,
.sel-link:focus-visible, .dec:focus-visible, .wide-btn:focus-visible,
.seg:focus-visible, .row-check:focus-visible + .row-box {
  outline: 2px solid #6d8fd6;
  outline-offset: 2px;
}

/* --- decision buttons (details dialog and selection bar) ------------------- */

.dec {
  flex: 1;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #1b222c;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.dec:hover:not(:disabled) { color: var(--text); border-color: #46546d; }
.dec:disabled { opacity: .45; cursor: default; }
.dec-interested { color: var(--green); border-color: rgba(34, 197, 94, .45); }
.dec-maybe { color: var(--blue); border-color: rgba(59, 130, 246, .45); }
.dec-rejected { color: var(--red); border-color: rgba(244, 63, 94, .45); }
.dec.is-on { color: #0b0e13; border-color: transparent; }
.dec-interested.is-on { background: var(--green); }
.dec-maybe.is-on { background: var(--blue); }
.dec-rejected.is-on { background: var(--red); }

.sheet-decide { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.decide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }

/* --- selecting rows -------------------------------------------------------- */

.row-pick { display: none; position: relative; width: 44px; height: 44px; align-self: center; }

.row-check {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.row-box {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 2px solid #46546d;
  background: #0f141b;
  pointer-events: none;
  transition: background-color .12s ease, border-color .12s ease;
}

.row-check:checked + .row-box { background: var(--blue); border-color: var(--blue); }

.row-check:checked + .row-box::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  width: 6px;
  height: 11px;
  border: solid #07101f;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.rows.is-selecting .row { grid-template-columns: 44px 52px 1fr; gap: 8px; }
.rows.is-selecting .row-pick { display: block; }
.rows.is-selecting .row-more { display: none; }
.row.is-selected { background: #16233a; border-color: #3d6bb8; }

.selbar {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 16px 10px;
  border-top: 1px solid var(--line);
  background: #10151c;
  box-shadow: 0 -12px 24px rgba(0, 0, 0, .4);
}

.sel-top { display: flex; align-items: center; gap: 4px; }
.sel-count { flex: 1; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.sel-link {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #9db8e8;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.sel-link:disabled { opacity: .45; cursor: default; }
.sel-actions { display: flex; gap: 6px; }

/* --- info and settings page ----------------------------------------------- */

.page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
}

.page > * { flex-shrink: 0; }
.page-title { margin: 0 2px; font-size: 20px; font-weight: 750; letter-spacing: -.2px; }

.panel {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.panel-title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.panel-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.panel-note[hidden] { display: none; }

.kv { margin: 0; }

.kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.kv > div:first-child { padding-top: 0; border-top: 0; }
.kv > div:last-child { padding-bottom: 0; }
.kv dt { color: var(--muted); font-size: 12.5px; }
.kv dd { margin: 0; font-size: 13px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.kv-link { color: #9db8e8; text-decoration: none; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.kv-link:not([href]) { color: inherit; font-family: inherit; }
.kv-link:focus-visible { outline: 2px solid #6d8fd6; outline-offset: 2px; border-radius: 4px; }

.bars { display: flex; flex-direction: column; gap: 9px; }

.bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  row-gap: 4px;
  align-items: baseline;
}

.bar-label { min-width: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.bar-count { color: var(--muted); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bar-track { grid-column: 1 / -1; height: 5px; border-radius: 5px; background: #212938; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--blue), var(--green)); }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.stat {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.stat b { display: block; margin-top: 2px; font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* --- this device's token (static build only) ------------------------------ */

.quick[hidden] { display: none; }
.quick-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quick-head .panel-title { margin-bottom: 0; }
.quick-state { font-size: 11px; color: var(--muted); }
.quick-state[data-mode="on"] { color: var(--green); }
.quick-state[data-mode="rejected"] { color: var(--red); }
.quick-text { margin: 8px 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.quick-form { display: flex; gap: 6px; }

.quick-input {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0f141b;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.quick-input[hidden], .quick-btn[hidden], .quick-link[hidden] { display: none; }
.quick-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }

.quick-btn {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #3a4a68;
  background: #1d2a41;
  color: #cfe0ff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

.quick-btn:disabled { opacity: .6; cursor: default; }
.quick-link { color: #9db8e8; font-size: 12.5px; }

.pending-btn:disabled, .pending-ghost:disabled { opacity: .6; cursor: default; }
.pending-ghost.is-armed {
  width: auto;
  padding: 0 10px;
  border-color: var(--red);
  background: #3a1820;
  color: #ffd3dc;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

/* --- overlays ----------------------------------------------------------- */

.toast {
  position: absolute;
  left: 50%;
  bottom: 88px;
  z-index: 9;
  transform: translate(-50%, 14px);
  max-width: 82%;
  padding: 10px 16px;
  border-radius: 12px;
  background: #0f1620;
  border: 1px solid #38445a;
  color: var(--text);
  font-size: 12.5px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-bad { border-color: var(--red); }

/* --- unsaved decisions (static build only) ------------------------------ */

.pending {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 12px 6px;
  padding: 5px 6px 5px 12px;
  border-radius: 12px;
  border: 1px solid #5a4a1c;
  background: #2b2412;
}

.pending[hidden] { display: none; }
.pending-text {
  min-width: 0;
  margin: 0;
  font-size: 12px;
  color: #f0d79a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pending-actions { display: flex; flex: none; gap: 6px; }

.pending-btn {
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid #7a6526;
  background: #4a3d16;
  color: #ffe8b0;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

.pending-ghost {
  width: 32px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid #7a6526;
  background: transparent;
  color: #ffe8b0;
  font-size: 14px;
  cursor: pointer;
}

.pending-btn:hover, .pending-ghost:hover { background: #5d4b1a; }
.row.is-unsaved { border-color: #5a4a1c; background: #241f12; }
.row.is-unsaved.is-selected { border-color: #3d6bb8; }

.tabs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  padding: 6px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #1d2531;
  background: rgba(11, 14, 19, .85);
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.tab b { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: #26303f; color: #c9d4e6; }
.tab.is-on { color: var(--text); background: #1a2230; border-color: #303c4e; }

.tab-icon { width: 52px; padding: 8px 0; }

.tab-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- details dialog ------------------------------------------------------ */

.modal {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 10, .74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: modal-fade .16s ease-out;
}

.modal[hidden] { display: none; }

.sheet {
  position: relative;
  width: 100%;
  max-height: min(88%, 780px);
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--card-2), var(--card) 55%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .6);
  outline: none;
  animation: sheet-rise .2s ease-out;
}

.sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 20px 20px;
  scrollbar-width: thin;
}

.sheet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #161c25;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}

.sheet-close:hover { color: var(--text); border-color: #46546d; }
.sheet-close:focus-visible, .link-btn:focus-visible { outline: 2px solid #6d8fd6; outline-offset: 2px; }

.sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 44px; min-height: 26px; }

.chip-decision[data-decision="interested"] { background: #14301f; border-color: #1f6a3a; color: #8be2ad; }
.chip-decision[data-decision="maybe"] { background: #14243d; border-color: #24508f; color: #9cc3ff; }
.chip-decision[data-decision="rejected"] { background: #3a1820; border-color: #7a2a3a; color: #ffa6b6; }
.chip-decision[data-decision="undecided"] { background: #222833; border-color: #3a4456; color: #b9c3d3; }
.chip-unsaved { background: #2b2412; border-color: #5a4a1c; color: #f0d79a; }

.sheet-title {
  margin: 12px 0 0;
  font-size: 24px;
  line-height: 1.18;
  font-weight: 750;
  letter-spacing: -.3px;
  overflow-wrap: anywhere;
}

.facts {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px 12px;
  margin: 18px 0 14px;
}

.facts dt {
  padding-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.facts dd { margin: 0; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.facts dd small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.facts .is-free { color: var(--green); }

.sheet-notes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sheet-notes:empty { display: none; }

.sheet-notes span {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  background: #2a2a1c;
  border: 1px solid #45452c;
  color: #e4e0a8;
}

.sheet-links { display: flex; gap: 8px; }

.sheet-ask { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.ask-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sheet-ask .link-btn { font-family: inherit; cursor: pointer; }

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* --- hide all rejected (static build only) ------------------------------ */

.fab {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 4;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #7a2a3a;
  background: #3a1820;
  color: #ffa6b6;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 0 4px rgba(11, 14, 19, .6);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}

.fab[hidden] { display: none; }
.fab:hover { background: #4a1f29; }
.fab:active { transform: scale(.94); }
.fab:focus-visible, .confirm-btn:focus-visible { outline: 2px solid #6d8fd6; outline-offset: 2px; }

.fab svg, .confirm-mark svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keeps the last row's buttons clear of the floating button. */
.list.has-fab { padding-bottom: 88px; }

.sheet.confirm { max-width: 380px; }
.confirm-body { padding: 26px 22px 20px; text-align: center; }

.confirm-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #7a2a3a;
  background: #3a1820;
  color: #ffa6b6;
}

.confirm-title { margin: 0 0 10px; font-size: 21px; font-weight: 750; letter-spacing: -.2px; }
.confirm-body p { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.confirm-body p b { color: var(--text); }
.confirm-body .confirm-note { color: #f0d79a; font-size: 12.5px; }
.confirm-body .confirm-note[hidden] { display: none; }
.confirm-actions { display: flex; gap: 10px; margin-top: 18px; }

.confirm-btn {
  flex: 1;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid #3a4a68;
  background: #1d2a41;
  color: #cfe0ff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.confirm-danger { border-color: #7a2a3a; background: #5a1f2c; color: #ffd3dc; }

.curtain {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 30px;
  text-align: center;
  background: rgba(5, 7, 10, .95);
}

.curtain[hidden] { display: none; }
.curtain-box h2 { margin: 6px 0; }
.curtain-box p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.curtain code { background: #161d27; padding: 2px 6px; border-radius: 6px; font-size: 12px; }

/* A phone with the browser's own bars leaves well under 900 pixels. Tighten the
   chrome first, so the card keeps as much of the screen as possible. */
@media (max-height: 780px) {
  .stack { margin-top: 8px; }
  .actions { padding-top: 10px; }
  .act { width: 46px; height: 46px; }
  .act-undo { width: 36px; height: 36px; }
  .hint { padding: 8px 16px 6px; }
  .progress { margin-bottom: 6px; }
}

/* Then the card sheds its least important parts as it runs out of height, in
   this order: the notes and the ID, then the links. The title, the time, the
   place, the age and the price are never dropped, and everything a card sheds is
   in the details dialog, one tap away. */
@container card (max-height: 430px) {
  .card { gap: 6px; padding: 14px; }
  .card-title { font-size: 20px; }
  .card-notes, .card-id { display: none; }
}

@container card (max-height: 370px) {
  .card-links { display: none; }
  .when-time { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .glow-layer, .progress-fill, .toast { transition: none; }
  .card.is-returning { animation: none; }
  .modal, .sheet { animation: none; }
  .fab { transition: none; }
  .bar-btn, .fchip, .dec, .row-box, .switch-track, .switch-knob { transition: none; }
}