/* The page's look, ported from the approved prototype (spec/canvas/App.dc.html), drawn at 402 x 874.
   Colours are the workspace theme's (theme.ts sets --l-* and --d-*); light or dark follows the phone. */

:root {
  --bg: var(--l-bg); --surf: var(--l-surf); --q: var(--l-q); --border: var(--l-border); --qborder: var(--l-qborder);
  --line: var(--l-line); --head: var(--l-head); --text: var(--l-text); --muted: var(--l-muted); --accent: var(--l-accent);
  --on: var(--l-on); --shadow: var(--l-shadow); --soft: var(--l-soft); --frame: var(--l-frame); --btnborder: var(--l-btnborder);
  --dot: var(--l-dot); --chip: var(--l-chip); --success: var(--l-success); --warning: var(--l-warning); --error: var(--l-error);
  --veil: var(--l-veil); --sheetback: var(--l-sheetback);
  --st: max(env(safe-area-inset-top), 10px);
  --sb: max(env(safe-area-inset-bottom), 16px);
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--d-bg); --surf: var(--d-surf); --q: var(--d-q); --border: var(--d-border); --qborder: var(--d-qborder);
    --line: var(--d-line); --head: var(--d-head); --text: var(--d-text); --muted: var(--d-muted); --accent: var(--d-accent);
    --on: var(--d-on); --shadow: var(--d-shadow); --soft: var(--d-soft); --frame: var(--d-frame); --btnborder: var(--d-btnborder);
    --dot: var(--d-dot); --chip: var(--d-chip); --success: var(--d-success); --warning: var(--d-warning); --error: var(--d-error);
    --veil: var(--d-veil); --sheetback: var(--d-sheetback);
  }
}
/* Screenshots at the prototype's size: its status bar and home indicator. */
:root.frame-iphone { --st: 54px; --sb: 34px; }

@keyframes livepulse { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .35; transform: scale(.7) } }
@keyframes cardin { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: none } }
@keyframes rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes draw { to { stroke-dashoffset: 0 } }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
@keyframes popin { from { opacity: 0; transform: scale(.6) } to { opacity: 1; transform: none } }
@keyframes bump { 0% { transform: scale(1) } 40% { transform: scale(1.35) } 100% { transform: scale(1) } }
@keyframes bump2 { 0% { transform: scale(1) } 40% { transform: scale(1.35) } 100% { transform: scale(1) } }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

* { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; background: var(--bg); }
body {
  font-family: -apple-system, system-ui, 'Segoe UI', sans-serif; color: var(--text);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
}
button, input, textarea { font-family: inherit; }
button { -webkit-user-select: none; user-select: none; }
.noscrollbar, .noscrollbar-x { scrollbar-width: none; }
.noscrollbar::-webkit-scrollbar, .noscrollbar-x::-webkit-scrollbar { display: none; }
.grow { flex: 1; }
.small { font-size: 13px; line-height: 1.4; color: var(--muted); margin: 4px 0; }
.loading { position: fixed; inset: 0; background: var(--bg); }

/* ---- the frame: the phone layout, centred on a computer ---- */
.app {
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 440px;
  display: flex; flex-direction: column; overflow: hidden; background: var(--bg);
}
@media (min-width: 480px) {
  html, body { background: var(--head); }
  .app { border-left: 1px solid var(--frame); border-right: 1px solid var(--frame); }
}
.sb-probe { position: absolute; width: 0; height: var(--sb); visibility: hidden; pointer-events: none; }

/* ---- header: workspace button, then the tabs ---- */
.header { flex: none; display: flex; align-items: flex-end; padding-top: var(--st); background: var(--head); }
.seg16 { width: 16px; flex: none; border-bottom: 1px solid var(--line); }
.seg-fill { flex: 1; border-bottom: 1px solid var(--line); }
.ws-wrap { display: flex; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.ws-btn {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; background: var(--accent); color: var(--on);
}
.tab {
  height: 44px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600;
  cursor: pointer; box-sizing: border-box; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.tab.icon-only { padding: 0 12px; }
.tab.on {
  height: 45px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 12px 12px 0 0; box-shadow: 0 -6px 8px -3px var(--shadow); clip-path: inset(-16px -16px 0 -16px);
}
.bump1 { display: inline-block; animation: bump 420ms ease-out; }
.bump2 { display: inline-block; animation: bump2 420ms ease-out; }

/* ---- story bars, with the list button at their end ---- */
.bars-row {
  position: absolute; left: 0; right: 0; top: calc(var(--st) + 49px); z-index: 62; height: 23px; display: flex;
  align-items: center; gap: 8px; padding: 0 8px 0 16px; box-sizing: border-box; animation: fadein 240ms ease-out; transition: opacity 300ms ease;
}
.bars-track { flex: 1; min-width: 0; display: flex; gap: 4px; }
.bar { height: 3px; border-radius: 2px; transition: flex-grow 450ms ease, margin 450ms ease, opacity 300ms ease, background 300ms ease; }
.list-btn {
  flex: none; width: 36px; height: 32px; margin: -5px 0; padding: 0; border: 0; border-radius: 10px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted);
}

/* ---- Needs you: one card per screen ---- */
.pager { position: relative; z-index: 1; flex: 1; min-height: 0; margin-top: 23px; overflow: hidden; display: flex; flex-direction: column; touch-action: pan-y; }
.track { flex: 1; min-height: 0; display: flex; }
.page { flex: 0 0 100%; width: 100%; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.page-inner { flex: 1; min-height: 0; display: flex; padding: 4px 12px var(--sb); }

/* ---- the card ---- */
.card {
  position: relative; flex: 1; min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 28px; background: var(--surf); border: 1px solid var(--border); transform-origin: 92% 0;
}
.card-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 24px 18px 22px; }
.card-scroll > * { flex: none; }
/* The title bar is a handle: dragging it down goes back to the list, so the phone mustn't scroll on it. It stays
   pinned to the card's top edge (a sticky top counts from inside .card-scroll's 24px padding) and shrinks as the
   card scrolls (--tf, --tb: card.tsx). */
.title-bar {
  position: sticky; top: -24px; z-index: 55; box-sizing: border-box; margin: -16px -18px 0; padding: 16px 18px 4px; touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
.title-bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--tb, 100%); pointer-events: auto;
  background: var(--surf); box-shadow: 0 1px 0 transparent; transition: box-shadow 200ms ease;
}
.card.scrolled .title-bar::before { box-shadow: 0 1px 0 var(--border); }
.title-bar .title { position: relative; pointer-events: auto; font-size: var(--tf, 28px); }
.title { margin: 0 4px; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--text); overflow-wrap: anywhere; }
.meta { display: flex; align-items: center; gap: 6px; min-height: 32px; min-width: 0; margin: 4px 0 0 4px; font-size: 14px; color: var(--muted); }
.meta-age { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.meta-ws { flex: none; display: inline-flex; margin-right: 2px; color: var(--muted); }
.meta-urgent { flex: none; display: inline-flex; color: var(--warning); }
.meta-dot { flex: none; width: 8px; height: 8px; border-radius: 4px; margin-right: 2px; animation: livepulse 1.4s ease-in-out infinite; background: var(--accent); }
.step-text { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: rise 360ms ease-out; color: var(--text); }
.meta-btn {
  flex: none; width: 32px; height: 32px; border-radius: 16px; box-sizing: border-box; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; padding: 0; transition: background 200ms ease, color 200ms ease;
  border: 1px solid var(--btnborder); background: transparent; color: var(--muted);
}
.meta-btn.on { border-color: var(--accent); background: var(--accent); color: var(--on); }
.send-pill {
  flex: none; height: 32px; display: inline-flex; align-items: center; gap: 4px; padding: 0 11px 0 9px; box-sizing: border-box;
  border-radius: 16px; font-size: 15px; font-weight: 700; cursor: pointer; animation: popin 260ms var(--ease); border: 0;
  background: var(--accent); color: var(--on);
}
.undo-pill, .retry-pill {
  flex: none; height: 32px; display: inline-flex; align-items: center; padding: 0 10px; box-sizing: border-box; border-radius: 16px;
  font-size: 14px; font-weight: 600; cursor: pointer; animation: popin 260ms var(--ease); border: 1px solid var(--btnborder);
  background: transparent; color: var(--accent); white-space: nowrap;
}
.retry-pill { color: var(--error); border-color: var(--error); }
.note-row { margin-top: 10px; }
.note-sent { margin-top: 10px; padding: 0 8px; font-size: 15px; font-weight: 600; white-space: nowrap; animation: cardin 300ms ease-out; color: var(--muted); }
.seg { display: flex; gap: 4px; margin-top: 16px; padding: 3px; max-height: 40px; overflow: hidden; box-sizing: border-box; border-radius: 12px; animation: rise 300ms ease-out; background: var(--bg); }
/* One side emptied: its chip shrinks (240 ms), then the switcher folds away (260 ms); SWITCH_OUT_MS in card.tsx. */
.seg.out { pointer-events: none; animation: segaway 260ms var(--ease) 240ms forwards; }
.seg-btn.gone { min-width: 0; overflow: hidden; white-space: nowrap; animation: segchip 240ms var(--ease) forwards; }
@keyframes segchip { to { flex-grow: 0; flex-basis: 0; opacity: 0; } }
@keyframes segaway { to { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } }
/* The other side's stack slides in to the front from its own side. */
.stack.enter-l { animation: stackin-l 420ms var(--ease); }
.stack.enter-r { animation: stackin-r 420ms var(--ease); }
@keyframes stackin-l { from { opacity: 0; transform: translateX(-36%) scale(.94); } }
@keyframes stackin-r { from { opacity: 0; transform: translateX(36%) scale(.94); } }
.seg-btn {
  flex: 1; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0; border: 0;
  border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease;
  background: transparent; color: var(--muted); box-shadow: none;
}
.seg-btn.on { background: var(--q); color: var(--text); box-shadow: 0 1px 3px var(--soft); }
.label { margin: 26px 4px 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.body { margin: 0 4px; font-size: 17px; line-height: 1.5; color: var(--text); }
.recent { display: flex; gap: 10px; margin: 0 4px; font-size: 15px; line-height: 1.6; color: var(--text); }
.recent-at { flex: none; width: 42px; font-variant-numeric: tabular-nums; color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.link-chip {
  height: 40px; display: inline-flex; align-items: center; padding: 0 16px; box-sizing: border-box; border-radius: 20px; text-decoration: none;
  font-size: 15px; font-weight: 600; border: 1px solid var(--border); color: var(--text); background: transparent;
}
.more-chip { width: 40px; padding: 0; justify-content: center; cursor: pointer; color: var(--muted); }

/* Markdown in a card, in a sheet */
.md-p { margin: 0 0 10px; }
.md-p:last-child, .md-list:last-child { margin-bottom: 0; }
.md-h { font-weight: 700; }
.md-list { margin: 0 0 10px; padding-left: 22px; }
.md-list li { margin: 2px 0; }
.md-ic { font-family: ui-monospace, Menlo, monospace; font-size: .86em; padding: 1px 5px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); }
.md a { color: var(--accent); font-weight: 600; text-decoration: none; }
.md-code {
  margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; overflow-x: auto; white-space: pre; font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; line-height: 1.5; background: var(--bg); color: var(--text); border: 1px solid var(--border); touch-action: pan-x pan-y;
}
.md-code:last-child { margin-bottom: 0; }
.body-md { margin: 0 4px; font-size: 17px; line-height: 1.5; color: var(--text); }
.card-md { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--text); }
.card-md .md-p, .card-md .md-list { margin-left: 4px; margin-right: 4px; }

/* the Unblocked veil: all in by about 700 ms, inside its hold (UNBLOCKED_MS, store.ts) */
.veil {
  position: absolute; inset: 0; z-index: 90; border-radius: 28px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding-bottom: 60px; animation: fadein 260ms ease-out;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: var(--veil);
}
.veil .ring { stroke: var(--accent); stroke-dasharray: 164; stroke-dashoffset: 164; transform: rotate(-90deg); transform-origin: 32px 32px; animation: draw 400ms var(--ease) 60ms forwards; }
.veil .tick { stroke: var(--accent); stroke-dasharray: 36; stroke-dashoffset: 36; animation: draw 240ms ease-out 380ms forwards; }
.veil-text { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; opacity: 0; animation: rise 300ms ease-out 400ms forwards; color: var(--text); }
.veil-undo {
  height: 36px; padding: 0 16px; border-radius: 18px; font-size: 15px; font-weight: 600; cursor: pointer; opacity: 0;
  animation: rise 300ms ease-out 400ms forwards; background: transparent; border: 1px solid var(--btnborder); color: var(--accent);
}

/* ---- the turn stack ---- */
.less-row { display: flex; justify-content: flex-end; overflow: hidden; transition: max-height 350ms var(--ease), opacity 300ms ease, margin 350ms var(--ease); }
.less-btn {
  height: 36px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border: 0; border-radius: 18px; font-size: 14px;
  font-weight: 600; cursor: pointer; background: var(--bg); color: var(--muted);
}
.stack { position: relative; margin-top: 22px; transition: height 450ms var(--ease); }
.dots {
  position: absolute; left: -18px; top: 14px; width: 18px; z-index: 45; display: flex; flex-direction: column; touch-action: none;
  cursor: ns-resize; -webkit-user-select: none; user-select: none; transition: opacity 250ms ease;
}
.dot-slot { height: 16px; flex: none; display: flex; align-items: center; justify-content: center; }
.dot { display: block; width: 6px; border-radius: 3px; transition: height 250ms ease, background 250ms ease; }
.item {
  position: absolute; left: 0; right: 0; top: 0; overflow: hidden; box-sizing: border-box; padding: 16px; display: flex;
  flex-direction: column; border-radius: 20px; transform-origin: center bottom; background: var(--q); border: 1px solid var(--qborder);
}
.item-in { flex: none; display: flex; flex-direction: column; }
.cover { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--q); }
.expand-zone { position: absolute; left: 0; right: 0; height: 26px; border: 0; padding: 0; background: transparent; cursor: pointer; z-index: 50; touch-action: none; }
.ihead { display: flex; gap: 8px; align-items: flex-start; }
.kind { flex: none; display: inline-flex; margin-top: 3px; color: var(--muted); }
.itext { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.ibody-wrap { position: relative; }
.ibody { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.ibody.reply { color: var(--text); }
.more { display: inline; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; color: var(--accent); }
.more-abs { position: absolute; right: 0; bottom: 0; padding-left: 30px; font-size: 15px; line-height: 1.4; background: linear-gradient(to right, transparent, var(--q) 26px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  height: 30px; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; box-sizing: border-box; border-radius: 15px;
  font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; background: var(--chip); color: var(--text);
}
.chip span { overflow: hidden; text-overflow: ellipsis; }
.chip svg { flex: none; }
.opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.first-row { display: flex; align-items: center; gap: 4px; }
.opt {
  height: 40px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; cursor: pointer; box-sizing: border-box; white-space: nowrap; transition: background 200ms ease, color 200ms ease;
  font-weight: 500; border: 1px solid var(--btnborder); background: transparent; color: var(--text);
}
.opt span { overflow: hidden; text-overflow: ellipsis; }
.opt.rec { font-weight: 600; border-color: var(--accent); color: var(--accent); }
.opt.chosen { font-weight: 600; background: var(--bg); }
.opt.grow { flex: 1; min-width: 0; margin-right: 4px; }
.opt.full { width: 100%; }
.own {
  flex: none; width: 40px; height: 40px; padding: 0; box-sizing: border-box; border-radius: 12px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; border: 1px solid var(--btnborder); background: transparent; color: var(--muted);
}
.respond { display: flex; align-items: center; gap: 4px; margin-top: 14px; }
.ans {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; box-sizing: border-box; border-radius: 20px;
  font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.ans.opt { align-self: flex-start; max-width: 100%; height: 40px; }
.ans.own { width: 100%; height: auto; display: flex; align-items: flex-start; padding: 10px 14px; line-height: 20px; transition: border-radius 250ms ease; justify-content: flex-start; }
.ans.own.open { border-radius: 16px; }
.ans-icon { flex: none; display: inline-flex; height: 20px; align-items: center; color: var(--muted); }
.ans-text { min-width: 0; white-space: normal; animation: rise 260ms ease-out; }
.ans.own:not(.open) .ans-text {
  flex: 1; white-space: nowrap; overflow: hidden; animation: none;
  -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent);
}
.ans-actions { display: flex; justify-content: flex-end; margin-top: 6px; animation: rise 260ms ease-out; }
.ans-change { height: 32px; padding: 0 10px; border: 0; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; background: transparent; color: var(--accent); }
.entry { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-left: 12px; animation: rise 320ms ease-out; border-left: 2px solid var(--btnborder); }
.who { font-size: 12px; font-weight: 600; color: var(--muted); }
.said { font-size: 15px; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
button.entry { width: 100%; background: none; border: 0; border-left: 2px solid var(--btnborder); border-radius: 0; text-align: left; font: inherit; cursor: pointer; padding-top: 0; padding-bottom: 0; padding-right: 0; }
.ans.sent { cursor: default; animation: rise 200ms ease-out; }
.entry.full .said { display: block; -webkit-line-clamp: unset; }
.item-cmp { margin-top: 14px; }

/* ---- the type-and-dictate box ---- */
.cmp {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 8px 8px 14px; box-sizing: border-box; width: 100%;
  border-radius: 16px; background: var(--bg); border: 1px solid var(--accent); animation: cardin 220ms ease-out;
}
.cmp-text {
  display: block; width: 100%; min-height: 44px; margin: 0; padding: 0 6px 0 0; box-sizing: border-box; border: 0; outline: none; resize: none;
  background: transparent; color: var(--text); font-size: 16px; line-height: 1.4; overflow-y: auto;
}
.cmp-text::placeholder { color: var(--muted); }
.cmp-live { min-height: 44px; max-height: 168px; overflow-y: auto; padding-right: 6px; font-size: 16px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.cmp-live .tail { color: var(--muted); }
.cmp-row { display: flex; align-items: center; gap: 6px; height: 36px; }
.cmp-x, .cmp-mic, .cmp-send {
  flex: none; width: 34px; height: 34px; padding: 0; box-sizing: border-box; border-radius: 17px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.cmp-x { border: 1px solid var(--btnborder); background: transparent; color: var(--muted); }
.cmp-mic { border: 1px solid var(--btnborder); background: transparent; color: var(--muted); }
.cmp-send { border: 0; background: var(--accent); color: var(--on); transition: opacity 200ms ease; }
.cmp-send:disabled { opacity: .35; cursor: default; }
.cmp-send.busy { animation: pulse 900ms ease-in-out infinite; }
.cmp-kb {
  flex: none; width: 34px; height: 34px; padding: 0; box-sizing: border-box; border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; border: 1px solid var(--btnborder); background: transparent; color: var(--muted);
}
.cmp-wave { flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; overflow: hidden; padding: 0 4px; }
.cmp-wave span { flex: none; width: 3px; border-radius: 2px; background: var(--dot); transition: height 80ms linear; }
.cmp-wave.on span { background: var(--accent); }

/* ---- lists ---- */
.list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px var(--sb); display: flex; flex-direction: column; animation: cardin 260ms ease-out; }
.list > * { flex: none; }
.list-all { padding-top: 4px; animation: none; }
/* Dragging a card's title down: the list behind fades in and grows (--pull, 0 to 1; app.tsx). */
.app { --pull: 0; }
.list, .all-top { transform-origin: 50% 0; transition: opacity 320ms ease, transform 380ms var(--ease); }
.app.pull-live .list, .app.pull-live .all-top { opacity: var(--pull); transform: scale(calc(.92 + .08 * var(--pull))); transition: none; }
.app.pull-back .list, .app.pull-back .all-top { opacity: 0; transform: scale(.92); }
.app.pull-live .bars-row { opacity: calc(1 - var(--pull)); }
.list.behind { position: absolute; left: 0; right: 0; top: calc(var(--st) + 49px); bottom: 0; z-index: 0; }
/* A list first drawn behind a dragged card never plays its own fade-in: lifting the drag would replay it (a flicker). */
.list.no-in { animation: none; }
/* The row a card shrinks back into bumps as it lands (LAND_MS, app.tsx). */
.land { animation: land 260ms var(--ease); }
@keyframes land { 0%, 100% { transform: scale(1) } 45% { transform: scale(1.035) } }
.row-wrap { margin-bottom: 8px; }
.row {
  width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 13px 12px 13px 14px; box-sizing: border-box; border-radius: 16px;
  text-align: left; cursor: pointer; background: var(--q); border: 1px solid var(--qborder); color: inherit;
}
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-size: 16px; line-height: 1.3; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.row-line { font-size: 13px; line-height: 1.4; color: var(--muted); }
.row-line.clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.row-ws { display: inline-flex; vertical-align: -2px; margin-right: 5px; }
.row-count { font-size: 13px; font-weight: 600; color: var(--accent); }
.row-time { flex: none; margin-top: 2px; font-size: 13px; color: var(--muted); }
.row-chev { flex: none; display: inline-flex; margin-top: 1px; color: var(--muted); }
.row-icon { flex: none; display: inline-flex; margin-top: 1px; }
.row-icon.accent { color: var(--accent); }
.row-icon.muted { color: var(--muted); }
.step-line { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.35; min-width: 0; }
.small-dot { flex: none; width: 7px; height: 7px; border-radius: 4px; animation: livepulse 1.4s ease-in-out infinite; background: var(--accent); }
.row-step { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: rise 360ms ease-out; color: var(--text); }
.big-dot { display: block; width: 10px; height: 10px; border-radius: 5px; margin: 5px; animation: livepulse 1.4s ease-in-out infinite; background: var(--accent); }
.nothing { padding: 48px 0; text-align: center; font-size: 15px; animation: cardin 300ms ease-out; color: var(--muted); }
.info-wrap { margin-bottom: 12px; }
/* An update as a page of its own in Updates' card view: its head is the drag handle, like a card's title. */
.upd-page .ihead { touch-action: none; cursor: grab; }
.upd-page .info-wrap { margin-bottom: 0; }
.info { display: flex; flex-direction: column; padding: 16px; box-sizing: border-box; border-radius: 20px; background: var(--q); border: 1px solid var(--qborder); box-shadow: 0 6px 14px -8px var(--soft); }
.info-title { flex: 1; margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--text); }
.info-body { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.later-box { display: flex; align-items: center; gap: 8px; padding-right: 10px; border-radius: 16px; background: var(--q); border: 1px solid var(--qborder); }
.later-open {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 13px 4px 13px 14px; border: 0; background: transparent;
  text-align: left; cursor: pointer; color: inherit;
}
.wake-btn {
  flex: none; height: 32px; padding: 0 12px; border-radius: 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
}
.all-top { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 6px 0 8px; animation: cardin 260ms ease-out; }
.search { position: relative; margin: 0 12px; }
.search-icon { position: absolute; left: 13px; top: 11px; display: inline-flex; color: var(--muted); pointer-events: none; }
.search input {
  width: 100%; height: 40px; box-sizing: border-box; padding: 0 14px 0 38px; border-radius: 12px; font-size: 16px; outline: none;
  background: var(--q); color: var(--text); border: 1px solid var(--qborder);
}
.search input::placeholder { color: var(--muted); }
.filters { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 2px; }
.filter {
  flex: none; height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; box-sizing: border-box; border-radius: 16px;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background 220ms ease, color 220ms ease;
  background: transparent; color: var(--text); border: 1px solid var(--btnborder);
}
.filter.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.filter-n { opacity: .7; font-weight: 500; }

/* ---- a card opened from a row ---- */
.oc-back { position: absolute; left: 0; right: 0; top: calc(var(--st) + 49px); bottom: 0; z-index: 59; transition: opacity 320ms ease; background: var(--bg); }
.oc-wrap { position: absolute; z-index: 60; overflow: hidden; box-sizing: border-box; transform-origin: 50% 0; background: var(--surf); border: 1px solid var(--border); }
.oc-inner { position: absolute; top: 0; left: 0; box-sizing: border-box; display: flex; flex-direction: column; }
.oc-inner > .card { border: 0; border-radius: 0; background: transparent; }

/* ---- the workspace menu, the general note ---- */
.ws-back { position: absolute; inset: 0; z-index: 70; }
.ws-menu, .note-panel {
  position: absolute; left: 12px; top: calc(var(--st) + 52px); z-index: 71; width: 250px; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; box-sizing: border-box; border-radius: 16px; transform-origin: 20px 0; transition: opacity 200ms ease, transform 260ms var(--ease);
  background: var(--surf); border: 1px solid var(--border); box-shadow: 0 14px 34px var(--soft);
  opacity: 0; transform: scale(0.92) translateY(-6px); pointer-events: none;
}
.ws-menu.on, .note-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.note-panel { right: 12px; width: auto; padding: 12px; gap: 10px; }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 15px; font-weight: 600; color: var(--muted); }
.ws-row {
  height: 44px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 8px; border: 0; border-radius: 10px; font-size: 16px;
  font-weight: 600; text-align: left; cursor: pointer; color: var(--text); background: transparent;
}
.ws-row.on { background: var(--bg); }
.ws-icon { flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text); }
.ws-icon.on { background: var(--accent); color: var(--on); }
.ws-count { font-size: 14px; font-weight: 600; color: var(--muted); }
.ws-sep { height: 1px; flex: none; margin: 4px 6px; background: var(--border); }
.alerts { padding: 2px 8px 8px 46px; }
.alerts-row { display: flex; gap: 8px; flex-wrap: wrap; }
.small-btn { height: 34px; font-size: 14px; }

/* ---- sheets: details, the card menu ---- */
.sheet-back { position: absolute; inset: 0; z-index: 80; transition: opacity 300ms ease; background: var(--sheetback); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 81; max-height: 80%; display: flex; flex-direction: column; box-sizing: border-box;
  border-radius: 28px 28px 0 0; background: var(--surf); border-top: 1px solid var(--border); box-shadow: 0 -10px 30px var(--soft);
  transition: transform 380ms var(--ease);
}
.grab { flex: none; height: 26px; border: 0; padding: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.grab span { display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--line); }
.sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 22px 4px; }
.sheet-title { margin: 0 0 12px; font-size: 21px; line-height: 1.3; font-weight: 700; color: var(--text); }
.sheet-body { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.sheet-md { font-size: 16px; line-height: 1.5; color: var(--text); }
.sheet-md .md-p, .sheet-md .md-list, .sheet-md .md-code { margin: 0 0 12px; }
.sheet-opts { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 14px 22px var(--sb); border-top: 1px solid var(--border); }
.menu-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 16px var(--sb); overflow-y: auto; }
.menu-list .sheet-title { margin: 0 6px 8px; }
.menu-list .label { margin-left: 10px; }
.menu-row {
  height: 48px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent;
  font-size: 16px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left;
}
.menu-row svg { color: var(--muted); }
.menu-row:active { background: var(--bg); }

.toast {
  position: absolute; left: 50%; bottom: calc(var(--sb) + 12px); transform: translateX(-50%); z-index: 95; width: max-content; max-width: calc(100% - 48px);
  padding: 10px 16px; box-sizing: border-box; border-radius: 14px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 600;
  line-height: 1.35; box-shadow: 0 10px 30px var(--soft); animation: fadein 220ms ease-out;
}

/* ---- sign-in ---- */
.signin { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; background: var(--bg); overflow-y: auto; }
.signin-in { width: 100%; max-width: 354px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.signin-icon { align-self: center; width: 60px; height: 60px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on); }
.signin h1 { margin: 2px 0 0; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.signin .muted { margin: 0 0 6px; font-size: 16px; line-height: 1.45; color: var(--muted); }
.signin .small { margin: 0; }
.btn {
  height: 48px; padding: 0 18px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 16px; font-weight: 600; cursor: pointer; box-sizing: border-box; border: 1px solid transparent;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on); }
.btn.secondary { background: transparent; border-color: var(--btnborder); color: var(--text); }
.btn:disabled { opacity: .5; cursor: default; }
.code-form { display: flex; flex-direction: column; gap: 10px; }
.or { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.field-label { font-size: 13px; font-weight: 600; color: var(--muted); text-align: left; margin: 0 2px; }
.field {
  width: 100%; height: 48px; padding: 0 14px; box-sizing: border-box; border-radius: 12px; font-size: 17px; letter-spacing: .04em; outline: none;
  background: var(--q); color: var(--text); border: 1px solid var(--qborder);
}
.field:focus { border-color: var(--accent); }
.error { margin: 0; font-size: 14px; line-height: 1.4; color: var(--error); }

/* pictures on cards */
.md-img { display: block; width: 100%; margin: 4px 0 10px; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); cursor: zoom-in; }
.md-img img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.md-img-mock { display: flex; align-items: center; justify-content: center; height: 160px; color: var(--muted); font-size: 14px; font-weight: 600; background: repeating-linear-gradient(135deg, var(--bg) 0 12px, var(--surf) 12px 24px); }
.viewer { position: absolute; inset: 0; z-index: 96; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: rgba(0,0,0,0.88); animation: fadein 200ms ease-out; cursor: zoom-out; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.viewer-mock { width: 100%; height: 50%; border-radius: 12px; }
.menu-label { margin: 4px 10px 6px; }