/* Parcelona's look, from ios/Parcelona/Theme.swift:
   black ground, white ink, Helvetica Neue, a 20 pt gutter, radii 8/12/16,
   raised gray only for things you touch, one white button at the bottom. */
:root {
  --ground: #000;
  --ink: #fff;
  --gray: #b8b8b8;
  --dim: #8a8a8a;
  --raised: #1c1c1c;
  --hover: #111;
  --line: #1f1f1f;
  --cursor: #262626;
  --thumb: #2a2a2a;
  --hairline: #3a3a3a;
  --danger: #ff5f57;
  --gutter: 20px;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* SwiftUI's .smooth and .snappy, near enough */
  --smooth: cubic-bezier(.32, .72, 0, 1);
  --snappy: cubic-bezier(.2, .9, .25, 1.05);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); }
body {
  font: 400 17px/1.3 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
button, input, textarea { font: inherit; color: inherit; margin: 0; }
button { border: 0; background: none; padding: 0; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* Pressable: everything you tap gives a little. */
.press { transition: transform .15s var(--snappy), opacity .2s, background-color .2s, color .2s; }
.press:active:not(:disabled) { transform: scale(.97); }

/* ---------- Pages ---------- */
#app { position: fixed; inset: 0; overflow: hidden; }
.page { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ground); will-change: transform; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.wrap { max-width: 560px; margin: 0 auto; padding: 0 var(--gutter); }

/* Push and pop, like a navigation stack. */
.page::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.page.in-push  { animation: in-push .42s var(--smooth) both; z-index: 2; }
.page.out-push { animation: out-push .42s var(--smooth) both; z-index: 1; }
.page.out-push::after { animation: shade-in .42s var(--smooth) both; }
.page.in-pop   { animation: in-pop .38s var(--smooth) both; z-index: 1; }
.page.in-pop::after { animation: shade-out .38s var(--smooth) both; }
.page.out-pop  { animation: out-pop .38s var(--smooth) both; z-index: 2; }
.page.fade-in  { animation: fade .3s ease-out both; }
@keyframes in-push  { from { transform: translateX(100%); } }
@keyframes out-push { to { transform: translateX(-28%); } }
@keyframes in-pop   { from { transform: translateX(-28%); } }
@keyframes out-pop  { to { transform: translateX(100%); } }
@keyframes shade-in { to { opacity: .6; } }
@keyframes shade-out { from { opacity: .6; } to { opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Top bars ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: var(--safe-t) var(--gutter) 0; box-sizing: content-box; max-width: 560px; margin: 0 auto; width: calc(100% - 2 * var(--gutter)); }
.circle { width: 32px; height: 32px; border-radius: 50%; background: var(--raised); display: grid; place-items: center; position: relative; }
.circle::before { content: ""; position: absolute; inset: -6px; } /* 44 pt target */
.circle svg { width: 14px; height: 14px; }
.topbar-mid { font: 500 13px var(--sans); color: var(--gray); display: flex; align-items: center; gap: 8px; }

/* ---------- Home header ---------- */
.home-head { padding: calc(var(--safe-t) + 16px) 0 20px; display: flex; justify-content: space-between; align-items: flex-start; }
.logo { display: flex; align-items: baseline; gap: 8px; }
.logo svg { width: 20px; height: 21.5px; align-self: center; transform: translateY(-1px); }
.logo span { font: 700 30px/1 var(--sans); letter-spacing: -0.9px; }
.stats { display: flex; gap: 28px; margin-top: 16px; transition: opacity .3s; }
.stat-v { font: 700 20px/1.15 var(--sans); letter-spacing: -0.5px; display: block; height: 23px; overflow: hidden; position: relative; }
.stat-l { font: 400 13px var(--sans); color: var(--gray); margin-top: 1px; display: block; }
.square { width: 38px; height: 38px; border-radius: 10px; background: var(--raised); display: grid; place-items: center; margin-top: -4px; }
.square svg { width: 16px; height: 16px; }

/* Rolling numbers, like .contentTransition(.numericText()) */
.roll { display: inline-block; position: relative; }
.roll > span { display: inline-block; }
.roll .r-in-up   { animation: r-in-up .32s var(--snappy) both; }
.roll .r-in-down { animation: r-in-down .32s var(--snappy) both; }
.roll .r-out-up, .roll .r-out-down { position: absolute; left: 0; top: 0; }
.roll .r-out-up   { animation: r-out-up .32s var(--snappy) both; }
.roll .r-out-down { animation: r-out-down .32s var(--snappy) both; }
@keyframes r-in-up   { from { transform: translateY(60%); opacity: 0; filter: blur(2px); } }
@keyframes r-in-down { from { transform: translateY(-60%); opacity: 0; filter: blur(2px); } }
@keyframes r-out-up   { to { transform: translateY(-60%); opacity: 0; filter: blur(2px); } }
@keyframes r-out-down { to { transform: translateY(60%); opacity: 0; filter: blur(2px); } }

/* ---------- List ---------- */
.section-t { font: 500 13px var(--sans); color: var(--dim); margin: 0 0 2px; }
/* Lined up with the photos below. A gap only when a section sits above it. */
#need:not([hidden]) ~ #counted .section-t { margin-top: 24px; }
.rows { margin: 0 -12px; }
.row { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 84px; padding: 12px; border-radius: 12px; text-align: left; margin: 2px 0; transition: background-color .12s ease-out; }
.row:active { background: var(--raised); }
.row.enter { animation: row-in .35s var(--smooth) both; }
@keyframes row-in { from { opacity: 0; transform: translateY(-8px); } }
.thumb { width: 60px; height: 60px; border-radius: 12px; background: var(--raised); flex: none; overflow: hidden; display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; animation: fade .2s ease-out; }
.thumb .tag { width: 11px; height: 12px; opacity: .25; }
.row-main { flex: 1; min-width: 0; }
.row-title { font: 500 15px/1.25 var(--sans); }
.row-sub { font: 400 13px/1.3 var(--sans); color: var(--gray); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub.bad { color: var(--ink); display: flex; align-items: center; gap: 6px; }
.trail { min-width: 34px; display: flex; justify-content: flex-end; align-items: center; }
.qty-t { font: 700 17px var(--sans); letter-spacing: -0.5px; }
.ask-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.err-mark { width: 14px; height: 14px; border-radius: 50%; background: var(--danger); color: #000; font: 700 10px/14px var(--sans); text-align: center; flex: none; }

/* The 3 × 3 dot matrix with a wave crossing it every 1.8 s. */
.dots { display: grid; grid-template-columns: repeat(3, 2.6px); gap: 1.8px; }
.dots i { width: 2.6px; height: 2.6px; border-radius: 50%; background: var(--ink); opacity: .16; animation: wave 1.8s linear infinite; }
@keyframes wave { 0%, 100% { opacity: .16; } 50% { opacity: 1; } }

/* Empty home */
.home { min-height: 100%; display: flex; flex-direction: column; }
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 0 48px; }
.stack { width: 248px; background: #0b0b0b; border: 1px solid var(--line); border-radius: 16px; -webkit-mask: linear-gradient(#000 35%, rgba(0,0,0,.15)); mask: linear-gradient(#000 35%, rgba(0,0,0,.15)); animation: rise .6s var(--smooth) .1s both; }
.stack-row { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 14px; position: relative; }
.stack-row + .stack-row::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: var(--line); }
.stack-ph { width: 40px; height: 40px; border-radius: 8px; background: var(--raised); display: grid; place-items: center; color: var(--dim); }
.stack-row:first-child .stack-ph { background: var(--hover); box-shadow: inset 0 0 0 1px var(--hairline); }
.stack-ph svg { width: 15px; height: 15px; }
.bar { height: 8px; border-radius: 4px; background: var(--raised); }
.bar.s { height: 6px; background: var(--hover); margin-top: 7px; }
.empty h2 { font: 700 22px var(--sans); letter-spacing: -0.5px; margin: 28px 0 0; animation: rise .6s var(--smooth) .18s both; }
.empty p { font: 400 15px/1.45 var(--sans); color: var(--gray); margin: 8px 0 0; max-width: 280px; animation: rise .6s var(--smooth) .24s both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

.glow { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.glow canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.glow canvas.bloom { filter: blur(3px); opacity: .5; mix-blend-mode: plus-lighter; image-rendering: auto; }

/* ---------- Dock ---------- */
.dock { position: relative; padding: 12px var(--gutter) calc(var(--safe-b) + 8px); background: var(--ground); z-index: 3; }
.dock::before { content: ""; position: absolute; left: 0; right: 0; top: -32px; height: 32px; background: linear-gradient(transparent, var(--ground)); pointer-events: none; }
.dock.clear { background: transparent; }
.dock.clear::before { display: none; }
.dock-in { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.primary { height: 52px; width: 100%; border-radius: 12px; background: var(--ink); color: var(--ground); font: 500 16px var(--sans); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; }
.primary svg { width: 15px; height: 15px; }
.primary:disabled { background: var(--raised); color: var(--dim); }
.quiet { height: 44px; width: 100%; font: 500 16px var(--sans); color: var(--gray); }
.small { height: 32px; padding: 0 12px; border-radius: 8px; background: var(--raised); font: 700 13px var(--sans); }

/* ---------- Item ---------- */
.title { font: 700 30px/1.1 var(--sans); letter-spacing: -0.9px; margin: 8px 0 0; }
.title .roll { min-width: 1ch; }
.hint { font: 400 15px/1.4 var(--sans); color: var(--gray); margin: 10px 0 0; display: flex; align-items: center; gap: 10px; min-height: 21px; }
.field-l { font: 500 13px var(--sans); color: var(--gray); margin: 28px 0 8px; display: block; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 28px; }
.tile { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--raised); transition: transform .15s var(--snappy); }
.tile:active { transform: scale(.97); }
.tile.enter { animation: tile-in .32s var(--smooth) both; }
.tile.leave { animation: tile-out .22s ease-in both; pointer-events: none; }
@keyframes tile-in { from { opacity: 0; transform: scale(.9); } }
@keyframes tile-out { to { opacity: 0; transform: scale(.9); } }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .idx { position: absolute; top: 8px; left: 8px; min-width: 20px; height: 20px; padding: 0 7px; border-radius: 10px; background: rgba(0,0,0,.72); font: 500 11px/20px var(--sans); text-align: center; }
.tile .veil { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; opacity: 0; transition: opacity .35s ease-out; pointer-events: none; }
.tile.busy .veil, .tile.failed .veil { opacity: 1; }
.tile.failed .veil { background: rgba(0,0,0,.6); pointer-events: auto; }
.ring { width: 24px; height: 24px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 2.4; }
.ring .bg { stroke: rgba(255,255,255,.22); }
.ring .fg { stroke: var(--ink); stroke-linecap: round; transition: stroke-dashoffset .25s ease-out; }
.tile .fail { display: none; flex-direction: column; align-items: center; gap: 8px; font: 500 12px var(--sans); }
.tile.failed .fail { display: flex; }
.tile.failed .ring { display: none; }

.add { aspect-ratio: 1; border-radius: 12px; background: rgba(28,28,28,.6); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--gray); font: 500 13px var(--sans); }
.add svg { width: 20px; height: 20px; }
.add.large { grid-column: 1 / -1; aspect-ratio: 4 / 3; border-radius: 20px; background: var(--hover); gap: 10px; }
.add.large span { font-size: 16px; color: var(--ink); }
.add.large svg { width: 24px; height: 24px; }

.count { display: flex; align-items: center; background: var(--raised); border-radius: 12px; padding: 10px; gap: 8px; }
.well { width: 52px; height: 52px; border-radius: 8px; background: var(--thumb); display: grid; place-items: center; flex: none; transition: transform .15s var(--snappy), opacity .2s; }
.well:active { transform: scale(.94); }
.well:disabled { opacity: .35; }
.well svg { width: 16px; height: 16px; }
.count input { flex: 1; min-width: 0; text-align: center; border: 0; background: none; outline: none; font: 700 40px/1 var(--sans); letter-spacing: -1.2px; padding: 0; caret-color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.count input::placeholder { color: var(--hairline); }
.count input::-webkit-outer-spin-button, .count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.count input.bump-up { animation: bump-up .28s var(--snappy); }
.count input.bump-down { animation: bump-down .28s var(--snappy); }
@keyframes bump-up { from { transform: translateY(10px); opacity: .3; } }
@keyframes bump-down { from { transform: translateY(-10px); opacity: .3; } }

.box { display: block; width: 100%; border: 0; outline: none; resize: none; background: var(--raised); border-radius: 12px; padding: 14px 16px; font: 400 17px/1.35 var(--sans); caret-color: var(--ink); min-height: 52px; }
.box::placeholder { color: var(--dim); }
.saved { font: 400 12px var(--sans); color: var(--dim); margin: 8px 2px 0; height: 16px; transition: opacity .3s; }
.end-space { height: 40px; }

/* ---------- Covers: camera and photo viewer ---------- */
.cover { position: fixed; inset: 0; z-index: 20; background: var(--ground); display: flex; flex-direction: column; animation: cover-in .45s var(--smooth) both; }
.cover.leaving { animation: cover-out .32s var(--smooth) both; }
@keyframes cover-in { from { transform: translateY(100%); } }
@keyframes cover-out { to { transform: translateY(100%); } }

.cam-top { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: var(--safe-t) var(--gutter) 0; box-sizing: content-box; }
.cam-count { font: 500 13px var(--sans); color: var(--gray); }
.done-pill { width: 72px; height: 36px; border-radius: 18px; background: var(--raised); font: 500 15px var(--sans); }
.done-pill.on { background: var(--ink); color: var(--ground); }
.finder { position: relative; margin: 8px 12px 0; aspect-ratio: 3 / 4; max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 190px); border-radius: 16px; overflow: hidden; background: var(--hover); align-self: center; width: calc(100% - 24px); }
.finder video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease-out; }
.finder.live video { opacity: 1; }
.blink { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.blink.go { animation: blink .26s ease-out; }
@keyframes blink { 0% { opacity: 0; } 23% { opacity: .85; } 100% { opacity: 0; } }
.focus { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 1.5px solid var(--ink); border-radius: 6px; pointer-events: none; animation: focus .9s var(--snappy) both; }
@keyframes focus { 0% { transform: scale(1.4); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.blocked { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; gap: 10px; }
.blocked svg { width: 26px; height: 26px; color: var(--dim); margin-bottom: 6px; }
.blocked b { font: 500 17px var(--sans); }
.blocked p { font: 400 14px/1.4 var(--sans); color: var(--gray); margin: 0; }
.blocked .small { margin-top: 8px; }
.cam-ctl { margin-top: auto; height: 96px; padding: 0 var(--gutter); margin-bottom: calc(var(--safe-b) + 16px); display: flex; align-items: center; justify-content: space-between; }
.last { width: 72px; position: relative; }
.last .pic { width: 52px; height: 52px; border-radius: 10px; background: var(--raised); overflow: hidden; position: relative; }
.last .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: pop-in .25s var(--snappy) both; }
@keyframes pop-in { from { transform: scale(.85); opacity: 0; } }
.last .badge { position: absolute; top: -6px; left: 38px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: var(--ink); color: var(--ground); font: 700 12px/20px var(--sans); text-align: center; transition: transform .25s var(--snappy), opacity .2s; }
.last .badge.hide { transform: scale(.5); opacity: 0; }
.shutter { width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--ink); padding: 3px; transition: transform .15s var(--snappy), opacity .2s; }
.shutter i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--ink); transition: transform .12s ease-out; }
.shutter:active i { transform: scale(.9); }
.shutter:disabled { opacity: .35; }
.libbtn { width: 72px; display: flex; justify-content: flex-end; }
.libbtn span { width: 52px; height: 52px; border-radius: 10px; background: var(--raised); display: grid; place-items: center; }
.libbtn svg { width: 22px; height: 22px; }

.viewer-img { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px 0; }
.viewer-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }

/* ---------- Sheet ---------- */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 30; animation: fade .25s ease-out both; }
.scrim.leaving { animation: fade-out .25s ease-in both; }
@keyframes fade-out { to { opacity: 0; } }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; background: var(--raised); border-radius: 24px 24px 0 0; padding: 28px var(--gutter) calc(var(--safe-b) + 8px); animation: sheet-in .45s var(--smooth) both; max-width: 560px; margin: 0 auto; }
.sheet.leaving { animation: sheet-out .28s var(--smooth) both; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
.sheet h3 { font: 500 20px var(--sans); margin: 0; }
.sheet p { font: 400 15px/1.45 var(--sans); color: var(--gray); margin: 8px 0 0; }
.danger { height: 52px; width: 100%; border-radius: 14px; background: var(--danger); font: 500 16px var(--sans); margin-top: 24px; }

/* ---------- Login ---------- */
.welcome { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 8px; position: relative; z-index: 1; }
.welcome .logo span { font-size: 48px; letter-spacing: -1.44px; }
.welcome .logo svg { width: 32px; height: 34.5px; }
.welcome .line { font: 400 22px/1.35 var(--sans); color: var(--gray); margin: 16px 0 32px; }
.rise-1 { animation: rise .7s var(--smooth) .35s both; }
.rise-2 { animation: rise .7s var(--smooth) .45s both; }
.rise-3 { animation: rise .7s var(--smooth) .55s both; }
.code { display: block; width: 100%; height: 52px; border: 0; outline: none; background: var(--raised); border-radius: 12px; padding: 0 16px; font: 400 17px var(--sans); caret-color: var(--ink); }
.code::placeholder { color: var(--dim); }
.note { display: flex; gap: 8px; align-items: baseline; font: 400 13px/1.4 var(--sans); margin-top: 12px; min-height: 18px; }
.shake { animation: shake .4s var(--snappy); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; top: calc(var(--safe-t) + 12px); z-index: 40; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: var(--raised); box-shadow: 0 0 0 1px var(--hairline); border-radius: 18px; padding: 9px 14px; font: 500 13px var(--sans); white-space: nowrap; animation: toast-in .35s var(--snappy) both; }
.toast.leaving { animation: toast-out .25s ease-in both; }
@keyframes toast-in { from { transform: translate(-50%, -16px); opacity: 0; } }
@keyframes toast-out { to { transform: translate(-50%, -16px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .dots i { animation: none; opacity: 1; }
}

/* The welcome's turning tag, above the words */
.spin-tag { flex: 1; position: relative; min-height: 200px; margin-top: calc(var(--safe-t) * -1); animation: fade 1s ease-out both; }
.spin-tag canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.spin-tag canvas.bloom { filter: blur(4px); opacity: .6; mix-blend-mode: plus-lighter; image-rendering: auto; }
.welcome { flex: 0 0 auto; }

/* Held sideways with rotation lock on: the shot comes out wide and upright,
   and the controls turn to face you, as in the Camera app. */
.cam .last, .cam .libbtn span { transform: rotate(var(--turn, 0deg)); transition: transform .35s var(--snappy); }

/* The page itself turned (rotation lock off): a wide viewfinder, controls down the side. */
.cam.land { flex-direction: row; align-items: center; }
.cam.land .cam-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding-left: calc(env(safe-area-inset-left, 0px) + var(--gutter)); padding-right: calc(env(safe-area-inset-right, 0px) + var(--gutter)); }
.cam.land .finder { margin: 0 0 0 calc(env(safe-area-inset-left, 0px) + 12px); width: auto; height: calc(100dvh - 72px); max-height: none; aspect-ratio: 4 / 3; align-self: center; margin-top: 24px; }
.cam.land .cam-ctl { flex-direction: column-reverse; height: 100dvh; width: 120px; margin: 0 0 0 auto; padding: 64px 0 16px; padding-right: env(safe-area-inset-right, 0px); justify-content: space-between; align-items: center; }
.cam.land .last, .cam.land .libbtn { width: 52px; }
.sys-pill { height: 36px; padding: 0 14px; border-radius: 18px; background: var(--raised); font: 500 13px var(--sans); white-space: nowrap; }
.cam .cam-top > :first-child, .cam .cam-top > :last-child { flex: 0 0 auto; }
.cam-count { flex: 1; text-align: center; }
/* Landscape: viewfinder and controls together in the middle. */
.cam.land { justify-content: center; gap: 24px; }
.cam.land .finder { margin-left: 0; }
.cam.land .cam-ctl { margin: 0; }