/* styles/phone-crew.css — the PHONE Crew page (6 Oct 2026, phone pages group 2): src/PhoneCrew.jsx.
   Spec = Hugo's mockup 06-crew.mockup.png: the page sits on the project photo (no opaque page fill), the shell's
   band above it (CREW + Invite), a small toolbar row with the round glass filter button, one frosted glass card per person (portrait tile left, NAME / role /
   company / hairline / last seen right). 8 Oct 2026: no permission pills on a card any more (Hugo: "I dont want to
   see the pills of what people can do"); the amber pills that remain are the admin's permission list in the person's sheet.
   Phone tier only (every rule under body[data-ui-tier="s"], every class .pcr-*), skin tokens only (no colour
   literals), the UI font for every line except the display headings, 16px gutters, tap targets >= 40px,
   nothing past the right edge (long names / companies / permissions end in an ellipsis). */

/* ════════ THE PAGE: on the project photo ════════ */
body[data-ui-tier="s"] .main-content > .pk-page.pcr-page { background: transparent; }
/* 6 Oct 2026 - the shell's project band names the page (CREW) and carries the admin's Invite; the page keeps only a
   small right-aligned toolbar row with the filter button (no heading of its own) */
body[data-ui-tier="s"] .pcr-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; margin: 0 -5px -4px 0; }
/* the round glass button of the toolbar row: 44px to tap, a 34px glass disc to see (the mockup's size) */
body[data-ui-tier="s"] .pcr-page .pk-iconbtn.pcr-hbtn {
  flex: 0 0 44px; width: 44px; height: 44px;
  position: relative; isolation: isolate; background: transparent; color: var(--ink);
}
body[data-ui-tier="s"] .pcr-page .pk-iconbtn.pcr-hbtn::before {
  content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 50%;
  background: var(--card-bg); -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
  border: 1px solid var(--card-border); box-shadow: var(--shadow-glass);
}
body[data-ui-tier="s"] .pcr-page .pk-iconbtn.pcr-hbtn > svg { width: 18px; height: 18px; }
body[data-ui-tier="s"] .pcr-page .pk-iconbtn.pcr-hbtn:active:not(:disabled),
body[data-ui-tier="s"] .pcr-page .pk-iconbtn.pcr-hbtn.is-on { background: transparent; }
body[data-ui-tier="s"] .pcr-page .pk-iconbtn.pcr-hbtn.is-on { color: var(--accent); }
body[data-ui-tier="s"] .pcr-page .pk-iconbtn.pcr-hbtn.is-on::before { border-color: var(--accent); }

/* "Online now · 1 of 3" + Show everyone, while a filter is on */
body[data-ui-tier="s"] .pcr-filterline {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pk-2); min-width: 0;
  padding: 2px 4px 2px 16px; border-radius: var(--pk-radius-control);
  background: var(--card-bg); -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
  border: 1px solid var(--card-border);
}
body[data-ui-tier="s"] .pcr-filterline-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--ink);
}
body[data-ui-tier="s"] .pcr-filterline .pcr-filterline-clear { flex: 0 0 auto; min-height: 40px; background: transparent; color: var(--accent); font-size: var(--fs-13); }

/* ════════ THE CARDS ════════ */
body[data-ui-tier="s"] .pcr-list { display: flex; flex-direction: column; gap: var(--pk-3); min-width: 0; }
body[data-ui-tier="s"] .pcr-card {
  position: relative; display: flex; align-items: stretch; gap: 12px; min-width: 0;
  padding: 10px 10px 10px 10px; border-radius: var(--pk-radius-card);
  background: var(--card-bg); -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
  border: 1px solid var(--card-border); box-shadow: var(--shadow-glass);
  color: var(--ink); font-family: var(--font-body);
}
body[data-ui-tier="s"] .pcr-card.is-pending { opacity: 0.72; }
/* the whole card opens the person (like the desktop card); the "+N more" pill sits above it */
body[data-ui-tier="s"] .pcr-open {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; padding: 0; margin: 0; cursor: pointer;
  border: 0; border-radius: inherit; background: transparent; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pcr-open:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }
body[data-ui-tier="s"] .pcr-card > .pcr-portrait,
body[data-ui-tier="s"] .pcr-card > .pcr-body { position: relative; z-index: 1; pointer-events: none; }

/* the portrait tile: ~110px wide, as tall as the card's text (never shorter than 3:4) */
body[data-ui-tier="s"] .pcr-portrait {
  position: relative; flex: 0 0 auto; display: block; overflow: hidden;
  width: clamp(88px, 26vw, 108px); min-height: calc(clamp(88px, 26vw, 108px) * 4 / 3); align-self: stretch;
  border-radius: var(--pk-radius-small);
  background: linear-gradient(160deg, var(--pcr-tint, var(--leaf)), color-mix(in srgb, var(--black) 62%, var(--pcr-tint, var(--leaf))));
}
body[data-ui-tier="s"] .pcr-portrait > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-ui-tier="s"] .pcr-initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--fs-38); line-height: 1; letter-spacing: var(--track-02);
  color: color-mix(in srgb, var(--white) 92%, transparent);
}
body[data-ui-tier="s"] .pcr-dot {
  position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--st-archive);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--black) 35%, transparent);
}
body[data-ui-tier="s"] .pcr-dot.is-online { background: var(--status-ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--black) 25%, transparent), 0 0 8px color-mix(in srgb, var(--status-ok) 80%, transparent); }
body[data-ui-tier="s"] .pcr-dot.is-recent { background: var(--gold-10); }

/* the text column */
body[data-ui-tier="s"] .pcr-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-top: 6px; }
body[data-ui-tier="s"] .pcr-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--fs-23); line-height: 1.05; text-transform: uppercase; letter-spacing: var(--track-02);
  color: var(--ink);
}
body[data-ui-tier="s"] .pcr-role {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px;
  font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--ink);
}
body[data-ui-tier="s"] .pcr-company {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px;
  font-size: var(--fs-13); color: var(--ink-muted);
}

/* permission pills (24px tall, ~11px text, amber outline): the admin's permission list in the person's sheet only */
body[data-ui-tier="s"] .pcr-perms { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; min-width: 0; margin-top: 8px; }
body[data-ui-tier="s"] .pcr-perm {
  display: inline-flex; align-items: center; min-width: 0; max-width: 100%; height: 24px; padding: 0 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;
  border-radius: var(--pk-radius-chip); border: 1px solid color-mix(in srgb, var(--accent) 90%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: var(--fs-11); font-weight: var(--fw-med); line-height: 1; color: var(--ink);
}

/* hairline, then "Last seen" … "Online now" / "5h ago" */
body[data-ui-tier="s"] .pcr-seen {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pk-2); min-width: 0;
  margin-top: auto; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
body[data-ui-tier="s"] .pcr-body > :nth-last-child(2) { margin-bottom: 10px; }
body[data-ui-tier="s"] .pcr-seen-label { flex: 0 0 auto; font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .pcr-seen-value {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-13); font-weight: var(--fw-med); color: var(--ink);
}
body[data-ui-tier="s"] .pcr-seen-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--status-ok); }

/* ════════ THE PERSON SHEET (the desktop's crew modal) ════════ */
body[data-ui-tier="s"] .pcr-detail-head { display: flex; align-items: flex-start; gap: var(--pk-4); min-width: 0; }
body[data-ui-tier="s"] .pcr-portrait.is-big { width: 40%; max-width: 180px; min-height: 0; aspect-ratio: 3 / 4; align-self: flex-start; }
body[data-ui-tier="s"] .pcr-portrait.is-big .pcr-initials { font-size: var(--fs-48); }
body[data-ui-tier="s"] .pcr-detail-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
body[data-ui-tier="s"] .pcr-detail-id .pcr-name { white-space: normal; overflow-wrap: anywhere; }
body[data-ui-tier="s"] .pcr-detail-id .pcr-role,
body[data-ui-tier="s"] .pcr-detail-id .pcr-company { white-space: normal; overflow-wrap: anywhere; margin-top: 0; }
body[data-ui-tier="s"] .pcr-sheet .pk-header-main { text-transform: uppercase; font-size: var(--fs-22); }
body[data-ui-tier="s"] .pcr-email { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-13); color: var(--ink-muted); }
body[data-ui-tier="s"] .pcr-detail-id .pcr-seen-value { margin-top: 4px; white-space: normal; }
body[data-ui-tier="s"] .pcr-bio { font-size: var(--fs-14); line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
body[data-ui-tier="s"] .pcr-bio.is-empty,
body[data-ui-tier="s"] .pcr-muted { font-size: var(--fs-13); color: var(--ink-muted); font-style: italic; }
body[data-ui-tier="s"] .pcr-action { font-size: var(--fs-13); line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
body[data-ui-tier="s"] .pcr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pk-3); min-width: 0; }
body[data-ui-tier="s"] .pcr-stat {
  min-width: 0; padding: 12px 14px; border-radius: var(--pk-radius-card);
  border: 1px solid var(--card-border); background: color-mix(in srgb, var(--ink) 5%, var(--card-bg-solid));
}
body[data-ui-tier="s"] .pcr-stat-num {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--fs-20); line-height: 1.1; color: var(--ink);
}
body[data-ui-tier="s"] .pcr-stat-cap { margin-top: 4px; font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--track-02); font-weight: var(--fw-semi); color: var(--ink-muted); }
/* every permission (the person's sheet, admin only) */
body[data-ui-tier="s"] .pcr-perms--all { margin-top: 0; }

/* ════════ THE MOCKUP (06-crew), MEASURED — 6 Oct 2026 ════════
   Hugo: each phone page must look EXACTLY like his mockup. Every size below is the mockup's own at 412 CSS px (spec
   06-crew), checked on the fair bench (a copy of the live data, the project's skin + photo worn) by a size table
   (ours / mockup within 0.95-1.05) and the L* of each surface. The mockup draws a phone status-bar strip above a
   floating header; our header is the shared shell's (styles/phone-shell.css), so every position below is the
   mockup's minus that strip (32 px): the band, the CREW row and the cards sit under OUR header exactly as the
   mockup's sit under its own. Corners are the phone scale (--pk-radius-*), deliberately tighter than the mockup's.
   Small controls keep a 40px TAP area through a transparent border + an equal negative margin. */

/* ── the band: PROJECT · the project name ▾ · album / video chips · DEVELOPMENT · online (this page only) ── */
/* the video chip: its name only (the mockup's "Lyrics Videos"), still a tap to switch */

/* ── the photo: vivid behind the band, then the dark rain from the CREW row down (glass skins) ── */
body[data-ui-tier="s"][data-skin-family="glass"] .main-content:has(> .pcr-page) {
  /* round 2 (measured): the sunset vivid down to the chips, then a NEUTRAL near-black from the CREW row down (mockup L* 14
     at the CREW band, no warm cast) */
  background-image: linear-gradient(to bottom, color-mix(in srgb, color-mix(in srgb, var(--shl-veil) 50%, var(--black)) 22%, transparent) 0, transparent 34px, transparent 120px,
    color-mix(in srgb, color-mix(in srgb, var(--shl-veil) 50%, var(--black)) 30%, transparent) 160px,
    color-mix(in srgb, color-mix(in srgb, var(--shl-veil) 50%, var(--black)) 42%, transparent) 200px, color-mix(in srgb, color-mix(in srgb, var(--shl-veil) 50%, var(--black)) 44%, transparent) 100%);
}
/* the cool white of the mockup's words (a dark-glass skin): titles, names and roles white, not the skin's cream */
body[data-ui-tier="s"][data-skin-family="glass"] .pcr-page { --ink: var(--white); }
body[data-ui-tier="s"][data-skin-family="glass"] .pcr-title { color: var(--white); }
/* the band's status chips (a dark-glass skin): DEVELOPMENT a slate-blue dot, no ring, a darker rim */

/* ── the page: 12px gutters, the CREW row, three cards 10 apart, the song bar above the tabs ── */
body[data-ui-tier="s"] .pcr-page .pk-page-body { gap: 9.8px; padding: 0 12.3px; flex: 1 0 auto; }
body[data-ui-tier="s"] .pcr-titlerow { display: flex; align-items: center; gap: 8.8px; min-width: 0; height: 32.3px; margin: 15px 6px 0.5px 7.4px; }
body[data-ui-tier="s"] .pcr-title {
  flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--font-display); font-size: 26.8px; font-weight: 400; line-height: 1;
  letter-spacing: 0; text-transform: uppercase; color: var(--ink-cream-7);
}
body[data-ui-tier="s"] .pcr-page .pk-iconbtn.pcr-hbtn { flex: 0 0 40px; width: 40px; height: 40px; margin: -3.85px; }
body[data-ui-tier="s"] .pcr-page .pk-iconbtn.pcr-hbtn::before {
  inset: 3.85px; background: color-mix(in srgb, color-mix(in srgb, var(--accent) 10%, var(--card-bg-solid)) 72%, transparent);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: none;
}
body[data-ui-tier="s"] .pcr-page .pk-iconbtn.pcr-hbtn > svg { width: 15px; height: 15px; }
body[data-ui-tier="s"] .pcr-list { gap: 9.8px; }
/* a card: near-solid navy glass, a thin grey rim, a drop shadow; the portrait 108 x 144, the text column at +132 */
body[data-ui-tier="s"] .pcr-card {
  gap: 0; padding: 9.4px 11px 8.5px 8.4px; border-radius: var(--pk-radius-card);
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  background: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 86%, var(--black)) 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--black) 34%, transparent);
}
/* (a dark-glass skin, round 2) translucent glass: the photo through it, a lighter sheen at the top right (mockup
   #1d2832 overall, #313336 at the top right corner) */
body[data-ui-tier="s"][data-skin-family="glass"] .pcr-card {
  background:
    linear-gradient(to bottom left, color-mix(in srgb, var(--ink-muted) 11%, transparent), transparent 46%),
    color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 92%, var(--black)) 90%, transparent);
}
/* online: the mockup's vivid green (photo dots and "Online now") */
body[data-ui-tier="s"][data-skin-family="glass"] .pcr-page { --pcr-online: color-mix(in srgb, var(--signal-green) 80%, color-mix(in srgb, var(--white) 50%, var(--gold-star))); }
body[data-ui-tier="s"][data-skin-family="glass"] .pcr-card .pcr-dot.is-online { background: var(--pcr-online); }
body[data-ui-tier="s"][data-skin-family="glass"] .pcr-card .pcr-seen-dot { background: var(--pcr-online); box-shadow: 0 0 6px color-mix(in srgb, var(--pcr-online) 50%, transparent); }
body[data-ui-tier="s"] .pcr-card > .pcr-portrait { width: 108.3px; height: 144px; min-height: 0; align-self: flex-start; border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .pcr-card .pcr-initials { font-size: 40px; letter-spacing: 0.01em; }
body[data-ui-tier="s"] .pcr-card .pcr-dot { top: 6.9px; right: 7.5px; width: 7.8px; height: 7.8px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--black) 35%, transparent); }
body[data-ui-tier="s"] .pcr-card .pcr-dot.is-online { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--black) 25%, transparent); }
body[data-ui-tier="s"] .pcr-card .pcr-body { padding: 0 0 0 13.9px; }
body[data-ui-tier="s"] .pcr-card .pcr-name { margin-top: 4.3px; font-size: 21px; line-height: 17px; letter-spacing: 0.005em; word-spacing: -1.5px; }
body[data-ui-tier="s"] .pcr-card .pcr-role { margin-top: 4.1px; font-size: 13px; line-height: 15px; font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pcr-card .pcr-company { margin-top: 3.7px; font-size: 11px; line-height: 13px; font-weight: var(--fw-med); letter-spacing: 0.02em; color: color-mix(in srgb, var(--ink) 90%, var(--ink-muted)); }
/* the hairline + Last seen … value: with no pills above it the row sits at the foot of the card, level with the foot of
   the 144px portrait (margin-top auto); the line above it never gets closer than the 10.6px the pills used to leave */
body[data-ui-tier="s"] .pcr-card .pcr-body > :nth-last-child(2) { margin-bottom: 10.6px; }
body[data-ui-tier="s"] .pcr-card .pcr-seen { margin-top: auto; padding-top: 11.6px; border-top: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent); }
body[data-ui-tier="s"] .pcr-card .pcr-seen-label { font-size: 10px; line-height: 12px; letter-spacing: 0.05em; color: color-mix(in srgb, var(--ink-muted) 72%, var(--card-bg-solid)); }
body[data-ui-tier="s"] .pcr-card .pcr-seen-value { gap: 8px; font-size: 11px; line-height: 12px; font-weight: var(--fw-med); }
body[data-ui-tier="s"] .pcr-card .pcr-seen-dot { flex: 0 0 8.5px; width: 8.5px; height: 8.5px; box-shadow: 0 0 6px color-mix(in srgb, var(--status-ok) 60%, transparent); }
/* the song bar (the Overview's PhoneOverviewPlayer, the same engine): a glass card above the tabs */
body[data-ui-tier="s"] .pcr-page .pov-player {
  bottom: 0; margin: auto -2.5px 0; height: 57.8px; min-height: 0; padding: 0 8.2px 0 9.8px; gap: 0;
  border-radius: var(--pk-radius-card); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 84%, var(--black)) 86%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--black) 30%, transparent);
}
/* (a dark-glass skin) the mockup's song bar is a warm-neutral dark glass (#2b2622), a notch warmer than the cards */
body[data-ui-tier="s"][data-skin-family="glass"] .pcr-page .pov-player {
  background: color-mix(in srgb, color-mix(in srgb, var(--black) 78%, color-mix(in srgb, var(--ink-muted) 60%, var(--amber))) 88%, transparent);
}
/* the bar ends 6.4px above the bottom bar, after the cards (the mockup's rhythm) */
body[data-ui-tier="s"] .main-content > .pk-page.pcr-page { padding-bottom: 6.4px; }
body[data-ui-tier="s"] .pcr-page .pov-player-pic { flex: 0 0 51.4px; width: 51.4px; height: 45.1px; border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .pcr-page .pov-player-text { margin-left: 11.3px; gap: 3px; }
body[data-ui-tier="s"] .pcr-page .pov-player-title { font-size: 10.7px; line-height: 14px; font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pcr-page .pov-player-album { font-size: 10.5px; line-height: 13px; color: color-mix(in srgb, var(--ink-muted) 80%, var(--ink)); }
body[data-ui-tier="s"] .pcr-page .pov-player-btn { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; }
body[data-ui-tier="s"] .pcr-page .pov-player-btn svg { width: 25.8px; height: 25.8px; }
body[data-ui-tier="s"] .pcr-page .pov-player-btn:nth-of-type(1) { margin-right: 9.3px; }
body[data-ui-tier="s"] .pcr-page .pov-player-play {
  flex-basis: 40px; width: 40px; height: 40px; border: 1px solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1.2px color-mix(in srgb, color-mix(in srgb, var(--amber) 70%, var(--ink-muted)) 90%, var(--black));
  background-color: color-mix(in srgb, var(--white) 5%, transparent); color: var(--ink);
}
body[data-ui-tier="s"] .pcr-page .pov-player-play svg { width: 18px; height: 18px; }
/* (a dark-glass skin) the mockup's glyphs are a warm cream (prev / next 252,239,205, pause 250,236,203) */
body[data-ui-tier="s"][data-skin-family="glass"] .pcr-page .pov-player-btn { color: color-mix(in srgb, var(--gold-star) 25%, var(--ink)); }
body[data-ui-tier="s"] .pcr-page .pov-player-btn:nth-of-type(3) { margin-left: 8.95px; margin-right: 0; }
/* the songs list (☰) is the Overview's: this page's bar is the mockup's three buttons */
body[data-ui-tier="s"] .pcr-page .pov-player-btn:nth-of-type(4) { display: none; }


/* the page's material (not the shell): no desktop sheen on the page container (the CLOSED side drawer's shadow over the
   page's left edge is gone for every phone page: responsive.css, main b94d604). Phone tier only, written like the Agent
   page's (phone-agent.css): the phone has no rail, so the desktop panel's lit edge is not drawn here - the mockup has none */
body[data-ui-tier="s"] .main-content:has(> .pcr-page) { box-shadow: none; }