/* styles/phone-schedule.css — the PHONE Schedule page (src/PhoneSchedule.jsx, 6 Oct 2026). Hugo's mockup
   05-schedule.mockup.png: frosted glass cards over the project photo (the page itself is see-through), a
   condensed month heading with ‹ Today ›, a 7-column grid whose day cells shrink to fit a 360px phone (the
   whole cell is the 40px+ tap target), TODAY in amber, the stages as bars; STAGES and PAYMENT MILESTONES cards
   with amber outline "+ ADD" pills and an icon-disc empty state. Phone tier only, tokens only, prefix .psc-.
   SIZES = the mockup's (measured on the 841px PNG ÷ 2.04): month title ~22px, ‹ Today › ~28-30px tall, weekday
   initials ~10px, day cells ~49 x 56 with a 14px date, card titles ~14px tracked, "+ ADD" pills ~30px tall with
   11px text, empty disc ~48px, body 13-14px, secondary 11-12px. A control that LOOKS smaller than 40px keeps a
   40px tap area: transparent borders (background-clip: padding-box, the outline drawn as an inset shadow at the
   padding edge) and a negative margin, so the layout uses the visual size only. */

/* ════════ PAGE: the photo shows through; the cards are the glass ════════ */
body[data-ui-tier="s"] .main-content > .pk-page.psc-page { background: transparent; }
body[data-ui-tier="s"] .psc-page > .pk-page-body { gap: var(--pk-3); padding-top: var(--pk-1); }
body[data-ui-tier="s"] .psc-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0;
  padding: var(--pk-3) var(--pk-3) var(--pk-3);
  border: 1px solid var(--card-border); border-radius: var(--pk-radius-card);
  background: var(--card-bg); -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
  box-shadow: var(--shadow-glass); color: var(--ink);
}

/* ════════ THE MONTH CARD ════════ */
/* 10px sides: seven 40px+ day cells fit a 360px phone */
body[data-ui-tier="s"] .psc-card.psc-cal { padding-left: 10px; padding-right: 10px; gap: 6px; }
body[data-ui-tier="s"] .psc-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-2); min-width: 0; min-height: 30px; padding: 0 var(--pk-1); }
body[data-ui-tier="s"] .psc-cal-title {
  flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--fs-22); font-weight: var(--fw-bold); line-height: 1.05;
  text-transform: uppercase; letter-spacing: var(--track-02); color: var(--ink);
}
body[data-ui-tier="s"] .psc-cal-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 0; margin: -5px -5px -5px 0; }
/* 30px to see, 40px to tap (5px transparent border all round) */
body[data-ui-tier="s"] .psc-navbtn {
  width: 40px; height: 40px; padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer;
  border: 5px solid transparent; border-radius: calc(var(--pk-radius-control) + 5px); background-clip: padding-box;
  background-color: color-mix(in srgb, var(--ink) 5%, transparent);
  box-shadow: inset 0 0 0 1px var(--card-border); color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psc-navbtn > svg { width: 16px; height: 16px; }
body[data-ui-tier="s"] .psc-today {
  min-width: 56px; height: 40px; padding: 0 12px; margin: 0; cursor: pointer;
  border: 5px solid transparent; border-left-width: 2px; border-right-width: 2px; border-radius: calc(var(--pk-radius-control) + 2px) / calc(var(--pk-radius-control) + 5px); background-clip: padding-box;
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-semi); line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psc-navbtn:active,
body[data-ui-tier="s"] .psc-today:active { background-color: color-mix(in srgb, var(--accent) 22%, transparent); }

body[data-ui-tier="s"] .psc-dow {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; min-width: 0;
  padding: 8px 0 2px; border-top: 1px solid var(--card-border);
}
body[data-ui-tier="s"] .psc-dow > span {
  min-width: 0; overflow: hidden; text-align: center;
  font-size: var(--fs-10); font-weight: var(--fw-semi); letter-spacing: var(--track-10); color: var(--ink-muted);
}

/* the grid: 7 equal columns that shrink; the cells keep the mockup's ~49 x 56 shape */
body[data-ui-tier="s"] .psc-grid-wrap { position: relative; min-width: 0; }
body[data-ui-tier="s"] .psc-grid,
body[data-ui-tier="s"] .psc-bars {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(var(--psc-rows, 5), auto); gap: 3px; min-width: 0;
}
body[data-ui-tier="s"] .psc-bars { position: absolute; inset: 0; pointer-events: none; grid-template-rows: repeat(var(--psc-rows, 5), minmax(0, 1fr)); }
body[data-ui-tier="s"] .psc-cell {
  position: relative; display: block; min-width: 0; width: 100%; aspect-ratio: 1 / 1.14; min-height: 52px;
  padding: 0; margin: 0; cursor: pointer; text-align: left; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: var(--pk-radius-row);
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psc-cell:active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
body[data-ui-tier="s"] .psc-cell.is-out { cursor: default; background: color-mix(in srgb, var(--ink) 3%, transparent); border-color: transparent; }
body[data-ui-tier="s"] .psc-num {
  position: absolute; top: 4px; left: 6px; font-size: var(--fs-14); font-weight: var(--fw-semi); line-height: 1.2;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
body[data-ui-tier="s"] .psc-cell.is-out .psc-num { color: color-mix(in srgb, var(--ink-muted) 55%, transparent); }
body[data-ui-tier="s"] .psc-plus {
  position: absolute; right: 5px; bottom: 3px; font-size: var(--fs-13); font-weight: var(--fw-med); line-height: 1;
  color: color-mix(in srgb, var(--ink-muted) 80%, transparent);
}
/* TODAY: the amber outline + a small amber tag along the bottom (it fits the ~40px cell of a 360px phone) */
body[data-ui-tier="s"] .psc-cell.is-today {
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
body[data-ui-tier="s"] .psc-today-tag {
  position: absolute; left: 2px; right: 2px; bottom: 2px; overflow: hidden; text-align: center;
  padding: 2px 0; border-radius: var(--pk-radius-small); background: var(--accent); color: var(--ink-on-accent);
  font-size: var(--fs-9); font-weight: var(--fw-bold); letter-spacing: var(--track-06); line-height: 1.1;
}
/* an event / a payment on that day: small dots top-right (the day sheet lists them) */
body[data-ui-tier="s"] .psc-dots { position: absolute; right: 5px; top: 8px; display: flex; gap: 2px; }
body[data-ui-tier="s"] .psc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
body[data-ui-tier="s"] .psc-dot.is-pay { background: var(--status-ok); }
/* a stage: a bar across its days of the week row, in its own colour (lane 0 carries the name) */
body[data-ui-tier="s"] .psc-bar {
  align-self: start; min-width: 0; height: 12px; margin: 22px 2px 0; overflow: hidden;
  display: flex; align-items: center; padding: 0 4px; border-radius: var(--pk-radius-small); opacity: 0.92;
}
body[data-ui-tier="s"] .psc-bar.is-lane { height: 4px; margin-top: calc(30px + var(--psc-lane, 1) * 5px); }
body[data-ui-tier="s"] .psc-bar-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-9); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--track-02); line-height: 1;
  color: color-mix(in srgb, var(--black) 82%, transparent);
}

/* ════════ STAGES / PAYMENTS / CHANGES CARDS ════════ */
body[data-ui-tier="s"] .psc-card-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px var(--pk-2); min-width: 0; min-height: 30px;
  padding: 0 var(--pk-1) 10px; border-bottom: 1px solid var(--card-border);
}
body[data-ui-tier="s"] .psc-card-title {
  min-width: 0; margin: 0; font-family: var(--font-display); font-size: var(--fs-14); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--track-14); line-height: 1.1; color: var(--ink);
}
/* the amber outline pill: 30px to see, 40px to tap */
body[data-ui-tier="s"] .psc-addpill {
  flex: 0 1 auto; min-width: 0; min-height: 40px; padding: 0 12px; margin: -5px 0 -5px auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border: 5px solid transparent; border-left-width: 0; border-right-width: 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 5px); background-clip: padding-box;
  background-color: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-11); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--track-08); line-height: 1;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psc-addpill > span { font-size: var(--fs-14); font-weight: var(--fw-med); line-height: 1; }
body[data-ui-tier="s"] .psc-addpill:active { background-color: color-mix(in srgb, var(--accent) 22%, transparent); }

body[data-ui-tier="s"] .psc-empty { display: flex; align-items: flex-start; gap: var(--pk-4); min-width: 0; padding: 2px var(--pk-1) var(--pk-1); }
body[data-ui-tier="s"] .psc-empty-disc {
  flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--card-border); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink);
}
body[data-ui-tier="s"] .psc-empty-disc > svg { width: 22px; height: 22px; }
body[data-ui-tier="s"] .psc-empty-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
body[data-ui-tier="s"] .psc-empty-title {
  font-family: var(--font-display); font-size: var(--fs-15); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--track-06); line-height: 1.15; color: var(--ink);
}
body[data-ui-tier="s"] .psc-empty-sub { font-size: var(--fs-13); line-height: 1.4; color: var(--ink-muted); }

/* rows on the glass (no panel in a panel): a hairline between rows */
body[data-ui-tier="s"] .psc-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
body[data-ui-tier="s"] .psc-rows > li + li { border-top: 1px solid var(--card-border); }
body[data-ui-tier="s"] .psc-row {
  display: flex; align-items: center; gap: var(--pk-3); width: 100%; min-width: 0; min-height: var(--pk-row);
  padding: 6px 0 6px var(--pk-1); margin: 0; text-align: left; cursor: pointer;
  border: 0; background: transparent; color: var(--ink); font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .psc-row:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
body[data-ui-tier="s"] .psc-row-band { flex: 0 0 4px; align-self: stretch; min-height: 32px; border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .psc-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body[data-ui-tier="s"] .psc-row-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"] .psc-row-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .psc-row-amt { flex: 0 0 auto; font-size: var(--fs-13); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .psc-row-chev { flex: 0 0 auto; display: grid; place-items: center; color: var(--ink-muted); }
body[data-ui-tier="s"] .psc-row-chev > svg { width: 16px; height: 16px; }
body[data-ui-tier="s"] .psc-orig { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-11); color: var(--ink-muted); }
body[data-ui-tier="s"] .psc-orig.is-late { color: var(--danger-soft); }
body[data-ui-tier="s"] .psc-orig.is-new { color: var(--accent); }

/* a payment milestone: status disc (tap = next status, like the desktop) · name + date · amount (tap = edit) */
body[data-ui-tier="s"] .psc-ms { display: flex; align-items: center; gap: var(--pk-2); min-width: 0; min-height: var(--pk-row); padding: 2px 0; }
body[data-ui-tier="s"] .psc-ms-status {
  flex: 0 0 40px; width: 40px; height: 40px; padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer;
  border: 0; background: transparent; color: var(--ink); -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] span.psc-ms-status { cursor: default; }
body[data-ui-tier="s"] .psc-ms-disc {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  font-size: var(--fs-12); font-weight: var(--fw-bold); line-height: 1;
  border: 1.5px solid color-mix(in srgb, var(--grey-3) 55%, transparent); background: color-mix(in srgb, var(--grey-3) 18%, transparent);
}
body[data-ui-tier="s"] .psc-ms-disc > svg { width: 13px; height: 13px; }
body[data-ui-tier="s"] .psc-ms-status.is-upcoming .psc-ms-disc { border-color: color-mix(in srgb, var(--gold-3) 85%, transparent); background: color-mix(in srgb, var(--gold-3) 22%, transparent); color: var(--gold-3); }
body[data-ui-tier="s"] .psc-ms-status.is-paid .psc-ms-disc { border-color: color-mix(in srgb, var(--ok) 85%, transparent); background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
body[data-ui-tier="s"] .psc-ms-status.is-late .psc-ms-disc { border-color: color-mix(in srgb, var(--danger-soft) 85%, transparent); background: color-mix(in srgb, var(--danger-soft) 22%, transparent); color: var(--danger-soft); }
body[data-ui-tier="s"] .psc-ms-label.is-upcoming { color: var(--gold-3); }
body[data-ui-tier="s"] .psc-ms-label.is-paid { color: var(--ok); }
body[data-ui-tier="s"] .psc-ms-label.is-late { color: var(--danger-soft); }
body[data-ui-tier="s"] .psc-ms-amt {
  flex: 0 0 auto; min-height: 40px; padding: 0 8px; margin: 0; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px;
  border: 0; border-radius: var(--pk-radius-control); background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink);
  font-family: var(--font-body); font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] span.psc-ms-amt { cursor: default; box-shadow: none; }
body[data-ui-tier="s"] .psc-ms-amt > b { font-size: var(--fs-13); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .psc-ms-amt > span { font-size: var(--fs-11); color: var(--ink-muted); }

body[data-ui-tier="s"] .psc-changes-total { padding: 0 var(--pk-1); white-space: normal; font-size: var(--fs-12); }
body[data-ui-tier="s"] .psc-change { display: flex; align-items: flex-start; gap: var(--pk-3); min-width: 0; padding: var(--pk-2) 0 var(--pk-2) var(--pk-1); }
body[data-ui-tier="s"] .psc-change-what { font-size: var(--fs-12); line-height: 1.35; color: var(--ink); }
body[data-ui-tier="s"] .psc-change-why { font-size: var(--fs-12); font-style: italic; color: var(--ink-muted); }
body[data-ui-tier="s"] .psc-change-days { flex: 0 0 auto; font-size: var(--fs-13); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
body[data-ui-tier="s"] .psc-change-days.is-late { color: var(--danger-soft); }

/* ════════ SHEETS (the day, a stage, add, an amount) ════════ */
body[data-ui-tier="s"] .psc-day { display: flex; flex-direction: column; gap: var(--pk-3); min-width: 0; padding: 0 var(--pk-2) var(--pk-2); }
body[data-ui-tier="s"] .psc-day-none { padding: var(--pk-2) var(--pk-1); font-size: var(--fs-14); color: var(--ink-muted); }
body[data-ui-tier="s"] .psc-swatch { display: block; width: 14px; height: 14px; border-radius: 50%; }
body[data-ui-tier="s"] .psc-chev { transition: transform 0.15s; }
body[data-ui-tier="s"] .psc-chev.is-open { transform: rotate(90deg); }
body[data-ui-tier="s"] .psc-ev-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pk-2); padding: 0 var(--pk-4) var(--pk-3); font-size: var(--fs-14); line-height: 1.4; color: var(--ink-muted); }
body[data-ui-tier="s"] .psc-join { text-decoration: none; }
body[data-ui-tier="s"] .psc-day-add { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 var(--pk-1); }
body[data-ui-tier="s"] .psc-day-add-row { display: flex; align-items: center; gap: var(--pk-2); min-width: 0; }
body[data-ui-tier="s"] .psc-day-add-row > .psc-input { flex: 1 1 auto; }
body[data-ui-tier="s"] .psc-day-save { flex: 0 0 auto; min-width: 72px; }
body[data-ui-tier="s"] .psc-err { min-height: 1.3em; font-size: var(--fs-12); line-height: 1.3; color: var(--danger-soft); }

body[data-ui-tier="s"] .psc-label { font-size: var(--fs-11); font-weight: var(--fw-semi); letter-spacing: var(--track-08); text-transform: uppercase; color: var(--ink-muted); }
/* 16px text: the phone never zooms the page on focus */
body[data-ui-tier="s"] .psc-input {
  width: 100%; min-width: 0; min-height: 44px; padding: 0 14px; margin: 0; box-sizing: border-box;
  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);
}
body[data-ui-tier="s"] .psc-input:focus { outline: none; border-color: var(--accent); }
body[data-ui-tier="s"] .psc-input::placeholder { color: var(--ink-muted); }
body[data-ui-tier="s"] .psc-form { display: flex; flex-direction: column; gap: var(--pk-3); min-width: 0; }
body[data-ui-tier="s"] .psc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body[data-ui-tier="s"] .psc-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pk-3); min-width: 0; }
body[data-ui-tier="s"] .psc-bumps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-width: 0; }
body[data-ui-tier="s"] .psc-bumps > .pk-btn { min-width: 0; min-height: 40px; padding: 0 4px; font-size: var(--fs-13); }
body[data-ui-tier="s"] .psc-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-3); min-height: 48px; font-size: var(--fs-14); }
body[data-ui-tier="s"] .psc-preview { min-height: calc(3 * 1.4em); font-size: var(--fs-13); line-height: 1.4; color: var(--ink-muted); }
body[data-ui-tier="s"] .psc-preview.is-bad { color: var(--danger-soft); }
body[data-ui-tier="s"] .psc-muted { font-size: var(--fs-13); line-height: 1.4; color: var(--ink-muted); }
body[data-ui-tier="s"] .psc-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
body[data-ui-tier="s"] .psc-swatch-btn {
  width: 44px; height: 44px; padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer;
  border: 2px solid transparent; border-radius: 50%; background: transparent;
}
body[data-ui-tier="s"] .psc-swatch-btn > span { display: block; width: 28px; height: 28px; border-radius: 50%; }
body[data-ui-tier="s"] .psc-swatch-btn.is-on { border-color: var(--ink); }
body[data-ui-tier="s"] .psc-foot-btn { flex: 1 1 0; }

body[data-ui-tier="s"] .psc-stage-hero { display: flex; gap: var(--pk-3); min-width: 0; }
body[data-ui-tier="s"] .psc-stage-band { flex: 0 0 4px; border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .psc-stage-facts { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--pk-2); min-width: 0; }
body[data-ui-tier="s"] .psc-fact { display: flex; justify-content: space-between; gap: var(--pk-3); font-size: var(--fs-14); }
body[data-ui-tier="s"] .psc-fact > span { color: var(--ink-muted); }
body[data-ui-tier="s"] .psc-fact > b { font-weight: var(--fw-semi); text-align: right; }
body[data-ui-tier="s"] .psc-deliv { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-14); line-height: 1.4; }

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

/* the mockup's amber (round 2, measured): its rims #ffa929, the TODAY tab #f88f1d, the pause ring #ffc758 - a dark-glass
   skin's own accent ramp (its strongest stop and its light one: amber in Rain At Dusk, the skin's hue in any other),
   any other skin its accent */
body[data-ui-tier="s"] .psc-page { --psc-amber: var(--accent); --psc-amber-deep: var(--accent); --psc-ring: color-mix(in srgb, var(--accent) 60%, var(--ink)); }
body[data-ui-tier="s"][data-skin-family="glass"] .psc-page {
  --psc-amber: color-mix(in srgb, var(--sk-ramp-4, var(--accent)) 70%, var(--sk-ramp-1, var(--accent)));
  --psc-amber-deep: var(--sk-ramp-4, var(--accent)); --psc-ring: var(--sk-ramp-1, var(--accent));
}
/* ── the band: one glass card - PROJECT · the project name ▾ · album · video · DEVELOPMENT · online ── */
/* (a dark-glass skin) the mockup's navy glass; any skin: a dark veil, so the photo ink of the title reads */
/* (a dark-glass skin, round 2) DEVELOPMENT: neutral glass, lilac-grey words, a small lilac dot; online: green glass, a vivid dot */

/* ── the photo: the sunset behind the band, then the rain (a light veil: the cards are the glass) ── */
body[data-ui-tier="s"][data-skin-family="glass"] .main-content:has(> .psc-page) {
  /* round 2 (measured): the photo vivid above the floating bar, then darker toward the bottom (mockup L* 17 behind the lower cards) */
  background-image: linear-gradient(to bottom, transparent 0, transparent 40px, color-mix(in srgb, var(--shl-veil) 16%, transparent) 130px,
    color-mix(in srgb, var(--shl-veil) 36%, transparent) 240px, color-mix(in srgb, var(--shl-veil) 48%, transparent) 480px, color-mix(in srgb, var(--shl-veil) 62%, transparent) 100%);
}
/* the cool white of the mockup's words (a dark-glass skin): headings, numerals and labels white, not the skin's cream */
body[data-ui-tier="s"][data-skin-family="glass"] .psc-page { --ink: var(--white); }
/* the song bar ends 7.3px above the bottom bar, after the cards (the mockup's rhythm: cards, 9px, the bar, 7px, the nav) */
body[data-ui-tier="s"] .main-content > .pk-page.psc-page { padding-bottom: 7.3px; }

/* ── the page: 13px gutters, cards 9 apart ── */
body[data-ui-tier="s"] .psc-page > .pk-page-body { gap: 9.3px; padding: 0 12.8px; flex: 1 0 auto; }
body[data-ui-tier="s"] .psc-page .psc-card {
  gap: 0; border-radius: var(--pk-radius-card);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-top-color: color-mix(in srgb, var(--ink) 26%, transparent);
  background: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 92%, var(--ink)) 62%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--black) 28%, transparent);
}

/* the month card: OCTOBER 2026 · ‹ Today ›, a hairline, the weekdays, 7 x 5 tiles 50 x 56 */
body[data-ui-tier="s"] .psc-page .psc-card.psc-cal { margin-top: 2.8px; padding: 8.8px 9.3px 11.2px 9.3px; }
body[data-ui-tier="s"] .psc-page .psc-cal-head { min-height: 0; height: 26.9px; margin-top: 2.8px; padding: 0 1.3px 0 6.4px; }
body[data-ui-tier="s"] .psc-page .psc-cal-title { font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: 0.01em; }
body[data-ui-tier="s"] .psc-page .psc-cal-nav { gap: 7.6px; margin: -6.55px 0; }
body[data-ui-tier="s"] .psc-page .psc-navbtn {
  width: 40px; height: 40px; margin: 0 -5.4px; border: 6.55px solid transparent; border-left-width: 5.4px; border-right-width: 5.4px;
  border-radius: calc(var(--pk-radius-control) + 5.4px) / calc(var(--pk-radius-control) + 6.55px);
  background-color: color-mix(in srgb, color-mix(in srgb, var(--accent) 6%, var(--card-bg-solid)) 80%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
}
body[data-ui-tier="s"] .psc-page .psc-navbtn > svg { width: 13px; height: 13px; }
body[data-ui-tier="s"] .psc-page .psc-today {
  min-width: 0; width: 61.7px; height: 40px; padding: 0; border: 6.55px solid transparent; border-left-width: 0; border-right-width: 0;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 6.55px);
  background-color: color-mix(in srgb, color-mix(in srgb, var(--accent) 30%, var(--bg)) 88%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--psc-amber);
  font-size: 9.4px; font-weight: var(--fw-med); position: relative;
}
/* the glow hugs the pill you SEE (a box-shadow on the 40px tap box drew a square halo above and below it) */
body[data-ui-tier="s"] .psc-page .psc-today::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--pk-radius-control); pointer-events: none;
  box-shadow: 0 0 8px color-mix(in srgb, var(--psc-amber) 35%, transparent);
}
body[data-ui-tier="s"] .psc-page .psc-dow { gap: 2.4px; margin-top: 3px; padding: 10.2px 0 5.4px; border-top-color: color-mix(in srgb, var(--ink) 10%, transparent); }
body[data-ui-tier="s"] .psc-page .psc-dow > span { font-size: 8.1px; line-height: 9px; font-weight: var(--fw-semi); letter-spacing: 0.02em; color: color-mix(in srgb, var(--ink-muted) 70%, var(--ink)); transform: scaleX(0.87); }
body[data-ui-tier="s"] .psc-page .psc-grid,
body[data-ui-tier="s"] .psc-page .psc-bars { gap: 2.9px 2.4px; grid-template-rows: repeat(var(--psc-rows, 5), 56.3px); }
body[data-ui-tier="s"] .psc-page .psc-cell {
  aspect-ratio: auto; height: 56.3px; min-height: 0; border-radius: var(--pk-radius-row);
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  background: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 86%, var(--ink)) 72%, transparent);
}
body[data-ui-tier="s"] .psc-page .psc-cell.is-out { background: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 90%, var(--ink)) 60%, transparent); border-color: color-mix(in srgb, var(--ink) 4%, transparent); }
body[data-ui-tier="s"] .psc-page .psc-num { top: 8.7px; left: 7px; font-size: 10.6px; line-height: 1; font-weight: var(--fw-semi); transform: scaleX(0.905); transform-origin: 0 50%; }
body[data-ui-tier="s"] .psc-page .psc-cell.is-out .psc-num { color: color-mix(in srgb, var(--ink-muted) 46%, var(--card-bg-solid)); }
body[data-ui-tier="s"] .psc-page .psc-plus { right: 7px; bottom: 6px; font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--ink-muted) 78%, transparent); }
body[data-ui-tier="s"] .psc-page .psc-cell.is-out .psc-plus { color: color-mix(in srgb, var(--ink-muted) 44%, transparent); }
/* today: a 2px amber outline + glow, a warm fill, the solid amber TODAY tab in its top-right corner */
body[data-ui-tier="s"] .psc-page .psc-cell.is-today {
  border: 1.5px solid var(--psc-amber);
  background: color-mix(in srgb, color-mix(in srgb, var(--psc-amber-deep) 36%, var(--card-bg-solid)) 90%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--psc-amber) 45%, transparent);
}
body[data-ui-tier="s"] .psc-page .psc-cell.is-today .psc-num { top: 8.2px; left: 6.5px; }
body[data-ui-tier="s"] .psc-page .psc-cell.is-today .psc-plus { right: 6.5px; bottom: 5.5px; }
body[data-ui-tier="s"] .psc-page .psc-today-tag {
  left: auto; right: 0; top: 0; bottom: auto; width: 30px; height: 12px; padding: 0; display: grid; place-items: center;
  border-radius: 0 var(--pk-radius-small) 0 var(--pk-radius-small); background: var(--psc-amber-deep);
  color: color-mix(in srgb, var(--black) 84%, var(--accent)); font-size: 7.5px; font-weight: var(--fw-bold); letter-spacing: 0.06em; line-height: 1;
}

/* STAGES / PAYMENT MILESTONES: a tracked title, the amber "+ ADD …" pill, a hairline, the disc + text empty state */
body[data-ui-tier="s"] .psc-page .psc-card:not(.psc-cal) { padding: 8.8px 11.2px 10.7px 10.3px; }
body[data-ui-tier="s"][data-skin-family="glass"] .psc-page .psc-card:not(.psc-cal) { background: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 96%, var(--ink)) 62%, transparent); }
body[data-ui-tier="s"] .psc-page .psc-card-head { min-height: 0; height: 23px; padding: 0 0 0 6.9px; border-bottom: 0; flex-wrap: nowrap; }
body[data-ui-tier="s"] .psc-page .psc-card-head::after {
  content: ""; position: absolute; left: 10.3px; right: 11.2px; top: 35.2px; height: 1px; background: color-mix(in srgb, var(--ink) 10%, transparent);
}
body[data-ui-tier="s"] .psc-page .psc-card:not(.psc-cal) { position: relative; }
body[data-ui-tier="s"] .psc-page .psc-card-title { font-size: 12.5px; font-weight: 400; line-height: 1; letter-spacing: 0.24em; }
body[data-ui-tier="s"] .psc-page .psc-addpill {
  height: 40px; min-height: 0; padding: 0 10.5px 0 9.5px; gap: 5px; border-width: 8px 0 9px; margin: -8px 0 -9px auto;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 8.5px);
  background-color: color-mix(in srgb, color-mix(in srgb, var(--accent) 24%, var(--bg)) 86%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--psc-amber);
  font-size: 7.2px; font-weight: var(--fw-semi); letter-spacing: 0.14em; position: relative;
}
body[data-ui-tier="s"] .psc-page .psc-addpill::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--pk-radius-chip); pointer-events: none;
  box-shadow: 0 0 6px color-mix(in srgb, var(--psc-amber) 30%, transparent);
}
body[data-ui-tier="s"] .psc-page .psc-addpill > span { font-size: 12px; font-weight: 400; }
body[data-ui-tier="s"] .psc-page .psc-empty { gap: 16.2px; margin-top: 11.1px; padding: 0 0 0 7.6px; }
body[data-ui-tier="s"] .psc-page .psc-empty-disc {
  flex: 0 0 49px; width: 49px; height: 49px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 90%, var(--ink)) 60%, transparent);
}
body[data-ui-tier="s"] .psc-page .psc-empty-disc > svg { width: 21px; height: 21px; }
body[data-ui-tier="s"] .psc-page .psc-empty-text { gap: 6px; padding-top: 5.4px; max-width: 163px; }
body[data-ui-tier="s"] .psc-page .psc-empty-title { font-size: 13.2px; line-height: 11px; letter-spacing: 0.11em; }
body[data-ui-tier="s"] .psc-page .psc-empty-sub { font-size: 9.7px; line-height: 14px; color: color-mix(in srgb, var(--ink-muted) 80%, var(--ink)); }
body[data-ui-tier="s"] .psc-page .psc-pay .psc-empty { margin-top: 8.9px; margin-bottom: -3.2px; }
body[data-ui-tier="s"] .psc-page .psc-pay .psc-empty-text { padding-top: 12.8px; max-width: none; gap: 6.5px; }

/* the song bar (the Overview's PhoneOverviewPlayer, the same engine): a glass card above the tabs */
body[data-ui-tier="s"] .psc-page .pov-player {
  bottom: 0; margin: auto 0.4px 0; height: 54.4px; min-height: 0; padding: 0 3.3px 0 8.4px; gap: 0;
  border-radius: var(--pk-radius-card); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 86%, var(--black)) 86%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--black) 30%, transparent);
}
/* (a dark-glass skin) the mockup's song bar is a NEUTRAL dark glass (L* 15, no blue) */
body[data-ui-tier="s"][data-skin-family="glass"] .psc-page .pov-player {
  background: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--black) 80%, var(--ink-muted)) 70%, var(--card-bg-solid)) 86%, transparent);
}
body[data-ui-tier="s"] .psc-page .pov-player-pic { flex: 0 0 47px; width: 47px; height: 46.5px; border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .psc-page .pov-player-text { margin-left: 10.8px; gap: 3.5px; }
body[data-ui-tier="s"] .psc-page .pov-player-title { font-size: 9.9px; line-height: 14px; font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .psc-page .pov-player-album { font-size: 10px; line-height: 12px; color: color-mix(in srgb, var(--ink-muted) 80%, var(--ink)); }
body[data-ui-tier="s"] .psc-page .pov-player-btn { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; }
body[data-ui-tier="s"] .psc-page .pov-player-btn svg { width: 21.5px; height: 21.5px; transform: scaleX(1.07); }
body[data-ui-tier="s"] .psc-page .pov-player-play {
  flex-basis: 40px; width: 40px; height: 40px; border: 2px solid transparent; background-clip: padding-box; margin: 0 -1.4px; position: relative;
  box-shadow: inset 0 0 0 2px var(--psc-ring);
  background-color: color-mix(in srgb, color-mix(in srgb, var(--accent) 22%, var(--bg)) 92%, transparent); color: var(--ink);
}
body[data-ui-tier="s"] .psc-page .pov-player-play::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 8px color-mix(in srgb, var(--psc-ring) 45%, transparent);
}
body[data-ui-tier="s"] .psc-page .pov-player-play svg { width: 15px; height: 15px; transform: none; }
/* (a dark-glass skin) the mockup's glyphs are warm: prev / next the cream ink (mockup 250,238,225), play / pause a gold
   cream (249,200,130) inside the amber ring */
body[data-ui-tier="s"][data-skin-family="glass"] .psc-page .pov-player-btn { color: var(--ink-cream-7); }
body[data-ui-tier="s"][data-skin-family="glass"] .psc-page .pov-player-play { color: color-mix(in srgb, var(--gold-star) 80%, var(--ink)); }
body[data-ui-tier="s"] .psc-page .pov-player-btn:nth-of-type(1) { margin-right: 2px; }
body[data-ui-tier="s"] .psc-page .pov-player-btn:nth-of-type(3) { margin-left: 2px; }
body[data-ui-tier="s"] .psc-page .pov-player-btn:nth-of-type(4) { display: none; }


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