/* OmniOrca: shared visual language. White canvas, black ink, hairlines, one accent, floating tools, no side bars. */
:root {
  --bg: #fcfcfb;
  --paper: #ffffff;
  --ink: #0b0b0c;
  --ink2: rgba(11, 11, 12, .62);
  --ink3: rgba(11, 11, 12, .40);
  --line: rgba(11, 11, 12, .08);
  --line2: rgba(11, 11, 12, .14);
  --wash: rgba(11, 11, 12, .04);
  --accent: #0a84ff;
  --ok: #0b0b0c;
  --warm: #f0603c;
  --r: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.08);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.05), 0 24px 64px rgba(0,0,0,.14);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.2, 1.3, .4, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body { overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
[hidden] { display: none !important; }
.muted { color: var(--ink2); }
.small { font-size: 12px; }
.grow { flex: 1; }
code { font: 11.5px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--ink2); }

/* marks and faces */
.mark { display: inline-flex; }
.wordmark { font: 600 15px/1 var(--display); letter-spacing: -.01em; }
.face { display: inline-flex; flex: none; border-radius: 50%; }
.face svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.12)); }
.ic { display: inline-flex; }

/* floating surfaces */
.float, .floatbar {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--r);
}
.floatbar { display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 16px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 11px; font-weight: 550; letter-spacing: -.005em; transition: transform .15s var(--ease), background .2s, color .2s, opacity .2s; white-space: nowrap; user-select: none; }
.btn:active { transform: scale(.97); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #26262a; }
.btn-dark:disabled { background: var(--wash); color: var(--ink3); cursor: default; transform: none; }
.btn-soft { background: transparent; color: var(--ink); }
.btn-soft:hover { background: var(--wash); }
.btn-ghost { color: var(--ink2); }
.btn-ghost:hover { color: var(--ink); background: var(--wash); }
.btn-lg { height: 50px; border-radius: 14px; font-size: 16px; padding: 0 22px; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ink2); transition: background .2s, color .2s; }
.icon-btn:hover { background: var(--wash); color: var(--ink); }
.linklike { color: var(--ink2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink2); background: var(--wash); border-radius: 999px; padding: 2px 9px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-voice { color: var(--ink); }
.chip-voice .ic svg { width: 13px; height: 13px; }

/* ---------- the viewer ---------- */
.ov { position: absolute; inset: 0; }
.ov-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ov-media { position: relative; border-radius: 10px; box-shadow: var(--shadow-lg); background: #eee; cursor: crosshair; flex: none; }
.ov-media img, .ov-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; user-select: none; -webkit-user-drag: none; }
.pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; width: 28px; height: 28px; margin: -28px 0 0 -2px; border-radius: 14px 14px 14px 3px; background: var(--c, var(--ink)); color: #fff; font: 600 12px/28px var(--font); text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 0 0 2px #fff; pointer-events: auto; transform-origin: 2px 28px; animation: pop .38s var(--spring); transition: opacity .2s, transform .2s var(--ease); }
.pin:hover { transform: scale(1.12); }
.pin.draft { background: var(--ink); animation: pop .38s var(--spring), pulse 1.6s ease-in-out infinite; }
.pin.hidden { opacity: 0; transform: scale(.4); pointer-events: none; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@keyframes pulse { 50% { box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 0 0 2px #fff, 0 0 0 9px rgba(11,11,12,.12); } }
.gstack { position: absolute; top: 10px; right: 10px; z-index: 2; }
.gstack-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 12px; box-shadow: var(--shadow); }
.faces { display: inline-flex; }
.faces .face + .face { margin-left: -6px; }

/* video controls */
.vc { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 4px; border-radius: 12px; background: rgba(12,12,14,.55); backdrop-filter: blur(14px); color: #fff; cursor: default; }
.vc .icon-btn { color: #fff; width: 32px; height: 32px; }
.vc .icon-btn:hover { background: rgba(255,255,255,.14); }
.vc-track { position: relative; flex: 1; height: 22px; cursor: pointer; }
.vc-track::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.28); }
.vc-fill { position: absolute; left: 0; top: 9px; height: 4px; border-radius: 2px; background: #fff; }
.vc-mark { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff; }
.vc-time { font: 500 11.5px/1 var(--font); font-variant-numeric: tabular-nums; opacity: .9; white-space: nowrap; }

/* landing page in the app (decision 9): device switch, note or browse, the live page */
.pg-tools { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 3; }
.seg { display: flex; gap: 2px; }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 10px; color: var(--ink2); font-size: 13px; font-weight: 500; transition: background .2s, color .2s; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--ink); color: #fff; }
.sep { width: 1px; height: 20px; background: var(--line2); margin: 0 4px; }
.pg-stage { position: absolute; left: 50%; transform: translateX(-50%); transition: width .45s var(--ease), height .45s var(--ease); }
.pg-device { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.pg-device[data-device="phone"] { border-radius: 44px; box-shadow: var(--shadow-lg), 0 0 0 10px #0b0b0c, 0 0 0 11px #2a2a2e; }
.pg-device[data-device="tablet"] { border-radius: 26px; box-shadow: var(--shadow-lg), 0 0 0 12px #0b0b0c; }
.pg-device iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.pg-gstack { top: 70px; right: 24px; }

/* copy */
.ov-copy-center { overflow: auto; }
.copy-card { position: relative; width: min(640px, 100%); background: var(--paper); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 14px; margin: auto; }
.cf { position: relative; padding: 16px 52px 16px 18px; border-radius: 12px; cursor: text; transition: background .2s; }
.cf + .cf { margin-top: 2px; }
.cf:hover, .cf.drafting { background: var(--wash); }
.cf-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin-bottom: 6px; font-weight: 600; }
.cf-text { font-size: 17px; line-height: 1.5; }
.cf-headline .cf-text { font: 650 24px/1.2 var(--display); letter-spacing: -.015em; }
.cf-description .cf-text { font-size: 15px; color: var(--ink2); }
.cf-text mark { background: color-mix(in srgb, var(--c) 22%, transparent); color: inherit; border-radius: 3px; box-shadow: 0 2px 0 var(--c); }
.cf-marks { position: absolute; right: 12px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
.cf-mark { width: 26px; height: 26px; border-radius: 13px 13px 13px 3px; background: var(--c); color: #fff; font: 600 12px/26px var(--font); box-shadow: 0 3px 10px rgba(0,0,0,.18); animation: pop .38s var(--spring); }
.copy-gstack { position: static; padding: 8px 18px 4px; }
.sel-pill { position: absolute; z-index: 6; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; font-weight: 550; background: var(--ink); color: #fff; border: 0; animation: pop .3s var(--spring); }

/* composer */
.composer { position: absolute; z-index: 20; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-lg); animation: rise .28s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.composer.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.cmp-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; min-width: 0; }
.cmp-head .chip { margin-left: auto; flex-shrink: 1; }
.cmp-quote { font-size: 13px; color: var(--ink2); border-left: 2px solid var(--line2); padding-left: 8px; margin: 0 0 8px; }
.composer textarea { width: 100%; resize: none; border: 0; outline: 0; background: var(--wash); border-radius: 10px; padding: 10px 12px; font: 15px/1.4 var(--font); color: var(--ink); }
.composer textarea::placeholder { color: var(--ink3); }
.cmp-repl { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--ink2); }
.cmp-repl input { flex: 1; border: 1px solid var(--line2); border-radius: 9px; padding: 7px 10px; font: 14px var(--font); outline: 0; }
.cmp-repl input:focus { border-color: var(--ink); }
.cmp-chips:not(:empty) { margin-top: 8px; }
.cmp-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.cmp-row .btn { height: 34px; }
.cmp-status { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.cmp-meter { width: 60px; height: 14px; display: none; }
.recording .cmp-meter { display: block; }
.mic-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--wash); transition: background .2s, color .2s, transform .2s; }
.mic-btn:hover { background: var(--line2); }
.mic-btn.on { background: var(--warm); color: #fff; animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); } }
.docked { left: 8px !important; right: 8px !important; bottom: 8px !important; top: auto !important; width: auto !important; position: absolute; }

/* note card */
.ncard { position: absolute; z-index: 19; padding: 6px; border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: var(--shadow-lg); animation: rise .22s var(--ease); max-height: 60%; overflow: auto; }
.ncard-row { padding: 8px; }
.ncard-row + .ncard-row { border-top: 1px solid var(--line); }
.ncard-head { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.ncard-head .muted { font-size: 12px; }
.ncard-del { margin-left: auto; width: 26px; height: 26px; }
.ncard-text { margin: 6px 0 4px; font-size: 14.5px; line-height: 1.45; }
.ncard-anchor { font-size: 12px; color: var(--ink3); margin-top: 4px; }
.audio-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; padding: 5px 11px 5px 7px; background: var(--wash); border-radius: 999px; }
.audio-chip .ic svg { width: 14px; height: 14px; }
.audio-chip.playing { background: var(--ink); color: #fff; }

/* the answer bar */
.dbar { gap: 2px; }
.dbar .btn { height: 40px; }
.db-approve { min-width: 116px; margin-left: 4px; }
.db-approve.is-approved { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.db-info { font-size: 13px; color: var(--ink2); padding: 0 10px 0 8px; white-space: nowrap; }
.dbar.readonly .db-info { padding: 0 12px; }

/* finish */
.finish { height: 44px; padding: 0 16px; border-radius: 14px; background: rgba(255,255,255,.9); backdrop-filter: blur(16px); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); font-weight: 550; }
.finish .left-n { font-variant-numeric: tabular-nums; font-weight: 700; }
.finish.ready { background: var(--ink); color: #fff; border-color: var(--ink); animation: ready .5s var(--spring); }
@keyframes ready { from { transform: scale(.9); } }

/* sign-in */
.signin { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.signin.out { opacity: 0; transform: scale(1.04); pointer-events: none; }
.si-top { position: absolute; top: 22px; left: 24px; display: flex; align-items: center; gap: 8px; }
.si-card { width: min(380px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; }
.si-glyph { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: var(--paper); box-shadow: var(--shadow); margin-bottom: 22px; color: var(--ink); }
.si-card h1 { font: 650 24px/1.2 var(--display); letter-spacing: -.02em; margin: 0 0 6px; }
.si-card > p { margin: 0 0 22px; }
.si-who { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); margin-bottom: 14px; }
.si-who .muted { font-size: 13px; }
.si-go { width: 100%; margin-bottom: 14px; }
.si-go .faceid.mini svg { width: 22px; height: 22px; }
.si-foot { position: absolute; bottom: 22px; font-size: 12px; }
.faceid .fi-ok { opacity: 0; stroke-dasharray: 40; stroke-dashoffset: 40; transition: all .35s var(--ease); }
.faceid .fi-face { transition: opacity .2s; }
.scanning .si-glyph { animation: scan 0.65s ease-in-out; }
@keyframes scan { 50% { transform: scale(.92); } }
.ok .si-glyph .fi-face { opacity: 0; }
.ok .si-glyph .fi-ok { opacity: 1; stroke-dashoffset: 0; }
.ok .si-glyph { color: #fff; background: var(--ink); transition: all .3s; }

/* presence */
.presence { display: flex; align-items: center; }
.pr { position: relative; margin-left: -6px; transition: transform .2s var(--ease); }
.pr:first-child { margin-left: 0; }
.pr:hover { transform: translateY(-2px); z-index: 2; }
.pr .face { box-shadow: 0 0 0 2px var(--bg); }
.pr-tip { position: absolute; top: calc(100% + 8px); right: -8px; white-space: nowrap; background: var(--ink); color: #fff; font-size: 12px; padding: 7px 10px; border-radius: 10px; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: all .18s var(--ease); display: flex; flex-direction: column; z-index: 50; }
.pr-tip em { font-style: normal; color: rgba(255,255,255,.55); font-size: 11px; }
.pr:hover .pr-tip, .pr:focus .pr-tip { opacity: 1; transform: none; }
.cursors { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.cursor { position: absolute; left: 0; top: 0; transition: transform 2.4s cubic-bezier(.45, .05, .25, 1); will-change: transform; }
.cursor:not(.sim) { transition: transform .08s linear; }
.cursor-glow { position: absolute; left: -26px; top: -26px; width: 72px; height: 64px; border-radius: 46% 54% 50% 50% / 55% 48% 52% 45%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 26%, transparent), transparent); animation: blob 6s ease-in-out infinite; }
@keyframes blob { 50% { border-radius: 55% 45% 42% 58% / 48% 56% 44% 52%; transform: rotate(14deg) scale(1.06); } }
.cursor-arrow { position: absolute; left: -3px; top: -2px; }
.cursor-tag { position: absolute; left: 16px; top: 18px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; background: var(--c); color: #fff; font-size: 11.5px; font-weight: 600; padding: 3px 9px 3px 3px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.14); }
.cursor-tag .face { box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); border-radius: 50%; }

/* activity */
.act { position: relative; }
.act-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-height: min(460px, 70vh); overflow: auto; padding: 8px; z-index: 40; animation: rise .22s var(--ease); background: rgba(255,255,255,.97); }
.act-title { font-weight: 650; padding: 6px 8px 2px; }
.act-day { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); padding: 10px 8px 4px; font-weight: 600; }
.act-row { display: flex; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 13px; }
.act-row:hover { background: var(--wash); }
.act-mark { display: inline-flex; flex: none; }

/* toast */
.toast { position: fixed; left: 50%; top: 18px; transform: translate(-50%, -16px); opacity: 0; z-index: 90; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 500; box-shadow: var(--shadow-lg); transition: all .35s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.in { opacity: 1; transform: translate(-50%, 0); }

/* sheets (David's view, the team's side) */
.sheet-wrap { position: fixed; inset: 0; z-index: 80; background: rgba(250,250,249,.55); backdrop-filter: blur(10px); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; opacity: 0; transition: opacity .3s var(--ease); overflow: auto; }
.sheet-wrap.in { opacity: 1; }
.sheet { width: min(760px, 100%); background: var(--paper); border-radius: 22px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 22px 24px 26px; transform: translateY(14px) scale(.985); transition: transform .4s var(--ease); }
.sheet-wrap.wide .sheet { width: min(980px, 100%); }
.sheet-wrap.in .sheet { transform: none; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sheet-head h2 { font: 650 22px/1.2 var(--display); letter-spacing: -.02em; margin: 0 0 4px; }
.label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); font-weight: 600; margin: 18px 0 8px; }
.brand-list { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.brand-row { display: grid; grid-template-columns: 1.3fr 1fr auto auto; gap: 16px; align-items: center; padding: 14px 16px; }
.brand-row + .brand-row { border-top: 1px solid var(--line); }
.brand-row.live { background: linear-gradient(90deg, var(--wash), transparent); }
.br-name { font-weight: 650; }
.br-bar { display: flex; flex-direction: column; gap: 4px; }
.bar { height: 5px; border-radius: 3px; background: var(--wash); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; transition: width .6s var(--ease); }
.pill { font-size: 12px; font-weight: 550; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: var(--wash); }
.pill-you { background: var(--ink); color: #fff; }
.pill-client { background: #e9f1ff; color: #1b4fb8; }
.pill-team { background: #fff1e9; color: #a2441f; }
.switch-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 4px 0; cursor: pointer; }
.switch { position: relative; flex: none; width: 44px; height: 26px; margin-top: 2px; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 13px; background: var(--line2); transition: background .25s; pointer-events: none; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--spring); }
.switch input:checked + i { background: var(--ink); }
.switch input:checked + i::after { transform: translateX(18px); }
.slack { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: 15px/1.45 "Lato", -apple-system, system-ui, sans-serif; background: #fff; }
.slack-av { flex: none; width: 36px; height: 36px; border-radius: 8px; background: #fff; display: grid; place-items: center; border: 1px solid var(--line); }
.slack-head { display: flex; gap: 6px; align-items: baseline; font-size: 15px; }
.slack-head .muted { font-size: 12px; }
.slack-app { font-size: 10px; font-weight: 700; background: var(--wash); color: var(--ink2); padding: 1px 4px; border-radius: 3px; }
.slack-at { background: #e8f5fa; color: #1264a3; border-radius: 3px; padding: 0 2px; }
.slack-btn { display: inline-flex; margin-top: 8px; border: 1px solid var(--line2); border-radius: 6px; padding: 5px 12px; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; }
.team-route { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.route-step { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 10px 12px; border-radius: 12px; background: var(--wash); }
.route-n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.team-meta { margin-bottom: 10px; }
.team-group h3 { font: 650 15px/1.2 var(--display); margin: 22px 0 10px; }
.team-item { display: flex; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; }
.ti-thumb { position: relative; flex: none; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: var(--wash); }
.ti-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ti-thumb.copy { font: 600 11px/1.25 var(--display); padding: 8px; display: flex; align-items: center; }
.ti-pin { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff; }
.ti-body { min-width: 0; flex: 1; }
.ti-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.ti-note { display: flex; gap: 8px; padding: 6px 0; font-size: 13.5px; }
.ti-note .muted { word-break: break-word; }
.ti-note .chip { margin-left: 6px; }
.raw { margin-top: 16px; }
.raw summary { cursor: pointer; color: var(--ink2); font-size: 13px; }
.raw pre { white-space: pre-wrap; font: 12px/1.55 ui-monospace, Menlo, Consolas, monospace; background: #0b0b0c; color: #e8e8e6; padding: 16px; border-radius: 14px; margin-top: 10px; }
.recipes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.recipe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 12.5px; }
.recipe b { width: 46px; }
.recipe.ready { border-color: var(--ink); }
.ing { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 999px; background: var(--wash); color: var(--ink2); }
.ing.ok { background: var(--ink); color: #fff; }
.ing .ic svg { width: 12px; height: 12px; }
.rec-state { margin-left: auto; color: var(--ink2); font-size: 12px; }
.recipe.ready .rec-state { color: var(--ink); font-weight: 600; }
.team-empty { padding: 12px 4px; }
.team-empty h3 { margin: 0 0 6px; }
.sendoffs { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sendoff { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 14px; font-size: 13px; }
.sendoff + .sendoff { border-top: 1px solid var(--line); }

/* forms in the sheets: a field is its label over its input, a row of them sits on one line */
.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 150px; }
.fld-l { font-size: 12px; font-weight: 550; color: var(--ink2); }
.fld-h { font-size: 11.5px; color: var(--ink3); }
.fld input, .fld select, .role-sel { height: 36px; min-width: 0; width: 100%; border: 1px solid var(--line2); border-radius: 10px; padding: 0 11px; font: 14px var(--font); color: var(--ink); background: var(--paper); outline: 0; transition: border-color .15s, box-shadow .15s; }
.fld select, .role-sel { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M2 5.5l3-3 3 3M2 8.5l3 3 3-3' fill='none' stroke='%2366666b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center; }
.fld input:focus, .fld select:focus, .role-sel:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--wash); }
.fld input::placeholder { color: var(--ink3); }
.form-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
/* the button lines up with the inputs, not with the hints under them */
.form-row > .btn { margin-top: 22px; flex: none; height: 36px; }
.inline-form { margin-top: 14px; }
.inline-form .label { margin-top: 6px; }
.form-err { margin: 8px 0 0; font-size: 13px; color: #c4320a; }
.form-err:empty { display: none; }
.si-err { margin: 0; min-height: 18px; font-size: 13px; color: #c4320a; }

/* David's brand: who's in it, the link he just made, what went wrong */
.back-link { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 8px 0 2px; margin: -6px 0 4px -4px; border-radius: 8px; font-size: 13px; color: var(--ink2); }
.back-link:hover { color: var(--ink); background: var(--wash); }
.back-link .ic svg { width: 16px; height: 16px; }
.people-list { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.person-row + .person-row { border-top: 1px solid var(--line); }
.person-row.invited { background: linear-gradient(90deg, var(--wash), transparent 70%); }
.person-row .pr-main { flex: 1; min-width: 0; }
.person-row .pr-main .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-status { flex: none; }
.pr-actions { flex: none; display: flex; align-items: center; gap: 2px; }
.pr-actions .btn { height: 32px; padding: 0 11px; font-size: 13px; }
.pr-actions .role-sel { width: auto; height: 32px; font-size: 13px; margin-right: 4px; }
.invite-link:not(:empty) { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--wash); animation: rise .22s var(--ease); }
.il-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.il-row { display: flex; gap: 8px; }
.il-row input { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--line2); border-radius: 10px; padding: 0 11px; font: 13px ui-monospace, Menlo, Consolas, monospace; color: var(--ink); background: var(--paper); outline: 0; }
.il-row .btn { height: 36px; }
.invite-link p { margin: 8px 0 0; }
.problems { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.problem { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff3ef; color: #a2441f; font-size: 13px; }
.problem .ic svg { width: 14px; height: 14px; }
.br-problem { color: #a2441f; }
.slack-pick .fld { max-width: 360px; }
.danger { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.danger .btn { color: #c4320a; }
.act-more { display: block; width: 100%; padding: 8px; border-radius: 10px; font-size: 13px; color: var(--accent); }
.act-more:hover { background: var(--wash); }
.act-more:disabled { color: var(--ink3); cursor: default; }

/* your devices: one row per passkey */
.dev-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--wash); color: var(--ink2); }
.dev-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

@media (max-width: 640px) {
  .brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .brand-row .br-main { flex: 1 1 100%; }
  .brand-row .br-bar { display: none; }
  .brand-row .pill { white-space: normal; }
  .brand-row .btn { margin-left: auto; height: 34px; }
  .team-route { grid-template-columns: 1fr 1fr; }
  .recipes { grid-template-columns: 1fr; }
  .sheet { padding: 18px 16px 22px; border-radius: 20px; }
  .act-pop { position: fixed; left: 10px; right: 10px; top: 64px; width: auto; }
  .person-row { flex-wrap: wrap; }
  .person-row .pr-main { flex-basis: calc(100% - 44px); }
  .pr-status { margin-left: 40px; }
  .pr-actions { margin-left: auto; }
  .form-row > .btn { margin-top: 0; width: 100%; }
  .docked { position: fixed; bottom: calc(8px + env(safe-area-inset-bottom) + var(--kb, 0px)) !important; z-index: 95; }
  .ncard.docked { max-height: 50vh; }
  .sheet-up .bottom, .sheet-up .dock, .sheet-up #center, .sheet-up .hint { visibility: hidden; }
  .pg-tools { top: 58px; }
  .pg-tools .seg button > span:not(.ic) { display: none; }
  .pg-tools .seg button { padding: 0 10px; }
  .pg-gstack { top: 104px; right: 12px; }
  .toast { left: 10px; right: 10px; top: calc(8px + env(safe-area-inset-top)); max-width: none; text-align: center; transform: translateY(-16px); }
  .toast.in { transform: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }