/* styles/phone-settings.css — THE PHONE SETTINGS PAGE (6 Oct 2026, phone page group 5, src/PhoneSettings.jsx), built to
   Hugo's phone mockup 19: the tab chips, then collapsible dark glass cards (a title row with a ^ chevron), compact
   rows, amber primary buttons, green DONE / red MISSING / grey NOT NEEDED pills.
   - Phone tier only: every rule sits under body[data-ui-tier="s"]; the desktop never sees any of it.
   - Tokens only (no hex / rgb / hsl); every skin supplies them. Amber = var(--accent), text on it var(--card-bg-solid).
   - Fixed heights where a control flips (invariant #20): status lines, pills, switches, chip rows.
   - Desktop Settings cards mounted inside (.pst-reuse) lose their own frame and get phone-sized controls. */

/* the tokens live on the body: the sheets (View all checks, the stage details, the instructions editor) render in
   the kit's sheet host outside the page */
body[data-ui-tier="s"] {
  --pst-line: color-mix(in srgb, var(--ink) 16%, transparent);
  --pst-field: color-mix(in srgb, var(--card-bg-solid) 62%, transparent);
  --pst-amber: var(--accent);
  --pst-on-amber: var(--card-bg-solid);
  --pst-ok: var(--status-ok);
  --pst-bad: var(--danger);
  --pst-off: var(--status-off);
  --pst-pill-ink: var(--status-on);
}
body[data-ui-tier="s"] .pst-page > .pk-page-body { gap: 12px; }
body[data-ui-tier="s"] .pst-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
body[data-ui-tier="s"] .pst-wait { min-height: 50vh; }

/* ════════ THE TAB CHIPS: one row of 32px faces (40px to tap); five fit at 412 at 12px type, and when they cannot
   (a narrower phone) the row scrolls sideways with the kit's edge fade - never two rows ════════ */
body[data-ui-tier="s"] .pst-tabs {
  display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  margin: 0; padding: 0; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
body[data-ui-tier="s"] .pst-tabs::-webkit-scrollbar { display: none; }
body[data-ui-tier="s"] .pst-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"] .pst-tabs[data-fade="start"] { -webkit-mask-image: linear-gradient(to left, var(--black) calc(100% - 28px), transparent); mask-image: linear-gradient(to left, var(--black) calc(100% - 28px), transparent); }
body[data-ui-tier="s"] .pst-tabs[data-fade="both"] { -webkit-mask-image: linear-gradient(to right, transparent, var(--black) 28px, var(--black) calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, var(--black) 28px, var(--black) calc(100% - 28px), transparent); }
body[data-ui-tier="s"] .pst-tab {
  flex: 1 0 auto; min-height: 40px; padding: 0 7px; margin: 0; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 4px);
  border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  background-color: var(--shl-glass-strong); box-shadow: inset 0 0 0 1px var(--shl-line); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-12); font-weight: var(--fw-med); line-height: 1;
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pst-tab.is-on {
  color: var(--ink); font-weight: var(--fw-semi);
  background-color: color-mix(in srgb, var(--pst-amber) 18%, var(--shl-glass-strong));
  box-shadow: inset 0 0 0 1.5px var(--pst-amber);
}

/* ════════ THE CARD: title row + ^ chevron, folds ════════ */
body[data-ui-tier="s"] .pst-card { padding: 2px 12px 10px; display: flex; flex-direction: column; }
body[data-ui-tier="s"] .pst-card.is-folded { padding-bottom: 2px; }
body[data-ui-tier="s"] .pst-card-head {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0; margin: 0;
  border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer;
}
body[data-ui-tier="s"] .pst-card-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); letter-spacing: var(--track-16); }
body[data-ui-tier="s"] .pst-card-meta { flex: 0 0 auto; font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .pst-card-chev { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; color: var(--ink); transition: transform 0.15s; }
body[data-ui-tier="s"] .pst-card-chev svg { width: 16px; height: 16px; }
body[data-ui-tier="s"] .pst-card.is-folded .pst-card-chev { transform: rotate(180deg); }
body[data-ui-tier="s"] .pst-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* ════════ CONTROLS: 40px to tap, ~30-32px to see (the top + bottom borders are transparent, the fill stops at
   them; the outline is an inset ring on the visible face) ════════ */
body[data-ui-tier="s"] .pst-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 40px; min-width: 56px; padding: 0 12px; margin: 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px);
  border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  background-color: var(--pst-field); box-shadow: inset 0 0 0 1px var(--pst-line); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-semi); line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pst-btn.is-primary {
  background-color: var(--pst-amber); color: var(--pst-on-amber);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pst-amber) 70%, var(--ink));
}
body[data-ui-tier="s"] .pst-btn:disabled { opacity: 0.5; cursor: default; }
body[data-ui-tier="s"] .pst-btn.is-primary:disabled { opacity: 0.55; }
body[data-ui-tier="s"] .pst-btn--sm { min-width: 0; max-width: 128px; padding: 0 10px; border-top-width: 5px; border-bottom-width: 5px; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-12); border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 5px); }
body[data-ui-tier="s"] .pst-btn--wide { flex: 1 1 auto; min-width: 112px; font-size: var(--fs-14); }
body[data-ui-tier="s"] .pst-btn--grow { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pst-btn--save { min-width: 104px; letter-spacing: var(--track-04); }

body[data-ui-tier="s"] .pst-input {
  box-sizing: border-box; width: 100%; min-width: 0; height: 34px; padding: 0 10px; margin: 0; border-radius: var(--pk-radius-control);
  border: 1px solid var(--pst-line); background: var(--pst-field); color: var(--ink); box-shadow: none;
  font-family: var(--font-body); font-size: var(--fs-13); color-scheme: dark;
}
body[data-ui-tier="s"][data-skin-family="paper"] .pst-input,
body[data-ui-tier="s"][data-skin-family="paper"] .pst-select { color-scheme: light; }
body[data-ui-tier="s"] .pst-input::placeholder { color: var(--ink-muted); opacity: 1; }
body[data-ui-tier="s"] .pst-input:focus,
body[data-ui-tier="s"] .pst-select:focus { outline: none; border-color: var(--pst-amber); }
body[data-ui-tier="s"] .pst-input:disabled { opacity: 0.6; }
body[data-ui-tier="s"] .pst-input--grow { flex: 1 1 auto; width: auto; }
body[data-ui-tier="s"] .pst-input[type="number"] { -moz-appearance: textfield; }
body[data-ui-tier="s"] .pst-page input[type="number"]::-webkit-outer-spin-button,
body[data-ui-tier="s"] .pst-page input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body[data-ui-tier="s"] .pst-select {
  box-sizing: border-box; min-width: 0; height: 36px; padding: 0 8px; border-radius: var(--pk-radius-control); border: 1px solid var(--pst-line);
  background: var(--pst-field); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-13); color-scheme: dark;
}
body[data-ui-tier="s"] .pst-select--wide { width: 100%; }

/* the switch: a 34 x 18 track inside a 40 x 40 tap box */
body[data-ui-tier="s"] .pst-sw {
  flex: 0 0 auto; position: relative; width: 40px; height: 40px; padding: 0; margin: 0; border: 0; background: transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pst-sw::before {
  content: ""; position: absolute; left: 3px; right: 3px; top: 11px; height: 18px; border-radius: var(--pk-radius-control);
  background: color-mix(in srgb, var(--ink) 22%, var(--card-bg-solid)); border: 1px solid var(--pst-line); box-sizing: border-box;
  transition: background 0.15s;
}
body[data-ui-tier="s"] .pst-sw::after {
  content: ""; position: absolute; left: 6px; top: 14px; width: 12px; height: 12px; border-radius: var(--pk-radius-small);
  background: var(--ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--shade-42) 35%, transparent); transition: transform 0.15s;
}
body[data-ui-tier="s"] .pst-sw[aria-checked="true"]::before { background: var(--pst-amber); border-color: var(--pst-amber); }
body[data-ui-tier="s"] .pst-sw[aria-checked="true"]::after { transform: translateX(16px); background: var(--pst-on-amber); }
body[data-ui-tier="s"] .pst-sw:disabled { opacity: 0.45; cursor: default; }

/* equal option buttons (Hero | Good | WIP, the ratios): 30px faces */
body[data-ui-tier="s"] .pst-seg { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(var(--pst-n, 3), minmax(0, 1fr)); gap: 6px; }
body[data-ui-tier="s"] .pst-seg-btn {
  min-width: 0; min-height: 40px; padding: 0 4px; margin: 0; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 5px);
  border: 5px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  background-color: var(--pst-field); box-shadow: inset 0 0 0 1px var(--pst-line); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-med); line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pst-seg-btn.is-on { background-color: var(--pst-amber); box-shadow: inset 0 0 0 1px var(--pst-amber); color: var(--pst-on-amber); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pst-seg-btn:disabled { cursor: default; }
body[data-ui-tier="s"] .pst-seg-btn:disabled:not(.is-on) { opacity: 0.6; }
body[data-ui-tier="s"] .pst-seg--ratio { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }   /* 16 Oct 2026 — 7 ratios (4:5 added) */
body[data-ui-tier="s"] .pst-seg--ratio .pst-seg-btn { font-size: var(--fs-12); padding: 0 2px; }

/* wrapping toggle chips (version tabs, app scale, categories): 30px faces */
body[data-ui-tier="s"] .pst-chips,
body[data-ui-tier="s"] .pst-vt-chips { display: flex; flex-wrap: wrap; gap: 0 5px; min-width: 0; }
body[data-ui-tier="s"] .pst-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px; margin: 0; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 5px);
  border: 5px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  background-color: var(--pst-field); box-shadow: inset 0 0 0 1px var(--pst-line); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-med); line-height: 1; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pst-chip.is-on { background-color: var(--pst-amber); box-shadow: inset 0 0 0 1px var(--pst-amber); color: var(--pst-on-amber); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pst-chip.is-fixed:disabled { opacity: 1; cursor: default; }
body[data-ui-tier="s"] .pst-chip:disabled:not(.is-fixed) { opacity: 0.6; cursor: default; }
body[data-ui-tier="s"] .pst-chip.is-static { min-height: 32px; border-top-width: 2px; border-bottom-width: 2px; cursor: default; font-size: var(--fs-12); }

/* status pills: fixed width so a longer word never moves the label beside it */
body[data-ui-tier="s"] .pst-pill {
  flex: 0 0 auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 24px; padding: 0 4px; border-radius: var(--pk-radius-chip);
  font-family: var(--font-body); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--track-04);
  text-transform: uppercase; white-space: nowrap; color: var(--pst-pill-ink); background: var(--pst-off);
}
body[data-ui-tier="s"] .pst-pill--done { background: var(--pst-ok); }
body[data-ui-tier="s"] .pst-pill--missing,
body[data-ui-tier="s"] .pst-pill--bug { background: var(--pst-bad); }
body[data-ui-tier="s"] .pst-pill--checking { background: var(--status-warn); color: var(--status-on-warn); }
body[data-ui-tier="s"] .pst-pill--skipped,
body[data-ui-tier="s"] .pst-pill--optional,
body[data-ui-tier="s"] .pst-pill--pc { background: var(--pst-off); letter-spacing: 0; }

/* one status line, always rendered at a fixed height */
body[data-ui-tier="s"] .pst-line {
  min-height: 18px; max-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-12); line-height: 18px; color: var(--ink-muted);
}
body[data-ui-tier="s"] .pst-line.is-bad { color: var(--pst-bad); }
body[data-ui-tier="s"] .pst-line--2 {
  min-height: 34px; max-height: 34px; line-height: 17px; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
body[data-ui-tier="s"] .pst-note { font-size: var(--fs-12); line-height: 1.4; color: var(--ink-muted); }
body[data-ui-tier="s"] .pst-sub { margin-top: 4px; font-size: var(--fs-12); font-weight: var(--fw-semi); letter-spacing: var(--track-10); text-transform: uppercase; color: var(--ink-muted); }

/* ════════ ROWS ════════ */
body[data-ui-tier="s"] .pst-row { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 38px; }
body[data-ui-tier="s"] .pst-row-label {
  flex: 0 0 auto; width: 106px; font-size: var(--fs-13); color: var(--ink); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-ui-tier="s"] .pst-row-label--grow { flex: 1 1 auto; width: auto; min-width: 0; white-space: normal; }
body[data-ui-tier="s"] .pst-row--cal .pst-row-label { width: auto; }
body[data-ui-tier="s"] .pst-row--cal .pst-input { font-size: var(--fs-12); }
body[data-ui-tier="s"] .pst-row--dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
body[data-ui-tier="s"] .pst-date { display: flex; align-items: center; gap: 6px; min-width: 0; }
body[data-ui-tier="s"] .pst-date .pst-row-label { width: auto; flex: 0 0 auto; }
body[data-ui-tier="s"] .pst-date .pst-input { flex: 1 1 auto; width: auto; padding: 0 4px 0 8px; font-size: var(--fs-13); }
body[data-ui-tier="s"] .pst-date .pst-input::-webkit-calendar-picker-indicator { margin: 0; padding: 0; }
body[data-ui-tier="s"] .pst-date .pst-input::-webkit-datetime-edit { padding: 0; }
body[data-ui-tier="s"] .pst-row--ratio { flex-wrap: wrap; row-gap: 0; }
body[data-ui-tier="s"] .pst-row--ratio .pst-row-label { width: 100%; }

/* ════════ SETUP CHECKLIST ════════ */
body[data-ui-tier="s"] .pst-ck-head { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-top: -2px; }
body[data-ui-tier="s"] .pst-ck-count { flex: 1 1 auto; min-width: 0; font-size: clamp(15px, 4.2vw, 17px); font-weight: var(--fw-semi); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pst-ck-count--sm { font-size: var(--fs-14); font-weight: var(--fw-med); white-space: normal; }
body[data-ui-tier="s"] .pst-bar { height: 6px; margin: 2px 0 4px; border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--ink) 16%, transparent); overflow: hidden; }
body[data-ui-tier="s"] .pst-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--pst-ok); transition: width 0.3s; }
body[data-ui-tier="s"] .pst-ck-list { min-height: calc(var(--pst-rows, 8) * 39px); display: flex; flex-direction: column; }
body[data-ui-tier="s"] .pst-ck-row {
  display: flex; align-items: center; gap: 10px; min-height: 38px; min-width: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
body[data-ui-tier="s"] .pst-ck-row:last-child { border-bottom: 0; }
body[data-ui-tier="s"] .pst-ck-label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-13-5); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pst-ck-act { flex: 0 0 auto; display: flex; justify-content: flex-end; min-width: 44px; }
body[data-ui-tier="s"] .pst-ck-act .pst-btn { min-width: 76px; margin: -1px 0; }
body[data-ui-tier="s"] .pst-ck-chev {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: -1px -8px -1px 0; border: 0;
  background: transparent; color: var(--ink); cursor: pointer;
}
body[data-ui-tier="s"] .pst-ck-foot { display: flex; align-items: center; gap: 12px; min-width: 0; }
body[data-ui-tier="s"] .pst-ck-foot .pst-line { flex: 1 1 auto; min-width: 0; text-align: right; }
body[data-ui-tier="s"] .pst-ck-all {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0; border: 0;
  background: transparent; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-semi); cursor: pointer;
}
body[data-ui-tier="s"] .pst-ck-all:disabled { opacity: 0.5; }
body[data-ui-tier="s"] .pst-ck-sheet { display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; }
body[data-ui-tier="s"] .pst-line--sheet { white-space: normal; max-height: none; line-height: 1.4; }
body[data-ui-tier="s"] .pst-ck-item {
  display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--pk-radius-row);
  background: var(--pst-field); border: 1px solid var(--pst-line);
}
body[data-ui-tier="s"] .pst-ck-item-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
body[data-ui-tier="s"] .pst-ck-item-label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--ink); }
body[data-ui-tier="s"] .pst-ck-item-req { flex: 0 0 auto; font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .pst-ck-item-detail { font-size: var(--fs-12); line-height: 1.4; color: var(--ink-muted); overflow-wrap: anywhere; }
body[data-ui-tier="s"] .pst-ck-item-acts { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-ui-tier="s"] .pst-ck-item-acts .pst-btn--sm { max-width: 100%; }

/* ════════ HIDDEN TOOLS: two columns of switches, a thin divider between ════════ */
body[data-ui-tier="s"] .pst-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
body[data-ui-tier="s"] .pst-tools-col { display: flex; flex-direction: column; min-width: 0; }
body[data-ui-tier="s"] .pst-tools-col + .pst-tools-col { border-left: 1px solid var(--pst-line); padding-left: 14px; }
body[data-ui-tier="s"] .pst-tool { display: flex; align-items: center; gap: 4px; min-height: 34px; }
body[data-ui-tier="s"] .pst-tool .pst-sw { margin: -3px 0; }
body[data-ui-tier="s"] .pst-tool-label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-13-5); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ════════ SPEND CAP ════════ */
body[data-ui-tier="s"] .pst-money { flex: 1 1 auto; min-width: 0; position: relative; display: flex; }
body[data-ui-tier="s"] .pst-money .pst-input { padding-right: 46px; font-size: var(--fs-15); }
body[data-ui-tier="s"] .pst-money-unit { position: absolute; right: 12px; top: 0; bottom: 0; display: flex; align-items: center; font-size: var(--fs-12); color: var(--ink-muted); pointer-events: none; }

/* ════════ VERSION TABS ════════ */
body[data-ui-tier="s"] .pst-vt { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: 6px; }
body[data-ui-tier="s"] .pst-vt > .pst-row-label { width: auto; min-height: 40px; display: flex; align-items: center; }
body[data-ui-tier="s"] .pst-vt .pst-chip { padding: 0 10px; font-size: var(--fs-13); }
body[data-ui-tier="s"] .pst-vt--stack { grid-template-columns: minmax(0, 1fr); gap: 2px; }
body[data-ui-tier="s"] .pst-vt--stack > .pst-row-label { min-height: 28px; white-space: normal; }
body[data-ui-tier="s"] .pst-vt--stack .pst-vt-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-ui-tier="s"] .pst-vt--stack .pst-chip { justify-content: center; padding: 0 4px; }
body[data-ui-tier="s"] .pst-vt-chips { gap: 0 5px; }

/* ════════ AGENT INSTRUCTIONS & DOCUMENTS: the Agent page's panel, made compact ════════ */
body[data-ui-tier="s"] .pst-kb { position: relative; min-width: 0; }
body[data-ui-tier="s"] .pst-kb .agent-kb { display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; max-width: none; width: auto; }
body[data-ui-tier="s"] .pst-kb .agent-kb-sec { display: flex; flex-direction: column; gap: 4px; padding: 0; margin: 0; border: 0; background: transparent; }
body[data-ui-tier="s"] .pst-kb .agent-kb-label { display: none; }
body[data-ui-tier="s"] .pst-kb .agent-kb-text {
  box-sizing: border-box; width: 100%; height: 54px; min-height: 54px; max-height: 54px; resize: none; padding: 7px 40px 7px 12px; margin: 0; box-shadow: none;
  border-radius: var(--pk-radius-control); border: 1px solid var(--pst-line); background: var(--pst-field); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-13); line-height: 1.4;
}
body[data-ui-tier="s"] .pst-kb-open {
  position: absolute; top: 0; right: 0; width: 40px; height: 54px; padding: 0; border: 0; background: transparent;
  color: var(--ink); display: grid; place-items: center; cursor: pointer;
}
body[data-ui-tier="s"] .pst-kb .agent-kb-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-width: 0; }
body[data-ui-tier="s"] .pst-kb .agent-btn {
  flex: 0 0 auto; min-height: 40px; padding: 0 14px; margin: 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px);
  border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  background-color: var(--pst-field); box-shadow: inset 0 0 0 1px var(--pst-line); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-semi); white-space: nowrap;
}
body[data-ui-tier="s"] .pst-kb .agent-btn--go { background-color: var(--pst-amber); box-shadow: inset 0 0 0 1px var(--pst-amber); color: var(--pst-on-amber); }
body[data-ui-tier="s"] .pst-kb .agent-btn:disabled { opacity: 0.55; }
body[data-ui-tier="s"] .pst-kb .agent-kb-status,
body[data-ui-tier="s"] .pst-kb .agent-kb-autoline {
  flex: 1 1 auto; min-width: 0; font-size: var(--fs-12); line-height: 1.3; color: var(--ink-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
}
body[data-ui-tier="s"] .pst-kb .agent-kb-status.is-err,
body[data-ui-tier="s"] .pst-kb .agent-kb-autoline.is-err { color: var(--pst-bad); }
body[data-ui-tier="s"] .pst-kb .agent-kb-count { flex: 0 0 auto; font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .pst-kb .agent-kb-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
body[data-ui-tier="s"] .pst-kb .agent-kb-chip {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1px; flex: 1 1 170px; min-width: 0; box-sizing: border-box;
  min-height: 40px; padding: 2px 40px 2px 12px; border-radius: var(--pk-radius-chip); border: 1px solid var(--pst-line); background: var(--pst-field); color: var(--ink);
}
body[data-ui-tier="s"] .pst-kb .agent-kb-chip-t { font-size: var(--fs-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pst-kb .agent-kb-chip-m { font-size: var(--fs-12); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pst-kb .agent-kb-chip-x {
  position: absolute; right: 0; top: 0; bottom: 0; width: 40px; padding: 0; border: 0; background: transparent; color: var(--ink);
  font-size: var(--fs-18); line-height: 1; cursor: pointer;
}
body[data-ui-tier="s"] .pst-kb .agent-kb-add { flex: 1 0 auto; border-top-width: 0; border-bottom-width: 0; border-radius: var(--pk-radius-control); min-height: 40px; box-shadow: none; outline: 1px dashed var(--pst-line); outline-offset: -1px; }
body[data-ui-tier="s"] .pst-kb .agent-kb-budget { font-size: var(--fs-12); line-height: 1.35; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-ui-tier="s"] .pst-kb .agent-kb-budget.is-over { color: var(--pst-bad); }
body[data-ui-tier="s"] .pst-kb .agent-kb-auto .agent-kb-row { flex-wrap: wrap; }
body[data-ui-tier="s"] .pst-kb .agent-kb-auto .agent-btn { flex: 1 1 100%; }
/* the full-screen editor: the instructions get the room */
body[data-ui-tier="s"] .pst-kb--sheet { padding-bottom: 24px; }
body[data-ui-tier="s"] .pst-kb--sheet .agent-kb-label { display: block; font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--track-10); text-transform: uppercase; color: var(--ink); }
body[data-ui-tier="s"] .pst-kb--sheet .agent-kb-hint { display: block; margin-top: 2px; font-size: var(--fs-12); font-weight: var(--fw-med); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
body[data-ui-tier="s"] .pst-kb--sheet .agent-kb-text { height: 46vh; min-height: 200px; max-height: none; padding-right: 12px; font-size: var(--fs-15); }

/* ════════ STAGES & PROGRESS ════════ */
body[data-ui-tier="s"] .pst-stp-loading { min-height: 360px; display: grid; place-items: center; font-size: var(--fs-13); color: var(--ink-muted); }
body[data-ui-tier="s"] .pst-stp-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
body[data-ui-tier="s"] .pst-stp-col { display: flex; flex-direction: column; min-width: 0; }
body[data-ui-tier="s"] .pst-stp-title { font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--track-14); text-transform: uppercase; color: var(--ink); margin-bottom: 2px; }
body[data-ui-tier="s"] .pst-stp-th,
body[data-ui-tier="s"] .pst-stp-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 50px 44px; align-items: center; column-gap: 4px; }
body[data-ui-tier="s"] .pst-stp-th { min-height: 18px; font-size: var(--fs-12); font-weight: var(--fw-semi); letter-spacing: var(--track-02); text-transform: uppercase; color: var(--ink-muted); }
body[data-ui-tier="s"] .pst-stp-th .pst-r { text-align: right; padding-right: 12px; }
body[data-ui-tier="s"] .pst-stp-th .pst-c { text-align: center; }
body[data-ui-tier="s"] .pst-stp-row { min-height: 34px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); position: relative; background: transparent; }
body[data-ui-tier="s"] .pst-stp-row.is-off .pst-stp-name { color: var(--ink-muted); }
body[data-ui-tier="s"] .pst-stp-row.is-dragging { z-index: 2; background: var(--shl-glass-strong); border-radius: var(--pk-radius-row); box-shadow: 0 6px 18px color-mix(in srgb, var(--shade-42) 40%, transparent); }
body[data-ui-tier="s"] .pst-stp-row.is-target { box-shadow: inset 0 2px 0 var(--pst-amber); }
body[data-ui-tier="s"] .pst-stp-grip {
  align-self: stretch; touch-action: none; cursor: grab; position: relative;
  background-image: radial-gradient(circle, var(--ink-muted) 1.2px, transparent 1.6px);
  background-size: 5px 6px; background-position: center; background-repeat: repeat;
  margin: 10px 3px; opacity: 0.8;
}
body[data-ui-tier="s"] .pst-stp-row .pst-sw { margin: -3px 0; }
body[data-ui-tier="s"] .pst-stp-name {
  box-sizing: border-box; width: 100%; min-width: 0; height: 30px; padding: 0 4px; margin: 0; border: 1px solid transparent; border-radius: var(--pk-radius-control);
  background: transparent; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-13-5); text-overflow: ellipsis; box-shadow: none;
}
body[data-ui-tier="s"] .pst-stp-name:focus { outline: none; border-color: var(--pst-amber); background: var(--pst-field); }
body[data-ui-tier="s"] .pst-stp-num { display: inline-flex; align-items: center; justify-content: flex-end; gap: 1px; min-width: 0; }
body[data-ui-tier="s"] .pst-stp-num input {
  box-sizing: border-box; width: 34px; height: 28px; padding: 0 2px; margin: 0; border: 1px solid transparent; border-radius: var(--pk-radius-control);
  background: transparent; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-13-5); text-align: right; -moz-appearance: textfield; box-shadow: none;
}
body[data-ui-tier="s"] .pst-stp-num input:focus { outline: none; border-color: var(--pst-amber); background: var(--pst-field); }
body[data-ui-tier="s"] .pst-stp-num input:disabled { color: var(--ink-muted); }
body[data-ui-tier="s"] .pst-stp-num i { font-style: normal; font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .pst-stp-add {
  align-self: flex-start; min-height: 40px; padding: 0 2px; border: 0; background: transparent; color: var(--pst-amber);
  font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-semi); cursor: pointer;
}
body[data-ui-tier="s"] .pst-stp-add:disabled { opacity: 0.5; }
body[data-ui-tier="s"] .pst-stp-foot { display: flex; gap: 10px; }
body[data-ui-tier="s"] .pst-stp-foot .pst-btn { min-height: 42px; font-size: var(--fs-14); }
/* two lists side by side once the phone is wide enough (the mockup at 412) */
@media (min-width: 400px) {
  body[data-ui-tier="s"] .pst-stp-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  body[data-ui-tier="s"] .pst-stp-col + .pst-stp-col { border-left: 1px solid var(--pst-line); padding-left: 8px; margin-left: 0; }
  body[data-ui-tier="s"] .pst-stp-col:first-child { padding-right: 8px; }
  body[data-ui-tier="s"] .pst-stp-th,
  body[data-ui-tier="s"] .pst-stp-row { grid-template-columns: 10px minmax(0, 1fr) 36px 40px; column-gap: 2px; }
  body[data-ui-tier="s"] .pst-stp-row .pst-sw { width: 40px; }
  body[data-ui-tier="s"] .pst-stp-row .pst-sw::before { left: 1px; right: 1px; }
  body[data-ui-tier="s"] .pst-stp-row .pst-sw::after { left: 4px; }
  body[data-ui-tier="s"] .pst-stp-name { font-size: var(--fs-13); padding: 0 2px; }
  body[data-ui-tier="s"] .pst-stp-num input { width: 25px; font-size: var(--fs-13); padding: 0; }
  body[data-ui-tier="s"] .pst-stp-num i { font-size: var(--fs-12); }
  body[data-ui-tier="s"] .pst-stp-th .pst-r { padding-right: 2px; margin-left: -8px; white-space: nowrap; }
  body[data-ui-tier="s"] .pst-stp-th .pst-c { padding-left: 4px; }
  body[data-ui-tier="s"] .pst-stp-grip { margin: 9px 0; }
  body[data-ui-tier="s"] .pst-stpcard .pst-card-body { margin: 0 -6px; }
}

/* ════════ LOOK & STYLE ════════ */
body[data-ui-tier="s"] .pst-skins { display: flex; flex-direction: column; gap: 6px; }
body[data-ui-tier="s"] .pst-skin {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px; border-radius: var(--pk-radius-row);
  border: 1px solid var(--pst-line); background: var(--pst-field); color: var(--ink); text-align: left; cursor: pointer;
}
body[data-ui-tier="s"] .pst-skin.is-on { border-color: var(--pst-amber); box-shadow: inset 0 0 0 1px var(--pst-amber); }
body[data-ui-tier="s"] .pst-skin-sw { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, 14px); gap: 2px; }
body[data-ui-tier="s"] .pst-skin-sw i { width: 14px; height: 14px; border-radius: var(--pk-radius-small); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
body[data-ui-tier="s"] .pst-skin-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body[data-ui-tier="s"] .pst-skin-name { font-size: var(--fs-14); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pst-skin-desc { font-size: var(--fs-12); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pst-skin-tag { flex: 0 0 auto; width: 52px; text-align: right; font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--track-04); text-transform: uppercase; color: var(--pst-amber); }

/* ════════ PREFERENCES ════════ */
body[data-ui-tier="s"] .pst-pref { display: flex; align-items: center; gap: 10px; min-height: 38px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
body[data-ui-tier="s"] .pst-pref-label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-13-5); color: var(--ink); }

/* ════════ DESKTOP CARDS MOUNTED INSIDE (.pst-reuse): their own frame goes, controls get phone sizes ════════ */
body[data-ui-tier="s"] .pst-reuse { min-width: 0; color: var(--ink); }
body[data-ui-tier="s"] .pst-reuse .settings-section {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; min-width: 0; width: auto; max-width: none;
}
body[data-ui-tier="s"] .pst-reuse .settings-section::before,
body[data-ui-tier="s"] .pst-reuse .settings-section::after { display: none; }
body[data-ui-tier="s"] .pst-reuse .settings-section-head { display: none; }
body[data-ui-tier="s"] .pst-reuse .settings-section-sub { font-size: var(--fs-12); line-height: 1.4; color: var(--ink-muted); margin: 0 0 8px; }
body[data-ui-tier="s"] .pst-reuse button { min-height: 40px; font-size: var(--fs-13); }
body[data-ui-tier="s"] .pst-reuse input:not([type="range"]):not([type="checkbox"]),
body[data-ui-tier="s"] .pst-reuse select { min-height: 34px; font-size: var(--fs-13); max-width: 100%; box-sizing: border-box; }
body[data-ui-tier="s"] .pst-reuse .setting-row { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 0; }
body[data-ui-tier="s"] .pst-reuse .setting-select { display: flex; flex-wrap: wrap; gap: 0 6px; }
body[data-ui-tier="s"] .pst-reuse .setting-select-btn {
  flex: 1 1 auto; min-height: 40px; padding: 0 12px; margin: 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 5px); border: 5px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  background-color: var(--pst-field); box-shadow: inset 0 0 0 1px var(--pst-line); color: var(--ink);
}
body[data-ui-tier="s"] .pst-reuse .setting-select-btn.is-active { background-color: var(--pst-amber); box-shadow: inset 0 0 0 1px var(--pst-amber); color: var(--pst-on-amber); }
body[data-ui-tier="s"] .pst-reuse .user-add-submit,
body[data-ui-tier="s"] .pst-reuse .bg-picker-btn,
body[data-ui-tier="s"] .pst-reuse .np-btn {
  min-height: 40px; padding: 0 14px; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 5px); border: 5px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  background-color: var(--pst-field); box-shadow: inset 0 0 0 1px var(--pst-line); color: var(--ink);
  font-weight: var(--fw-semi); white-space: normal;
}
body[data-ui-tier="s"] .pst-reuse .bg-picker-btn:not(.bg-picker-btn--ghost):not(:disabled) { background-color: var(--pst-amber); box-shadow: inset 0 0 0 1px var(--pst-amber); color: var(--pst-on-amber); }
body[data-ui-tier="s"] .pst-reuse .pl-actions,
body[data-ui-tier="s"] .pst-reuse .sw-actions,
body[data-ui-tier="s"] .pst-reuse .mp-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body[data-ui-tier="s"] .pst-reuse .sw-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
body[data-ui-tier="s"] .pst-reuse .sw-actions { flex: 1 1 100%; }
body[data-ui-tier="s"] .pst-reuse .sw-actions .bg-picker-btn { flex: 1 1 auto; }
body[data-ui-tier="s"] .pst-reuse .pl-logo-box { max-width: 100%; }
body[data-ui-tier="s"] .pst-reuse .pl-range { width: 100%; }
/* the menu presets: chips wrap, the page grid two across */
body[data-ui-tier="s"] .pst-reuse .mp-presets { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-ui-tier="s"] .pst-reuse .mp-chip { min-height: 40px; }
body[data-ui-tier="s"] .pst-reuse .mp-name { flex: 1 1 100%; width: 100%; }
body[data-ui-tier="s"] .pst-reuse .mp-use,
body[data-ui-tier="s"] .pst-reuse .mp-del { flex: 1 1 auto; }
body[data-ui-tier="s"] .pst-reuse .mp-pages { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
body[data-ui-tier="s"] .pst-reuse .mp-page { min-width: 0; min-height: 40px; }
body[data-ui-tier="s"] .pst-reuse .mp-page-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pst-reuse .dcol-swatch { min-width: 40px; min-height: 40px; }
body[data-ui-tier="s"] .pst-reuse .lsrc-head { flex-direction: column; gap: 6px; }
body[data-ui-tier="s"] .pst-reuse .lsrc-status { font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .pst-reuse .lsrc-rules { grid-template-columns: minmax(0, 1fr); }

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE MOCKUP 19 GEOMETRY + MATERIAL (6 Oct 2026, measured: phone-specs/19-settings.spec.md, CSS px at 412 wide).
   Coordinator: "each phone page must look EXACTLY like his mockup". The header of mockup 19 (a smoked glass block
   round ☰ + TRUENORTHS, the search / bell / avatar on a faint frosted strip), the project as a 221 x 34 dark glass
   box (its title only), the condensed SETTINGS heading, ONE row of five 31px tab pills (the active one a golden rim
   on warm brown with an amber glow) - pinned - then the near-solid deep-navy cards (93%, a 1px cool rim) in a
   357px column: 9px tracked titles, 11.5px rows, 21px status badges, 24px option pills, 28px fields, the two ambers
   (FLAT amber with near-black text = a chosen option; burnt-amber GRADIENT with a bright rim and white text = an
   action), 16px switches, the stage tables boxed with hairline rules, and mockup 19's 53px solid bottom bar.
   Every size is the mockup's; a control keeps a 40px tap area where the row pitch allows it (a transparent border
   with an equal negative margin, or an invisible ::before) - in the 18px stage rows and the 26px checklist rows the
   hit area is the whole row (the mockup's density, Hugo's spec).
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
body[data-ui-tier="s"] .pst-page {
  --pst-card: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 62%, var(--bg)) 96%, transparent);
  --pst-rim: color-mix(in srgb, var(--ink) 22%, transparent);
  --pst-field: color-mix(in srgb, var(--card-bg-solid) 72%, var(--black));             /* a field: the surface, sunk */
  --pst-field-rim: color-mix(in srgb, var(--ink) 21%, transparent);
  --pst-pill: color-mix(in srgb, var(--card-bg-solid) 99%, var(--ink));
  --pst-pill-rim: color-mix(in srgb, var(--ink) 24%, transparent);
  --pst-rule: color-mix(in srgb, var(--ink) 9%, transparent);
  --pst-amber: color-mix(in srgb, var(--accent) 80%, var(--ink));                           /* a chosen option */
  --pst-on-amber: color-mix(in srgb, var(--card-bg-solid) 25%, var(--black));
  --pst-act-hi: color-mix(in srgb, var(--accent) 62%, var(--black));                       /* an action: burnt amber */
  --pst-act-lo: color-mix(in srgb, var(--accent) 53%, var(--black));
  --pst-act-rim: color-mix(in srgb, var(--accent) 88%, var(--status-warn));
  --pst-on-act: color-mix(in srgb, var(--white) 94%, var(--accent));                      /* light words on the burnt amber, every skin */
  --pst-ok: color-mix(in srgb, var(--status-ok) 52%, var(--chart-ok));
  --pst-bad: color-mix(in srgb, var(--status-bad, var(--danger)) 55%, var(--danger));
  --pst-off: color-mix(in srgb, var(--status-off) 55%, var(--card-bg-solid));
  --pst-pill-ink: var(--ink);
  --pst-text: color-mix(in srgb, var(--ink) 72%, var(--ink-muted));
  overflow: hidden; padding-bottom: 0;
}
/* mockup 19's light (7 Oct, measured): the white text NEUTRAL (the skin's ink is cream), a chosen option the mockup's bright
   amber (#fd9d35), DONE / the progress the mockup's vivid green, the active tab a warm brown, the switches' off tracks
   slate. Glass family only: a pale skin keeps its own colours. */
body[data-ui-tier="s"][data-skin-family="glass"] .pst-page {
  --ink: color-mix(in srgb, var(--white) 90%, var(--ink-muted));
  --pst-amber: oklch(from var(--accent) calc(l + 0.046) calc(c * 1.105) calc(h + 1.1));
  --pst-ok: oklch(from var(--status-ok) calc(l + 0.165) calc(c * 1.43) calc(h - 2));
  --pst-tab-on: oklch(from var(--accent) calc(l - 0.389) calc(c * 0.358) calc(h + 4.1));
  --pst-sw-off: oklch(from var(--card-bg-solid) calc(l + 0.139) calc(c * 0.63) calc(h - 10.9));
  --pst-sw-off-dim: oklch(from var(--card-bg-solid) calc(l + 0.07) calc(c * 0.777) calc(h - 8.2));
}
body[data-ui-tier="s"] .pst-page > .pk-page-body { flex: 1 1 auto; min-height: 0; gap: 0; padding: 0; }
body[data-ui-tier="s"] .pst-top { flex: 0 0 auto; padding: 0 27.6px; }
body[data-ui-tier="s"] .pst-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 5.4px 27.6px 6px;   /* the page ends just above the nav, as the mockup's second panel (no empty band) */
}
body[data-ui-tier="s"] .pst-body { gap: 6.5px; }

/* ════════ SETTINGS + THE TAB ROW (pinned) ════════ */
body[data-ui-tier="s"] .pst-title {
  margin: -3.4px 0 0 11.5px; font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: 0.05em;   /* the mockup's broader letters: a size smaller, tracked to the same width */
  text-transform: uppercase; color: var(--ink);
  text-shadow: 0 1px 6px color-mix(in srgb, var(--black) 55%, transparent);   /* white on a bright photo: the mockup's contrast */
}
body[data-ui-tier="s"] .pst-page .pst-tabs { gap: 2.1px; margin: -0.4px 0 -4px 0; padding: 4px 0 4px 8.8px; overflow-x: auto; overflow-y: hidden; }
body[data-ui-tier="s"] .pst-page .pst-tab {
  flex: 0 0 auto; min-height: 0; height: 41px; margin: -5px 0; padding: 0; border-width: 5px 0; box-sizing: border-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 5px);
  background-color: color-mix(in srgb, var(--pst-field) 98%, transparent); box-shadow: inset 0 0 0 1px var(--pst-field-rim);
  font-size: 11.5px; font-weight: var(--fw-med); letter-spacing: -0.045em; color: var(--ink);
}
body[data-ui-tier="s"] .pst-page .pst-tab:nth-child(1) { width: 63.3px; }
body[data-ui-tier="s"] .pst-page .pst-tab:nth-child(2) { width: 74.7px; }
body[data-ui-tier="s"] .pst-page .pst-tab:nth-child(3) { width: 73.4px; }
body[data-ui-tier="s"] .pst-page .pst-tab:nth-child(4) { width: 45.1px; }
body[data-ui-tier="s"] .pst-page .pst-tab:nth-child(5) { width: 79.4px; }
body[data-ui-tier="s"] .pst-page .pst-tab.is-on {
  font-weight: var(--fw-med); color: var(--ink);
  background-color: var(--pst-tab-on, color-mix(in srgb, var(--accent) 18%, color-mix(in srgb, var(--card-bg-solid) 80%, var(--black))));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--status-warn) 70%, var(--ink)), 0 0 7px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ════════ THE CARD: near-solid deep navy, a cool 1px rim; a 23px title row ════════ */
body[data-ui-tier="s"] .pst-page .pst-card {
  padding: 0 9.3px 0 12px; border-radius: var(--pk-radius-card); background: var(--pst-card); border: 1px solid var(--pst-rim);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body[data-ui-tier="s"] .pst-page .pst-card-head { position: relative; min-height: 0; height: 40px; margin-bottom: -15.4px; padding: 0; gap: 6px; align-items: flex-start; }
body[data-ui-tier="s"] .pst-page .pst-card-title {
  padding-top: 10.9px; font-size: 9px; font-weight: var(--fw-semi); letter-spacing: 0.18em; line-height: 1; color: var(--ink);
}
body[data-ui-tier="s"] .pst-page .pst-card-meta,
body[data-ui-tier="s"] .pst-page .pst-card-status {
  flex: 0 1 auto; min-width: 0; padding-top: 10.2px; font-size: 9.5px; line-height: 1.1; color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52%;
}
body[data-ui-tier="s"] .pst-page .pst-card-status.is-bad { color: var(--pst-bad); }
body[data-ui-tier="s"] .pst-page .pst-card-chev { width: 14px; height: 14px; margin: 6.4px 2.2px 0 auto; overflow: visible; }
body[data-ui-tier="s"] .pst-page .pst-card-meta + .pst-card-chev,
body[data-ui-tier="s"] .pst-page .pst-card-status + .pst-card-chev { margin-left: 0; }
body[data-ui-tier="s"] .pst-page .pst-card-chev svg { width: 19px; height: 19px; stroke-width: 1.7; }
body[data-ui-tier="s"] .pst-page .pst-card.is-folded { padding-bottom: 6px; }
body[data-ui-tier="s"] .pst-page .pst-card-body { gap: 0; }

/* ════════ CONTROLS (the mockup's sizes; 40px to tap where the pitch allows) ════════ */
body[data-ui-tier="s"] .pst-page .pst-btn {
  min-width: 0; min-height: 0; height: 40px; padding: 0 8px; margin: -6px 0; border-width: 6px 0;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 6px);
  background-color: var(--pst-pill); box-shadow: inset 0 0 0 1px var(--pst-pill-rim);
  font-size: 11.5px; font-weight: var(--fw-med); letter-spacing: -0.04em;
}
body[data-ui-tier="s"] .pst-page .pst-btn.is-primary {
  color: var(--pst-on-act); font-weight: var(--fw-semi);
  background-color: transparent; background-image: linear-gradient(180deg, var(--pst-act-hi), var(--pst-act-lo));
  box-shadow: inset 0 0 0 1.5px var(--pst-act-rim), 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent);
}
body[data-ui-tier="s"] .pst-page .pst-btn:disabled { opacity: 1; }
body[data-ui-tier="s"] .pst-page .pst-btn.is-primary:disabled { opacity: 1; }   /* an idle Save is the mockup's lit amber */
body[data-ui-tier="s"] .pst-page .pst-input {
  height: 40px; margin: -6px 0; padding: 0 10px; border: 6px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 6px);
  background-color: var(--pst-field); box-shadow: inset 0 0 0 1px var(--pst-field-rim);
  font-size: 11.2px; font-weight: var(--fw-med);
}
body[data-ui-tier="s"] .pst-page .pst-input:focus { box-shadow: inset 0 0 0 1px var(--accent); }
body[data-ui-tier="s"] .pst-page .pst-input:disabled { opacity: 1; }
/* the switch: a 28 x 16 track (amber when on, a dark knob), the whole row height to tap */
body[data-ui-tier="s"] .pst-page .pst-sw { width: 28.3px; height: 16.2px; margin: 0; }
body[data-ui-tier="s"] .pst-page .pst-sw::before {
  left: 0; right: 0; top: 0; height: 16.2px; border: 0; border-radius: var(--pk-radius-control);
  background: var(--pst-sw-off, color-mix(in srgb, var(--card-bg-solid) 62%, var(--ink-muted)));
}
body[data-ui-tier="s"] .pst-page .pst-stp-row .pst-sw::before { background: var(--pst-sw-off-dim, color-mix(in srgb, var(--card-bg-solid) 62%, var(--ink-muted))); }
body[data-ui-tier="s"] .pst-page .pst-sw::after {
  left: 2.3px; top: 2.3px; width: 11.6px; height: 11.6px; border-radius: 50%; background: var(--ink); box-shadow: none;
}
body[data-ui-tier="s"] .pst-page .pst-sw[aria-checked="true"]::before { background: var(--pst-amber); }
body[data-ui-tier="s"] .pst-page .pst-sw[aria-checked="true"]::after { transform: translateX(12.1px); background: color-mix(in srgb, var(--card-bg-solid) 60%, var(--black)); }
body[data-ui-tier="s"] .pst-page .pst-sw:disabled { opacity: 1; }
/* option pills (Hero | Good | WIP, the ratios, the version tabs): 24px faces; a chosen one FLAT amber */
body[data-ui-tier="s"] .pst-page .pst-seg { flex: 0 0 auto; gap: 4.7px; grid-template-columns: repeat(var(--pst-n, 3), auto); }
body[data-ui-tier="s"] .pst-page .pst-seg-btn,
body[data-ui-tier="s"] .pst-page .pst-chip {
  min-height: 0; height: 40.2px; margin: -8px 0; padding: 0 4px; border-width: 8px 0;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 8px);
  background-color: var(--pst-pill); box-shadow: inset 0 0 0 1px var(--pst-pill-rim);
  font-size: 11.5px; font-weight: var(--fw-med); letter-spacing: -0.04em; justify-content: center;
}
body[data-ui-tier="s"] .pst-page .pst-seg-btn.is-on,
body[data-ui-tier="s"] .pst-page .pst-chip.is-on { background-color: var(--pst-amber); box-shadow: inset 0 0 0 1px var(--pst-amber); color: var(--pst-on-amber); font-weight: var(--fw-med); }
body[data-ui-tier="s"] .pst-page .pst-seg-btn:disabled:not(.is-on),
body[data-ui-tier="s"] .pst-page .pst-chip:disabled:not(.is-fixed) { opacity: 1; }
/* status badges: solid fills */
body[data-ui-tier="s"] .pst-page .pst-pill {
  width: 64px; height: 21.5px; padding: 0; border-radius: var(--pk-radius-small);
  font-size: 9.7px; font-weight: var(--fw-bold); letter-spacing: 0; color: var(--pst-pill-ink); background: var(--pst-off);
}
body[data-ui-tier="s"] .pst-page .pst-pill--done { background: var(--pst-ok); }
body[data-ui-tier="s"] .pst-page .pst-pill--missing,
body[data-ui-tier="s"] .pst-page .pst-pill--bug { background: var(--pst-bad); }
body[data-ui-tier="s"] .pst-page .pst-pill--skipped,
body[data-ui-tier="s"] .pst-page .pst-pill--optional,
body[data-ui-tier="s"] .pst-page .pst-pill--pc { background: var(--pst-off); font-size: 9.4px; height: 21.5px; }
body[data-ui-tier="s"] .pst-page .pst-pill--skipped { width: 67.3px; }
body[data-ui-tier="s"] .pst-page .pst-line { min-height: 14px; max-height: 14px; font-size: 10.6px; letter-spacing: -0.03em; line-height: 14px; color: var(--pst-text); }
body[data-ui-tier="s"] .pst-page .pst-row { gap: 0; min-height: 0; }
body[data-ui-tier="s"] .pst-page .pst-row-label,
body[data-ui-tier="s"] .pst-page .pst-ck-label,
body[data-ui-tier="s"] .pst-page .pst-tool-label { transform: scaleX(0.935); transform-origin: left center; }
body[data-ui-tier="s"] .pst-page .pst-row-label { width: auto; flex: 0 0 auto; font-size: 11.5px; letter-spacing: -0.045em; line-height: 1; color: var(--pst-text); }

/* ════════ PROJECT SETUP CHECKLIST: 21px badges at a 26px pitch, hairline rules between ════════ */
body[data-ui-tier="s"] .pst-page .pst-ck-head { position: relative; display: block; height: 27.6px; min-height: 0; margin: 4.4px 0 0; }
body[data-ui-tier="s"] .pst-page .pst-ck-head > .pst-pill { position: absolute; left: 0; top: 0; width: 53.2px; height: 20.9px; font-size: 9.7px; }
body[data-ui-tier="s"] .pst-page .pst-ck-count { position: absolute; left: 63.3px; top: 0.4px; font-size: 13px; font-weight: var(--fw-med); line-height: 1.3; }
body[data-ui-tier="s"] .pst-page .pst-ck-count--sm { position: static; display: block; padding-left: 63.3px; font-size: 11.2px; white-space: normal; }
body[data-ui-tier="s"] .pst-page .pst-ck-head > .pst-btn { position: absolute; right: 0; top: 0; width: 64px; height: 40px; margin: -6.2px 0; background-color: color-mix(in srgb, var(--card-bg-solid) 86%, var(--black)); }
body[data-ui-tier="s"] .pst-page .pst-bar { height: 8.6px; margin: -5.3px 0 0; width: 240.3px; border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--ink) 30%, var(--card-bg-solid)); }
body[data-ui-tier="s"] .pst-page .pst-bar > span { background: var(--pst-ok); }
body[data-ui-tier="s"] .pst-page .pst-ck-list { min-height: calc(var(--pst-rows, 8) * 26.16px); margin-top: 6.7px; }
body[data-ui-tier="s"] .pst-page .pst-ck-row { position: relative; gap: 0; min-height: 0; height: 26.16px; align-items: flex-start; border-bottom: 1px solid var(--pst-rule); box-sizing: border-box; }
body[data-ui-tier="s"] .pst-page .pst-ck-row:last-child { border-bottom: 0; }
body[data-ui-tier="s"] .pst-page .pst-ck-row > .pst-pill { margin-top: 0; }
body[data-ui-tier="s"] .pst-page .pst-ck-label { position: absolute; left: 76.1px; right: 92px; top: 4.1px; font-size: 11.5px; letter-spacing: -0.045em; line-height: 1.2; color: var(--pst-text); }
body[data-ui-tier="s"] .pst-page .pst-ck-act { position: absolute; right: 0; top: 0; min-width: 0; height: 21px; display: flex; align-items: center; }
body[data-ui-tier="s"] .pst-page .pst-ck-act .pst-btn { min-width: 0; width: 74.1px; height: 40px; margin: -9px 0; border-width: 9px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 9px); }
body[data-ui-tier="s"] .pst-page .pst-ck-act .pst-btn--sm { max-width: none; font-size: 11.5px; }
body[data-ui-tier="s"] .pst-page .pst-ck-act .pst-btn:not(.is-primary) { width: 75.4px; background-color: var(--pst-field); }
body[data-ui-tier="s"] .pst-page .pst-ck-row:first-child .pst-ck-act .pst-btn.is-primary { width: 90.2px; }
body[data-ui-tier="s"] .pst-page .pst-ck-chev { width: 40px; height: 40px; margin: -9.5px -11.8px -7px 0; }
body[data-ui-tier="s"] .pst-page .pst-ck-chev svg { width: 18.1px; height: 18.1px; stroke-width: 1.6; transform: scaleY(0.81); }
body[data-ui-tier="s"] .pst-page .pst-ck-foot { height: 23px; align-items: flex-start; }
body[data-ui-tier="s"] .pst-page .pst-ck-all { min-height: 0; height: 40px; margin: -10.2px 0 -6.8px; padding: 0; font-size: 12px; letter-spacing: -0.016em; font-weight: var(--fw-med); gap: 6px; }
body[data-ui-tier="s"] .pst-page .pst-ck-all svg { width: 11.4px; height: 11.4px; }

/* ════════ PROJECT SETUP: label left, control right ════════ */
body[data-ui-tier="s"] .pst-page .pst-card[data-pst-card="setup"] .pst-card-body { padding-bottom: 8.3px; }
body[data-ui-tier="s"] .pst-page .pst-row--cal { margin-top: 2.3px; height: 28.3px; }
body[data-ui-tier="s"] .pst-page .pst-row--cal .pst-row-label { width: 82.1px; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pst-page .pst-row--cal .pst-input { flex: 0 1 196.6px; width: auto; min-width: 0; font-size: 9px; letter-spacing: -0.02em; height: 40.3px; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pst-page .pst-row--cal .pst-btn { width: 48.5px; margin-left: auto; height: 40.3px; }
body[data-ui-tier="s"] .pst-page .pst-row--route { margin-top: 5.4px; height: 24.2px; }
body[data-ui-tier="s"] .pst-page .pst-row--route + .pst-row--route { margin-top: 5.4px; }
body[data-ui-tier="s"] .pst-page .pst-row--route .pst-row-label { width: 111.7px; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pst-page .pst-row--route .pst-seg { grid-template-columns: minmax(0, 70.7px) minmax(0, 70px) minmax(0, 71.4px); flex: 0 1 221.5px; min-width: 0; margin-left: auto; }
body[data-ui-tier="s"] .pst-page .pst-row--dates { display: flex; margin-top: 5.2px; height: 29.6px; gap: 0; }
body[data-ui-tier="s"] .pst-page .pst-date { gap: 0; flex: 0 0 auto; }
body[data-ui-tier="s"] .pst-page .pst-date { flex: 0 1 auto; min-width: 0; }
body[data-ui-tier="s"] .pst-page .pst-date:first-child .pst-row-label { width: 66px; flex-shrink: 1; min-width: 46px; }
body[data-ui-tier="s"] .pst-page .pst-date:first-child .pst-input { width: 108.4px; flex: 0 1 108.4px; min-width: 0; }
body[data-ui-tier="s"] .pst-page .pst-date:last-child { margin-left: auto; padding-left: 6px; }
body[data-ui-tier="s"] .pst-page .pst-date:last-child .pst-row-label { width: 47.1px; flex-shrink: 1; min-width: 40px; }
body[data-ui-tier="s"] .pst-page .pst-date:last-child .pst-input { width: 99.6px; flex: 0 1 99.6px; min-width: 0; }
body[data-ui-tier="s"] .pst-page .pst-date .pst-input { height: 41.6px; padding: 0 5px 0 9px; font-size: 10.2px; font-weight: 400; }
body[data-ui-tier="s"] .pst-page .pst-row--plan { margin-top: 7.1px; height: 28.3px; }
body[data-ui-tier="s"] .pst-page .pst-row--plan .pst-row-label { width: 82.2px; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pst-page .pst-row--plan .pst-input { flex: 0 1 119.8px; width: auto; min-width: 0; height: 40px; font-size: 13.4px; font-weight: 400; }
body[data-ui-tier="s"] .pst-page .pst-btn--save { margin-left: auto; flex: 0 1 121.8px; width: auto; min-width: 72px; height: 40.3px; font-family: var(--font-display); font-size: 13.5px; font-weight: 400; letter-spacing: 0.04em; }
body[data-ui-tier="s"] .pst-page .pst-row--ratio { flex-wrap: nowrap; margin-top: 7.9px; height: 22.9px; }
body[data-ui-tier="s"] .pst-page .pst-row--ratio .pst-row-label { width: 92.2px; }
body[data-ui-tier="s"] .pst-page .pst-seg--ratio { grid-template-columns: repeat(7, 33px); gap: 3px; margin-left: auto; }   /* 7 ratios in about the old width */
body[data-ui-tier="s"] .pst-page .pst-seg--ratio .pst-seg-btn { width: 40px; height: 40.9px; margin: -9px -1.3px; border-width: 9px 2px; font-size: 9.8px; padding: 0; }
body[data-ui-tier="s"] .pst-page .pst-seg--ratio .pst-seg-btn:not(.is-on) { background-color: color-mix(in srgb, var(--card-bg-solid) 95%, var(--black)); }

/* ════════ HIDDEN TOOLS: two columns at a 20px pitch, a rule between ════════ */
body[data-ui-tier="s"] .pst-page .pst-card[data-pst-card="hidden"] .pst-card-body { padding-bottom: 8.3px; }
body[data-ui-tier="s"] .pst-page .pst-tools { grid-template-columns: 168.4px minmax(0, 1fr); column-gap: 0; margin-top: 0.3px; }
body[data-ui-tier="s"] .pst-page .pst-tools-col + .pst-tools-col { border-left: 1px solid var(--pst-rule); padding-left: 15.7px; padding-right: 7.8px; }
body[data-ui-tier="s"] .pst-page .pst-tools-col:first-child { padding-right: 16px; }
body[data-ui-tier="s"] .pst-page .pst-tool { min-height: 0; height: 20.2px; gap: 0; align-items: flex-start; }
body[data-ui-tier="s"] .pst-page .pst-tool-label { font-size: 11.2px; letter-spacing: -0.045em; line-height: 1.2; padding-top: 0.9px; color: var(--pst-text); }

/* ════════ SPEND CAP ════════ */
body[data-ui-tier="s"] .pst-page .pst-card[data-pst-card="spend"] .pst-row { margin-top: 3.2px; height: 29.5px; }
body[data-ui-tier="s"] .pst-page .pst-money { flex: 0 1 172.4px; min-width: 0; }
body[data-ui-tier="s"] .pst-page .pst-money .pst-input { height: 40px; margin: -6px 0; font-size: 11.7px; padding: 0 30px 0 17px; }
body[data-ui-tier="s"] .pst-page .pst-money-unit { right: 11.2px; font-size: 9.9px; color: color-mix(in srgb, var(--ink) 60%, var(--ink-muted)); }
body[data-ui-tier="s"] .pst-page .pst-btn--wide { flex: 0 1 147.6px; width: auto; min-width: 90px; padding-left: 10px; margin-left: auto; height: 41.5px; margin-top: -6px; margin-bottom: -6px; font-size: 11.7px; }
body[data-ui-tier="s"] .pst-page .pst-card[data-pst-card="spend"] .pst-line { margin: 4.7px 0 5.6px; }

/* ════════ VERSION TABS ════════ */
body[data-ui-tier="s"] .pst-page .pst-vt { grid-template-columns: 82.7px minmax(0, 1fr); gap: 0; }
body[data-ui-tier="s"] .pst-page .pst-vt + .pst-vt { margin-top: 8.7px; }
body[data-ui-tier="s"] .pst-page .pst-card[data-pst-card="vtabs"] .pst-card-body { padding: 3.6px 0 9.3px; }
body[data-ui-tier="s"] .pst-page .pst-vt > .pst-row-label { min-height: 24.2px; font-size: 12.6px; letter-spacing: -0.035em; font-weight: 400; color: var(--ink); }
body[data-ui-tier="s"] .pst-page .pst-vt-chips { gap: 4.1px 4.7px; }
body[data-ui-tier="s"] .pst-page .pst-vt .pst-chip { flex: 1 0 auto; padding: 0 12px; min-width: 53px; font-size: 10.9px; }
/* the mockup's full rows are justified: the chips share a full row's spare width; a short last row keeps its own widths */
body[data-ui-tier="s"] .pst-page .pst-vt:first-of-type .pst-chip:nth-child(4) { flex-grow: 4; }
body[data-ui-tier="s"] .pst-page .pst-vt + .pst-vt .pst-vt-chips::after { content: ""; flex: 100 0 0; }

/* ════════ AGENT INSTRUCTIONS & DOCUMENTS: the instructions row, Save, the document chips, Build ════════ */
body[data-ui-tier="s"] .pst-page .pst-kbcard .pst-card-body { padding: 3.6px 0 7.2px; }
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb { gap: 4.1px; }
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-sec { gap: 3.1px; }
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-text {
  height: 36.2px; min-height: 36.2px; max-height: 36.2px; padding: 3.6px 30px 0 12.1px; overflow: hidden;
  border: 0; border-bottom: 3.2px solid color-mix(in srgb, var(--card-bg-solid) 70%, var(--black)); background-clip: border-box; border-radius: var(--pk-radius-control);
  background: color-mix(in srgb, var(--card-bg-solid) 70%, var(--black)); box-shadow: none; outline: 1px solid var(--pst-field-rim); outline-offset: -1px;
  font-size: 10.6px; line-height: 14.7px; color: var(--ink);
}
body[data-ui-tier="s"] .pst-page .pst-kb-open { width: 40px; height: 40px; top: -1.9px; }
body[data-ui-tier="s"] .pst-page .pst-kb-open svg { width: 14px; height: 14px; }
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-row { gap: 0; height: 25.5px; min-height: 0; }
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-status,
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-count,
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-budget,
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-chip-m,
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-autoline { display: none; }
body[data-ui-tier="s"] .pst-page .pst-kb .agent-btn {
  display: inline-flex; align-items: center; justify-content: center; background-clip: padding-box; background-image: none; text-align: left;
  min-height: 0; height: 40px; margin: -7px 0; padding: 0 12px; border-style: solid; border-color: transparent; border-width: 7px 0; font-size: 10.9px; font-weight: var(--fw-semi);
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 7px);
  background-color: var(--pst-pill); box-shadow: inset 0 0 0 1px var(--pst-pill-rim);
}
body[data-ui-tier="s"] .pst-page .pst-kb .agent-btn--go {
  width: 145.6px; color: var(--pst-on-act); background-color: transparent; background-image: linear-gradient(180deg, var(--pst-act-hi), var(--pst-act-lo));
  box-shadow: inset 0 0 0 1.5px var(--pst-act-rim), 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent);
}
body[data-ui-tier="s"] .pst-page .pst-kb .agent-btn:disabled { opacity: 1; }
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-sec + .agent-kb-sec { margin-top: 1px; }
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-chips { gap: 6px; flex-wrap: wrap; }
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-chip {
  flex: 0 1 226.8px; height: 30.9px; min-height: 0; padding: 0 28px 0 34.9px; border: 0; border-radius: var(--pk-radius-control);
  background: color-mix(in srgb, var(--card-bg-solid) 94.5%, var(--ink)); box-shadow: inset 0 0 0 1px var(--pst-pill-rim);
}
/* the document mark (an outline page, drawn with the ink through a mask: no colour of its own) */
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-chip::before {
  content: ""; position: absolute; left: 10.1px; top: 7.4px; width: 12.7px; height: 16.1px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16'><path d='M1 0h7l5 5v11H1z' fill='black'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16'><path d='M1 0h7l5 5v11H1z' fill='black'/></svg>") center / contain no-repeat;
}
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-chip-t { font-size: 10.5px; letter-spacing: -0.03em; font-weight: 400; line-height: 1.2; color: var(--pst-text); }
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-chip-x { width: 40px; height: 40px; top: -4.55px; right: -5px; bottom: auto; display: grid; place-items: center; font-size: 16px; font-weight: 400; line-height: 1; }
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-add {
  flex: 0 0 100.7px; height: 40px; margin: -4.55px 0; padding: 0; border: 4.55px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box; outline: 0; font-size: 10.6px; font-weight: var(--fw-med);
  background-color: color-mix(in srgb, var(--card-bg-solid) 76%, var(--black));   /* -color: the shorthand would reset the clip */
  box-shadow: none; background-image: none;
}
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-add { position: relative; }
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-add::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: var(--pk-radius-control); border: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent); pointer-events: none;
}
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-auto .agent-btn {
  display: flex; flex: 1 1 100%; justify-content: flex-start; height: 40.2px; margin: -6px 0; border-width: 6px 0; padding: 0 0 0 42.9px; position: relative;
  font-size: 11.2px; letter-spacing: -0.035em; font-weight: 400; color: var(--pst-text); background-color: color-mix(in srgb, var(--card-bg-solid) 97%, var(--ink));
  transform: scaleX(0.935); transform-origin: left center; width: calc(100% / 0.935); flex: 0 0 calc(100% / 0.935); max-width: none;
}
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-auto .agent-btn::before {
  content: ""; position: absolute; left: 12.1px; top: 7.4px; width: 17.4px; height: 13.4px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M12 3C9 1 5 1 1.5 2v14C5 15 9 15 12 17c3-2 7-2 10.5-1V2C19 1 15 1 12 3zM12 3v14'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M12 3C9 1 5 1 1.5 2v14C5 15 9 15 12 17c3-2 7-2 10.5-1V2C19 1 15 1 12 3zM12 3v14'/></svg>") center / contain no-repeat;
}
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-auto { margin-top: 1.9px; }
body[data-ui-tier="s"] .pst-page .pst-kb .agent-kb-auto .agent-kb-row { height: 28.2px; }

/* ════════ STAGES & PROGRESS: two boxed tables (hairline row rules), the grips outside, Reset | Save ════════ */
body[data-ui-tier="s"] .pst-page .pst-stpcard .pst-card-body { margin: 0; padding-bottom: 3px; }
body[data-ui-tier="s"] .pst-page .pst-stp-cols { grid-template-columns: 168.6px minmax(0, 1fr); gap: 0; margin-top: 0; }
body[data-ui-tier="s"] .pst-page .pst-stp-col + .pst-stp-col { border-left: 1px solid var(--pst-rule); padding-left: 16.9px; margin-left: 0; }
body[data-ui-tier="s"] .pst-page .pst-stp-col:first-child { padding-right: 13.5px; }
body[data-ui-tier="s"] .pst-page .pst-stp-title { margin: 4.3px 0 0 0.2px; font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.16em; line-height: 1; }
body[data-ui-tier="s"] .pst-page .pst-stp-th,
body[data-ui-tier="s"] .pst-page .pst-stp-row { grid-template-columns: 13.8px minmax(0, 1fr) 40px 32px; column-gap: 0; }
body[data-ui-tier="s"] .pst-page .pst-stp-th { min-height: 0; height: 11.4px; margin-top: 6.7px; font-size: 7px; font-weight: var(--fw-semi); letter-spacing: 0; color: color-mix(in srgb, var(--ink) 70%, var(--ink-muted)); line-height: 1; }
body[data-ui-tier="s"] .pst-page .pst-stp-th > span:nth-child(2) { padding-left: 7.4px; }   /* STAGE over the names' first letter */
body[data-ui-tier="s"] .pst-page .pst-stp-th .pst-r { text-align: right; padding-right: 0; margin-left: 0; transform: translateX(-7px); }   /* WORTH over the worths */
body[data-ui-tier="s"] .pst-page .pst-stp-th .pst-c { text-align: center; padding-left: 2px; letter-spacing: -0.04em; transform: translateX(4.7px); }
body[data-ui-tier="s"] .pst-page .pst-stp-table { position: relative; }
body[data-ui-tier="s"] .pst-page .pst-stp-table::before {
  content: ""; position: absolute; left: 13.8px; right: 0; top: 0; bottom: 0; pointer-events: none;
  border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--card-bg-solid) 72%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
body[data-ui-tier="s"] .pst-page .pst-stp-row { position: relative; min-height: 0; height: 18.24px; border-bottom: 0; }
body[data-ui-tier="s"] .pst-page .pst-stp-row + .pst-stp-row::after {
  content: ""; position: absolute; left: 13.8px; right: 0; top: 0; height: 1px; background: color-mix(in srgb, var(--ink) 8%, transparent); pointer-events: none;
}
body[data-ui-tier="s"] .pst-page .pst-stp-grip {
  margin: 4.4px 8.4px 4.4px 0; background-image: radial-gradient(circle, var(--ink) 1px, transparent 1.3px); background-size: 3.6px 3.2px;
  background-position: left top; opacity: 0.85;
}
body[data-ui-tier="s"] .pst-page .pst-stp-name { position: relative; height: 18.24px; padding: 0 0 0 7.4px; border: 0; border-radius: 0; font-size: 9.9px; letter-spacing: -0.035em; color: var(--pst-text); box-shadow: inset -1px 0 0 color-mix(in srgb, var(--ink) 8%, transparent); }
body[data-ui-tier="s"] .pst-page .pst-stp-num { position: relative; height: 18.24px; padding-right: 0; }
body[data-ui-tier="s"] .pst-page .pst-stp-num > * { transform: translateX(-6.5px); }   /* the worth sits the mockup's 6.5px further left */
body[data-ui-tier="s"] .pst-page .pst-stp-num input { width: 22px; height: 18.24px; padding: 0; border: 0; font-size: 9.3px; color: var(--pst-text); }
body[data-ui-tier="s"] .pst-page .pst-stp-num { gap: 0; }
body[data-ui-tier="s"] .pst-page .pst-stp-num i { font-size: 9.3px; color: var(--pst-text); margin-left: -0.5px; }
body[data-ui-tier="s"] .pst-page .pst-stp-row .pst-sw { position: relative; justify-self: end; align-self: center; width: 28.2px; height: 14.8px; margin: 0 0.4px 0 0; }
body[data-ui-tier="s"] .pst-page .pst-stp-row .pst-sw::before { height: 14.8px; left: 0; right: 0; }
body[data-ui-tier="s"] .pst-page .pst-stp-row .pst-sw::after { left: 2.2px; top: 2.2px; width: 10.4px; height: 10.4px; }
body[data-ui-tier="s"] .pst-page .pst-stp-row .pst-sw[aria-checked="true"]::after { transform: translateX(13.4px); }
body[data-ui-tier="s"] .pst-page .pst-stp-row .pst-sw[aria-checked="false"]::before { background: color-mix(in srgb, var(--card-bg-solid) 78%, var(--ink-muted)); }
body[data-ui-tier="s"] .pst-page .pst-stp-col + .pst-stp-col .pst-stp-th,
body[data-ui-tier="s"] .pst-page .pst-stp-col + .pst-stp-col .pst-stp-row { grid-template-columns: 13.8px minmax(0, 1fr) 40px 32px; }
body[data-ui-tier="s"] .pst-page .pst-stp-add {
  min-height: 0; height: 41px; margin: -8.6px 0 -10px -2.1px; padding: 0 5px; border: 10px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 10px);
  background-color: color-mix(in srgb, var(--card-bg-solid) 99%, var(--ink)); color: color-mix(in srgb, var(--status-warn) 75%, var(--ink));   /* -color: keeps the face 21px */
  font-size: 10.2px; letter-spacing: -0.03em; font-weight: var(--fw-med);
}
body[data-ui-tier="s"] .pst-page .pst-stp-add:disabled { opacity: 1; }
body[data-ui-tier="s"] .pst-page .pst-stp-foot { gap: 8.6px; margin-top: 1px; }
body[data-ui-tier="s"] .pst-page .pst-stp-foot .pst-btn { flex: 0 1 184.5px; min-width: 0; width: auto; height: 40px; margin: -8px 0; border-width: 8px 0; font-size: 10.6px; }
body[data-ui-tier="s"] .pst-page .pst-stp-foot .pst-btn:not(.is-primary) { background-color: color-mix(in srgb, var(--card-bg-solid) 97%, var(--ink)); }
body[data-ui-tier="s"] .pst-page .pst-stp-foot .pst-btn.is-primary { flex: 0 1 142.3px; width: auto; height: 40.2px; margin: -7px 0; border-width: 7px 0; font-size: 11.2px; }

/* the switch: the mockup's 28 x 16 track drawn inside a 40 x 40 tap box (the box overhangs the row; negative margins
   give the space back, so the layout is the mockup's) */
body[data-ui-tier="s"] .pst-page .pst-sw {
  --pst-sw-w: 28.3px; --pst-sw-h: 16.2px;
  width: 40px; height: 40px; margin: calc((var(--pst-sw-h) - 40px) / 2) calc((var(--pst-sw-w) - 40px) / 2);
}
body[data-ui-tier="s"] .pst-page .pst-sw::before {
  left: calc((40px - var(--pst-sw-w)) / 2); right: auto; top: calc((40px - var(--pst-sw-h)) / 2); width: var(--pst-sw-w); height: var(--pst-sw-h);
}
body[data-ui-tier="s"] .pst-page .pst-sw::after {
  left: calc((40px - var(--pst-sw-w)) / 2 + 2.3px); top: calc((40px - var(--pst-sw-h)) / 2 + 2.3px);
  width: calc(var(--pst-sw-h) - 4.6px); height: calc(var(--pst-sw-h) - 4.6px);
}
body[data-ui-tier="s"] .pst-page .pst-sw[aria-checked="true"]::after { transform: translateX(calc(var(--pst-sw-w) - var(--pst-sw-h))); }
body[data-ui-tier="s"] .pst-page .pst-tools-col + .pst-tools-col .pst-sw { --pst-sw-w: 31px; width: 40px; }
body[data-ui-tier="s"] .pst-page .pst-stp-row .pst-sw { --pst-sw-w: 28.2px; --pst-sw-h: 14.8px; width: 40px; height: 40px; margin: calc((14.8px - 40px) / 2) calc((28.2px - 40px) / 2); justify-self: end; }
body[data-ui-tier="s"] .pst-page .pst-stp-row .pst-sw::before { left: calc((40px - var(--pst-sw-w)) / 2); right: auto; height: var(--pst-sw-h); }
body[data-ui-tier="s"] .pst-page .pst-stp-row .pst-sw::after { left: calc((40px - var(--pst-sw-w)) / 2 + 2.2px); top: calc((40px - var(--pst-sw-h)) / 2 + 2.2px); width: 10.4px; height: 10.4px; }
body[data-ui-tier="s"] .pst-page .pst-stp-row .pst-sw[aria-checked="true"]::after { transform: translateX(13.4px); }
/* the Preferences tab's stacked rows (App scale) keep their label above the chips */
body[data-ui-tier="s"] .pst-page .pst-vt--stack { grid-template-columns: minmax(0, 1fr); gap: 4px; }
body[data-ui-tier="s"] .pst-page .pst-vt--stack .pst-vt-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
body[data-ui-tier="s"] .pst-page .pst-vt--stack .pst-chip { flex: none; min-width: 0; }
body[data-ui-tier="s"] .pst-page .pst-pref { min-height: 30px; }
body[data-ui-tier="s"] .pst-page .pst-pref-label { font-size: 10.6px; color: var(--pst-text); }
/* a narrower phone (390 / 360): the ratio label above its chips, the two stage tables stacked; nothing past the edge */
@media (max-width: 399px) {
  body[data-ui-tier="s"] .pst-page .pst-row--ratio { flex-wrap: wrap; height: auto; row-gap: 9px; }
  body[data-ui-tier="s"] .pst-page .pst-row--ratio .pst-row-label { width: 100%; }
  body[data-ui-tier="s"] .pst-page .pst-seg--ratio { margin-left: 0; }
  body[data-ui-tier="s"] .pst-page .pst-stp-cols { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  body[data-ui-tier="s"] .pst-page .pst-stp-col:first-child { padding-right: 0; }
  body[data-ui-tier="s"] .pst-page .pst-stp-col + .pst-stp-col { border-left: 0; padding-left: 0; }
  body[data-ui-tier="s"] .pst-page .pst-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* the closed side drawer's shadow (responsive.css: 26px 0 70px) darkened this page's left ~80px even while the drawer
   is shut (measured: the active pill read 17% darker at x 20 than at x 56); off while closed, as the drawer opens it returns.
   (A shell-wide fix belongs in responsive.css - flagged to the coordinator.) */
body[data-ui-tier="s"]:has(.pst-page):not(.sb-mobile-open) .sidebar { box-shadow: none; }

/* a short option word (Small, All, None) keeps a 40px-wide tap face */
body[data-ui-tier="s"] .pst-page .pst-seg-btn { min-width: 40px; }