/* styles/phone-shell.css — THE PHONE SHELL (6 Oct 2026, phone page group 5): the header every phone page shares,
   the project context row, the bottom navigation, the side menu, search and notifications, built to Hugo's phone
   mockups (DESIGN-SPEC: a 52px compact glass header row - hamburger, the TrueNorths wordmark, search, notifications,
   profile; a compact project row; a condensed uppercase page heading; a bottom bar Overview, Shots, Assets, Review,
   Social with line icons and an amber active state).
   - Phone tier only: every rule sits under body[data-ui-tier="s"]; the desktop never sees any of it.
   - Tokens only (no hex / rgb / hsl); every skin supplies them.
   - Loaded after mobile.css and the kit, so these rules win their ties.
   - The wordmark stands alone: never an icon or ornament next to it (test/brandNoIcon.test.js). */

/* THE SHELL, MEASURED (7 Oct 2026). The last round of page judges failed EVERY phone page on the same shared parts
   (a 48px bar with ~13px icons where the mockups draw ~60px with ~18px icons; search and bell on discs the mockups
   mostly do not have; a 44px header; a band ~1.4x the mockups'), so the header, the project band and the bottom bar
   were measured ONCE on all 28 of Hugo's phone mockups (each one's first panel scaled to 412 CSS px; the MEDIAN of
   every measure, mockups vary a little) and every page inherits them from here. Glyph sizes are DRAWN sizes (the
   ink, not the svg box); the 40px tap areas stay (transparent borders / invisible boxes), the visual sizes follow
   the mockups. */
body[data-ui-tier="s"] {
  /* (8 Oct 2026) the bottom bar is mockup 03's FLOATING bar: 46px tall, 6 above the screen's foot (+ the phone's
     home-indicator inset), 16 in from each side; the page ends 2px above it. --mtab-h is the room the page leaves at
     the bottom (BOTTOM NAVIGATION below; the bar hidden: only the inset) */
  --shl-tab-h: 46px; --shl-tab-gap: 6px; --shl-tab-inset: 16px;
  --mtab-h: calc(var(--shl-tab-h) + var(--shl-tab-gap) + 2px + env(safe-area-inset-bottom, 0px));
  --shl-hdr-h: 48px;            /* the header row: the mockups' icon row is centred at 24 (median of 19) */
  --shl-glass: color-mix(in srgb, var(--card-bg-solid) 72%, transparent);
  --shl-glass-strong: color-mix(in srgb, var(--card-bg-solid) 88%, transparent);
  --shl-line: color-mix(in srgb, var(--ink) 14%, transparent);
  --shl-amber: var(--accent);   /* the skin's own accent: amber in the rain skin, sage in the forest skins */
  --shl-on-amber: var(--card-bg-solid);
}

/* ════════ HEADER BAR — mockup 03's "proper section" (8 Oct 2026): ☰  TRUENORTHS ··· search · bell | avatar ════════
   Hugo (page 03): "the bar at the very top is great on the mockup too with a proper section, it's a bit cleaner than
   what we have". ONE rounded glass panel, inset from the screen's edges, holds the row; a hairline divider stands
   before the avatar. Measured on mockup 03 (its first panel at 412 CSS px): the panel x 22.75 -> 390.25 (here 23 ->
   390), 34.2 tall, corner 9 (here the card token, 8: tighter on purpose); the ☰ drawn 13 x 11 from x 34.75; the
   wordmark's capitals 14 tall and 61 wide from x 63.5 (the mockup's face is a condensed one: ours is drawn 79% wide);
   search 13.75 x 13.5 centred at x 288.6; the bell 13 x 14 at 326.5; the divider 1 x 26 at 346.6; the avatar 22 round
   centred at 368.5 with a thin lit ring. The panel sits in the 48px header row (7 above, 7 below, the row centred at
   24 as before), so the project band under it keeps the Overview's place. The 40px tap areas stay (the buttons
   overflow the 34px panel, transparent). The menu's and the notifications' own header row (.shl-bar) is the same. */
body[data-ui-tier="s"] {
  --shl-top-fill: color-mix(in srgb, var(--card-bg-solid) 72%, transparent);   /* a pale skin: its own card glass */
  --shl-top-rim: color-mix(in srgb, var(--ink) 14%, transparent);
  --shl-top-div: color-mix(in srgb, var(--ink) 22%, transparent);
}
body[data-ui-tier="s"][data-skin-family="glass"] {
  /* mockup 03: a NEUTRAL dark glass that lets the photo through, darkened (the photo L* 31 -> 17 and 65 -> 36 under
     it): the page colour, lifted a notch and greyed, at 62% over a 16px blur; a faint pale rim; a fainter divider */
  --shl-top-fill: color-mix(in srgb, oklch(from var(--bg) calc(l + 0.05) calc(c * 0.2) h) 62%, transparent);
  --shl-top-rim: color-mix(in srgb, var(--white) 9%, transparent);
  --shl-top-div: color-mix(in srgb, var(--white) 14%, transparent);
}
/* (the desktop main panel's lit top edge would draw a line across the screen's top over the photo: none on the phone,
   the back panel carries the rim, THE BACK PANEL below) */
body[data-ui-tier="s"] .main-content { padding-top: 0; gap: 6px; box-shadow: none; }
body[data-ui-tier="s"] .project-header { padding: 0; gap: 0; }
body[data-ui-tier="s"] .phm-bar {
  box-sizing: border-box; height: 34px; gap: 2px; padding: 0; margin: 7px 12px 7px 13px;
  border: 0; border-radius: var(--pk-radius-card);
  background: var(--shl-top-fill); box-shadow: inset 0 0 0 1px var(--shl-top-rim);
  backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
}
body[data-ui-tier="s"] .phm-burger {
  flex: 0 0 40px; width: 40px; height: 40px; margin: -3px 0 -3px -2px; border-radius: 50%; border: 0; background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ink);
}
body[data-ui-tier="s"] .phm-burger:active { background: color-mix(in srgb, var(--ink) 12%, transparent); }
body[data-ui-tier="s"] .phm-burger svg { width: 17.5px; height: 17.5px; }
body[data-ui-tier="s"] .phm-word {
  font-size: 20px; line-height: 1; letter-spacing: 0; color: var(--ink); white-space: nowrap;
  transform: scaleX(0.79); transform-origin: 0 50%;
}
/* search · bell | avatar on the panel's right: 40px to tap, the glyphs BARE. Their tap boxes stand where the mockup's
   glyphs are centred (289 · 327 · 369): search and bell overlap 2px, the divider sits in the 2px before the avatar */
body[data-ui-tier="s"] .ph-right {
  top: calc((var(--shl-hdr-h) - 40px) / 2); right: 13px; margin: 0; height: 40px; gap: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-ui-tier="s"] .project-header .ph-right .ph-search-anchor { margin-right: -2px; }
body[data-ui-tier="s"] .project-header .ph-right .ph-anchor--avatar { position: relative; margin-left: 2px; }
body[data-ui-tier="s"] .project-header .ph-right .ph-anchor--avatar::before {
  content: ""; position: absolute; left: -2.5px; top: 8.5px; width: 1px; height: 26px; background: var(--shl-top-div); pointer-events: none;
}
body[data-ui-tier="s"] .ph-right .ph-anchor:not(.ph-scale-anchor),
body[data-ui-tier="s"] .ph-right .ph-search-anchor { display: flex; align-items: center; }
/* the style and app-scale pills stay off the phone (as before) */
body[data-ui-tier="s"] .project-header .ph-right .ph-scale-anchor,
body[data-ui-tier="s"] .project-header .ph-right .ph-iconbtn[aria-label="Refresh now"] { display: none; }
/* while the menu or notifications is open its own header row draws on top: the app's row steps aside (search opens
   UNDER the header + band: they stay) */
body[data-ui-tier="s"].shl-open:not(.shl-open--search) .project-header .phm-bar,
body[data-ui-tier="s"].shl-open:not(.shl-open--search) .project-header .ph-right { visibility: hidden; }
body[data-ui-tier="s"] .project-header .ph-right .ph-iconbtn,
body[data-ui-tier="s"] .project-header .ph-right .ph-search-pill,
body[data-ui-tier="s"] .project-header .ph-right .ph-search-iconbtn {
  width: 40px; height: 40px; min-width: 40px; padding: 0; margin: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 3px solid transparent; background-clip: padding-box;
  border-radius: 50%; background-color: transparent; background-image: none; color: var(--ink);
  display: grid; place-items: center;
}
/* the search pill is only a frame on the phone: its button is the 40px target */
body[data-ui-tier="s"] .project-header .ph-right .ph-search-pill { border: 0; background-color: transparent; }
/* drawn (mockup 03): search 13.75 x 13.5, the bell with its clapper 13 x 14 */
body[data-ui-tier="s"] .ph-right .ph-iconbtn svg { width: 18.2px; height: 18.2px; }
body[data-ui-tier="s"] .ph-right .ph-search-iconbtn svg { width: 19.4px; height: 19.4px; }
body[data-ui-tier="s"] .ph-right .ph-iconbtn.is-open,
body[data-ui-tier="s"] .ph-right .ph-iconbtn:active,
body[data-ui-tier="s"] .ph-right .ph-search-iconbtn:active { background-color: color-mix(in srgb, var(--ink) 16%, transparent); }
body[data-ui-tier="s"] .ph-right .ph-bell-dot { top: 8px; right: 9px; background: var(--shl-amber); }
body[data-ui-tier="s"] .project-header .ph-right .ph-avatar {
  width: 40px; height: 40px; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  display: grid; place-items: center; border-radius: 50%;
}
/* the avatar: 22 round, a thin lit ring (mockup 03) */
body[data-ui-tier="s"] .ph-right .ph-avatar .ph-initials { width: 22px; height: 22px; font-size: 9px; box-shadow: 0 0 0 1px var(--shl-lit, var(--shl-amber)); }
body[data-ui-tier="s"] .ph-right .ph-avatar-caret { display: none; }

/* ════════ THE PROJECT BAND ════════ */
/* Under the bar, over the project photo (no box): a small tracked eyebrow = the PAGE ("SOCIAL", "ASSETS"; "PROJECT"
   on the Overview), the project's name in condensed type with a small ▾ (the project switcher), the album / song /
   video selectors small under it, and on the right the page's primary action (window.usePhoneBandAction, e.g.
   Social's "New post"). The Overview adds the status + online pills. Pages do not repeat a heading under it.
   The selector pills WRAP (a sideways scroller would clip their drop-down lists) and every list opens full width
   under the band: .ph-episode is static on the phone, so .ph-project anchors it.
   Measured (7 Oct 2026, the mockups' medians): the eyebrow's capitals 6.3 tall (8.9px), 33 below the header row's
   centre, from x 21; the title's capitals 24.5 tall (32.3px), 14 under the eyebrow; ONE row of selector chips and
   the status + online pills 9.5 under the title, every chip 20 tall (8px type; the pills 7.3px). */
body[data-ui-tier="s"] .project-header .ph-left,
body[data-ui-tier="s"] .project-header.phm-collapsed .ph-left { display: block; position: relative; margin-top: 0; }   /* (mobile.css hid it on every page but the Overview) */
body[data-ui-tier="s"] .project-header .ph-project { position: relative; padding: 6.8px 2px 0 10px; }
body[data-ui-tier="s"] .project-header .ph-eyebrow {
  display: block; margin: 0 0 2.3px; font-size: 8.9px; font-weight: var(--fw-semi); line-height: 1.2;
  letter-spacing: var(--track-18); text-transform: uppercase; color: color-mix(in srgb, var(--ink-cream-7) 82%, transparent);
}
body[data-ui-tier="s"] .project-header .ph-title-row {
  display: flex; align-items: center; gap: 8px; width: auto; max-width: 100%; min-width: 0; margin: 0; padding: 0;
  border: 0; background: transparent;
}
body[data-ui-tier="s"].shl-band-act .project-header .ph-title-row { max-width: calc(100% - var(--shl-band-act-w, 120px) - 8px); }
body[data-ui-tier="s"] .project-header .ph-title {
  min-width: 0; font-size: 32.3px; line-height: 1; letter-spacing: 0; color: var(--ink-cream-7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-ui-tier="s"] .project-header .ph-title--logo { height: 32px; width: auto; max-width: 240px; }
body[data-ui-tier="s"] .project-header .ph-caret {
  flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--pk-radius-control);
  background: color-mix(in srgb, var(--card-bg-solid) 78%, transparent); border: 1px solid var(--shl-line); color: var(--ink);
}
body[data-ui-tier="s"] .project-header .ph-caret svg { width: 13px; height: 13px; }
body[data-ui-tier="s"] .project-header .ph-subtitle,
body[data-ui-tier="s"] .project-header .ph-meta-sep { display: none; }
body[data-ui-tier="s"] .project-header .ph-switch-group { display: contents; }
/* ONE row (the mockups 01 / 05 / 06 / 15 / 16): the selectors give way (their names end in an ellipsis), the pills keep
   their words, nothing passes the right edge */
body[data-ui-tier="s"] .project-header .ph-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 5px; margin-top: 4.4px; overflow: visible; }
body[data-ui-tier="s"] .project-header .ph-meta > *,
body[data-ui-tier="s"] .project-header .ph-episode { flex: 0 1 auto; min-width: 0; max-width: 100%; }
body[data-ui-tier="s"] .project-header .ph-episode { position: static; }
/* a selector chip: 20px to see, 40px to tap (a transparent 10px top / bottom border given back by the margin), the
   name cut with an ellipsis */
body[data-ui-tier="s"] .project-header .ph-switch-chip {
  display: inline-flex; align-items: center; gap: 3px; max-width: 100%; min-width: 0; height: 40px; min-height: 40px; padding: 0 7px; margin: -10px 0;
  border: 10px 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) + 10px); background-color: color-mix(in srgb, var(--card-bg-solid) 74%, transparent); box-shadow: inset 0 0 0 1px var(--shl-line);
  font-family: var(--font-body); font-size: 8px; font-weight: var(--fw-semi); color: var(--ink); white-space: nowrap; cursor: pointer;
}
body[data-ui-tier="s"] .project-header .ph-switch-chip svg { width: 9px; height: 9px; }
body[data-ui-tier="s"] .project-header .ph-switch-chip .ph-episode-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .project-header .ph-switch-chip.is-open { box-shadow: inset 0 0 0 1px var(--shl-amber); }
body[data-ui-tier="s"] .project-header .ph-episode-menu {
  left: 0; right: 0; top: calc(100% + 4px); width: auto; min-width: 0; max-height: 60vh; overflow-y: auto;
}
/* status + online: every page (8 of the 13 mockups with a project title show them), the chip's own small shape (not
   buttons), on the selectors' row */
body[data-ui-tier="s"] .project-header .ph-status-pill,
body[data-ui-tier="s"] .project-header .ph-online-pill {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; height: 20px; min-height: 20px; padding: 0 7px; margin: 0;
  border-radius: var(--pk-radius-chip); background: color-mix(in srgb, var(--card-bg-solid) 74%, transparent); border: 1px solid var(--shl-line);
  font-size: 7.3px; font-weight: var(--fw-semi); letter-spacing: var(--track-06); color: var(--ink); white-space: nowrap;
}
body[data-ui-tier="s"] .project-header .ph-online { display: inline-flex; flex: 0 0 auto; padding: 10px 0; margin: -10px 0; }
body[data-ui-tier="s"] .project-header .ph-online-avatars,
body[data-ui-tier="s"] .project-header .ph-online-names { display: none; }
body[data-ui-tier="s"] .project-header .ph-status-pill .ph-pill-dot,
body[data-ui-tier="s"] .project-header .ph-online-pill .ph-online-dot { width: 5px; height: 5px; }
body[data-ui-tier="s"] .project-header .ph-project-others { flex: 1 1 100%; }
/* the page's primary action, on the band's right at the title line (src/PhoneShell.jsx PhoneBandAction); mockup 09's
   "New post": 84 x 29, 9px type, its right edge at x 396 (40px to tap: a transparent 6px top / bottom border) */
body[data-ui-tier="s"] .shl-band-act-btn {
  position: absolute; right: 6px; top: 13.5px; z-index: 1; max-width: 46%;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 41px; min-height: 41px; padding: 0 20px; margin: 0; cursor: pointer;
  border: 6px 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) + 6px);
  background-color: var(--shl-amber); color: var(--shl-on-amber); box-shadow: none;
  font-family: var(--font-body); font-size: 9px; font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .shl-band-act-btn:disabled { opacity: 0.5; cursor: default; }
body[data-ui-tier="s"] .shl-band-act-btn svg { flex: 0 0 auto; width: 11px; height: 11px; }

/* ════════ PAGE HEADING + GLASS (opt-in for phone pages: <PhonePage className="pk-page--glass">) ════════ */
/* the page runs over the project photo; the heading is a condensed uppercase title on the photo; panels are
   dark frosted glass cards (.shl-glass) with a 14px radius and a thin translucent edge */
body[data-ui-tier="s"] .main-content > .pk-page.pk-page--glass { background: transparent; margin: 0 -10px; }
body[data-ui-tier="s"] .pk-page--glass > .pk-header { position: relative; background: transparent; min-height: 44px; padding-top: 0; padding-bottom: 0; }
body[data-ui-tier="s"] .pk-page--glass > .pk-header .pk-header-main {
  font-size: 28px; line-height: 1; letter-spacing: var(--track-02); text-transform: uppercase; color: var(--ink-cream-7);
}
body[data-ui-tier="s"] .pk-page--glass > .pk-header .pk-header-sub { color: color-mix(in srgb, var(--ink-cream-7) 72%, transparent); }
body[data-ui-tier="s"] .pk-page--glass > .pk-header .pk-iconbtn { color: var(--ink-cream-7); }
body[data-ui-tier="s"] .pk-page--glass { gap: var(--pk-3); }
body[data-ui-tier="s"] .pk-page--glass > .pk-page-body { gap: var(--pk-3); }
body[data-ui-tier="s"] .shl-glass {
  min-width: 0; padding: 14px; border-radius: var(--pk-radius-card);
  background: var(--shl-glass); border: 1px solid var(--shl-line);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--shade-42) 26%, transparent);
  color: var(--ink);
}
/* small uppercase card labels with modest tracking (the mockups' "PEOPLE IN THIS PROJECT", "TIME & USAGE") */
body[data-ui-tier="s"] .shl-label {
  margin: 0; font-family: var(--font-body); font-size: var(--fs-12); font-weight: var(--fw-bold);
  letter-spacing: var(--track-16); text-transform: uppercase; color: var(--ink);
}
body[data-ui-tier="s"] .shl-meta { font-size: var(--fs-13); color: var(--ink-muted); }

/* ════════ BOTTOM NAVIGATION — mockup 03's floating glass bar (8 Oct 2026) ════════
   Hugo (page 03): "i actually like how the navigation bar at the bottom is layed out. much better than what we have.
   let's copy that for every page". Measured on mockup 03 (its first panel at 412 CSS px): ONE rounded glass bar 16
   in from each side and 5.75 above the screen's foot, 46.25 tall, corner 14 (here the card token, 8: tighter on
   purpose), a lit hairline rim (warm on its top edge: L* 42 b* 16; L* 31 at its sides), the glass a notch lighter at
   its top (L* 15 neutral -> 11 cool at its foot); five equal tabs (76 wide): the glyph drawn ~13 x 13 with its top 9
   under the bar's top, the label's capitals 6.25 tall (28.5 under the top), near white; the active tab a rounded
   TILE 60 x 43.5 (1.5 under the top, corner 11 -> the card token) with a thin accent outline and a warm accent fill
   (L* 33 at its top, 24 in its middle, 26.5 at its foot), its glyph and label lit. Offsets are WHOLE px where a glyph
   is concerned: Chrome paints the fixed bar's glyphs on whole CSS px. The skin's own accent everywhere: amber in the
   rain skin, sage in Paradise Found's forest skins. The bar can be hidden (Settings > Preferences > Bottom bar). */
body[data-ui-tier="s"] {
  /* a pale skin (forest, the paper family): its own pale card glass, the active ink the accent deepened with the ink */
  --shl-tab-top: color-mix(in srgb, var(--card-bg-solid) 94%, var(--white));
  --shl-tab-bot: var(--card-bg-solid);
  --shl-tab-mid: color-mix(in srgb, var(--shl-tab-top) 50%, var(--shl-tab-bot));
  --shl-tab-alpha: 92%;
  --shl-tab-rim: color-mix(in srgb, var(--ink) 16%, transparent);
  --shl-tab-lit: color-mix(in srgb, var(--accent) 40%, transparent);
  --shl-tab-shade: color-mix(in srgb, var(--shade-42) 30%, transparent);
  --shl-tab-ink: color-mix(in srgb, var(--ink) 78%, transparent);
  --shl-tab-label: color-mix(in srgb, var(--ink) 78%, transparent);
  --shl-tab-on-ink: color-mix(in srgb, var(--shl-amber) 58%, var(--ink));
  --shl-tab-on-label: color-mix(in srgb, var(--shl-amber) 58%, var(--ink));
  --shl-tile-top: color-mix(in srgb, var(--shl-amber) 26%, var(--shl-tab-top));
  --shl-tile-mid: color-mix(in srgb, var(--shl-amber) 16%, var(--shl-tab-mid));
  --shl-tile-bot: color-mix(in srgb, var(--shl-amber) 20%, var(--shl-tab-bot));
  --shl-tile-rim: color-mix(in srgb, var(--shl-amber) 55%, var(--shl-tab-mid));
  --shl-tile-glow: color-mix(in srgb, var(--shl-amber) 26%, transparent);
}
body[data-ui-tier="s"][data-skin-family="glass"] {
  /* the mockup's dark glass, from the skin's page colour: the top a lifted neutral (rain: 38,38,37), the middle and the
     foot the page lifted a little (27,32,37 / 23,30,36) */
  --shl-tab-top: oklch(from var(--bg) calc(l + 0.082) calc(c * 0.07) h);
  --shl-tab-mid: oklch(from var(--bg) calc(l + 0.053) calc(c * 0.4) h);
  --shl-tab-bot: oklch(from var(--bg) calc(l + 0.041) calc(c * 0.46) h);
  --shl-tab-alpha: 94%;
  --shl-tab-rim: color-mix(in srgb, var(--white) 20%, transparent);
  --shl-tab-lit: color-mix(in srgb, var(--shl-lit) 8%, transparent);
  --shl-tab-shade: color-mix(in srgb, var(--black) 38%, transparent);
  --shl-tab-ink: var(--shl-c1);
  --shl-tab-label: color-mix(in srgb, var(--shl-c1) 50%, var(--shl-c2));
  --shl-tab-on-ink: color-mix(in srgb, var(--shl-lit-ink) 70%, var(--white));
  --shl-tab-on-label: var(--shl-lit);
  /* the tile: the accent over the bar's own glass (33% at the top, 21% in the middle, 26% at the foot), the outline 45% */
  --shl-tile-top: color-mix(in srgb, var(--shl-amber) 33%, var(--shl-tab-top));
  --shl-tile-mid: color-mix(in srgb, var(--shl-amber) 21%, var(--shl-tab-mid));
  --shl-tile-bot: color-mix(in srgb, var(--shl-amber) 26%, var(--shl-tab-bot));
  --shl-tile-rim: color-mix(in srgb, var(--shl-amber) 45%, var(--shl-tab-mid));
  --shl-tile-glow: color-mix(in srgb, var(--shl-amber) 30%, transparent);
}
body[data-ui-tier="s"] .mtab-bar {
  left: var(--shl-tab-inset); right: var(--shl-tab-inset); bottom: calc(var(--shl-tab-gap) + env(safe-area-inset-bottom, 0px));
  height: var(--shl-tab-h); gap: 0; padding: 0;
  align-items: stretch; justify-content: space-around; pointer-events: auto;
  border: 0; border-radius: var(--pk-radius-card);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--shl-tab-top) var(--shl-tab-alpha), transparent),
    color-mix(in srgb, var(--shl-tab-mid) var(--shl-tab-alpha), transparent) 50%, color-mix(in srgb, var(--shl-tab-bot) var(--shl-tab-alpha), transparent));
  box-shadow: inset 0 0 0 1px var(--shl-tab-rim), inset 0 1px 0 var(--shl-tab-lit), 0 10px 24px var(--shl-tab-shade);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
body[data-ui-tier="s"] .mtab-bar .mtab {
  position: relative; isolation: isolate; flex: 1 1 0; width: auto; min-width: 0; height: 100%; padding: 7px 2px 0; gap: 2px;
  justify-content: flex-start;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--shl-tab-ink);
}
/* (a paper skin paints its inactive captions cream for the old dark chrome; the bar is the skin's own glass now) */
body[data-ui-tier="s"] .mtab-bar .mtab:not(.is-active) { color: var(--shl-tab-ink); }
body[data-ui-tier="s"] .mtab-icon svg { width: 18px; height: 18px; stroke: currentColor; }
body[data-ui-tier="s"] .mtab-label { font-size: 8.4px; line-height: 10px; font-weight: var(--fw-reg, 400); letter-spacing: -0.2px; color: var(--shl-tab-label); }
body[data-ui-tier="s"] .mtab-bar .mtab.is-active {
  color: var(--shl-tab-on-ink); background: transparent; border: 0; box-shadow: none;
}
body[data-ui-tier="s"] .mtab.is-active .mtab-icon svg { stroke: currentColor; }
body[data-ui-tier="s"] .mtab.is-active .mtab-label { color: var(--shl-tab-on-label); font-weight: var(--fw-semi); }
/* the active tile behind the glyph and the label: a thin accent outline, a warm accent fill, a soft glow round it */
body[data-ui-tier="s"] .mtab-bar .mtab.is-active::before {
  content: ""; position: absolute; z-index: -1; left: 8px; right: 8px; top: 1px; bottom: 1px;
  border-radius: var(--pk-radius-card);
  background: linear-gradient(to bottom, var(--shl-tile-top), var(--shl-tile-mid) 55%, var(--shl-tile-bot));
  box-shadow: inset 0 0 0 1px var(--shl-tile-rim);
  filter: drop-shadow(0 0 5px var(--shl-tile-glow));
}
body[data-ui-tier="s"] .mtab-bar .mtab.is-active::after { content: none; }
body[data-ui-tier="s"] .mtab-bar .mtab:active { background: transparent; }
body[data-ui-tier="s"] .mtab-bar .mtab:not(.is-active):active .mtab-icon { opacity: 0.7; }
/* the bar hidden (Settings > Preferences > Bottom bar; src/MobileChrome.jsx sets body.shl-nobar): the page takes the
   room down to the phone's own bottom inset (the side menu ☰ moves between the pages) */
body[data-ui-tier="s"].shl-nobar { --mtab-h: env(safe-area-inset-bottom, 0px); }

/* ════════ OVERLAYS: side menu, search, notifications ════════ */
/* they sit above the page and below the tab bar's line, inside #app (#modal-root's styled confirms stay on top) */
body[data-ui-tier="s"] .shl-overlay {
  position: fixed; left: 0; right: 0; top: 0; bottom: var(--mtab-h); z-index: calc(var(--z-mobile-nav) - 1);
  display: flex; flex-direction: column; min-width: 0; color: var(--ink); font-family: var(--font-body);
  padding: env(safe-area-inset-top, 0px) 0 0;
}
/* the backdrop: the project photo still glows through, dimmed */
body[data-ui-tier="s"] .shl-overlay-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--card-bg-solid) 62%, transparent);
  backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05);
}
body[data-ui-tier="s"] .shl-overlay--menu .shl-overlay-scrim {
  background: color-mix(in srgb, var(--card-bg-solid) 80%, transparent);
  backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1);
}
/* the overlay's own header row: the app's header panel exactly (HEADER BAR above, mockup 03): the rounded glass panel
   x 23 -> 390, 34 tall, 7 under the screen's top; ☰ / ✕ centred at x 41, the wordmark from 63, search · bell | avatar
   centred at 289 · 327 · 369 (search and bell overlap 2px, the divider in the 2px before the avatar) */
body[data-ui-tier="s"] .shl-bar {
  box-sizing: border-box; flex: 0 0 auto; display: flex; align-items: center; gap: 0; height: 34px; margin: 7px 22px 7px 23px; padding: 0 1px 0 0;
  border: 0; border-radius: var(--pk-radius-card);
  background: var(--shl-top-fill); box-shadow: inset 0 0 0 1px var(--shl-top-rim);
  backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
}
body[data-ui-tier="s"] .shl-bar-word {
  flex: 1 1 auto; min-width: 0; margin-left: 2px; font-family: var(--font-display); font-size: 20px; line-height: 1;
  letter-spacing: 0; color: var(--ink); white-space: nowrap; transform: scaleX(0.79); transform-origin: 0 50%;
}
body[data-ui-tier="s"] .shl-bar > .shl-iconbtn { margin-top: -3px; margin-bottom: -3px; }
body[data-ui-tier="s"] .shl-bar > .shl-iconbtn:first-child { margin-left: -2px; }
body[data-ui-tier="s"] .shl-bar > .shl-iconbtn[aria-label="Search"] { margin-right: -2px; }
body[data-ui-tier="s"] .shl-bar-div { flex: 0 0 1px; width: 1px; height: 26px; margin: 1.5px 1.5px 0 -0.5px; background: var(--shl-top-div); }
body[data-ui-tier="s"] .shl-bar > .shl-iconbtn:first-child svg { width: 17.5px; height: 17.5px; }
body[data-ui-tier="s"] .shl-bar > .shl-iconbtn[aria-label="Search"] svg { width: 19.4px; height: 19.4px; }
body[data-ui-tier="s"] .shl-bar > .shl-iconbtn[aria-label="Notifications"] svg { width: 18.2px; height: 18.2px; }
body[data-ui-tier="s"] .shl-iconbtn {
  flex: 0 0 40px; width: 40px; height: 40px; padding: 0; margin: 0; display: grid; place-items: center; position: relative;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .shl-iconbtn:active { background: color-mix(in srgb, var(--ink) 12%, transparent); }
body[data-ui-tier="s"] .shl-iconbtn .shl-dot { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--shl-amber); }
body[data-ui-tier="s"] .shl-avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--shl-amber) 70%, var(--card-bg-solid)); color: var(--shl-on-amber);
  font-size: 9px; font-weight: var(--fw-bold); background-size: cover; background-position: center;
  box-shadow: 0 0 0 1px var(--shl-lit, var(--shl-amber)); }

body[data-ui-tier="s"] .shl-scroll {
  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: 12px; padding: 4px 16px 20px;
}

/* the floating card of search / notifications: heading + ✕, then its content */
body[data-ui-tier="s"] .shl-panel {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border-radius: var(--pk-radius-card);
  background: var(--shl-glass-strong); border: 1px solid var(--shl-line);
  backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--shade-42) 40%, transparent);
}
body[data-ui-tier="s"] .shl-panel-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
body[data-ui-tier="s"] .shl-panel-title {
  flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-size: 24px; line-height: 1; letter-spacing: var(--track-02);
  text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-ui-tier="s"] .shl-close {
  flex: 0 0 44px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--pk-radius-control); border: 1px solid var(--shl-line); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink);
}
body[data-ui-tier="s"] .shl-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 8px; color: var(--ink-muted); font-size: var(--fs-14); text-align: center; }
body[data-ui-tier="s"] .shl-empty svg { color: var(--ink-muted); }
body[data-ui-tier="s"] .shl-hint { text-align: center; font-size: var(--fs-13); color: var(--ink-muted); }

/* pills (search scopes): 40px to tap, outlined; the picked one amber */
body[data-ui-tier="s"] .shl-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* 40px to tap, 34px to see (a transparent top / bottom border; the outline is an inset ring) */
body[data-ui-tier="s"] .shl-pill {
  min-height: 40px; padding: 0 16px; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 3px); cursor: pointer;
  border: 3px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  background-color: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--shl-line); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-med); white-space: nowrap;
}
body[data-ui-tier="s"] .shl-pill.is-on { background-color: var(--shl-amber); box-shadow: none; color: var(--shl-on-amber); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .shl-pill-n { margin-left: 6px; opacity: 0.7; font-variant-numeric: tabular-nums; }

/* ── SIDE MENU (26) ── */
body[data-ui-tier="s"] .shl-proj {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px 0 6px; margin: 0; cursor: pointer;
  border-radius: var(--pk-radius-control); border: 1px solid var(--shl-line); background: var(--shl-glass); color: var(--ink); text-align: left;
}
body[data-ui-tier="s"] .shl-proj-mark {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--pk-radius-small); display: grid; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--shl-amber) 30%, var(--card-bg-solid)); color: var(--shl-amber);
  font-family: var(--font-display); font-size: 18px;
}
body[data-ui-tier="s"] .shl-proj-mark img { width: 100%; height: 100%; object-fit: contain; }
body[data-ui-tier="s"] .shl-proj-name { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-size: 20px; line-height: 1; letter-spacing: var(--track-02);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
body[data-ui-tier="s"] .shl-proj-caret { flex: 0 0 auto; color: var(--ink-muted); transition: transform 0.15s; }
body[data-ui-tier="s"] .shl-proj.is-open .shl-proj-caret { transform: rotate(180deg); }
body[data-ui-tier="s"] .shl-projlist { display: flex; flex-direction: column; gap: 6px; }
body[data-ui-tier="s"] .shl-projlist-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; margin: 0; cursor: pointer; text-align: left;
  border-radius: var(--pk-radius-row); border: 1px solid var(--shl-line); background: color-mix(in srgb, var(--card-bg-solid) 60%, transparent); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-semi);
}
body[data-ui-tier="s"] .shl-projlist-item span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .shl-projlist-item .shl-meta { flex: 0 0 auto; }
/* 26 Oct 2026 — favourites (src/PhoneShell.jsx ShlProjList): the Current / All tabs (PhoneTabs) over the list, a star
   beside every row (the row's own look, 48px square), the open project ringed like an open chip. The list is ALWAYS three
   rows tall, on both tabs, and scrolls inside past three, so the MENU under it never moves when the tab changes. */
body[data-ui-tier="s"] .shl-projpanel { display: flex; flex-direction: column; gap: 4px; }
body[data-ui-tier="s"] .shl-projlist {
  --shl-projlist-row-h: 48px; --shl-projlist-gap: 6px; --shl-projlist-rows: 3;
  box-sizing: border-box; height: calc(var(--shl-projlist-rows) * var(--shl-projlist-row-h) + (var(--shl-projlist-rows) - 1) * var(--shl-projlist-gap));
  gap: var(--shl-projlist-gap); overflow-y: auto; overscroll-behavior-y: contain;
}
body[data-ui-tier="s"] .shl-projlist > * { flex: 0 0 auto; }
body[data-ui-tier="s"] .shl-projlist-row { display: flex; align-items: stretch; gap: 6px; height: var(--shl-projlist-row-h); }
body[data-ui-tier="s"] .shl-projlist-row > .shl-projlist-item { flex: 1 1 auto; min-width: 0; width: auto; }
body[data-ui-tier="s"] .shl-projlist-item.is-active { box-shadow: inset 0 0 0 1px var(--shl-amber); }
body[data-ui-tier="s"] .shl-projstar {
  flex: 0 0 var(--shl-projlist-row-h); width: var(--shl-projlist-row-h); display: grid; place-items: center; padding: 0; margin: 0; cursor: pointer;
  border-radius: var(--pk-radius-row); border: 1px solid var(--shl-line); background: color-mix(in srgb, var(--card-bg-solid) 60%, transparent); color: var(--ink-muted);
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .shl-projstar svg { display: block; width: 18px; height: 18px; }
body[data-ui-tier="s"] .shl-projstar.is-on { color: var(--gold-13); }
body[data-ui-tier="s"] .shl-projstar.is-on svg { fill: currentColor; }
body[data-ui-tier="s"] .shl-projlist > .shl-hint { align-self: center; margin: auto 0; }
body[data-ui-tier="s"] .shl-heading {
  margin: 6px 0 0; font-family: var(--font-display); font-size: 22px; line-height: 1; letter-spacing: var(--track-16);
  color: var(--ink); display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
body[data-ui-tier="s"] .shl-heading .shl-meta { font-family: var(--font-body); letter-spacing: 0; color: var(--ink-muted); font-size: var(--fs-14); }
body[data-ui-tier="s"] .shl-navgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
body[data-ui-tier="s"] .shl-navtile {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 0 10px; margin: 0; cursor: pointer; text-align: left;
  border-radius: var(--pk-radius-row); border: 1px solid var(--shl-line); background: var(--shl-glass); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-semi);
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .shl-navtile > svg,
body[data-ui-tier="s"] .shl-navtile-ico svg { width: 20px; height: 20px; flex: 0 0 20px; }
body[data-ui-tier="s"] .shl-navtile-ico { display: grid; place-items: center; flex: 0 0 26px; color: var(--ink); }
body[data-ui-tier="s"] .shl-navtile-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .shl-navtile:active { background: color-mix(in srgb, var(--ink) 10%, var(--card-bg-solid)); }
body[data-ui-tier="s"] .shl-navtile.is-active {
  border-color: var(--shl-amber); color: var(--ink);
  background: color-mix(in srgb, var(--shl-amber) 14%, var(--card-bg-solid));
  box-shadow: 0 0 0 1px var(--shl-amber), 0 0 18px color-mix(in srgb, var(--shl-amber) 30%, transparent);
}
body[data-ui-tier="s"] .shl-navtile.is-active .shl-navtile-ico { color: var(--shl-amber); }

/* the menu's status cards: the desktop rail's Project day, Pipeline stage and Shot queue, re-dressed as glass */
body[data-ui-tier="s"] .shl-cards { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
body[data-ui-tier="s"] .shl-cards > .shl-glass { padding: 14px 16px; }
body[data-ui-tier="s"] .shl-cards .project-day,
body[data-ui-tier="s"] .shl-cards .pipeline-stage { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
body[data-ui-tier="s"] .shl-cards .pd-label,
body[data-ui-tier="s"] .shl-cards .ps-label { font-size: var(--fs-12); font-weight: var(--fw-semi); letter-spacing: var(--track-16); color: var(--ink-muted); }
body[data-ui-tier="s"] .shl-cards .pd-num { font-family: var(--font-display); font-size: 52px; line-height: 1; color: var(--ink); }
body[data-ui-tier="s"] .shl-cards .pd-date { font-size: var(--fs-14); color: var(--ink); }
body[data-ui-tier="s"] .shl-cards .pd-label,
body[data-ui-tier="s"] .shl-cards .ps-label { margin-bottom: 6px; }
body[data-ui-tier="s"] .shl-cards .ps-text strong { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.05; color: var(--ink); }
body[data-ui-tier="s"] .shl-cards .ps-next { font-size: var(--fs-14); }
/* the stage bar: full-width segments */
body[data-ui-tier="s"] .shl-cards .ps-dots { display: flex; gap: 6px; width: 100%; margin-top: 12px; }
body[data-ui-tier="s"] .shl-cards .ps-dots .dot { flex: 1 1 0; min-width: 0; width: auto; height: 7px; border-radius: var(--pk-radius-small); }
/* the shot queue: the rail's own card, as one glass card (no double box) */
body[data-ui-tier="s"] .shl-queue .sb-queue {
  margin: 0; padding: 14px 16px; border-radius: var(--pk-radius-card); background: var(--shl-glass); border: 1px solid var(--shl-line);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); box-shadow: none;
}

/* ── SEARCH (25) ── */
body[data-ui-tier="s"] .shl-search-field {
  display: flex; align-items: center; gap: 10px; min-width: 0; height: 44px; padding: 0 6px 0 14px;
  border-radius: var(--pk-radius-control); border: 2px solid var(--shl-amber); background: color-mix(in srgb, var(--card-bg-solid) 70%, var(--black));
  color: var(--ink);
}
body[data-ui-tier="s"] .shl-search-field svg { flex: 0 0 auto; color: var(--ink-muted); }
body[data-ui-tier="s"] .shl-search-input {
  flex: 1 1 auto; min-width: 0; height: 100%; 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"] .shl-search-input::placeholder { color: var(--ink-muted); }
body[data-ui-tier="s"] .shl-group-title { margin: 4px 0 0; font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--track-16); color: var(--ink-muted); text-transform: uppercase; }
body[data-ui-tier="s"] .shl-results { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body[data-ui-tier="s"] .shl-result {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 56px; padding: 6px 4px 6px 6px; margin: 0; cursor: pointer; text-align: left;
  border-radius: var(--pk-radius-row); border: 1px solid var(--shl-line); background: color-mix(in srgb, var(--card-bg-solid) 60%, transparent); color: var(--ink);
  font-family: var(--font-body);
}
body[data-ui-tier="s"] .shl-result:active { background: color-mix(in srgb, var(--ink) 10%, var(--card-bg-solid)); }
body[data-ui-tier="s"] .shl-thumb {
  flex: 0 0 84px; width: 84px; height: 48px; 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); font-size: var(--fs-12); font-weight: var(--fw-semi);
}
body[data-ui-tier="s"] .shl-thumb.is-round { flex-basis: 44px; width: 44px; height: 44px; border-radius: 50%; margin: 0 20px; }
body[data-ui-tier="s"] .shl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-ui-tier="s"] .shl-result-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body[data-ui-tier="s"] .shl-result-title { font-size: var(--fs-14); font-weight: var(--fw-semi); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .shl-result-sub { font-size: var(--fs-13); color: var(--ink-muted); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body[data-ui-tier="s"] .shl-chev { flex: 0 0 auto; color: var(--ink-muted); display: grid; place-items: center; width: 24px; }

/* ── NOTIFICATIONS (24) ── */
body[data-ui-tier="s"] .shl-notif-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body[data-ui-tier="s"] .shl-unread {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border-radius: var(--pk-radius-chip);
  border: 1px solid var(--shl-amber); background: color-mix(in srgb, var(--shl-amber) 12%, transparent); color: var(--shl-amber);
  font-family: var(--font-display); font-size: 17px; letter-spacing: var(--track-02); white-space: nowrap;
}
body[data-ui-tier="s"] .shl-unread::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--shl-amber); }
body[data-ui-tier="s"] .shl-unread.is-zero { border-color: var(--shl-line); color: var(--ink-muted); background: transparent; }
body[data-ui-tier="s"] .shl-unread.is-zero::before { background: var(--status-ok); }
body[data-ui-tier="s"] .shl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; margin: 0; cursor: pointer;
  border-radius: var(--pk-radius-control); border: 1px solid var(--shl-line); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-semi); white-space: nowrap;
}
body[data-ui-tier="s"] .shl-btn:disabled { opacity: 0.45; cursor: default; }
body[data-ui-tier="s"] .shl-btn.is-primary {
  width: 100%; min-height: 46px; border: 0; border-radius: var(--pk-radius-control); font-size: var(--fs-15);
  background: var(--shl-amber); color: var(--shl-on-amber);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--shl-amber) 30%, transparent);
}
body[data-ui-tier="s"] .shl-notifs { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
body[data-ui-tier="s"] .shl-notif {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 60px; padding: 8px 6px 8px 10px; margin: 0; cursor: pointer; text-align: left;
  border-radius: var(--pk-radius-row); border: 1px solid var(--shl-line); background: color-mix(in srgb, var(--card-bg-solid) 62%, transparent); color: var(--ink);
  font-family: var(--font-body);
}
body[data-ui-tier="s"] .shl-notif:active { background: color-mix(in srgb, var(--ink) 10%, var(--card-bg-solid)); }
body[data-ui-tier="s"] .shl-notif-ico {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--shl-amber) 70%, transparent); color: var(--shl-amber);
  background: color-mix(in srgb, var(--shl-amber) 12%, transparent);
}
body[data-ui-tier="s"] .shl-notif.is-read .shl-notif-ico { border-color: var(--shl-line); color: var(--ink-muted); background: transparent; }
body[data-ui-tier="s"] .shl-notif-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
body[data-ui-tier="s"] .shl-notif-title {
  font-family: var(--font-display); font-size: 18px; line-height: 1.05; letter-spacing: var(--track-02); color: var(--ink);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;
}
body[data-ui-tier="s"] .shl-notif.is-read .shl-notif-title { color: color-mix(in srgb, var(--ink) 75%, transparent); }
body[data-ui-tier="s"] .shl-notif-sub { font-size: var(--fs-13); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .shl-notif-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--shl-amber); }

/* ════════ THE FLOATING BUBBLES (Assistant, Agent) ════════ */
/* No phone mockup has them and they covered every page's content: on the phone their round buttons are gone from
   the pages; the side menu's "AI helpers" opens them (src/PhoneShell.jsx), and an open panel's own round button
   stays as its ✕ above the bar. The panels themselves are unchanged (mobile.css places them). */
body[data-ui-tier="s"] .aichat-root > .aichat-bubble:not(.is-open),
body[data-ui-tier="s"] .agentfab-root > .aichat-bubble:not(.is-open) { display: none; }

/* ════════ THE MATERIAL (6 Oct 2026) — the LOOK of Hugo's phone mockups 01 (Overview) and 02 (Shots), MEASURED ════════
   Hugo: "Dont you see that ours look NOTHING like the mockups???". Measured on a fair bench (a copy of the live data, the
   project's own skin and photo worn, 412 x 915 at DPR 3.5) against the mockups (L* of CIELAB, the median of the smooth
   pixels). What the mockups do and we did not:
   - the photo is VIVID behind the header and the band, then (Shots) sinks under a dark veil: the list sits on a flat
     dark page, L* 6.5, from ~160px down; the Overview keeps the photo glowing between its glass cards (L* 11.8 there).
     We washed it with the desktop's grey sheen over the whole column (it greyed the photo and lifted the band);
   - the header bar is see-through (the photo shows, chroma 18), not a grey strip (chroma 5);
   - controls are RECESSED: darker than the rows (search L* 7.6, Sort 10.1 vs rows 15.8) with a lit hairline rim; the
     selector chips and status pills are dark glass (L* 12-14), not grey (22);
   - the primary action is AMBER-LIT GLASS (a dark amber fill L* 20 with an amber edge and glow), never a solid amber;
   - the active tab of the bottom bar sits on a soft amber glow tile.
   The mockups are DARK glass: the dark material (the veil, the recess, the dark chips, the see-through bar, the dark
   bottom bar) is the glass family's (body[data-skin-family="glass"], every dark skin). A pale skin (forest, the paper
   family) keeps its own pale material: the tokens below default to what the phone painted before; only the amber-lit
   primary action and the glow tile under the active tab are every skin's (they read the skin's own accent and inks).
   Tokens only; phone tier only; the desktop never sees any of it. */
body[data-ui-tier="s"] {
  --shl-veil: transparent;                                                 /* (glass: the dark page the lists sit on) */
  --shl-recess: color-mix(in srgb, var(--card-bg-solid) 82%, transparent); /* a control (search, tools) */
  --shl-recess-rim: var(--card-border);                                    /* its hairline */
  --shl-dark-glass: color-mix(in srgb, var(--card-bg-solid) 74%, transparent);   /* chips + pills over the photo */
  --shl-amber-glass: color-mix(in srgb, var(--accent) 18%, var(--card-bg-solid)); /* the primary action, amber-lit */
  --shl-amber-rim: color-mix(in srgb, var(--accent) 78%, transparent);
  --shl-amber-glow: color-mix(in srgb, var(--accent) 34%, transparent);
}
body[data-ui-tier="s"][data-skin-family="glass"] {
  --shl-veil: color-mix(in srgb, var(--bg) 80%, var(--card-bg-solid));   /* L* 6.5, cool: the mockup's page */
  --shl-recess: color-mix(in srgb, color-mix(in srgb, var(--bg) 70%, var(--card-bg-solid)) 94%, transparent);   /* L* 8-10 */
  --shl-recess-rim: color-mix(in srgb, var(--ink) 30%, transparent);       /* the lit hairline */
  --shl-dark-glass: color-mix(in srgb, var(--bg) 78%, transparent);        /* L* 12-14 */
  --shl-amber-glass: color-mix(in srgb, var(--accent) 20%, color-mix(in srgb, var(--bg) 86%, transparent));   /* L* ~20 */
}
/* the photo: the desktop column's grey sheen off on the phone (it greyed the photo). (8 Oct 2026) The per-page veils
   that stood here and in the page sheets are gone: every phone page has the same photo behind the same header and
   band, the same fade into the page colour under the band and the same back panel (THE PHOTO + THE BACK PANEL, end
   of this file) */
body[data-ui-tier="s"] .main-content { background-image: none; }
/* the band's selector chips and status pills: dark glass (8 Oct 2026: on every page - the band never changes) */
body[data-ui-tier="s"] .project-header .ph-switch-chip { background-color: var(--shl-dark-glass); box-shadow: inset 0 0 0 1px var(--shl-recess-rim); }
body[data-ui-tier="s"][data-skin-family="glass"] .project-header .ph-caret { background: var(--shl-dark-glass); border-color: var(--shl-recess-rim); }
body[data-ui-tier="s"] .project-header .ph-status-pill,
body[data-ui-tier="s"] .project-header .ph-online-pill { background: var(--shl-dark-glass); }
/* the page's primary action on the band (mockup 09's "New post"): a FLAT amber-brown pill (the accent at 68% on
   black, L* ~45), the ink on it, only a faint warm light on its top edge; no rim, no glow */
body[data-ui-tier="s"] .shl-band-act-btn {
  background-color: color-mix(in srgb, var(--accent) 68%, var(--black)); color: var(--ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 45%, transparent);
}
body[data-ui-tier="s"] .shl-band-act-btn svg { color: var(--ink); }

/* ════════ THE GEOMETRY (6 Oct 2026) — the mockups' sizes, measured at 412 CSS px wide ════════
   Coordinator review: "everything is ~1.35-1.45x bigger than the mockup ... EXACTLY like the mockup". Each size below
   is the mockup's own (its panel scaled to 412 px; text sizes from the width of the mockup's own strings), checked by
   the bench's geometry step (ours / mockup within 0.95-1.05). Small controls keep a 40px TAP area: the visual box is
   the padding box, a transparent top/bottom border makes up the 40px, and an equal negative margin gives the space
   back, so the layout is the mockup's; the corner radius is elliptical (R / R + border) so the visible corner is R. */
/* (7 Oct 2026) the bottom bar, the header and the Overview's band moved up into THE SHELL, MEASURED: one size for
   every page, the median of all 28 mockups. (8 Oct 2026) The Shots page's own shrunk band (mockup 02: the project as
   a small chip, the pills on a row of their own) is retired - Hugo: "it got the Project header completely wrong,
   needs to still be the one we have on the overview page, this should never shrink. The whole header needs to not
   change". Every page shows the Overview's header and band, at the same size and place. */

/* ════════ SEARCH (25) + SIDE MENU (26) AT THEIR MOCKUPS (6 Oct 2026) ════════
   Hugo: each phone page must look EXACTLY like its mockup (sizes, layout, material, light, colour, photo). Every size
   below is the mockup's own at 412 CSS px wide (scratchpad phone-specs/25-search, 26-side-menu), checked on the fair
   bench: ours / mockup within 0.95-1.05 per element (text = the width of the mockup's own string set in our font, so
   Inter's wider letters come out a size smaller than the spec's cap-height guess), the colours by L* (CIELAB). Small
   controls keep a 40px TAP area (a transparent border + an equal negative margin); glyphs are drawn at their ink size
   (src/PhoneShell.jsx SHL_ICON: each viewBox is its own ink box). Corners: the phone's tight scale only (Hugo, 6 Oct:
   tighter than the mockups on purpose). The notifications overlay (24) keeps its own rules above.
   Material, glass family (every dark skin): search = the PHOTO, vivid, under a bare header (the page itself steps
   aside), one frosted dark-slate sheet (L* 16) holding a recessed field (L* 11, the accent rim + glow), slate chips and
   result cards at the sheet's own depth with a hairline rim; the menu = a near-opaque deep navy page (L* 7), slate
   tiles (L* 9) with a cool hairline, the current page on an amber neon tile. A pale skin keeps its own pale material
   through the same tokens. */
body[data-ui-tier="s"] {
  --shl-s-sheet: color-mix(in srgb, var(--card-bg-solid) 92%, transparent);
  --shl-s-rim: var(--shl-line);
  --shl-s-input: color-mix(in srgb, var(--card-bg-solid) 92%, var(--ink));
  --shl-s-chip: color-mix(in srgb, var(--ink) 5%, var(--card-bg-solid));
  --shl-s-chip-rim: color-mix(in srgb, var(--ink) 22%, transparent);
  --shl-s-card: color-mix(in srgb, var(--ink) 4%, var(--card-bg-solid));
  --shl-s-card-rim: color-mix(in srgb, var(--ink) 10%, transparent);
  --shl-s-pill: color-mix(in srgb, var(--card-bg-solid) 86%, transparent);
  --shl-s-bleed: transparent;
  --shl-s-disc: color-mix(in srgb, var(--black) 50%, transparent);
  --shl-s-avatar: color-mix(in srgb, var(--ink-muted) 20%, var(--card-bg-solid));
  --shl-s-text: var(--ink);
  --shl-s-soft: var(--ink-muted);
  --shl-s-label: var(--ink-muted);
  --shl-s-dim: var(--ink-soft);
  --shl-m-page: color-mix(in srgb, var(--card-bg-solid) 94%, transparent);
  --shl-m-tile: color-mix(in srgb, var(--ink) 4%, var(--card-bg-solid));
  --shl-m-rim: color-mix(in srgb, var(--ink) 18%, transparent);
  --shl-m-card: color-mix(in srgb, var(--ink) 3%, var(--card-bg-solid));
  --shl-m-row: var(--shl-m-card);
  --shl-m-pill: var(--card-bg-solid);
  --shl-m-track: color-mix(in srgb, var(--ink) 16%, var(--card-bg-solid));
  --shl-m-done: var(--sk-stage-bar-1, var(--teal));
  --shl-m-now: var(--sk-stage-bar-current-1, var(--accent));
  --shl-m-label: var(--ink-muted);
  --shl-m-soft: var(--ink-muted);
  --shl-s-pill-ink: var(--ink);
  --shl-m-lift: none;
  --shl-m-lit: none;
  --shl-m-active-bg: color-mix(in srgb, var(--accent) 14%, var(--card-bg-solid));
  --shl-s-empty: var(--ink-muted);
  --shl-m-text: var(--ink);
  --shl-m-icon: var(--ink-muted);
  --shl-m-meta: var(--ink-muted);
  --shl-m-ok: var(--ok);
  --shl-m-bad: var(--danger);
  --shl-m-warn: color-mix(in srgb, var(--warn) 70%, var(--ink));
  --shl-m-hot: var(--accent);
}
body[data-ui-tier="s"][data-skin-family="glass"] {
  --shl-s-sheet: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 80%, var(--bg)) 95%, var(--accent)) 84%, transparent);
  --shl-s-bleed: color-mix(in srgb, var(--accent) 9%, transparent);
  --shl-s-rim: color-mix(in srgb, var(--ink) 20%, transparent);
  --shl-s-input: color-mix(in srgb, var(--bg) 50%, var(--card-bg-solid));
  --shl-s-chip: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 94%, var(--accent)) 90%, var(--bg)) 88%, transparent);
  --shl-s-chip-rim: color-mix(in srgb, var(--ink-muted) 30%, var(--card-bg-solid));
  --shl-s-card: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 94%, var(--accent)) 90%, var(--bg)) 92%, transparent);
  --shl-s-card-rim: color-mix(in srgb, var(--ink) 9%, transparent);
  --shl-s-pill: color-mix(in srgb, var(--bg) 94%, transparent);
  --shl-s-disc: color-mix(in srgb, var(--black) 64%, transparent);
  --shl-s-avatar: color-mix(in srgb, var(--ink-muted) 22%, var(--card-bg-solid));
  --shl-s-text: var(--white);
  --shl-s-soft: color-mix(in srgb, var(--ink-muted) 55%, var(--white));
  --shl-s-label: color-mix(in srgb, var(--ink-muted) 70%, var(--white));
  --shl-s-dim: color-mix(in srgb, var(--ink-soft) 70%, var(--card-bg-solid));
  --shl-m-page: color-mix(in srgb, var(--shl-veil) 97%, transparent);
  --shl-m-tile: color-mix(in srgb, var(--bg) 80%, var(--card-bg-solid));
  --shl-m-rim: color-mix(in srgb, var(--ink-muted) 22%, var(--card-bg-solid));
  --shl-m-card: color-mix(in srgb, var(--bg) 88%, var(--card-bg-solid));
  --shl-m-row: color-mix(in srgb, var(--bg) 57%, var(--card-bg-solid));
  --shl-m-pill: color-mix(in srgb, var(--bg) 55%, var(--card-bg-solid));
  --shl-m-track: color-mix(in srgb, var(--ink-muted) 16%, var(--card-bg-solid));
  --shl-m-label: color-mix(in srgb, var(--ink-muted) 50%, var(--white));
  --shl-m-soft: var(--ink-muted);
  --shl-s-pill-ink: var(--white);
  --shl-m-lift: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 4%, transparent), transparent 70%);
  --shl-m-lit: inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent);
  --shl-m-active-bg: radial-gradient(120% 140% at 50% 50%, color-mix(in srgb, var(--accent) 7%, var(--bg)) 40%, color-mix(in srgb, var(--accent) 24%, var(--bg)) 100%);
  --shl-s-empty: color-mix(in srgb, var(--ink-muted) 70%, var(--white));
  --shl-m-text: var(--white);
  --shl-m-icon: color-mix(in srgb, var(--ink-muted) 45%, var(--white));
  --shl-m-meta: color-mix(in srgb, var(--ink-muted) 80%, var(--white));
  --shl-m-ok: color-mix(in srgb, var(--ok) 55%, var(--white));
  --shl-m-bad: color-mix(in srgb, var(--danger) 80%, var(--white));
  --shl-m-warn: color-mix(in srgb, var(--warn) 85%, var(--white));
  --shl-m-hot: color-mix(in srgb, var(--accent) 60%, var(--white));
}

/* ── SEARCH (25): one frosted sheet under the shell's header + project band (they stay, live; the page under them hides) ── */
body[data-ui-tier="s"].shl-open--search .main-content > :not(.project-header) { visibility: hidden; }
body[data-ui-tier="s"] .shl-overlay--search.is-under-band { top: var(--shl-top); padding-top: 0; }
body[data-ui-tier="s"] .shl-overlay--search .shl-overlay-scrim { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-ui-tier="s"] .shl-overlay--search.has-kb { bottom: var(--shl-kb); }
/* the sheet: 4px under the band (y 130 under Overview's) to 5px above the bottom bar (or flush on the keyboard) */
body[data-ui-tier="s"] .shl-overlay--search .shl-sheet {
  flex: 1 1 auto; min-height: 0; margin: 4px 14px 5px; padding: 0; gap: 0; overflow: hidden;
  border-radius: var(--pk-radius-card); border: 1px solid var(--shl-s-rim); color: var(--shl-s-text);
  background-color: var(--shl-s-sheet); background-image: linear-gradient(to bottom, var(--shl-s-bleed), transparent 40px);
  -webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--shade-42) 34%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
body[data-ui-tier="s"] .shl-overlay--search.has-kb .shl-sheet { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body[data-ui-tier="s"] .shl-overlay--search .shl-panel-head { flex: 0 0 auto; height: 40px; margin: 4.65px 6.15px 0 21.8px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-panel-title { font-size: 26px; letter-spacing: var(--track-02); color: var(--shl-s-text); }
body[data-ui-tier="s"] .shl-overlay--search .shl-close {
  flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--shl-s-soft);
}
body[data-ui-tier="s"] .shl-overlay--search .shl-close svg { width: 15.9px; height: 16.3px; }
/* the field: the darkest surface, a 2px accent rim + a soft glow */
body[data-ui-tier="s"] .shl-overlay--search .shl-search-field {
  flex: 0 0 auto; box-sizing: border-box; height: 45px; margin: 3.45px 16px 0; padding: 0 0.5px 0 13.7px; gap: 18.8px;
  border-radius: var(--pk-radius-control); border: 2px solid var(--shl-amber); background: var(--shl-s-input);
  box-shadow: 0 0 6px color-mix(in srgb, var(--shl-amber) 35%, transparent);
}
body[data-ui-tier="s"] .shl-overlay--search .shl-search-field > svg { width: 19.3px; height: 18.6px; color: var(--shl-s-soft); }
body[data-ui-tier="s"] .shl-overlay--search .shl-search-input { font-size: 14.5px; color: var(--shl-s-text); background: transparent; box-shadow: none; }
/* iOS zooms the page into a field whose text is under 16px: there (only) the typed text stays 16px */
@supports (-webkit-touch-callout: none) { body[data-ui-tier="s"] .shl-overlay--search .shl-search-input { font-size: 16px; } }
body[data-ui-tier="s"] .shl-overlay--search .shl-search-input::placeholder { font-size: 12.5px; color: var(--ink-muted); opacity: 1; }
body[data-ui-tier="s"] .shl-overlay--search .shl-search-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
body[data-ui-tier="s"] .shl-overlay--search .shl-search-clear { color: var(--shl-s-text); }
body[data-ui-tier="s"] .shl-overlay--search .shl-search-clear svg { width: 14.6px; height: 13.9px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-hint--lead { flex: 0 0 auto; margin: 12px 16px 0; font-size: 12.5px; line-height: 16px; color: var(--shl-s-text); }
/* the scope chips: 2 centred rows (3 + 1 empty, 3 + 2 typed); empty 37.2 high, typed 33.2, the picked one solid accent 31.2 */
body[data-ui-tier="s"] .shl-overlay--search .shl-pills { flex: 0 0 auto; gap: 4.7px 8px; margin: 8.6px 16px 0; }
body[data-ui-tier="s"] .shl-overlay--search .shl-pill {
  box-sizing: border-box; min-width: 108px; height: 40.5px; min-height: 40.5px; margin: -2px 0; padding: 0 23.5px;
  border-width: 2px 0; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 2px);
  background-color: var(--shl-s-chip); box-shadow: inset 0 0 0 1.5px var(--shl-s-chip-rim);
  font-size: 12.5px; font-weight: 400; color: var(--shl-s-text);
}
body[data-ui-tier="s"] .shl-overlay--search .shl-sheet.is-typed .shl-pills { gap: 4px 6.6px; margin-top: 4.5px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-sheet.is-typed .shl-pill {
  min-width: 110px; height: 41.2px; min-height: 41.2px; margin: -4px 0; border-width: 4px 0; padding: 0 29.7px; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 4px);
}
body[data-ui-tier="s"] .shl-overlay--search .shl-sheet.is-typed .shl-pill--all { min-width: 92.9px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-sheet.is-typed .shl-pill.is-on {
  margin: -5px 0; border-width: 5px 0; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 5px);
}
body[data-ui-tier="s"] .shl-overlay--search .shl-pill.is-on {
  background-color: var(--shl-amber); box-shadow: none; color: var(--shl-on-amber); font-size: 14px; font-weight: var(--fw-semi);
}
/* the results scroll inside the sheet */
body[data-ui-tier="s"] .shl-sheet-body {
  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; padding: 0 0 5px;
}
body[data-ui-tier="s"] .shl-sheet-body > * { flex-shrink: 0; }
body[data-ui-tier="s"] .shl-overlay--search .shl-empty--start { gap: 13px; padding: 49.9px 8px 0; font-size: 14.2px; line-height: 18px; color: var(--shl-s-empty); }
body[data-ui-tier="s"] .shl-overlay--search .shl-empty--start svg { width: 52px; height: 52.5px; color: var(--shl-s-dim); }
body[data-ui-tier="s"] .shl-overlay--search .shl-results { gap: 6px; padding: 0 12.6px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-results:first-child { margin-top: 6.1px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-results + .shl-results { margin-top: 8.8px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-group-title {
  margin: 0 0 0 6px; font-size: 10.6px; line-height: 13px; font-weight: var(--fw-semi); letter-spacing: 0.22em; color: var(--shl-s-label);
}
/* a result card: thumb 113 x 50 at +10, the text column at x 167; 9.55 above and below the text (a 1-line card
   is the thumb's 59.7, 3 lines 63, 4 lines 77: the mockup's own cards are 60 / 66 / 73) */
body[data-ui-tier="s"] .shl-overlay--search .shl-result {
  box-sizing: border-box; gap: 0; min-height: 0; padding: 9.55px 3px 9.55px 9px; border-radius: var(--pk-radius-row);
  border: 1px solid var(--shl-s-card-rim); background: var(--shl-s-card); color: var(--shl-s-text);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--shade-42) 22%, transparent);
}
body[data-ui-tier="s"] .shl-overlay--search .shl-result--crew { min-height: 52.4px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-thumb { flex: 0 0 113px; width: 113px; height: 50px; margin: -5.7px 15.5px -5.7px 0; border-radius: var(--pk-radius-small); box-shadow: 0 2px 6px color-mix(in srgb, var(--shade-42) 45%, transparent); }
body[data-ui-tier="s"] .shl-overlay--search .shl-thumb.is-round {
  flex-basis: 45px; width: 45px; height: 45px; margin: -7px 46.1px -7px 37.4px; border-radius: 50%;
  background: var(--shl-s-avatar); color: var(--shl-s-soft);
}
body[data-ui-tier="s"] .shl-overlay--search .shl-thumb.is-round svg { width: 22px; height: 22px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-result-text { gap: 0; }
body[data-ui-tier="s"] .shl-overlay--search .shl-result-title { font-size: 13px; line-height: 15.5px; letter-spacing: -0.02em; font-weight: var(--fw-semi); color: var(--shl-s-text); }
body[data-ui-tier="s"] .shl-overlay--search .shl-result-sub { font-size: 12px; line-height: 13.3px; letter-spacing: -0.02em; color: var(--shl-s-soft); }
body[data-ui-tier="s"] .shl-overlay--search .shl-result-mail { display: flex; align-items: center; gap: 8px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-result-mail svg { flex: 0 0 auto; width: 16px; height: 12px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-chev { width: 24px; color: var(--ink-muted); }
body[data-ui-tier="s"] .shl-overlay--search .shl-chev svg { width: 8.3px; height: 13.3px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-hint--foot { margin: 5px 0 0; font-size: 11.4px; line-height: 15px; color: var(--shl-s-text); }

/* ── SIDE MENU (26): one scrolling page under a pinned head (bar + project selector) ── */
body[data-ui-tier="s"] .shl-overlay--menu .shl-overlay-scrim { background: var(--shl-m-page); }
body[data-ui-tier="s"] .shl-menu-head { flex: 0 0 auto; display: flex; flex-direction: column; }
/* the project selector card: an amber-brown "+" tile, the name, the chevron */
body[data-ui-tier="s"] .shl-overlay--menu .shl-proj {
  box-sizing: border-box; width: auto; height: 51.9px; min-height: 0; margin: 0 21.4px 0 16.5px; padding: 0 19.4px 0 9.7px; gap: 0;
  border-radius: var(--pk-radius-card); border: 1px solid var(--shl-m-rim); background-color: var(--shl-m-card); background-image: var(--shl-m-lift); box-shadow: var(--shl-m-lit);
}
body[data-ui-tier="s"] .shl-overlay--menu .shl-proj-mark {
  flex: 0 0 37.1px; width: 37.1px; height: 36.3px; margin-right: 15.6px; border-radius: var(--pk-radius-small);
  background: color-mix(in srgb, var(--accent) 34%, var(--bg)); color: var(--accent);
}
body[data-ui-tier="s"] .shl-overlay--menu .shl-proj-mark svg { width: 14.8px; height: 15.7px; }
body[data-ui-tier="s"] .shl-overlay--menu .shl-proj-name { font-size: 24.5px; letter-spacing: 0; color: var(--shl-m-text); }
body[data-ui-tier="s"] .shl-overlay--menu .shl-proj-caret { color: var(--shl-m-icon); }
body[data-ui-tier="s"] .shl-overlay--menu .shl-proj-caret svg { width: 11.5px; height: 6.6px; margin-top: 5.6px; }
body[data-ui-tier="s"] .shl-overlay--menu .shl-projlist { margin: 8px 0 0; }
/* the scrolling page: nothing in it shrinks (a flex column would squeeze every fixed height) */
body[data-ui-tier="s"] .shl-menu-scroll { gap: 0; padding: 0 21.4px 17.3px 20.6px; }
body[data-ui-tier="s"] .shl-menu-scroll > * { flex-shrink: 0; }
body[data-ui-tier="s"] .shl-heading--menu,
body[data-ui-tier="s"] .shl-heading--queue {
  margin: 0; font-size: 25px; line-height: 25px; letter-spacing: 0.23em; color: var(--shl-m-text);
}
body[data-ui-tier="s"] .shl-heading--menu { margin: 12.9px 0 0 -0.8px; }
body[data-ui-tier="s"] .shl-heading--queue { margin: 12.9px 0 0 -0.8px; align-items: baseline; }
body[data-ui-tier="s"] .shl-heading--queue .shl-meta { font-family: var(--font-body); font-size: 12.9px; letter-spacing: 0; color: var(--shl-m-meta); }
/* the pages: 2 columns of 47.6 tiles (gap 11.2 / 7.9), the icon 24 at +20.9, the label at +69 */
body[data-ui-tier="s"] .shl-overlay--menu .shl-navgrid { gap: 7.9px 11.2px; margin-top: 8.6px; }
body[data-ui-tier="s"] .shl-overlay--menu .shl-navtile {
  box-sizing: border-box; min-height: 47.6px; height: 47.6px; padding: 0 8px 0 19.6px; gap: 0; border-radius: var(--pk-radius-row);
  border: 1px solid var(--shl-m-rim); background-color: var(--shl-m-tile); background-image: var(--shl-m-lift); box-shadow: var(--shl-m-lit); color: var(--shl-m-text);
  font-size: 14.4px; letter-spacing: -0.02em; font-weight: var(--fw-med);
}
body[data-ui-tier="s"] .shl-overlay--menu .shl-navtile-ico { flex: 0 0 24px; width: 24px; margin-right: 24.6px; color: var(--shl-m-text); }
body[data-ui-tier="s"] .shl-overlay--menu .shl-navtile-ico svg,
body[data-ui-tier="s"] .shl-overlay--menu .shl-navtile > svg { width: 24px; height: 24px; flex: 0 0 24px; }
body[data-ui-tier="s"] .shl-overlay--menu .shl-navtile.is-active {
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--white)); font-weight: var(--fw-semi);
  background: var(--shl-m-active-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 10px 2px color-mix(in srgb, var(--accent) 35%, transparent),
    inset 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent);
}
body[data-ui-tier="s"] .shl-overlay--menu .shl-navtile.is-active .shl-navtile-ico { color: var(--shl-m-hot); }
/* the menu's cards: Project day, Pipeline stage */
body[data-ui-tier="s"] .shl-mcard { box-sizing: border-box; min-width: 0; border-radius: var(--pk-radius-card); border: 1px solid var(--shl-m-rim); background-color: var(--shl-m-card); background-image: var(--shl-m-lift); box-shadow: var(--shl-m-lit); color: var(--shl-m-text); }
body[data-ui-tier="s"] .shl-mcard-label,
body[data-ui-tier="s"] .shl-day .pd-label {
  font-family: var(--font-body); font-size: 10.6px; line-height: 13px; font-weight: var(--fw-med); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--shl-m-label);
}
body[data-ui-tier="s"] .shl-day { height: 107.1px; margin-top: 14px; padding: 9.6px 16px 0; }
body[data-ui-tier="s"] .shl-day .project-day { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
body[data-ui-tier="s"] .shl-day .pd-num { margin-top: 6px; font-family: var(--font-display); font-size: 55px; line-height: 47px; color: var(--shl-m-text); }
body[data-ui-tier="s"] .shl-day .pd-date { margin-top: 5px; font-family: var(--font-body); font-size: 13.6px; line-height: 17px; color: var(--shl-m-meta); }
body[data-ui-tier="s"] .shl-stage { height: 108.7px; margin-top: 8.6px; padding: 13.4px 17.5px 0 15.3px; }
body[data-ui-tier="s"] .shl-stage-title { margin-top: 6px; font-family: var(--font-body); font-size: 18px; font-weight: var(--fw-bold); letter-spacing: -0.04em; line-height: 22px; color: var(--shl-m-text); }
body[data-ui-tier="s"] .shl-stage-steps { display: flex; gap: 5.8px; margin-top: 7px; }
body[data-ui-tier="s"] .shl-stage-step { flex: 0 0 62.6px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; }
body[data-ui-tier="s"] .shl-stage-bar { width: 100%; height: 9.1px; border-radius: var(--pk-radius-small); background: var(--shl-m-track); }
body[data-ui-tier="s"] .shl-stage-step.is-done .shl-stage-bar { background: color-mix(in srgb, var(--shl-m-done) 88%, var(--white)); box-shadow: 0 0 4px color-mix(in srgb, var(--shl-m-done) 25%, transparent); }
body[data-ui-tier="s"] .shl-stage-step.is-current .shl-stage-bar { background: var(--shl-m-now); box-shadow: 0 0 8px color-mix(in srgb, var(--shl-m-now) 45%, transparent); }
body[data-ui-tier="s"] .shl-stage-lbl { font-size: 10.6px; line-height: 13px; white-space: nowrap; color: var(--shl-m-soft); }
body[data-ui-tier="s"] .shl-stage-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-bottom: 12px; }
body[data-ui-tier="s"] .shl-stage:has(.shl-stage-pick) { height: auto; }
/* the queue: IMAGE / VIDEO, one row per job, "+N MORE · EXPAND" */
body[data-ui-tier="s"] .shl-subhead {
  margin: 15.3px 0 0 1.6px; font-family: var(--font-display); font-size: 17.7px; line-height: 18px; letter-spacing: 0.26em;
  color: var(--shl-m-meta);
}
body[data-ui-tier="s"] .shl-qrow {
  position: relative; box-sizing: border-box; display: flex; align-items: center; width: 100%; min-width: 0; height: 57.3px; margin: 7px 0 0; padding: 0 0 0 7.2px;
  border-radius: var(--pk-radius-row); border: 1px solid var(--shl-m-rim); background-color: var(--shl-m-row); background-image: var(--shl-m-lift); box-shadow: var(--shl-m-lit); color: var(--shl-m-text); cursor: pointer; text-align: left;
  font-family: var(--font-body); -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .shl-subhead + .shl-qrow { margin-top: 10.8px; }
body[data-ui-tier="s"] .shl-qrow .shl-thumb { flex: 0 0 67.6px; width: 67.6px; height: 54.4px; border-radius: var(--pk-radius-small); margin-right: 13.2px; font-size: 0; }
body[data-ui-tier="s"] .shl-qrow-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-self: stretch; padding-top: 9.6px; }
body[data-ui-tier="s"] .shl-qrow-title { font-size: 12px; line-height: 15px; font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
body[data-ui-tier="s"] .shl-qrow-sub { margin-top: 2px; font-size: 10.9px; line-height: 13px; color: var(--shl-m-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
body[data-ui-tier="s"] .shl-qrow-track { display: block; width: 197.8px; height: 5.8px; margin: 4px 0 0 -1.7px; border-radius: var(--pk-radius-small); background: var(--shl-m-track); overflow: hidden; }
body[data-ui-tier="s"] .shl-qrow-fill { display: block; height: 100%; border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--accent) 70%, var(--white)); }
body[data-ui-tier="s"] .shl-qrow-state { position: absolute; left: 302.4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: var(--fw-med); }
body[data-ui-tier="s"] .shl-qrow-state.is-ok { color: var(--shl-m-ok); }
body[data-ui-tier="s"] .shl-qrow-state.is-bad { color: var(--shl-m-bad); }
body[data-ui-tier="s"] .shl-qrow-state svg { width: 16px; height: 12px; }
body[data-ui-tier="s"] .shl-qrow-state.is-bad svg { width: 13px; height: 13px; }
body[data-ui-tier="s"] .shl-qrow--video { height: 50.3px; }
body[data-ui-tier="s"] .shl-subhead + .shl-qrow--video { margin-top: 11.5px; }
body[data-ui-tier="s"] .shl-qrow--video + .shl-qrow--video { margin-top: 6.2px; }
body[data-ui-tier="s"] .shl-qrow--video .shl-thumb { flex-basis: 65.1px; width: 65.1px; height: 45.3px; margin-right: 15.7px; }
body[data-ui-tier="s"] .shl-qrow--video .shl-qrow-text { padding-top: 8.2px; }
body[data-ui-tier="s"] .shl-qrow--video .shl-qrow-sub { margin-top: 4.5px; }
body[data-ui-tier="s"] .shl-qrow-pill {
  position: absolute; left: 245.5px; top: 9.9px; box-sizing: border-box; height: 24.7px; width: 70.9px; padding: 0; display: grid; place-items: center;
  border-radius: var(--pk-radius-chip); border: 1.5px solid var(--shl-m-warn); background: var(--shl-m-pill);
  box-shadow: 0 0 6px color-mix(in srgb, var(--warn) 15%, transparent);
  font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.04em; color: var(--shl-m-warn);
}
body[data-ui-tier="s"] .shl-qrow-eta { position: absolute; left: 332.9px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--shl-m-meta); }
body[data-ui-tier="s"] .shl-expand {
  box-sizing: border-box; display: block; width: 100%; height: 40.4px; margin: 9.8px 0 0; padding: 0 12px; cursor: pointer;
  border-radius: var(--pk-radius-control); border: 1px solid color-mix(in srgb, var(--ink-muted) 55%, var(--card-bg-solid)); background: color-mix(in srgb, var(--bg) 60%, var(--card-bg-solid));
  font-family: var(--font-body); font-size: 12.5px; font-weight: var(--fw-semi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--shl-m-text);
}
body[data-ui-tier="s"] .shl-heading--helpers { margin: 22px 0 8px; font-size: 18px; letter-spacing: 0.2em; color: var(--shl-m-meta); }

/* ════════ ROUND 2 (6 Oct 2026) — SEARCH (25), MENU (26), MEASURED AT THE GLYPH ════════
   The judges compared round 1 with Hugo's mockups and measured what the eye sees: the DRAWN ink of every glyph and
   label, the bar, the lit amber, the material. Every value below is checked that way on the fair bench (scratchpad
   phone-build/shell/bench2/table2.py: the glyph box at 50% of its own contrast, sub-pixel edges, the mockup's and ours;
   surfaces by their box and median colour): ours / mockup within 0.95-1.05, surfaces within 2.5 L*, inks within dE 10.
   - The mockups' face draws ~8% taller than Inter at the same width: their text is set a notch larger with a tighter
     track, so BOTH the drawn width and the drawn height match.
   - The mockups light the skin a notch brighter and yellower than the desktop, and their inks are a cool blue-grey
     family: those are the skin's own phone tokens (themes.css --sk-phone-*, set in the skin the mockups were drawn in);
     every other skin falls back to its own accent, status and ink tokens. The DARK materials (the warm-brown lit tile,
     the white wordmark, the heavy bar shadow) are the glass family's; a pale skin keeps its own pale ones.
   - (7 Oct 2026) The header, the project band and the bottom bar are THE SHELL's (measured once on all 28 mockups,
     top of this file): search and the menu no longer redraw the bottom bar; the overlays end on it. */
body[data-ui-tier="s"] {
  --shl-lit: var(--sk-phone-lit-1, var(--accent));          /* the field's rim, the All chip, the lit tab */
  --shl-lit-ink: var(--sk-phone-lit-ink-1, var(--shl-lit));  /* the lit label / glyph (26) */
  --shl-on-lit: var(--sk-phone-on-lit-1, var(--shl-on-amber));
  --shl-m-done: var(--sk-phone-blue-1, var(--sk-stage-bar-1, var(--teal)));
  --shl-m-now: var(--sk-phone-now-1, var(--sk-stage-bar-current-1, var(--accent)));
  --shl-m-fill: var(--sk-phone-fill-1, color-mix(in srgb, var(--accent) 70%, var(--white)));
  --shl-c1: var(--sk-phone-ink-1, var(--ink));               /* primary ink */
  --shl-c2: var(--sk-phone-ink-2, var(--ink-muted));         /* secondary ink */
  --shl-c3: var(--sk-phone-ink-3, var(--ink-muted));         /* section labels */
  --shl-s-sub: var(--ink-muted);
  --shl-s-close: var(--ink-muted);
  --shl-s-hint: var(--ink-muted);
}
body[data-ui-tier="s"][data-skin-family="glass"] {
  --shl-m-ok: var(--sk-phone-ok-1, color-mix(in srgb, var(--ok) 55%, var(--white)));
  --shl-m-bad: var(--sk-phone-bad-1, color-mix(in srgb, var(--danger) 80%, var(--white)));
  --shl-m-warn: var(--sk-phone-pending-1, color-mix(in srgb, var(--warn) 85%, var(--white)));
  /* search: the cool inks, the header disc, the project pill, the sheet (a notch thinner: the photo's warm bokeh) */
  --shl-s-soft: var(--sk-phone-ink-2, color-mix(in srgb, var(--ink-muted) 55%, var(--white)));
  --shl-s-label: color-mix(in srgb, var(--shl-c3) 70%, var(--white));
  --shl-s-sub: color-mix(in srgb, var(--shl-c2) 85%, var(--white));
  --shl-s-empty: color-mix(in srgb, var(--shl-c2) 80%, var(--white));
  --shl-s-close: var(--shl-c2);
  --shl-s-hint: color-mix(in srgb, var(--shl-c2) 55%, var(--white));
  --shl-s-disc: color-mix(in srgb, var(--black) 22%, transparent);
  --shl-s-pill: color-mix(in srgb, var(--bg) 86%, transparent);
  --shl-s-bleed: color-mix(in srgb, var(--accent) 4%, transparent);
  --shl-s-sheet: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 80%, var(--bg)) 95%, var(--accent)) 76%, transparent);
  /* the menu: the cool inks; the navy page and its cards let the photo's lights through, faintly */
  --shl-m-text: var(--sk-phone-ink-1, var(--white));
  --shl-m-icon: color-mix(in srgb, var(--shl-c2) 75%, var(--shl-c1));
  --shl-m-meta: var(--shl-c2);
  --shl-m-label: color-mix(in srgb, var(--shl-c2) 60%, var(--shl-c1));
  --shl-m-soft: color-mix(in srgb, var(--shl-c2) 85%, var(--ink-soft));
  --shl-m-page: color-mix(in srgb, var(--shl-veil) 94%, transparent);
  --shl-m-card: color-mix(in srgb, color-mix(in srgb, var(--bg) 88%, var(--card-bg-solid)) 74%, transparent);
}
/* the closed drawer (the desktop rail, parked off screen on the phone) cast its shadow across the left ~100px of every
   phone screen, dimming it: no shadow while it is closed */
body[data-ui-tier="s"]:not(.sb-mobile-open) .sidebar { box-shadow: none; }

/* the overlays end on the shell's bottom bar (search: on the phone's keyboard while it is up) */
body[data-ui-tier="s"] .shl-overlay--search,
body[data-ui-tier="s"] .shl-overlay--menu { bottom: var(--mtab-h); }
body[data-ui-tier="s"] .shl-overlay--search.has-kb { bottom: var(--shl-kb); }

/* ── SEARCH (25) ── */
/* the page under it dims (darkest behind the header's white glyphs): an overlay over the photo, never a filter on it */
body[data-ui-tier="s"] .shl-overlay--search .shl-overlay-scrim {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--black) 58%, transparent) 0, color-mix(in srgb, var(--black) 46%, transparent) 55px,
    color-mix(in srgb, var(--black) 32%, transparent) 100px, color-mix(in srgb, var(--black) 22%, transparent) 135px, transparent 300px);
}
/* under the band the dim starts where the old one stood at the band's foot (~24%) and is gone 170px lower */
body[data-ui-tier="s"] .shl-overlay--search.is-under-band .shl-overlay-scrim {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--black) 24%, transparent), transparent 170px);
}
body[data-ui-tier="s"] .shl-overlay--search .shl-sheet { -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
body[data-ui-tier="s"] .shl-overlay--search .shl-panel-title { letter-spacing: 0.04em; }
body[data-ui-tier="s"] .shl-overlay--search .shl-close { color: var(--shl-s-close); }
/* the field: the lit rim, a soft glow out, a thin lit edge in (the mockup has no wide inner halo) */
body[data-ui-tier="s"] .shl-overlay--search .shl-search-field {
  border-color: color-mix(in srgb, var(--shl-lit) 95%, var(--bg));
  box-shadow: 0 0 6px color-mix(in srgb, var(--shl-lit) 38%, transparent), inset 0 0 1.5px color-mix(in srgb, var(--shl-lit) 55%, transparent),
    inset 0 0 4px color-mix(in srgb, var(--shl-lit) 24%, transparent);
}
body[data-ui-tier="s"] .shl-overlay--search .shl-search-field > svg { width: 19.6px; height: 19.7px; color: var(--shl-s-soft); }
body[data-ui-tier="s"] .shl-overlay--search .shl-search-input::placeholder { font-size: 13.2px; letter-spacing: -0.25px; color: var(--shl-c2); }
body[data-ui-tier="s"] .shl-overlay--search .shl-search-clear { color: var(--shl-s-soft); }
body[data-ui-tier="s"] .shl-overlay--search .shl-search-clear svg { width: 14.6px; height: 13.9px; transform: scale(1, 1.07); }
body[data-ui-tier="s"] .shl-overlay--search .shl-hint--lead { font-size: 13.2px; letter-spacing: -0.2px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-pill { font-size: 13.2px; letter-spacing: -0.7px; }
/* the All chip: one flat lit fill */
body[data-ui-tier="s"] .shl-overlay--search .shl-pill.is-on { background-color: var(--shl-lit); background-image: none; color: var(--shl-on-lit); font-size: 14px; letter-spacing: -0.7px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-empty--start { font-size: 15.4px; letter-spacing: -0.5px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-group-title { font-size: 11.2px; }
/* a result: the mockup's own pitches (SH0020's card: 17.2 to the first line, 13.3 inside a wrapped line, 15.9 between
   lines, 73 tall), its 147px text column ("01 - Sometimes," wraps before "Everybody", as drawn), the secondary lines
   one notch greyer; an email or a long title never hard-clipped */
body[data-ui-tier="s"] .shl-overlay--search .shl-result { padding: 3.75px 3px 5.75px 9px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-thumb { margin: -0.4px 15.5px -0.4px 0; }
body[data-ui-tier="s"] .shl-overlay--search .shl-thumb.is-round { margin: -4px 46.1px -4px 37.4px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-result-text { max-width: 147px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-result-title { margin-bottom: 1.55px; font-size: 14px; line-height: 18px; letter-spacing: -0.04em; }
body[data-ui-tier="s"] .shl-overlay--search .shl-result-title--wrap { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body[data-ui-tier="s"] .shl-overlay--search .shl-result-sub { font-size: 12.5px; line-height: 13.9px; letter-spacing: 0.02em; color: var(--shl-s-sub); }
body[data-ui-tier="s"] .shl-overlay--search .shl-result-sub + .shl-result-sub { margin-top: 1px; }
body[data-ui-tier="s"] .shl-overlay--search .shl-result-mail { min-width: 0; }
body[data-ui-tier="s"] .shl-overlay--search .shl-mail-text { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .shl-overlay--search .shl-chev { margin-left: auto; }
body[data-ui-tier="s"] .shl-overlay--search .shl-chev svg { width: 8.3px; height: 13.3px; transform: scale(0.95, 1.06); }
body[data-ui-tier="s"] .shl-overlay--search .shl-hint--foot { font-size: 12px; letter-spacing: -0.2px; color: var(--shl-s-hint); }
/* the results fade under the chips once scrolled, and at their foot: never a hard cut */
body[data-ui-tier="s"] .shl-overlay--search .shl-sheet-body {
  padding-bottom: 12px;
  -webkit-mask-image: linear-gradient(to bottom, var(--black) calc(100% - 12px), transparent); mask-image: linear-gradient(to bottom, var(--black) calc(100% - 12px), transparent);
}
body[data-ui-tier="s"] .shl-overlay--search .shl-sheet-body.is-scrolled {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--black) 16px, var(--black) calc(100% - 12px), transparent);
  mask-image: linear-gradient(to bottom, transparent 0, var(--black) 16px, var(--black) calc(100% - 12px), transparent);
}

/* ── MENU (26) ── */
/* it covers the page: the page steps aside so what glows through the navy is the photo; the navy runs on under the
   bar's rounded corners and thins toward the lower right, where the mockup's warm bokeh sits behind the lower cards */
body[data-ui-tier="s"].shl-open--menu .main-content { visibility: hidden; }
body[data-ui-tier="s"] .shl-overlay--menu .shl-overlay-scrim {
  bottom: calc(-1 * var(--mtab-h));
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
body[data-ui-tier="s"][data-skin-family="glass"] .shl-overlay--menu .shl-overlay-scrim {
  background: radial-gradient(46% 14% at 72% 83%, color-mix(in srgb, var(--shl-veil) 60%, transparent), var(--shl-m-page) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(1.3); backdrop-filter: blur(6px) saturate(1.3);
}
body[data-ui-tier="s"] .shl-menu-scroll {   /* the rows fade under the pinned head */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--black) 12px); mask-image: linear-gradient(to bottom, transparent 0, var(--black) 12px);
}
body[data-ui-tier="s"] .shl-overlay--menu .shl-proj-name { font-size: 22.3px; letter-spacing: 0.048em; color: var(--shl-c1); }
body[data-ui-tier="s"] .shl-overlay--menu .shl-proj-caret svg { width: 12.2px; height: 6.2px; }
body[data-ui-tier="s"] .shl-heading--menu,
body[data-ui-tier="s"] .shl-heading--queue { font-size: 23.3px; letter-spacing: 0.306em; }
body[data-ui-tier="s"] .shl-heading--queue .shl-meta { font-size: 14.5px; letter-spacing: -0.015em; }
/* the tiles: each glyph at its own measured ink box (src/PhoneShell.jsx SHL_TILE_INK), the label at the mockup's size */
body[data-ui-tier="s"] .shl-overlay--menu .shl-navtile { font-size: 14.8px; letter-spacing: -0.035em; color: var(--shl-m-text); }
body[data-ui-tier="s"] .shl-overlay--menu .shl-navtile-ico svg,
body[data-ui-tier="s"] .shl-overlay--menu .shl-navtile > svg { flex: 0 0 auto; }
body[data-ui-tier="s"] .shl-overlay--menu .shl-navtile:not(.is-active) .shl-navtile-ico { color: color-mix(in srgb, var(--shl-c1) 70%, var(--shl-c2)); }
body[data-ui-tier="s"] .shl-overlay--menu .shl-navtile.is-active .shl-navtile-ico { color: var(--shl-lit-ink); }
/* the current page (glass): a cream-hot hairline, a soft amber halo out, a warm-brown glow in, a dark warm centre */
body[data-ui-tier="s"][data-skin-family="glass"] .shl-overlay--menu .shl-navtile.is-active {
  border: 1.5px solid color-mix(in srgb, var(--shl-lit) 8%, var(--white));
  background: color-mix(in srgb, color-mix(in srgb, var(--shl-lit) 50%, var(--danger)) 7%, var(--bg));
  box-shadow: 0 0 9px 2px color-mix(in srgb, var(--shl-lit) 34%, transparent),
    inset 0 0 8px 1px color-mix(in srgb, color-mix(in srgb, var(--shl-lit) 60%, var(--danger)) 19%, transparent),
    inset 0 2px 5px color-mix(in srgb, color-mix(in srgb, var(--shl-lit) 60%, var(--danger)) 11%, transparent);
}
/* the project day: no inner sheen box (the rail's card draws one) */
body[data-ui-tier="s"] .shl-day .project-day::before { display: none; }
body[data-ui-tier="s"] .shl-day .pd-label { font-size: 12.6px; letter-spacing: 0.088em; color: var(--shl-m-label); }
body[data-ui-tier="s"] .shl-day .pd-num { font-size: 58.7px; line-height: 47px; }
body[data-ui-tier="s"] .shl-day .pd-date { font-size: 14.8px; letter-spacing: -0.02em; }
/* the pipeline stage: "Video Hero" in the mockup's condensed bold (Inter Bold drawn narrower); five steps of 62.6
   (sharing the card on a narrower phone); the done steps one saturated blue, the current one lit amber with its haze */
body[data-ui-tier="s"] .shl-stage .shl-mcard-label { font-size: 11.6px; letter-spacing: 0.148em; color: var(--shl-m-meta); }
body[data-ui-tier="s"] .shl-stage-title { font-size: 19.8px; letter-spacing: -0.04em; transform: scaleX(0.89); transform-origin: 0 50%; }
body[data-ui-tier="s"] .shl-stage-step { flex: 1 1 0; max-width: 62.6px; }
body[data-ui-tier="s"] .shl-stage-lbl { font-size: 11.5px; letter-spacing: -0.4px; }
body[data-ui-tier="s"] .shl-stage-step.is-done .shl-stage-bar { background: var(--shl-m-done); box-shadow: 0 0 4px color-mix(in srgb, var(--shl-m-done) 30%, transparent); }
body[data-ui-tier="s"] .shl-stage-step.is-current .shl-stage-bar {
  background: var(--shl-m-now);
  box-shadow: 0 0 7px 1px color-mix(in srgb, var(--shl-m-now) 40%, transparent), 0 -2px 6px color-mix(in srgb, color-mix(in srgb, var(--shl-m-now) 15%, var(--danger)) 20%, transparent);
}
/* the queue */
body[data-ui-tier="s"] .shl-subhead { font-size: 15.8px; letter-spacing: 0.36em; color: var(--shl-c3); }
body[data-ui-tier="s"] .shl-qrow-title { font-size: 13.2px; letter-spacing: -0.65px; }
body[data-ui-tier="s"] .shl-qrow-sub { font-size: 11.8px; letter-spacing: -0.03em; }
body[data-ui-tier="s"] .shl-qrow-fill { background: var(--shl-m-fill); }
body[data-ui-tier="s"] .shl-qrow-state { gap: 11.9px; font-size: 12.4px; letter-spacing: -0.02em; }
body[data-ui-tier="s"] .shl-qrow-state svg { width: 15px; height: 11.2px; }
body[data-ui-tier="s"] .shl-qrow-pill { font-size: 10.5px; letter-spacing: -0.02em; }
body[data-ui-tier="s"] .shl-qrow-eta { font-size: 11.6px; }
body[data-ui-tier="s"] .shl-expand { font-size: 14.2px; }

/* ════════ THE PHOTO (8 Oct 2026) — mockup 01's: sharp behind the header and the band, gone into the page below ════════
   Hugo (page 01): "we need to have some sort of fade on the background image, and you see how nice it looks on the
   mockup, with the tree where it is? We need to have the exact same thing." Every phone page: the project photo shows
   behind the header panel and the project band (where it sits is the skin's: backdrop.css reads --sk-phone-photo-size
   / --sk-phone-photo-position, Rain At Dusk puts its tree right of the title as in the mockup), then an OVERLAY in the
   page's own colour (--bg) fades it out under the band: clear down to 112px, gone by 160px (the mockup's left gutter:
   L* 23 to y~100, then 10 by y~152, at the top of its progress card). The photo itself is never filtered or recoloured
   (an overlay on top, like forest's veil). Above the photo and its veil, under the app (#app is z-index 1). The side
   menu, search and the notifications show the photo as they always did (no fade while one is open). */
body[data-ui-tier="s"]::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0, transparent 112px,
    color-mix(in srgb, var(--bg) 30%, transparent) 124px, color-mix(in srgb, var(--bg) 66%, transparent) 136px,
    color-mix(in srgb, var(--bg) 90%, transparent) 148px, var(--bg) 160px, var(--bg) 100%);
}
body[data-ui-tier="s"].shl-open::after { content: none; }

/* ════════ THE BACK PANEL (8 Oct 2026) — Hugo's standing rule: every phone page sits on a panel, like the desktop ════════
   Hugo (page 02): "we completely lost the back panel that is supposed to be in between the UI and the background
   image. I want this back. just like the deskptop app"; (page 03): "make that a rule to have it back on everything".
   The phone page (its root: .pk-page, the shot list's .psl-root) IS the panel, the desktop page panel's own material
   (styles/views-pages.css .view-page; the glass family's skin-glass.css .view-page: the lift, the smoked gradient, the
   22px blur, the edge, the corner sheen) at the phone's card corner, inside the shell's 10px gutters, from under the
   band down to the bottom bar whatever the page holds (mockup 03's panel). The pages' own sheets, veils and side
   margins step aside for it (the :not(#shl-no-such-id) carries the weight of an id over every page's own root rule). A sheet (the shot
   window...) and the overlays are not pages: untouched. */
body[data-ui-tier="s"] .main-content:not(#shl-no-such-id) { background-image: none; }
body[data-ui-tier="s"] .main-content > .pk-page:not(#shl-no-such-id),
body[data-ui-tier="s"] .main-content > .psl-root:not(#shl-no-such-id) {
  flex: 1 1 auto; margin: 0; border: 0; border-radius: var(--pk-radius-card);
  background: color-mix(in srgb, var(--card-bg-solid) 92%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25); backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 65%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--hi-2) 35%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 6%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--shadow-ink-2) 4%, transparent),
    0 2px 6px color-mix(in srgb, var(--shadow-ink) 8%, transparent),
    0 8px 18px color-mix(in srgb, var(--shade) 14%, transparent);
}
body[data-ui-tier="s"][data-skin-family="glass"] .main-content > .pk-page:not(#shl-no-such-id),
body[data-ui-tier="s"][data-skin-family="glass"] .main-content > .psl-root:not(#shl-no-such-id) {
  background-color: var(--sep-page-fill);
  background-image:
    linear-gradient(135deg,
      color-mix(in srgb, var(--sk-glass-fill-5, color-mix(in srgb, var(--sk-ramp-3) 22%, var(--sk-light))) 10%, transparent) 0%,
      color-mix(in srgb, var(--sk-glass-fill-6, color-mix(in srgb, var(--sk-a3) 54%, var(--sk-light))) 6.2%, transparent) 20%,
      color-mix(in srgb, var(--sk-glass-fill-6, color-mix(in srgb, var(--sk-a3) 54%, var(--sk-light))) 2.2%, transparent) 42%,
      transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--sk-glass-fill-4, color-mix(in srgb, var(--sk-page) 93%, var(--sk-ramp-2))) calc(60% + var(--sk-panels-solid) * 32%), transparent) 0%,
      color-mix(in srgb, var(--sk-glass-panel-lo-1, color-mix(in srgb, var(--sk-a4) 12%, var(--sk-dark))) calc(70% + var(--sk-panels-solid) * 22%), transparent) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35);
  box-shadow:
    0 0 0 1px var(--edge-1),
    inset 0 1px 0 color-mix(in srgb, var(--sk-view-page-shadow-1, color-mix(in srgb, var(--sk-ramp-3) 11%, var(--sk-light))) 24%, transparent),
    inset 0 9px 16px -11px color-mix(in srgb, var(--sk-view-page-shadow-2, color-mix(in srgb, var(--sk-ramp-3) 19%, var(--sk-light))) 30%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 38%, transparent),
    inset 0 -34px 52px -40px var(--pool-hot),
    var(--elev-2);
}
/* a paper skin with stone panels (--sk-panels: solid): its page panel's own stone, as on the desktop */
@container style(--sk-panels: solid) {
  body[data-ui-tier="s"][data-skin-family="paper"] .main-content > .pk-page:not(#shl-no-such-id),
  body[data-ui-tier="s"][data-skin-family="paper"] .main-content > .psl-root:not(#shl-no-such-id) {
    background-color: var(--sk-sep-view-1, var(--card-bg-solid));
  }
}
/* the two pages whose heading stood at the very top of the page, on the photo (Admin, Settings: mockups 18 / 19): the
   panel's inner space above it, so the heading sits ON the panel, not cut by its edge */
body[data-ui-tier="s"] .pad-page .pad-top { padding-top: 9px; }
body[data-ui-tier="s"] .pst-page .pst-top { padding-top: 9px; }