/* styles/phone-shots.css — the PHONE shot list + shot sheet (5 Oct 2026, phone app step 1; polished the same day).
   Spec: docs/superpowers/specs/2026-10-05-mobile-shots-design.md. Components: src/PhoneShots.jsx, mounted by
   App.jsx on the phone tier only. Every rule is under body[data-ui-tier="s"] and every class is .psl-* / .psh-*
   (rendered on the phone only), so the desktop never sees any of it. Colours are tokens only (every skin
   supplies them); tap targets are 40px or more; no tooltips.
   The system (spacing, radii, type, the segmented control, the chip row, …) is THE PHONE KIT: styles/phone-kit.css
   + docs/phone-kit.md. Nothing may run off the right edge. */

/* The shared controls (segmented control, chip row, icon buttons, actions row, sheet, header, composer, card,
   badge, empty line) live in THE PHONE KIT, styles/phone-kit.css (loaded first); every element here carries the
   kit class for its shape. This file keeps only what is the shot list's / shot sheet's own. */

/* ════════ THE SHOT LIST (Shots tab) ════════
   6 Oct 2026 — Hugo's phone mockup (02-shots.mockup.png): the fixed top (album / music-video pickers, Shots |
   Sequences, search, Sort · Filter · Select, Download all · Add shot) over the project photo, then one glass ROW per
   shot that scrolls: picture · SEQUENCE n · code / TITLE (display face) / stage pill / version · date / initials +
   the % ring · ›. Only the list scrolls (the fixed shell, mobile.css). */
body[data-ui-tier="s"] .psl-root {
  position: relative; flex: 1 1 auto; min-height: 0; min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
body[data-ui-tier="s"] .psl-top { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 16px 2px; min-width: 0; }
/* Shots | Sequences: text tabs with the accent underline */
/* on a glass pill like the pickers, so the tabs read over any photo (a paper skin's dark ink too) */
body[data-ui-tier="s"] .psl-tabs {
  align-self: flex-start; display: flex; gap: 2px; min-width: 0; max-width: 100%; padding: 0 4px; border-radius: var(--pk-radius-control);
  border: 1px solid var(--card-border); background: color-mix(in srgb, var(--card-bg-solid) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body[data-ui-tier="s"] .psl-tab {
  position: relative; min-height: 40px; padding: 0 10px; margin: 0; cursor: pointer; border: 0; background: transparent;
  color: var(--ink-muted); font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-med);
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psl-tab.is-on { color: var(--ink); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .psl-tab.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 5px; height: 2px; border-radius: var(--pk-radius-small); background: var(--accent); }
/* the search box */
body[data-ui-tier="s"] .psl-search {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 0 4px 0 12px; cursor: text;
  border: 1px solid var(--card-border); border-radius: var(--pk-radius-control); background: color-mix(in srgb, var(--card-bg-solid) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink-muted);
}
body[data-ui-tier="s"] .psl-search > svg { flex: 0 0 auto; }
body[data-ui-tier="s"] .psl-search > input {
  flex: 1 1 auto; min-width: 0; height: 38px; padding: 0; margin: 0; border: 0; outline: none; background: transparent;
  color: var(--ink); font-family: var(--font-body); font-size: var(--fs-16);
}
body[data-ui-tier="s"] .psl-search > input::placeholder { color: var(--ink-muted); }
body[data-ui-tier="s"] .psl-search > input::-webkit-search-cancel-button { display: none; }
body[data-ui-tier="s"] .psl-search-x { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer; }
/* Sort · Filter · Select, then Download all: outline pills (Add shot is the shell band's action, 6 Oct 2026) */
body[data-ui-tier="s"] .psl-tools { display: flex; gap: 8px; min-width: 0; }
body[data-ui-tier="s"] .psl-tools > .psl-tool { flex: 1 1 auto; }
body[data-ui-tier="s"] .psl-tools > .psl-tool--sort { flex-grow: 1.4; }
body[data-ui-tier="s"] .psl-tools--two > .psl-tool { flex: 1 1 0; }
body[data-ui-tier="s"] .psl-tool {
  min-width: 0; min-height: 40px; padding: 0 8px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
  border: 3px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--card-border);
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 3px); background-color: color-mix(in srgb, var(--card-bg-solid) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink); font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-semi); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psl-tool > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .psl-tool > svg { flex: 0 0 auto; }
body[data-ui-tier="s"] .psl-tool.is-on { box-shadow: inset 0 0 0 1px var(--accent); }
body[data-ui-tier="s"] .psl-tool.is-err { color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
body[data-ui-tier="s"] .psl-tool:disabled { opacity: 0.6; cursor: progress; }
body[data-ui-tier="s"] .psl-tool-n {
  flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: var(--pk-radius-small);
  background: var(--accent); color: var(--ink-on-accent); font-size: var(--fs-11); font-weight: var(--fw-bold);
}
/* one status line (an added shot, a download error): its height is reserved, nothing moves */
body[data-ui-tier="s"] .psl-msg { min-height: 16px; margin: -2px 2px -4px; font-size: var(--fs-12); line-height: 16px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px color-mix(in srgb, var(--black) 40%, transparent); }
body[data-ui-tier="s"] .psl-msg.is-bad { color: var(--danger); }

body[data-ui-tier="s"] .psl-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 8px;
  padding: 6px 16px 96px;   /* room at the end: the last row scrolls clear of the bubbles + tab bar */
}
body[data-ui-tier="s"] .psl-list.is-selecting { padding-bottom: 156px; }
body[data-ui-tier="s"] .psl-empty { color: var(--ink); }
/* a shot row: a frosted glass card */
body[data-ui-tier="s"] .psl-row,
body[data-ui-tier="s"] .psl-seq {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 80px; padding: 7px 2px 7px 7px; margin: 0;
  cursor: pointer; text-align: left; border: 1px solid var(--card-border); border-radius: var(--pk-radius-row);
  background: color-mix(in srgb, var(--card-bg-solid) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--black) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink); font-family: var(--font-body); -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psl-row:active,
body[data-ui-tier="s"] .psl-seq:active { transform: scale(0.99); }
body[data-ui-tier="s"] .psl-row.is-omitted { opacity: 0.55; }
body[data-ui-tier="s"] .psl-row.is-picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
body[data-ui-tier="s"] .psl-pic,
body[data-ui-tier="s"] .psl-seq-pic {
  position: relative; flex: 0 0 auto; width: 26%; max-width: 112px; min-width: 86px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--pk-radius-small);
  background: color-mix(in srgb, var(--ink) 9%, var(--card-bg-solid));
}
body[data-ui-tier="s"] .psl-pic > img,
body[data-ui-tier="s"] .psl-seq-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-ui-tier="s"] .psl-pic-empty,
body[data-ui-tier="s"] .psl-seq-pic > span { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-muted); font-size: var(--fs-13); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .psl-pick {
  position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--white); background: color-mix(in srgb, var(--black) 35%, transparent); color: var(--ink-on-accent);
}
body[data-ui-tier="s"] .psl-pick.is-on { border-color: var(--accent); background: var(--accent); }
body[data-ui-tier="s"] .psl-notes {
  position: absolute; right: 5px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: var(--pk-radius-chip);
  background: var(--danger); color: var(--white); font-size: var(--fs-11); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
body[data-ui-tier="s"] .psl-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
body[data-ui-tier="s"] .psl-eyebrow {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-10); font-weight: var(--fw-semi); letter-spacing: 0.08em; color: var(--ink-muted);
}
body[data-ui-tier="s"] .psl-title {
  max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--font-display); font-size: 17px; line-height: 1.05; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink);
}
body[data-ui-tier="s"] .psl-stage {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; padding: 2px 8px 2px 6px; border-radius: var(--pk-radius-chip); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--status-ok) 45%, var(--card-border)); background: color-mix(in srgb, var(--black) 18%, transparent);
  font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: 0.04em; color: var(--ink);
}
body[data-ui-tier="s"] .psl-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-muted); }
body[data-ui-tier="s"] .psl-stage-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* "flagged for review": a tag on the picture */
body[data-ui-tier="s"] .psl-flag { position: absolute; left: 5px; top: 5px; padding: 2px 7px; border-radius: var(--pk-radius-chip); background: var(--accent); font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: 0.06em; color: var(--ink-on-accent); }
body[data-ui-tier="s"] .psl-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
body[data-ui-tier="s"] .psl-people { display: flex; gap: 2px; }
body[data-ui-tier="s"] .psl-person {
  min-width: 26px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--pk-radius-small);
  border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink);
  font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: 0.04em;
}
body[data-ui-tier="s"] .psl-ring { display: grid; place-items: center; width: 44px; height: 44px; }
body[data-ui-tier="s"] .psl-chev { flex: 0 0 auto; display: grid; place-items: center; width: 20px; color: var(--ink-muted); }
/* a sequence row: cover · SEQUENCE nn · n SHOTS / name / progress */
body[data-ui-tier="s"] .psl-bar { display: block; width: 100%; height: 4px; margin-top: 4px; border-radius: var(--pk-radius-small); overflow: hidden; background: color-mix(in srgb, var(--ink) 12%, transparent); }
body[data-ui-tier="s"] .psl-bar > span { display: block; height: 100%; border-radius: var(--pk-radius-small); background: var(--accent); }
/* Select: the pinned bar above the tab bar */
body[data-ui-tier="s"] .psl-batch {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3;
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 16px; border-radius: var(--pk-radius-card);
  border: 1px solid var(--card-border); background: var(--card-bg-solid);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--shade-42) 36%, transparent);
}
body[data-ui-tier="s"] .psl-batch-n { flex: 1 1 auto; min-width: 0; font-size: var(--fs-14); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .psl-batch-n > b { color: var(--ink); }
body[data-ui-tier="s"] .psl-batch-btn {
  flex: 0 0 auto; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--pk-radius-control); cursor: pointer;
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-semi);
}
body[data-ui-tier="s"] .psl-batch-btn.is-primary { background: var(--cta-bg); color: var(--cta-ink); }
body[data-ui-tier="s"] .psl-batch-btn:disabled { opacity: 0.45; cursor: default; }
/* the sheets: Sort / Filter / Add shot */
body[data-ui-tier="s"] .psl-noicon { display: inline-block; width: 16px; }
body[data-ui-tier="s"] .psl-filter { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-ui-tier="s"] .psl-filter-label { padding: 10px 12px 4px; font-size: var(--fs-12); font-weight: var(--fw-semi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
body[data-ui-tier="s"] .psl-filter-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .psl-filter-n { flex: 0 0 auto; font-size: var(--fs-13); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .psl-filter-check { flex: 0 0 18px; display: grid; place-items: center; color: var(--accent-strong); }
body[data-ui-tier="s"] .psl-filter-seqs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px; }
body[data-ui-tier="s"] .psl-filter-seq { min-width: 48px; justify-content: center; }
body[data-ui-tier="s"] .psl-filter-foot { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; padding: 12px 4px 4px; }
body[data-ui-tier="s"] .psl-add { display: flex; flex-direction: column; gap: 12px; padding: 4px 8px 8px; min-width: 0; }
body[data-ui-tier="s"] .psl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: var(--fs-13); color: var(--ink-muted); }
body[data-ui-tier="s"] .psl-field input {
  width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 12px; margin: 0; border: 1px solid var(--input-border); border-radius: var(--pk-radius-control);
  background: var(--input-bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-16);
}
body[data-ui-tier="s"] .psl-num { display: flex; align-items: center; gap: 6px; }
body[data-ui-tier="s"] .psl-num > b { color: var(--ink); font-size: var(--fs-15); }
body[data-ui-tier="s"] .psl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body[data-ui-tier="s"] .psl-add-hint { min-height: 36px; font-size: var(--fs-13); line-height: 18px; color: var(--ink-muted); }

/* ════════ THE SHOT SHEET ════════
   Full screen, opaque, above the drawer / burger / bubbles / tab bar (all inside #app; #modal-root - the
   styled confirm, toasts - stays on top). Three bands: the top never scrolls (header, hero, version line,
   actions, lanes + strip); the middle scrolls (stage dots, notes); the composer is pinned at the bottom. */

/* header (the mockup's title row): ‹ · 04 - SHADOW BOXING (display face, its code small under it) · › · … · ✕ */
body[data-ui-tier="s"] .psh-head { gap: 6px; padding-left: max(8px, env(safe-area-inset-left, 0px)); }
body[data-ui-tier="s"] .psh-title { margin: 0 2px; }
body[data-ui-tier="s"] .psh-title-main { font-size: 22px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; }
body[data-ui-tier="s"] .psh-title-sub { display: flex; align-items: center; gap: 6px; min-height: 14px; font-size: var(--fs-11); letter-spacing: 0.04em; }
body[data-ui-tier="s"] .psh-cut-tag {
  flex: 0 0 auto; padding: 1px 7px; border-radius: var(--pk-radius-chip); font-size: var(--fs-10); font-weight: var(--fw-bold);
  background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger);
}
body[data-ui-tier="s"] .psh-menu-scrim { position: fixed; inset: 0; z-index: 2; }
body[data-ui-tier="s"] .psh-menu {
  position: absolute; top: 52px; right: 8px; z-index: 3; min-width: 208px; max-width: calc(100vw - 16px); padding: 4px;
  display: flex; flex-direction: column; gap: 0;
  background: var(--card-bg-solid); border: 1px solid var(--card-border); border-radius: var(--pk-radius-card);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--shade-42) 32%, transparent);
}
body[data-ui-tier="s"] .psh-menu-item {
  min-height: 44px; padding: 0 12px; text-align: left; cursor: pointer; border: 0; border-radius: var(--pk-radius-row);
  background: transparent; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-15); font-weight: var(--fw-med);
}
body[data-ui-tier="s"] .psh-menu-item.is-danger { color: var(--danger); }
body[data-ui-tier="s"] .psh-menu-item:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* the hero: edge to edge, the picked version at its own ratio, never taller than 38% of the screen */
body[data-ui-tier="s"] .psh-hero { display: block; min-width: 0; touch-action: pan-y; }
body[data-ui-tier="s"] .psh-hero-media {
  position: relative; width: 100%; max-width: 100%;
  height: min(38vh, calc(100vw / var(--psh-ar)));
  height: min(38dvh, calc(100vw / var(--psh-ar)));
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 9%, var(--card-bg-solid));
}
body[data-ui-tier="s"] .psh-hero-media > img,
body[data-ui-tier="s"] .psh-hero-media > video { display: block; width: 100%; height: 100%; object-fit: contain; }
body[data-ui-tier="s"] .psh-hero-empty {
  display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-muted); font-size: var(--fs-13);
}
/* the clip's own controls: tap = play / pause, full screen + sound bottom right, a hairline of progress */
body[data-ui-tier="s"] .psh-play-badge {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; pointer-events: none;
  display: grid; place-items: center; border-radius: 50%; padding-left: 3px;
  background: color-mix(in srgb, var(--black) 45%, transparent); color: var(--white);
}
/* the control bar (the mockup's): play / pause · time · scrubber · sound · full screen, on a dark fade at the foot */
body[data-ui-tier="s"] .psh-vid-bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 16px 6px 4px;
  background: linear-gradient(to top, color-mix(in srgb, var(--black) 62%, transparent), transparent);
}
body[data-ui-tier="s"] .psh-vid-btn {
  flex: 0 0 40px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent; color: var(--white); -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psh-vid-btn:active { background: color-mix(in srgb, var(--white) 16%, transparent); }
body[data-ui-tier="s"] .psh-vid-time { flex: 0 0 auto; padding: 0 4px; color: var(--white); font-size: var(--fs-12); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the scrubber: a 40px tall target, a 4px track filled with the accent up to the playhead, a round knob */
body[data-ui-tier="s"] .psh-vid-seek {
  flex: 1 1 auto; min-width: 40px; height: 40px; margin: 0 4px; padding: 0; cursor: pointer; background: transparent;
  -webkit-appearance: none; appearance: none;
}
body[data-ui-tier="s"] .psh-vid-seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--pk-radius-small);
  background: linear-gradient(to right, var(--accent) var(--psh-seek, 0%), color-mix(in srgb, var(--white) 30%, transparent) var(--psh-seek, 0%));
}
body[data-ui-tier="s"] .psh-vid-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; border: 0; background: var(--white);
}
body[data-ui-tier="s"] .psh-vid-seek::-moz-range-track { height: 4px; border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--white) 30%, transparent); }
body[data-ui-tier="s"] .psh-vid-seek::-moz-range-progress { height: 4px; border-radius: var(--pk-radius-small); background: var(--accent); }
body[data-ui-tier="s"] .psh-vid-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 0; background: var(--white); }
/* the version line: "v018  Nano Banana Pro" left, the tier (or "Saved") right - the UI font, quiet */
body[data-ui-tier="s"] .psh-vline {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; min-height: 40px;
  padding: 8px 16px 0; font-size: var(--fs-14);
}
body[data-ui-tier="s"] .psh-vline-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
body[data-ui-tier="s"] .psh-vline-v { flex: 0 0 auto; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .psh-vline-m { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-muted); font-size: var(--fs-13); }
body[data-ui-tier="s"] .psh-vline-tier,
body[data-ui-tier="s"] .psh-vline-msg {
  flex: 0 0 auto; padding: 4px 10px; border-radius: var(--pk-radius-chip); font-size: var(--fs-12); font-weight: var(--fw-semi); line-height: 1.2;
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-muted);
}
body[data-ui-tier="s"] .psh-vline-tier.is-hero { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }
body[data-ui-tier="s"] .psh-vline-msg.is-ok { background: color-mix(in srgb, var(--status-ok) 16%, transparent); color: var(--ink); }
body[data-ui-tier="s"] .psh-vline-msg.is-bad { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
/* the actions: one centred row of round icons with a small label; "on" = the accent fill */
/* Frames | Video full width, then the tiers on their own row */
body[data-ui-tier="s"] .psh-lanes { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 16px 0; }
/* the tiers (Hero · Good · WIP · Archived …) as the mockup's capsules: outlined, uppercase, the picked one filled */
body[data-ui-tier="s"] .psh-tiers .pk-chip {
  margin-right: 2px; padding: 0 12px; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-11);
  box-shadow: inset 0 0 0 1px var(--card-border); color: var(--ink);
}
body[data-ui-tier="s"] .psh-tiers .pk-chip.is-on { background-color: var(--accent); color: var(--ink-on-accent); box-shadow: none; }
body[data-ui-tier="s"] .psh-tiers .pk-chip.is-on .pk-chip-n { color: var(--ink-on-accent); }
/* This version | All: the picked one amber, as in the mockup */
body[data-ui-tier="s"] .psh-notes-scope .pk-seg-btn.is-on { background: var(--accent); color: var(--ink-on-accent); box-shadow: none; }
/* the version strip: real thumbnails (a clip's poster), the picked one ringed, the label small on top */
body[data-ui-tier="s"] .psh-strip {
  position: relative; display: flex; gap: 8px; min-height: 72px; min-width: 0; padding: 8px 16px 12px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-padding: 0 16px;
}
body[data-ui-tier="s"] .psh-strip::-webkit-scrollbar { display: none; }
body[data-ui-tier="s"] .psh-strip-empty { align-self: center; color: var(--ink-muted); font-size: var(--fs-13); padding: 0; }
body[data-ui-tier="s"] .psh-tile {
  position: relative; flex: 0 0 auto; height: 56px; aspect-ratio: var(--psh-ar); min-width: 42px; max-width: 120px;
  padding: 0; margin: 0; cursor: pointer; overflow: hidden; border: 0; border-radius: var(--pk-radius-small);
  background: color-mix(in srgb, var(--ink) 10%, var(--card-bg-solid));
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psh-tile.is-on { outline: 2px solid var(--accent); outline-offset: 2px; }
body[data-ui-tier="s"] .psh-tile > img,
body[data-ui-tier="s"] .psh-tile > video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
body[data-ui-tier="s"] .psh-tile-kind {
  position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; display: grid; place-items: center; padding-left: 1px;
  border-radius: 50%; background: color-mix(in srgb, var(--black) 50%, transparent); color: var(--white);
}
body[data-ui-tier="s"] .psh-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 4px 2px; pointer-events: none;
  font-family: var(--font-body); font-size: var(--fs-10); font-weight: var(--fw-semi); line-height: 1.2;
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(to top, color-mix(in srgb, var(--black) 62%, transparent), transparent); color: var(--white);
}

/* the part that scrolls: the stage track, then the notes of the picked version */
/* 6 Oct 2026 — the stage track of the mockup (20-shot-window.mockup.png): three stages to a row, each a 40px dot
   (it sets the stage, as on the desktop) with its label under it, a hairline joining it to the one before in the
   same row; PipelineStepper's own lines step aside (a row start has no line) */
body[data-ui-tier="s"] .psh-stages { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 8px 10px; border-radius: var(--pk-radius-card); border: 1px solid var(--card-border); background: color-mix(in srgb, var(--ink) 4%, transparent); }
body[data-ui-tier="s"] .psh-stages-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 8px; }
body[data-ui-tier="s"] .psh-stages-now { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13); color: var(--ink-muted); }
/* 7 Oct 2026 — Hugo: "the bottom Stages circles are on two lines … needs to be clear one line". ONE row, every stage
   its own equal column whatever the project's stage count; a label may wrap to two short lines under its dot. */
body[data-ui-tier="s"] .psh-stages .pipeline-stepper {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; row-gap: 0; column-gap: 0; padding: 0; margin: 0; min-width: 0;
}
body[data-ui-tier="s"] .psh-stages .stepper-line { display: none; }
body[data-ui-tier="s"] .psh-stages .stepper-step {
  position: relative; width: auto; min-width: 0; min-height: 56px; padding: 0 1px; gap: 4px; justify-content: flex-start;
}
body[data-ui-tier="s"] .psh-stages .stepper-step::before {
  content: ""; position: absolute; top: 20px; left: -50%; right: 50%; height: 2px; margin: 0 13px; border-radius: var(--pk-radius-small);
  background: color-mix(in srgb, var(--step-c, var(--ink-muted)) 70%, transparent); opacity: 0.85;
}
body[data-ui-tier="s"] .psh-stages .stepper-step.future::before { background: var(--card-border); }
body[data-ui-tier="s"] .psh-stages .stepper-step:first-child::before { display: none; }
body[data-ui-tier="s"] .psh-stages .step-circle { width: 22px; height: 22px; margin-top: 9px; border-width: 1.5px; }
body[data-ui-tier="s"] .psh-stages .step-circle svg { width: 13px; height: 13px; }
body[data-ui-tier="s"] .psh-stages .step-label {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%;
  font-size: var(--fs-10); line-height: 1.15; text-align: center; overflow: hidden; white-space: normal;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
/* notes: phone cards */
body[data-ui-tier="s"] .psh-notes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
body[data-ui-tier="s"] .psh-notes-empty { padding: 16px 0; color: var(--ink-muted); font-size: var(--fs-14); }
body[data-ui-tier="s"] .psh-notes-empty.is-bad { color: var(--danger); }
body[data-ui-tier="s"] .psh-note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body[data-ui-tier="s"] .psh-note {
  display: flex; gap: 12px; min-width: 0; padding: 12px; border-radius: var(--pk-radius-card);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
body[data-ui-tier="s"] .psh-note.is-resolved { opacity: 0.6; }
body[data-ui-tier="s"] .psh-note-av {
  flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink);
  font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-02);
}
body[data-ui-tier="s"] .psh-note-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
body[data-ui-tier="s"] .psh-note-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; width: 100%; }
body[data-ui-tier="s"] .psh-note-who { font-size: var(--fs-14); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .psh-note-when { font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .psh-note-tag {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 8px; border: 0; border-radius: var(--pk-radius-chip); background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-muted); font-family: var(--font-body); font-size: var(--fs-11); font-weight: var(--fw-semi);
}
body[data-ui-tier="s"] .psh-note-tag.is-link { cursor: pointer; color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); }
body[data-ui-tier="s"] .psh-note-text { max-width: 100%; font-size: var(--fs-15); line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
/* Resolve sits at the end of the name line (40px to tap, pulled into the card's padding so the line stays short) */
body[data-ui-tier="s"] .psh-note-resolve {
  min-height: 40px; padding: 0 12px; margin: -10px -12px -10px auto; cursor: pointer; border: 0; border-radius: var(--pk-radius-control);
  background: transparent; color: var(--accent-strong); font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-semi);
}
body[data-ui-tier="s"] .psh-notes-more {
  align-self: flex-start; min-height: 40px; padding: 0 12px; margin: 0 0 0 -12px; cursor: pointer; border: 0; border-radius: var(--pk-radius-control);
  background: transparent; color: var(--ink-muted); font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-semi);
}
/* the composer: pinned at the bottom of the sheet, above the safe area */

/* ════════ THE MATERIAL (6 Oct 2026) — Hugo's mockup 02, measured (see phone-shell.css "THE MATERIAL") ════════
   The list sits on the dark page (the shell's veil); controls are recessed below the rows with a lit hairline; the
   rows are slate glass a step lighter than the page, with a lit rim (glass: the dark skins); the % rings glow their
   own colour (every skin). */
body[data-ui-tier="s"][data-skin-family="glass"] .psl-tabs { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
body[data-ui-tier="s"][data-skin-family="glass"] .psl-search,
body[data-ui-tier="s"][data-skin-family="glass"] .psl-tool {
  background-color: var(--shl-recess); border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body[data-ui-tier="s"][data-skin-family="glass"] .psl-search { box-shadow: inset 0 0 0 1px var(--shl-recess-rim), inset 0 2px 6px color-mix(in srgb, var(--black) 35%, transparent); }
body[data-ui-tier="s"][data-skin-family="glass"] .psl-tool { box-shadow: inset 0 0 0 1px var(--shl-recess-rim), inset 0 2px 6px color-mix(in srgb, var(--black) 30%, transparent); }
body[data-ui-tier="s"] .psl-tool.is-on { box-shadow: inset 0 0 0 1px var(--shl-amber-rim), 0 0 10px var(--shl-amber-glow); }
body[data-ui-tier="s"][data-skin-family="glass"] .psl-row,
body[data-ui-tier="s"][data-skin-family="glass"] .psl-seq {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--card-bg-solid) 96%, var(--ink)), var(--card-bg-solid) 30%, color-mix(in srgb, var(--card-bg-solid) 86%, var(--black)));
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--black) 40%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 34%, transparent);
}
/* the % ring: one colour (the stage's own middle colour), lit, with a soft halo */
body[data-ui-tier="s"] .psl-ring .pring,
body[data-ui-tier="s"] .pov-shots .shot-right-ring .pring { overflow: visible; }
body[data-ui-tier="s"] .psl-ring .pring stop,
body[data-ui-tier="s"] .pov-shots .shot-right-ring .pring stop { stop-color: var(--ring-mid); }
body[data-ui-tier="s"] .psl-ring .pring circle[stroke-dasharray],
body[data-ui-tier="s"] .pov-shots .shot-right-ring .pring circle[stroke-dasharray] {
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--ring-mid) 80%, transparent)) drop-shadow(0 0 5px color-mix(in srgb, var(--ring-mid) 38%, transparent));
}

/* ════════ THE GEOMETRY (6 Oct 2026) — mockup 02's sizes at 412 CSS px (see phone-shell.css "THE GEOMETRY") ════════
   tabs 13px · search 31.5 · tools 27.5 (Sort · Filter · Select, then Download all · + Add shot, amber-lit) · rows 78
   (picture 90 x 64, ring 45) · pills 18. 40px tap areas kept (transparent border + equal negative margin). */
body[data-ui-tier="s"] .psl-top { position: relative; gap: 9px; padding-top: 0; }
/* the status line (an added shot, a download error) floats under the toolbar: no space reserved, nothing moves */
body[data-ui-tier="s"] .psl-msg { position: absolute; left: 18px; right: 18px; top: 100%; z-index: 2; margin: 0; pointer-events: none; }
body[data-ui-tier="s"] .psl-tab { font-size: 13px; min-height: 40px; height: 40px; margin: -10px 0 -8px; }
body[data-ui-tier="s"] .psl-search { min-height: 31.5px; height: 31.5px; border-radius: var(--pk-radius-control); }
body[data-ui-tier="s"] .psl-search > input { height: 40px; margin: -4.25px 0; }
body[data-ui-tier="s"] .psl-search > input::placeholder { font-size: 11px; }
body[data-ui-tier="s"] .psl-tools { gap: 10px; }
body[data-ui-tier="s"] .psl-tool {
  min-height: 40px; height: 40px; border-width: 6.25px; border-left-width: 0; border-right-width: 0; margin: -6.25px 0;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 6px); font-size: 10.5px; gap: 6px;
}
body[data-ui-tier="s"] .psl-tool > svg { width: 14px; height: 14px; }
body[data-ui-tier="s"] .psl-tools > .psl-tool.psl-tool--add {
  color: var(--ink); background-color: var(--shl-amber-glass); box-shadow: inset 0 0 0 1px var(--shl-amber-rim); filter: drop-shadow(0 0 6px var(--shl-amber-glow));
}
body[data-ui-tier="s"] .psl-tool--add > svg { color: var(--accent); }
body[data-ui-tier="s"] .psl-list { gap: 5px; padding-top: 4px; }
body[data-ui-tier="s"] .psl-row { min-height: 78px; padding: 5px 4px 5px 8px; gap: 12px; }
body[data-ui-tier="s"] .psl-info { gap: 1px; }
body[data-ui-tier="s"] .psl-pic { width: 90px; min-width: 90px; max-width: 90px; aspect-ratio: auto; height: 64px; border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .psl-eyebrow { font-size: 8px; letter-spacing: 0.12em; line-height: 1.15; }
body[data-ui-tier="s"] .psl-title { font-size: 17.3px; line-height: 0.92; padding-top: 1px; }
body[data-ui-tier="s"] .psl-stage { height: 20px; padding: 0 9px 0 7px; font-size: 9px; }
body[data-ui-tier="s"] .psl-ring { width: 46px; height: 46px; }
body[data-ui-tier="s"] .psl-ring .pring { width: 45.5px; height: 45.5px; }

/* 7 Oct 2026 — Hugo: the shot status pills "take too much space, are awkwardly placed also so let's remove their
   visibility on mobile and just keep the donut progress donut for each shot row" (the Shots tab's rows too). */
body[data-ui-tier="s"] .psl-stage { display: none; }

/* ════════ 8 Oct 2026 — Hugo's Shots round ════════
   1. "let's put all the pills options which are at the top (sort, filter etc) behind a hamburger menu so it's a lot
   cleaner." ONE ☰ left of Shots | Sequences, the phone Overview's own button (phone-overview.css .pov-tools-btn): a
   recessed 24px square with the control corner inside a 40px tap, ✕ and an amber rim while open. It opens the search and
   Sort · Filter · Select / Download all · Add shot (unchanged, .psl-panel) under the tabs; ☰ again or a tap outside
   closes it. The panel opens inside the page's fixed frame and the list scrolls by its height (PhoneShots.jsx), so the
   rows on screen stay put. The Sequences tab has no tools: the ☰ keeps its slot there, hidden, so the tabs never shift. */
body[data-ui-tier="s"] .psl-head { display: flex; align-items: center; min-width: 0; }
body[data-ui-tier="s"] .psl-tools-btn {
  position: relative; flex: 0 0 40px; width: 40px; height: 40px; margin: -9px 0 -7px -8px; padding: 0;
  display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psl-tools-btn::before {
  content: ""; position: absolute; inset: 8px; border-radius: var(--pk-radius-control);
  background: var(--shl-recess); box-shadow: inset 0 0 0 1px var(--shl-recess-rim);
}
body[data-ui-tier="s"] .psl-tools-btn.is-on::before { box-shadow: inset 0 0 0 1px var(--shl-amber-rim); }
body[data-ui-tier="s"] .psl-tools-btn svg { position: relative; width: 14px; height: 14px; }
body[data-ui-tier="s"] .psl-tools-btn.is-idle { visibility: hidden; }
body[data-ui-tier="s"] .psl-panel { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

/* 2. "Now the shot rows, We have too much info. I just want to see the shot number/song title here. no version, no date,
   no sequence." A row = the picture · the shot number (small) / the title (big, two lines at most) · the initials + the
   % ring · ›. Every row the SAME height: the initials sit right on the ring's box instead of growing the row (82 -> 78). */
body[data-ui-tier="s"] .psl-row { height: 78px; }
body[data-ui-tier="s"] .psl-side { gap: 0; }

/* 26 Oct 2026 — SHOT VERSIONS (PhoneShots.jsx + src/shotVersions.js; only with a template rule). A main row's fold button
   sits beside the row (a row is a button), over its picture's bottom-left corner: a 40px tap around a small chip
   ("› 7"; the chevron turns while open). A version row sits indented under its main, the same height as every row. */
body[data-ui-tier="s"] .psl-fold { position: relative; flex: 0 0 auto; min-width: 0; }
body[data-ui-tier="s"] .psl-fold-btn {
  position: absolute; left: 6px; bottom: 1px; z-index: 1; min-width: 40px; height: 40px; padding: 0 8px; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; cursor: pointer;
  color: var(--white); font-family: var(--font-body); font-size: var(--fs-11); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psl-fold-btn::before {
  content: ""; position: absolute; inset: 9px 2px; border-radius: var(--pk-radius-chip);
  background: color-mix(in srgb, var(--black) 58%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 22%, transparent);
}
body[data-ui-tier="s"] .psl-fold-btn.is-open::before { background: var(--accent); box-shadow: none; }
body[data-ui-tier="s"] .psl-fold-btn.is-open { color: var(--ink-on-accent); }
body[data-ui-tier="s"] .psl-fold-btn > svg,
body[data-ui-tier="s"] .psl-fold-btn > span { position: relative; }
body[data-ui-tier="s"] .psl-fold-btn > svg { flex: 0 0 auto; transition: transform var(--dur-1) ease; }
body[data-ui-tier="s"] .psl-fold-btn.is-open > svg { transform: rotate(90deg); }
body[data-ui-tier="s"] .psl-list .psl-row.is-sv-child { width: auto; margin-left: 18px; }
/* The ☰ panel's second row holds three tools here (Download all, Add shot, Expand all): each sizes to its words, so
   "Download all" is never cut at 360-375 px; Expand all / Collapse all share one cell, so its width never changes. */
body[data-ui-tier="s"] .psl-tools--two.psl-tools--sv > .psl-tool { flex: 1 1 auto; }
body[data-ui-tier="s"] .psl-sv-all-label { display: inline-grid; }
body[data-ui-tier="s"] .psl-sv-all-label > span { grid-area: 1 / 1; }
body[data-ui-tier="s"] .psl-sv-all-label > .is-off { visibility: hidden; }