/* styles/phone-media.css — the phone Media page (src/PhoneMedia.jsx, 6 Oct 2026, phone pages group 3). Built on the
   phone kit. Phone tier only, tokens only, every control >= 40px. */

/* ════════ THE PAGE (mockup 07, MEASURED at 412 CSS px; 6 Oct 2026 material + geometry pass) ════════
   Hugo: each phone page must look EXACTLY like his mockup. Sizes are the mockup's own (its panel scaled to 412 px;
   text sized from the mockup's cap heights), checked on the bench (ours / mockup within 0.95-1.05). Small controls
   keep a 40px TAP area: the visible box is the padding box, a transparent top/bottom border makes up the 40px and an
   equal negative margin gives the space back; the corner is elliptical (R / R + border) so the visible corner is R. */
body[data-ui-tier="s"] .pme-page > .pk-page-body { padding: 0; gap: 0; flex: 1 0 auto; }

body[data-ui-tier="s"] .main-content > .pk-page.pme-page { padding-bottom: 0; }

/* the tabs: Grids · Frames · Videos · Storyboard (28 tall, 12px), then Archived Grids · Archived Frames · Archived
   Videos · Songs (24.5 tall, 11px), each pill at the mockup's own width (flex weights), text centred */
body[data-ui-tier="s"] .pme-tabs { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 0 19.3px 0 21.2px; }
body[data-ui-tier="s"] .pme-tabrow { display: flex; flex-wrap: nowrap; gap: 4.5px; min-width: 0; }
body[data-ui-tier="s"] .pme-tab {
  flex: var(--pme-w, 1) 1 0px; min-width: 0; height: 40px; padding: 0 2px; margin: -6px 0; cursor: pointer;
  border: 6px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 6px);
  box-shadow: inset 0 0 0 1px var(--pme-tab-rim); background-color: var(--pme-tab-fill); color: var(--pme-tab-ink);
  font-family: var(--font-body); font-size: 11.8px; font-weight: var(--fw-med); line-height: 1; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pme-tab--small {
  height: 40px; margin: -8px 0; font-size: 11.1px; border-width: 8px 0;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 8px);
}
body[data-ui-tier="s"] .pme-tab.is-on {
  background-color: transparent; background-image: var(--pme-on-fill); background-clip: padding-box; background-origin: padding-box;
  color: var(--pme-on-ink); font-weight: var(--fw-semi);
  box-shadow: inset 0 0 0 1.5px var(--pme-on-rim), inset 0 2.5px 1px var(--pme-on-hi);
  filter: drop-shadow(0 0 5px var(--pme-on-glow));
}
/* the archived + Songs row: one line (it scrolls sideways with an edge fade on a narrow phone; at 412 all fit) */
body[data-ui-tier="s"] .pme-tabrow--more {
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  padding: 8px 0; margin: -3.4px 0 -8px;
}
body[data-ui-tier="s"] .pme-tabrow--more::-webkit-scrollbar { display: none; }
body[data-ui-tier="s"] .pme-tabrow--more[data-fade="end"] { -webkit-mask-image: linear-gradient(to right, var(--black) calc(100% - 24px), transparent); mask-image: linear-gradient(to right, var(--black) calc(100% - 24px), transparent); }
body[data-ui-tier="s"] .pme-tabrow--more[data-fade="start"] { -webkit-mask-image: linear-gradient(to left, var(--black) calc(100% - 24px), transparent); mask-image: linear-gradient(to left, var(--black) calc(100% - 24px), transparent); }
body[data-ui-tier="s"] .pme-tabrow--more[data-fade="both"] { -webkit-mask-image: linear-gradient(to right, transparent, var(--black) 24px, var(--black) calc(100% - 24px), transparent); mask-image: linear-gradient(to right, transparent, var(--black) 24px, var(--black) calc(100% - 24px), transparent); }
/* Show all: 105 x 23, the 2x2 squares + SHOW ALL (9px, tracked) */
body[data-ui-tier="s"] .pme-tools { display: flex; align-items: center; height: 23.2px; margin-top: 4.7px; }
body[data-ui-tier="s"] .pme-showall {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 105.5px; height: 40px; padding: 0 4px 0 0; margin: -8.4px 0; cursor: pointer;
  border: 8.4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 8px);
  box-shadow: inset 0 0 0 1px var(--pme-tab-rim); background-color: var(--pme-showall-fill); color: var(--pme-tab-ink);
  font-family: var(--font-body); font-size: 9.1px; font-weight: var(--fw-bold); letter-spacing: 0.05em; text-transform: uppercase; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pme-showall svg { width: 13px; height: 13px; }
body[data-ui-tier="s"] .pme-showall.is-on { box-shadow: inset 0 0 0 1.5px var(--pme-on-rim); color: var(--ink); }
body[data-ui-tier="s"] .pme-showall-space { display: block; height: 23.2px; }

/* a sequence heading: pale, wide-tracked caps (12px / 800 / .16em) */
body[data-ui-tier="s"] .pme-seq { gap: 9.3px; }
body[data-ui-tier="s"] .pme-seq-head { display: flex; align-items: center; min-width: 0; height: 12.4px; padding: 0 4.6px; font-size: 12.3px; font-weight: var(--fw-heavy); line-height: 1; letter-spacing: var(--track-16); text-transform: uppercase; color: var(--pme-seq-ink); }
body[data-ui-tier="s"] .pme-seq-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pme-more { margin-top: 2px; }

/* the grid: two columns of cards (186 wide, 7.3 apart, rows 9.3 apart); a sequence heading spans the row, or shares
   the free right cell with its first card when the sequence before it ended on a lone card */
body[data-ui-tier="s"] .pme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9.3px 7.3px; min-width: 0; padding: 0 16px; }
body[data-ui-tier="s"] .pme-grid--seqs { padding-top: 8px; padding-bottom: 12px; }
body[data-ui-tier="s"] .pme-seq > .pme-grid { padding: 0; }
body[data-ui-tier="s"] .pme-cell--row { grid-column: 1 / -1; min-width: 0; }
body[data-ui-tier="s"] .pme-grid--seqs > .pme-cell--row:not(:first-child) { margin-top: 3px; }
body[data-ui-tier="s"] .pme-cell--head { display: flex; flex-direction: column; justify-content: flex-start; gap: 5.3px; min-width: 0; }
body[data-ui-tier="s"] .pme-cell--head > .pme-seq-head { padding: 0 2.6px; }
body[data-ui-tier="s"] .pme-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--pme-card-rim); border-radius: var(--pk-radius-chip); background: var(--pme-card-fill);
  box-shadow: 0 0 6px var(--pme-card-glow), 0 2px 6px color-mix(in srgb, var(--black) 45%, transparent);
}
body[data-ui-tier="s"] .pme-card-hit {
  display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 1px 3px 0 4.3px; margin: 0; text-align: left; cursor: pointer;
  border: 0; background: transparent; color: var(--ink); font-family: var(--font-body); -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pme-card-hit:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }
body[data-ui-tier="s"] .pme-card-pic {
  position: relative; display: block; width: 100%; aspect-ratio: 2.44; overflow: hidden; border-radius: var(--pk-radius-small);
  background: color-mix(in srgb, var(--ink) 8%, var(--card-bg-solid));
}
body[data-ui-tier="s"] .pme-card-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-ui-tier="s"] .pme-card-play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--black) 70%, transparent)); }
body[data-ui-tier="s"] .pme-card-play svg { width: 22px; height: 22px; }
/* FRAME (43 x 15, 8px / 800 caps) and the expand mark (21 x 20) on the picture */
body[data-ui-tier="s"] .pme-card-kind {
  position: absolute; top: 3px; left: 4px; max-width: calc(100% - 34px); height: 15px; padding: 0 6.5px; display: inline-flex; align-items: center;
  border-radius: var(--pk-radius-small); background: var(--pme-chip-fill); color: var(--pme-chip-ink); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 8px; font-weight: var(--fw-heavy); line-height: 1; letter-spacing: var(--track-08); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-ui-tier="s"] .pme-card-open { position: absolute; top: 3.3px; right: 4.6px; width: 20.6px; height: 20px; display: grid; place-items: center; border-radius: var(--pk-radius-small); background: var(--pme-open-fill); color: var(--white); box-shadow: inset 0 0 0 1px var(--pme-open-rim); }
body[data-ui-tier="s"] .pme-card-open svg { width: 13px; height: 13px; stroke-width: 2.9; }
/* the words: the shot + title (11px / 600, two lines), version · count, model · age (11px) */
body[data-ui-tier="s"] .pme-card-body { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 1.9px 5.5px 4.9px; }
body[data-ui-tier="s"] .pme-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 11.2px; font-weight: var(--fw-semi); line-height: 13.7px; color: var(--pme-title-ink); }
body[data-ui-tier="s"] .pme-card-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 15px; color: var(--pme-meta-ink); }
body[data-ui-tier="s"] .pme-card-title + .pme-card-meta { margin-top: 0.5px; }
/* Show all: the favourite star sits on the picture */
body[data-ui-tier="s"] .pme-card-fav {
  position: absolute; top: 0; right: 0; width: 40px; height: 40px; padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer;
  border: 0; background: transparent; color: var(--white); filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--black) 80%, transparent));
}
body[data-ui-tier="s"] .pme-card-fav.is-on { color: var(--accent); }
body[data-ui-tier="s"] .pme-card:has(.pme-card-fav) .pme-card-open { display: none; }
body[data-ui-tier="s"] .pme-card-send { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; margin: 0 6px 6px; padding: 0 10px; cursor: pointer; 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); box-shadow: inset 0 0 0 1px var(--card-border); background-color: transparent; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-12); font-weight: var(--fw-semi); }

/* the song bar, docked above the tab bar: 44 tall, edge to edge (1.3 inset), the top corners rounded */
body[data-ui-tier="s"] .pme-player {
  position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 0; min-width: 0; height: 43.8px; margin: auto 1.3px 0; padding: 0 0 0 16.6px;
  border-radius: var(--pk-radius-card) var(--pk-radius-card) 0 0; background: var(--pme-player-fill); box-shadow: inset 0 1px 0 var(--pme-player-hi);
}
body[data-ui-tier="s"] .pme-player-art { flex: 0 0 37px; width: 37px; height: 30px; overflow: hidden; border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--accent) 18%, var(--card-bg-solid)); }
body[data-ui-tier="s"] .pme-player-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-ui-tier="s"] .pme-player-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-left: 12px; }
body[data-ui-tier="s"] .pme-player-title { font-size: 11px; font-weight: var(--fw-semi); line-height: 13px; color: var(--pme-player-title, var(--ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pme-player-sub { font-size: 10px; line-height: 12px; color: var(--pme-player-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pme-player-ctl { flex: 0 0 auto; display: flex; align-items: center; gap: 0; padding-right: 9.8px; }
body[data-ui-tier="s"] .pme-ctl { position: relative; 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"] .pme-ctl svg { width: 17.5px; height: 17.5px; }
body[data-ui-tier="s"] .pme-ctl--play { margin: 0 7.1px 0 4.4px; }
body[data-ui-tier="s"] .pme-ctl--play::after { content: ""; position: absolute; z-index: -1; left: 3.8px; top: 3.8px; width: 32.4px; height: 32.4px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--pme-ring); background: var(--pme-ring-fill); }
body[data-ui-tier="s"] .pme-ctl--play { z-index: 0; }
body[data-ui-tier="s"] .pme-ctl--play svg { width: 17px; height: 17px; }

/* ════════ THE MATERIAL (mockup 07) ════════
   Every skin: the tokens below read the skin's own colours. The glass family (every dark skin, the mockup's own):
   the photo vivid behind the header + band, sinking under the mockup's navy page from the tab rows down (L* 5-8,
   a faint warm glow left through it); navy tabs (L* 11) with a pale rim; navy cards (L* 13) with a cool rim; ONE
   amber-gradient active tab with a gold rim + faint halo; pale-ice sequence headings; the docked song bar. */
body[data-ui-tier="s"] .pme-page {
  --pme-tab-fill: color-mix(in srgb, var(--ink) 5%, var(--card-bg-solid));
  --pme-tab-rim: var(--card-border);
  --pme-tab-ink: var(--ink);
  --pme-showall-fill: transparent;
  --pme-on-fill: linear-gradient(180deg, var(--accent), var(--accent));
  --pme-on-ink: var(--ink-on-accent);
  --pme-on-rim: var(--accent);
  --pme-on-hi: transparent;
  --pme-on-glow: transparent;
  --pme-seq-ink: var(--ink);
  --pme-card-fill: color-mix(in srgb, var(--ink) 4%, var(--card-bg-solid));
  --pme-card-rim: var(--card-border);
  --pme-card-glow: transparent;
  --pme-chip-fill: color-mix(in srgb, var(--black) 62%, transparent);
  --pme-chip-ink: var(--white);
  --pme-open-fill: color-mix(in srgb, var(--black) 55%, transparent);
  --pme-open-rim: transparent;
  --pme-title-ink: var(--ink);
  --pme-meta-ink: var(--ink-muted);
  --pme-player-fill: var(--card-bg-solid);
  --pme-player-hi: var(--card-border);
  --pme-player-sub: var(--ink-muted);
  --pme-ring: var(--accent);
  --pme-ring-fill: transparent;
}
/* (round 2, measured against mockup 07 on the bench) the cards are the mockup's NAVY (#0b2337, b* -15) with a cool-blue
   lit rim (#122f41) and a soft blue glow round them; FRAME is a blue chip (#2c506c); the expand mark an opaque dark-navy
   square (#174468); the meta lines and the song bar's album line near white (L* 90); the sequence headings pale ICE
   (#e2f9ff); the pause ring bright yellow-gold (#e0bf2f) on a dark disc */
body[data-ui-tier="s"][data-skin-family="glass"] .pme-page {
  --pme-tab-fill: color-mix(in srgb, var(--card-bg-solid) 68%, var(--bg));
  --pme-tab-rim: color-mix(in srgb, var(--ink-muted) 22%, transparent);
  --pme-tab-ink: color-mix(in srgb, var(--ink-muted) 60%, var(--white));
  --pme-showall-fill: color-mix(in srgb, var(--card-bg-solid) 50%, var(--bg));
  --pme-on-fill: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, var(--status-warn)) 0%, color-mix(in srgb, var(--accent) 82%, var(--black)) 28%, color-mix(in srgb, var(--accent) 64%, var(--black)) 58%, color-mix(in srgb, var(--accent) 50%, var(--black)) 92%);
  --pme-on-ink: var(--ink);
  --pme-on-rim: color-mix(in srgb, var(--status-warn) 75%, var(--white));
  --pme-on-hi: color-mix(in srgb, var(--status-warn) 30%, transparent);
  --pme-on-glow: color-mix(in srgb, var(--status-warn) 30%, transparent);
  --pme-seq-ink: color-mix(in srgb, var(--blue-28) 80%, var(--blue-19));
  --pme-card-fill: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 10%, var(--sk-deep)) 90%, var(--blue-41));
  --pme-card-rim: color-mix(in oklch, var(--blue-41) 20%, var(--sk-deep));
  --pme-card-glow: color-mix(in srgb, var(--blue-41) 15%, transparent);
  --pme-chip-fill: color-mix(in srgb, color-mix(in oklch, var(--blue-41) 45%, var(--sk-deep)) 82%, transparent);
  --pme-chip-ink: color-mix(in srgb, var(--blue-28) 50%, var(--white));
  --pme-open-fill: color-mix(in oklch, var(--blue-41) 55%, var(--black));
  --pme-open-rim: color-mix(in srgb, var(--blue-41) 30%, transparent);
  --pme-title-ink: color-mix(in srgb, var(--ink-muted) 45%, var(--white));
  --pme-meta-ink: color-mix(in srgb, var(--ink-muted) 55%, var(--white));
  --pme-player-fill: color-mix(in srgb, var(--card-bg-solid) 64%, var(--bg));
  --pme-player-hi: color-mix(in srgb, var(--ink-muted) 18%, transparent);
  --pme-player-sub: color-mix(in srgb, var(--ink-muted) 78%, var(--white));
  --pme-player-title: color-mix(in srgb, var(--ink-muted) 14%, var(--white));
  --pme-ring: color-mix(in srgb, color-mix(in srgb, var(--gold-star) 65%, var(--status-warn)) 88%, var(--signal-green));
  --pme-ring-fill: var(--shl-veil);
}
/* the page itself: see-through (glass), so the photo shows behind the band and fades under the navy veil */
body[data-ui-tier="s"][data-skin-family="glass"] .main-content > .pk-page.pme-page { background: transparent; }
body[data-ui-tier="s"][data-skin-family="glass"] .main-content:has(> .pme-page) {
  background-image:
    linear-gradient(to bottom, color-mix(in srgb, var(--shl-veil) 14%, transparent) 0, color-mix(in srgb, var(--shl-veil) 30%, transparent) 108px,
      color-mix(in srgb, var(--shl-veil) 76%, transparent) 140px, color-mix(in srgb, var(--shl-veil) 84%, transparent) 180px, color-mix(in srgb, var(--shl-veil) 90%, transparent) 240px,
      color-mix(in srgb, var(--shl-veil) 90%, transparent) 100%);
  background-attachment: local;
}

/* Send to shot */
body[data-ui-tier="s"] .pme-send-sub { margin: 0 8px 8px; font-size: var(--fs-13); color: var(--ink-muted); line-height: 1.4; }
body[data-ui-tier="s"] .pme-send-sub.is-bad { color: var(--danger); }
body[data-ui-tier="s"] .pme-send-row { gap: var(--pk-3); }
body[data-ui-tier="s"] .pme-send-code { flex: 0 0 auto; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .pme-send-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); }

/* Songs */
body[data-ui-tier="s"] .pme-album { gap: var(--pk-2); }
body[data-ui-tier="s"] .pme-album-head { text-transform: none; letter-spacing: normal; font-size: var(--fs-15); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pme-song-num { flex: 0 0 auto; width: 22px; font-variant-numeric: tabular-nums; color: var(--ink-muted); font-size: var(--fs-13); }
body[data-ui-tier="s"] .pme-song-len { flex: 0 0 auto; font-size: var(--fs-12); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .pme-song-play { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent); color: var(--accent); }
body[data-ui-tier="s"] .pme-song-play.is-on { background: var(--accent); color: var(--ink-on-accent); }
body[data-ui-tier="s"] .pme-song.is-current { background: color-mix(in srgb, var(--accent) 10%, transparent); }
body[data-ui-tier="s"] .pme-song:disabled { opacity: 0.55; }

/* the viewer (full screen): the picture, its line, the actions, the version strip; notes scroll under it */
body[data-ui-tier="s"] .pme-viewer .pk-sheet-top { gap: 0; }
body[data-ui-tier="s"] .pme-v-hero {
  display: grid; place-items: center; width: 100%; max-height: 42vh; aspect-ratio: var(--project-aspect, 16 / 9); overflow: hidden;
  background: var(--black);
}
body[data-ui-tier="s"] .pme-v-hero > img,
body[data-ui-tier="s"] .pme-v-hero > video { display: block; width: 100%; height: 100%; object-fit: contain; }
body[data-ui-tier="s"] .pme-v-empty { color: var(--ink-muted); font-size: var(--fs-14); }
body[data-ui-tier="s"] .pme-v-line { display: flex; align-items: baseline; gap: var(--pk-2); min-width: 0; padding: 10px var(--pk-gutter) 0; }
body[data-ui-tier="s"] .pme-v-label { flex: 0 0 auto; font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .pme-v-meta { flex: 1 1 auto; min-width: 0; font-size: var(--fs-12); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pme-v-n { flex: 0 0 auto; font-size: var(--fs-12); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .pme-vstrip {
  display: flex; gap: var(--pk-2); min-width: 0; padding: 4px var(--pk-gutter) 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
body[data-ui-tier="s"] .pme-vstrip::-webkit-scrollbar { display: none; }
body[data-ui-tier="s"] .pme-vtile {
  position: relative; flex: 0 0 88px; height: 56px; padding: 0; margin: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--ink) 8%, var(--card-bg-solid));
}
body[data-ui-tier="s"] .pme-vtile > img,
body[data-ui-tier="s"] .pme-vtile > video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
body[data-ui-tier="s"] .pme-vtile.is-on { border-color: var(--accent); }
body[data-ui-tier="s"] .pme-vtile-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 4px; text-align: center;
  background: color-mix(in srgb, var(--black) 60%, transparent); color: var(--white);
  font-size: var(--fs-11); font-weight: var(--fw-bold); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-ui-tier="s"] .pme-prompt { margin: 0 8px 12px; font-size: var(--fs-14); line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

/* a narrow phone (360): the four main tabs and the card lines stay whole */
@media (max-width: 379px) {
  body[data-ui-tier="s"] .pme-card-meta--parts { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  body[data-ui-tier="s"] .pme-card-part { white-space: nowrap; }
}