/* styles/phone-kit.css — THE PHONE KIT (5 Oct 2026): the phone app's design system, extracted from the phone shot
   sheet Hugo accepted (src/PhoneShots.jsx, styles/phone-shots.css). Every phone page is built from these classes
   + the helpers in src/PhoneKit.jsx; the rules and examples are in docs/phone-kit.md.
   - Phone tier only: every rule sits under body[data-ui-tier="s"], every class is .pk-* (rendered on the phone
     only), so the desktop never sees any of it.
   - Colours are skin tokens only (no hex / rgb / hsl: every skin supplies the tokens).
   - Spacing is the 8-pt scale (--pk-1..--pk-8 = 4 / 8 / 12 / 16 / 24 / 32), 16px side gutters; ONE corner
     scale, tight (Hugo, 6 Oct 2026: "our radius are too big on mobile. needs to be overall tighter everywhere"):
     --pk-radius-card 8 (cards, panels, sheets), --pk-radius-row 7 (list rows), --pk-radius-control 7 (buttons,
     inputs, search, segmented controls), --pk-radius-chip 6 (chips, tabs, status pills - no fully-round pills),
     --pk-radius-small 4 (badges, thumbnails, tiny tags, bars); a circle (avatar, ring, round icon button, dot,
     play) is 50%. Never a literal radius in a phone stylesheet. A control whose 40px tap area is a transparent
     border keeps its visible corner exact with an elliptical radius: T / calc(T + <border>px).
   - Type is the UI font everywhere (meta lines too, never monospace): --pk-fs-title 20 (display font),
     section 15, body 14, control 13, meta 12, small 12. (6 Oct 2026 - the DENSITY of Hugo's phone mockups /
     DESIGN-SPEC: body ~14, secondary 11-12, compact controls; the TAP area stays 40-44px through transparent
     padding / borders while the visible control is ~32-36px. 12px is the floor: nothing smaller.)
   - Every tap target is 40px or more (rows 48px). Nothing may run off the right edge: a row that can outgrow a
     360px phone scrolls sideways with a fade on the edge that has more (data-fade, set by PhoneChips), or ends
     in an ellipsis. No tooltips.
   Loaded BEFORE styles/phone-shots.css and every page's own phone stylesheet, so a page's rule wins a tie. */

/* ════════ THE SCALE ════════ */
body[data-ui-tier="s"] {
  --pk-1: 4px; --pk-2: 8px; --pk-3: 12px; --pk-4: 16px; --pk-6: 24px; --pk-8: 32px;
  --pk-gutter: 16px; --pk-tap: 40px; --pk-row: 48px;
  --pk-fs-title: var(--fs-20); --pk-fs-section: var(--fs-15); --pk-fs-body: var(--fs-14);
  --pk-fs-control: var(--fs-13); --pk-fs-meta: var(--fs-12); --pk-fs-small: var(--fs-12);
  /* THE CORNERS (6 Oct 2026): one tight scale for every phone page */
  --pk-radius-card: 8px; --pk-radius-row: 7px; --pk-radius-control: 7px; --pk-radius-chip: 6px; --pk-radius-small: 4px;
  /* the shared corner tokens, tighter on the phone, so a desktop component a phone page wraps tightens too
     (a circle never rides these: it is 50%, see THE CIRCLES at the end of this file) */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-pill: 7px; --r-round: 7px;
  --r-7: 7px; --r-9: 7px; --r-panel: 7px; --r-card: 8px;
}

/* ════════ PAGE + HEADER + SECTIONS ════════ */
/* a phone page: fills the shell's content area (above the bottom tab bar - .main-content already stops at it)
   and is the ONE thing that scrolls; edge to edge with its own 16px gutter; the end clears the bubbles */
/* opaque, like the shot sheet: text never sits on the project photo (a dark photo under dark ink is unreadable);
   the page is a touch darker than the card colour, so cards and lists read as panels lighter than their parent */
body[data-ui-tier="s"] .main-content > .pk-page {
  flex: 1 1 auto; min-height: 0; margin: 0 -10px;
  background: color-mix(in srgb, var(--black) 5%, var(--card-bg-solid));
}
body[data-ui-tier="s"] .pk-page > .pk-header { background: inherit; }
body[data-ui-tier="s"] .pk-page {
  display: flex; flex-direction: column; gap: var(--pk-4); min-width: 0; min-height: 0;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 0 0 24px; color: var(--ink); font-family: var(--font-body);   /* the floating bubbles live in the side menu on the phone now (phone-shell.css) */
}
body[data-ui-tier="s"] .pk-page-body { display: flex; flex-direction: column; gap: var(--pk-4); min-width: 0; padding: 0 var(--pk-gutter); }

/* the header: title (+ subtitle) left, round icon actions right; sticky at the top of its scroller */
body[data-ui-tier="s"] .pk-header {
  position: sticky; top: 0; z-index: 2; flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--pk-1); min-width: 0; min-height: 48px;
  padding: var(--pk-1) max(var(--pk-2), env(safe-area-inset-right, 0px)) var(--pk-1) max(var(--pk-gutter), env(safe-area-inset-left, 0px));
  background: var(--card-bg-solid); color: var(--ink);
}
body[data-ui-tier="s"] .pk-header.is-flat { position: relative; }
body[data-ui-tier="s"] .pk-header-title {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  line-height: 1.15; margin-right: var(--pk-1);
}
body[data-ui-tier="s"] .pk-header-main {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--pk-fs-title); letter-spacing: var(--track-02);
}
body[data-ui-tier="s"] .pk-header-sub {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--pk-fs-meta); color: var(--ink-muted);
}
body[data-ui-tier="s"] .pk-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--pk-1); }

body[data-ui-tier="s"] .pk-section { display: flex; flex-direction: column; gap: var(--pk-2); min-width: 0; }
body[data-ui-tier="s"] .pk-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-2); min-width: 0; min-height: 32px; }
body[data-ui-tier="s"] .pk-section-title {
  display: inline-flex; align-items: center; gap: var(--pk-2); min-width: 0;
  font-size: var(--pk-fs-section); font-weight: var(--fw-semi); color: var(--ink);
}
body[data-ui-tier="s"] .pk-section-meta {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--pk-fs-meta); color: var(--ink-muted);
}

/* ════════ BUTTONS ════════ */
/* the round 40px icon button (header actions, close, ‹ ›); .pk-iconbtn--tint = on a faint disc (close) */
body[data-ui-tier="s"] .pk-iconbtn {
  flex: 0 0 40px; width: 40px; height: 40px; padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 0; background: transparent; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pk-iconbtn:disabled { opacity: 0.28; cursor: default; }
body[data-ui-tier="s"] .pk-iconbtn:active:not(:disabled),
body[data-ui-tier="s"] .pk-iconbtn.is-on { background: color-mix(in srgb, var(--ink) 10%, transparent); }
body[data-ui-tier="s"] .pk-iconbtn--tint { background: color-mix(in srgb, var(--ink) 7%, transparent); }
/* two icon buttons sharing one faint pill (‹ ›) */
body[data-ui-tier="s"] .pk-iconpair { flex: 0 0 auto; display: flex; border-radius: var(--pk-radius-control); background: color-mix(in srgb, var(--ink) 7%, transparent); }

/* the action row: centred round icons with a small label under each; "on" = the accent fill; 5 at most */
body[data-ui-tier="s"] .pk-actions { display: flex; justify-content: center; flex-wrap: nowrap; gap: var(--pk-1); min-width: 0; padding: var(--pk-2) var(--pk-3) 0; }
body[data-ui-tier="s"] .pk-action {
  flex: 0 1 68px; min-width: 48px; min-height: 64px; padding: 0; margin: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--pk-1);
  border: 0; background: transparent; color: var(--ink); font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pk-action:disabled { opacity: 0.5; cursor: progress; }
body[data-ui-tier="s"] .pk-action-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink);
}
body[data-ui-tier="s"] .pk-action:active:not(:disabled) .pk-action-icon { background: color-mix(in srgb, var(--ink) 14%, transparent); }
body[data-ui-tier="s"] .pk-action.is-on .pk-action-icon { background: var(--accent); color: var(--ink-on-accent); }
body[data-ui-tier="s"] .pk-action-label {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-12); font-weight: var(--fw-med); color: var(--ink-muted);
}
body[data-ui-tier="s"] .pk-action.is-on .pk-action-label { color: var(--ink); font-weight: var(--fw-semi); }

/* a full-width text button (primary = the call-to-action colours) */
body[data-ui-tier="s"] .pk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pk-2);
  min-height: 44px; padding: 0 var(--pk-4); margin: 0; cursor: pointer; border-radius: var(--pk-radius-control);
  border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;   /* 44px to tap, 36px to see */
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink);
  font-family: var(--font-body); font-size: var(--pk-fs-control); font-weight: var(--fw-semi); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pk-btn.is-primary { background: var(--cta-bg); color: var(--cta-ink); }
body[data-ui-tier="s"] .pk-btn.is-danger { color: var(--danger); }
body[data-ui-tier="s"] .pk-btn.is-block { display: flex; width: 100%; }
body[data-ui-tier="s"] .pk-btn:disabled { opacity: 0.4; cursor: default; }

/* ════════ SEGMENTED CONTROL ════════ */
/* a tinted track, the picked segment a raised thumb (an inset ring of the track's own colour makes the 40px
   tap target read as a 34px thumb); full width by default, .pk-seg--mini sizes to its labels */
body[data-ui-tier="s"] .pk-seg {
  display: flex; width: 100%; min-width: 0; margin: 0; padding: 0; gap: 0;
  border-radius: var(--pk-radius-control); overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, var(--card-bg-solid));
}
body[data-ui-tier="s"] .pk-seg-btn {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 8px; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: var(--pk-radius-chip); background: transparent; color: var(--ink-muted);
  font-family: var(--font-body); font-size: var(--pk-fs-control); font-weight: var(--fw-semi); line-height: 1;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pk-seg-btn.is-on {
  color: var(--ink); background: var(--card-bg-solid);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ink) 8%, var(--card-bg-solid)), 0 1px 2px color-mix(in srgb, var(--shade-42) 18%, transparent);
}
body[data-ui-tier="s"] .pk-seg-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pk-seg-n { flex: 0 0 auto; font-size: var(--pk-fs-small); font-weight: var(--fw-med); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .pk-seg--mini { width: auto; flex: 0 0 auto; }
body[data-ui-tier="s"] .pk-seg--mini .pk-seg-btn { flex: 0 0 auto; padding: 0 12px; font-size: var(--fs-13); }

/* ════════ CHIP ROW ════════ */
/* compact chips that fit, or scroll sideways with a fade on the edge that has more (never clipped) */
body[data-ui-tier="s"] .pk-chips {
  display: flex; align-items: center; gap: var(--pk-1); min-width: 0; max-width: 100%;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
}
body[data-ui-tier="s"] .pk-chips::-webkit-scrollbar { display: none; }
body[data-ui-tier="s"] .pk-chips[data-fade="end"] { -webkit-mask-image: linear-gradient(to right, var(--black) calc(100% - 32px), transparent); mask-image: linear-gradient(to right, var(--black) calc(100% - 32px), transparent); }
body[data-ui-tier="s"] .pk-chips[data-fade="start"] { -webkit-mask-image: linear-gradient(to left, var(--black) calc(100% - 32px), transparent); mask-image: linear-gradient(to left, var(--black) calc(100% - 32px), transparent); }
body[data-ui-tier="s"] .pk-chips[data-fade="both"] { -webkit-mask-image: linear-gradient(to right, transparent, var(--black) 32px, var(--black) calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, var(--black) 32px, var(--black) calc(100% - 32px), transparent); }
/* .pk-chips--solid: on the solid card colour, so the row reads over the project photo */
body[data-ui-tier="s"] .pk-chips--solid { padding: 0 4px; border-radius: var(--pk-radius-control); background: var(--card-bg-solid); }
/* 40px to tap, 32px to see: the 4px top + bottom borders are transparent and the fill stops at them */
body[data-ui-tier="s"] .pk-chip {
  flex: 0 0 auto; min-height: 40px; padding: 0 12px; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 4px); background-color: transparent; color: var(--ink-muted);
  font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-semi); line-height: 1; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pk-chip.is-on {
  color: var(--ink); background-color: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
body[data-ui-tier="s"] .pk-chip-n { font-size: var(--pk-fs-small); font-weight: var(--fw-med); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ════════ TABS ════════ */
/* 8 Oct 2026 — Hugo: "I dont like all those pills for the categories ... they should be more like the tabs on the desktop
   app. Much cleaner." The desktop's text tabs (.vp-tab, views-pages.css) on the phone: a label and its small count, the
   open one in the ink with a 2px underline (the dark-glass skins: their --leaf accent, like skin-glass.css), 18px apart,
   ONE row that scrolls sideways (no wrap, no scrollbar; PhoneTabs / phoneTabsReveal scroll the open one into view).
   40px to tap: the text sits 6px over its underline like the desktop's, the room above it is the tap area.
   Every property a desktop pill might carry is reset, so a page that WRAPS a desktop page can give the desktop's own row
   these classes (the Script page's speaker filter, Paradise Found's Assets tabs): the open one keeps its .is-active. */
body[data-ui-tier="s"] { --pk-tab-fs: var(--fs-14); --pk-tab-n-fs: var(--fs-11); --pk-tab-line: var(--sidebar-bg); }
body[data-ui-tier="s"][data-skin-family="glass"] { --pk-tab-line: var(--leaf); }
body[data-ui-tier="s"] .pk-tabs {
  display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 18px; min-width: 0; max-width: 100%;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
  border: 0; background: transparent; box-shadow: none; -webkit-mask-image: none; mask-image: none;
  contain: inline-size;   /* its tabs never widen what holds it (a shrink-to-fit parent took the whole row's width) */
}
body[data-ui-tier="s"] .pk-tabs::-webkit-scrollbar { display: none; }
body[data-ui-tier="s"] .pk-tab {
  position: relative; flex: 0 0 auto; display: inline-flex; flex-wrap: wrap; align-content: flex-end; align-items: baseline; column-gap: 6px; row-gap: 0;
  box-sizing: border-box; height: 40px; min-height: 40px; min-width: 40px; margin: 0; padding: 0 0 6px; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; text-shadow: none;
  transform: none; opacity: 1; filter: none; -webkit-backdrop-filter: none; backdrop-filter: none; outline-offset: -2px;
  color: var(--ink-muted); font-family: var(--font-body); font-size: var(--pk-tab-fs); font-weight: 400; font-style: normal;
  line-height: normal; letter-spacing: normal; text-transform: none; font-feature-settings: normal; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pk-tab.is-on, body[data-ui-tier="s"] .pk-tab.is-active { color: var(--ink); font-weight: var(--fw-med); border-bottom-color: var(--pk-tab-line); }
body[data-ui-tier="s"] .pk-tab-n {
  display: inline-block; min-width: 2ch; margin: 0 0 0 6px; padding: 0; border: 0; border-radius: 0; background: transparent; opacity: 1;
  color: var(--ink-muted); font-size: var(--pk-tab-n-fs); font-weight: inherit; letter-spacing: normal; text-transform: none;
  font-feature-settings: var(--tnum); text-align: right;
}
body[data-ui-tier="s"] .pk-tab.is-on .pk-tab-n, body[data-ui-tier="s"] .pk-tab.is-active .pk-tab-n { color: var(--ink); background: transparent; }

/* ════════ LIST + ROWS ════════ */
/* a grouped list on one surface; each row >= 48px, tappable, ends in a chevron (PhoneKit's PK_ICON.chevron) */
body[data-ui-tier="s"] .pk-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--card-border); border-radius: var(--pk-radius-card); overflow: hidden; background: var(--card-bg-solid);
}
body[data-ui-tier="s"] .pk-row {
  display: flex; align-items: center; gap: var(--pk-3); width: 100%; min-width: 0; min-height: var(--pk-row);
  padding: var(--pk-2) var(--pk-3) var(--pk-2) var(--pk-4); margin: 0; text-align: left; cursor: pointer;
  border: 0; border-top: 1px solid var(--card-border); background: transparent; color: var(--ink);
  font-family: var(--font-body); font-size: var(--pk-fs-body);
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pk-list > .pk-row:first-child,
body[data-ui-tier="s"] .pk-list > li:first-child > .pk-row { border-top: 0; }
body[data-ui-tier="s"] .pk-row:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }
body[data-ui-tier="s"] .pk-row-lead {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden;
  border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--ink) 8%, var(--card-bg-solid)); color: var(--ink);
}
body[data-ui-tier="s"] .pk-row-lead.is-round { border-radius: 50%; }
body[data-ui-tier="s"] .pk-row-lead > img { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-ui-tier="s"] .pk-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body[data-ui-tier="s"] .pk-row-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pk-row-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pk-fs-meta); color: var(--ink-muted); }
body[data-ui-tier="s"] .pk-row-end { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--pk-2); color: var(--ink-muted); font-size: var(--pk-fs-meta); }
body[data-ui-tier="s"] .pk-row-chev { flex: 0 0 auto; display: grid; place-items: center; color: var(--ink-muted); }

/* ════════ MEDIA CARD ════════ */
/* a tappable card: the picture at its OWN ratio (--pk-ar on .pk-card-media, never taller than 60% of the
   screen), then one meta line (status dot, name, a badge) */
body[data-ui-tier="s"] .pk-card {
  display: block; width: 100%; min-width: 0; flex: 0 0 auto; padding: 0; margin: 0; text-align: left; cursor: pointer;
  border: 1px solid var(--card-border); border-radius: var(--pk-radius-card); overflow: hidden;
  background: var(--card-bg-solid); color: var(--ink); font-family: var(--font-body);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--shade-42) 14%, transparent);
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pk-card:active { transform: scale(0.99); }
body[data-ui-tier="s"] .pk-card.is-dim { opacity: 0.55; }
body[data-ui-tier="s"] .pk-card-media {
  display: block; width: 100%; aspect-ratio: var(--pk-ar, 16 / 9); max-height: 60vh;
  background: color-mix(in srgb, var(--ink) 8%, var(--card-bg-solid));
}
body[data-ui-tier="s"] .pk-card-media > img,
body[data-ui-tier="s"] .pk-card-media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-ui-tier="s"] .pk-card-media-empty {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--ink-muted); letter-spacing: var(--track-02);
}
body[data-ui-tier="s"] .pk-card-meta { display: flex; align-items: center; gap: var(--pk-2); min-width: 0; min-height: 48px; padding: 8px 12px 8px 16px; }
body[data-ui-tier="s"] .pk-card-title {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--pk-fs-body); font-weight: var(--fw-semi);
}
body[data-ui-tier="s"] .pk-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); }
/* a vertical stack of cards (the shot list's rhythm) */
body[data-ui-tier="s"] .pk-cards { display: flex; flex-direction: column; gap: var(--pk-3); min-width: 0; }

/* ════════ BADGE, EMPTY, TOGGLE ════════ */
body[data-ui-tier="s"] .pk-badge {
  min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-muted);
  font-size: var(--pk-fs-small); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap;
}
body[data-ui-tier="s"] .pk-badge.is-danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
body[data-ui-tier="s"] .pk-badge.is-accent { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }
body[data-ui-tier="s"] .pk-badge.is-ok { background: color-mix(in srgb, var(--status-ok) 16%, transparent); color: var(--ink); }

body[data-ui-tier="s"] .pk-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--pk-3);
  padding: 32px 8px; text-align: center; color: var(--ink-muted); font-size: var(--fs-13);
}
body[data-ui-tier="s"] .pk-empty-title { color: var(--ink); font-size: var(--pk-fs-section); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pk-empty.is-bad { color: var(--danger); }

/* an on / off switch: 52 x 32 track inside a 48px-tall tap row (<button role="switch" aria-checked>) */
body[data-ui-tier="s"] .pk-toggle {
  flex: 0 0 auto; position: relative; width: 52px; height: 40px; padding: 0; margin: 0; cursor: pointer;
  border: 0; background: transparent; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pk-toggle::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 32px; border-radius: var(--pk-radius-control);
  background: color-mix(in srgb, var(--ink) 18%, var(--card-bg-solid)); transition: background 0.15s;
}
body[data-ui-tier="s"] .pk-toggle::after {
  content: ""; position: absolute; left: 4px; top: 8px; width: 24px; height: 24px; border-radius: var(--pk-radius-small);
  background: var(--card-bg-solid); box-shadow: 0 1px 3px color-mix(in srgb, var(--shade-42) 30%, transparent);
  transition: transform 0.15s;
}
body[data-ui-tier="s"] .pk-toggle[aria-checked="true"]::before { background: var(--accent); }
body[data-ui-tier="s"] .pk-toggle[aria-checked="true"]::after { transform: translateX(20px); }
body[data-ui-tier="s"] .pk-toggle:disabled { opacity: 0.4; cursor: default; }

/* ════════ FULL-SCREEN SHEET ════════ */
/* full screen, opaque, above the drawer / burger / bubbles / tab bar (all inside #app; #modal-root - the
   styled confirm, toasts - stays on top). Three bands: .pk-sheet-top never scrolls (header and anything
   pinned), .pk-sheet-body scrolls, .pk-sheet-foot (optional) is pinned at the bottom above the safe area. */
body[data-ui-tier="s"] .pk-sheet {
  position: fixed; inset: 0; z-index: calc(var(--z-mobile-drawer) + 10);
  display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain;
  background: var(--card-bg-solid); color: var(--ink); font-family: var(--font-body);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}
/* while any sheet is open the bubbles + the tab bar step aside */
body[data-ui-tier="s"]:has(.pk-sheet) .aichat-root,
body[data-ui-tier="s"]:has(.pk-sheet) .agentfab-root,
body[data-ui-tier="s"]:has(.pk-sheet) .mtab-bar { visibility: hidden; }
body[data-ui-tier="s"] .pk-sheet-top {
  flex: 0 0 auto; display: flex; flex-direction: column; min-width: 0;
  border-bottom: 1px solid var(--card-border);
}
body[data-ui-tier="s"] .pk-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; gap: var(--pk-4); min-width: 0;
  padding: var(--pk-4);
}
body[data-ui-tier="s"] .pk-sheet-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--pk-2); min-width: 0;
  padding: var(--pk-2) var(--pk-4) calc(var(--pk-2) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--card-border); background: var(--card-bg-solid);
}

/* ════════ BOTTOM SHEET (menus, filters, the "…" of a page) ════════ */
body[data-ui-tier="s"] .pk-bottomsheet-scrim {
  position: fixed; inset: 0; z-index: calc(var(--z-mobile-drawer) + 20);
  background: color-mix(in srgb, var(--black) 42%, transparent);
}
body[data-ui-tier="s"] .pk-bottomsheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-mobile-drawer) + 21);
  display: flex; flex-direction: column; min-width: 0; max-height: 85dvh;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  border-radius: var(--pk-radius-card) var(--pk-radius-card) 0 0; background: var(--card-bg-solid); color: var(--ink); font-family: var(--font-body);
  box-shadow: 0 -12px 32px color-mix(in srgb, var(--shade-42) 32%, transparent);
}
body[data-ui-tier="s"] .pk-bottomsheet-grip { flex: 0 0 auto; align-self: center; width: 36px; height: 4px; margin: 8px 0 4px; border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--ink) 22%, transparent); }
body[data-ui-tier="s"] .pk-bottomsheet-title { flex: 0 0 auto; padding: 8px 16px; font-size: var(--pk-fs-section); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pk-bottomsheet-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; min-width: 0; padding: 4px 8px 12px;
}
/* a menu item in a bottom sheet: 48px, full width, left aligned */
body[data-ui-tier="s"] .pk-menu-item {
  display: flex; align-items: center; gap: var(--pk-3); width: 100%; min-height: var(--pk-row); padding: 0 12px; margin: 0;
  text-align: left; cursor: pointer; border: 0; border-radius: var(--pk-radius-row); background: transparent; color: var(--ink);
  font-family: var(--font-body); font-size: var(--pk-fs-body); font-weight: var(--fw-med);
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pk-menu-item:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }
body[data-ui-tier="s"] .pk-menu-item.is-on { color: var(--ink); font-weight: var(--fw-semi); background: color-mix(in srgb, var(--accent) 12%, transparent); }
body[data-ui-tier="s"] .pk-menu-item.is-danger { color: var(--danger); }

/* ════════ COMPOSER ════════ */
/* a pinned input + round send (notes, chat, comments); 16px text so iOS never zooms the page on focus */
body[data-ui-tier="s"] .pk-composer {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: var(--pk-2); min-width: 0; margin: 0;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 16px;
  border-top: 1px solid var(--card-border); background: var(--card-bg-solid);
}
body[data-ui-tier="s"] .pk-composer-input {
  flex: 1 1 auto; min-width: 0; min-height: 40px; max-height: 120px; padding: 9px 16px; margin: 0; resize: none;
  border: 1px solid var(--input-border); border-radius: var(--pk-radius-control); background: var(--input-bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-16); line-height: 20px; box-sizing: border-box;
}
body[data-ui-tier="s"] .pk-composer-input::placeholder { color: var(--ink-muted); }
body[data-ui-tier="s"] .pk-composer-input:focus { outline: none; border-color: var(--accent); }
body[data-ui-tier="s"] .pk-composer-send {
  flex: 0 0 40px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: var(--cta-bg); color: var(--cta-ink);
}
body[data-ui-tier="s"] .pk-composer-send:disabled { opacity: 0.35; cursor: default; }