/* styles/phone-notif.css — THE PHONE NOTIFICATIONS SCREEN (6 Oct 2026), Hugo's mockup 24, measured on the fair bench
   (a copy of the live data, the project's skin + photo worn, 412 x 915 at DPR 3.5; every size the mockup's own at
   412 CSS px, ours / mockup within 0.95-1.05). The screen is the shell's notifications overlay (src/PhoneShell.jsx
   ShlNotifications, opened by the header's bell); this file only restyles it, scoped to .shl-overlay--notif, so the
   side menu and search (the same overlay family) never change. Phone tier only, skin tokens only.
   What the mockup does:
   - the app's own header and the page's project band stay where they are, crisp, over the photo; the page under them
     is gone (the photo shows) and ONE frosted dark-slate sheet floats over it: x 12.7-399.7, y 215 (588 tall, 1px
     light rim, a big soft shadow); the photo glows through it, blurred;
   - in it: NOTIFICATIONS (Bebas 28) + a 35 x 36 square ✕; an amber-rimmed "● 3 UNREAD" pill (condensed caps) and a
     slate "Mark all read" button; then the notifications as cool slate cards 360 x 88 (gap 8): a 57px amber-rimmed
     ring with the event's line icon, the title in a condensed face WITH lowercase ("SH0020 entered FIRST PASS"),
     "Ben Wilde · 4d ago", the amber unread dot (lit) and a grey chevron;
   - the empty glass under the cards, then a full-width amber gradient "View all activity →" (359 x 53, navy text) at
     the sheet's foot (26 Oct 2026: no help line under it, Hugo: "get rid of this, everywhere"; its gap is the button's).
   Every control keeps a 40px tap area (the ✕ and the pill are 35-37 visual inside a transparent border). */

body[data-ui-tier="s"] .shl-overlay--notif {
  --ntf-deep: var(--card-bg-solid);   /* (glass: the dark page) */
  --ntf-amber: color-mix(in srgb, var(--accent) 70%, var(--ink));   /* (glass: the mockup's amber) */
  --ntf-cta-ink: var(--ink-on-accent);
  --ntf-sheet: color-mix(in srgb, color-mix(in srgb, var(--ink) 6%, var(--card-bg-solid)) 74%, transparent);
  --ntf-rim: color-mix(in srgb, var(--ink) 26%, transparent);
  --ntf-card: color-mix(in srgb, color-mix(in srgb, var(--ink) 6%, var(--card-bg-solid)) 92%, transparent);
  --ntf-card-rim: color-mix(in srgb, var(--ink) 13%, transparent);
  --ntf-ctl: color-mix(in srgb, color-mix(in srgb, var(--ink) 3%, var(--card-bg-solid)) 86%, transparent);
  --ntf-muted: color-mix(in srgb, var(--ink-muted) 76%, var(--card-bg-solid));
  --ntf-cond: "Barlow Condensed", "Bebas Neue", var(--font-display);
}
body[data-ui-tier="s"][data-skin-family="glass"] .shl-overlay--notif {
  --ntf-deep: var(--bg);
  --ntf-amber: color-mix(in srgb, var(--accent) 25%, var(--warn));
  --ntf-cta-ink: color-mix(in srgb, var(--card-bg-solid) 55%, var(--bg));
}
body[data-ui-tier="s"] .shl-overlay.shl-overlay--notif { top: calc(var(--shl-hdr-h, 48px) + env(safe-area-inset-top, 0px)); padding-top: 0; }
/* the header and the band stay the app's own (the overlay starts under the header bar; its own copy is not drawn) */
body[data-ui-tier="s"] .shl-overlay--notif > .shl-bar { display: none; }
/* 1 Nov 2026 — was :has(.shl-overlay--notif): a page-wide :has() made EVERY DOM change restyle the page (21-42 ms per insert, measured). PhoneShell puts .shl-open--notif on the body while this sheet is open: same match, no cost. */
body[data-ui-tier="s"].shl-open--notif .project-header .phm-bar,
body[data-ui-tier="s"].shl-open--notif .project-header .ph-right { visibility: visible; }
body[data-ui-tier="s"] .shl-overlay--notif .shl-overlay-scrim { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* the header's bell while its sheet is open: the shell's bare glyph, lit amber and filled (mockup 24); no disc, no size change */
body[data-ui-tier="s"].shl-open--notif .project-header .ph-right .ph-iconbtn[aria-label="Notifications"] { color: color-mix(in srgb, var(--accent) 25%, var(--warn)); }
body[data-ui-tier="s"].shl-open--notif .project-header .ph-right .ph-iconbtn[aria-label="Notifications"] svg { fill: currentColor; }
/* the page under the sheet is gone: the photo shows (the band and the header stay) */
body[data-ui-tier="s"].shl-open--notif .main-content > :not(.project-header) { visibility: hidden; }
body[data-ui-tier="s"].shl-open--notif .main-content { background-image: none; }

/* ── THE SHEET ── */
body[data-ui-tier="s"] .shl-overlay--notif .shl-scroll {
  position: absolute; left: 12.7px; right: 12.3px; top: calc(var(--shl-notif-top, 215.1px) - var(--shl-hdr-h, 48px)); height: 588.4px;
  max-height: calc(100% - var(--shl-notif-top, 215.1px) + var(--shl-hdr-h, 48px) - 12px); flex: none; display: block; padding: 0; gap: 0; overflow: visible;
}
body[data-ui-tier="s"] .shl-overlay--notif .shl-panel {
  position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 0; padding: 0;
  border: 1px solid var(--ntf-rim); border-radius: var(--pk-radius-card); background: var(--ntf-sheet);
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--black) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}
body[data-ui-tier="s"] .shl-overlay--notif .shl-panel-head { flex: 0 0 auto; position: relative; height: 36.3px; margin: 11.2px 0 0; padding: 0 18px 0 22px; display: flex; align-items: center; }
body[data-ui-tier="s"] .shl-overlay--notif .shl-panel-title {
  flex: 1 1 auto; margin-top: 3.8px; font-family: "Bebas Neue", var(--font-display); font-size: 28px; line-height: 1; letter-spacing: 0.005em; color: var(--ink);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--black) 40%, transparent);
}
body[data-ui-tier="s"] .shl-overlay--notif .shl-close {
  flex: 0 0 auto; width: 41.3px; height: 42.3px; margin: -3px -3px -3px 0; padding: 0; cursor: pointer; display: grid; place-items: center;
  border: 3px solid transparent; background-clip: padding-box; border-radius: calc(var(--pk-radius-control) + 3px);
  background-color: color-mix(in srgb, color-mix(in srgb, var(--ink) 5%, var(--card-bg-solid)) 92%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent);
  color: var(--ink);
}
body[data-ui-tier="s"] .shl-overlay--notif .shl-close svg { width: 19px; height: 19px; stroke-width: 2.4; }
/* ● 3 UNREAD (amber-rimmed, condensed caps) · Mark all read */
body[data-ui-tier="s"] .shl-overlay--notif .shl-notif-tools {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 40.2px; margin: 9.4px 0 0; padding: 0 20px 0 19.1px;
}
body[data-ui-tier="s"] .shl-overlay--notif .shl-unread {
  flex: 0 0 auto; width: 122px; height: 40.7px; min-height: 0; margin: -2px 0; padding: 0 0 0 17.6px; box-sizing: border-box; gap: 13.7px; justify-content: flex-start;
  border: 2px 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) + 2px);
  background-color: color-mix(in srgb, color-mix(in srgb, var(--ntf-amber) 10%, color-mix(in srgb, var(--card-bg-solid) 50%, var(--ntf-deep))) 85%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ntf-amber) 48%, transparent);
  color: var(--ntf-amber); font-family: var(--ntf-cond); font-size: 15.5px; font-weight: 600; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase;
}
body[data-ui-tier="s"] .shl-overlay--notif .shl-unread::before {
  flex: 0 0 auto; width: 11.3px; height: 11.3px; background: var(--ntf-amber); box-shadow: 0 0 6px color-mix(in srgb, var(--ntf-amber) 70%, transparent);
}
body[data-ui-tier="s"] .shl-overlay--notif .shl-unread.is-zero { color: var(--ink-muted); background-color: transparent; box-shadow: inset 0 0 0 1px var(--ntf-rim); }
body[data-ui-tier="s"] .shl-overlay--notif .shl-unread.is-zero::before { background: var(--status-ok); box-shadow: none; }
body[data-ui-tier="s"] .shl-overlay--notif .shl-notif-tools .shl-btn {
  flex: 0 0 auto; width: 150.4px; height: 40.2px; min-height: 0; padding: 0; border: 0;
  border-radius: var(--pk-radius-control); background: var(--ntf-ctl); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 24%, transparent);
  color: var(--ink); font-family: var(--font-body); font-size: 12.2px; font-weight: var(--fw-med); letter-spacing: 0;
}
/* the notifications: cool slate cards */
body[data-ui-tier="s"] .shl-overlay--notif .shl-notifs {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 7.9px; margin: 16.1px 0 0; padding: 0 12.1px 8px 12.3px; overflow-y: auto; overscroll-behavior: contain;
}
body[data-ui-tier="s"] .shl-overlay--notif .shl-notif {
  flex: 0 0 auto; position: relative; display: flex; align-items: center; gap: 0; width: 100%; min-height: 0; height: 87.9px; margin: 0; padding: 0 17.7px 0 13.2px; box-sizing: border-box;
  border: 1px solid var(--ntf-card-rim); border-radius: var(--pk-radius-card); background: var(--ntf-card);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--black) 25%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
}
body[data-ui-tier="s"] .shl-overlay--notif .shl-notif:active { background: color-mix(in srgb, var(--ink) 6%, var(--ntf-card)); }
body[data-ui-tier="s"] .shl-overlay--notif .shl-notif-ico {
  flex: 0 0 57.3px; width: 57.3px; height: 57.3px; box-sizing: border-box; margin: 0 18.6px 0 0;
  border: 2px solid var(--ntf-amber); background: color-mix(in srgb, var(--ntf-amber) 18%, var(--ntf-deep)); color: var(--ntf-amber);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ntf-amber) 22%, transparent);
}
body[data-ui-tier="s"] .shl-overlay--notif .shl-notif-ico svg { width: 28px; height: 28px; stroke-width: 1.6; }
body[data-ui-tier="s"] .shl-overlay--notif .shl-notif.is-read .shl-notif-ico { border-color: var(--ntf-rim); color: var(--ink-muted); background: transparent; box-shadow: none; }
body[data-ui-tier="s"] .shl-overlay--notif .shl-notif-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 9.4px; padding-top: 1.6px; }
body[data-ui-tier="s"] .shl-overlay--notif .shl-notif-title {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: none;
  font-family: var(--ntf-cond); font-size: 17.9px; font-weight: 600; line-height: 20px; letter-spacing: 0; text-transform: none; color: var(--ink);
}
body[data-ui-tier="s"] .shl-overlay--notif .shl-notif-sub { font-family: var(--font-body); font-size: 13px; line-height: 16px; color: var(--ntf-muted); }
body[data-ui-tier="s"] .shl-overlay--notif .shl-notif-dot {
  flex: 0 0 10.8px; width: 10.8px; height: 10.8px; margin: 0 24.5px 0 10px; background: var(--ntf-amber);
  box-shadow: 0 0 5px color-mix(in srgb, var(--ntf-amber) 75%, transparent), 0 0 10px color-mix(in srgb, var(--ntf-amber) 30%, transparent);
}
body[data-ui-tier="s"] .shl-overlay--notif .shl-notif:not(:has(.shl-notif-dot)) .shl-chev { margin-left: 45.3px; }
body[data-ui-tier="s"] .shl-overlay--notif .shl-chev { flex: 0 0 auto; display: block; width: 7.8px; height: 14.7px; overflow: visible; color: color-mix(in srgb, var(--ink-muted) 86%, var(--card-bg-solid)); }
body[data-ui-tier="s"] .shl-overlay--notif .shl-chev svg { display: block; width: 29.4px; height: 29.4px; margin: -7.35px 0 0 -12px; stroke-width: 1.7; }
body[data-ui-tier="s"] .shl-overlay--notif .shl-empty { padding: 16px 4px; font-size: 13px; color: var(--ntf-muted); }
/* View all activity → (amber gradient, navy text) at the sheet's foot (the old foot line's bottom gap is its own) */
body[data-ui-tier="s"] .shl-overlay--notif .shl-panel > .shl-btn.is-primary {
  flex: 0 0 auto; width: auto; height: 52.9px; min-height: 0; margin: 4px 13.2px 27.7px 13.2px; padding: 0 0 0 4px; gap: 9px;
  border: 0; border-radius: var(--pk-radius-control);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--white) 24%, transparent), color-mix(in srgb, var(--white) 6%, transparent) 38%, transparent 55%, color-mix(in srgb, var(--black) 8%, transparent)),
    linear-gradient(100deg, color-mix(in srgb, var(--accent) 86%, var(--black)), color-mix(in srgb, var(--accent) 50%, var(--warn)));   /* mockup 24: lit from the top, lighter to the right */
  background-color: var(--accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--warn) 70%, var(--white)), 0 0 16px color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--ntf-cta-ink); font-family: var(--font-body); font-size: 16.5px; font-weight: var(--fw-semi); letter-spacing: -0.005em;
}
body[data-ui-tier="s"] .shl-overlay--notif .shl-panel > .shl-btn.is-primary svg { width: 21px; height: 21px; stroke-width: 2.3; }