/* styles/phone-overview.css — THE PHONE OVERVIEW (6 Oct 2026, phone page group 1): src/PhoneOverview.jsx, from Hugo's
   mockup 01. ONE page that scrolls (the kit's .pk-page), the desktop's own cards stacked in the mockup's order. Phone
   tier only (every rule under body[data-ui-tier="s"], scoped to .pov-*), skin tokens only, 40px controls, nothing past
   the right edge. The cards keep their glass over the project photo (the mockup's rain at dusk), so this page is the
   one kit page without the opaque page fill. */

body[data-ui-tier="s"] .main-content > .pk-page.pov-page { background: transparent; gap: 0; }
body[data-ui-tier="s"] .pov-body { display: flex; flex-direction: column; gap: var(--pk-3); min-width: 0; padding: var(--pk-2) var(--pk-3) 0; }
body[data-ui-tier="s"] .pov-body > * { flex: 0 0 auto; min-width: 0; }

/* the shot list card: a fixed window of the list (it can hold hundreds of shots), its rows scroll inside it */
body[data-ui-tier="s"] .pov-shots { display: flex; flex-direction: column; min-width: 0; height: min(68dvh, 620px); }
body[data-ui-tier="s"] .pov-shots > .shots-panel { flex: 1 1 auto; min-height: 0; height: 100%; }

/* the dashboard cards: one column in the page's own scroll (no second scroller), every card at its natural height */
body[data-ui-tier="s"] .ov-dashboard.pov-dash { overflow: visible; padding-bottom: 0; gap: var(--pk-3); }
body[data-ui-tier="s"] .pov-dash .shot-breakdown-card { display: block; }

/* ── the progress card (TopBar's phone band): labels whole, the six mode buttons 40px to tap ── */
body[data-ui-tier="s"] .pov-body .tbm2-stat-label { white-space: normal; overflow: visible; text-overflow: clip; font-size: var(--fs-9); letter-spacing: var(--track-04); }
body[data-ui-tier="s"] .pov-body .tbm2-mode { min-height: 40px; }

/* ── the project setup line: what is still to do on its own line (the mockup's "9 of 11 required items done") ── */
body[data-ui-tier="s"] .pov-body .psu-strip { flex-wrap: wrap; row-gap: var(--pk-1); height: auto; min-height: 56px; padding-top: var(--pk-2); padding-bottom: var(--pk-2); }
body[data-ui-tier="s"] .pov-body .psu-strip-text { order: 3; flex: 1 1 100%; white-space: normal; font-size: var(--fs-13); line-height: 1.35; }
body[data-ui-tier="s"] .pov-body .psu-btn { margin-left: auto; min-height: 40px; }

/* ── the shot list card: tabs, then the search on its own line, then Sort / Filter / Select / Download all / + Add shot ── */
body[data-ui-tier="s"] .pov-shots .shots-header { display: flex; flex-direction: column; align-items: stretch; gap: var(--pk-2); }
body[data-ui-tier="s"] .pov-shots .shots-header > .tabs { min-width: 0; }
body[data-ui-tier="s"] .pov-shots .pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-2); min-width: 0; width: 100%; margin: 0; }
body[data-ui-tier="s"] .pov-shots .pill-row > .shots-search { flex: 1 1 100%; min-width: 0; max-width: none; width: auto; }
body[data-ui-tier="s"] .pov-shots .shots-search-input { width: 100%; min-height: 40px; font-size: var(--fs-16); }
body[data-ui-tier="s"] .pov-shots .pill-row > * { flex: 0 0 auto; }
body[data-ui-tier="s"] .pov-shots .pill-row .pill-button,
body[data-ui-tier="s"] .pov-shots .pill-row .shots-dl-all,
body[data-ui-tier="s"] .pov-shots .pill-row button { min-height: 40px; }

/* ── the dashboard cards at their natural size: the calendar's day list and Today's notes never stand empty and tall ── */
body[data-ui-tier="s"] .pov-dash .time-slots { max-height: 220px; }
body[data-ui-tier="s"] .pov-dash .notes-card,
body[data-ui-tier="s"] .pov-dash .notes-card .notes-list,
body[data-ui-tier="s"] .pov-dash .activity-card { min-height: 0; }
body[data-ui-tier="s"] .pov-dash .notes-card .notes-empty { min-height: 96px; }
body[data-ui-tier="s"] .pov-body .psu-btn { min-width: 0; height: 40px; }
body[data-ui-tier="s"] .pov-shots .tabs .tab { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }
/* the dashboard's small buttons: 40px to tap on a phone */
body[data-ui-tier="s"] .pov-dash .rc-iconbtn,
body[data-ui-tier="s"] .pov-dash .notes-add-btn { min-width: 40px; min-height: 40px; }
body[data-ui-tier="s"] .pov-dash .cal-connect-btn,
body[data-ui-tier="s"] .pov-dash .cal-sync-btn,
body[data-ui-tier="s"] .pov-dash .notes-viewall-btn { min-height: 40px; }
body[data-ui-tier="s"] .pov-body .tb-live { min-height: 40px; display: inline-flex; align-items: center; }
/* the donut gives way on a narrow phone (360) so the four counts keep their whole labels, never clipped */
body[data-ui-tier="s"] .pov-body .tbm2-hero { grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); }
body[data-ui-tier="s"] .pov-body .tbm2-donut svg { width: 100%; max-width: 150px; height: auto; }
body[data-ui-tier="s"] .pov-body .tbm2-stats { min-width: 0; }
body[data-ui-tier="s"] .pov-body .tbm2-stat-label { overflow-wrap: normal; word-break: normal; letter-spacing: 0.02em; }
/* the shot rows: a narrower picture and the % ring above the stage pills, so the shot number and title get the room
   (the right cluster side by side left the title ~60px and the pills sat on top of it) */
body[data-ui-tier="s"] .pov-shots .shot-row { --row-thumb-w: 100px; grid-template-columns: 100px minmax(0, 1fr) auto; column-gap: var(--pk-2); padding-right: var(--pk-2); }
body[data-ui-tier="s"] .pov-shots .shot-thumb { width: 100px; }
body[data-ui-tier="s"] .pov-shots .shot-right,
body[data-ui-tier="s"] .pov-shots .shot-right-main { display: flex; flex-direction: column-reverse; align-items: flex-end; justify-content: center; gap: 4px; }
body[data-ui-tier="s"] .pov-shots .shot-right-ring,
body[data-ui-tier="s"] .pov-shots .shot-right-ring .pring { width: 44px; height: 44px; flex-basis: 44px; }
body[data-ui-tier="s"] .pov-shots .shot-title { min-width: 0; }
body[data-ui-tier="s"] .pov-shots .shot-id { font-size: var(--fs-20); }

/* ════════ THE MATERIAL + THE MOCKUP'S STRUCTURE (6 Oct 2026) — Hugo's mockup 01, measured ════════
   (see phone-shell.css "THE MATERIAL"). STRUCTURE (every skin): the progress card holds ONLY the ring and the four
   counts; the view modes are their own bar under it with WORDS (Pipeline · Images · Videos · Shots · Assets · Project);
   the schedule line (dates, days left) lives on in the side menu's Project day card; the shot rows are the mockup's
   row; the search sits beside the list's tabs; the song bar sits above the tabs. MATERIAL (the glass family, the dark
   skins the mockup is drawn in): the photo glows between the cards; the cards are slate glass (the mockup's panels
   L* 15-18, cool, chroma ~9), each with a lit top rim; the progress card is the warm one (L* 21, an amber-lit rim);
   the rows a step lighter (L* 23); the picked mode amber-lit glass. A pale skin keeps its own card material. */
body[data-ui-tier="s"] .pov-body {
  --pov-glass: color-mix(in srgb, var(--card-bg-solid) 84%, transparent);
  --pov-glass-rim: inset 0 1px 0 color-mix(in srgb, var(--ink) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 11%, transparent);
  --pov-warm-rim: inset 0 1px 0 color-mix(in srgb, var(--accent) 16%, color-mix(in srgb, var(--ink) 9%, transparent)), inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, color-mix(in srgb, var(--ink) 6%, transparent));
  /* the progress card + modes bar of a pale skin: the phone band's own dark glass (mobile.css .topbar.tb-mobile) */
  --pov-band-glass: linear-gradient(90deg, color-mix(in srgb, var(--shade-44) 50%, transparent) 0%, color-mix(in srgb, var(--shade-45) 38%, transparent) 48%, color-mix(in srgb, color-mix(in srgb, var(--pale-green) 24%, var(--mix-dark)) 28%, transparent) 100%);
}
/* the band -> two cards: the progress card, the modes bar (four equal tabs, TopBar.jsx's phone block) */
body[data-ui-tier="s"] .pov-body .topbar.tb-mobile {
  padding: 0; gap: var(--pk-3); overflow: visible; border: 0; border-radius: 0;
  background: none; background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body[data-ui-tier="s"] .pov-body .tbm2-hero,
body[data-ui-tier="s"] .pov-body .tbm2-modes {
  background: var(--pov-band-glass); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-on-accent) 16%, transparent), 0 10px 26px color-mix(in srgb, var(--shade-46) 30%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.08); backdrop-filter: blur(18px) saturate(1.08);
}
body[data-ui-tier="s"] .pov-body .tbm2-hero { padding: 12px 10px 12px 12px; border-radius: var(--pk-radius-card); grid-template-columns: minmax(104px, 32%) minmax(0, 1fr); gap: 6px; }
body[data-ui-tier="s"][data-skin-family="glass"] .pov-body .tbm2-hero {
  background: linear-gradient(160deg, color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 92%, var(--ink)) 40%, transparent), color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 94%, var(--ink)) 54%, transparent));
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: var(--pov-warm-rim), 0 0 22px color-mix(in srgb, var(--accent) 12%, transparent), 0 10px 26px color-mix(in srgb, var(--black) 35%, transparent);
}
/* the four counts: a 2 x 2 grid with hairlines, round icon discs */
body[data-ui-tier="s"] .pov-body .tbm2-stats { gap: 0; }
body[data-ui-tier="s"] .pov-body .tbm2-stat { padding: 10px 2px 10px 7px; border-radius: 0; gap: 7px; }
body[data-ui-tier="s"] .pov-body .tbm2-stat:nth-child(odd) { box-shadow: inset -1px 0 0 color-mix(in srgb, var(--ink) 10%, transparent); }
body[data-ui-tier="s"] .pov-body .tbm2-stat:nth-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
body[data-ui-tier="s"] .pov-body .tbm2-stat .tbm2-stat-chip {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent), 0 0 10px color-mix(in srgb, var(--black) 40%, transparent);
}
body[data-ui-tier="s"] .pov-body .tbm2-stat-label { font-size: var(--fs-10); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pov-body .tbm2-stat-val { font-size: 28px; }
/* the ring: a lit arc with a soft halo */
body[data-ui-tier="s"] .pov-body .tbm2-donut { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 34%, transparent)); }
body[data-ui-tier="s"] .pov-body .tbm2-ringlabel { width: 74%; }
body[data-ui-tier="s"] .pov-body .tbm2-ring-eyebrow { font-size: var(--fs-9); letter-spacing: 0.06em; }
body[data-ui-tier="s"] .pov-body .tbm2-ring-pct { font-size: 38px; }
/* the modes bar: words, hairline dividers, the picked one amber-lit glass (glass) */
body[data-ui-tier="s"] .pov-body .tbm2-modes { padding: 4px; gap: 0; border: 0; border-radius: var(--pk-radius-control); }
body[data-ui-tier="s"][data-skin-family="glass"] .pov-body .tbm2-modes {
  background: color-mix(in srgb, var(--card-bg-solid) 84%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--pov-glass-rim);
}
body[data-ui-tier="s"] .pov-body .tbm2-mode { position: relative; min-height: 40px; padding: 0 2px; border-radius: var(--pk-radius-chip); }
body[data-ui-tier="s"][data-skin-family="glass"] .pov-body .tbm2-mode { color: var(--ink-muted); }
body[data-ui-tier="s"] .pov-body .tbm2-mode + .tbm2-mode::before {
  content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 1px; background: color-mix(in srgb, currentColor 30%, transparent);
}
body[data-ui-tier="s"] .pov-body .tbm2-mode.is-active::before,
body[data-ui-tier="s"] .pov-body .tbm2-mode.is-active + .tbm2-mode::before { display: none; }
body[data-ui-tier="s"] .pov-body .tbm2-mode-ico { display: none; }
body[data-ui-tier="s"] .pov-body .tbm2-mode-lbl { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); font-weight: var(--fw-semi); }
body[data-ui-tier="s"][data-skin-family="glass"] .pov-body .tbm2-mode.is-active {
  color: var(--ink); background: var(--shl-amber-glass);
  box-shadow: inset 0 0 0 1px var(--shl-amber-rim), 0 0 12px var(--shl-amber-glow);
}
body[data-ui-tier="s"] .pov-body .tbm2-timeline { display: none; }

/* the setup line, the shot list card and the dashboard cards: slate glass with a lit rim (glass) */
body[data-ui-tier="s"][data-skin-family="glass"] .pov-body .psu-strip,
body[data-ui-tier="s"][data-skin-family="glass"] .pov-shots > .shots-panel,
body[data-ui-tier="s"][data-skin-family="glass"] .pov-dash .glass {
  background: var(--pov-glass); border-color: transparent;
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: var(--pov-glass-rim), 0 10px 24px color-mix(in srgb, var(--black) 30%, transparent);
}
body[data-ui-tier="s"] .pov-body .psu-strip { border-radius: var(--pk-radius-card); }
body[data-ui-tier="s"] .pov-body .psu-strip-eyebrow { font-size: var(--fs-11); letter-spacing: 0.12em; }
body[data-ui-tier="s"] .pov-body .psu-strip-text { font-size: var(--fs-12); color: var(--ink-muted); }

/* the shot list card's controls: compact (40px to tap, 32px to see); recessed with a lit hairline (glass) */
body[data-ui-tier="s"][data-skin-family="glass"] .pov-shots .shots-search { background: var(--shl-recess); border-radius: var(--pk-radius-control); box-shadow: inset 0 0 0 1px var(--shl-recess-rim); }
body[data-ui-tier="s"][data-skin-family="glass"] .pov-shots .shots-search-input { background: transparent; border: 0; }
body[data-ui-tier="s"] .pov-shots .pill-row { gap: 6px; }
/* the search beside the Shots · Sequences · Assets tabs (the mockup's header line), not a line of its own */
body[data-ui-tier="s"] .pov-shots .shots-header { position: relative; }
body[data-ui-tier="s"] .pov-shots .pill-row > .shots-search { position: absolute; top: 10px; right: 12px; left: 216px; width: auto; }
body[data-ui-tier="s"] .pov-shots .pill-row .pill-button {
  min-height: 40px; padding: 0 10px; border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px); font-size: var(--fs-12); gap: 5px;
}
body[data-ui-tier="s"][data-skin-family="glass"] .pov-shots .pill-row .pill-button { background-color: var(--shl-recess); box-shadow: inset 0 0 0 1px var(--shl-recess-rim); color: var(--ink); }
body[data-ui-tier="s"] .pov-shots .pill-row .pill-button.pill-button--add {
  background-color: var(--shl-amber-glass); box-shadow: inset 0 0 0 1px var(--shl-amber-rim), 0 0 12px var(--shl-amber-glow); color: var(--ink);
}

/* the shot rows (the desktop ShotRow, re-laid as the mockup's row): the picture with its caption plate · SEQUENCE n +
   ONE stage pill / TITLE (display face) / version · date · the % ring. The row's quick-stage strip, lens and location
   lines stay off the phone (the row opens the shot sheet, which has the stage dots). */
body[data-ui-tier="s"] .pov-shots .shot-row,
body[data-ui-tier="s"][data-thumbsize] .pov-shots .shot-row {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) auto auto;
  grid-template-areas: "thumb eye pill ring" "thumb title title ring" "thumb ver ver ring";
  column-gap: 10px; row-gap: 3px; align-items: center; min-height: 72px; padding: 8px 10px 8px 8px; margin: 0 0 8px;
  border-radius: var(--pk-radius-row);
}
body[data-ui-tier="s"][data-skin-family="glass"] .pov-shots .shot-row {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--card-bg-solid) 86%, var(--ink)), color-mix(in srgb, var(--card-bg-solid) 91%, var(--ink)) 45%, color-mix(in srgb, var(--card-bg-solid) 95%, var(--ink)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 26%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent), 0 6px 16px color-mix(in srgb, var(--black) 30%, transparent);
}
body[data-ui-tier="s"] .pov-shots .shot-info,
body[data-ui-tier="s"] .pov-shots .shot-right,
body[data-ui-tier="s"] .pov-shots .shot-right-main,
body[data-ui-tier="s"] .pov-shots .shot-right-text { display: contents; }
body[data-ui-tier="s"] .pov-shots .shot-thumb,
body[data-ui-tier="s"][data-thumbsize] .pov-shots .shot-thumb { grid-area: thumb; width: 104px; aspect-ratio: 16 / 9; height: auto; align-self: center; border-radius: var(--pk-radius-small); overflow: hidden; }
body[data-ui-tier="s"] .pov-shots .shot-eyebrow { grid-area: eye; display: flex; min-width: 0; }
body[data-ui-tier="s"] .pov-shots .shot-seq-label { font-size: var(--fs-10); font-weight: var(--fw-semi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pov-shots .shot-actions,
body[data-ui-tier="s"] .pov-shots .shot-sub,
body[data-ui-tier="s"] .pov-shots .shot-loc,
body[data-ui-tier="s"] .pov-shots .shot-tools-bottom { display: none; }
body[data-ui-tier="s"] .pov-shots .shot-title { grid-area: title; min-width: 0; display: block; }
body[data-ui-tier="s"] .pov-shots .shot-id {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal;
  font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink);
}
body[data-ui-tier="s"] .pov-shots .shot-right-pill { grid-area: pill; margin: 0; justify-self: end; }
body[data-ui-tier="s"] .pov-shots .shot-right-pill .shot-pill { min-height: 0; height: 22px; padding: 0 8px; gap: 5px; font-size: var(--fs-10); letter-spacing: 0.06em; }
body[data-ui-tier="s"] .pov-shots .shot-version { grid-area: ver; display: block; margin: 0; font-size: var(--fs-11); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pov-shots .shot-right-ring { grid-area: ring; }

/* the song bar: pinned at the bottom of the page's scroll, right above the tabs (the mockup's player): the picture ·
   the song / the album · ⏮ ⏯ ⏭ ☰; the play button an accent ring that glows while a song plays. Dark glass in a dark
   skin, the skin's own card in a pale one. */
body[data-ui-tier="s"] .pov-player {
  position: sticky; bottom: -24px; z-index: 3; flex: 0 0 auto; margin: var(--pk-3) 0 -24px;
  display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 56px; padding: 6px 6px 6px 12px;
  background: color-mix(in srgb, var(--card-bg-solid) 94%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--ink); font-family: var(--font-body);
}
body[data-ui-tier="s"][data-skin-family="glass"] .pov-player { background: color-mix(in srgb, var(--shl-veil) 90%, transparent); }
body[data-ui-tier="s"] .pov-player-pic {
  flex: 0 0 64px; width: 64px; height: 40px; border-radius: var(--pk-radius-small); overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 8%, var(--card-bg-solid)); color: var(--ink-muted);
}
body[data-ui-tier="s"] .pov-player-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-ui-tier="s"] .pov-player-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; margin-left: 6px; }
body[data-ui-tier="s"] .pov-player-title { font-size: var(--fs-14); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pov-player-album { font-size: var(--fs-12); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pov-player-btn {
  flex: 0 0 40px; width: 40px; height: 40px; padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink); -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pov-player-btn:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }
body[data-ui-tier="s"] .pov-player-play { flex-basis: 44px; width: 44px; height: 44px; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
body[data-ui-tier="s"] .pov-player-play.is-on { box-shadow: inset 0 0 0 2px var(--accent), 0 0 14px var(--shl-amber-glow); }

/* ════════ THE GEOMETRY (6 Oct 2026) — mockup 01's sizes at 412 CSS px (see phone-shell.css "THE GEOMETRY") ════════
   progress card 140 (the ring 120, the discs 34) · modes bar 32 (the picked mode 24) · setup card 44 (one row: label,
   TO DO, what is still to do in two lines, Open checklist 26) · list: the search 23 beside the tabs, ONE toolbar row of
   23 · rows 62 (picture 89 x 50, ring 40) · song bar 40 (picture 50 x 30, play 28). 40px tap areas kept (transparent
   border + equal negative margin; elliptical radius so the visible corner is the mockup's). */
body[data-ui-tier="s"] .pov-body { gap: 7px; padding-top: 1px; }
body[data-ui-tier="s"] .pov-body .topbar.tb-mobile { gap: 7px; }
body[data-ui-tier="s"] .pov-body .tbm2-hero { height: 140px; padding: 10px 8px 10px 10px; grid-template-columns: 120px minmax(0, 1fr); gap: 4px; }
body[data-ui-tier="s"] .pov-body .tbm2-donut svg { width: 120px; max-width: 120px; height: 120px; }
body[data-ui-tier="s"] .pov-body .tbm2-ring-eyebrow { font-size: 7.5px; }
body[data-ui-tier="s"] .pov-body .tbm2-ring-pct { font-size: 34px; }
body[data-ui-tier="s"] .pov-body .tbm2-ring-pct span { font-size: 15px; }
body[data-ui-tier="s"] .pov-body .tbm2-ring-sub { font-size: 7.5px; }
body[data-ui-tier="s"] .pov-body .tbm2-stats { height: 120px; grid-template-rows: 1fr 1fr; }
body[data-ui-tier="s"] .pov-body .tbm2-stat { padding: 0 2px 0 8px; gap: 8px; }
body[data-ui-tier="s"] .pov-body .tbm2-stat .tbm2-stat-chip { width: 34px; height: 34px; flex: 0 0 34px; }
body[data-ui-tier="s"] .pov-body .tbm2-stat .tbm2-stat-chip svg { width: 15px; height: 15px; }
body[data-ui-tier="s"] .pov-body .tbm2-stat-label { font-size: 7px; letter-spacing: 0.08em; }
body[data-ui-tier="s"] .pov-body .tbm2-stat-val { font-size: 20px; }
body[data-ui-tier="s"] .pov-body .tbm2-modes { height: 32px; padding: 4px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
body[data-ui-tier="s"] .pov-body .tbm2-mode {
  height: 40px; min-height: 40px; border: 8px solid transparent; border-left-width: 0; border-right-width: 0; margin: -8px 0;
  background-clip: padding-box; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 8px);
}
body[data-ui-tier="s"] .pov-body .tbm2-mode + .tbm2-mode::before { top: 14px; bottom: 14px; }
body[data-ui-tier="s"] .pov-body .tbm2-mode-lbl { font-size: 8.3px; }
body[data-ui-tier="s"][data-skin-family="glass"] .pov-body .tbm2-mode.is-active { box-shadow: inset 0 0 0 1px var(--shl-amber-rim); filter: drop-shadow(0 0 6px var(--shl-amber-glow)); }
/* the setup card: one row */
body[data-ui-tier="s"] .pov-body .psu-strip {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  height: 44px; min-height: 44px; padding: 0 8px 0 12px; flex-wrap: nowrap;
}
body[data-ui-tier="s"] .pov-body .psu-strip-eyebrow { font-size: 7px; letter-spacing: 0.115em; }
body[data-ui-tier="s"] .pov-body .psu-pill { width: auto; min-width: 0; justify-self: start; height: 15.5px; min-height: 0; padding: 0 9px; font-size: 7px; display: inline-flex; align-items: center; border-radius: var(--pk-radius-chip); }
body[data-ui-tier="s"] .pov-body .psu-strip-text {
  order: 0; flex: none; font-size: 7.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal;
}
body[data-ui-tier="s"] .pov-body .psu-btn {
  height: 40px; min-height: 40px; border: 7px solid transparent; border-left-width: 0; border-right-width: 0; margin: -7px 0 -7px 0;
  background-clip: padding-box; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 7px); padding: 0 12px; font-size: 8px;
}
/* the list's header: the tabs, the search beside them (23), ONE toolbar row (23) */
body[data-ui-tier="s"] .pov-shots .shots-header { padding: 4px 10px 2px; gap: 3px; }
body[data-ui-tier="s"] .pov-shots .shot-list { padding-top: 0; }
body[data-ui-tier="s"] .pov-shots .tabs .tab { font-size: 9.5px; min-height: 40px; height: 40px; margin: -8px 0; }
body[data-ui-tier="s"] .pov-shots .pill-row > .shots-search { top: 7px; right: 10px; left: 186px; height: 23px; min-height: 23px; display: flex; align-items: center; }
body[data-ui-tier="s"] .pov-shots .shots-search svg { width: 10px; height: 10px; }
body[data-ui-tier="s"] .pov-shots .shots-search-input { height: 40px; min-height: 40px; margin: -8.5px 0; padding: 0 8px; font-size: 16px; }
body[data-ui-tier="s"] .pov-shots .shots-search-input::placeholder { font-size: 8.5px; }
body[data-ui-tier="s"] .pov-shots .pill-row { flex-wrap: nowrap; gap: 5px; margin-top: 2px; }
body[data-ui-tier="s"] .pov-shots .pill-row > * { flex: 0 1 auto; min-width: 0; }
body[data-ui-tier="s"] .pov-shots .pill-row .pill-button {
  height: 40px; min-height: 40px; border-width: 8.25px; border-left-width: 0; border-right-width: 0; margin: -8.25px 0;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 8px); padding: 0 7px; gap: 4px; font-size: 8px; white-space: nowrap;
}
body[data-ui-tier="s"] .pov-shots .pill-row .pill-button svg { width: 10px; height: 10px; flex: 0 0 auto; }
body[data-ui-tier="s"] .pov-shots .pill-row .pill-button.pill-button--add { box-shadow: inset 0 0 0 1px var(--shl-amber-rim); filter: drop-shadow(0 0 6px var(--shl-amber-glow)); }
/* the rows: 62 */
body[data-ui-tier="s"] .pov-shots .shot-row,
body[data-ui-tier="s"][data-thumbsize] .pov-shots .shot-row {
  grid-template-columns: 89px minmax(0, 1fr) auto auto; min-height: 62px; height: 62px; padding: 6px 8px 6px 8px; margin: 0 0 6px;
  column-gap: 10px; row-gap: 2px; border-radius: var(--pk-radius-row);
}
body[data-ui-tier="s"] .pov-shots .shot-thumb,
body[data-ui-tier="s"][data-thumbsize] .pov-shots .shot-thumb { width: 89px; height: 50px; aspect-ratio: auto; border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .pov-shots .shot-thumb-tag { font-size: 7px; }
body[data-ui-tier="s"] .pov-shots .shot-seq-label { font-size: 6.5px; }
body[data-ui-tier="s"] .pov-shots .shot-id { font-size: 13px; -webkit-line-clamp: 1; }
body[data-ui-tier="s"] .pov-shots .shot-version { font-size: 8px; }
body[data-ui-tier="s"] .pov-shots .shot-right-pill .shot-pill { height: 18.5px; padding: 0 7px; gap: 4px; font-size: 7px; }
body[data-ui-tier="s"] .pov-shots .shot-right-ring,
body[data-ui-tier="s"] .pov-shots .shot-right-ring .pring { width: 40px; height: 40px; flex-basis: 40px; }
/* the song bar: 40 */
body[data-ui-tier="s"] .pov-player { min-height: 40px; height: 40px; padding: 0 4px 0 9px; gap: 2px; }
body[data-ui-tier="s"] .pov-player-pic { flex: 0 0 50px; width: 50px; height: 30px; border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .pov-player-title { font-size: 9px; }
body[data-ui-tier="s"] .pov-player-album { font-size: 8px; }
body[data-ui-tier="s"] .pov-player-btn { flex-basis: 36px; width: 36px; height: 40px; border-radius: 0; }
body[data-ui-tier="s"] .pov-player-btn svg { width: 14px; height: 14px; }
body[data-ui-tier="s"] .pov-player-play { flex-basis: 40px; width: 40px; height: 40px; border: 6px solid transparent; background-clip: padding-box; border-radius: 50%; }
body[data-ui-tier="s"] .pov-player-play svg { width: 11px; height: 11px; }

/* the dashboard cards at mockup 01's second screen (calendar 94 · milestones 80 · shot breakdown 90 · recent activity ·
   media uploads 106 · today's notes 57): compact heads, the calendar = month · Connect · the week strip (the day-by-day
   event list and "Last synced" of a calendar that is not connected stay off the phone Overview: the Schedule page has
   them), the breakdown = its numbers (the bar chart and its hover tooltip stay on the desktop), the shot queue lives in
   the side menu (the mockup's Overview has none). Every control keeps a 40px tap area. */
body[data-ui-tier="s"] .pov-dash .rc-card { padding: 10px 12px; border-radius: var(--pk-radius-card); }
body[data-ui-tier="s"] .pov-dash .rc-head { min-height: 22px; margin-bottom: 6px; }
body[data-ui-tier="s"] .pov-dash .rc-title { font-size: 9.5px; letter-spacing: 0.16em; }
body[data-ui-tier="s"] .pov-dash .sb-queue { display: none; }
/* the calendar */
body[data-ui-tier="s"] .pov-dash .schedule-card { position: relative; }
body[data-ui-tier="s"] .pov-dash .sched-month-row { height: 22px; min-height: 22px; margin-bottom: 4px; }
body[data-ui-tier="s"] .pov-dash .sched-month { font-size: 10.5px; }
body[data-ui-tier="s"] .pov-dash .schedule-card .rc-nav { gap: 0; }
body[data-ui-tier="s"] .pov-dash .schedule-card .rc-iconbtn { width: 28px; min-width: 28px; height: 40px; min-height: 40px; margin: -9px 0; border: 0; background: transparent; box-shadow: none; }
body[data-ui-tier="s"] .pov-dash .cal-connect-callout { position: absolute; top: 9px; right: 70px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body[data-ui-tier="s"] .pov-dash .cal-connect-callout > span { display: none; }
body[data-ui-tier="s"] .pov-dash .cal-connect-btn {
  height: 40px; min-height: 40px; border: 9.25px solid transparent; border-left-width: 0; border-right-width: 0; margin: -9.25px 0; padding: 0 10px;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 9px); font-size: 8.5px; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 22%, transparent));
}
body[data-ui-tier="s"] .pov-dash .schedule-card:has(.cal-connect-callout) .cal-status-row { display: none; }
body[data-ui-tier="s"] .pov-dash .cal-status-row { min-height: 0; margin: 0 0 4px; }
body[data-ui-tier="s"] .pov-dash .cal-sync-btn { min-height: 40px; height: 40px; margin: -10px 0; font-size: 8.5px; }
body[data-ui-tier="s"] .pov-dash .week-strip { gap: 6px; }
body[data-ui-tier="s"] .pov-dash .week-cell { height: 47px; min-height: 47px; padding: 4px 0; }
body[data-ui-tier="s"] .pov-dash .wc-dow { font-size: 7.5px; }
body[data-ui-tier="s"] .pov-dash .wc-num { font-size: 16px; line-height: 1.1; }
body[data-ui-tier="s"] .pov-dash .time-slots { display: none; }
/* milestones, the breakdown */
body[data-ui-tier="s"] .pov-dash .milestones-count,
body[data-ui-tier="s"] .pov-dash .bd-hint { font-size: 8px; }
body[data-ui-tier="s"] .pov-dash .milestones-empty { min-height: 0; padding: 8px 0 6px; font-size: 9px; }
body[data-ui-tier="s"] .pov-dash .breakdown-frame,
body[data-ui-tier="s"] .pov-dash .bd-tooltip { display: none; }
body[data-ui-tier="s"] .pov-dash .bd-top { height: auto; min-height: 0; padding-bottom: 4px; }
body[data-ui-tier="s"] .pov-dash .bd-num { font-size: 20px; line-height: 1.1; height: auto; }
body[data-ui-tier="s"] .pov-dash .bd-cap { font-size: 7.5px; height: auto; }
/* recent activity, media uploads, today's notes */
body[data-ui-tier="s"] .pov-dash .activity-card-cta { font-size: 8px; }
body[data-ui-tier="s"] .pov-dash .activity-list { gap: 0; }
body[data-ui-tier="s"] .pov-dash .activity-card .activity-row { height: 40px; min-height: 40px; padding: 2px 0; margin: 0; gap: 8px; grid-template-columns: 28px 1fr; }
body[data-ui-tier="s"] .pov-dash .activity-icon { width: 24px; height: 24px; flex: 0 0 24px; }
body[data-ui-tier="s"] .pov-dash .activity-text,
body[data-ui-tier="s"] .pov-dash .activity-text > * { font-size: 9px; line-height: 1.3; }
body[data-ui-tier="s"] .pov-dash .activity-meta { font-size: 8px; }
body[data-ui-tier="s"] .pov-dash .thumb-row { gap: 6px; }
body[data-ui-tier="s"] .pov-dash .media-thumb { height: 40px; }
body[data-ui-tier="s"] .pov-dash .dropzone { min-height: 0; padding: 6px 8px; margin-top: 6px; gap: 2px; }
body[data-ui-tier="s"] .pov-dash .dz-icon { height: 16px; }
body[data-ui-tier="s"] .pov-dash .dz-icon svg { width: 14px; height: 14px; }
body[data-ui-tier="s"] .pov-dash .dz-text { font-size: 8.5px; }
body[data-ui-tier="s"] .pov-dash .notes-card .rc-head { min-height: 22px; }
body[data-ui-tier="s"] .pov-dash .notes-viewall-btn,
body[data-ui-tier="s"] .pov-dash .notes-add-btn {
  height: 40px; min-height: 40px; border: 9px solid transparent; border-left-width: 0; border-right-width: 0; margin: -9px 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 9px); font-size: 8px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
}
body[data-ui-tier="s"] .pov-dash .notes-add-btn { min-width: 32px; width: 32px; }
body[data-ui-tier="s"] .pov-dash .notes-card .notes-empty { min-height: 0; padding: 4px 0 2px; font-size: 8.5px; }
body[data-ui-tier="s"] .pov-dash .rc-card { gap: 0; }
body[data-ui-tier="s"] .pov-dash .week-strip { margin-bottom: 0; }
body[data-ui-tier="s"] .pov-dash .milestones-card .rc-head,
body[data-ui-tier="s"] .pov-dash .notes-card .rc-head { margin-bottom: 0; }
body[data-ui-tier="s"] .pov-dash .milestones-empty { padding: 14px 0 6px; }
/* media uploads: the pictures and the drop tile on one row (26 Oct 2026: the accepted-files line under
   them is gone; the card keeps its 18px bottom so its height does not change) */
body[data-ui-tier="s"] .pov-dash .media-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px; column-gap: 6px; padding-bottom: 18px; }
body[data-ui-tier="s"] .pov-dash .media-card > .rc-head { grid-column: 1 / -1; }
body[data-ui-tier="s"] .pov-dash .media-card .thumb-row { grid-column: 1; }
body[data-ui-tier="s"] .pov-dash .media-card .dropzone { grid-column: 2; position: static; height: 52px; min-height: 0; margin: 0; padding: 4px; justify-content: center; }
body[data-ui-tier="s"] .pov-dash .media-card .media-thumb { height: 52px; }
body[data-ui-tier="s"] .pov-dash .media-card .dz-text { font-size: 7.5px; line-height: 1.2; text-align: center; }
body[data-ui-tier="s"] .pov-dash .notes-card .notes-empty { padding: 4px 0 0; }

/* ════════ 7 Oct 2026 — Hugo's Overview round ════════
   1. "Only have the number percentage in the donut, no progress text or other text." */
body[data-ui-tier="s"] .pov-body .tbm2-ring-eyebrow,
body[data-ui-tier="s"] .pov-body .tbm2-ring-sub { display: none; }

/* 3. "the pills at the top of the shotlist are overlapping and it's all cramped … put all of them behind a hamburger
   menu top left of that section, with the filters and search bar." ☰ (PhoneOverview.jsx) sits left of the tabs; the
   search and Sort / Filter / Select / Download all / Add shot (ShotsPanel's own, still mounted) show only when open. */
body[data-ui-tier="s"] .pov-shots { position: relative; }
body[data-ui-tier="s"] .pov-tools-btn {
  position: absolute; z-index: 3; top: var(--pov-tools-top, -4px); left: 4px; width: 40px; height: 40px;
  display: grid; place-items: center; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
body[data-ui-tier="s"] .pov-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"] .pov-tools-btn.is-on::before { box-shadow: inset 0 0 0 1px var(--shl-amber-rim); }
body[data-ui-tier="s"] .pov-tools-btn svg { position: relative; width: 14px; height: 14px; }
body[data-ui-tier="s"] .pov-shots .shots-header > .tabs { padding-left: 34px; }
body[data-ui-tier="s"] .pov-shots:not(.is-tools) .pill-row { display: none; }
body[data-ui-tier="s"] .pov-shots.is-tools .pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
/* the buttons: three to a row, each row filled (Sort | Filter | Select, then Download all | Add shot); Sort, Filter and
   Add shot sit in an .sf-anchor (their pop-up's anchor), so the button inside fills it */
body[data-ui-tier="s"] .pov-shots.is-tools .pill-row > *:not(.shots-search) { flex: 1 1 28%; min-width: auto; }
body[data-ui-tier="s"] .pov-shots.is-tools .pill-row > .sf-anchor { display: flex; }
body[data-ui-tier="s"] .pov-shots.is-tools .pill-row > .sf-anchor > .pill-button { flex: 1 1 auto; width: 100%; }
/* their pop-ups (Sort, Filter, Add shot) open under the buttons at the menu's full width: never past the screen's edge */
body[data-ui-tier="s"] .pov-shots.is-tools .pill-row { position: relative; }
body[data-ui-tier="s"] .pov-shots.is-tools .pill-row > .sf-anchor { position: static; }
body[data-ui-tier="s"] .pov-shots.is-tools .pill-row .sf-menu {
  left: 0; right: 0; width: auto; min-width: 0; max-width: none; top: calc(100% + 6px);
  max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; transform-origin: top center;
}
body[data-ui-tier="s"] .pov-shots.is-tools .pill-row > .shots-search {
  position: static; order: -1; flex: 1 1 100%; width: auto; height: 34px; min-height: 34px; display: flex; align-items: center;
}
body[data-ui-tier="s"] .pov-shots.is-tools .shots-search svg { width: 13px; height: 13px; margin-left: 10px; }
body[data-ui-tier="s"] .pov-shots.is-tools .shots-search-input { height: 34px; min-height: 34px; margin: 0; padding: 0 10px; font-size: 16px; }
body[data-ui-tier="s"] .pov-shots.is-tools .shots-search-input::placeholder { font-size: 12px; }
body[data-ui-tier="s"] .pov-shots.is-tools .pill-row .pill-button {
  height: 40px; min-height: 40px; border-top-width: 4px; border-bottom-width: 4px; margin: -4px 0;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px);
  justify-content: center; padding: 0 12px; gap: 6px; font-size: 11px;
}
body[data-ui-tier="s"] .pov-shots.is-tools .pill-row .pill-button svg { width: 13px; height: 13px; }

/* 4. "the shot status pills take too much space, are awkwardly placed … remove their visibility on mobile and just keep
   the donut progress donut for each shot row." The row is picture · SEQUENCE / TITLE / version · the % ring. */
body[data-ui-tier="s"] .pov-shots .shot-right-pill { display: none; }
body[data-ui-tier="s"] .pov-shots .shot-row,
body[data-ui-tier="s"][data-thumbsize] .pov-shots .shot-row {
  grid-template-areas: "thumb eye eye ring" "thumb title title ring" "thumb ver ver ring";
}