/* styles/phone-social.css — the PHONE Social page (src/PhoneSocial.jsx, 6 Oct 2026; mockup 09-social.mockup.png).
   Phone tier only: every rule sits under body[data-ui-tier="s"], every class is .psoc-* (rendered on the phone only).
   Colours are skin tokens only. The look of the mockup: the project photo shows through the page; the shell's band
   (SOCIAL eyebrow, the project name, the album chip, the amber New post pill) above; underline tabs; each
   group a frosted glass card with a short helper line, an inset empty line and its action row; 40px+ tap targets;
   nothing past the right edge at 360px. */

/* the page: no opaque sheet over the photo (the cards carry the glass), 16px gutter from the kit */
body[data-ui-tier="s"] .main-content > .pk-page.psoc-page { background: transparent; }
body[data-ui-tier="s"] .psoc-page .pk-page-body { gap: var(--pk-3); padding-top: var(--pk-2); }

/* ── the tabs on a light glass band (the photo reads through; the ink stays readable on every skin, a paper skin's dark ink
   too). 6 Oct 2026: the shell's project band above names the page (SOCIAL), carries the album chip and the "New post"
   action (window.usePhoneBandAction), so the page has no heading row of its own. ── */
body[data-ui-tier="s"] .psoc-top {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0 calc(-1 * var(--pk-2)); padding: 4px 12px 0; border-radius: var(--pk-radius-card);
  border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--card-bg-solid) 58%, transparent), color-mix(in srgb, var(--card-bg-solid) 40%, transparent));
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
}
/* ── the tabs: text with an accent underline; scroll sideways when they cannot fit ── */
body[data-ui-tier="s"] .psoc-tabs {
  display: flex; gap: var(--pk-1); min-width: 0; margin: 0 -6px; padding: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
}
body[data-ui-tier="s"] .psoc-tabs::-webkit-scrollbar { display: none; }
body[data-ui-tier="s"] .psoc-tabs[data-fade="end"] { -webkit-mask-image: linear-gradient(to right, var(--black) calc(100% - 28px), transparent); mask-image: linear-gradient(to right, var(--black) calc(100% - 28px), transparent); }
body[data-ui-tier="s"] .psoc-tab {
  position: relative; flex: 0 0 auto; min-height: 40px; padding: 0 8px; margin: 0; cursor: pointer; border: 0; background: transparent;
  color: var(--ink-muted); font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-med); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psoc-tab.is-on { color: var(--ink); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .psoc-tab.is-on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 2px; border-radius: var(--pk-radius-small); background: var(--accent); }

/* the one status line (Saved / an error): reserved height, nothing below moves */
body[data-ui-tier="s"] .psoc-msg {
  min-height: 16px; margin: -8px 0 -8px; padding: 0 4px; font-size: var(--fs-12); line-height: 16px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px color-mix(in srgb, var(--black) 35%, transparent);
}
body[data-ui-tier="s"] .psoc-msg.is-err { color: var(--danger); }

/* ── a group card: frosted glass over the photo ── */
body[data-ui-tier="s"] .psoc-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 12px 12px; overflow: hidden;
  border-radius: var(--pk-radius-card); border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--card-bg-solid) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--black) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
body[data-ui-tier="s"] .psoc-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pk-2); min-width: 0; }
body[data-ui-tier="s"] .psoc-card-title { margin: 0; min-width: 0; font-family: var(--font-body); font-size: var(--fs-15); font-weight: var(--fw-semi); line-height: 1.25; color: var(--ink); }
body[data-ui-tier="s"] .psoc-card-meta { flex: 0 0 auto; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .psoc-card-sub { margin: -6px 0 0; font-size: var(--fs-12); line-height: 1.35; color: var(--ink-muted); }
/* an empty group: one inset line */
body[data-ui-tier="s"] .psoc-empty {
  display: flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: var(--pk-radius-row);
  border: 1px solid var(--card-border); background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-size: var(--fs-13); color: var(--ink);
}

/* ── post lines: platform · title / kind · when · status, then › to open ── */
body[data-ui-tier="s"] .psoc-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body[data-ui-tier="s"] .psoc-post {
  display: flex; align-items: stretch; min-width: 0; border-radius: var(--pk-radius-row);
  border: 1px solid var(--card-border); background: color-mix(in srgb, var(--ink) 4%, transparent);
}
body[data-ui-tier="s"] .psoc-post.is-picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
body[data-ui-tier="s"] .psoc-post-main {
  flex: 1 1 auto; min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 8px; margin: 0;
  cursor: pointer; text-align: left; border: 0; background: transparent; color: var(--ink); font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psoc-chip {
  flex: 0 0 auto; display: grid; place-items: center; min-width: 24px; height: 20px; padding: 0 4px; border-radius: var(--pk-radius-small);
  background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: 0.04em;
}
body[data-ui-tier="s"] .psoc-post-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body[data-ui-tier="s"] .psoc-post-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .psoc-post-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-11); color: var(--ink-muted); }
body[data-ui-tier="s"] .psoc-post-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .psoc-status {
  flex: 0 0 auto; padding: 1px 7px; border-radius: var(--pk-radius-chip); font-size: var(--fs-10); font-weight: var(--fw-semi); line-height: 1.2;
  background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-muted);
}
body[data-ui-tier="s"] .psoc-status.is-draft { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); }
body[data-ui-tier="s"] .psoc-status.is-scheduled { background: color-mix(in srgb, var(--status-ok) 18%, transparent); color: var(--ink); }
body[data-ui-tier="s"] .psoc-status.is-posted { background: color-mix(in srgb, var(--status-ok) 26%, transparent); color: var(--ink); }
body[data-ui-tier="s"] .psoc-post-open {
  flex: 0 0 40px; width: 40px; min-height: 40px; padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer;
  border: 0; border-left: 1px solid var(--card-border); border-radius: 0 var(--pk-radius-row) var(--pk-radius-row) 0; background: transparent; color: var(--ink-muted);
  -webkit-tap-highlight-color: transparent;
}

/* ── the action rows: Day · Time · Approve → Scheduled, and Post now · Mark posted · Move day · Skip ── */
body[data-ui-tier="s"] .psoc-flow { display: grid; gap: 8px; min-width: 0; }
body[data-ui-tier="s"] .psoc-flow--approve { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
/* four buttons, each as wide as its label (the icons show only where they all fit) */
body[data-ui-tier="s"] .psoc-flow--late { display: flex; gap: 6px; }
body[data-ui-tier="s"] .psoc-flow--late > .psoc-btn { flex: 1 1 auto; }
body[data-ui-tier="s"] .psoc-flow--move { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body[data-ui-tier="s"] .psoc-btn,
body[data-ui-tier="s"] .psoc-pick {
  position: relative; min-width: 0; min-height: 40px; padding: 0 8px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 3px); border: 3px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--card-border); background-color: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink); font-family: var(--font-body); font-size: var(--fs-12); font-weight: var(--fw-semi); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psoc-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .psoc-btn > svg,
body[data-ui-tier="s"] .psoc-pick-ico > svg { flex: 0 0 auto; }
body[data-ui-tier="s"] .psoc-btn:disabled { cursor: default; color: var(--ink-muted); opacity: 0.6; }
body[data-ui-tier="s"] .psoc-btn--approve:not(:disabled) { box-shadow: inset 0 0 0 1px var(--accent); background-color: color-mix(in srgb, var(--accent) 22%, transparent); }
body[data-ui-tier="s"] .psoc-pick { justify-content: flex-start; }
body[data-ui-tier="s"] .psoc-pick.is-off { cursor: default; color: var(--ink-muted); opacity: 0.6; }
body[data-ui-tier="s"] .psoc-pick-ico { flex: 0 0 auto; display: grid; place-items: center; color: var(--ink-muted); }
body[data-ui-tier="s"] .psoc-pick-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; color: var(--ink-muted); }
body[data-ui-tier="s"] .psoc-pick.has-value .psoc-pick-text { color: var(--ink); }
/* the real input covers the pill (the phone's own picker opens on a tap); invisible */
body[data-ui-tier="s"] .psoc-pick > input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; border: 0;
  font-size: var(--fs-16); color: transparent; background: transparent;
}
body[data-ui-tier="s"] .psoc-pick > input:disabled { cursor: default; }
/* narrow phones: the icons step aside so every label stays whole */
@media (max-width: 399px) {
  body[data-ui-tier="s"] .psoc-flow--late .psoc-btn > svg { display: none; }
}
@media (max-width: 370px) {
  body[data-ui-tier="s"] .psoc-flow--approve .psoc-pick-ico { display: none; }
  body[data-ui-tier="s"] .psoc-btn,
  body[data-ui-tier="s"] .psoc-pick { padding: 0 6px; font-size: var(--fs-11); }
}
body[data-ui-tier="s"] .psoc-links { display: flex; gap: var(--pk-2); margin: -4px 0 -6px -10px; }
body[data-ui-tier="s"] .psoc-link {
  min-height: 40px; padding: 0 10px; margin: 0; cursor: pointer; border: 0; background: transparent; border-radius: var(--pk-radius-control);
  color: var(--accent-strong); font-family: var(--font-body); font-size: var(--fs-12); font-weight: var(--fw-semi);
}

/* ── Next 7 days: one line per day, hairlines between ── */
body[data-ui-tier="s"] .psoc-days { list-style: none; margin: -4px 0 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
body[data-ui-tier="s"] .psoc-day { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 0; border-top: 1px solid var(--card-border); }
body[data-ui-tier="s"] .psoc-day:last-child { padding-bottom: 2px; }
body[data-ui-tier="s"] .psoc-day-head { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
body[data-ui-tier="s"] .psoc-day-name { flex: 0 0 auto; font-size: var(--fs-13); font-weight: var(--fw-bold); }
body[data-ui-tier="s"] .psoc-day-date { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13); color: var(--ink-muted); }
body[data-ui-tier="s"] .psoc-day-none { font-size: var(--fs-13); color: var(--ink-muted); }
body[data-ui-tier="s"] .psoc-posts--day { margin-top: 2px; }

/* ── the bottom sheets (Mark posted, Move day) ── */
body[data-ui-tier="s"] .psoc-sheet { display: flex; flex-direction: column; gap: var(--pk-3); padding: 0 8px 8px; min-width: 0; }
body[data-ui-tier="s"] .psoc-sheet-sub { margin: 0; font-size: var(--fs-14); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .psoc-sheet-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pk-2); }
body[data-ui-tier="s"] .psoc-input {
  width: 100%; min-height: 44px; padding: 0 14px; margin: 0; box-sizing: border-box; border-radius: var(--pk-radius-control);
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-16);
}
body[data-ui-tier="s"] .psoc-input:focus { outline: none; border-color: var(--accent); }

/* ── the other tabs: the desktop's own parts, inside the phone gutter ── */
body[data-ui-tier="s"] .psoc-desk { display: flex; flex-direction: column; gap: var(--pk-3); min-width: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; }

/* ── the post drawer (the desktop's own SocDrawer, in #modal-root) on the phone Social page: full screen over the
   tab bar and the bubbles, every control a 40px target ── */
body[data-ui-tier="s"]:has(.psoc-page) .soc-drawer-scrim { bottom: 0; }
body[data-ui-tier="s"]:has(.psoc-page):has(.soc-drawer) :is(.mtab-bar, .aichat-root, .agentfab-root) { visibility: hidden; }
body[data-ui-tier="s"]:has(.psoc-page) .soc-drawer { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body[data-ui-tier="s"]:has(.psoc-page) :is(.soc-drawer, .psoc-desk) :is(.media-expand-pill, .agent-seg-btn, .psu-btn) { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
body[data-ui-tier="s"]:has(.psoc-page) :is(.soc-drawer, .psoc-desk) :is(.np-input, select, textarea) { font-size: var(--fs-16); }
body[data-ui-tier="s"]:has(.psoc-page) :is(.soc-drawer, .psoc-desk) :is(.np-input, select) { min-height: 44px; }
/* ════════ THE MOCKUP (09-social), MEASURED — 6 Oct 2026 ════════
   Hugo: each phone page must look EXACTLY like his mockup (sizes, layout, material, light, colour, photo). Every size
   below is the mockup's own at 412 CSS px (its spec, 09-social), checked on the fair bench (a copy of the live data,
   the project's skin and photo worn) by a size table (ours / mockup within 0.95-1.05) and the L* of each surface.
   The header bar and the bottom bar are the shared shell (styles/phone-shell.css), untouched here; the band above the
   tabs is the shell's too, sized for this page only (:has(.psoc-page)), as the Shots and Overview pages do.
   Small controls keep a 40px TAP area through a transparent border and an equal negative margin (the visual box is
   the padding box; the radius is elliptical so the visible corner stays the mockup's). */

/* ── the band: SOCIAL · the project name ▾ · New post · the album chip ── */
/* (a dark-glass skin) the mockup's text is COOL white, not the skin's cream: white titles, cool grey secondary lines */
body[data-ui-tier="s"][data-skin-family="glass"] .psoc-page { --ink: var(--white); }
/* the album chip only: the video chip picks a shot set, which this page does not use (mockup: one chip) */
/* New post: a flat amber-brown pill (no glow, a faint warm edge), Inter 9 / 600, level with the title */
/* the mockup's flat amber-brown (a dark-glass skin); a paper skin keeps the shell's amber glass under its dark ink */

/* ── the photo: vivid behind the band, then (glass skins) under a cool navy veil from the tabs down, the bokeh still
   faintly through (mockup: L* ~38 behind the title, ~10 and blue-grey beside the cards) ── */
body[data-ui-tier="s"] .main-content:has(> .psoc-page) { gap: 0; }
body[data-ui-tier="s"][data-skin-family="glass"] .main-content:has(> .psoc-page) {
  /* round 2 (measured): the band is the photo itself (no veil above the tabs), the page under the tabs a neutral dark
     (mockup L* 13.8 at y 150-165), and the left edge a shade darker than the right (mockup: cool dark left, bokeh right) */
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--shl-veil) 38%, transparent), transparent 40px),
    linear-gradient(to bottom, transparent 0, transparent 100px, color-mix(in srgb, var(--shl-veil) 72%, transparent) 152px,
      color-mix(in srgb, var(--shl-veil) 56%, transparent) 200px, color-mix(in srgb, var(--shl-veil) 50%, transparent) 100%);
  background-size: 100% calc(100% - 170px), 100% 100%; background-position: 0 170px, 0 0; background-repeat: no-repeat;
}

/* ── the page: the tabs straight on the photo, then four frosted cards, 14px gutters ── */
body[data-ui-tier="s"] .psoc-page .pk-page-body { gap: 10.8px; padding: 0 14.2px; }
body[data-ui-tier="s"] .psoc-top { margin: -1.6px 0 -4.8px; padding: 0; gap: 0; }
/* (a dark-glass skin) the tabs sit straight on the photo; a paper skin keeps their light glass band under its dark ink */
body[data-ui-tier="s"][data-skin-family="glass"] .psoc-top { border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-ui-tier="s"] .psoc-tabs { gap: 0; margin: 0 0 0 -5.7px; }
body[data-ui-tier="s"] .psoc-tab {
  min-height: 40px; height: 40px; padding: 0 13.25px; font-size: 10.1px; font-weight: 400; line-height: 1;
  color: color-mix(in srgb, var(--ink-muted) 45%, var(--ink));
}
body[data-ui-tier="s"][data-skin-family="glass"] .psoc-tab { color: color-mix(in srgb, var(--white) 55%, color-mix(in srgb, var(--ink-muted) 78%, var(--blue-5))); }
body[data-ui-tier="s"] .psoc-tab:first-child { padding-left: 9.4px; }
body[data-ui-tier="s"] .psoc-tab.is-on { color: var(--ink); font-weight: var(--fw-bold); }
body[data-ui-tier="s"] .psoc-tab.is-on::after { left: 13.25px; right: 13.25px; bottom: 6px; height: 2px; background: color-mix(in srgb, var(--accent) 70%, var(--status-warn)); }
/* (a dark-glass skin) the mockup's gold, not the orange accent */
body[data-ui-tier="s"][data-skin-family="glass"] .psoc-tab.is-on::after { background: var(--gold-star, var(--accent)); }
body[data-ui-tier="s"] .psoc-tab.is-on:first-child::after { left: 9.4px; }
/* the one status line (Saved / an error) floats above the bottom bar: it never moves the cards */
body[data-ui-tier="s"] .psoc-msg {
  position: fixed; left: 14px; right: 14px; bottom: calc(var(--mtab-h) + 10px); z-index: 6; margin: 0; min-height: 0; padding: 8px 12px;
  border-radius: var(--pk-radius-control); background: color-mix(in srgb, var(--card-bg-solid) 94%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  font-size: 11px; line-height: 14px; white-space: normal; text-shadow: none; pointer-events: none;
}
body[data-ui-tier="s"] .psoc-msg:empty { display: none; }

/* the cards: frosted glass (the photo a smooth wash inside), a lit top rim, the phone's card corner */
body[data-ui-tier="s"] .psoc-card {
  gap: 0; padding: 9.7px 12.6px 10.3px 11.8px; border-radius: var(--pk-radius-card);
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-top-color: color-mix(in srgb, var(--ink) 23%, transparent);
  background: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 92%, var(--ink)) 75%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.15); backdrop-filter: blur(24px) saturate(1.15);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--black) 30%, transparent);
}
body[data-ui-tier="s"] .psoc-card-head { align-items: baseline; padding-left: 2px; }
body[data-ui-tier="s"] .psoc-card-title { font-size: 12.4px; line-height: 15px; font-weight: var(--fw-semi); color: var(--ink); }
body[data-ui-tier="s"] .psoc-card-meta { font-size: 9.2px; line-height: 15px; color: color-mix(in srgb, var(--ink-muted) 75%, var(--ink)); }
body[data-ui-tier="s"] .psoc-card-sub { margin: 4.8px 0 0; padding-left: 2px; font-size: 8.9px; line-height: 11px; color: color-mix(in srgb, var(--ink-muted) 75%, var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the inset empty line: barely lighter than the card, a 1px hairline, the phone's row corner */
body[data-ui-tier="s"] .psoc-empty {
  min-height: 0; height: 30.9px; margin-top: 10.4px; padding: 0 10.5px; border-radius: var(--pk-radius-row); font-size: 9.7px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); background: color-mix(in srgb, var(--ink) 1.5%, transparent);
  color: color-mix(in srgb, var(--ink) 92%, var(--ink-muted));
}
body[data-ui-tier="s"] .psoc-posts { margin-top: 10.4px; }
/* the action rows: 31px faces in 40px taps, dim (disabled) slate */
body[data-ui-tier="s"] .psoc-flow { margin-top: 7.8px; }
body[data-ui-tier="s"] .psoc-flow--approve { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 124px; gap: 9.6px; }
body[data-ui-tier="s"] .psoc-flow--late { gap: 9.8px; margin-bottom: -2px; }
body[data-ui-tier="s"] .psoc-flow--late > .psoc-btn { height: 40px; }
body[data-ui-tier="s"] .psoc-flow--late > .psoc-btn { flex: 0 1 auto; }
body[data-ui-tier="s"] .psoc-flow--late > .psoc-btn:nth-child(1) { flex-basis: 83.8px; }
body[data-ui-tier="s"] .psoc-flow--late > .psoc-btn:nth-child(2) { flex-basis: 98px; }
body[data-ui-tier="s"] .psoc-flow--late > .psoc-btn:nth-child(3) { flex-basis: 85.2px; }
body[data-ui-tier="s"] .psoc-flow--late > .psoc-btn:nth-child(4) { flex-basis: 60.7px; }
body[data-ui-tier="s"] .psoc-btn,
body[data-ui-tier="s"] .psoc-pick {
  min-height: 0; height: 40px; border-width: 5px 0; margin: -5px 0; padding: 0 10px; gap: 7px; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 5px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
  background-color: color-mix(in srgb, var(--card-bg-solid) 94%, var(--ink-muted));
  font-size: 9.4px; font-weight: 400; color: var(--ink);
}
body[data-ui-tier="s"] .psoc-pick { font-size: 9px; }
body[data-ui-tier="s"] .psoc-btn > svg,
body[data-ui-tier="s"] .psoc-pick-ico > svg { width: 14px; height: 14px; }
body[data-ui-tier="s"] .psoc-flow--late .psoc-btn { justify-content: flex-start; padding: 0 9px 0 10px; gap: 9.5px; font-size: 9.2px; }
body[data-ui-tier="s"] .psoc-flow--late .psoc-btn > span { flex: 0 0 auto; overflow: visible; }
body[data-ui-tier="s"] .psoc-flow--late .psoc-btn > svg { width: 15px; height: 15px; margin: 0 -2px; }
body[data-ui-tier="s"] .psoc-btn:disabled,
body[data-ui-tier="s"] .psoc-pick.is-off { opacity: 1; color: color-mix(in srgb, var(--ink-muted) 46%, var(--card-bg-solid)); }
body[data-ui-tier="s"] .psoc-pick.is-off .psoc-pick-text,
body[data-ui-tier="s"] .psoc-pick.is-off .psoc-pick-ico { color: inherit; }
body[data-ui-tier="s"] .psoc-btn--approve { justify-content: center; gap: 3px; background-color: color-mix(in srgb, var(--card-bg-solid) 86%, var(--ink-muted)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent); }
body[data-ui-tier="s"] .psoc-btn--approve > svg { width: 11px; height: 11px; }
body[data-ui-tier="s"] .psoc-pick { padding: 0 9px 0 10.5px; }
body[data-ui-tier="s"] .psoc-pick-chev { flex: 0 0 auto; display: grid; place-items: center; color: inherit; }
body[data-ui-tier="s"] .psoc-pick-chev > svg { width: 10px; height: 10px; }
body[data-ui-tier="s"] .psoc-links { margin: 2px 0 -10px -10px; }

/* Next 7 days: the time zone right, then seven two-line rows between hairlines */
body[data-ui-tier="s"] .psoc-card--days { padding-bottom: 5.9px; }
body[data-ui-tier="s"] .psoc-card--days .psoc-card-title { font-size: 11.9px; }
body[data-ui-tier="s"] .psoc-days { margin: 7.6px 0 0; }
body[data-ui-tier="s"] .psoc-day { gap: 3.2px; padding: 4.56px 0 6.4px 0.5px; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
body[data-ui-tier="s"] .psoc-day:last-child { padding-bottom: 6.4px; }
body[data-ui-tier="s"] .psoc-day-head { gap: 11.5px; line-height: 12px; }
body[data-ui-tier="s"] .psoc-day-name { font-size: 9.8px; font-weight: var(--fw-bold); color: var(--ink); }
body[data-ui-tier="s"] .psoc-day-date { font-size: 9.6px; color: var(--ink-muted); }
body[data-ui-tier="s"] .psoc-day-none { font-size: 9px; line-height: 11px; color: var(--ink-muted); }

/* No date yet: the tightest card of the four */
body[data-ui-tier="s"] .psoc-card--nodate { padding-top: 8.2px; padding-bottom: 5.4px; }
body[data-ui-tier="s"] .psoc-card--nodate .psoc-card-title { font-size: 11.5px; }
body[data-ui-tier="s"] .psoc-card--nodate .psoc-card-sub { margin-top: 2.5px; }
body[data-ui-tier="s"] .psoc-card--nodate .psoc-empty { margin-top: 6.9px; height: 28.9px; }


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