/* vink · clean utility. One accent, neutral cool greys, 44px touch targets. */

:root {
  --ground: #F5F6F7;
  --panel: #FFFFFF;
  --panel-2: #F0F2F4;
  --ink: #14171A;
  --ink-2: #47505B;
  --ink-3: #6B7480;
  --ink-4: #8A929C;
  --ink-5: #A5ADB6;
  --line: #E4E7EA;
  --line-2: #EDEFF1;
  --accent: #0C8375;
  /* The big green fields are a gradient, not a slab: the flat dark teal read
     as heavy. Small text never sits on these, so they can be lighter than the
     action colour, which has to stay legible under white type. */
  --brand-1: #12A08A;
  --brand-2: #0A7E70;
  --accent-soft: #E7F1EF;
  --danger: #C0392B;
  --edge: #C6CCD2;
  --r: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light dark;
}

/* Night in the kitchen, night in the shop. Same design, other ground. */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0F1315;
    --panel: #171C1F;
    --panel-2: #212829;
    --ink: #F1F4F4;
    --ink-2: #C3CBCE;
    --ink-3: #9DA7AB;
    --ink-4: #8B969A;
    --ink-5: #6E787C;
    --line: #2A3134;
    --line-2: #222829;
    --edge: #3B4448;
    --accent: #3CC7AC;
    --brand-1: #12A08A;
    --brand-2: #0A7E70;
    --accent-soft: #122B26;
    --danger: #F0796A;
  }
}

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

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior-y: none;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app {
  /* --app-h is the *visible* viewport, measured live: on a phone the keyboard
     covers the page rather than shrinking it, and 100dvh keeps counting the
     covered part. */
  height: var(--app-h, 100dvh);
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  background: var(--ground);
}

.hidden { display: none !important; }

/* ---------------------------------------------------------------- header */
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(22px + var(--safe-t)) 20px 14px;
  background: var(--panel);
}
.head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.head .sub { font-size: 13px; color: var(--ink-3); }
.avatars { display: flex; align-items: center; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--line); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  border: 2px solid var(--panel);
  flex-shrink: 0;
}
.avatar + .avatar { margin-left: -10px; }
.avatar.me { background: var(--accent); color: #fff; }
.avatar.sm { width: 18px; height: 18px; font-size: 10px; font-weight: 700; border: 0; }

/* ------------------------------------------------------------ store chips */
.chips {
  display: flex; gap: 8px;
  padding: 0 20px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px;
  border-radius: 22px; border: 1px solid var(--line);
  background: var(--panel);
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; flex-shrink: 0;
}
.chip.has-logo { padding-left: 8px; }
.chip img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.chip.on img { }

/* ------------------------------------------------------------------- list */
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 8px; }
.stack { display: flex; flex-direction: column; gap: 10px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.sep { height: 1px; background: var(--line-2); margin-left: 50px; }

.row { display: flex; align-items: flex-start; gap: 4px; padding: 14px 14px 14px 4px; }
/* 44px hit area, 24px visual box: the target is the whole padded square. */
.tick {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  background: transparent; border: 0; margin-top: -8px;
}
.tick i {
  width: 24px; height: 24px; border-radius: 8px;
  border: 2px solid var(--edge);
  display: grid; place-items: center;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.tick:active i { transform: scale(0.88); }
.tick svg { display: none; }
.row.done .tick i { background: var(--accent); border-color: var(--accent); }
.row.done .tick svg { display: block; }
.row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row .name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.row.done .name { color: var(--ink-5); text-decoration: line-through; font-weight: 500; }
.row .note { font-size: 13.5px; color: var(--ink-2); line-height: 1.35; overflow-wrap: anywhere; }
.row .who { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-4); margin-top: 2px; }
.row .logo { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; object-fit: cover; border: 1px solid var(--line-2); }
.row .logo.badge {
  display: grid; place-items: center;
  background: var(--ink-2); color: #fff;
  font-size: 10px; font-weight: 700; border: 0; text-transform: uppercase;
}

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 0;
}
.section-head .label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-4);
}
.section-head button { font-size: 13px; font-weight: 600; color: var(--accent); }

.empty { padding: 40px 20px; text-align: center; color: var(--ink-4); font-size: 14px; }

/* -------------------------------------------------------------- add bar */
.addbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
/* The form is now two rows: the line you type on, and the rail of things you
   can attach to what you are typing. */
.addbar form { display: flex; flex-direction: column; gap: 0; flex: 1; }
.addline { display: flex; align-items: center; gap: 10px; }
.addbar input {
  flex: 1; min-width: 0; height: 48px;
  padding: 0 16px; border: 0; border-radius: 24px;
  background: var(--panel-2);
}
.addbar input::placeholder { color: var(--ink-4); }
.send {
  width: 48px; height: 48px; border-radius: 24px;
  background: var(--accent);
  display: grid; place-items: center; flex-shrink: 0;
}

/* --------------------------------------------------------------- tab bar */
.tabs {
  display: flex;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 8px 0 calc(14px + var(--safe-b));
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 6px 0; color: var(--ink-4);
}
.tab span { font-size: 11px; font-weight: 600; }
.tab.on { color: var(--accent); }

/* ---------------------------------------------------------------- wallet */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.loy {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  min-height: 132px;
}
.loy .logo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line-2); }
.loy .logo.badge {
  display: grid; place-items: center; border: 0; color: #fff;
  font-size: 16px; font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase;
}
.loy .nm { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.loy .no { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.loy.add {
  align-items: center; justify-content: center;
  border: 1.5px dashed var(--edge); background: transparent; gap: 8px;
}
.loy.add .plus { width: 40px; height: 40px; border-radius: 20px; background: var(--accent-soft); display: grid; place-items: center; }
.loy.add .lbl { font-size: 13.5px; font-weight: 600; color: var(--accent); }

/* ----------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-4);
}
.field input, .field textarea, .field select {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); padding: 14px;
  width: 100%; resize: none;
}
.field textarea { min-height: 78px; line-height: 1.4; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; border-radius: 15px;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 600;
  width: 100%;
}
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.btn.danger { background: transparent; border: 1px solid var(--line); color: var(--danger); }
.btn:disabled { opacity: 0.5; }

.emoji-row { display: flex; gap: 8px; flex-wrap: wrap; }
.emoji {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--panel-2);
  display: grid; place-items: center; font-size: 21px;
}
.store-row { display: flex; gap: 8px; flex-wrap: wrap; }
.store-pick {
  width: 52px; height: 52px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel);
  display: grid; place-items: center;
}
.store-pick.on { border: 2px solid var(--accent); }
.store-pick img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.store-pick .badge {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--ink-2); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase;
}

/* ---------------------------------------------------------------- sheets */
.sheet-bg {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(20, 23, 26, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 560px;
  background: var(--panel);
  border-radius: 28px 28px 0 0;
  padding: 12px 20px calc(28px + var(--safe-b));
  display: flex; flex-direction: column; gap: 16px;
  max-height: 92dvh; overflow-y: auto;
}
.grabber { width: 40px; height: 4px; border-radius: 2px; background: var(--edge); align-self: center; }
.sheet h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-head .link { font-size: 15px; font-weight: 600; color: var(--accent); }
.meta-line {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; background: var(--ground); border-radius: 14px;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.35;
}

/* --------------------------------------------------------------- barcode */
.barcode-bg { background: #232A33; }
.barcode-top { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 24px 20px 0; }
.pill {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 13px; font-weight: 600; color: #fff;
}
.barwrap {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 24px 16px 18px;
  background: #FFFFFF; border: 1px solid #E4E7EA; border-radius: 18px;
}
.barwrap canvas { width: 100%; height: auto; max-height: 130px; image-rendering: pixelated; }
.barwrap .digits {
  font-size: 16px; font-weight: 600; letter-spacing: 0.2em;
  color: #14171A; font-variant-numeric: tabular-nums;
}
.center-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; color: var(--ink-4);
}

/* --------------------------------------------------------------- scanner */
.scanbox { position: relative; aspect-ratio: 4 / 3; background: #2B3138; border-radius: 16px; overflow: hidden; }
.scanbox video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reticle {
  position: absolute; inset: 18% 10%;
  border: 2px solid #34D3B4; border-radius: 14px;
  box-shadow: 0 0 0 2000px rgba(20, 23, 26, 0.5);
}

/* ------------------------------------------------------------------ misc */
.list-plain { display: flex; flex-direction: column; }
.line {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; min-height: 56px;
}
.line + .line { border-top: 1px solid var(--line-2); }
.line .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.line .t1 { font-size: 15.5px; font-weight: 600; }
.line .t2 { font-size: 12.5px; color: var(--ink-4); }
.radio { width: 22px; height: 22px; border-radius: 11px; border: 1.5px solid #DDE1E5; flex-shrink: 0; display: grid; place-items: center; }
.radio.on { background: var(--accent); border-color: var(--accent); }
.radio svg { display: none; }
.radio.on svg { display: block; }

.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b));
  transform: translateX(-50%);
  background: var(--ink); color: #fff;
  padding: 11px 18px; border-radius: 22px;
  font-size: 13.5px; font-weight: 500;
  z-index: 60; max-width: 88vw; text-align: center;
}

/* ------------------------------------------------------------- onboarding */
.gate {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px;
  padding: 32px 24px calc(32px + var(--safe-b));
  background: linear-gradient(168deg, var(--brand-1) 0%, var(--brand-2) 78%);
  color: #fff;
  max-width: 560px; margin: 0 auto;
}
.gate .wordmark { font-size: 46px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.gate .tagline { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.78); }
.gate .panel {
  width: 100%; background: var(--panel); color: var(--ink);
  border-radius: 22px; padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.gate .panel p { margin: 0; font-size: 14px; color: var(--ink-3); line-height: 1.45; }
.gate .divider {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-4);
}
.gate .divider::before, .gate .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.langbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.langbar button {
  padding: 8px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  font-size: 13px; font-weight: 600;
}
.langbar button.on { background: #fff; color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: rise 0.22s ease; }
  @keyframes rise { from { transform: translateY(14px); opacity: 0.6; } }
}

.sheet-head .logo { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line-2); flex-shrink: 0; }
.sheet-head .logo.badge { display: grid; place-items: center; border: 0; background: var(--ink-2); color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; }

/* buttons used as rows keep list alignment */
button.line { width: 100%; text-align: left; background: none; }
button.loy { text-align: left; }

/* ---------------------------------------------------- empty & sign-in states */
.chip.quiet { background: var(--panel-2); border-color: transparent; }
.chip.quiet img { opacity: 0.82; }
.chip.on img, .chip.quiet.on img { opacity: 1; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 26px; }
.empty-mark { opacity: 0.9; }
.empty-t1 { font-size: 15px; font-weight: 600; color: var(--ink-2); text-align: center; }
.empty-t2 { font-size: 13px; color: var(--ink-4); text-align: center; line-height: 1.4; max-width: 34ch; }

.panel-h { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.panel-p { margin: 0; font-size: 14px; color: var(--ink-3); line-height: 1.45; }
.panel-p.small { font-size: 12.5px; color: var(--ink-4); }
.center { text-align: center; }
.sent-mark {
  width: 52px; height: 52px; border-radius: 26px; background: var(--accent-soft);
  display: grid; place-items: center; align-self: center;
}

.code-in {
  width: 100%; height: 62px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2);
  text-align: center; font-size: 28px; font-weight: 700;
  letter-spacing: 0.42em; text-indent: 0.42em;
  font-variant-numeric: tabular-nums;
}
.code-in::placeholder { letter-spacing: 0.32em; color: var(--ink-5); font-weight: 500; }
.panel-p.err { color: var(--danger); }
.panel-p.err:empty { display: none; }

/* -------------------------------------------------------------- account */
button.avatars { background: none; border: 0; padding: 0; display: flex; align-items: center; }
.avatar.big { width: 52px; height: 52px; font-size: 19px; border: 0; }
.account-top { display: flex; align-items: center; gap: 14px; }
.account-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.account-name { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.account-mail { font-size: 13px; color: var(--ink-4); overflow-wrap: anywhere; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; }
.kv + .kv { border-top: 1px solid var(--line-2); }
.kv-k { font-size: 13.5px; color: var(--ink-3); flex-shrink: 0; }
.kv-v { font-size: 13.5px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.or-line {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-4);
}
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.pass-wrap { position: relative; display: flex; align-items: center; }
.pass-wrap input { padding-right: 76px; }
.reveal {
  position: absolute; right: 8px;
  height: 34px; padding: 0 12px; border-radius: 10px;
  background: var(--panel-2); color: var(--ink-3);
  font-size: 12.5px; font-weight: 600;
}

.pass-note { font-size: 12.5px; color: var(--ink-4); line-height: 1.4; }
.pass-note.ok { color: var(--accent); font-weight: 600; }
.pass-note.err { color: var(--danger); font-weight: 600; }

/* ---------------------------------------------------------------- invite */
.invite-badge {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  padding: 5px 11px; border-radius: 999px;
}
.invite-h { font-size: 23px; line-height: 1.15; text-wrap: balance; }
.swap-row { display: flex; justify-content: center; }
.link-btn {
  font-size: 14px; font-weight: 600; color: var(--accent);
  padding: 10px 8px; min-height: 44px;
}

/* ------------------------------------------------------- splash animation */
.gate .mark-in { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .gate .mark-in svg path { stroke-dasharray: 240; stroke-dashoffset: 240; animation: draw 0.62s cubic-bezier(.65,0,.35,1) 0.12s forwards; }
  .gate .rise { opacity: 0; transform: translateY(8px); animation: rise-in 0.5s cubic-bezier(.2,.7,.3,1) 0.5s forwards; }
  .gate .rise-2 { animation-delay: 0.62s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise-in { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ toast + undo */
.toast { display: flex; align-items: center; gap: 14px; }
.toast button {
  color: #7BE3CB; font-weight: 700; font-size: 13.5px;
  padding: 6px 2px; min-height: 32px; white-space: nowrap;
}

/* ----------------------------------------------------------- language bar */
.langbar { display: grid; grid-template-columns: repeat(4, auto); gap: 6px; justify-content: center; }
.langbar button { padding: 9px 12px; font-size: 12.5px; min-height: 44px; }

/* ---------------------------------------------------------- item movement */
@media (prefers-reduced-motion: no-preference) {
  .card .row { animation: row-in 0.22s ease; }
}
@keyframes row-in { from { opacity: 0; transform: translateY(-4px); } }

/* ------------------------------------------------------------ list switch */
.head-left { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.title-btn {
  display: flex; align-items: center; gap: 4px;
  color: inherit; margin-left: -2px; padding: 2px 2px 0;
  min-height: 34px;
}
.title-btn .caret { display: flex; color: var(--ink-4); margin-top: 2px; }
.title-btn:active { opacity: 0.6; }

.list-mark {
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--panel-2); color: var(--ink-3);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; text-transform: uppercase; flex-shrink: 0;
}
.list-mark.on { background: var(--accent); color: #fff; }
:root:not([data-theme]) .list-mark.on { color: #fff; }
.add-list { display: flex; gap: 8px; }
.add-list input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); padding: 14px;
}
.add-list .btn { width: auto; padding: 0 20px; flex-shrink: 0; }

/* ---------------------------------------------------------------- asking */
.addline { gap: 8px; }
.ask-toggle {
  width: 48px; height: 48px; border-radius: 24px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--panel-2); color: var(--ink-3);
  transition: background 0.14s ease, color 0.14s ease;
}
.ask-toggle.on { background: var(--accent-soft); color: var(--accent); }

.ask-wrap { display: flex; flex-direction: column; }
.row.ask { padding: 14px; gap: 12px; align-items: flex-start; }
.q-mark {
  width: 24px; height: 24px; border-radius: 12px; flex-shrink: 0; margin-top: 1px;
  background: var(--accent); display: grid; place-items: center;
}
.row.answered-no .q-mark { background: var(--ink-5); }
.row.answered-no .name { color: var(--ink-5); }
.ask-actions { display: flex; gap: 8px; padding: 0 14px 14px 50px; }
.ans {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  flex: 1; min-height: 44px; padding: 0 14px; border-radius: 13px;
  font-size: 14.5px; font-weight: 600;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--panel);
}
.ans.yes { background: var(--accent); border-color: var(--accent); color: #fff; }
.ans.no { color: var(--ink-2); }
.ans svg { display: block; }

/* ----------------------------------------------------------------- photo */
.thumb {
  width: 34px; height: 34px; border-radius: 9px; overflow: hidden;
  flex-shrink: 0; border: 1px solid var(--line-2); background: var(--panel-2);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-in { display: none; }
.photo-slot { display: flex; flex-direction: column; gap: 10px; }
.photo-prev {
  width: 100%; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel-2);
  max-height: 220px;
}
.photo-prev img { width: 100%; height: 100%; max-height: 220px; object-fit: cover; display: block; }
.photo-full {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(10, 12, 13, 0.94);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.photo-full img { max-width: 100%; max-height: 100%; border-radius: 12px; }

/* --------------------------------------------------------------- avatars */
.avatar { text-transform: uppercase; overflow: hidden; }
.avatar.photo { padding: 0; background: var(--panel-2); }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.link-btn.muted { color: var(--ink-4); }
.pass-wrap + .pass-wrap { margin-top: 8px; }

/* ------------------------------------------------------------ activity log */
.line.ev { align-items: flex-start; padding: 12px 14px; }
.ev-dot {
  width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0;
  margin-top: 7px; background: var(--ink-5);
}
.ev-added, .ev-asked { background: var(--accent); }
.ev-removed, .ev-answered_no { background: var(--danger); }
.ev-done, .ev-answered_yes { background: var(--leek, var(--accent)); opacity: 0.75; }
.ev-text { font-weight: 500; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }

/* ------------------------------------------------------- nearby store bar */
/* Sits between the header and the chips, so it reads as part of the list's
   context rather than as an interruption. Only ever one, only when you are
   actually standing next to a shop you have things to buy at. */
.nothing { display: none; }

.near {
  display: flex; align-items: center; gap: 12px;
  margin: 0 20px 14px;
  padding: 12px 12px 12px 12px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 16px;
  cursor: pointer;
  animation: near-in 240ms cubic-bezier(.2, .7, .3, 1) both;
}
.near:active { transform: scale(.99); }
.near .logo { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.near .logo.badge {
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--ink-2);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.near-t1 { font-size: 15px; font-weight: 650; color: var(--ink); line-height: 1.25; }
.near-t2 { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.near-x {
  flex-shrink: 0;
  width: 32px; height: 32px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-4);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.near-x:active { background: rgba(0, 0, 0, .06); }

@keyframes near-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .near { animation: none; }
}

/* ------------------------------------------------------------ store picker */
/* The catalogue grew past the point where a row of buttons works. The field
   shows the choice; the sheet does the choosing. */
.store-field {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 8px 14px;
  background: var(--panel); color: var(--ink);
  border: 1.5px solid var(--edge); border-radius: 14px;
  font: inherit; font-size: 16px; text-align: left; cursor: pointer;
}
.store-field:active { background: var(--ground); }
.store-field .logo { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.store-field .logo.badge {
  display: flex; align-items: center; justify-content: center;
  background: var(--ground); color: var(--ink-3);
  font-size: 11px; font-weight: 700;
}
.store-field .quiet { color: var(--ink-4); }
.store-none {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--edge); flex-shrink: 0;
}

.store-search { position: sticky; top: 0; z-index: 2; background: var(--panel); padding-bottom: 8px; }
.store-search input {
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--ground); color: var(--ink);
  border: 1.5px solid var(--edge); border-radius: 12px;
  font: inherit; font-size: 16px;   /* 16px or iOS zooms the page on focus */
}
.store-search input:focus { outline: none; border-color: var(--accent); }

.store-list { max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
.store-head {
  position: sticky; top: 0;
  padding: 14px 4px 6px;
  background: var(--panel);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-4);
}
.store-line {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 6px 4px;
  background: transparent; border: 0; border-radius: 10px;
  font: inherit; font-size: 16px; color: var(--ink); text-align: left; cursor: pointer;
}
.store-line:active { background: var(--ground); }
.store-line .logo { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.store-line .logo.badge {
  display: flex; align-items: center; justify-content: center;
  background: var(--ground); color: var(--ink-3);
  font-size: 11px; font-weight: 700;
}
.store-line.on { font-weight: 600; }
.store-tick { display: flex; color: var(--accent); }
.store-line.clear { color: var(--ink-3); margin-top: 6px; }

/* ------------------------------------------------------------------ legal */
.consent { font-size: 12.5px; line-height: 1.5; color: var(--ink-4); text-align: center; margin: 2px 0 0; }
.consent a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.legal-row { text-align: center; font-size: 13px; color: var(--ink-4); padding: 14px 0 2px; }
.legal-row a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }

/* Transparent brand PNGs sat lighter than the solid colour badges next to
   them; a tile gives every row the same visual weight. */
.store-line img.logo, .store-field img.logo {
  object-fit: contain; background: var(--ground); padding: 4px;
}

/* The list sheet carries people, history and the lists themselves. It does NOT
   get its own scroller: a scrolling box inside a scrolling sheet swallows the
   drag on a phone and neither one moves. The sheet scrolls, this just stacks. */
.sheet-body { display: flex; flex-direction: column; gap: 2px; }

/* ------------------------------------------------------------- add rail */
/* A shop and a photo are the two things you already know when you type the
   item — asking for them afterwards, in a sheet, is asking twice. The rail
   opens only while you are writing, so the resting bar is still one line. */
/* The rail used to slide open on focus, which pushed the list up by 44px the
   moment you touched the input: the screen appeared to lurch for no reason.
   It stays put now, which also makes the two attachments discoverable rather
   than hidden behind a focus event. */
.rail { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

.rail-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px 0 9px;
  background: var(--panel-2); color: var(--ink-2);
  border: 1px solid transparent; border-radius: 17px;
  font: inherit; font-size: 13.5px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
}
.rail-btn:active { transform: scale(.97); }
.rail-btn.on {
  background: var(--accent-soft); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}
.rail-ico { display: flex; color: var(--ink-4); }
.rail-btn.on .rail-ico { color: var(--accent); }
.rail-logo { width: 20px; height: 20px; border-radius: 6px; object-fit: contain; background: #fff; }
.rail-logo.badge {
  display: flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 700; color: #fff;
}
.rail-thumb { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; }
.rail .file-in { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rail { transition: none; }
}

/* ------------------------------------------------------------- the launch */
.splash {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(168deg, var(--brand-1) 0%, var(--brand-2) 78%);
  transform: translateY(0);
  will-change: transform;
}
/* A soft light behind the mark so the flat brand field has some depth. */
.splash-glow {
  position: absolute; inset: 0;
  background: radial-gradient(58% 42% at 50% 42%,
    rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  animation: splash-glow 1.5s ease-out .1s forwards;
}
.splash-in {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding-bottom: 6vh;
}
.splash-mark { display: block; }
.splash-mark path {
  stroke-dasharray: 250; stroke-dashoffset: 250;
  animation: splash-draw .85s cubic-bezier(.65, 0, .35, 1) .18s forwards;
}
.splash-word {
  color: #fff; font-size: 52px; font-weight: 700;
  letter-spacing: -.055em; line-height: 1;
  opacity: 0; transform: translateY(12px);
  animation: splash-rise .55s cubic-bezier(.2, .7, .3, 1) .92s forwards;
}
.splash-tag {
  color: rgba(255, 255, 255, .8); font-size: 15.5px; font-weight: 500;
  opacity: 0; transform: translateY(10px);
  animation: splash-rise .55s cubic-bezier(.2, .7, .3, 1) 1.12s forwards;
}

/* The curtain: the panel itself travels up and takes the brand with it,
   revealing the list that has been sitting there the whole time. */
.splash.lift {
  transform: translateY(-101%);
  transition: transform .62s cubic-bezier(.76, 0, .24, 1);
}
.splash.lift .splash-in {
  opacity: 0;
  transition: opacity .3s ease, transform .5s cubic-bezier(.76, 0, .24, 1);
  transform: translateY(-16px);
}

@keyframes splash-draw { to { stroke-dashoffset: 0; } }
@keyframes splash-rise { to { opacity: 1; transform: none; } }
@keyframes splash-glow { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .splash-glow, .splash-mark path, .splash-word, .splash-tag {
    animation: none; opacity: 1; transform: none; stroke-dashoffset: 0;
  }
  .splash.lift { transform: none; opacity: 0; transition: opacity .3s ease; }
  .splash.lift .splash-in { transition: none; }
}

/* ------------------------------------------------- while the keyboard is up */
/* The tab bar is for going somewhere else; mid-sentence you are not going
   anywhere. It folds away so the line you are typing sits on the keys, and
   comes back the moment you are done. */
.tabs {
  overflow: hidden;
  transition: max-height 220ms cubic-bezier(.2,.7,.3,1),
              opacity 140ms ease,
              padding-bottom 220ms cubic-bezier(.2,.7,.3,1);
  max-height: 120px;
}
body.kb .tabs {
  max-height: 0; opacity: 0; padding-bottom: 0; pointer-events: none;
}
/* The safe-area inset belongs to the home bar, which the keyboard covers. */
body.kb .addbar { padding-bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
  .tabs { transition: none; }
}

/* ------------------------------------------------------- rail, refinements */
.rail-pair { display: inline-flex; align-items: center; }
.rail-pair .rail-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 8px; }
.rail-x {
  height: 34px; width: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-left: 0; border-radius: 0 17px 17px 0;
  font-size: 17px; line-height: 1; cursor: pointer;
}
.rail-x:active { transform: scale(.96); }

.rail-btn:disabled, .send:disabled { opacity: .55; }
.rail-btn.busy { color: var(--ink-3); }
.spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--ink-5); border-top-color: var(--ink-3);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } }

/* ------------------------------------------------------- touch targets */
/* Several controls are visually small on purpose — a chip, a text link, a
   title with a caret. Apple asks for 44pt of *reachable* area, not 44pt of
   ink, so the hit area is grown with a pseudo-element and the design stays
   the size it wants to be. */
.rail-btn, .rail-x, .title-btn, .legal-row a, .consent a,
.link, .link-btn, .avatars, .near-x, .store-line {
  position: relative;
}
.rail-btn::after, .rail-x::after, .title-btn::after, .legal-row a::after,
.consent a::after, .link::after, .link-btn::after, .avatars::after,
.near-x::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}

/* --------------------------------------------------------- opt-in checkbox */
/* Unticked, optional, and visibly separate from the sentence about the terms:
   consent that rides inside an acceptance is not consent. */
.optin {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-top: 2px;
  background: var(--ground); border: 1px solid var(--line); border-radius: 12px;
  font-size: 13px; line-height: 1.45; color: var(--ink-2); cursor: pointer;
}
.optin input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid var(--edge); border-radius: 6px; background: var(--panel);
  cursor: pointer; position: relative;
}
.optin input:checked { background: var(--accent); border-color: var(--accent); }
.optin input:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.optin input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------- first run */
.ob {
  position: fixed; inset: 0; z-index: 8000;
  display: flex; flex-direction: column;
  background: var(--ground);
  padding: calc(14px + var(--safe-t, 0px)) 0 calc(18px + var(--safe-b, 0px));
  animation: ob-in .34s cubic-bezier(.2,.7,.3,1) both;
}
.ob.out { animation: ob-out .3s cubic-bezier(.4,0,1,1) both; }
@keyframes ob-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes ob-out { to { opacity: 0; transform: translateY(-10px); } }

.ob-top { display: flex; justify-content: flex-end; padding: 0 20px; min-height: 34px; }
.ob-skip {
  background: none; border: 0; padding: 6px 4px;
  font: inherit; font-size: 15px; color: var(--ink-3); cursor: pointer;
}

.ob-track {
  flex: 1; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ob-track::-webkit-scrollbar { display: none; }
.ob-slide {
  flex: 0 0 100%; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 0 30px; text-align: center;
  overflow-y: auto;
}
.ob-slide h2 { font-size: 25px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 0; }
.ob-slide p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 21rem; }

/* The pictures are the app's own parts, drawn small: nothing to learn twice. */
.ob-art {
  width: 100%; max-width: 260px; min-height: 190px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 8px;
}
.ob-card {
  width: 100%; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 6px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.ob-card-sm { padding: 14px 12px; }
.ob-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; }
.ob-row + .ob-row { border-top: 1px solid var(--line); }
.ob-row b { font-weight: 500; color: var(--ink); }
.ob-row em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--ink-4); }
.ob-row.done b { color: var(--ink-4); text-decoration: line-through; }
.ob-tick {
  width: 21px; height: 21px; border-radius: 7px;
  border: 1.5px solid var(--edge); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ob-tick.on { background: var(--accent); border-color: var(--accent); }
.ob-tick:not(.on) svg { display: none; }

.ob-chips { display: flex; gap: 8px; }
.ob-chip {
  width: 46px; height: 40px; border-radius: 13px;
  background: var(--panel); border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.ob-chip.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ob-chip .logo { width: 26px; height: 26px; border-radius: 8px; object-fit: contain; }
.ob-chip .logo.badge { display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; }
.ob-bar { height: 11px; border-radius: 6px; background: var(--line); }
.ob-bar.short { width: 58%; margin-top: 10px; }

.ob-bubble {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px 16px 16px 4px; padding: 13px 15px; font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.ob-bubble b {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.ob-answers { display: flex; gap: 8px; align-self: stretch; }
.ob-no, .ob-yes {
  flex: 1; text-align: center; padding: 9px 0; border-radius: 12px;
  font-size: 13.5px; font-weight: 600;
}
.ob-no { background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); }
.ob-yes { background: var(--accent); color: #fff; }

.ob-perm .ob-ring {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.ob-perm .ob-ring svg { width: 40px; height: 40px; }
.ob-perms { align-self: stretch; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ob-perm-row {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 12px 12px 15px;
}
.ob-perm-row.on { border-color: var(--accent); background: var(--accent-soft); }
.ob-perm-row .t1 { font-size: 15px; font-weight: 600; }
.ob-perm-row .t2 { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.btn.small {
  height: 36px; padding: 0 16px; font-size: 14px;
  width: auto; min-width: 74px; flex-shrink: 0;   /* .btn is full-width by default */
}
.ob-perm-row .grow { min-width: 0; }

.ob-foot { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 10px 30px 0; }
.ob-dots { display: flex; gap: 7px; }
.ob-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--edge);
  transition: width 220ms cubic-bezier(.2,.7,.3,1), background 220ms ease;
}
.ob-dot.on { width: 22px; border-radius: 4px; background: var(--accent); }
.ob-foot .btn { width: 100%; max-width: 21rem; }

@media (prefers-reduced-motion: reduce) {
  .ob, .ob.out { animation: none; }
  .ob-dot { transition: none; }
}

/* ------------------------------------------------------------ going back */
/* Every sheet gets a back arrow in its top-left, and the phone's own back
   gesture closes it too. Before this, a sheet could only be dismissed by the
   backdrop or a small link, which reads as "this app has no back button". */
.sheet-back {
  position: absolute; top: 14px; left: 12px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
}
.sheet-back:active { background: var(--ground); }
.sheet { position: relative; }
/* A sheet whose first row is its own titled header keeps room for the arrow. */
.sheet .sheet-head { padding-left: 44px; }

/* ------------------------------------------------------- reading a page */
.doc {
  position: fixed; inset: 0; z-index: 8500;
  display: flex; flex-direction: column;
  background: var(--panel);
  animation: doc-in .26s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes doc-in { from { opacity: 0; transform: translateX(18px); } }
.doc-bar {
  display: flex; align-items: center; gap: 4px;
  padding: calc(8px + var(--safe-t)) 12px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.doc-back {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.doc-back:active { background: var(--ground); }
.doc-title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.doc-frame { flex: 1; width: 100%; border: 0; background: var(--ground); }

@media (prefers-reduced-motion: reduce) { .doc { animation: none; } }

/* ------------------------------------------------------- what this app is */
/* The first screen used to ask for a password before saying what it was for. */
.pitch { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 21rem; }
.pitch-row {
  display: flex; align-items: center; gap: 11px;
  font-size: 14.5px; line-height: 1.35; color: rgba(255, 255, 255, .92);
}
.pitch-ico {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: rgba(255, 255, 255, .15); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pitch-ico svg { width: 17px; height: 17px; }

.join-box { display: flex; flex-direction: column; gap: 14px; }

/* --------------------------------------------------------- first item in */
.seeds { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.seed {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px 0 11px;
  background: var(--panel); color: var(--ink);
  border: 1.5px solid var(--edge); border-radius: 19px;
  font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
}
.seed:active { transform: scale(.97); background: var(--ground); }
.seed-plus { display: flex; color: var(--accent); }

/* ---------------------------------------------------------- still alone */
.solo {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 14px; padding: 14px 14px 14px 13px;
  background: var(--panel); color: var(--ink);
  border: 1.5px dashed var(--edge); border-radius: 16px;
  font: inherit; text-align: left; cursor: pointer;
}
.solo:active { background: var(--ground); }
.solo-mark {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.solo .t1 { font-size: 15px; font-weight: 600; }
.solo .t2 { font-size: 13px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.solo-go { display: flex; color: var(--ink-4); flex-shrink: 0; }


/* --------------------------------------------------------- the new line */
.row.fresh { animation: fresh 1.3s ease-out both; }
@keyframes fresh {
  0%   { background: var(--accent-soft); }
  70%  { background: var(--accent-soft); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .row.fresh { animation: none; } }

/* --------------------------------------------------------- segmented pick */
.seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--ground); border-radius: 13px;
}
.seg-btn {
  flex: 1; min-width: 0; height: 40px; padding: 0 10px;
  background: transparent; color: var(--ink-2);
  border: 0; border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg-btn.on { background: var(--panel); color: var(--ink); font-weight: 650; box-shadow: 0 1px 3px rgba(0,0,0,.09); }

.meta-line.as-btn {
  width: 100%; border: 0; font: inherit; font-size: 12.5px;
  text-align: left; cursor: pointer; color: var(--ink-3);
}
.loy.muted { opacity: .62; }