/* Design system components (GTM-331). Classes start with ps-. Values come from ps-tokens.css only:
   no hex colors (tests/ui checks it); the only literals are the few rgba tint mixes of the brand hues noted inline.
   Reference page: /portal/internal/design-system.html (a live example and a usage snippet for every component).
   Rules: platform brief 4.1, docs/design/table-audit.md, design/README.md.
   Layers come from the --ps-layer-* scale: page chrome (rail, bars, header buttons) < drawer < modal < menus < toast < tooltip. */

/* ---------- Visually hidden (still read by screen readers) ---------- */
.ps-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Skip link (portal-nav.js puts it first on every page): hidden until a keyboard user tabs to it */
.ps-skip { position: fixed; left: 12px; top: 12px; z-index: var(--ps-layer-toast); padding: 10px 16px; border-radius: var(--ps-radius-pill); background: var(--ps-color-ink); color: var(--ps-color-white); font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.ps-skip:focus { transform: none; }
.ps-skip, .ps-skip:focus { transition: none; } /* it appears at once, with or without reduced motion */
/* Focus rings for the keyboard only (Sisi, Oct 30): a mouse or touch click never draws a ring, on a field, a frame or a button; Tab and the
   arrow keys bring the ring back, in --ps-focus (a soft ink in light themes, never black). ps-ui.js sets html[data-input] from the last
   pointer press or navigation key. */
html[data-input="pointer"] :focus-visible { outline: none !important; }
html[data-input="pointer"] :is(.ps-search, .ps-tags):has(:focus-visible),
html[data-input="pointer"] :focus-visible :is(.ps-media__thumb) { outline: none !important; }

/* ---------- Language pairs (GTM-331, Oct 9): <span lang="en">…</span><span lang="es">…</span>, any element, either order ----------
   PS.lang sets html[data-lang]; the other half of each pair is hidden. Only a pair hides: an element is hidden when its
   adjacent sibling carries the other language, so a lone lang="es" quote and <html lang> itself always show. Before ps-ui.js
   sets data-lang (or on a page without it) English shows. Browsers without :has() hide the Spanish half by span only. */
html:not([data-lang="es"]) [lang="es"]:is([lang="en"] + *, :has(+ [lang="en"])),
html[data-lang="es"] [lang="en"]:is([lang="es"] + *, :has(+ [lang="es"])) { display: none; }
@supports not selector(:has(+ *)) {
  html:not([data-lang="es"]) [lang="en"] + span[lang="es"], html[data-lang="es"] span[lang="en"] { display: none; }
}

/* ---------- Icon ---------- */
.ps-icon { width: var(--ps-size-icon); height: var(--ps-size-icon); flex: none; fill: currentColor; stroke: none; vertical-align: middle; }   /* Carbon glyphs: solid shapes, no strokes (Oct 13, 2026) */
.ps-icon--sm { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); }
.ps-icon--lg { width: var(--ps-size-icon-lg); height: var(--ps-size-icon-lg); }

/* ---------- Materials: glass for cards, solid for anything floating above them (never glass on glass) ----------
   GTM-337 (Nov 7, Sisi: cards got lost on the page, above all in dark mode): a card is the raised surface (--ps-raise), lighter
   than the page, with its shadow; still no border. */
.ps-glass {
  background: linear-gradient(var(--ps-raise), var(--ps-raise)) padding-box, var(--ps-edge) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: var(--ps-glass-blur); backdrop-filter: var(--ps-glass-blur);
  box-shadow: var(--ps-raise-shadow);
}
.ps-solid { background: var(--ps-pop-bg); box-shadow: var(--ps-pop-shadow); }
/* Loop edge (Sisi, Nov 7, 2026): the menus' Loop Colors (R15) on cards. A band of the whole loop, purple to green, along a glass card's top,
   3px, in both themes; every dashboard card has it (.ps-w, .ps-stepcard), any other glass card takes .ps-loopedge. Inside a loop step
   (an ancestor's data-loop sets --loop), .ps-loopedge--step makes the band that step's color. */
:root { --loop-band: linear-gradient(90deg, color-mix(in srgb, var(--ps-color-loop-know) var(--ps-nav-loop, 100%), transparent), color-mix(in srgb, var(--ps-color-loop-say) var(--ps-nav-loop, 100%), transparent),
    color-mix(in srgb, var(--ps-color-loop-make) var(--ps-nav-loop, 100%), transparent), color-mix(in srgb, var(--ps-color-loop-pub) var(--ps-nav-loop, 100%), transparent),
    color-mix(in srgb, var(--ps-color-loop-meas) var(--ps-nav-loop, 100%), transparent)); --loop-band-h: 3px; }
:is(.ps-loopedge, .ps-w, .ps-stepcard).ps-glass { background: var(--loop-band) border-box top / 100% var(--loop-band-h) no-repeat,
    linear-gradient(var(--ps-glass), var(--ps-glass)) padding-box, var(--ps-edge) border-box; }
.ps-loopedge--step.ps-glass { --loop-band: linear-gradient(var(--loop, var(--ps-color-loop-know)), var(--loop, var(--ps-color-loop-know))); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ps-glass { background: var(--ps-glass-solid); } }
@media (prefers-reduced-transparency: reduce) { .ps-glass { background: var(--ps-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { .ps-glass, .ps-solid { background: var(--ps-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1.5px var(--ps-fg); } }
/* the loop cards keep their band on the solid fallbacks */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :is(.ps-loopedge, .ps-w, .ps-stepcard).ps-glass { background: var(--loop-band) top / 100% var(--loop-band-h) no-repeat, var(--ps-glass-solid); } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :is(.ps-loopedge, .ps-w, .ps-stepcard).ps-glass { background: var(--loop-band) top / 100% var(--loop-band-h) no-repeat, var(--ps-glass-solid); } }

/* ---------- Card ---------- */
.ps-card { position: relative; border-radius: var(--ps-radius-card); padding: var(--ps-space-5); display: flex; flex-direction: column; min-width: 0; color: var(--ps-fg);
  transition: transform var(--ps-dur-base) var(--ps-ease-out), box-shadow var(--ps-dur-base) var(--ps-ease-out), background-color 240ms ease; }
.ps-card__head { display: flex; align-items: center; gap: var(--ps-space-2); margin-bottom: var(--ps-space-4); min-height: 20px; color: var(--ps-fg-2);
  font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; }
.ps-card__title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-card__meta { flex: none; white-space: nowrap; color: var(--ps-fg-3); font-variant-numeric: tabular-nums; }
.ps-card--divided .ps-card__head { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--ps-line); }
.ps-card--accent { background: var(--ps-qa-card); color: var(--ps-color-on-dark); box-shadow: inset 0 0 0 1px var(--ps-qa-edge), 0 10px 28px rgba(13,13,13,.2);
  --ps-fg: var(--ps-color-on-dark); --ps-fg-2: rgba(247,247,247,.8); --ps-fg-3: rgba(247,247,247,.63); --ps-chip: rgba(247,247,247,.07); --ps-line: rgba(247,247,247,.1); }
@media (hover: hover) and (pointer: fine) {
  .ps-card--lift:hover { transform: translateY(-3px); box-shadow: var(--ps-glass-shadow), 0 18px 40px rgba(13,13,13,.12); }
}

/* ---------- The page background layer (moved from ps-base.css, same weight; the website shares it since Oct 10, GTM-331) ---------- */
/* One fixed layer behind everything. Personal page backgrounds were removed on Oct 12, 2026 (GTM-333). The same day Natalia
   asked for the website's wash inside the portal too: in the light theme every portal page sits on it. Since Oct 13 (Sisi,
   GTM-332, "Night Wash") the dark theme has its own night version below: the same loop colors glowing under near-black. */
html:is(.ps-v2, .ps-story) .ps-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-color: var(--ps-page);
}
/* The wash: the loop colors, purple to lime with no warm hues, the website's (Oct 9). Public pages (the website, the waitlist
   intake, the application: html.ps-story or <body class="ps-page">) and, in the light theme, every portal page. */
html.ps-v2 body.ps-page .ps-bg, html.ps-story .ps-bg, html.ps-v2:not([data-theme="dark"]) .ps-bg {
  background-image:
    radial-gradient(42% 46% at 88% 8%, rgba(186, 140, 255, .55), transparent 72%),
    radial-gradient(38% 42% at 58% 26%, rgba(147, 181, 254, .45), transparent 72%),
    radial-gradient(46% 50% at 6% 18%, rgba(111, 211, 255, .38), transparent 72%),
    radial-gradient(44% 48% at 24% 92%, rgba(159, 250, 197, .42), transparent 72%),
    radial-gradient(40% 44% at 92% 88%, rgba(227, 208, 252, .6), transparent 72%),
    radial-gradient(30% 34% at 52% 70%, rgba(230, 253, 177, .5), transparent 72%),
    linear-gradient(160deg, var(--ps-color-greige-warm), var(--ps-color-greige-deep));
  background-size: cover; background-position: center;
  /* soft gradients already, so they ship unblurred: a full-screen filter: blur() cost as much as every card's glass
     together on phones (GTM-337 E2). Only the color grade stays. */
  filter: saturate(var(--ps-bg-sat, .95)) contrast(1.1) brightness(var(--ps-bg-brightness));
}
html.ps-v2 body.ps-page .ps-bg::after, html.ps-story .ps-bg::after, html.ps-v2:not([data-theme="dark"]) .ps-bg::after { content: ""; position: absolute; inset: 0; background: var(--ps-bg-tone); opacity: .4; }
/* in dark the light wash left the color fields murky; a deeper wash keeps them as a glow under near-black */
html.ps-v2[data-theme="dark"] body.ps-page .ps-bg::after { opacity: .78; }
/* Night Wash (Oct 13, 2026, Sisi, GTM-332): the dark theme of the portal and of the website's AI side. The light wash's loop
   colors (lavender, blue, cyan, mint, lime) as low glows under near-black, so the clear glass cards (--ps-glass is white at
   4.5% in dark) take their color from what glows behind them. The website's AI side was plain near-black until then. Other
   public pages (body.ps-page) keep the dimmed light wash above. */
html.ps-story[data-theme="dark"] .ps-bg::after { content: none; }
html.ps-v2[data-theme="dark"] body:not(.ps-page) .ps-bg, html.ps-story[data-theme="dark"] .ps-bg {
  background-image:
    radial-gradient(42% 46% at 88% 8%, rgba(186, 140, 255, .30), transparent 72%),
    radial-gradient(38% 42% at 58% 26%, rgba(130, 168, 254, .16), transparent 72%),
    radial-gradient(46% 50% at 6% 18%, rgba(2, 187, 244, .13), transparent 72%),
    radial-gradient(44% 48% at 24% 92%, rgba(49, 200, 130, .15), transparent 72%),
    radial-gradient(40% 44% at 92% 88%, rgba(186, 140, 255, .18), transparent 72%),
    radial-gradient(30% 34% at 52% 70%, rgba(173, 205, 74, .10), transparent 72%),
    linear-gradient(160deg, var(--ps-color-night-wash-from), var(--ps-color-night-wash-to));
  background-size: cover; background-position: center;
  filter: saturate(.95) contrast(1.05);
}   /* the website's AI side stays its approved near-black; the wash belongs to the light side */

/* ---------- Type helpers (portal and story pages; moved from ps-base.css, same weight): section titles and big figures use
   Bebas, everything else Poppins at 15 / 13 / 10. The website's label caps are a step larger (--story-micro). ---------- */
html:is(.ps-v2, .ps-story) .ps-display { font: 400 var(--ps-type-display)/.95 var(--ps-font-display); letter-spacing: 0; }
html:is(.ps-v2, .ps-story) .ps-section { font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; }
html:is(.ps-v2, .ps-story) .ps-title { font: 500 var(--ps-type-title)/1.35 var(--ps-font-ui); margin: 0; }
/* A section title and the line under it read as one (Natalia, Oct 21): the title keeps no browser margin under it, its subtitle
   sits close under it whatever the stack's gap, and what follows the subtitle gets more room. A card's first title starts flush. */
html:is(.ps-v2, .ps-story) .ps-section:has(+ :is(p, .ps-muted, .ps-lede, .ps-hint, .ps-faint)) { margin-bottom: 0; }
html:is(.ps-v2, .ps-story) .ps-section + :is(p, .ps-muted, .ps-lede, .ps-hint, .ps-faint) { margin-top: calc(var(--ps-space-1) - var(--ps-gap, 0px)); }
html:is(.ps-v2, .ps-story) .ps-section + :is(p, .ps-muted, .ps-lede, .ps-hint, .ps-faint) + * { margin-top: var(--ps-space-2); }
html:is(.ps-v2, .ps-story) .ps-card > .ps-section:first-child { margin-top: 0; }
html:is(.ps-v2, .ps-story) .ps-labelcaps { font: 500 var(--ps-type-label)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
html:is(.ps-v2, .ps-story) .ps-human { font: 400 var(--ps-type-human)/1.05 var(--ps-font-human); }
html.ps-story .ps-labelcaps { font-size: var(--story-micro); }

/* ---------- Figures ---------- */
.ps-big { font: 400 var(--ps-type-number)/1 var(--ps-font-display); letter-spacing: 0; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding-block: .06em; margin-block: -.06em; flex: none; }
.ps-big--sm { font-size: var(--ps-type-number-sm); }
.ps-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: auto; }
.ps-muted { color: var(--ps-fg-2); font-size: var(--ps-type-caption); margin: 0; }
.ps-faint { color: var(--ps-fg-3); font-size: var(--ps-type-caption); }
.ps-meter { display: flex; align-items: center; gap: var(--ps-space-2); min-width: 120px; }
.ps-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--ps-chip); overflow: hidden; }
.ps-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ps-accent-bar); transform-origin: left center; transition: transform 500ms var(--ps-ease-out); }

/* ---------- Buttons: one family; shape and height fixed, only the variant changes ---------- */
.ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ps-space-2); height: var(--ps-size-control); padding: 0 var(--ps-space-4);
  border-radius: var(--ps-radius-pill); border: 0; font: 500 var(--ps-type-control)/1 var(--ps-font-ui); white-space: nowrap; cursor: pointer; text-decoration: none;
  background: var(--ps-glass-strong); color: var(--ps-fg); box-shadow: inset 0 0 0 1px var(--ps-line);
  transition: transform var(--ps-dur-press) var(--ps-ease-out), background-color var(--ps-dur-press) ease, color var(--ps-dur-press) ease; }
.ps-btn:active { transform: scale(var(--ps-press-scale)); }
.ps-btn:disabled, .ps-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
.ps-btn--primary { background: var(--ps-fg); color: var(--ps-page); box-shadow: none; }
.ps-btn--accent { background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none; }
.ps-btn--accent:hover { background: var(--ps-color-sprout-strong); }
.ps-btn--ghost { background: none; box-shadow: none; }
.ps-btn--ghost:hover { background: var(--ps-chip); }
.ps-btn--danger { background: var(--ps-danger-soft); color: var(--ps-danger); box-shadow: none; }
.ps-btn--sm { height: var(--ps-size-control-sm); padding: 0 14px; }
.ps-btn--lg { height: 48px; padding: 0 22px; font-size: var(--ps-type-title); }
/* .ps-btn--tool (Oct 29, Sisi, after Higgsfield's Filter and View): a small quiet button that opens a menu, beside a page's tabs.
   Lighter than the tabs it sits by: no fill until hover or open, the label in fg-2. data-on: a lime dot (a filter is set). */
.ps-btn--tool { height: var(--ps-size-control-sm); padding: 0 var(--ps-space-3); gap: 6px; background: none; box-shadow: none; color: var(--ps-fg-2); font-weight: 400; }
.ps-btn--tool:hover, .ps-btn--tool[aria-expanded="true"] { background: var(--ps-chip); color: var(--ps-fg); }
.ps-btn--tool > .ps-icon { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); }
.ps-btn--tool[data-on]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ps-color-sprout-strong); }
.ps-btn--tool > .ps-icon:last-child:not(:first-child) { order: 1; opacity: .7; }   /* the chevron, after the dot */
@media (pointer: coarse) { .ps-btn--tool { height: var(--ps-size-touch); } }
.ps-btn--icon { width: var(--ps-size-control); padding: 0; }
.ps-btn--icon.ps-btn--sm { width: var(--ps-size-control-sm); }
/* a labelled button that turns into its icon alone on a phone (the page head's Upload; the mobile prototype). Its label
   sits in .ps-btn__label and the button carries the same words as aria-label. */
@media (max-width: 720px) { .ps-btn--icon-phone { width: var(--ps-size-control); padding: 0; } .ps-btn--icon-phone .ps-btn__label { display: none; } }

/* ---------- Pills: one family (Oct 12, 2026, Natalia; design/README.md "Pills: one family") ----------
   Every small label pill has the same metrics, defined here once: --ps-size-pill (22px) tall, micro type in medium, the pill
   radius, --ps-space-2 sides. Members: .ps-badge (status, sentence case: tones below, a .ps-dot inside), .ps-tag (neutral),
   .ps-media__tag (on media: solid, over photos and video), the compact chip toggle (.ps-chips--sm .ps-chip) and two placed
   pills (.ps-bubble__time, .ps-gantt__today). Members change color only. The one other size is .ps-tag--removable (26px,
   caption type: room for its remove button, the tag input's tags). Never define a small pill elsewhere (tests/ui/pills.test.js). */
.ps-badge, .ps-tag, .ps-media__tag, .ps-chips--sm .ps-chip, .ps-bubble__time, .ps-gantt__today {
  display: inline-flex; align-items: center; gap: var(--ps-space-1); height: var(--ps-size-pill); padding: 0 var(--ps-space-2); border-radius: var(--ps-radius-pill);
  font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); letter-spacing: .01em; text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.ps-badge, .ps-tag, .ps-media__tag, .ps-chips--sm .ps-chip, .ps-bubble__time) .ps-icon { width: 12px; height: 12px; }
.ps-badge, .ps-tag { background: var(--ps-chip); color: var(--ps-fg-2); }
.ps-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ps-dot--ring { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }   /* waiting: a hollow ring */
@media (prefers-reduced-motion: no-preference) { .ps-dot--live { animation: ps-dot-live 1.4s ease-in-out infinite; } }   /* working now: a slow pulse */
@keyframes ps-dot-live { 50% { opacity: .3; } }
.ps-badge--ok { background: var(--ps-ok-soft); color: var(--ps-fg); } .ps-badge--ok .ps-dot { background: var(--ps-ok); }
.ps-badge--info { background: var(--ps-info-soft); color: var(--ps-info); }
.ps-badge--warn { background: var(--ps-warn-soft); color: var(--ps-warn); }
.ps-badge--danger { background: var(--ps-danger-soft); color: var(--ps-danger); }
.ps-badge--accent { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-badge--ai { background: var(--ps-agent-bg); color: var(--ps-agent-fg); }   /* lavender: only for AI and agent work */
.ps-badge--human { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
/* Loop badge: one step of the loop (data-step know, say, make, pub, meas or learn) in that step's color, the scroll rail's own tone;
   lime without a step. --lg is the large label (the website's step labels; a <b> number in display type), --num a step number alone. */
.ps-badge--loop { background: var(--badge-loop, var(--ps-color-sprout)); color: var(--ps-color-ink); }
.ps-badge--loop[data-step="know"] { --badge-loop: var(--ps-color-loop-know-rail); } .ps-badge--loop[data-step="say"] { --badge-loop: var(--ps-color-loop-say-rail); }
.ps-badge--loop[data-step="make"] { --badge-loop: var(--ps-color-loop-make-rail); } .ps-badge--loop[data-step="pub"] { --badge-loop: var(--ps-color-loop-pub-rail); }
.ps-badge--loop[data-step="meas"] { --badge-loop: var(--ps-color-loop-meas-rail); } .ps-badge--loop[data-step="learn"] { --badge-loop: var(--ps-color-loop-learn-rail); }
.ps-badge--lg { height: auto; gap: var(--ps-space-2); padding: var(--ps-space-2) var(--ps-space-4); font-size: var(--ps-type-caption); line-height: inherit; letter-spacing: inherit; white-space: normal; }
.ps-badge--lg b { font-family: var(--ps-font-display); font-weight: 400; font-size: calc(var(--ps-type-title) * 1.3); line-height: 1; }
.ps-badge--num { height: auto; padding: 3px 10px 1px; font-family: var(--ps-font-display); font-weight: 400; font-size: .85em; line-height: 1; letter-spacing: inherit; vertical-align: .12em; }
/* On media: the family's pill over a photo or video (media cards, the website's reel label). Solid, never glass on glass (GTM-337 E2). */
.ps-media__tag { background: var(--ps-color-graphite-solid); color: var(--ps-color-on-dark); }
.ps-media__tag--ai { background: var(--ps-color-lavender); color: var(--ps-color-ink); }   /* AI work: lavender, only for AI */
/* Removable: the family's one other size, for a tag with a remove button (PS.tags). Same shape, 26px, caption type. */
.ps-tag--removable { height: var(--ps-size-pill-removable); gap: 2px; max-width: 100%; color: var(--ps-fg); font-weight: 400; font-size: var(--ps-type-caption); }
.ps-tag--removable > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-tag--removable button { width: 20px; height: 20px; flex: none; margin-right: -5px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ps-fg-3); cursor: pointer; display: grid; place-items: center; }
.ps-tag--removable button:hover { background: var(--ps-line); color: var(--ps-fg); }
/* Asset type (Oct 12, 2026, Natalia): each type has its own vibrant color (tokens --ps-asset-*): Video magenta, Image cyan,
   Audio green, Logo blue, Typography orange. The text on it is --ps-asset-*-on: white on the dark ones (magenta, blue), ink
   on the light ones, 5:1 or more. Lavender stays AI only, lime stays the selected option. There is no Copy type (Oct 12).
   <span class="ps-tag ps-tag--type" data-type="video">Video</span>; over a photo: class="ps-media__tag ps-tag--type".
   In a filter chip, a dot of the same color: <span class="ps-dot ps-dot--type" data-type="video"></span>. */
.ps-tag--type { background: var(--ps-asset, var(--ps-chip)); color: var(--ps-asset-on, var(--ps-color-ink)); }
.ps-dot--type { background: var(--ps-asset, var(--ps-fg-3)); box-shadow: 0 0 0 1px var(--ps-line); }
:is(.ps-tag--type, .ps-dot--type, .ps-thumb--type)[data-type="video"] { --ps-asset: var(--ps-asset-video); --ps-asset-on: var(--ps-asset-video-on); }
:is(.ps-tag--type, .ps-dot--type, .ps-thumb--type)[data-type="image"] { --ps-asset: var(--ps-asset-image); --ps-asset-on: var(--ps-asset-image-on); }
:is(.ps-tag--type, .ps-dot--type, .ps-thumb--type)[data-type="audio"] { --ps-asset: var(--ps-asset-audio); --ps-asset-on: var(--ps-asset-audio-on); }
:is(.ps-tag--type, .ps-dot--type, .ps-thumb--type)[data-type="logo"] { --ps-asset: var(--ps-asset-logo); --ps-asset-on: var(--ps-asset-logo-on); }
:is(.ps-tag--type, .ps-dot--type, .ps-thumb--type)[data-type="typography"] { --ps-asset: var(--ps-asset-typography); --ps-asset-on: var(--ps-asset-typography-on); }

/* ---------- Fields ---------- */
.ps-field { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }   /* on the spacing scale (B-13: was 6px) */
.ps-label { font: 500 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-2); }
/* Field wells (Sisi, Nov 7, 2026): every field is a soft fill with no outline, its text 12px (--ps-type-input), so a value reads as an answer
   in a box and its label above stays the question. Read-only values are plain text, never a well. Typing shows a thin edge, the keyboard ring stays. */
.ps-input { height: 36px; width: 100%; box-sizing: border-box; padding: 0 12px; border-radius: var(--ps-radius-control); border: 0; background: var(--ps-field);
  box-shadow: none; color: var(--ps-fg); font: 400 var(--ps-type-input)/1.4 var(--ps-font-ui); outline: none; transition: background-color var(--ps-dur-base) var(--ps-ease-out); }
.ps-input:hover { background: var(--ps-field-hover); }
.ps-input::placeholder { color: var(--ps-fg-3); opacity: 1; }
.ps-input:focus { background: var(--ps-field-hover); box-shadow: inset 0 0 0 1px var(--ps-focus); }   /* a thin edge where you type, never a bold black box (Sisi, Oct 30) */
.ps-input:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
textarea.ps-input { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
/* 12px on touch screens too (Nov 7); iOS focus zoom is stopped by the viewport rule in ps-ui.js, not by a 16px font (Oct 12, 2026) */
.ps-input--auto { height: auto; min-height: 36px; padding: 9px 12px; }
/* the public pages (the website: html.ps-story; the intake and the application: body.ps-page) keep their approved fields (Oct 9 look):
   the wells are the portal's. :where keeps these as light as .ps-input, so a component's own field rules still win there. */
:where(html.ps-story, body.ps-page) .ps-input { height: 42px; padding: 0 14px; background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); font-size: var(--ps-type-body); }
:where(html.ps-story, body.ps-page) .ps-input:hover { background: var(--ps-glass-strong); }
:where(html.ps-story, body.ps-page) .ps-input:focus { background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-focus); }
:where(html.ps-story, body.ps-page) textarea.ps-input, :where(html.ps-story, body.ps-page) .ps-input--auto { height: auto; padding: 10px 14px; }
:where(html.ps-story, body.ps-page) .ps-input--auto { min-height: 42px; }
@media (pointer: coarse) { :where(html.ps-story, body.ps-page) .ps-input { font-size: var(--ps-type-field); } }
:where(html.ps-story, body.ps-page) .ps-tags { min-height: 42px; padding: 6px 8px; background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); font-size: inherit; }
:where(html.ps-story, body.ps-page) .ps-search { background: var(--ps-chip); font-size: inherit; }   /* a box that grows with what it shows: a read-only value, an app preview */
.ps-hint { font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.ps-field--error .ps-input { box-shadow: inset 0 0 0 1.5px var(--ps-danger); }
.ps-field--error .ps-hint { color: var(--ps-danger); }
.ps-switch { position: relative; width: 44px; height: 26px; border-radius: var(--ps-radius-pill); border: 0; padding: 0; background: var(--ps-chip); box-shadow: inset 0 0 0 1px var(--ps-line); cursor: pointer; }
.ps-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ps-color-white); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--ps-dur-base) var(--ps-ease-out), background-color var(--ps-dur-base) ease; }
.ps-switch[aria-checked="true"] { background: var(--ps-color-sprout-strong); }
.ps-switch[aria-checked="true"]::after { transform: translateX(18px); }

/* ---------- Tabs with a sliding indicator (ps-ui.js moves .ps-tabs__ind) ---------- */
.ps-tabs { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--ps-line); margin-bottom: 14px; }
.ps-tabs [role="tab"] { border: 0; background: none; padding: 10px 12px; min-height: var(--ps-size-touch); font: 400 var(--ps-type-control)/1 var(--ps-font-ui); color: var(--ps-fg-2); cursor: pointer; }
.ps-tabs [role="tab"][aria-selected="true"] { color: var(--ps-fg); }
.ps-tabs__ind { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; border-radius: 2px; background: var(--ps-fg); transition: transform var(--ps-dur-move) var(--ps-ease-in-out), width var(--ps-dur-move) var(--ps-ease-in-out); }

/* ---------- Popovers and menus: grow from their trigger, leave the same way ---------- */
.ps-pop { opacity: 0; transform: scale(.96); visibility: hidden; pointer-events: none;
  transition: opacity var(--ps-dur-pop) var(--ps-ease-out), transform var(--ps-dur-pop) var(--ps-ease-out), visibility 0s linear var(--ps-dur-pop); }
.ps-pop.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.ps-menu { min-width: 180px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 6px; border-radius: var(--ps-radius-card); display: flex; flex-direction: column; background: var(--ps-pop-bg); box-shadow: var(--ps-pop-shadow); z-index: var(--ps-layer-menu); }
.ps-menu [role="menuitem"] { border: 0; background: none; display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: var(--ps-radius-small); font: 400 var(--ps-type-control)/1.3 var(--ps-font-ui); color: var(--ps-fg); text-align: left; cursor: pointer; }
.ps-menu [role="menuitem"]:hover, .ps-menu [role="menuitem"]:focus-visible { background: var(--ps-chip); outline: none; }
.ps-menu [role="menuitem"].is-current { background: var(--ps-color-sprout); color: var(--ps-color-ink); font-weight: 500; }   /* the one on now (a head's tabs, Oct 31) */
.ps-menu .ps-danger { color: var(--ps-danger); }
.ps-menu__sep { height: 1px; background: var(--ps-line); margin: 6px 4px; }

/* ---------- Pick menus (Sisi, Oct 30; like Higgsfield's): compact on desktop. A row is a small icon tile (or an aspect ratio's outline), the
   name, one line under it and a check on the current one; never tag chips. .ps-menu--pick is the menu (narrow for short lists like the
   aspect ratio); the Studio's own menu container (.gs-pop) uses the same rows. Phones keep their bottom sheets and touch-sized rows.
   Markup: <div class="ps-menu ps-menu--pick" role="menu"><div class="ps-menu__search"><svg…/><input type="search" aria-label="Search models"></div>
           <div class="ps-menu__label">Featured</div>
           <button class="ps-opt" role="menuitemradio" aria-checked="true"><span class="ps-opt__tile">…</span><span class="ps-opt__main">
           <span class="ps-opt__title">Kling 3.0</span><span class="ps-opt__desc">Cinematic motion, 3 to 15 s</span></span><svg class="ps-opt__check"…/></button></div>
   An aspect ratio: <span class="ps-opt__shape"><i data-box="11x20"></i></span> in place of the tile. ---------- */
.ps-menu--pick { width: min(320px, calc(100vw - 16px)); padding: 4px; }
.ps-menu--narrow { width: min(208px, calc(100vw - 16px)); }
.ps-menu__label { padding: 8px 8px 4px; font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-menu__search { display: flex; align-items: center; gap: var(--ps-space-2); height: 40px; padding: 0 var(--ps-space-2); margin-bottom: var(--ps-space-1); box-shadow: 0 1px 0 var(--ps-line); color: var(--ps-fg-3); }
.ps-menu__search svg { flex: none; width: 16px; height: 16px; }
.ps-menu__search input { flex: 1; min-width: 0; height: 32px; padding: 0; border: 0; background: none; color: var(--ps-fg); font: 400 var(--ps-type-control)/1.3 var(--ps-font-ui); }
.ps-menu__search input:is(:focus, :focus-visible) { outline: none; box-shadow: none; }   /* the caret shows where you type; no box */
.ps-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 8px; border: 0; border-radius: var(--ps-radius-small); background: none;
  color: var(--ps-fg); text-align: left; cursor: pointer; font: 400 var(--ps-type-control)/1.3 var(--ps-font-ui); }
.ps-opt:hover, .ps-opt[aria-checked="true"], .ps-opt[aria-selected="true"] { background: var(--ps-chip); }
.ps-opt:focus-visible { background: var(--ps-chip); outline: 2px solid var(--ps-focus); outline-offset: -2px; }
.ps-opt:disabled { opacity: .4; cursor: not-allowed; }
.ps-opt__tile { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--ps-radius-small); background: var(--ps-chip); color: var(--ps-fg-2); }
.ps-opt__tile :is(svg, .ps-icon) { width: 16px; height: 16px; }
.ps-opt__shape { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--ps-fg-2); }
.ps-opt__shape i { display: block; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 3px; }
.ps-opt__shape i:not([data-box]) { width: 14px; height: 14px; }   /* a square; the Studio sizes its shapes from data-box */
.ps-opt__shape .ps-shape--tall { width: 11px; height: 20px; }
.ps-opt__shape .ps-shape--wide { width: 20px; height: 11px; }
.ps-opt__shape .ps-shape--auto { border-style: dashed; }
.ps-opt__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ps-opt__title { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.ps-opt__title .ps-badge { flex: none; }
.ps-opt__desc { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.ps-opt__check { flex: none; width: 16px; height: 16px; color: var(--ps-accent-stroke); }
@media (max-width: 600px) {   /* phones: the rows stay touch-sized inside their bottom sheet */
  .ps-opt { min-height: var(--ps-size-touch); padding: 8px 10px; }
  .ps-opt__tile { width: 36px; height: 36px; }
}
/* Every dropdown in the portal, one compact size on desktop (Sisi, Oct 30: "applied to all of the drop downs throughout the entire portal,
   not just Studio"): the design system's menus (.ps-menu, .ps-opt, .ps-listbox for comboboxes), the custom <select> (.ps-select-item) and
   the "+" and kebab menus (.bn-menu-item), the time tracker's picker, the AI field's model menu (.psaf-opt), the Reviewer's guides and
   comment menus and the Studio's (.gs-pop). Rows are 32 px (40 px with a line under the name), a 24 px tile; the box keeps 4 px of room.
   Phones (600 px and under) keep their touch-sized rows and sheets. A new dropdown uses .ps-menu with .ps-opt rows and gets this for free. */
@media (min-width: 601px) {
  html.ps-v2 :is(.ps-menu, .ps-listbox, .psaf-menu, .rv-guides-menu, .comment-menu, .gs-pop, .kebab-menu, #new-item-menu, .ps-select-panel, .tt-picker-panel) { padding: 4px; }
  html.ps-v2 :is(.ps-menu [role^="menuitem"], .ps-opt, .ps-listbox [role="option"], .bn-menu-item, .tt-picker-row, .tt-picker-add, .psaf-opt, .rv-guides-option, .comment-menu-option) {
    min-height: 30px; padding: 4px 8px; gap: 8px; border-radius: var(--ps-radius-small); font-size: var(--ps-type-menu); line-height: 1.3; }
  html.ps-v2 .ps-opt__main { gap: 0; }
  /* the type (Sisi, Oct 30: "the font size, specially in desktop, needs to decrease"): names at --ps-type-menu (12), the line under at --ps-type-menu-line (11) */
  html.ps-v2 :is(.ps-opt__desc, .ps-listbox [role="option"] small, .ps-menu__label, .psaf-o-sub) { font-size: var(--ps-type-menu-line); }
  html.ps-v2 .ps-menu__search input { font-size: var(--ps-type-menu); }
  html.ps-v2 .ps-opt__tile { width: 24px; height: 24px; border-radius: var(--ps-radius-small); }
  html.ps-v2 .ps-opt__tile :is(svg, .ps-icon) { width: 14px; height: 14px; }
  html.ps-v2 .ps-opt__shape { width: 18px; height: 18px; }
  html.ps-v2 .ps-opt__check { width: 14px; height: 14px; }
  html.ps-v2 .ps-menu__search { height: 34px; margin-bottom: 2px; }
  html.ps-v2 .ps-menu__label { padding: 6px 8px 2px; }
  html.ps-v2 .ps-menu__sep { margin: 4px; }
}

/* ---------- Tables (docs/design/table-audit.md) ---------- */
.ps-tcard { border-radius: var(--ps-radius-card); overflow: hidden; }
.ps-tcard__head { display: flex; align-items: center; gap: var(--ps-space-3); flex-wrap: wrap; padding: var(--ps-space-4) var(--ps-space-5); border-bottom: 1px solid var(--ps-line); }
.ps-tcard__head h2, .ps-tcard__head h3 { margin: 0 auto 0 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); }
.ps-tcard__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ps-space-3); padding: 12px var(--ps-space-5); border-top: 1px solid var(--ps-line); font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.ps-twrap { overflow: auto; max-height: 440px; }
.ps-table { width: 100%; border-collapse: collapse; font: 400 var(--ps-type-control)/1.4 var(--ps-font-ui); color: var(--ps-fg); }
.ps-table th { position: sticky; top: 0; z-index: var(--ps-layer-sticky); background: var(--ps-glass-solid); text-align: left; white-space: nowrap; padding: 12px 16px; border-bottom: 1px solid var(--ps-line);
  font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); transition: box-shadow 160ms ease; }
.ps-table td { padding: 12px 16px; border-bottom: 1px solid var(--ps-line); vertical-align: middle; font-variant-numeric: tabular-nums; transition: background-color 120ms ease; }
.ps-table tbody tr:last-child td { border-bottom: 0; }
.ps-num { font-variant-numeric: tabular-nums; }
.ps-table .ps-num { text-align: right; }
.ps-table tbody tr:hover td { background: var(--ps-chip); }
.ps-table tr.is-open td { background: rgba(230, 253, 177, .16); }
.ps-table tr.is-open td:first-child { box-shadow: inset 2px 0 0 var(--ps-color-sprout-strong); }
.ps-twrap.is-scrolled-y th { box-shadow: 0 1px 0 var(--ps-line), 0 8px 14px -10px rgba(13,13,13,.35); }
.ps-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; border-radius: 6px; }
.ps-sort::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.3px 1.3px 0; transform: translateY(-2px) rotate(45deg); opacity: 0; transition: opacity 160ms ease, transform 200ms var(--ps-ease-out); }
.ps-sort:hover::after { opacity: .5; }
.ps-sort:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 3px; }
th[aria-sort] .ps-sort { color: var(--ps-fg); }
th[aria-sort] .ps-sort::after { opacity: 1; }
th[aria-sort="ascending"] .ps-sort::after { transform: translateY(1px) rotate(-135deg); }
th.ps-num .ps-sort { flex-direction: row-reverse; }
.ps-kebab { width: 32px; height: 32px; border: 0; border-radius: 10px; background: none; color: var(--ps-fg-2); display: inline-grid; place-items: center; position: relative; cursor: pointer; }
.ps-kebab:hover, .ps-kebab[aria-expanded="true"] { background: var(--ps-chip); color: var(--ps-fg); }
.ps-table mark, .ps-mark { background: rgba(212, 245, 138, .7); color: inherit; border-radius: 3px; padding: 0 1px; }
@keyframes ps-flash { from { background: rgba(212, 245, 138, .45); } to { background: transparent; } }
.ps-table tr.is-flash td { animation: ps-flash 1.4s var(--ps-ease-out); }

/* ---------- States: loading, empty, error ---------- */
.ps-skel { border-radius: 10px; background: var(--ps-chip); animation: ps-skel 1.2s ease-in-out infinite; }
@keyframes ps-skel { 50% { opacity: .45; } }
.ps-state { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 0; }
.ps-state .ps-human { font-size: 26px; margin: 0; }
.ps-state b { font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); }
.ps-state__err { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ps-danger-soft); color: var(--ps-danger); }

/* ---------- Toast: slides up, leaves the same way; icon chip per category, lavender for AI ---------- */
/* Celebrate (PS.celebrate, Oct 11): fireworks drawn on a canvas over the page; decoration only, never in the way */
.ps-celebrate { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--ps-layer-celebrate); }
.ps-toast { position: fixed; left: 50%; bottom: 24px; z-index: var(--ps-layer-toast); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: var(--ps-radius-pill);
  background: var(--ps-color-graphite); color: var(--ps-color-on-dark); font: 400 var(--ps-type-control)/1.3 var(--ps-font-ui); box-shadow: inset 0 0 0 1px rgba(247,247,247,.08), 0 12px 30px rgba(13,13,13,.25);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transform: translate(-50%, calc(100% + 32px)); opacity: 0; visibility: hidden;
  transition: transform 260ms var(--ps-ease-out), opacity 260ms var(--ps-ease-out), visibility 0s linear 260ms; }
.ps-toast.is-open { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
.ps-toast__ico { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(230,253,177,.14); color: var(--ps-color-sprout); }
.ps-toast__ico.is-ai { background: rgba(186,140,255,.22); color: var(--ps-color-lavender-on-dark); }
.ps-toast__ico.is-error { background: color-mix(in srgb, var(--ps-danger) 26%, transparent); color: var(--ps-color-on-dark); }
.ps-toast__msg { white-space: pre-line; max-height: 40vh; overflow: auto; }
.ps-toast button { border: 0; background: rgba(247,247,247,.1); color: var(--ps-color-sprout); font: 500 var(--ps-type-control)/1 var(--ps-font-ui); height: 30px; padding: 0 12px; border-radius: var(--ps-radius-pill); cursor: pointer; }
@media (max-width: 768px) { .ps-toast { bottom: calc(14px + 60px + 16px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 28px); } }

/* ---------- Drawer: detail from the right; the page behind dims ---------- */
.ps-scrim { position: fixed; inset: 0; z-index: var(--ps-layer-drawer-scrim); background: var(--ps-color-scrim); opacity: 0; transition: opacity 260ms var(--ps-ease-drawer); }
.ps-scrim.is-open { opacity: 1; }
/* box-sizing (Oct 27, Sisi): the width includes the padding, so on a phone the drawer fits between its 12px margins (it was 48px
   wider than the screen allows and ran off the left edge); the desktop widths keep the size they always drew at */
.ps-drawer { position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: var(--ps-layer-drawer); box-sizing: border-box; width: min(468px, calc(100% - 24px)); border-radius: var(--ps-radius-card); padding: var(--ps-space-5);
  display: flex; flex-direction: column; gap: var(--ps-space-4); overflow: auto; background: var(--ps-pop-bg); box-shadow: var(--ps-pop-shadow);
  transform: translateX(calc(100% + 24px)); transition: transform 300ms var(--ps-ease-drawer); }
.ps-drawer.is-open { transform: none; }
.ps-drawer__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ps-line); }
.ps-drawer__head .ps-section { margin: 6px 0 0; }
.ps-kv { display: grid; grid-template-columns: 120px 1fr; gap: 12px 16px; margin: 0; align-items: center; }
.ps-kv dt { font: 500 var(--ps-type-label)/1.4 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-kv dd { margin: 0; min-width: 0; }
.ps-kv--tight { grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; }   /* short keys */
.ps-drawer--lg { width: min(608px, calc(100% - 24px)); }   /* a record with several areas (PS.drawer.open({ size: 'lg' })) */
.ps-drawer--xl { width: min(1028px, calc(100% - 24px)); }   /* a record laid out like the Account page: key facts, then two columns of cards (size: 'xl') */

/* ---------- Record: one person or thing in a drawer, in distinct areas (Oct 12, 2026; first: the CRM contact) ----------
   A hero (avatar, who, status, quick actions), then one .ps-record__section per area: a tinted block with its own heading row
   (icon, label, an optional action on the right). A timeline is .ps-activity (not .ps-timeline: that is the video player's scrub bar). */
.ps-record { display: flex; flex-direction: column; gap: var(--ps-space-4); container: ps-record / inline-size; }
.ps-record__hero { display: flex; align-items: center; gap: var(--ps-space-4); flex-wrap: wrap; }
.ps-record__hero .ps-avatar { width: 64px; height: 64px; font: 400 var(--ps-type-section)/1 var(--ps-font-display); }
.ps-record__who { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ps-record__who small { color: var(--ps-fg-3); font-size: var(--ps-type-caption); overflow-wrap: anywhere; }
.ps-record__actions { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
/* Oct 26: each area is a card like the Account page's (glass, a hairline edge, a caps head with its count), in two columns
   (.ps-record__cols: what they are on the left, what to do on the right) that stack when the record is narrow. */
.ps-record__section { display: flex; flex-direction: column; gap: var(--ps-space-3); padding: var(--ps-space-5); min-width: 0; border-radius: var(--ps-radius-card);
  background: var(--ps-glass); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-record__section > .ps-card__head { margin-bottom: 0; }
.ps-record__section .ps-fact { grid-template-columns: minmax(0, 8em) minmax(0, 1fr) auto; }
.ps-record__cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--ps-space-4); align-items: start; }
.ps-record__col { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; }
@container ps-record (max-width: 680px) { .ps-record__cols { grid-template-columns: minmax(0, 1fr); } }
.ps-record__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-2); min-height: 28px; }
.ps-record__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 500 var(--ps-type-label)/1.3 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-2); }
.ps-record__title .ps-icon { width: 16px; height: 16px; color: var(--ps-fg-3); }
.ps-record__section .ps-kv { grid-template-columns: 104px minmax(0, 1fr); gap: 10px 14px; }
.ps-record__section .ps-input, .ps-record__section textarea.ps-input { box-sizing: border-box; }   /* its padding stays inside the card (it ran 28px over, Nov 5) */
.ps-record__section p { margin: 0; }
/* A record as a small dashboard (Nov 7, Sisi: "more like a dashboard … depth, colors, outlines"): the dashboard's widget cards
   (.ps-w, glass with the lavender-to-lime edge, the dark accent tile, Bebas figures, meters, tone badges) on a sunk page-colored
   sheet (.ps-wdash--sheet) inside a drawer or a window. .ps-wstats: a row of stat tiles (PS.statTile), two by two on a phone. */
.ps-wdash--sheet { display: flex; flex-direction: column; gap: var(--ps-space-5); padding: var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-page); }
.ps-wdash--sheet .ps-w { padding: var(--ps-space-5); }
.ps-wdash--sheet .ps-w__body { gap: var(--ps-space-3); }
.ps-wdash--sheet .ps-w--div .ps-w__head { margin-bottom: var(--ps-space-3); }
.ps-wstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--ps-space-4); }
.ps-wstat { gap: var(--ps-space-1); }
.ps-wstat .ps-w__head { margin-bottom: var(--ps-space-3); }
.ps-wstat .ps-stat { margin-top: 0; }
.ps-wstat .ps-big { font-size: var(--ps-type-number-sm); white-space: normal; overflow: visible; overflow-wrap: break-word; }   /* a long figure wraps at a space, never an ellipsis */
.ps-wstat .ps-meter { display: flex; width: 100%; margin-top: var(--ps-space-3); min-width: 0; }
.ps-wstat .ps-bar { display: block; flex: 1 1 auto; height: 6px; }
.ps-wstat__badge { margin-top: var(--ps-space-3); }
.ps-wstat__badge .ps-badge .ps-icon { width: 12px; height: 12px; }   /* Concierge: a star on the Plan tile's lime badge */
/* Phones (Nov 7, Sisi: "cramped … the type is a little too big"): the window is the sheet (no inset frame eating the width), the
   cards keep their glass, edge and shadow with 12px of air between them, and the figures step down to 24px with 12px captions. */
@media (max-width: 720px) {
  .ps-wdash--sheet { padding: 0; gap: var(--ps-space-3); background: none; }
  .ps-wdash--sheet .ps-w { padding: var(--ps-space-4); }
  .ps-wdash--sheet .ps-w--div .ps-w__head { margin-bottom: var(--ps-space-2); }
  .ps-wstats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-3); }
  .ps-wstat .ps-w__head { margin-bottom: var(--ps-space-2); }
  .ps-wstat .ps-big { font-size: calc(var(--ps-type-section) * .75); }
  .ps-wstat .ps-muted { font-size: var(--ps-type-menu); line-height: 1.4; }
  .ps-wstat .ps-meter, .ps-wstat__badge { margin-top: var(--ps-space-2); }
}
/* Nov 7 (Sisi, GTM-434: the subscriber windows were "very plain … not easy to read"): a record's facts edited in place in a table
   (.ps-table--facts: the label is the row's header, quiet and unboxed; the value, its editor cell) and a facts list in two
   columns when the record is wide (.ps-facts__list--cols). */
.ps-table--facts { table-layout: fixed; }
.ps-table--facts th[scope="row"] { position: static; width: 38%; padding: 12px 16px 12px 0; background: none; white-space: normal; vertical-align: middle;
  font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); letter-spacing: 0; text-transform: none; color: var(--ps-fg-2); }
.ps-table--facts td { padding: 8px 0; overflow-wrap: anywhere; }
.ps-table--facts td.cell-editable { padding-inline: 8px; border-radius: var(--ps-radius-small); cursor: pointer; }
.ps-table--facts tbody tr:hover td { background: none; }
.ps-table--facts tbody tr:hover td.cell-editable { background: var(--ps-chip); }
.ps-table--facts tbody tr:last-child th { border-bottom: 0; }
.ps-facts__list.ps-facts__list--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ps-space-6); }
.ps-facts__list--cols > .ps-fact:nth-child(2) { border-top: 0; padding-top: 0; } .ps-facts__list--cols > .ps-fact { align-content: start; }
@container ps-record (max-width: 680px) { .ps-facts__list.ps-facts__list--cols { grid-template-columns: minmax(0, 1fr); } .ps-facts__list--cols > .ps-fact:nth-child(2) { border-top: 1px solid var(--ps-line); padding-top: var(--ps-space-3); } }
.ps-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ps-activity__item { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--ps-space-3); padding-bottom: var(--ps-space-3); }
.ps-activity__item::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; border-radius: 1px; background: var(--ps-line); }
.ps-activity__item:last-child { padding-bottom: 0; }
.ps-activity__item:last-child::before { display: none; }
.ps-activity__dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--ps-fg-3); box-shadow: 0 0 0 3px var(--ps-chip); }
.ps-activity__dot.is-ok { background: var(--ps-ok); } .ps-activity__dot.is-info { background: var(--ps-info); }
.ps-activity__dot.is-warn { background: var(--ps-warn); } .ps-activity__dot.is-danger { background: var(--ps-danger); } .ps-activity__dot.is-ai { background: var(--ps-color-lavender); }
.ps-activity__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; font: 400 var(--ps-type-control)/1.45 var(--ps-font-ui); overflow-wrap: anywhere; }
.ps-activity__body small { color: var(--ps-fg-3); font-size: var(--ps-type-caption); }

/* ---------- Notification item ---------- */
.ps-ni { display: flex; gap: 10px; padding: 10px 8px; border-radius: 12px; font: 400 var(--ps-type-control)/1.4 var(--ps-font-ui); color: var(--ps-fg); }
.ps-ni + .ps-ni { border-top: 1px solid var(--ps-line); border-radius: 0; }
.ps-ni small { display: block; color: var(--ps-fg-3); font-size: var(--ps-type-caption); }
.ps-ni__ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ps-chip); color: var(--ps-fg); }
.ps-ni__ico.is-ai { background: var(--ps-agent-bg); color: var(--ps-agent-fg); }

/* ---------- Widget grid (GTM-334; assets/ps-widgets.js, the prototype's grid) ----------
   12 columns, 6 on mid widths, 2 on phones, measured on the dashboard itself (container query), so the
   collapsed or open menu doesn't change which layout applies. Rows grow with their content. */
.ps-wdash { container: ps-dash / inline-size; --w-sheen: rgba(255,255,255,.6); --w-rim: rgba(255,255,255,1); }
:root[data-theme="dark"] .ps-wdash { --w-sheen: rgba(247,247,247,.12); --w-rim: rgba(247,247,247,.75); }
.ps-wtop { display: flex; align-items: center; justify-content: flex-end; gap: var(--ps-space-3); flex-wrap: wrap; margin-bottom: var(--ps-space-4); }
.ps-wtop__lead { margin-right: auto; min-width: 0; max-width: 100%; }
.ps-wtop__lead:empty { display: none; }
/* the bar is empty once Edit Layout moved into the page header (GTM-337) and nothing leads it */
.ps-wtop:not(:has([data-w-edit])):has(> .ps-wtop__lead:empty) { display: none; }
[data-w-edit][aria-pressed="true"] { background: var(--ps-fg); color: var(--ps-page); box-shadow: none; }
.ps-wedit { display: none; align-items: center; gap: var(--ps-space-2); flex-wrap: wrap; margin: 0 0 var(--ps-space-4); padding: 10px 12px 10px 16px; border-radius: var(--ps-radius-card); }
.ps-wdash.is-editing .ps-wedit { display: flex; }
.ps-wedit p { margin: 0 auto 0 0; flex: 1 1 260px; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-wgrid { display: grid; grid-template-columns: repeat(var(--ps-grid-columns), minmax(0, 1fr)); grid-auto-rows: minmax(var(--ps-grid-row-min), auto); gap: var(--ps-grid-gap); grid-auto-flow: dense; position: relative; }
.ps-w { position: relative; border-radius: var(--ps-radius-card); padding: var(--ps-space-5); display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--ps-fg);
  transition: background-color 240ms ease, color 240ms ease, box-shadow var(--ps-dur-base) var(--ps-ease-out), transform var(--ps-dur-base) var(--ps-ease-out); }
.ps-w.s-xs { grid-column: span 2; }
.ps-w.s-s { grid-column: span 3; }
.ps-w.s-m { grid-column: span 4; }
.ps-w.s-w { grid-column: span 6; }
.ps-w.s-t { grid-column: span 3; grid-row: span 2; }
.ps-w.s-l { grid-column: span 6; grid-row: span 2; }
.ps-w.s-f { grid-column: 1 / -1; }
.ps-w.s-xs .ps-w__meta { display: none; }
@container ps-dash (max-width: 1000px) and (min-width: 721px) {
  .ps-wgrid { grid-template-columns: repeat(var(--ps-grid-columns-mid), minmax(0, 1fr)); }
  .ps-w.s-xs { grid-column: span 2; } .ps-w.s-s, .ps-w.s-m, .ps-w.s-t { grid-column: span 3; } .ps-w.s-w, .ps-w.s-l { grid-column: span 6; }
}
@container ps-dash (max-width: 720px) {
  .ps-wgrid { grid-template-columns: repeat(var(--ps-grid-columns-phone), minmax(0, 1fr)); grid-auto-rows: minmax(var(--ps-grid-row-min-phone), auto); gap: var(--ps-grid-gap-phone); }
  .ps-w { padding: var(--ps-space-4); }
  .ps-w.s-xs, .ps-w.s-s, .ps-w.s-m { grid-column: span 1; }
  .ps-w.s-w, .ps-w.s-f { grid-column: span 2; }
  .ps-w.s-t { grid-column: span 1; grid-row: span 2; }
  .ps-w.s-l { grid-column: span 2; grid-row: span 2; }
  .ps-w__head { margin-bottom: var(--ps-space-3); }
  .ps-w .ps-big { font-size: var(--ps-type-number-phone); }
  .ps-wquick { gap: 6px; }
  .ps-wqa { padding: 10px 2px; font-size: var(--ps-type-micro); }
  .ps-wring { width: 70px; height: 70px; }
}
/* Head: icon, one-line title, meta like "4 OPEN" or "WK 41"; hairline under it on list cards */
.ps-w__head { display: flex; align-items: center; gap: var(--ps-space-2); margin-bottom: var(--ps-space-4); min-height: 20px; color: var(--ps-fg-2);
  font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; position: relative; z-index: 1; }
.ps-w__title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-w__meta { flex: none; white-space: nowrap; color: var(--ps-fg-3); font-variant-numeric: tabular-nums; }
.ps-w__live { display: inline-flex; align-items: center; gap: 5px; color: var(--ps-fg-2); }
.ps-w__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ps-color-lavender); box-shadow: 0 0 0 3px var(--ps-agent-bg); }
.ps-w--ai .ps-w__head > .ps-icon { color: var(--ps-agent-fg); }
.ps-w--div .ps-w__head { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--ps-line); }
.ps-w__body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; z-index: 1; }
.ps-w .ps-stat + .ps-wrow { margin-top: var(--ps-space-3); }
.ps-w .ps-stat .ps-muted { margin: 0; }
/* Lists inside cards */
.ps-wlist { display: flex; flex-direction: column; gap: var(--ps-space-4); min-height: 0; overflow: hidden; }
.ps-w--div .ps-wlist { gap: 0; }
.ps-w--div .ps-wlist > .ps-wrow { padding-block: 6px; }
.ps-w--div .ps-wlist > * + * { border-top: 1px solid var(--ps-line); }
.ps-wrow { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
button.ps-wrow { width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }   /* a row that opens something on the page (the CRM's cards) */
button.ps-wrow:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-wrow .ps-wt { min-width: 0; flex: 1; }
.ps-wrow .ps-wt b { display: block; font-weight: 500; font-size: var(--ps-type-title); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-wrow .ps-wt small { display: flex; align-items: center; gap: 4px; font-size: var(--ps-type-caption); margin-top: 2px; color: var(--ps-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-wrow .ps-bar { margin-top: 6px; }
.ps-wrow > .ps-badge { flex: none; }
.ps-wthumb { width: 38px; height: 38px; border-radius: 11px; flex: none; object-fit: cover; background: var(--ps-chip); display: grid; place-items: center; color: var(--ps-fg-3); }
.ps-wthumb--sm { width: 32px; height: 32px; border-radius: 9px; }
.ps-wthumb { position: relative; overflow: hidden; }
.ps-wthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ps-wlinks .ps-wrow { min-height: var(--ps-size-touch); }
.ps-wlinks--row { flex-direction: row; gap: var(--ps-space-3); margin-top: auto; }
.ps-w--div .ps-wlinks--row > * + *, .ps-wlinks--row > * + * { border-top: 0; }
.ps-wlinks--row .ps-wrow { flex: 1 1 0; flex-direction: column; align-items: flex-start; padding: 12px; border-radius: 16px; background: var(--ps-chip); }
.ps-wlinks--row .ps-wrow > .ps-icon { display: none; }
.ps-wlinks--icons { display: flex; gap: var(--ps-space-2); flex-wrap: wrap; margin-top: auto; }
.ps-wtag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-widea { display: flex; flex-direction: column; gap: var(--ps-space-2); padding: 8px 0; color: inherit; text-decoration: none; }
.ps-widea p { margin: 0; font-size: var(--ps-type-body); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps-widea .ps-tag { align-self: flex-start; }
/* This week: the week strip with a pip per post, today in lime */
.ps-wweek { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--ps-space-2); margin-top: auto; padding-top: var(--ps-space-3); }
.ps-wday { border-radius: 10px; padding: 7px 0 8px; text-align: center; background: var(--ps-chip); font-size: var(--ps-type-micro); color: var(--ps-fg-2); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ps-wday b { font-weight: 500; font-size: var(--ps-type-body); color: var(--ps-fg); font-variant-numeric: tabular-nums; }
.ps-wday .ps-wpips { display: flex; gap: 3px; height: 5px; }
.ps-wday .ps-wpips i { width: 5px; height: 5px; border-radius: 50%; background: var(--ps-fg); }
.ps-wday.is-today { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-wday.is-today b { color: inherit; }
.ps-wday.is-today .ps-wpips i { background: currentColor; }
/* a past-due item (the team's This week card counts it on today): the warn tone, on today's lime too */
.ps-wday .ps-wpips i.is-warn { background: var(--ps-warn); }
.ps-wday.is-today .ps-wpips i.is-warn { background: var(--ps-color-warn-on-light); }
/* Quick actions: the dark grey accent card, sprout icon tiles, the first action filled sprout */
.ps-wquick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: auto; }
.ps-wqa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: var(--ps-size-touch); padding: 12px 4px; border-radius: 16px; border: 0;
  background: rgba(247,247,247,.07); color: var(--ps-fg); font: 400 var(--ps-type-caption)/1.2 var(--ps-font-ui); text-align: center; text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ps-ease-out), background-color 160ms var(--ps-ease-out); }
.ps-wqa:hover { background: rgba(247,247,247,.12); }
.ps-wqa:active { transform: scale(var(--ps-press-scale)); }
.ps-wqa__ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(230,253,177,.14); color: var(--ps-color-sprout); }
.ps-wqa__ico .ps-icon { width: 20px; height: 20px; }
.ps-wqa:first-child { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-wqa:first-child .ps-wqa__ico { background: rgba(13,13,13,.1); color: var(--ps-color-ink); }
@media (hover: hover) { .ps-wqa:hover { transform: translateY(-2px); } }
.ps-w--accent { --w-sheen: rgba(247,247,247,.14); --w-rim: rgba(230,253,177,.95); }
/* The note from your Creative, handwritten */
.ps-wnote { font: 400 var(--ps-type-human)/1.05 var(--ps-font-human); margin: 0; color: var(--ps-fg); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ps-wavatar { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ps-color-sprout); color: var(--ps-color-ink); font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); }
/* Credits ring and the reach sparkline: lime to lavender */
.ps-wring { position: relative; width: 84px; height: 84px; flex: none; }
.ps-wring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ps-wring circle { fill: none; stroke-width: 3; }
.ps-wring .ps-wring__track { stroke: var(--ps-chip); }
.ps-wring .ps-wring__arc { stroke-linecap: round; stroke-dasharray: 0 97.4; transition: stroke-dasharray 500ms var(--ps-ease-out); }
.ps-wring__lbl { position: absolute; inset: 0; display: grid; place-items: center; font: 400 26px/1 var(--ps-font-display); }
.ps-wstop-a { stop-color: var(--ps-accent-stroke); }
.ps-wstop-b { stop-color: var(--ps-accent-stroke-2); }
.ps-wstop-c { stop-color: var(--ps-color-sprout); stop-opacity: .7; }
.ps-wstop-d { stop-color: var(--ps-color-lavender-soft); stop-opacity: .7; }
.ps-wspark { width: 100%; height: 64px; margin-top: auto; display: block; }
.ps-wspark .ps-wspark__grid { stroke: var(--ps-line); stroke-width: 1; fill: none; }
.ps-wspark .ps-wspark__line { fill: none; stroke: var(--ps-fg); stroke-width: 1.6; }
.ps-wspark .ps-wspark__dot { fill: var(--ps-fg); }
.ps-wmetrics { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0; }
.ps-wmetrics b { font-weight: 500; font-variant-numeric: tabular-nums; }
.ps-wsplit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: auto; }  /* wraps in a narrow card so the number is never cut */
.ps-wsplit > .ps-btn { margin-left: auto; }
.ps-wfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: var(--ps-space-3); }
/* Your agent today: three dots only while a job runs */
.ps-wagent { display: flex; flex-direction: column; gap: var(--ps-space-2); font-size: var(--ps-type-caption); }
.ps-wagent .ps-wrow .ps-icon { color: var(--ps-agent-fg); }
.ps-wdots { display: inline-flex; gap: 3px; flex: none; }
.ps-wdots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ps-color-lavender); animation: ps-wdot 1s ease-in-out infinite; }
.ps-wdots i:nth-child(2) { animation-delay: .15s; } .ps-wdots i:nth-child(3) { animation-delay: .3s; }
@keyframes ps-wdot { 0%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
/* Card states: loading, empty (what will appear and how to make it appear), error with Try again */
.ps-wst { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--ps-space-2); }
.ps-wst--skel { gap: 10px; }
.ps-wst--empty, .ps-wst--error { justify-content: center; align-items: flex-start; }
.ps-wst--empty .ps-wnote { font-size: 26px; -webkit-line-clamp: 2; }
.ps-wst .ps-muted { margin: 0; }
.ps-wst .ps-btn { margin-top: var(--ps-space-2); }
.ps-wst--error b { font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); }
.ps-wsk-a { height: 14px; width: 60%; } .ps-wsk-big { height: 40px; width: 55%; } .ps-wsk-b { height: 12px; width: 80%; } .ps-wsk-c { height: 12px; width: 45%; }
.ps-w.is-loading .ps-w__head > .ps-icon, .ps-w.is-loading .ps-w__meta { opacity: .5; }
/* A block moved in from the old page keeps its behavior; it drops its own card so there's no glass on glass */
.ps-w [data-w-adopted] { min-width: 0; max-width: 100%; }
.ps-w--table .ps-w__body { overflow: auto; }
/* Edit mode: dashed sprout outline, tools pop in, content can't be clicked */
.ps-w__tools { position: absolute; right: -6px; top: -6px; z-index: var(--ps-layer-sticky); padding: 2px; border-radius: 12px; background: var(--ps-pop-bg); box-shadow: var(--ps-pop-shadow); display: flex; gap: 2px;
  opacity: 0; transform: scale(.94); visibility: hidden; transition: opacity var(--ps-dur-pop) var(--ps-ease-out), transform var(--ps-dur-pop) var(--ps-ease-out), visibility 0s linear var(--ps-dur-pop); }
.ps-wdash.is-editing .ps-w__tools { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.ps-wdash.is-editing .ps-w { outline: 1.5px dashed var(--ps-color-sprout-strong); outline-offset: -1.5px; }
.ps-wdash.is-editing .ps-w__body { pointer-events: none; }
.ps-wtool { width: 28px; height: 28px; border-radius: 9px; border: 0; background: var(--ps-chip); display: grid; place-items: center; color: var(--ps-fg); cursor: pointer; position: relative;
  transition: transform var(--ps-dur-press) var(--ps-ease-out), background-color var(--ps-dur-press) ease; }
.ps-wtool:active { transform: scale(.94); }
.ps-wtool--grip { cursor: grab; touch-action: none; }
.ps-w.is-dragging { z-index: var(--ps-layer-dropdown); animation: none; box-shadow: var(--ps-glass-shadow), 0 24px 50px rgba(0,0,0,.18); cursor: grabbing; pointer-events: none; }
/* First load only: cards settle in, 40ms apart */
@keyframes ps-wrise { from { opacity: 0; transform: translateY(8px); } }
.ps-w.is-enter { animation: ps-wrise 260ms var(--ps-ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
/* Hover: lift 3px with a deeper shadow, and a soft light reflection that follows the cursor (mouse only, not while editing) */
.ps-w::before, .ps-w::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 280ms ease; }
.ps-w::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), var(--w-sheen), transparent 70%); }
.ps-w::before { padding: 1.5px; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), var(--w-rim), transparent 70%);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor; mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0); z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .ps-wdash:not(.is-editing) .ps-w:hover { transform: translateY(-3px); box-shadow: var(--ps-glass-shadow), 0 18px 40px rgba(13,13,13,.12); }
  .ps-wdash:not(.is-editing) .ps-w--accent:hover { box-shadow: inset 0 0 0 1px var(--ps-qa-edge), 0 20px 44px rgba(13,13,13,.22); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ps-wdash:not(.is-editing) .ps-w:hover::before, .ps-wdash:not(.is-editing) .ps-w:hover::after { opacity: 1; }
}
@media (pointer: coarse) {
  .ps-wtool { width: 36px; height: 36px; }
  .ps-wtool::after { content: ""; position: absolute; inset: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-w, .ps-w:hover, .ps-wqa:hover, .ps-wqa:active, .ps-wtool:active, .ps-wdash .ps-w__tools { transform: none !important; }
  .ps-w.is-enter, .ps-wdots i { animation: none; }
  .ps-wdots i { opacity: .8; }
  .ps-wring .ps-wring__arc { transition: none; }
}
/* ---------- Appearance picker in the account pop-up (System / Light / Dark; built by ps-ui.js) ---------- */
.ps-theme { padding: 8px 10px 10px; }
.ps-theme__label { display: block; margin-bottom: 8px; font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-theme .ps-seg { display: grid; width: 100%; grid-auto-columns: 1fr; }   /* the segmented control itself is defined below */
/* switching theme eases colors instead of a brightness jump */
html.ps-theme-fade, html.ps-theme-fade * { transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease !important; }

/* ======================================================================================================
   GTM-336 phase 1: what pages used to style themselves. Each block has a live example and a usage snippet
   on internal/design-system.html; design/README.md says which page patterns each one replaces.
   ====================================================================================================== */

/* ---------- Layout: rows, stacks and grids, so a page needs no layout CSS of its own ----------
   Each sets its own default gap (--ps-gap, so a parent's never leaks in); .ps-gap-1 … .ps-gap-7 on the same element change it. */
.ps-stack { --ps-gap: var(--ps-space-4); display: flex; flex-direction: column; gap: var(--ps-gap); min-width: 0; }
.ps-row { --ps-gap: var(--ps-space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-gap); min-width: 0; }
.ps-row--nowrap { flex-wrap: nowrap; }
.ps-row--top { align-items: flex-start; }
.ps-row--end { justify-content: flex-end; }
.ps-row--between { justify-content: space-between; }
.ps-grid { --ps-gap: var(--ps-space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--ps-grid-min, 280px), 100%), 1fr)); gap: var(--ps-gap); }
.ps-grid--sm { --ps-grid-min: 180px; }
.ps-grid--lg { --ps-grid-min: 380px; }
.ps-grid--xs { --ps-grid-min: 92px; --ps-gap: var(--ps-space-2); }
.ps-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-gap-1 { --ps-gap: var(--ps-space-1); } .ps-gap-2 { --ps-gap: var(--ps-space-2); } .ps-gap-3 { --ps-gap: var(--ps-space-3); }
.ps-gap-4 { --ps-gap: var(--ps-space-4); } .ps-gap-5 { --ps-gap: var(--ps-space-5); } .ps-gap-6 { --ps-gap: var(--ps-space-6); } .ps-gap-7 { --ps-gap: var(--ps-space-7); }
.ps-grow { flex: 1 1 auto; min-width: 0; }
.ps-push { margin-left: auto; }
.ps-trunc { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 4px; border-radius: var(--ps-radius-control);
  background: var(--ps-chip); color: var(--ps-fg-2); font-size: var(--ps-type-micro); text-align: center; min-width: 0; }
.ps-maxw { max-width: 70ch; }
.ps-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-3); margin-bottom: var(--ps-space-4); }
@media (max-width: 720px) { .ps-grid--2, .ps-grid--3 { grid-template-columns: minmax(0, 1fr); } .ps-hide-phone { display: none !important; } }

/* ---------- A dark island: stays dark in both themes (review/video player, Image and Video Studio, the scheduler's
   phone preview). The dark token values come from ps-tokens.css (.ps-dark shares the dark theme block). ---------- */
.ps-dark { color: var(--ps-fg); color-scheme: dark; }
/* Night Wash (GTM-332, Oct 13): dark glass is clear, which only works over the dark wash. A dark island on a light page has
   the light wash behind it, so its glass is the solid dark one there. */
html:not([data-theme="dark"]) :is(.ps-dark, .ps-invert) { --ps-glass: var(--ps-glass-solid); --ps-glass-strong: var(--ps-glass-solid); }

/* ---------- Series colors: charts, per-client and per-department colors (8 hues, muted, readable on greige and on
   dark). .ps-series-N sets --ps-series; PS.series(key) picks a stable N for a client, person or department.
   Never lavender: that hue means AI. ---------- */
.ps-series-1 { --ps-series: var(--ps-series-1); --ps-series-on: var(--ps-series-1-on); } .ps-series-2 { --ps-series: var(--ps-series-2); }
.ps-series-3 { --ps-series: var(--ps-series-3); } .ps-series-4 { --ps-series: var(--ps-series-4); --ps-series-on: var(--ps-series-4-on); }
.ps-series-5 { --ps-series: var(--ps-series-5); --ps-series-on: var(--ps-series-5-on); } .ps-series-6 { --ps-series: var(--ps-series-6); }
.ps-series-7 { --ps-series: var(--ps-series-7); } .ps-series-8 { --ps-series: var(--ps-series-8); }
.ps-fill.ps-fill { background: var(--ps-series, var(--ps-fg-3)); color: var(--ps-series-on); }   /* doubled: beats a feature file's own avatar color */
.ps-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--ps-series, var(--ps-fg-3)); }
.ps-swatch--lg { width: 100%; height: 56px; border-radius: var(--ps-radius-control); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-legend { display: flex; flex-wrap: wrap; gap: var(--ps-space-2) var(--ps-space-4); margin: 0; padding: 0; list-style: none; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ps-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; overflow: hidden;
  background: var(--ps-series, var(--ps-color-sprout)); color: var(--ps-series-on); font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); }
.ps-avatar:not([class*="ps-series-"]) { color: var(--ps-color-ink); }
.ps-avatar img { width: 100%; height: 100%; object-fit: cover; }
button.ps-avatar { border: 0; padding: 0; cursor: pointer; }   /* a logo the team clicks to change (internal/client.html, Nov 6) */
button.ps-avatar:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-avatar--lg { width: 40px; height: 40px; font-size: var(--ps-type-caption); }
/* a business's logo on its Profile (walkthrough R7): a soft square, the initial in the display face when there is no logo */
.ps-avatar--logo { width: 64px; height: 64px; border-radius: var(--ps-radius-card); background: var(--ps-color-ink); color: var(--ps-color-sprout); font: 400 var(--ps-type-section)/1 var(--ps-font-display); }
.ps-avatar--logo:not([class*="ps-series-"]) { color: var(--ps-color-sprout); }
/* the brand-color swatch tiles on the reference page */
.ps-sw-ink { background: var(--ps-color-ink); } .ps-sw-greige { background: var(--ps-color-greige); } .ps-sw-graphite { background: var(--ps-color-graphite); }
.ps-sw-sprout { background: var(--ps-color-sprout); } .ps-sw-lavender { background: var(--ps-color-lavender); } .ps-sw-bar { background: var(--ps-accent-bar); }
.ps-sw-lime-neon { background: var(--ps-color-lime-neon); } .ps-sw-coal { background: var(--ps-color-coal); }

/* ---------- Platform icons: outline, on a neutral chip (PS.platformIcon(key)); never brand colors or text tags ---------- */
.ps-plat { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--ps-radius-small); background: var(--ps-chip); color: var(--ps-fg-2); vertical-align: middle; }
.ps-plat .ps-icon { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); }
.ps-plat--lg { width: 36px; height: 36px; }
.ps-plat--lg .ps-icon { width: var(--ps-size-icon); height: var(--ps-size-icon); }
.ps-plat--bare { width: auto; height: auto; background: none; }
.ps-plat.is-off { opacity: .4; }
/* .is-brand: the platform's own color on the chip, white glyph (the Connect cards, Oct 24). Works on .ps-plat and PS_ICONS' .plat-icon-wrap; keyed by data-plat (the sprite icon) */
.is-brand[data-plat] { color: var(--ps-color-white); background: var(--plat-bg, var(--ps-chip)); }
.is-brand[data-plat="facebook"] { --plat-bg: var(--ps-color-plat-facebook); }
.is-brand[data-plat="instagram"] { --plat-bg: radial-gradient(circle at 30% 107%, var(--ps-color-plat-instagram-gold) 0%, var(--ps-color-plat-instagram-orange) 45%, var(--ps-color-plat-instagram) 60%, var(--ps-color-plat-instagram-blue) 90%); }
.is-brand[data-plat="tiktok"] { --plat-bg: var(--ps-color-plat-tiktok); }
.is-brand[data-plat="tiktok"] .ps-icon { filter: drop-shadow(-1px -1px 0 var(--ps-color-plat-tiktok-cyan)) drop-shadow(1px 1px 0 var(--ps-color-plat-tiktok-red)); }
.is-brand[data-plat="linkedin"] { --plat-bg: var(--ps-color-plat-linkedin); }
.is-brand[data-plat="pinterest"] { --plat-bg: var(--ps-color-plat-pinterest); }
.is-brand[data-plat="gmb"], .is-brand[data-plat="google"] { --plat-bg: var(--ps-color-plat-google); }
.is-brand[data-plat="youtube"] { --plat-bg: var(--ps-color-plat-youtube); }
.is-brand[data-plat="xsocial"] { --plat-bg: var(--ps-color-plat-x); }

/* ---------- Segmented control: 2 to 4 options, aria-pressed, the indicator slides (ps-ui.js) ---------- */
.ps-seg { position: relative; isolation: isolate; display: inline-grid; grid-auto-flow: column; grid-auto-columns: auto; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border-radius: var(--ps-radius-pill); background: var(--ps-chip); vertical-align: middle; }
.ps-seg--block { display: grid; width: 100%; grid-auto-columns: 1fr; }
.ps-seg--even { grid-auto-columns: 1fr; }   /* equal segments without filling the row */
.ps-seg--lg button { padding: var(--ps-space-2) var(--ps-space-4); font: 500 var(--ps-type-control)/1 var(--ps-font-ui); }   /* a header switch (the website's AI | Human) */
.ps-seg--lg .ps-icon { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); }
/* the website's AI | Human switch on the dark AI side (Natalia, Oct 13, 2026): the dark chip (white at 6%) vanished into the
   near-black header, so the track is a lighter gray with a faint edge and the unselected side reads in full text color.
   The light Human side keeps the plain chip. */
html.ps-story[data-theme="dark"] .ps-page-header .ps-seg--lg { background: color-mix(in oklab, var(--ps-color-on-dark) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ps-color-on-dark) 12%, transparent); }
html.ps-story[data-theme="dark"] .ps-page-header .ps-seg--lg button:not([aria-selected="true"]) { color: var(--ps-fg); }
.ps-seg :is(button, a) { position: relative; z-index: 1; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--ps-radius-pill); background: transparent; color: var(--ps-fg-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); text-decoration: none;
  transition: color var(--ps-dur-press) ease; }
.ps-seg :is(button, a):hover { color: var(--ps-fg); }
/* a link segment (a switch between places, not values) is selected by aria-current="page"; links get no sliding indicator */
.ps-seg :is(button:is([aria-pressed="true"], [aria-selected="true"]), a[aria-current="page"]) { background: var(--ps-color-sprout); color: var(--ps-color-ink); }   /* lime marks the selected option (Oct 10: the website's switch, for every switch) */
.ps-seg button:is(:disabled, [aria-disabled="true"]) { opacity: .4; cursor: not-allowed; }   /* aria-disabled: shown, with its reason in a title or hint, but not pickable */
.ps-seg .ps-icon { width: 14px; height: 14px; }
.ps-seg.has-ind button:is([aria-pressed="true"], [aria-selected="true"]) { background: transparent; box-shadow: none; }
.ps-seg__ind { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: var(--ps-radius-pill); background: var(--ps-color-sprout);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--ps-color-ink) 12%, transparent), 0 4px 12px color-mix(in oklab, var(--ps-color-ink) 10%, transparent); pointer-events: none; }
.ps-seg.is-ready .ps-seg__ind { transition: transform var(--ps-dur-move) var(--ps-ease-in-out), width var(--ps-dur-move) var(--ps-ease-in-out); }
@media (pointer: coarse) { .ps-seg button { min-height: var(--ps-size-touch); } }

/* ---------- Chip toggle: filters and options; aria-pressed carries the state ---------- */
.ps-chips { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }   /* a row of chips or tags; a <ul> works too (one row component for portal and website, Oct 10) */
.ps-chips--nowrap { flex-wrap: nowrap; }
/* filter chips that wrap on the desktop and become one scrolling line on a phone (Company → Settings areas, GTM-336) */
@media (max-width: 720px) {
  .ps-chips--scroll { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--ps-space-4)); padding-inline: var(--ps-space-4); }
  .ps-chips--scroll::-webkit-scrollbar { display: none; }
  .ps-chips--scroll > * { flex: none; }
}
/* A row of display badges whose words may be long (a brand's voice tags, Oct 13): a badge longer than the row wraps its own
   text inside the pill instead of running past the edge on a phone. */
.ps-chips--wrap { min-width: 0; max-width: 100%; }
.ps-chips--wrap > :is(.ps-badge, .ps-tag) { height: auto; max-width: 100%; padding-block: 3px; white-space: normal; line-height: 1.3; overflow-wrap: anywhere; }
.ps-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--ps-radius-pill); cursor: pointer; white-space: nowrap; text-decoration: none;
  background: var(--ps-fill); color: var(--ps-fg-2); font: 400 var(--ps-type-control)/1 var(--ps-font-ui);
  transition: background-color var(--ps-dur-press) ease, color var(--ps-dur-press) ease, transform var(--ps-dur-press) var(--ps-ease-out); }
.ps-chip:hover { color: var(--ps-fg); }
.ps-chip:active { transform: scale(var(--ps-press-scale)); }
.ps-chip[aria-pressed="true"] { background: var(--ps-color-sprout); color: var(--ps-color-ink); }   /* lime marks the selected option, like .ps-seg (Oct 10) */
.ps-chip:is(:disabled, [aria-disabled="true"]) { opacity: .4; cursor: not-allowed; }
.ps-chip .ps-icon { width: 14px; height: 14px; }
.ps-chip__n { font-variant-numeric: tabular-nums; color: var(--ps-fg-2); }   /* a token, not an opacity: 4.5:1 on the chip (GTM-337 T3) */
.ps-chip[aria-pressed="true"] .ps-chip__n { color: inherit; opacity: .75; }
/* A filter bar (Oct 27, Sisi: the Effects Library's filters were cramped, labels over controls and selects twice the chips'
   height). Each group is a light tray: its label caps, then its chips or its select, inline; chips and selects share the chip's
   30px pill. Trays sit side by side and wrap whole, so a second line never starts with a stray divider. On a phone each tray takes
   its own line and its chips wrap.
     <div class="ps-filterbar">
       <div class="ps-filterbar__group" role="group" aria-labelledby="l1"><span class="ps-filterbar__label" id="l1">Group</span><div class="ps-chips">…</div></div>
       <label class="ps-filterbar__group"><span class="ps-filterbar__label">Tag</span><select class="ps-input">…</select></label>
     </div>
   A tray may also sit alone outside a bar (a page's context control, like the Effects Library's Brand). The select is replaced by
   the shell's .ps-select-trigger at run time, whose legacy sizing is !important (portal.css), hence the !important here. */
.ps-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); min-width: 0; }
.ps-filterbar__group { display: inline-flex; align-items: center; gap: var(--ps-space-3); min-width: 0; padding: 4px 4px 4px var(--ps-space-4);
  border-radius: var(--ps-radius-pill); background: var(--ps-glass); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-filterbar__label { flex: none; font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-filterbar__group .ps-chips { flex-wrap: nowrap; gap: var(--ps-space-1); }
.ps-filterbar__group select.ps-input, .ps-filterbar__group .ps-select-trigger { width: auto; max-width: 240px; height: 30px; min-height: 30px; padding: 0 12px !important;
  border: 0 !important; border-radius: var(--ps-radius-pill) !important; background: var(--ps-chip) !important; font: 400 var(--ps-type-control)/1 var(--ps-font-ui) !important; color: var(--ps-fg); }
.ps-filterbar__group select.ps-input { padding-right: 32px !important; background-image: linear-gradient(45deg, transparent 50%, var(--ps-fg-2) 50%), linear-gradient(135deg, var(--ps-fg-2) 50%, transparent 50%) !important;
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50% !important; background-size: 5px 5px !important; background-repeat: no-repeat !important; }
/* PS.filterbar on a phone: the bar gives way to a dropdown per group, two to a row ("Group: All"), each a chip-shaped button
   (lime when it isn't on its first option) that opens a menu of the group's options */
.ps-filterbar__picks { display: none; }
.ps-filterbar__pick { min-width: 0; justify-content: flex-start; }
.ps-filterbar__pick-k { flex: none; color: var(--ps-fg-3); }
.ps-filterbar__pick[aria-pressed="true"] .ps-filterbar__pick-k { color: inherit; opacity: .75; }
.ps-filterbar__pick-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ps-filterbar__pick .ps-icon { flex: none; opacity: .6; }
@media (max-width: 720px) {
  .ps-filterbar__picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-2); }
  .ps-filterbar__picks:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }   /* one group (a context control such as a Brand): one dropdown */
  .ps-filterbar__picks + .ps-filterbar { display: none; }
  .ps-filterbar__pick { width: 100%; }
}
@media (pointer: coarse) { .ps-filterbar__group :is(select.ps-input, .ps-select-trigger) { height: var(--ps-size-touch); } }
/* Compact chips (Oct 12, Natalia): the chip toggle in the pill family's size (its metrics come from the family rule under
   "Pills"), for dense filter bars such as the Media Library's. Same toggle behaviour; on touch screens the hit area stays 44px
   without growing the pill. */
.ps-chips--sm { gap: var(--ps-space-1); }
.ps-chips--sm .ps-chip { position: relative; }
.ps-chip__x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: -6px; border-radius: 50%; }

/* ---------- Search field (tables, lists, pickers): a pill with its icon ---------- */
.ps-search { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; min-width: 0; border-radius: var(--ps-radius-pill);
  background: var(--ps-field); color: var(--ps-fg-3); font-size: var(--ps-type-input); }
.ps-search:focus-within { box-shadow: inset 0 0 0 1px var(--ps-focus); }
.ps-search:has(input:focus-visible), .ps-tags:has(input:focus-visible) { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-search input { width: 170px; min-width: 0; flex: 1 1 auto; }
.ps-search--block { display: flex; width: 100%; height: var(--ps-size-touch); }   /* a page's own search, the full width of its column */

/* ---------- Bare input: for inputs that live inside another control (tag input, search pill) ---------- */
.ps-bare { border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; padding: 0; margin: 0; color: var(--ps-fg); font: 400 var(--ps-type-control)/1.3 var(--ps-font-ui); }

/* ---------- Date, time and select fields: the same box as .ps-input ---------- */
.ps-input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) { font-variant-numeric: tabular-nums; min-width: 0; }
.ps-input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.ps-input::-webkit-calendar-picker-indicator:hover { opacity: .9; }
select.ps-input { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ps-fg-2) 50%), linear-gradient(135deg, var(--ps-fg-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.ps-input:disabled { opacity: .5; cursor: not-allowed; }
.ps-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--ps-type-body); color: var(--ps-fg); }
.ps-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ps-fg); cursor: pointer; }

/* ---------- Tag input (PS.tags): tags inside a field; Enter or comma adds, Backspace removes the last ---------- */
.ps-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; padding: 4px 8px; border-radius: var(--ps-radius-control); cursor: text;
  background: var(--ps-field); box-shadow: none; font-size: var(--ps-type-input); }
.ps-tags:focus-within { box-shadow: inset 0 0 0 1px var(--ps-focus); }
.ps-tags__input { flex: 1 1 90px; min-width: 90px; height: 28px; padding: 0 4px; }
.ps-field--error .ps-tags { box-shadow: inset 0 0 0 1.5px var(--ps-danger); }

/* ---------- Range field: the filled part follows the value (ps-ui.js sets --ps-range-p) ---------- */
.ps-range-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ps-space-3); }
.ps-range-field output { font: 500 var(--ps-type-control)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums; color: var(--ps-fg); }
.ps-range { --ps-range-p: 50%; width: 100%; height: 28px; margin: 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ps-range:disabled { opacity: .4; cursor: not-allowed; }
.ps-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--ps-fg) var(--ps-range-p), var(--ps-chip) var(--ps-range-p)); }
.ps-range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--ps-chip); }
.ps-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--ps-fg); }
.ps-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border: 0; border-radius: 50%; background: var(--ps-color-white);
  box-shadow: 0 0 0 1px var(--ps-line), 0 1px 4px rgba(13, 13, 13, .25); transition: transform var(--ps-dur-press) var(--ps-ease-out); }
.ps-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--ps-color-white); box-shadow: 0 0 0 1px var(--ps-line), 0 1px 4px rgba(13, 13, 13, .25); }
.ps-range:active::-webkit-slider-thumb { transform: scale(1.1); }
.ps-range:focus-visible { outline: none; }
.ps-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ps-focus); }
.ps-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--ps-focus); }
.ps-range__scale { display: flex; justify-content: space-between; font-size: var(--ps-type-micro); color: var(--ps-fg-3); font-variant-numeric: tabular-nums; }

/* ---------- Pick several from a long list (PS.multiPick, GTM-329): featured tiles and Other, then a search with chips ----------
   The tiles are .ps-choice, the chips the pill family's removable tag in a .ps-tags box, the search PS.combobox. */
.ps-multipick { display: grid; gap: var(--ps-space-2); min-width: 0; }
.ps-multipick__more[hidden] { display: none; }
/* chips (o.chips): a dense form's pills; the check shows only when picked, and picked is lime (DESIGN.md: selection is lime) */
.ps-multipick--chips > .ps-multipick__row { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-multipick__chip { cursor: pointer; }
.ps-multipick__chip > .ps-icon { display: none; }
.ps-multipick__chip[aria-checked="true"] { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-multipick__chip[aria-checked="true"] > .ps-icon { display: inline-block; }
/* the featured choices and Other stay one row, phones included (Natalia, Nov 5: "one row with three choices") */
.ps-multipick > .ps-multipick__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ps-space-2); }
.ps-multipick > .ps-multipick__row .ps-choice { gap: var(--ps-space-2); padding-inline: 12px; }
.ps-multipick > .ps-multipick__row .ps-choice__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* on a phone the three share 390px: the words get the room, the lime fill alone marks the picked ones */
@media (max-width: 480px) {
  .ps-multipick > .ps-multipick__row .ps-choice { justify-content: center; padding-inline: 8px; }
  .ps-multipick > .ps-multipick__row .ps-choice__body { flex: 0 1 auto; }
  .ps-multipick > .ps-multipick__row .ps-choice__mark { display: none; }
}
.ps-field--error .ps-multipick__row .ps-choice { box-shadow: inset 0 0 0 1.5px var(--ps-danger); }

/* ---------- Combobox and listbox (PS.combobox): type to filter, arrows to move, Enter to pick ---------- */
.ps-combo { position: relative; display: block; min-width: 0; }
.ps-combo .ps-input { padding-right: 36px; }
.ps-combo__chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ps-fg-3); }
.ps-listbox { position: fixed; z-index: var(--ps-layer-menu); max-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: var(--ps-radius-card);
  background: var(--ps-pop-bg); color: var(--ps-fg); box-shadow: var(--ps-pop-shadow); transform-origin: top center; }
.ps-listbox [role="option"] { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font: 400 var(--ps-type-control)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-listbox [role="option"] > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-listbox [role="option"] small { flex: none; color: var(--ps-fg-3); font-size: var(--ps-type-caption); }
.ps-listbox [role="option"]:hover, .ps-listbox [role="option"].is-active { background: var(--ps-chip); }
.ps-listbox [role="option"][aria-selected="true"] { font-weight: 500; }
.ps-listbox [role="option"] .ps-icon { color: var(--ps-fg-2); }
.ps-listbox__empty { padding: 12px 10px; font-size: var(--ps-type-caption); color: var(--ps-fg-3); }

/* ---------- Inline banner: a message inside the page (info, ok, warn, danger, AI) ---------- */
.ps-banner { display: flex; align-items: flex-start; gap: var(--ps-space-3); padding: 12px 14px; border-radius: var(--ps-radius-control); background: var(--ps-chip); color: var(--ps-fg);
  font: 400 var(--ps-type-body)/1.5 var(--ps-font-ui); }
.ps-banner__icon { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--ps-pop-bg); color: var(--ps-fg-2); }
.ps-banner__icon .ps-icon { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); }
.ps-banner__body { flex: 1 1 220px; min-width: 0; align-self: center; }
.ps-banner__body b { font-weight: 500; }
.ps-banner__body p { margin: 2px 0 0; color: var(--ps-fg-2); }
.ps-banner__actions { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); align-self: center; }
.ps-banner--info { background: var(--ps-info-soft); } .ps-banner--info .ps-banner__icon { color: var(--ps-info); }
.ps-banner--ok { background: var(--ps-ok-soft); } .ps-banner--ok .ps-banner__icon { color: var(--ps-ok-text); }
.ps-banner--warn { background: var(--ps-warn-soft); } .ps-banner--warn .ps-banner__icon { color: var(--ps-warn); }
.ps-banner--danger { background: var(--ps-danger-soft); } .ps-banner--danger .ps-banner__icon { color: var(--ps-danger); }
.ps-banner--ai { background: var(--ps-agent-bg); } .ps-banner--ai .ps-banner__icon { color: var(--ps-agent-fg); }   /* AI and agent messages only */
@media (max-width: 480px) { .ps-banner { flex-wrap: wrap; } .ps-banner__actions { width: 100%; padding-left: 40px; } }
/* one-line form and save messages (replaces the pages' *-msg / *-status / *-error lines) */
.ps-msg { min-height: 1.4em; margin: 0; font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-msg--ok { color: var(--ps-ok-text); }
.ps-msg--error { color: var(--ps-danger); }
.ps-msg:empty { min-height: 0; }

/* ---------- Drop zone (PS.drop): drag files in, or click to choose ---------- */
.ps-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ps-space-2); min-height: 150px; padding: var(--ps-space-5);
  border-radius: var(--ps-radius-card); border: 1.5px dashed var(--ps-fg-3); background: var(--ps-chip); color: var(--ps-fg-2); text-align: center; cursor: pointer;
  transition: border-color var(--ps-dur-press) ease, background-color var(--ps-dur-press) ease, color var(--ps-dur-press) ease; }
.ps-drop:hover, .ps-drop:focus-within { border-color: var(--ps-fg-2); color: var(--ps-fg); }
.ps-drop:focus-within { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-drop.is-over { border-color: var(--ps-ok); border-style: solid; background: var(--ps-ok-soft); color: var(--ps-fg); }
.ps-drop.is-disabled { opacity: .5; cursor: not-allowed; }
.ps-drop > input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; }
.ps-drop__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--ps-pop-bg); color: var(--ps-fg); box-shadow: var(--ps-pop-shadow);
  transition: transform var(--ps-dur-base) var(--ps-ease-out); }
.ps-drop.is-over .ps-drop__icon { transform: translateY(-3px); }
.ps-drop__title { font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-drop__hint { font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.ps-drop--compact { flex-direction: row; min-height: 0; padding: 12px 16px; text-align: left; }
.ps-drop--compact .ps-drop__icon { width: 34px; height: 34px; border-radius: 10px; box-shadow: none; }

/* ---------- Media card: image or video tile with badges, play mark, selection and an action menu ---------- */
.ps-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ps-media-min, 180px), 100%), 1fr)); gap: var(--ps-space-4); }
.ps-media-grid--sm { --ps-media-min: 132px; gap: var(--ps-space-3); }
.ps-media-grid--lg { --ps-media-min: 220px; }   /* people (the website's Creatives directory) */
:where(ul, ol).ps-media-grid { list-style: none; margin: 0; padding: 0; }
.ps-media-grid > .ps-state { grid-column: 1 / -1; }   /* the empty state spans the grid */
button.ps-media { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.ps-media { position: relative; display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; color: inherit; text-decoration: none; }
.ps-media__thumb { position: relative; display: grid; place-items: center; aspect-ratio: var(--ps-media-ratio, 1); overflow: hidden; border-radius: var(--ps-radius-control);
  background: var(--ps-chip); color: var(--ps-fg-3); }
.ps-media--portrait { --ps-media-ratio: 4 / 5; } .ps-media--story { --ps-media-ratio: 9 / 16; } .ps-media--wide { --ps-media-ratio: 16 / 9; }
.ps-media__thumb > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--ps-dur-move) var(--ps-ease-out); }
.ps-media__thumb--contain > :is(img, video) { object-fit: contain; }
/* a video that plays in place (an applicant's YouTube or Vimeo link on Applications, GTM-354): the player fills the tile */
.ps-media__thumb > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* A logo shown whole (the Brand Guidelines' 02 Logo, Oct 27, Sisi): a 4:3 ground with room around the mark; --ink is the dark
   ground for a white or reversed logo */
.ps-media__thumb--logo { --ps-media-ratio: 4 / 3; box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-media__thumb--logo > img { inset: 18%; width: 64%; height: 64%; object-fit: contain; }
.ps-media__thumb--ink { background: var(--ps-color-ink); color: var(--ps-color-on-dark); }
/* A draft of a look over a media frame (GTM-393, Oct 27, Sisi: editing an effect's look showed nothing until it rendered). PS.lookDraft
   lays it over a .ps-media__thumb: the frame dimmed, a tag that says it's a draft, and a box of sample lines in the look being edited.
   The brand's own fonts and colors come in through the CSSOM as --ps-lookdraft-* (never a style attribute), like a brand swatch;
   spacing scales the design system's own steps. It's an approximation drawn by the browser, not a render, and costs nothing. */
.ps-lookdraft { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--ps-space-4) + var(--ps-lookdraft-margin, 0%)); background: color-mix(in srgb, var(--ps-color-ink) 55%, transparent); }
.ps-lookdraft[hidden] { display: none; }
.ps-lookdraft__tag { position: absolute; top: 8px; left: 8px; }
.ps-lookdraft__box { width: 100%; display: flex; flex-direction: column; gap: calc(var(--ps-space-3) * var(--ps-lookdraft-gap, 1)); padding: calc(var(--ps-space-4) * var(--ps-lookdraft-pad, 1));
  border-radius: var(--ps-radius-control); background: var(--ps-lookdraft-bg, var(--ps-color-graphite-solid)); color: var(--ps-lookdraft-fg, var(--ps-color-on-dark));
  outline: 1px dashed var(--ps-color-on-dark); outline-offset: 4px; transition: padding var(--ps-dur-move) var(--ps-ease-out), gap var(--ps-dur-move) var(--ps-ease-out); }
.ps-lookdraft__text { margin: 0; overflow-wrap: anywhere; font-family: var(--ps-lookdraft-family, var(--ps-font-ui)); font-size: var(--ps-type-lede); font-weight: var(--ps-lookdraft-weight, 600);
  font-style: var(--ps-lookdraft-style, normal); letter-spacing: var(--ps-lookdraft-tracking, 0); line-height: var(--ps-lookdraft-lh, 1.15); }
.ps-lookdraft__text--body { font-size: var(--ps-type-title); font-weight: var(--ps-lookdraft-weight, 400); }
.ps-lookdraft__rule { width: 40%; height: 3px; border-radius: 2px; background: var(--ps-lookdraft-accent, currentColor); }
@media (prefers-reduced-motion: reduce) { .ps-lookdraft__box { transition: none; } }
/* A drawer's preview (.ps-drawer__stage on its .ps-media): never taller than about a third of the screen, and while a look draft
   is on it, it stays at the top of the drawer as the form below it scrolls, so each change shows as it's made. */
.ps-drawer__stage .ps-media__thumb { width: min(100%, calc(min(38vh, 360px) * (var(--ps-media-ratio, 1)))); margin-inline: auto; }
.ps-drawer__stage:has(> .ps-media__thumb > .ps-lookdraft) { position: sticky; top: calc(-1 * var(--ps-space-5)); z-index: var(--ps-layer-sticky);
  margin: calc(-1 * var(--ps-space-2)) calc(-1 * var(--ps-space-5)) 0; padding: var(--ps-space-2) var(--ps-space-5); background: var(--ps-pop-bg); box-shadow: 0 1px 0 var(--ps-line); }
.ps-media__badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; pointer-events: none; }
.ps-media__badges--bottom { top: auto; bottom: 8px; align-items: flex-end; }
.ps-media__play { position: absolute; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: var(--ps-color-graphite-solid); color: var(--ps-color-on-dark); }
.ps-media__play .ps-icon { width: 16px; height: 16px; margin-left: 2px; }
.ps-media__act { position: absolute; top: 6px; right: 6px; z-index: var(--ps-layer-sticky); border-radius: var(--ps-radius-pill); background: var(--ps-pop-bg); box-shadow: var(--ps-pop-shadow); }
.ps-media__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 2px; }
.ps-media__title { font: 500 var(--ps-type-control)/1.3 var(--ps-font-ui); color: var(--ps-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-media__meta { font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-media.is-selected .ps-media__thumb { box-shadow: inset 0 0 0 2px var(--ps-color-sprout-strong); }   /* selected is lime, never a black frame (Oct 30) */
.ps-media__check { position: absolute; top: 8px; left: 8px; z-index: var(--ps-layer-sticky); width: 22px; height: 22px; margin: 0; accent-color: var(--ps-fg); cursor: pointer; }
a.ps-media:focus-visible, button.ps-media:focus-visible { outline: none; }
a.ps-media:focus-visible .ps-media__thumb, button.ps-media:focus-visible .ps-media__thumb { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
/* The whole card opens (owner decision Oct 8): one .ps-media__open, a direct child of the card, covers it. It's a button or link
   named after the asset (aria-label), or in select mode a <label for> the card's checkbox, so a click anywhere selects. The card's
   other controls (checkbox, Used, download, read more) sit above it as their own controls, never inside it. */
.ps-media__open { position: absolute; inset: 0; display: block; margin: 0; padding: 0; border: 0; border-radius: var(--ps-radius-control);
  background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ps-card.ps-media > .ps-media__open { border-radius: inherit; }
.ps-media__open:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-media:has(> .ps-media__open) :where(a[href], button, input, select, textarea, summary, label, [tabindex]:not([tabindex="-1"])):not(.ps-media__open, .ps-media__check, .ps-media__act) { position: relative; z-index: var(--ps-layer-sticky); }
/* The thumbnail is the picture, not a control: a video thumb (tabindex="-1") stays under .ps-media__open, so a click on it opens. */
.ps-media:has(> .ps-media__open) .ps-media__thumb > :is(img, video) { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .ps-media:hover .ps-media__thumb > :is(img, video) { transform: scale(1.03); }
  .ps-media__act { opacity: 0; transition: opacity var(--ps-dur-pop) var(--ps-ease-out); }
  .ps-media:hover .ps-media__act, .ps-media:focus-within .ps-media__act, .ps-media__act[aria-expanded="true"] { opacity: 1; }
}
/* Library card (GTM-336, Oct 12, Natalia): a .ps-media that is also a .ps-card (the team Media Library). Tight padding, and the
   text has a fixed preview length so every card is about the same height: the description stops at 2 lines (__desc), the chips
   (__chips) at 3 with a "+N" (__chips-n), the meta lines at 1. An arrow (__more, aria-expanded) shows everything in place:
   ps-ui.js toggles .is-expanded on the card. The card still opens as a whole (__open). AI work is a lavender tag on the thumb. */
.ps-card.ps-media { padding: var(--ps-space-3); gap: var(--ps-space-3); }
.ps-media__desc { margin: 0; font: 400 var(--ps-type-caption)/1.45 var(--ps-font-ui); color: var(--ps-fg-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ps-media__desc:empty { display: none; }
.ps-media__chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ps-media__chips:empty { display: none; }
.ps-media__chips > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ps-media__chips > :nth-child(n+4):not(.ps-media__chips-n) { display: none; }
.ps-media__chips-n { background: none; box-shadow: inset 0 0 0 1px var(--ps-line); color: var(--ps-fg-3); }
.ps-media__foot { display: flex; align-items: center; gap: var(--ps-space-1); min-width: 0; margin-top: auto; }
.ps-media__more .ps-icon { transition: transform var(--ps-dur-pop) var(--ps-ease-out); }
.ps-media__more[aria-expanded="true"] .ps-icon { transform: rotate(180deg); }
.ps-media.is-expanded .ps-media__desc { display: block; overflow: visible; }
.ps-media.is-expanded .ps-media__meta { white-space: normal; }
.ps-media.is-expanded .ps-media__chips > * { display: inline-flex; }
.ps-media.is-expanded .ps-media__chips > .ps-media__chips-n { display: none; }
@media (prefers-reduced-motion: reduce) { .ps-media__more .ps-icon { transition: none; } }
@media (max-width: 480px) { .ps-media-grid { --ps-media-min: 140px; gap: var(--ps-space-3); } }

/* ---------- Page header (GTM-337, Oct 12, Natalia; one layout on every page since Oct 31, Sisi: the Studio's) ----------
   <header class="ps-pagehead">
     <div class="ps-pagehead__line">                                      line 1: where you are
       <nav class="ps-pagehead__trail" aria-label="Breadcrumb"><a href="…">Projects</a><span aria-current="page">Fall menu launch</span></nav>
       <span class="ps-pagehead__meta">16 clips</span></div>              (optional: a short count or status)
     <div class="ps-pagehead__main">                                      line 2: what it is and what you can do
       <h1 class="ps-pagehead__title">…</h1>
       <nav class="ps-tabs" aria-label="…">…</nav>                       (optional: the page's tabs, or a .ps-seg)
       <div class="ps-pagehead__actions">…buttons, tools…</div></div>   (optional)
     <p class="ps-pagehead__sub">…</p>                                    (optional: the description; shows in the lime "i")
     <p class="ps-pagehead__sub ps-pagehead__sub--line">3 unread</p>     (optional: a live data line, stays visible)
   </header>
   Desktop, every page the same: line 1 is the trail, then the meta and "Working for" (PS.teamMode.header), level with the fixed
   buttons (+, timer, bell), which keep --ps-size-head-reserve free at its right end. Line 2 runs the full width: an __avatar,
   the title and its "i", then the actions (never at the right end: Sisi, Nov 6, 2026), then the tabs,
   all on the title's baseline. A short step, then one hairline. The older markup lays out the same way, so no page has to change
   at once: a trail and a __meta inside __main, tabs in a __nav (with or without its own __actions), a __for under the title.
   __line, __main and __nav don't box their children on the desktop (display: contents); each part takes its place by its order.
   The trail says where you are: the menu section on a top-level page, the parent page as a link back on a child page (it
   replaces .back-link and eyebrows). Phones keep their own layout: the trail, the title with its actions, the tabs under them;
   the fixed buttons live in the bottom bar there and the header takes the full width. */
.ps-pagehead { display: grid; gap: var(--ps-space-1); min-width: 0; padding-bottom: var(--ps-space-3); margin-bottom: var(--ps-space-4); border-bottom: 1px solid var(--ps-line); }
.ps-stack > .ps-pagehead { margin-bottom: 0; }   /* in a stack the stack's gap is the space under the header (Oct 12: less space, the content matters) */
.ps-pagehead__trail { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--ps-space-2); min-height: 24px; min-width: 0;
  font: 500 var(--ps-type-label)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-pagehead__trail::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--ps-color-sprout-strong); }   /* lime: "you are here" */
.ps-pagehead__trail > * + *::before { content: "/"; margin-right: var(--ps-space-2); color: var(--ps-fg-3); opacity: .55; }
.ps-pagehead__trail a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ps-fg-2); text-decoration: none; transition: color var(--ps-dur-press) ease; }
.ps-pagehead__trail a:hover { color: var(--ps-fg); }
.ps-pagehead__trail a:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; border-radius: 4px; }
.ps-pagehead__line { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--ps-space-4); min-width: 0; min-height: 24px; }
.ps-pagehead__main { --head-gap: var(--ps-space-5); display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--ps-space-3) var(--head-gap); min-width: 0; }   /* --head-gap: the room between the title and what follows; the "i" reads it to sit close to the title */
.ps-pagehead__title { margin: 0; min-width: 0; font: 400 var(--ps-type-page-title)/.95 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); text-wrap: balance; overflow-wrap: anywhere; }
.ps-pagehead__meta { padding-bottom: .35em; font: 400 var(--ps-type-mono)/1.3 var(--ps-font-mono); color: var(--ps-fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-pagehead__meta:empty { display: none; }
.ps-pagehead__line > .ps-pagehead__meta { padding-bottom: 0; }
/* No button at the far right of a header, on any page or size (Sisi, Nov 6, 2026: "this keeps happening"): the actions follow the
   title and its "i", on the left; tests/ui/ds-browser.test.js checks it on the desktop and a phone. */
.ps-pagehead__actions { margin-left: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-pagehead__sub { margin: 0; max-width: 68ch; font: 400 var(--ps-type-body)/1.5 var(--ps-font-ui); color: var(--ps-fg-2); }
/* The page's description lives in the lime "i" next to the title (Oct 23, Natalia), never as a line under it: ps-ui.js adds a
   .ps-tip-btn--head after the .ps-pagehead__title and the tooltip shows the description. The line stays in the page for screen
   readers, out of sight. A live data line (unread counts, a post's fields, a subscriber's contact) stays visible:
   .ps-pagehead__sub--line. */
.ps-pagehead__sub:not(.ps-pagehead__sub--line) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ps-pagehead__nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ps-space-3); margin-top: var(--ps-space-2); min-width: 0; }
/* A person's or a client's picture before the title (the dashboards, a client's brand guidelines): a circle, the initial until
   the photo loads. A logo or picture that is the page's own control (a client's editable logo) sits in __main the same way. */
.ps-pagehead__avatar { align-self: center; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--ps-chip); box-shadow: inset 0 0 0 1px var(--ps-line); font: 400 var(--ps-type-section)/1 var(--ps-font-display); color: var(--ps-fg-2); }
.ps-pagehead__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-pagehead__main > :not(.ps-pagehead__title, .ps-pagehead__meta, .ps-pagehead__actions) { align-self: center; }
/* "Working for" (PS.teamMode.header) on the trail's line: small, with a small mark */
.ps-pagehead__line > .ps-pagehead__for { font-size: var(--ps-type-caption); }
.ps-pagehead__line > .ps-pagehead__for .ps-clientswitch__dot { width: 20px; height: 20px; font-size: var(--ps-type-micro); }
@media (min-width: 769px) {
  .ps-pagehead { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--ps-space-4); row-gap: 0; padding-bottom: var(--ps-space-1); }   /* the title and tabs close to the hairline (Oct 31, Sisi) */
  .ps-pagehead > :is(.ps-pagehead__line, .ps-pagehead__main, .ps-pagehead__nav) { display: contents; }
  /* line 1: the trail, the meta, "Working for"; then a break (::before) as tall as the step to the title */
  .ps-pagehead :is(.ps-pagehead__trail, .ps-pagehead__meta, .ps-pagehead__for) { order: 1; align-self: center; padding-bottom: 0; }
  .ps-pagehead .ps-pagehead__trail { max-width: calc(100% - var(--ps-size-head-reserve)); }
  .ps-pagehead .ps-pagehead__for { font-size: var(--ps-type-caption); }
  .ps-pagehead .ps-pagehead__for .ps-clientswitch__dot { width: 20px; height: 20px; font-size: var(--ps-type-micro); }
  .ps-pagehead::before { content: ""; order: 2; flex: 0 0 100%; height: var(--ps-space-1); }
  /* line 2: the picture, the title and its "i", anything else, the tabs, then the actions at the right end */
  :where(.ps-pagehead > .ps-pagehead__main) > * { order: 4; }
  :where(.ps-pagehead > .ps-pagehead__nav) > * { order: 5; flex: 0 1 auto; min-width: 0; margin: 0; }
  .ps-pagehead :is(.ps-pagehead__avatar, .ps-pagehead__title) { order: 3; }
  /* a picture that is the page's own control (a client's editable logo) stays before the title, at the avatar's size */
  .ps-pagehead > .ps-pagehead__main > :has(~ .ps-pagehead__title) { order: 3; align-self: center; max-width: 56px; max-height: 56px; }
  .ps-pagehead .ps-pagehead__title { flex: 0 1 auto; }
  .ps-pagehead .ps-tip-btn--head { order: 3; align-self: baseline; margin-left: calc(-1 * var(--ps-space-2)); transform: translateY(-.14em); }
  .ps-pagehead > .ps-pagehead__main > :is(.ps-tabs, .ps-seg, .ps-chips) { order: 5; flex: none; margin: 0; }
  .ps-pagehead > .ps-pagehead__main > :is(.ps-tabs, .ps-seg, .ps-chips) ~ .ps-badge { order: 5; align-self: center; }   /* a pill that follows a switch stays after it */
  /* tabs take the room left on the line and scroll sideways when they need more, so the actions stay on it */
  .ps-pagehead > :is(.ps-pagehead__main, .ps-pagehead__nav) > :is(.ps-tabs, .ps-twrap) { flex: 1 1 0; min-width: min(240px, 100%); margin: 0 0 0 var(--ps-space-2); align-self: baseline; }
  .ps-pagehead > :is(.ps-pagehead__main, .ps-pagehead__nav) .ps-tabs { box-shadow: none; }
  .ps-pagehead :is(.ps-pagehead__actions, .ps-pagehead__cta) { order: 3; margin-left: 0; margin-right: var(--ps-space-2); align-self: center; flex: none; }   /* after the title, never at the far end (Nov 6) */
  /* the page's main button (+ New Brief, + New Post, Have an Idea?) right after the title's "i", on the left, not at the far end
     (Natalia, Nov 5, 2026: GTM-337 walkthrough 14c). Tabs and pills follow it; tools (Filter, View, Edit Layout) keep the end. */
  .ps-pagehead .ps-pagehead__primary { order: 3; align-self: center; flex: none; margin: 0 var(--ps-space-2) 0 0; }
  .ps-pagehead :is(.ps-pagehead__actions, .ps-pagehead__cta) ~ :is(.ps-pagehead__actions, .ps-pagehead__cta) { margin-left: 0; }
  .ps-pagehead .ps-pagehead__actions { flex-wrap: nowrap; }
  .ps-pagehead .ps-pagehead__cta { flex-direction: row-reverse; align-items: baseline; align-self: baseline; gap: var(--ps-space-3); }   /* its line before the button, not under it */
  .ps-pagehead .ps-pagehead__cta:has(> .ps-btn--icon) { align-items: center; align-self: center; }   /* a round plus: centred on the title's line */
  .ps-pagehead > .ps-pagehead__sub--line { order: 7; flex: 0 0 100%; max-width: none; margin-top: var(--ps-space-2); }
  .ps-pagehead > :not(.ps-pagehead__line, .ps-pagehead__main, .ps-pagehead__nav, .ps-pagehead__sub, .ps-pagehead__trail, .ps-pagehead__meta, .ps-pagehead__for, .ps-pagehead__title, .ps-pagehead__actions, .ps-pagehead__cta) { order: 7; flex: 0 0 100%; max-width: none; }
  /* the tabs in a header: the Studio's main tabs on every page, their words on the title's baseline, no box under them */
  .ps-pagehead > :is(.ps-pagehead__main, .ps-pagehead__nav) .ps-tabs [role="tab"] { min-height: 0; padding: var(--ps-space-1) var(--ps-space-3); font-size: var(--ps-type-title); font-weight: 400;   /* regular, not medium (Natalia, Nov 5, 2026: GTM-337 item 15) */ }
  /* the trail's line is level with the fixed buttons: the main column's top padding is --ps-space-7; they sit at --ps-size-head-top */
  :where(#main-content, #main-view) > .ps-pagehead:first-child, .ps-pagehead--top { margin-top: calc(var(--ps-size-head-top) + (var(--ps-size-head-button) - 24px) / 2 - var(--ps-space-7)); }
}
@media (max-width: 768px) { .ps-pagehead__title { font-size: var(--ps-type-page-title-phone); } .ps-pagehead { gap: 2px; padding-bottom: var(--ps-space-2); margin-bottom: var(--ps-space-3); } }
/* tabs in a header have no line of their own: the header's hairline is the only one (Oct 31, Sisi: two lines on a phone) */
.ps-pagehead :is(.ps-pagehead__main, .ps-pagehead__nav) .ps-tabs { box-shadow: none; }
/* a header with a photo (the dashboards, a Creative's profile): its data line starts under the name, not under the photo (Nov 6) */
.ps-pagehead:has(> .ps-pagehead__main > .ps-pagehead__avatar) > .ps-pagehead__sub--line { box-sizing: border-box; padding-left: calc(56px + var(--ps-space-4)); margin-top: -6px; }
@media (max-width: 768px) {
  .ps-pagehead__main { --head-gap: var(--ps-space-3); }   /* phones: the photo, the name and its button on one row (Nov 6) */
  .ps-pagehead:has(> .ps-pagehead__main > .ps-pagehead__avatar) > .ps-pagehead__sub--line { padding-left: calc(56px + var(--ps-space-3)); }
}
/* phones: the top bar's subscriber switch already says whom the team works for, so the header doesn't repeat it */
@media (max-width: 768px) { .ps-pagehead .ps-pagehead__for { display: none; } }
/* The tabs' pill (PS.headTabs, Oct 31, Sisi): on a phone a head's tabs are one pill beside the title, the current tab and a
   chevron, that opens a menu of them; the row of tabs hides. The desktop keeps the row and never shows the pill. */
/* Smaller than the title's capitals, roomy at the sides; its touch area reaches past it. The current tab's word carries the
   tabs' lime band, and in its menu the current tab is marked the same way (.ps-menu .is-current). */
.ps-pagehead .ps-pagehead__pick { --ps-tab-mark: var(--ps-color-sprout-strong); position: relative; display: none; min-width: 0; max-width: 100%; height: 26px; min-height: 0;
  padding: 0 var(--ps-space-3) 0 var(--ps-space-4); gap: var(--ps-space-1); color: var(--ps-fg); font-weight: 500; }
html[data-theme="dark"] .ps-pagehead__pick { --ps-tab-mark: var(--ps-color-sprout); }
.ps-pagehead__pick::after { content: ""; position: absolute; inset: -9px -4px; }
.ps-pagehead__pick-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: .4em;   /* room for the band, kept centered */
  background: linear-gradient(var(--ps-tab-mark), var(--ps-tab-mark)) no-repeat; background-size: 100% .32em; background-position: 0 calc(100% - .04em); }
.ps-pagehead__pick .ps-icon { flex: none; opacity: .6; }
@media (max-width: 768px) {
  .ps-pagehead .ps-pagehead__pick:not([hidden]) { display: inline-flex; align-self: center; }
  /* the "i" sits close to the title (one --ps-space-2 from it, whatever the row's gap: a fixed pull-back overlapped the title once
     the phone gap shrank on Nov 6; Sisi, Nov 7), and the lines under the title are in its tip (PS.headInfo) */
  .ps-pagehead .ps-tip-btn--head { margin-left: calc(var(--ps-space-2) - var(--head-gap, var(--ps-space-5))); }
  .ps-pagehead:has(.ps-tip-btn--head:not([hidden])) :is(.ps-pagehead__main > .ps-pagehead__meta, .ps-pagehead__cta > .ps-hint) { display: none; }
  .ps-pagehead [data-ps-pick] { display: none; }
  .ps-pagehead .ps-twrap:has(> [data-ps-pick]) { display: none; }
  .ps-pagehead__nav:has(> [data-ps-pick]:only-of-type):not(:has(> :not([data-ps-pick]))) { display: none; }
  .ps-pagehead__nav:has(> .ps-twrap:only-child > [data-ps-pick]) { display: none; }
}
/* phones: tabs written in __main go under the title and its actions, at full width */
/* the page's main button (GTM-337): a flex item of its own row on every size */
.ps-pagehead__primary { display: inline-flex; align-items: center; gap: var(--ps-space-2); }
@media (max-width: 768px) { .ps-pagehead__main > :is(.ps-tabs, .ps-seg, .ps-chips) { order: 2; flex: 1 0 100%; min-width: 0; margin: 0; } .ps-pagehead__main > .ps-pagehead__actions { order: 1; } }
/* An example inside a card (the reference page): no top alignment, no reserved space */
.ps-pagehead.ps-pagehead--inline { margin: 0; }
.ps-pagehead--inline .ps-pagehead__trail { max-width: none; }
/* A page whose header sits on a full-bleed screen (the AI Studio, the Reviewer): the header carries its own side padding */
.ps-pagehead--bleed { margin: 0; padding-left: var(--ps-space-6); padding-top: calc(var(--ps-size-head-top) + (var(--ps-size-head-button) - 24px) / 2); }
@media (max-width: 768px) { .ps-pagehead--bleed { padding: var(--ps-space-4) var(--ps-space-4) var(--ps-space-3); } }
@media (min-width: 769px) { .ps-pagehead--bleed { padding-right: var(--ps-space-4); } }
/* .ps-pagehead--studio (Oct 29, Sisi: the Studio tabs' header, like Higgsfield's; since Oct 31 every page's desktop layout): on
   phones the title and the tools (.ps-btn--tool) on one row, the tabs under them at full width. */
@media (max-width: 768px) {
  .ps-pagehead--studio > .ps-pagehead__main { --head-gap: var(--ps-space-2); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--head-gap); row-gap: var(--ps-space-1); align-items: center; }
  .ps-pagehead--studio .ps-pagehead__title { grid-column: 1; grid-row: 1; }
  .ps-pagehead--studio .ps-pagehead__pick { grid-column: 2; grid-row: 1; justify-self: start; }
  /* room for the pill: the tools keep their icon and word, without their chevron */
  .ps-pagehead--studio .ps-btn--tool { padding: 0 var(--ps-space-2); }
  .ps-pagehead--studio .ps-btn--tool > .ps-icon:last-child:not(:first-child) { display: none; }
  .ps-pagehead--studio .ps-pagehead__actions { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin: 0; flex-wrap: wrap; gap: var(--ps-space-1); }   /* under the title, on the left (Nov 6) */
  .ps-pagehead--studio .ps-tabs { grid-column: 1 / -1; grid-row: 3; margin: 0 calc(-1 * var(--ps-space-2)); box-shadow: none; }
}
.ps-pagehead--studio .ps-pagehead__actions { gap: var(--ps-space-1); }

/* ---------- Versions: a strip of a deliverable's versions, the one on screen in lime (GTM-247, the Reviewer) ----------
   <nav aria-label="Versions"><div class="ps-versions"><a class="ps-versions__item" href="…">V1.0</a>
     <span class="ps-versions__item" aria-current="true">V1.1</span><a class="ps-versions__item" href="…">V2.0</a></div></nav>
   Mono labels; the others are links. Works on the page and on a dark island (.ps-dark). */
.ps-versions { display: flex; align-items: center; gap: var(--ps-space-1); min-width: 0; }
.ps-versions__item { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--ps-radius-pill); white-space: nowrap; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--ps-line); color: var(--ps-fg-2); font: 500 var(--ps-type-mono)/1 var(--ps-font-mono); font-variant-numeric: tabular-nums;
  transition: box-shadow var(--ps-dur-press) ease, color var(--ps-dur-press) ease; }
a.ps-versions__item:hover { color: var(--ps-fg); box-shadow: inset 0 0 0 1px var(--ps-fg-3); }
a.ps-versions__item:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-versions__item[aria-current] { background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none; }

/* ---------- Profile: one person's page (GTM-331, Oct 10). The same component on the website's portfolio and on team/profile.html:
   a banner, the riso print of their photo in a page-colored ring, their name, role and actions, their bio and their work as
   .ps-media tiles in a .ps-media-grid. ---------- */
.ps-profile { display: block; min-width: 0; }
.ps-profile__banner { height: clamp(180px, 26vw, 340px); background: var(--ps-chip); overflow: hidden; }
.ps-profile__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-profile__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: var(--ps-space-5); }
.ps-profile__photo { margin-top: calc(var(--ps-space-7) * -1.6); width: clamp(120px, 14vw, 168px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 6px solid var(--ps-page); background: var(--ps-color-greige-deep); display: grid; place-items: center; font: 400 var(--ps-type-section)/1 var(--ps-font-display); color: var(--ps-fg-2); }
.ps-profile__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-profile__id { display: grid; gap: var(--ps-space-2); padding-bottom: var(--ps-space-2); min-width: 0; }
.ps-profile__role { margin: 0; color: var(--ps-fg-2); }
.ps-profile__actions { display: flex; gap: var(--ps-space-3); flex-wrap: wrap; padding-bottom: var(--ps-space-2); }
.ps-profile__body { display: grid; gap: var(--ps-space-6); padding-block: var(--ps-space-6) calc(var(--ps-space-7) * 2); }
.ps-profile__bio { margin: 0; font-size: var(--lede, var(--ps-type-lede)); font-weight: var(--ps-weight-light); color: var(--ps-fg-2); max-width: 36em; white-space: pre-line; }
.ps-profile__work { display: grid; gap: var(--ps-space-4); }
.ps-profile__work-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ps-space-4); }
@media (max-width: 768px) {
  .ps-profile__head { grid-template-columns: auto minmax(0, 1fr); }
  .ps-profile__actions { grid-column: 1 / -1; }
}

/* ---------- Prose: a document to read (legal pages, policies, help): one column at reading width, headings in Poppins,
   the body a step lighter, lists and links as in running text (GTM-331, Oct 10). ---------- */
.ps-prose { max-width: 44em; font: 300 var(--ps-type-body)/1.7 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-prose > * { margin: 0; }
.ps-prose > * + * { margin-top: var(--ps-space-4); }
.ps-prose > :is(h2, h3) { margin-top: var(--ps-space-6); font: 500 var(--ps-type-title)/1.35 var(--ps-font-ui); color: var(--ps-fg); }
.ps-prose > :is(h2, h3):first-child { margin-top: 0; }
.ps-prose > :is(h2, h3) + * { margin-top: var(--ps-space-2); }
.ps-prose :is(ul, ol) { padding-left: 1.3em; display: grid; gap: var(--ps-space-2); }
.ps-prose :is(strong, b) { font-weight: 500; color: var(--ps-fg); }
/* Oct 24 (Natalia; design/README.md "Long copy and long forms"): a form or panel with many fields reads in sections. Each section
   has a title; a line and room separate it from the next, so a reader always sees where one part ends. Never a run of fields. */
.ps-formsec { display: grid; gap: var(--ps-space-4); min-width: 0; }
.ps-formsec + .ps-formsec { margin-top: calc(var(--ps-space-section) - var(--ps-space-4)); padding-top: var(--ps-space-section-start); border-top: 1px solid var(--ps-line-strong); }   /* the section rule (.ps-sections), in its usual .ps-stack.ps-gap-4 (Oct 31) */
@media (max-width: 600px) { .ps-formsec + .ps-formsec { margin-top: calc(var(--ps-space-section-phone) - var(--ps-space-4)); padding-top: var(--ps-space-4); } }
.ps-formsec__title { margin: 0; font: 500 var(--ps-type-title)/1.35 var(--ps-font-ui); color: var(--ps-fg); }
/* Oct 30 (Natalia): a long editor drawer reads as numbered steps, each on its own panel, so the parts can't run together.
   .ps-formsec--panel: the section on a quiet sheet with room around it. __head: the step number (__num, a check once done with
   .is-done), the title, an optional tag and a one-line lede (__lede) saying what the step is for. __sub: a part inside a step
   (a checklist, a form), with its own small title and a line above it. Tokens only, both themes. */
.ps-formsec--panel { gap: var(--ps-space-5); padding: var(--ps-space-5); border-radius: var(--ps-radius-card); background: color-mix(in srgb, var(--ps-fg) 3%, transparent); }
.ps-formsec--panel + .ps-formsec--panel { margin-top: 0; padding-top: var(--ps-space-5); border-top: 0; }
.ps-formsec__head { display: flex; align-items: flex-start; gap: var(--ps-space-3); min-width: 0; }
.ps-formsec__num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ps-fg) 9%, transparent); color: var(--ps-fg);
  font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums; }
.ps-formsec__num .ps-icon { width: 14px; height: 14px; }
.ps-formsec.is-done .ps-formsec__num { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-formsec__headtext { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--ps-space-1); }
.ps-formsec__headrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); }
.ps-formsec__lede { margin: 0; color: var(--ps-fg-2); font-size: var(--ps-type-body); line-height: 1.5; }
.ps-formsec__sub { display: grid; gap: var(--ps-space-3); min-width: 0; margin-top: calc(var(--ps-space-section) - var(--ps-space-5)); padding-top: var(--ps-space-section-start); border-top: 1px solid var(--ps-line-strong); }   /* the section rule inside the panel's gap (Oct 31) */
.ps-formsec__subtitle { margin: 0; font: 500 var(--ps-type-body)/1.4 var(--ps-font-ui); color: var(--ps-fg); }
@media (max-width: 600px) { .ps-formsec--panel { padding: var(--ps-space-4); gap: var(--ps-space-4); } .ps-formsec__sub { margin-top: calc(var(--ps-space-section-phone) - var(--ps-space-4)); padding-top: var(--ps-space-4); } }
/* .ps-list--wrap: a row with a control and several buttons (the editor's photos) puts its buttons on their own line on a phone,
   so the control keeps its width. */
@media (max-width: 600px) {
  .ps-list--wrap .ps-list__row { flex-wrap: wrap; row-gap: var(--ps-space-2); }
  .ps-list--wrap .ps-list__body { flex: 1 1 0; min-width: 50%; }
  .ps-list--wrap .ps-list__end { flex: 1 1 100%; justify-content: flex-end; }
}
/* Oct 24 (Natalia): a document to sign, on a sheet (the Cast and voice releases): no rules between lines, numbered clauses,
   a quiet line naming the document, and one signing line at the end. Tokens only, both themes. */
.ps-prose--doc { max-width: none; padding: var(--ps-space-6); border-radius: var(--ps-radius-card); background: color-mix(in srgb, var(--ps-fg) 3%, transparent); }
.ps-prose--doc > :is(h2, h3) { margin-top: var(--ps-space-5); }
.ps-prose--doc ol { padding-left: 1.6em; }
.ps-prose--doc ol > li::marker { font-weight: 500; color: var(--ps-fg); }
.ps-prose--doc ul { padding-left: 1.2em; }
.ps-prose__meta { font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.ps-prose__links { display: flex; flex-wrap: wrap; gap: var(--ps-space-4); }
.ps-prose__part > * { margin: 0; }
.ps-prose__part > * + * { margin-top: var(--ps-space-3); }
.ps-prose--doc > .ps-prose__part + .ps-prose__part { margin-top: var(--ps-space-6); }
.ps-prose__sign { margin-top: var(--ps-space-6); padding-top: var(--ps-space-4); border-top: 1px solid var(--ps-line); color: var(--ps-fg); }
@media (max-width: 600px) { .ps-prose--doc { padding: var(--ps-space-5) var(--ps-space-4); } }

/* ---------- Modal (PS.modal): the solid pop material over a scrim; never glass on glass ----------
   The dialog grows from .96 in 180 ms (strong ease-out); with reduced motion it only fades. It scrolls inside, never the page. */
.ps-modal { position: fixed; inset: 0; z-index: var(--ps-layer-modal); display: grid; place-items: center; padding: var(--ps-space-5); overflow: hidden; overflow: clip;   /* clip: the layer itself never scrolls, not even to bring a focused element into view */
  background: var(--ps-color-scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--ps-dur-pop) var(--ps-ease-out); }
.ps-modal.is-open { opacity: 1; }
.ps-modal__dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-width: var(--ps-modal-w, 520px); max-height: calc(100vh - 2 * var(--ps-space-5)); max-height: calc(100dvh - 2 * var(--ps-space-5));
  border-radius: var(--ps-radius-card); background: var(--ps-pop-bg); color: var(--ps-fg); box-shadow: var(--ps-pop-shadow); outline: none;
  transform: scale(.96); transition: transform var(--ps-dur-pop) var(--ps-ease-out); }
.ps-modal.is-open .ps-modal__dialog { transform: none; }
.ps-modal__body > img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--ps-radius-control); }   /* a photo shown whole (a post on a profile) */
.ps-modal--sm { --ps-modal-w: 400px; } .ps-modal--lg { --ps-modal-w: 720px; } .ps-modal--xl { --ps-modal-w: 960px; }
.ps-modal__head { display: flex; align-items: flex-start; gap: var(--ps-space-3); padding: var(--ps-space-5) var(--ps-space-5) var(--ps-space-3); }
.ps-modal__head > :first-child { flex: 1; min-width: 0; }
.ps-modal__title { margin: 4px 0 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
.ps-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--ps-space-5) var(--ps-space-5); font: 400 var(--ps-type-body)/1.6 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-modal__body > :first-child { margin-top: 0; }
.ps-modal__body strong, .ps-modal__body b { color: var(--ps-fg); font-weight: 500; }
.ps-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ps-space-2); padding: var(--ps-space-4) var(--ps-space-5); border-top: 1px solid var(--ps-line); }
.ps-modal__actions .ps-msg { flex: 1 1 100%; text-align: right; }
.ps-modal__actions .ps-msg:empty { display: none; }
html.ps-modal-open { overflow: hidden; }
@media (max-width: 480px) {
  .ps-modal { place-items: end center; padding: var(--ps-space-2); }
  .ps-modal__dialog { max-height: calc(100vh - 2 * var(--ps-space-2)); max-height: calc(100dvh - 2 * var(--ps-space-2)); }
  .ps-modal__actions > .ps-btn { flex: 1 1 auto; }
}

/* ---------- Table helper (PS.table) extras: states inside the table, pager, sizes, clickable rows ---------- */
.ps-table tbody tr[data-row] { cursor: pointer; }
.ps-table tbody tr[data-row]:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; }
.ps-table td.ps-act, .ps-table th.ps-act { width: 52px; text-align: right; }
.ps-table td.is-muted, .ps-table .ps-null { color: var(--ps-fg-3); }
.ps-table .ps-trunc { display: inline-block; max-width: 260px; vertical-align: bottom; }
/* a link in a table cell is a 24px target: inline padding (no change to the row's height), and a truncating wrapper gives
   it the room so the padding isn't clipped (GTM-337 H2) */
.ps-table a.ps-link { padding-block: 4px; }
.ps-table .ps-trunc:has(> a.ps-link) { padding-block: 4px; margin-block: -4px; }
.ps-table tr.ps-tstate td, .ps-table tr.ps-tstate:hover td { background: transparent; padding: var(--ps-space-2) var(--ps-space-5); }
.ps-table tr.ps-skel-row td { padding-block: 16px; }
.ps-table tr.ps-skel-row .ps-skel { height: 12px; width: 70%; }
.ps-table tfoot td, .bl-table tfoot td { font-weight: 500; background: var(--ps-chip); border-top: 1px solid var(--ps-line); border-bottom: 0; }
.ps-twrap--free { max-height: none; }
.ps-twrap.is-scrolled-x tbody td:first-child, .ps-twrap.is-scrolled-x thead th:first-child { position: sticky; left: 0; background: var(--ps-glass-solid); box-shadow: 1px 0 0 var(--ps-line); }
.ps-twrap.is-scrolled-x thead th:first-child { z-index: var(--ps-layer-sticky); }
.ps-table--min-640 { min-width: 640px; } .ps-table--min-820 { min-width: 820px; } .ps-table--min-1040 { min-width: 1040px; }
.ps-table--dense td { padding-block: 7px; }
.ps-pager { display: inline-flex; align-items: center; gap: 6px; }
.ps-tcount { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .ps-table--cards[class*="ps-table--min-"] { min-width: 0; } }

/* ---------- FullCalendar bridge (internal/calendar.html, internal/timesheet.html): the calendar in the design system.
   html.ps-v2 beats FullCalendar's own stylesheet, which it injects after ours. ---------- */
html.ps-v2 .fc {
  --fc-border-color: var(--ps-line); --fc-page-bg-color: transparent; --fc-neutral-bg-color: var(--ps-chip); --fc-list-event-hover-bg-color: var(--ps-chip);
  --fc-today-bg-color: var(--ps-chip); --fc-non-business-color: var(--ps-chip); --fc-highlight-color: var(--ps-info-soft); --fc-now-indicator-color: var(--ps-danger);
  --fc-button-text-color: var(--ps-fg); --fc-button-bg-color: var(--ps-glass-strong); --fc-button-border-color: var(--ps-line);
  --fc-button-hover-bg-color: var(--ps-chip); --fc-button-hover-border-color: var(--ps-line);
  --fc-button-active-bg-color: var(--ps-fg); --fc-button-active-border-color: var(--ps-fg);
  --fc-event-bg-color: var(--ps-glass-strong); --fc-event-border-color: transparent; --fc-event-text-color: var(--ps-fg); --fc-small-font-size: var(--ps-type-caption);
  color: var(--ps-fg); font-family: var(--ps-font-ui); font-size: var(--ps-type-body);
}
html.ps-v2 .fc a { color: var(--ps-fg); text-decoration: none; }
html.ps-v2 .fc .fc-toolbar { gap: var(--ps-space-3); flex-wrap: wrap; }
html.ps-v2 .fc .fc-toolbar-title { font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
html.ps-v2 .fc .fc-button { height: var(--ps-size-control-sm); padding: 0 var(--ps-space-3); border-radius: var(--ps-radius-pill); box-shadow: none;
  font: 500 var(--ps-type-control)/1 var(--ps-font-ui); text-transform: none; letter-spacing: 0; }
html.ps-v2 .fc .fc-button:focus, html.ps-v2 .fc .fc-button-primary:not(:disabled):active:focus, html.ps-v2 .fc .fc-button-primary:not(:disabled).fc-button-active:focus { box-shadow: none; }
html.ps-v2 .fc .fc-button:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
html.ps-v2 .fc .fc-button-primary:not(:disabled).fc-button-active, html.ps-v2 .fc .fc-button-primary:not(:disabled):active { color: var(--ps-page); }
html.ps-v2 .fc .fc-button-group > .fc-button { border-radius: 0; }
html.ps-v2 .fc .fc-button-group > .fc-button:first-child { border-radius: var(--ps-radius-pill) 0 0 var(--ps-radius-pill); }
html.ps-v2 .fc .fc-button-group > .fc-button:last-child { border-radius: 0 var(--ps-radius-pill) var(--ps-radius-pill) 0; }
html.ps-v2 .fc .fc-col-header-cell { padding: var(--ps-space-2) 0; }
html.ps-v2 .fc .fc-col-header-cell-cushion { font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
html.ps-v2 .fc .fc-daygrid-day-number { padding: var(--ps-space-1) var(--ps-space-2); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
/* days outside the month: FullCalendar fades them to 30% (1.6:1); the faint token keeps them quieter and readable (GTM-337 T3) */
html.ps-v2 .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-top { opacity: 1; }
html.ps-v2 .fc .fc-day-other .fc-daygrid-day-number { color: var(--ps-fg-3); }
html.ps-v2 .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { margin: 2px; padding: 2px var(--ps-space-2); border-radius: var(--ps-radius-pill); background: var(--ps-color-sprout); color: var(--ps-color-ink); font-weight: 500; }
html.ps-v2 .fc-theme-standard .fc-scrollgrid { border: 0; }
html.ps-v2 .fc .fc-timegrid-slot-label-cushion { font-size: var(--ps-type-micro); color: var(--ps-fg-3); }
html.ps-v2 .fc .fc-event { border: 0; border-radius: var(--ps-radius-small); padding: 2px 6px; font-size: var(--ps-type-caption); line-height: 1.4; cursor: pointer;
  background: var(--ps-ev-bg, var(--ps-chip)); color: var(--ps-ev-fg, var(--ps-fg)); }
html.ps-v2 .fc .fc-event .fc-event-main { color: inherit; }
html.ps-v2 .fc .fc-event-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ps-v2 .fc .fc-list-event, html.ps-v2 .fc .fc-list-event a { background: none; color: var(--ps-fg); }
html.ps-v2 .fc .fc-list-event-dot { border-color: var(--ps-ev-fg, var(--ps-fg-2)); }
html.ps-v2 .fc :is(.fc-list-day-text, .fc-list-day-side-text, .fc-list-event-time, .fc-more-link) { color: var(--ps-fg-2); font-size: var(--ps-type-caption); }
html.ps-v2 .fc .fc-list-empty { padding: var(--ps-space-6); color: var(--ps-fg-2); }
html.ps-v2 .fc .fc-popover { border: 0; border-radius: var(--ps-radius-control); background: var(--ps-pop-bg); box-shadow: var(--ps-pop-shadow); z-index: var(--ps-layer-menu); }
/* event kinds: .ps-series-N (or a page's --ps-ev-bg / --ps-ev-fg) colors an event without a page rule */
html.ps-v2 .fc .fc-event[class*="ps-series-"] { --ps-ev-bg: var(--ps-series); --ps-ev-fg: var(--ps-series-on); }
html.ps-v2 .fc .fc-event.ps-ev-ai { --ps-ev-bg: var(--ps-agent-bg); --ps-ev-fg: var(--ps-agent-fg); }
html.ps-v2 .fc .fc-event.ps-ev-warn { --ps-ev-bg: var(--ps-warn-soft); --ps-ev-fg: var(--ps-warn); }
html.ps-v2 .fc .fc-event.ps-ev-ok { --ps-ev-bg: var(--ps-ok-soft); --ps-ev-fg: var(--ps-ok-text); }
html.ps-v2 .fc .fc-event.ps-ev-outline { --ps-ev-bg: transparent; box-shadow: inset 0 0 0 1px var(--ps-line); }
/* an event's dot (the list views, a phone's month): its kind's own color, not the text color that sits on its chip */
html.ps-v2 .fc .fc-event[class*="ps-series-"] { --ps-ev-dot: var(--ps-series); }
html.ps-v2 .fc .fc-event.ps-ev-ok { --ps-ev-dot: var(--ps-ok); } html.ps-v2 .fc .fc-event.ps-ev-warn { --ps-ev-dot: var(--ps-warn); }
html.ps-v2 .fc .fc-event.ps-ev-ai { --ps-ev-dot: var(--ps-agent-fg); } html.ps-v2 .fc .fc-event.ps-ev-danger { --ps-ev-dot: var(--ps-danger); }
html.ps-v2 .fc .fc-event.ps-ev-info { --ps-ev-dot: var(--ps-info); }
html.ps-v2 .fc .fc-list-event .fc-list-event-dot { border-color: var(--ps-ev-dot, var(--ps-ev-fg, var(--ps-fg-2))); }
/* a phone (team audit, Oct 21): a day is ~48 px wide. Day names sit over their dates instead of running into the next column;
   a month's events are dots in their kind's color (a tap on the day lists them, PS.fcOptions), not chips cut to one letter. */
@media (max-width: 720px) {
  html.ps-v2 .fc .fc-col-header-cell-cushion { white-space: normal; line-height: 1.3; padding-inline: 0; letter-spacing: 0; }
  html.ps-v2 .fc .fc-dayGridMonth-view .fc-daygrid-day-events { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 var(--ps-space-1) var(--ps-space-1); margin: 0; min-height: 0; }
  html.ps-v2 .fc .fc-dayGridMonth-view .fc-daygrid-event-harness { margin: 0; }
  html.ps-v2 .fc .fc-dayGridMonth-view .fc-daygrid-event { width: 8px; height: 8px; padding: 0; margin: 0; border-radius: 50%; pointer-events: none;
    background: var(--ps-ev-dot, var(--ps-fg-2)); }
  html.ps-v2 .fc .fc-dayGridMonth-view .fc-daygrid-event .fc-event-main, html.ps-v2 .fc .fc-dayGridMonth-view .fc-daygrid-event > :not(.fc-event-main) { display: none; }
  html.ps-v2 .fc .fc-dayGridMonth-view .fc-event.ps-ev-outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ps-fg-2); }
  html.ps-v2 .fc .fc-dayGridMonth-view .fc-daygrid-day-frame { min-height: 52px; cursor: pointer; }
}

/* ---------- Touch: nothing tappable under 44px on touch screens ---------- */
/* The buttons grow through the control-size tokens (ps-base.css); fields, chips, kebabs and search here (GTM-337 H1).
   Small things inside another control (a switch, a tag's remove button, the toast's action) keep a 44px hit area instead. */
@media (pointer: coarse) {
  .ps-input:not(textarea), .ps-search, .ps-chip { height: var(--ps-size-touch); }
  .ps-chips--sm .ps-chip::after { content: ""; position: absolute; inset: -11px -2px; }
  .ps-tags { min-height: var(--ps-size-touch); }
  .ps-kebab, .kebab-btn { width: var(--ps-size-touch); height: var(--ps-size-touch); }
  .ps-switch, .ps-toast button, .ps-tag--removable button { position: relative; }
  .ps-toast button::after { content: ""; position: absolute; inset: -7px -2px; }
  .ps-tag--removable button::after { content: ""; position: absolute; inset: -12px; }
  .ps-switch::before { content: ""; position: absolute; inset: -9px -2px; }
  /* team audit (Oct 21): a link or a name button in a table row, a sort header and an icon-only segment take a 44px tap without
     moving the row (the padding grows the hit area, the negative margin keeps the layout) */
  .ps-table td :is(a, button.ps-bare):not(.ps-btn):not(.ps-kebab) { padding-block: 12px; margin-block: -12px; }
  .ps-sort { padding-block: 17px; margin-block: -17px; }
  .ps-seg button { min-width: var(--ps-size-touch); }
}

/* ---------- Phone: table rows become cards labelled by their column ---------- */
@media (max-width: 720px) {
  .ps-table--cards, .ps-table--cards thead, .ps-table--cards tbody, .ps-table--cards tfoot, .ps-table--cards tr, .ps-table--cards td { display: block; }
  .ps-table--cards thead { display: none; }
  .ps-table--cards :is(tbody, tfoot) tr { position: relative; padding: 12px var(--ps-space-4); border-bottom: 1px solid var(--ps-line); }
  .ps-table--cards tfoot tr { background: var(--ps-chip); border-bottom: 0; }
  .ps-table--cards tfoot td { background: none; border: 0; }
  .ps-table--cards td[colspan] { justify-content: flex-start; text-align: left; }
  .ps-table--cards td[colspan]::before { display: none; }
  .ps-table--cards td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .ps-table--cards td::before { content: attr(data-label); font: 500 var(--ps-type-label)/1.6 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); text-align: left; }
  .ps-table--cards td.ps-lead::before, .ps-table--cards td.ps-act::before { display: none; }
  .ps-table--cards td[data-label]:empty { display: none; }   /* a blank cell (Paid on an invoice row) is no line on a card (Nov 7) */
  .ps-table--cards td.ps-act { position: absolute; top: 8px; right: 8px; padding: 0; }
  /* cards stack down the page: their wrap grows with them (a fixed-height box here was a scroll inside the page's scroll that
     showed 3 cards and hid the rest; team audit Oct 21) */
  .ps-twrap:has(> .ps-table--cards) { max-height: none; }
  .ps-kv { grid-template-columns: 1fr; gap: 2px 0; }
}

/* ---------- Reduced motion: fades stay, movement goes ---------- */
@media (prefers-reduced-motion: reduce) {
  .ps-pop, .ps-pop.is-open { transform: none !important; }
  .ps-toast, .ps-toast.is-open { transform: translateX(-50%) !important; }
  .ps-drawer { transform: none; opacity: 0; transition: opacity 200ms ease; }
  .ps-drawer.is-open { opacity: 1; }
  .ps-btn:active, .ps-card--lift:hover, .ps-chip:active { transform: none; }
  .ps-skel { animation: none; }
  .ps-modal__dialog, .ps-modal.is-open .ps-modal__dialog { transform: none; transition: none; }
  .ps-seg.is-ready .ps-seg__ind { transition: none; }
  .ps-media__thumb > :is(img, video), .ps-media:hover .ps-media__thumb > :is(img, video) { transform: none; transition: none; }
  .ps-drop.is-over .ps-drop__icon, .ps-range:active::-webkit-slider-thumb { transform: none; }
}

/* ======================================================================================================
   GTM-337 (UI polish): what the GTM-336 page sweeps asked for. Tokens only; each block has a live example and a
   usage snippet on internal/design-system.html. Local knobs a component sets on itself are named in
   tests/ui/design-system.test.js (--ps-choice-min, --ps-progress, --ps-gantt-*, --ps-thumbs-size, --ps-cap, …).
   ====================================================================================================== */

/* ---------- Links: inline text links inside content are muted, underline on hover and focus, visited the same ----------
   .ps-link on any <a>; an <a> without a class inside running text gets the same look on its own. A faint underline stays
   at rest so a link never relies on color alone (WCAG 1.4.1); it fills in on hover and focus. */
.ps-link,
html.ps-v2 :where(p, dd, td, small, label, figcaption, blockquote, main li, .ps-hint, .ps-msg, .ps-muted, .ps-faint, .ps-banner__body, .ps-modal__body, .ps-drawer) a:where(:not([class])) {
  color: var(--ps-fg-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 32%, transparent); border-radius: 3px; cursor: pointer;
  transition: color var(--ps-dur-press) ease, text-decoration-color var(--ps-dur-press) ease;
}
.ps-link:visited, html.ps-v2 :where(p, dd, td, small, label, figcaption, blockquote, main li, .ps-hint, .ps-msg, .ps-muted, .ps-faint, .ps-banner__body, .ps-modal__body, .ps-drawer) a:where(:not([class])):visited { color: var(--ps-fg-2); }
.ps-link:hover, .ps-link:focus-visible,
html.ps-v2 :where(p, dd, td, small, label, figcaption, blockquote, main li, .ps-hint, .ps-msg, .ps-muted, .ps-faint, .ps-banner__body, .ps-modal__body, .ps-drawer) a:where(:not([class])):is(:hover, :focus-visible) {
  color: var(--ps-fg); text-decoration-color: currentColor; }
.ps-link:focus-visible, html.ps-v2 :where(p, dd, td, small, label, main li, .ps-hint, .ps-msg, .ps-banner__body, .ps-modal__body) a:where(:not([class])):focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-link--strong, .ps-link--strong:visited { color: var(--ps-fg); font-weight: 500; }
.ps-link--arrow { display: inline-flex; align-items: center; gap: var(--ps-space-2); }   /* a link that leads on: its arrow moves on hover */
.ps-link--arrow .ps-icon { transition: transform var(--ps-dur-base) var(--ps-ease-out); }
.ps-link--arrow:hover .ps-icon { transform: translateX(4px); }
button.ps-link { border: 0; padding: 0; background: none; font: inherit; }

/* ---------- Choice tile: a selectable multi-line card (radio or checkbox semantics) ----------
   A <button class="ps-choice" role="radio|checkbox" aria-checked> in a .ps-choices[role=radiogroup|group] (ps-ui.js
   wires clicks, arrow keys in a radiogroup, ps:change), or a <label class="ps-choice"> around a real input. Selected:
   aria-checked, aria-pressed, .is-selected or a checked input all look the same. */
.ps-choices { --ps-choice-min: 220px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ps-choice-min), 100%), 1fr)); gap: var(--ps-space-3); }
.ps-choices--sm { --ps-choice-min: 160px; }
.ps-choices--list { grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-2); }
.ps-choice { position: relative; display: flex; align-items: flex-start; gap: var(--ps-space-3); width: 100%; min-width: 0; min-height: var(--ps-size-touch); margin: 0; padding: 14px;
  border: 0; border-radius: var(--ps-radius-control); background: var(--ps-tile); box-shadow: inset 0 0 0 1px var(--ps-line-strong); color: var(--ps-fg);
  font: 400 var(--ps-type-body)/1.4 var(--ps-font-ui); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--ps-dur-press) ease, background-color var(--ps-dur-press) ease, transform var(--ps-dur-press) var(--ps-ease-out); }
.ps-choice:hover { box-shadow: inset 0 0 0 1px var(--ps-fg-3); }
.ps-choice:active { transform: scale(var(--ps-press-scale)); }
.ps-choice:focus-visible, .ps-choice:has(> input:focus-visible) { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-choice > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.ps-choice__icon { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--ps-chip); color: var(--ps-fg-2);
  transition: background-color var(--ps-dur-press) ease, color var(--ps-dur-press) ease; }
.ps-choice__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0; align-self: center; }
.ps-choice__title { font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-choice__desc { font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-choice__title + .ps-choice__desc { margin-top: 4px; }   /* Sisi, Nov 7: more room under the title, two descriptions set tighter */
.ps-choice__meta { flex: none; align-self: center; font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); color: var(--ps-fg-3); font-variant-numeric: tabular-nums; }
.ps-choice__mark { order: 9; flex: none; align-self: center; position: relative; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ps-fg-3);
  display: grid; place-items: center; transition: background-color var(--ps-dur-press) ease, box-shadow var(--ps-dur-press) ease; }
.ps-choice__mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ps-color-ink); transform: scale(0); transition: transform var(--ps-dur-pop) var(--ps-ease-out); }
.ps-choice:is([role="checkbox"], .ps-choice--multi, :has(> input[type="checkbox"])) .ps-choice__mark { border-radius: 6px; }
.ps-choice:is([role="checkbox"], .ps-choice--multi, :has(> input[type="checkbox"])) .ps-choice__mark::after { width: 10px; height: 5px; border-radius: 0; background: none;
  border: solid var(--ps-color-ink); border-width: 0 0 2px 2px; margin-top: -2px; transform: rotate(-45deg) scale(0); }
.ps-choice:is([aria-checked="true"], [aria-pressed="true"], .is-selected, .selected, :has(> input:checked)) { background: var(--ps-tile); box-shadow: inset 0 3px 0 var(--ps-color-lime-neon), 0 10px 22px -14px color-mix(in srgb, var(--ps-color-ink) 45%, transparent); }   /* selected (GTM-337, Nov 7, Sisi): no outline and no fill, only a neon lime top edge that follows the corners, like the tab menu's */
.ps-choice:is([aria-checked="true"], [aria-pressed="true"], .is-selected, .selected, :has(> input:checked)) .ps-choice__mark { background: var(--ps-color-lime-neon); box-shadow: none; }
.ps-choice:is([aria-checked="true"], [aria-pressed="true"], .is-selected, .selected, :has(> input:checked)) .ps-choice__mark::after { transform: scale(1); }
/* a pick-one tile has no round bullet (GTM-337, Nov 7, Sisi): the top edge says which is picked; a pick-many tile keeps its checkbox */
.ps-choice:not([role="checkbox"], .ps-choice--multi, :has(> input[type="checkbox"])) > .ps-choice__mark { display: none; }
/* A static option row (GTM-361, My Pay "How you get paid"): the tile's look with its own buttons in __actions, not a
   control itself, so no pointer and no press. .is-selected marks the one in use. */
.ps-choice--static { cursor: default; }
.ps-choice--static:hover { box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-choice--static:active { transform: none; }
.ps-choice__actions { flex: none; align-self: center; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ps-space-2); }
@media (max-width: 560px) { .ps-choice--static { flex-wrap: wrap; } .ps-choice--static .ps-choice__actions { width: 100%; justify-content: flex-start; } }
.ps-choice:is([role="checkbox"], .ps-choice--multi, :has(> input[type="checkbox"])):is([aria-checked="true"], [aria-pressed="true"], .is-selected, .selected, :has(> input:checked)) .ps-choice__mark::after { transform: rotate(-45deg) scale(1); }
.ps-choice:is([aria-checked="true"], [aria-pressed="true"], .is-selected, .selected, :has(> input:checked)) .ps-choice__icon { background: color-mix(in srgb, var(--ps-color-lime-neon) 22%, transparent); color: var(--ps-ok-text); }
.ps-choice:is(:disabled, [aria-disabled="true"], :has(> input:disabled)) { opacity: .45; cursor: not-allowed; transform: none; }
.ps-choice--compact { padding: 14px; align-items: center; }   /* every choice card 14px all round (Sisi, Nov 7) */
/* A pair of tiles on one row across the whole grid, two across even on a phone, the simple one first (the Brief Generator's
   "Talking head" and "Talking head + B-roll", Oct 13): <div class="ps-choices__pair"> around two .ps-choice in a .ps-choices. */
.ps-choices__pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: inherit; }
.ps-choice--compact .ps-choice__icon { width: 28px; height: 28px; border-radius: 9px; }
/* ---------- Choice groups: several labelled sets of checkbox tiles in one list (a Creative's equipment: Cameras, Lenses,
   Lighting, Audio; Natalia, Nov 5) ----------
   <div class="ps-choice-groups"> around one <div class="ps-choice-group"> per set: a .ps-choice-group__label (its id names the
   set's role=group), a .ps-choices of tiles, and an optional .ps-msg.ps-msg--error under them, the set's own message (what it
   still needs), never one message at the bottom of the screen. Sets sit 24px apart; inside a set the label is a small caps
   heading 8px above denser tiles: body-size regular words, a smaller mark, 52px tall, at least 200px wide. */
.ps-choice-groups { display: grid; gap: var(--ps-space-5); min-width: 0; }
.ps-choice-group { display: grid; gap: var(--ps-space-2); min-width: 0; }
.ps-choice-group__label { margin: 0; font: var(--ps-weight-medium) calc(var(--ps-type-label) * 1.2)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-2); }
.ps-choice-groups .ps-choice-group > .ps-choices { --ps-choice-min: 200px; gap: var(--ps-space-2); }
.ps-choice-groups .ps-choice-group .ps-choice { min-height: 52px; padding: 14px; align-items: center; }
.ps-choice-groups .ps-choice-group .ps-choice__title { font: 400 var(--ps-type-body)/1.35 var(--ps-font-ui); }
.ps-choice-groups .ps-choice-group .ps-choice__mark { width: 18px; height: 18px; }
.ps-choice-group > .ps-msg { margin: 0; }

/* ---------- Wizard: a centered narrow column under a sticky progress bar with steps (onboarding, intake, GTM-289) ----------
   PS.wizard(root) shows one .ps-wizard__step at a time; the next step settles in from the side it comes from (a short
   slide and fade), the finished step's dot pops once and draws its check. Reduced motion: fades only. */
.ps-wizard { --ps-wizard-w: 640px; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; min-width: 0; width: 100%; }
.ps-wizard--wide { --ps-wizard-w: 820px; }
.ps-wizard--inline { min-height: 0; border-radius: var(--ps-radius-card); }
.ps-wizard--inline .ps-wizard__bar { border-radius: var(--ps-radius-card) var(--ps-radius-card) 0 0; }
.ps-wizard__bar { position: sticky; top: 0; z-index: var(--ps-layer-sticky); padding: var(--ps-space-4) var(--ps-space-5) var(--ps-space-3);
  background: color-mix(in srgb, var(--ps-page) 78%, transparent); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 var(--ps-line); }
.ps-wizard__inner, .ps-wizard__body, .ps-wizard__nav { width: 100%; max-width: var(--ps-wizard-w); margin-inline: auto; min-width: 0; }
.ps-wizard__inner { display: flex; flex-direction: column; gap: var(--ps-space-3); box-sizing: border-box; }   /* its padding (the phone menu's room) stays inside the 100% */
.ps-wizard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-3); min-height: 24px; }
.ps-wizard__top > * { min-width: 0; }
.ps-wizard__top > [data-wizard-label] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a long step name shrinks; the row never pushes past the edge */
.ps-wizard__body { flex: 1 0 auto; padding: var(--ps-space-6) var(--ps-space-5) var(--ps-space-7);
  overflow-x: clip; overflow-clip-margin: var(--ps-space-2); }   /* B-13: the step's slide-in (18px) never widens the page; clip keeps the bar sticky and focus rings whole */
.ps-wizard__step { display: flex; flex-direction: column; gap: var(--ps-space-6); outline: none; }
.ps-wizard__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-3); padding-top: var(--ps-space-2); }
.ps-wizard__nav > .ps-btn--accent, .ps-wizard__nav > .ps-btn--primary { margin-left: auto; }
@keyframes ps-step-in { from { opacity: 0; transform: translateX(var(--ps-step-from, 18px)); } }
@keyframes ps-step-fade { from { opacity: 0; } }
.ps-wizard__step.is-entering { animation: ps-step-in 340ms var(--ps-ease-out) both; }
.ps-wizard__step.is-entering.is-back { --ps-step-from: -18px; }
/* the progress line: lime to lavender, glides to the new value (PS.wizard sets --ps-progress, 0 to 1) */
.ps-progress { position: relative; height: 4px; border-radius: 4px; background: var(--ps-chip); overflow: hidden; }
.ps-progress > i { position: absolute; inset: 0; border-radius: inherit; background: var(--ps-accent-bar); transform-origin: left center; transform: scaleX(var(--ps-progress, 0));
  transition: transform 520ms var(--ps-ease-out); }
/* the steps: a dot per step, the current one filled, finished ones lime with a check; on phones the dots only (the bar's label names the step) */
.ps-steps { display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; counter-reset: ps-step; }
.ps-steps > li { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; counter-increment: ps-step;
  font: 500 var(--ps-type-micro)/1.2 var(--ps-font-ui); color: var(--ps-fg-3); text-align: center; }
.ps-steps > li + li::before { content: ""; position: absolute; top: 9px; right: calc(50% + 14px); left: calc(-50% + 14px); height: 1.5px; border-radius: 2px; background: var(--ps-line);
  transition: background-color var(--ps-dur-base) ease; }
.ps-steps > li.is-done + li::before { background: var(--ps-fg-3); }
.ps-steps__dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ps-chip); color: var(--ps-fg-2);
  box-shadow: inset 0 0 0 1.5px var(--ps-line); font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums;
  transition: background-color var(--ps-dur-base) ease, color var(--ps-dur-base) ease, box-shadow var(--ps-dur-base) ease; }
.ps-steps__dot::before { content: counter(ps-step); }
.ps-steps__dot .ps-icon { position: absolute; width: 12px; height: 12px; opacity: 0; }
.ps-steps__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-steps > li[aria-current="step"] { color: var(--ps-fg); }
.ps-steps > li[aria-current="step"] .ps-steps__dot { background: var(--ps-color-sprout-strong); color: var(--ps-color-ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ps-color-sprout) 55%, transparent); }   /* lime is "now" (Oct 9) */
.ps-steps > li.is-done { color: var(--ps-fg-2); }
.ps-steps > li.is-done .ps-steps__dot { background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none; }
.ps-steps > li.is-done .ps-steps__dot::before { content: ""; }
.ps-steps > li.is-done .ps-steps__dot .ps-icon { opacity: 1; }
@keyframes ps-step-pop { 40% { transform: scale(1.28); } 100% { transform: none; } }
@keyframes ps-icon-in { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }   /* a check arriving (solid glyphs, so it pops in rather than drawing on) */
.ps-steps > li.is-just-done .ps-steps__dot { animation: ps-step-pop 420ms var(--ps-ease-out); }
.ps-steps > li.is-just-done .ps-steps__dot .ps-icon { animation: ps-icon-in 280ms var(--ps-ease-out) 120ms both; }
@media (max-width: 720px) {
  .ps-wizard__bar { padding: var(--ps-space-3) var(--ps-space-4) var(--ps-space-2); }
  .ps-wizard__body { padding: var(--ps-space-5) var(--ps-space-4) var(--ps-space-7); }
  .ps-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* the bar's label names the step */
  .ps-wizard__nav > .ps-btn { flex: 1 1 auto; }
}

/* ---------- Game (Oct 9, GTM-289): a short intake played one question per screen, in rounds, beside a card that builds
   as you answer. .ps-game-wrap lays out the stage and the card (below 960px the card rides on top as a slim bar);
   .ps-game is the stage (round pills, the progress line, one .ps-game__screen at a time, a footer); .ps-versus is
   "this or that" (two picks, each word in its own type); .ps-scan is the agents-reading moment (a checklist that ticks
   in); .ps-element is the element card (the locked periodic-table element: number, symbol, name), its --fill (0-1)
   rising purple to lime. Reduced motion: no slides, pops or breathing; fades only. ---------- */
.ps-game-wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 300px); gap: var(--ps-space-6); align-items: start; padding-block: var(--ps-space-6) var(--ps-space-7); }
.ps-game { position: relative; display: grid; gap: var(--ps-space-5); padding: clamp(var(--ps-space-5), 4vw, var(--ps-space-7)); border-radius: var(--ps-radius-card); min-height: 460px; align-content: start; }
.ps-game__top { display: grid; gap: var(--ps-space-3); }
.ps-game__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--ps-space-3); }
.ps-game__rounds { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-game__round { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--ps-radius-pill); background: var(--ps-chip); color: var(--ps-fg-3);
  font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); transition: background-color var(--ps-dur-base) ease, color var(--ps-dur-base) ease; }
.ps-game__round b { font: 400 calc(var(--ps-type-caption) * 1.25)/1 var(--ps-font-display); }
.ps-game__round.is-now { background: var(--ps-color-sprout-strong); color: var(--ps-color-ink); }
.ps-game__round.is-done { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-game__round.is-locked { background: transparent; box-shadow: inset 0 0 0 1px var(--ps-line-strong); color: var(--ps-fg-3); }   /* Free: the AI rounds, there but not played (GTM-434, B-72) */
.ps-game__screen { display: grid; gap: var(--ps-space-5); animation: ps-game-in 260ms var(--ps-ease-out) both; }
.ps-game__screen.is-back { animation-name: ps-game-back; }
@keyframes ps-game-in { from { opacity: 0; transform: translateX(18px); } }
@keyframes ps-game-back { from { opacity: 0; transform: translateX(-18px); } }
.ps-game__q { display: grid; gap: var(--ps-space-2); }
.ps-game__q > h2 { margin: 0; font: 400 clamp(var(--ps-type-section), 4.2vw, var(--ps-type-question))/.95 var(--ps-font-display); text-wrap: balance; outline: none; }
.ps-game__q > p { margin: 0; color: var(--ps-fg-2); }
.ps-game__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--ps-space-3); }
.ps-game__foot > .ps-btn--accent { min-width: 9em; margin-left: auto; }
.ps-game__keys { color: var(--ps-fg-3); font-size: var(--ps-type-caption); }
.ps-game .ps-choices { --ps-choice-min: 190px; }
.ps-game .ps-choice__title { overflow-wrap: anywhere; }
.ps-game .ps-input:focus, .ps-game .ps-input:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ps-accent-stroke), 0 0 0 4px color-mix(in oklab, var(--ps-color-sprout) 45%, transparent); }
.ps-game__url { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-game__url > span { padding-left: 14px; color: var(--ps-fg-3); }
.ps-game__url .ps-input { box-shadow: none; background: none; padding-left: 4px; }
.ps-game__url:focus-within { box-shadow: inset 0 0 0 1.5px var(--ps-accent-stroke), 0 0 0 4px color-mix(in oklab, var(--ps-color-sprout) 45%, transparent); }
.ps-game__url .ps-input:focus, .ps-game__url .ps-input:focus-visible { box-shadow: none; }
.ps-choice.is-pop { animation: ps-pop 280ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ps-pop { 40% { transform: scale(1.04); } }

.ps-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-width: 0; align-items: stretch; gap: var(--ps-space-3); }
.ps-versus__or { align-self: center; justify-self: center; font: 400 var(--ps-type-human)/1 var(--ps-font-human); color: var(--ps-fg-3); }
.ps-versus__pick { display: grid; place-items: center; min-height: 180px; padding: var(--ps-space-5); border: 0; border-radius: var(--ps-radius-card); cursor: pointer; font: inherit;
  background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); color: var(--ps-fg); -webkit-tap-highlight-color: transparent;
  transition: transform var(--ps-dur-press) ease, box-shadow var(--ps-dur-base) ease, background-color var(--ps-dur-base) ease; }
.ps-versus__pick:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--ps-fg-3), 0 16px 30px -18px var(--ps-color-sprout-strong); }   /* lime: lavender means AI only */
.ps-versus__pick:active { transform: scale(var(--ps-press-scale)); }
.ps-versus__pick:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-versus__pick[aria-pressed="true"] { background: color-mix(in oklab, var(--ps-color-sprout) 55%, var(--ps-pop-bg)); box-shadow: inset 0 0 0 1.5px var(--ps-color-sprout-strong); }
.ps-versus__word { font-size: clamp(var(--ps-type-versus-phone), 3.4vw, var(--ps-type-versus)); line-height: 1; max-width: 100%; overflow-wrap: anywhere; }
.ps-versus__pick { gap: var(--ps-space-2); text-align: center; }   /* 24px all round: never less than 20px at the sides (Natalia, Nov 5) */
.ps-versus__hint { max-width: 22em; font: 400 var(--ps-type-caption)/1.45 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-versus__word--display { font-family: var(--ps-font-display); }
.ps-versus__word--light { font-family: var(--ps-font-ui); font-weight: var(--ps-weight-light); }
.ps-versus__word--medium { font-family: var(--ps-font-ui); font-weight: var(--ps-weight-medium); }
.ps-versus__word--human { font-family: var(--ps-font-human); }
/* --xl: 1.45 times the size (the application's Creative / Strategist: 1.7 on Oct 11, 15% smaller on Nov 5), one line always:
   capped by the card's width (cqi). The card keeps its 24px padding at the sides (it was cut to 8px for the bigger word). */
.ps-versus__pick:has(> .ps-versus__word--xl) { container-type: inline-size; }
.ps-versus__word--xl { font-size: min(calc(1.45 * clamp(var(--ps-type-versus-phone), 3.4vw, var(--ps-type-versus))), 21.5cqi); line-height: .9; white-space: nowrap; overflow-wrap: normal; }
.ps-versus__word--mark { font-family: var(--ps-font-mark); }

.ps-scan { display: grid; gap: var(--ps-space-3); padding: var(--ps-space-5); border-radius: var(--ps-radius-card); background: var(--ps-agent-bg); }
.ps-scan__head { display: flex; align-items: center; gap: var(--ps-space-2); color: var(--ps-agent-fg); font-weight: var(--ps-weight-medium); overflow-wrap: anywhere; }
.ps-scan__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ps-color-lavender); animation: ps-breathe 1.4s ease-in-out infinite; }
@keyframes ps-breathe { 50% { transform: scale(1.6); opacity: .5; } }
.ps-scan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ps-space-2); }
.ps-scan li { display: flex; align-items: center; gap: var(--ps-space-3); opacity: .35; transition: opacity var(--ps-dur-base) ease; }
.ps-scan li .ps-icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--ps-chip); color: transparent; transition: background-color var(--ps-dur-base) ease, color var(--ps-dur-base) ease; }
.ps-scan li.is-on { opacity: 1; }
.ps-scan li.is-on .ps-icon { background: var(--ps-color-sprout-strong); color: var(--ps-color-ink); }

.ps-element-card { position: sticky; top: calc(64px + var(--ps-space-5)); display: grid; gap: var(--ps-space-3); }
.ps-element { position: relative; aspect-ratio: 1; border-radius: 22%; container-type: inline-size; }   /* an element (the periodic-table tile): --brand, the brand card; --agent, an agent tile (one component, Oct 10) */
.ps-element--brand { --fill: 0; isolation: isolate; overflow: hidden; padding: 9%; display: grid; grid-template-rows: auto 1fr auto auto;
  color: var(--ps-color-ink); background: linear-gradient(155deg, var(--ps-color-white), var(--ps-color-greige-warm)); container-type: inline-size;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ps-color-white) 80%, transparent), 0 1px 2px color-mix(in oklab, var(--ps-color-ink) 6%, transparent), 0 24px 40px -22px var(--ps-color-lavender);
  transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1); }
.ps-element--brand::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9;
  background: linear-gradient(to top in oklch increasing hue, var(--ps-color-sprout), var(--ps-color-lavender-soft) 70%, var(--ps-color-lavender));   /* lime up through the cool hues to lavender, never through amber */
  clip-path: inset(calc((1 - var(--fill)) * 100%) 0 0 0); transition: clip-path 600ms var(--ps-ease-out); }
.ps-element--brand.is-bump { transform: scale(1.04) rotate(-1.5deg); }
.ps-element--full { --fill: 1; }   /* a finished element (the finish screen, examples) */
.ps-element--brand .ps-element__top { display: flex; justify-content: space-between; align-items: start; min-height: 12cqi; font: 400 12cqi/1 var(--ps-font-display); }
.ps-element--brand .ps-element__top .ps-icon { width: 11cqi; height: 11cqi; opacity: .75; }
.ps-element--brand .ps-element__sym { align-self: center; font: 400 44cqi/.8 var(--ps-font-display); }
.ps-element--brand .ps-element__sym.is-empty { color: color-mix(in oklab, var(--ps-color-ink) 18%, transparent); }
.ps-element--brand .ps-element__name { font: 500 7.5cqi/1.15 var(--ps-font-ui); overflow-wrap: anywhere; }
.ps-element--brand .ps-element__sub { min-height: 1.3em; font: 400 5.6cqi/1.3 var(--ps-font-ui); color: color-mix(in oklab, var(--ps-color-ink) 65%, transparent); }
.ps-element--tilt { transform: rotate(-3deg); animation: ps-reveal 700ms cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ps-reveal { from { transform: scale(.6) rotate(-12deg); opacity: 0; } }
.ps-element-card__vibe { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.ps-element-card__vibe .ps-chip { animation: ps-pop 300ms cubic-bezier(.34, 1.56, .64, 1); }
.ps-element-card__meter { display: flex; justify-content: space-between; align-items: center; gap: var(--ps-space-3); color: var(--ps-fg-2); font-size: var(--ps-type-caption); }
.ps-element-card__meter > span { display: grid; min-width: 0; }
.ps-element-card__meter strong { display: none; font-weight: var(--ps-weight-medium); color: var(--ps-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-element-card__meter b { font: 400 calc(var(--ps-type-caption) * 1.6)/1 var(--ps-font-display); color: var(--ps-fg); }
.ps-game-finish { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: var(--ps-space-6); align-items: center; }
.ps-game-wrap.is-done { grid-template-columns: minmax(0, 1fr); }
.ps-game-wrap.is-done > .ps-element-card { display: none; }
@media (max-width: 960px) {
  .ps-game-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-4); padding-block: var(--ps-space-4) var(--ps-space-6); }
  .ps-element-card { order: -1; top: calc(64px + var(--ps-space-2)); z-index: 2; display: flex; align-items: center; gap: var(--ps-space-3); padding: 10px 16px 10px 10px;
    border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); -webkit-backdrop-filter: var(--ps-glass-blur); backdrop-filter: var(--ps-glass-blur);
    box-shadow: inset 0 0 0 1px var(--ps-line), 0 12px 24px -18px var(--ps-color-lavender); }
  .ps-element-card .ps-element { flex: none; width: 52px; border-radius: 16px; padding: 0; grid-template-rows: 1fr; place-items: center; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ps-color-white) 80%, transparent); }
  .ps-element-card :is(.ps-element__top, .ps-element__name, .ps-element__sub), .ps-element-card__vibe { display: none; }
  .ps-element-card .ps-element__sym { font-size: 46cqi; }
  .ps-element-card__meter { flex: 1; min-width: 0; }
  .ps-element-card__meter strong { display: block; }
  .ps-game { min-height: 0; }
  .ps-game-finish { grid-template-columns: minmax(0, 1fr); }
  .ps-game-finish .ps-element--brand { width: min(240px, 66vw); justify-self: center; order: -1; }
}
@media (max-width: 600px) {
  .ps-versus { grid-template-columns: minmax(0, 1fr); }
  .ps-versus__pick { min-height: 110px; }
  .ps-game__round:not(.is-now) > span { display: none; }
  .ps-game__keys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-game__screen, .ps-choice.is-pop, .ps-element-card__vibe .ps-chip, .ps-element--tilt, .ps-scan__dot { animation: none; }
  .ps-element--brand, .ps-element--brand::before { transition: none; }
  .ps-element--brand.is-bump { transform: none; }
}
/* ---------- Game opening and fit (Oct 31, Sisi, GTM-389): every game (.ps-game) in the portal.
   .ps-game-opening  the game's intro played once, as an opening screen, while the game loads: an optional eyebrow, the statement
                     (light line, bold line, an optional hand line), the meta line (its " · " parts tick in one by one), an optional
                     lede and a thin loading line; .is-in plays it, .is-leaving takes it away, then the game comes in (.is-entering).
                     With a Start button (data-opening-start) it waits for the tap instead of the load. PS.gameOpening (ps-ui.js).
   .ps-game-fit      on the game's host (or the .ps-game-wrap itself): the game card fills the screen below the page head and
                     above the tab bar and floating buttons (--ps-game-h, measured by PS.gameFit); only the round inside scrolls
                     (.ps-game__screen, or .ps-game__body around the screens), and only when it truly overflows. The element card
                     beside it stays within the same height. Reduced motion: a plain fade, no rise or wipe. ---------- */
.ps-game-opening { display: grid; align-content: center; gap: var(--ps-space-4); min-height: clamp(320px, 62dvh, 640px); padding-block: var(--ps-space-6); }
.ps-game-opening .ps-statement { overflow: hidden; padding-bottom: .06em; }
.ps-game-opening__meta { display: flex; flex-wrap: wrap; gap: var(--ps-space-1) var(--ps-space-2); margin: 0; padding: 0; list-style: none; color: var(--ps-fg-2); }
.ps-game-opening__meta > li { display: inline-flex; align-items: center; gap: var(--ps-space-2); }
.ps-game-opening__meta > li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ps-fg-3); }
.ps-game-opening__lede { margin: 0; max-width: 40em; color: var(--ps-fg-2); }
.ps-game-opening__line { width: min(240px, 60%); height: 3px; border-radius: 3px; background: var(--ps-chip); overflow: hidden; }
.ps-game-opening__line > i { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--ps-accent-bar); animation: ps-opening-load 1.3s var(--ps-ease-in-out) infinite; }
.ps-game-opening:has([data-opening-start]) .ps-game-opening__line { display: none; }
@keyframes ps-opening-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* the play: armed by PS.gameOpening (so an opening in the page's HTML still reads without it), each part waits for .is-in */
.ps-game-wrap > .ps-game-opening { grid-column: 1 / -1; }
.ps-game-opening.is-armed :is(.ps-labelcaps, .ps-statement__light, .ps-statement__hand, .ps-game-opening__meta > li, .ps-game-opening__lede, .ps-game-opening__line, .ps-game-opening__go) { opacity: 0; }
.ps-game-opening.is-armed .ps-statement__bold { clip-path: inset(0 0 100% 0); }
.ps-game-opening.is-in .ps-labelcaps { animation: ps-opening-rise 520ms var(--ps-ease-out) both; }
.ps-game-opening.is-in .ps-statement__light { animation: ps-opening-rise 620ms var(--ps-ease-out) 80ms both; }
.ps-game-opening.is-in .ps-statement__bold { animation: ps-opening-wipe 760ms var(--ps-ease-out) 260ms both; }
.ps-game-opening.is-in .ps-statement__hand { animation: ps-opening-hand 520ms var(--ps-ease-out) 760ms both; }
.ps-game-opening.is-in .ps-game-opening__meta > li { animation: ps-opening-rise 420ms var(--ps-ease-out) both; animation-delay: calc(820ms + var(--i, 0) * 110ms); }
.ps-game-opening.is-in :is(.ps-game-opening__lede, .ps-game-opening__go) { animation: ps-opening-rise 520ms var(--ps-ease-out) 1100ms both; }
.ps-game-opening.is-in .ps-game-opening__line { animation: ps-opening-fade 400ms ease 900ms both; }
@keyframes ps-opening-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ps-opening-wipe { from { clip-path: inset(0 0 100% 0); transform: translateY(.35em); } to { clip-path: inset(0 0 -10% 0); transform: none; } }
@keyframes ps-opening-hand { from { opacity: 0; transform: translateY(10px) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes ps-opening-fade { from { opacity: 0; } to { opacity: 1; } }
.ps-game-opening.is-leaving { pointer-events: none; animation: ps-opening-leave 420ms var(--ps-ease-out) both; }
@keyframes ps-opening-leave { to { opacity: 0; transform: translateY(-24px) scale(.98); } }
.ps-game-opening.is-leaving * { animation-play-state: paused; }
.is-entering > .ps-game-wrap, .ps-game-wrap.is-entering { animation: ps-opening-rise 480ms var(--ps-ease-out) both; }
/* the fit */
:is(.ps-game-fit .ps-game-wrap, .ps-game-wrap.ps-game-fit):not(.is-done) { padding-block: 0 var(--ps-space-3); align-items: start; }
:is(.ps-game-fit .ps-game-wrap, .ps-game-wrap.ps-game-fit):not(.is-done) > .ps-game { display: flex; flex-direction: column; height: var(--ps-game-h, auto); min-height: 0; }
:is(.ps-game-fit .ps-game-wrap, .ps-game-wrap.ps-game-fit) > .ps-game > * { flex: none; }
:is(.ps-game-fit .ps-game-wrap, .ps-game-wrap.ps-game-fit) > .ps-game > :is(.ps-game__screen, .ps-game__body) { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  align-content: start; margin: -6px; padding: 6px; scrollbar-width: thin; }   /* the 6px keeps the focus rings inside the scroller */
/* a message in the scroller keeps its full height: .ps-msg's min-height let it shrink to one line, the rest cut off (Nov 4) */
:is(.ps-game-fit .ps-game-wrap, .ps-game-wrap.ps-game-fit) > .ps-game > .ps-game__body > .ps-msg { flex-shrink: 0; }
:is(.ps-game-fit .ps-game-wrap, .ps-game-wrap.ps-game-fit) > .ps-game > .ps-game__foot { margin-top: auto; }
:is(.ps-game-fit .ps-game-wrap, .ps-game-wrap.ps-game-fit) > .ps-element-card { max-height: var(--ps-game-h, none); }
@media (min-width: 961px) {
  :is(.ps-game-fit .ps-game-wrap, .ps-game-wrap.ps-game-fit) > .ps-element-card { top: 0; }
  :is(.ps-game-fit .ps-game-wrap, .ps-game-wrap.ps-game-fit) > .ps-element-card > .ps-element { width: min(100%, calc(var(--ps-game-h, 100vh) - 120px)); }
}
@media (max-width: 960px) { :is(.ps-game-fit .ps-game-wrap, .ps-game-wrap.ps-game-fit):not(.is-done) { gap: var(--ps-space-3); } }
/* phones (Natalia, Nov 5): the page already scrolls, so the card grows with its round and nothing scrolls inside it; the
   fit (a card the height of the screen) stays from 601px up. Back and Continue come after the round's content. */
@media (max-width: 600px) {
  :is(.ps-game-fit .ps-game-wrap, .ps-game-wrap.ps-game-fit):not(.is-done) > .ps-game { height: auto; }
  :is(.ps-game-fit .ps-game-wrap, .ps-game-wrap.ps-game-fit) > .ps-game > :is(.ps-game__screen, .ps-game__body) { flex: none; overflow: visible; }
  :is(.ps-game-fit .ps-game-wrap, .ps-game-wrap.ps-game-fit) > .ps-element-card { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-game-opening.is-armed :is(.ps-labelcaps, .ps-statement__light, .ps-statement__hand, .ps-game-opening__meta > li, .ps-game-opening__lede, .ps-game-opening__line, .ps-game-opening__go) { opacity: 1; }
  .ps-game-opening.is-armed .ps-statement__bold { clip-path: none; }
  .ps-game-opening.is-in :is(.ps-labelcaps, .ps-statement__light, .ps-statement__bold, .ps-statement__hand, .ps-game-opening__meta > li, .ps-game-opening__lede, .ps-game-opening__go, .ps-game-opening__line) { animation: none; }
  .ps-game-opening { animation: ps-opening-fade 240ms ease both; }
  .ps-game-opening__line > i { animation: none; width: 100%; opacity: .5; }
  .ps-game-opening.is-leaving { animation: ps-opening-out 200ms ease both; }
  .is-entering > .ps-game-wrap, .ps-game-wrap.is-entering { animation: ps-opening-fade 200ms ease both; }
}
@keyframes ps-opening-out { to { opacity: 0; } }
/* The free brand profile quiz (GTM-376, Oct 20): the branches' pieces and its reveal.
   .ps-filecard   a file kept on the device (thumb, name and size, Remove)
   .ps-colorwell  one brand color: a swatch that opens the color picker (its input covers it), the hex beside it
   .ps-axis       a personality axis: left word, a track with their mark at --axis-at (0-1), right word; the word it leans to is .is-on
   .ps-persona    the reveal's personality as one table (Natalia, Oct 21): the .ps-axis rows, a hairline, then .ps-traits, a <dl> on the
                  same three columns (the term where the axes' left words are, the words across the track and the right word);
                  words are text, not chips (nothing here is a control); dd.is-never is struck through and stays readable
   .ps-stagger    children rise in one after another (the reveal's sections, a color list)
   .ps-forming    the forming moment: the element filling beside the .ps-scan checklist
   .ps-element__sym > img   a logo in place of the element's symbol */
.ps-filecard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ps-space-3); padding: var(--ps-space-2) var(--ps-space-3);
  border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); animation: ps-wrise 280ms var(--ps-ease-out) both; }
.ps-filecard__thumb { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: var(--ps-chip); color: var(--ps-fg-2); }
.ps-filecard__thumb > img { width: 100%; height: 100%; object-fit: contain; }
.ps-filecard__body { display: grid; min-width: 0; }
.ps-filecard__body > b { font-weight: var(--ps-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-colorwell { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ps-space-2); }
.ps-colorwell__swatch { position: relative; width: 52px; height: 52px; border-radius: 14px; background: var(--ps-series, var(--ps-chip)); box-shadow: inset 0 0 0 1px var(--ps-line);
  transition: transform var(--ps-dur-press) ease; animation: ps-pop 300ms cubic-bezier(.34, 1.56, .64, 1); }
.ps-colorwell__swatch:hover { transform: scale(1.06); }
.ps-colorwell__swatch:focus-within { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-colorwell__swatch > input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.ps-colorwell__hex { font-variant-numeric: tabular-nums; text-transform: uppercase; }
.ps-axis { --axis-at: .5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 2fr) minmax(0, 1fr); align-items: center; gap: var(--ps-space-3); color: var(--ps-fg-3); font-size: var(--ps-type-caption); }
.ps-axis > span:last-child { text-align: right; }
.ps-axis > .is-on { color: var(--ps-fg); font-weight: var(--ps-weight-medium); }
.ps-axis__track { position: relative; height: 8px; border-radius: var(--ps-radius-pill); background: linear-gradient(90deg in oklch, var(--ps-color-lavender-soft), var(--ps-color-sprout)); }
.ps-axis__track > i { position: absolute; top: 50%; left: calc(var(--axis-at) * 100%); width: 18px; height: 18px; border-radius: 50%; translate: -50% -50%;
  background: var(--ps-color-ink); box-shadow: 0 0 0 3px var(--ps-pop-bg), 0 6px 14px -6px var(--ps-color-ink); animation: ps-axis-in 700ms var(--ps-ease-out) both; }
@keyframes ps-axis-in { from { left: 50%; } }
.ps-persona { display: grid; gap: var(--ps-space-5); }
.ps-persona__axes { display: grid; gap: var(--ps-space-3); }
.ps-traits { display: grid; gap: var(--ps-space-3); margin: 0; padding-top: var(--ps-space-5); border-top: 1px solid var(--ps-line); }
.ps-traits__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 2fr) minmax(0, 1fr); align-items: baseline; gap: var(--ps-space-3); }
.ps-traits__row > dt { color: var(--ps-fg-3); font-size: var(--ps-type-caption); }
.ps-traits__row > dd { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--ps-space-1) var(--ps-space-4); margin: 0; color: var(--ps-fg); font-weight: var(--ps-weight-medium); }
.ps-traits__row > dd.is-never { color: var(--ps-fg-2); font-weight: 400; text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--ps-fg-3); }
.ps-traits__row > dd > span { white-space: nowrap; }
.ps-stagger > * { animation: ps-wrise 420ms var(--ps-ease-out) both; }
.ps-stagger > :nth-child(2) { animation-delay: 70ms; } .ps-stagger > :nth-child(3) { animation-delay: 140ms; } .ps-stagger > :nth-child(4) { animation-delay: 210ms; }
.ps-stagger > :nth-child(5) { animation-delay: 280ms; } .ps-stagger > :nth-child(n+6) { animation-delay: 350ms; }
.ps-forming { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: var(--ps-space-6); align-items: center; padding-block: var(--ps-space-7); }
.ps-element--forming { animation: ps-forming 1.6s ease-in-out infinite alternate; }
@keyframes ps-forming { from { transform: rotate(-3deg) scale(.98); } to { transform: rotate(2deg) scale(1.02); } }
.ps-element--brand .ps-element__sym > img { display: block; max-width: 86%; max-height: 46cqi; object-fit: contain; }
.ps-element-card .ps-element__sym > img { max-height: 70cqi; }
@media (max-width: 600px) {
  .ps-forming { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-block: var(--ps-space-5); }
  .ps-forming .ps-element { width: min(220px, 60vw); }
  /* on a phone (Oct 31) an axis is its two words on one line and the whole track under them, so a long word never squeezes the track */
  .ps-axis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-1) var(--ps-space-2); }
  .ps-axis > .ps-axis__track { grid-column: 1 / -1; grid-row: 2; }
  .ps-persona__axes { gap: var(--ps-space-4); }
  .ps-traits__row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--ps-space-2); }
}
/* .ps-palettes   color directions as rows, two per row on wide screens and one on a phone. Each row is a .ps-colorrow (not
                  .ps-palette, the "/" command palette): a .ps-colorrow__label over one full-width .ps-colorrow__bar of its colors
                  (> i, each --ps-series); the bar is a button when it can be previewed, aria-pressed on the one shown
   .ps-typepicks  the type pairings to pick: .ps-choice--stack cards, the brand's name in each heading face
   .ps-savecta    a save prompt in the flow (a line and its button); .ps-save-modal the save form shown in a dialog (flat, the dialog titles it)
   .ps-stephead   a numbered step's heading (Natalia, Oct 21: 1 choose a palette, 2 choose a pairing, 3 see your combination):
                  .ps-stephead__n, the number in a lime circle, then the step's words
   .ps-usegrid    the brand in use: always three small tiles in one row (post, story, ad), so every combination fits one screen */
.ps-palettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-3) var(--ps-space-4); }
.ps-colorrow { display: grid; gap: var(--ps-space-2); min-width: 0; }
.ps-colorrow__label { display: flex; justify-content: space-between; align-items: center; gap: var(--ps-space-2); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-colorrow__bar { display: flex; height: 48px; border-radius: var(--ps-radius-control); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-colorrow__bar > i { flex: 1 1 0; background: var(--ps-series, var(--ps-chip)); }
button.ps-colorrow__bar { width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; transition: box-shadow var(--ps-dur-press) ease; }
button.ps-colorrow__bar:hover { box-shadow: inset 0 0 0 1px var(--ps-fg-3); }
button.ps-colorrow__bar[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--ps-line), 0 0 0 2px var(--ps-pop-bg), 0 0 0 4px var(--ps-color-sprout-strong); }   /* the one previewed */
button.ps-colorrow__bar:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 6px; }
.ps-stephead { display: flex; align-items: center; gap: var(--ps-space-3); margin: 0; font: var(--ps-weight-medium) var(--ps-type-lede)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-stephead__n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ps-color-sprout); color: var(--ps-color-ink);
  font: 600 var(--ps-type-caption)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums; }
.ps-typepicks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-3); }   /* two by two (four pairings); one column on a phone */
@media (max-width: 600px) { .ps-typepicks { grid-template-columns: minmax(0, 1fr); } }   /* type pairings to pick: .ps-choice--stack cards */
.ps-typepicks > .ps-choice { justify-content: flex-start; }
.ps-savecta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ps-space-3); padding: var(--ps-space-4);
  border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }   /* a save prompt in the flow: a line, then its button */
.ps-savecta__text { flex: 1 1 260px; margin: 0; color: var(--ps-fg); font-weight: var(--ps-weight-medium); }
.ps-save-modal .ps-modal__body > .ps-card { padding: var(--ps-space-1) 0 0; background: none; box-shadow: none; backdrop-filter: none; }   /* the save form in its dialog: flat, the dialog's title instead of its own */
.ps-save-modal .ps-modal__body > .ps-card > .ps-section { display: none; }
.ps-save-modal .ps-modal__body > .ps-card > .ps-section + * { margin-top: 0; }   /* the line under it no longer tucks under a heading */
.ps-typepicks .ps-brandfont { max-width: 100%; overflow-wrap: anywhere; }
.ps-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-2); }   /* a list of features: two per row, a lone last one spans */
.ps-features > .ps-choice { align-items: start; }
.ps-features > .ps-choice > * { align-self: start; }
.ps-features > .ps-choice:last-child:nth-child(even) { grid-column: 1 / -1; }
@media (max-width: 600px) { .ps-features { grid-template-columns: minmax(0, 1fr); } }
.ps-feature { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ps-space-3) var(--ps-space-4); align-items: start; padding: var(--ps-space-5);
  border: 0; border-radius: var(--ps-radius-card); font: inherit; text-align: left; cursor: pointer; color: var(--ps-fg);
  background: linear-gradient(135deg, color-mix(in oklab, var(--ps-color-lavender-soft) 70%, var(--ps-pop-bg)), color-mix(in oklab, var(--ps-color-sprout) 45%, var(--ps-pop-bg)));
  box-shadow: inset 0 0 0 1.5px var(--ps-color-lavender), 0 20px 40px -26px var(--ps-color-lavender); transition: transform var(--ps-dur-press) ease; }   /* the star of a list of features (AI Studio on the quiz's reveal) */
.ps-feature:hover { transform: translateY(-2px); }
.ps-feature:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-feature__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--ps-color-ink); color: var(--ps-color-white); }
.ps-feature__body { display: grid; gap: var(--ps-space-2); min-width: 0; }
.ps-feature__title { font: 400 var(--ps-type-section)/1 var(--ps-font-display); }
.ps-feature__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-2) var(--ps-space-4); margin: var(--ps-space-1) 0 0; padding: 0; list-style: none; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-feature__list b { display: block; color: var(--ps-fg); font-weight: var(--ps-weight-medium); font-size: var(--ps-type-body); }
@media (max-width: 600px) { .ps-feature { grid-template-columns: auto minmax(0, 1fr); } .ps-feature > .ps-badge { grid-column: 1 / -1; justify-self: start; } .ps-feature__list { grid-template-columns: minmax(0, 1fr); } }
.ps-usegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-2); max-width: 560px; }
.ps-usegrid > .ps-brandtile { padding: var(--ps-space-3); gap: var(--ps-space-1); }
.ps-usegrid .ps-brandfont--lg { font-size: clamp(13px, 2.6vw, 20px); line-height: 1.05; }
.ps-usegrid .ps-brandfont--body { font-size: clamp(9px, 1.6vw, 12px); line-height: 1.3; }
.ps-usegrid .ps-brandtile--logo { padding: 4px 8px; font-size: clamp(9px, 1.6vw, 12px); }
@media (max-width: 600px) { .ps-palettes { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .ps-filecard, .ps-colorwell__swatch, .ps-axis__track > i, .ps-stagger > *, .ps-element--forming { animation: none; }
}

/* ---------- Offer deck (Oct 10, GTM-329): the Prompt app's offer screen on a public page. .ps-deck-hero lays the statement
   beside the deck; .ps-deck is an Online switch over a fanned stack of .ps-offer cards (the pay is the loudest line on each
   card). Pass throws the top card away and the next one rises; Offline rests the deck. .ps-howto is a numbered sequence
   (the order matters); .ps-ladder--climb names each level loud with what it means under it, steps running purple to lime.
   Reduced motion: no throws, cards swap in place. ---------- */
.ps-deck-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: clamp(var(--ps-space-6), 6vw, calc(var(--ps-space-7) * 2)); align-items: center;
  padding-block: clamp(var(--ps-space-6), 7vw, calc(var(--ps-space-7) * 2)) var(--ps-space-7); }
.ps-deck-hero__copy { display: grid; gap: var(--ps-space-5); align-content: center; min-width: 0; }
.ps-deck-hero__copy .ps-lede { max-width: 30em; }
.ps-deck-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-3) var(--ps-space-5); }
.ps-deck { display: grid; gap: var(--ps-space-4); justify-items: center; min-width: 0; }
.ps-deck__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-4); width: min(380px, 100%); padding: 10px 12px 10px 16px;
  border-radius: var(--ps-radius-pill); background: var(--ps-glass-strong); -webkit-backdrop-filter: var(--ps-glass-blur); backdrop-filter: var(--ps-glass-blur);
  box-shadow: inset 0 0 0 1px var(--ps-line), 0 10px 24px -18px color-mix(in oklab, var(--ps-color-ink) 40%, transparent); }
.ps-deck__state { display: inline-flex; align-items: center; gap: var(--ps-space-2); font-weight: var(--ps-weight-medium); }
.ps-deck__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ps-fg-3); transition: background-color var(--ps-dur-base) ease, box-shadow var(--ps-dur-base) ease; }
.ps-deck.is-online .ps-deck__dot { background: var(--ps-accent-stroke); box-shadow: 0 0 0 4px var(--ps-ok-soft); }
.ps-deck__stack { position: relative; display: grid; width: min(380px, 100%); margin-bottom: var(--ps-space-5); }   /* room for the fanned cards under the top one */
.ps-deck__stack > * { grid-area: 1 / 1; }
.ps-deck__rest { display: grid; place-items: center; align-content: center; gap: var(--ps-space-2); min-height: 300px; padding: var(--ps-space-6); border-radius: var(--ps-radius-card);
  text-align: center; color: var(--ps-fg-2); background: var(--ps-chip); box-shadow: inset 0 0 0 1px var(--ps-line); opacity: 0; transition: opacity var(--ps-dur-move) var(--ps-ease-out); }
.ps-deck__rest strong { font: 400 var(--ps-type-section)/1 var(--ps-font-display); color: var(--ps-fg); }
.ps-deck:not(.is-online) .ps-deck__rest, .ps-deck.is-empty .ps-deck__rest { opacity: 1; }
.ps-deck__note { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ps-space-2) var(--ps-space-4); color: var(--ps-fg-3); font-size: var(--ps-type-caption); text-align: center; }
.ps-offer { --i: 0; position: relative; display: grid; gap: var(--ps-space-3); padding: var(--ps-space-5); border-radius: var(--ps-radius-card); background: var(--ps-pop-bg); color: var(--ps-fg);
  box-shadow: inset 0 0 0 1px var(--ps-line), 0 2px 4px color-mix(in oklab, var(--ps-color-ink) 5%, transparent), 0 24px 44px -26px color-mix(in oklab, var(--ps-color-ink) 45%, transparent);
  transform-origin: 50% 120%; transform: translateY(calc(var(--i) * 14px)) rotate(calc(var(--i) * 3deg)) scale(calc(1 - var(--i) * .04));
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 320ms ease, filter 320ms ease; }
.ps-offer:not(.is-top) { pointer-events: none; filter: saturate(.7); }
.ps-offer:not(.is-top) > :not(.ps-offer__top) { opacity: .55; }
.ps-offer.is-gone { transform: translateX(-120%) rotate(-14deg); opacity: 0; }
.ps-offer.is-taken { transform: translateY(-16px) scale(1.02); box-shadow: inset 0 0 0 1.5px var(--ps-color-sprout-strong), 0 26px 50px -24px var(--ps-color-sprout-strong); }
.ps-deck:not(.is-online) .ps-offer { opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none; }
.ps-offer__top { display: flex; justify-content: space-between; align-items: center; gap: var(--ps-space-3); color: var(--ps-fg-3); font-size: var(--ps-type-caption); }
.ps-offer__title { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); }
.ps-offer__brief { display: flex; gap: var(--ps-space-2); align-items: flex-start; margin: 0; color: var(--ps-fg-2); font-size: var(--ps-type-caption); line-height: 1.45; }
.ps-offer__brief .ps-dot { margin-top: 6px; flex: none; }
.ps-offer__meta { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-offer__pay { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ps-space-3); padding: var(--ps-space-3) var(--ps-space-4);
  border-radius: var(--ps-radius-control); background: color-mix(in oklab, var(--ps-color-sprout) 45%, var(--ps-pop-bg)); }
.ps-offer__pay span { color: color-mix(in oklab, var(--ps-color-ink) 70%, transparent); font-size: var(--ps-type-caption); }
.ps-offer__pay strong { font: 400 clamp(var(--ps-type-pay-phone), 5vw, var(--ps-type-pay))/.9 var(--ps-font-display); color: var(--ps-color-ink); font-variant-numeric: tabular-nums; }
.ps-offer__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ps-space-2); }
/* GTM-326 (Oct 28 redesign): a contractor's offers and switch in the portal. .ps-deck--fill lays the Online bar and its note full
   width (the dashboard's Availability card, the top of My Jobs); .ps-offers is a grid of offer cards side by side (no fanned
   stack); .ps-offer__where names the client's industry and area, the only client facts before accepting (DS-10). */
.ps-deck--fill { justify-items: stretch; }
.ps-deck--fill .ps-deck__bar { width: 100%; box-sizing: border-box; }
.ps-deck--fill .ps-deck__note { justify-content: flex-start; align-items: center; text-align: left; }
.ps-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--ps-space-4); align-items: start; }
.ps-offers > .ps-state { grid-column: 1 / -1; }
.ps-offer__where { display: flex; align-items: center; gap: var(--ps-space-2); margin: 0; font: 500 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-offer .ps-kv dd { font-size: var(--ps-type-caption); }
/* The brief a contractor opens after accepting (internal/job.html): the brief's cards, with the brand and Good to know beside them
   on wide screens; one column on a phone, the brand after the brief. .ps-jobbrief__facts: the deadlines, the pay and the AI budget. */
.ps-jobbrief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr); gap: var(--ps-space-5); align-items: start; }
.ps-jobbrief > * { display: grid; gap: var(--ps-space-5); min-width: 0; }
.ps-jobbrief__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--ps-space-4); }
.ps-jobbrief__facts .ps-big { font-size: var(--ps-type-number-sm); white-space: normal; overflow: visible; }
.ps-jobbrief .ps-kv { grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); align-items: start; }
@media (max-width: 720px) { .ps-jobbrief { grid-template-columns: minmax(0, 1fr); } .ps-jobbrief__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-jobbrief .ps-kv { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.ps-howto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-5) var(--ps-space-4); counter-reset: howto; }
.ps-howto > li { display: grid; gap: var(--ps-space-2); align-content: start; counter-increment: howto; padding-top: var(--ps-space-4); box-shadow: 0 -1px 0 var(--ps-line); }
.ps-howto > li::before { content: counter(howto); justify-self: start; min-width: 2.2em; padding: 4px 10px 2px; border-radius: var(--ps-radius-pill); text-align: center;
  font: 400 var(--ps-type-title)/1 var(--ps-font-display); color: var(--ps-color-ink);
  background: color-mix(in oklch increasing hue, var(--ps-color-sprout) calc(var(--t, 0) * 100%), var(--ps-color-lavender-soft)); }
.ps-howto > li:nth-child(2) { --t: .2; } .ps-howto > li:nth-child(3) { --t: .4; } .ps-howto > li:nth-child(4) { --t: .6; } .ps-howto > li:nth-child(5) { --t: .8; } .ps-howto > li:nth-child(n+6) { --t: 1; }
.ps-howto b { font: 400 var(--ps-type-section)/1 var(--ps-font-display); }
.ps-howto p { margin: 0; color: var(--ps-fg-2); max-width: 26em; }
.ps-howto .ps-deck__bar { width: 100%; margin-top: var(--ps-space-2); }   /* the Online switch, as in the app */
.ps-howto .ps-deck__dot { background: var(--ps-accent-stroke); box-shadow: 0 0 0 4px var(--ps-ok-soft); }
.ps-offer__pay--mini { margin-top: var(--ps-space-2); padding: var(--ps-space-2) var(--ps-space-3); }
.ps-offer__pay--mini strong { font-size: var(--ps-type-number-sm); }
.ps-ladder.ps-ladder--climb > li { display: grid; gap: var(--ps-space-1); align-content: start; grid-template-rows: auto auto auto 1fr;   /* each name at the top of its step, so the names climb too */
  color: var(--ps-color-ink); font: 500 var(--ps-type-caption)/1.2 var(--ps-font-ui);
  background: color-mix(in oklch increasing hue, var(--ps-color-sprout) calc(var(--t, 0) * 100%), var(--ps-color-lavender-soft)); }
.ps-ladder.ps-ladder--climb > li:nth-child(2) { --t: .33; } .ps-ladder.ps-ladder--climb > li:nth-child(3) { --t: .66; } .ps-ladder.ps-ladder--climb > li:last-child { --t: 1; }
.ps-ladder.ps-ladder--climb > li:nth-child(n) { padding: var(--ps-space-4); min-height: calc(var(--ps-space-7) * 4.5 + var(--t, 0) * var(--ps-space-7) * 3); }   /* each step higher than the last, taller than its content */
.ps-ladder__more { justify-self: start; margin-top: auto; }
/* a page with a different number of levels sets --t (0 to 1) on each step itself */
.ps-ladder__years { justify-self: start; margin-top: var(--ps-space-1); }   /* the years of experience, a guide: a .ps-tag, placed */
/* Skill list (Oct 10): one row per program, a five-step slider from Never used to Expert, the step named beside it.
   The fill runs purple to lime (.ps-range--climb), never black. */
.ps-skills { display: grid; gap: var(--ps-space-1); margin: 0; padding: 0; list-style: none; }
.ps-skills > li { display: grid; grid-template-columns: minmax(8em, 1fr) minmax(0, 1.4fr) 7.5em; align-items: center; gap: var(--ps-space-3); padding: 6px 0; box-shadow: 0 1px 0 var(--ps-line); }
.ps-skills label { font-weight: var(--ps-weight-medium); }
.ps-skills__val { font-size: var(--ps-type-caption); color: var(--ps-fg-2); text-align: right; }
.ps-skills li.is-set .ps-skills__val { color: var(--ps-fg); font-weight: var(--ps-weight-medium); }
.ps-range--climb::-webkit-slider-runnable-track { background: linear-gradient(to right in oklch decreasing hue, var(--ps-color-lavender) 0%, var(--ps-color-sprout-strong) var(--ps-range-p), var(--ps-chip) var(--ps-range-p)); }
.ps-range--climb::-moz-range-progress { background: linear-gradient(to right in oklch decreasing hue, var(--ps-color-lavender), var(--ps-color-sprout-strong)); }
@media (max-width: 600px) { .ps-skills > li { grid-template-columns: minmax(0, 1fr) auto; } .ps-skills .ps-range { grid-column: 1 / -1; grid-row: 2; } }
/* Skill meter (Oct 10): five steps, Never used to Expert, filled purple to lime up to the level (data-v 0 to 4) */
.ps-meter { display: inline-grid; grid-template-columns: repeat(4, 14px); gap: 3px; vertical-align: middle; }
.ps-meter > i { height: 6px; border-radius: 3px; background: var(--ps-chip); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-meter[data-v="1"] > i:nth-child(-n+1), .ps-meter[data-v="2"] > i:nth-child(-n+2), .ps-meter[data-v="3"] > i:nth-child(-n+3), .ps-meter[data-v="4"] > i { box-shadow: none; }
.ps-meter > i:nth-child(1) { --c: color-mix(in oklch decreasing hue, var(--ps-color-lavender) 100%, var(--ps-color-sprout-strong)); }
.ps-meter > i:nth-child(2) { --c: color-mix(in oklch decreasing hue, var(--ps-color-lavender) 67%, var(--ps-color-sprout-strong)); }
.ps-meter > i:nth-child(3) { --c: color-mix(in oklch decreasing hue, var(--ps-color-lavender) 33%, var(--ps-color-sprout-strong)); }
.ps-meter > i:nth-child(4) { --c: var(--ps-color-sprout-strong); }
.ps-meter[data-v="1"] > i:nth-child(-n+1), .ps-meter[data-v="2"] > i:nth-child(-n+2), .ps-meter[data-v="3"] > i:nth-child(-n+3), .ps-meter[data-v="4"] > i { background: var(--c); }
/* The level guide in a modal: what the level does, its years, and the tools it knows with their meters */
.ps-level-guide { display: grid; gap: var(--ps-space-4); }
.ps-level-guide p { margin: 0; color: var(--ps-fg-2); }
.ps-level-guide ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ps-space-2); }
.ps-level-guide li { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; align-items: center; gap: var(--ps-space-3); padding-bottom: var(--ps-space-2); box-shadow: 0 1px 0 var(--ps-line); }
.ps-level-guide li > span:last-child { color: var(--ps-fg-2); font-size: var(--ps-type-caption); text-align: right; }
.ps-level-guide li > span:first-child { grid-row: span 2; }   /* the program, then its meter over its level on the right */
.ps-level-guide li > .ps-meter { justify-self: end; }
@media (max-width: 600px) {   /* phones: a staircase of rows, each stepping further in */
  .ps-ladder.ps-ladder--climb { grid-template-columns: minmax(0, 1fr); }
  .ps-ladder.ps-ladder--climb > li:nth-child(n) { min-height: 0; margin-left: calc(var(--t, 0) * 18%); }   /* :nth-child(n) to outrank the desktop step heights */
}
.ps-ladder__level { white-space: nowrap; font: 400 clamp(var(--ps-type-ladder-phone), 3.4vw, var(--ps-type-ladder))/.9 var(--ps-font-display); color: var(--ps-color-ink); }   /* the level is the loudest line; no pay on public pages (Oct 10) */
.ps-ladder__unit { font: 400 var(--ps-type-caption)/1.2 var(--ps-font-ui); color: color-mix(in oklab, var(--ps-color-ink) 70%, transparent); }
@media (max-width: 860px) {
  .ps-deck-hero { grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-5); padding-block: var(--ps-space-5); }
  .ps-deck-hero__copy { display: contents; }   /* phones: the statement, then the deck, then the lede and the action */
  .ps-deck-hero__copy > .ps-statement { order: 1; }
  .ps-deck-hero .ps-deck { order: 2; }   /* only beside the hero statement; a deck elsewhere (the Offers page, GTM-326) keeps its place */
  .ps-deck-hero__copy > .ps-lede { order: 3; }
  .ps-deck-hero__actions { order: 4; }
  .ps-howto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ps-offer { transform: translateY(calc(var(--i) * 10px)) rotate(calc(var(--i) * 1.5deg)) scale(calc(1 - var(--i) * .03)); }   /* a tighter fan on phones */
  .ps-howto { grid-template-columns: minmax(0, 1fr); }
}
.ps-deck { overflow-x: clip; padding-inline: var(--ps-space-2); }
.ps-game .ps-game__q > h2:focus, .ps-game .ps-game__q > h2:focus-visible { outline: none; box-shadow: none; }   /* focused for screen readers on each new screen; no ring */
@media (prefers-reduced-motion: reduce) {
  .ps-offer, .ps-deck__rest { transition: none; }
  .ps-offer.is-gone { transform: none; opacity: 0; }
}

/* ---------- Phone preview frame: a device with an Instagram-style profile and its 3-column grid (scheduler preview) ----------
   Dark in both themes (owner decision Oct 7): put .ps-dark on it. Cells take --ps-media-ratio (4 / 5 by default, --square 1). */
.ps-phone { position: relative; width: min(100%, 320px); margin-inline: auto; padding: 10px; border-radius: 46px; background: var(--ps-color-graphite-solid); color: var(--ps-fg);
  box-shadow: inset 0 0 0 1.5px var(--ps-line), 0 24px 50px color-mix(in srgb, var(--ps-color-ink) 28%, transparent); }
.ps-phone__screen { position: relative; display: flex; flex-direction: column; height: min(640px, 72vh); border-radius: 36px; overflow: hidden; background: var(--ps-page); }
.ps-phone__app { zoom: .86; }   /* the app's own components, scaled to the phone: a real screen in miniature (the website's previews) */
.ps-phone--sm { width: min(270px, 78vw); }   /* the small phone: a pop-up's preview */
.ps-phone--sm .ps-phone__screen { height: min(510px, 64vh); }
.ps-phone--sm .ps-phone__app { zoom: .78; }   /* the pop-up's narrower phone: the same screen, a step smaller */
.ps-phone__app .ps-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* the app's own two columns stay two inside the phone, whatever the page's width */
.ps-phone__status { flex: none; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 24px; font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums; }
.ps-phone__island { width: 86px; height: 24px; border-radius: var(--ps-radius-pill); background: var(--ps-color-ink); }
.ps-phone__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.ps-phone__scroll::-webkit-scrollbar { display: none; }
.ps-phone__head { display: flex; align-items: center; gap: var(--ps-space-4); padding: var(--ps-space-2) var(--ps-space-4) var(--ps-space-3); }
.ps-phone__sys { display: inline-flex; align-items: center; gap: 6px; }
.ps-phone__sys .ps-icon { width: 14px; height: 14px; }
.ps-phone__battery { position: relative; width: 22px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1px currentColor; opacity: .9; }
.ps-phone__battery::before { content: ""; position: absolute; inset: 2px 6px 2px 2px; border-radius: 1.5px; background: currentColor; }
.ps-phone__battery::after { content: ""; position: absolute; right: -3px; top: 3.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; opacity: .5; }
/* an app's top bar inside the phone (the website's previews): back, the screen's title, the account */
.ps-phone__bar { flex: none; display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: var(--ps-space-2); min-height: 52px; }
.ps-phone__back { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ps-chip); color: var(--ps-fg); }
.ps-phone__back .ps-icon { width: 16px; height: 16px; }
.ps-phone__title { min-width: 0; text-align: center; font: 500 var(--ps-type-control)/1.2 var(--ps-font-ui); color: var(--ps-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-phone__bar > .ps-avatar { justify-self: end; }
.ps-phone__avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ps-chip); color: var(--ps-fg-2);
  box-shadow: 0 0 0 2px var(--ps-page), 0 0 0 3.5px var(--ps-fg-3); }
.ps-phone__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ps-phone__stats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; font-size: var(--ps-type-micro); color: var(--ps-fg-2); }
.ps-phone__stats b { display: block; font: 500 var(--ps-type-title)/1.2 var(--ps-font-ui); color: var(--ps-fg); font-variant-numeric: tabular-nums; }
.ps-phone__bio { padding: 0 var(--ps-space-4) var(--ps-space-3); font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); }
.ps-phone__bio b { color: var(--ps-fg); font-weight: 500; }
.ps-phone__tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ps-line); }
.ps-phone__tabs > * { display: grid; place-items: center; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ps-fg-3); cursor: pointer; box-shadow: inset 0 -1.5px 0 transparent; }
.ps-phone__tabs > [aria-pressed="true"], .ps-phone__tabs > [aria-selected="true"] { color: var(--ps-fg); box-shadow: inset 0 -1.5px 0 var(--ps-fg); }
.ps-phone__tabs > :focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; }
.ps-iggrid { --ps-media-ratio: 4 / 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.ps-iggrid--square { --ps-media-ratio: 1; }
.ps-iggrid__cell { position: relative; display: grid; place-items: center; aspect-ratio: var(--ps-media-ratio); overflow: hidden; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--ps-chip); color: var(--ps-fg-3); cursor: pointer; }
.ps-iggrid__cell > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-iggrid__cell.is-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--ps-line); cursor: default; }
.ps-iggrid__flag { position: absolute; top: 6px; right: 6px; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--ps-radius-pill);
  background: var(--ps-color-graphite-solid); color: var(--ps-color-on-dark); font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); }
.ps-iggrid__flag .ps-icon { width: 11px; height: 11px; }
.ps-iggrid__cell:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; }
.ps-iggrid__cell.is-selected { box-shadow: inset 0 0 0 2px var(--ps-color-sprout); }

/* ---------- Month calendar: 7 columns, fixed-height days, truncating event chips (pages without FullCalendar) ----------
   PS.month(el, { month: '2026-10', events: [{ date, title, tone | series, id }], onEvent, onDay }) draws it. On phones a day
   shows dots and the whole cell opens the day. */
.ps-month { --ps-month-day: 112px; display: flex; flex-direction: column; min-width: 0; }
.ps-month__dow, .ps-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ps-month__dow > * { padding: 0 8px 8px; font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-month__grid { border-top: 1px solid var(--ps-line); border-left: 1px solid var(--ps-line); border-radius: var(--ps-radius-control); overflow: hidden; }
.ps-month__day { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; height: var(--ps-month-day); padding: 6px; overflow: hidden;
  border-right: 1px solid var(--ps-line); border-bottom: 1px solid var(--ps-line); }
.ps-month__day.is-out { background: color-mix(in srgb, var(--ps-chip) 60%, transparent); }
.ps-month__day.is-out .ps-month__num { color: var(--ps-fg-3); }
.ps-month__num { align-self: flex-start; min-width: 24px; height: 22px; padding: 0 6px; border: 0; border-radius: var(--ps-radius-pill); background: none; color: var(--ps-fg-2); cursor: pointer;
  font: 500 var(--ps-type-caption)/22px var(--ps-font-ui); font-variant-numeric: tabular-nums; text-align: center; }
.ps-month__num:hover { background: var(--ps-chip); color: var(--ps-fg); }
.ps-month__num:focus-visible, .ps-month__ev:focus-visible, .ps-month__more:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 1px; }
.ps-month__day.is-today .ps-month__num { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-month__ev { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; height: 22px; flex: none; padding: 0 7px; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--ps-ev-bg, var(--ps-chip)); color: var(--ps-ev-fg, var(--ps-fg)); font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); text-align: left; text-decoration: none;
  transition: filter var(--ps-dur-press) ease, transform var(--ps-dur-press) var(--ps-ease-out); }
.ps-month__ev > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-month__ev .ps-icon { width: 11px; height: 11px; flex: none; }
.ps-month__ev:hover { filter: brightness(.96); }
.ps-month__ev:active { transform: scale(var(--ps-press-scale)); }
.ps-month__ev[class*="ps-series-"] { --ps-ev-bg: var(--ps-series); --ps-ev-fg: var(--ps-series-on); }
.ps-month__ev--ok { --ps-ev-bg: var(--ps-ok-soft); --ps-ev-fg: var(--ps-ok-text); }
.ps-month__ev--warn { --ps-ev-bg: var(--ps-warn-soft); --ps-ev-fg: var(--ps-warn); }
.ps-month__ev--danger { --ps-ev-bg: var(--ps-danger-soft); --ps-ev-fg: var(--ps-danger); }
.ps-month__ev--info { --ps-ev-bg: var(--ps-info-soft); --ps-ev-fg: var(--ps-info); }
.ps-month__ev--ai { --ps-ev-bg: var(--ps-agent-bg); --ps-ev-fg: var(--ps-agent-fg); }
.ps-month__ev--outline { --ps-ev-bg: transparent; box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-month__more { align-self: flex-start; height: 18px; padding: 0 6px; white-space: nowrap; border: 0; border-radius: var(--ps-radius-pill); background: none; color: var(--ps-fg-2); cursor: pointer; font: 500 var(--ps-type-micro)/18px var(--ps-font-ui); }
.ps-month__more:hover { background: var(--ps-chip); color: var(--ps-fg); }
.ps-month__pips { display: none; gap: 3px; flex-wrap: wrap; }
.ps-month__pips > i { width: 6px; height: 6px; border-radius: 50%; background: var(--ps-ev-fg, var(--ps-fg-2)); }
.ps-month__pips > i[class*="ps-series-"] { background: var(--ps-series); }
@media (max-width: 720px) {
  .ps-month { --ps-month-day: 58px; }
  .ps-month__dow > * { padding-inline: 2px; text-align: center; }
  .ps-month__day { align-items: center; padding: 4px 2px; }
  .ps-month__num { align-self: center; }
  .ps-month__num::after { content: ""; position: absolute; inset: 0; }
  .ps-month__ev, .ps-month__more { display: none; }
  .ps-month__pips { display: flex; justify-content: center; }
}

/* ---------- Tooltip (PS.tip): rich, focusable, works on public pages too ----------
   [data-ps-tip="text"], [data-ps-tip-html="#template-id"] or PS.tip(el, html). Hover with a mouse (after a short wait),
   keyboard focus, or a tap on a .ps-tip-btn opens it; Escape closes it. The old .section-tip-icon
   [data-tip] marks use it too. Grows from the trigger in 180 ms; reduced motion fades. */
.ps-tip { position: fixed; top: 0; left: 0; z-index: var(--ps-layer-tooltip); max-width: min(300px, calc(100vw - 24px)); padding: 9px 12px; border-radius: 12px;
  background: var(--ps-color-graphite-solid); color: var(--ps-color-on-dark); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ps-color-on-dark) 10%, transparent), 0 12px 28px color-mix(in srgb, var(--ps-color-ink) 28%, transparent);
  font: 400 var(--ps-type-caption)/1.5 var(--ps-font-ui); text-align: left; text-transform: none; letter-spacing: 0; pointer-events: none;
  opacity: 0; transform: scale(.96); visibility: hidden; transition: opacity var(--ps-dur-pop) var(--ps-ease-out), transform var(--ps-dur-pop) var(--ps-ease-out), visibility 0s linear var(--ps-dur-pop); }
.ps-tip.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.ps-tip.is-rich { pointer-events: auto; }
.ps-tip b, .ps-tip strong { font-weight: 500; color: var(--ps-color-on-dark); }
.ps-tip p { margin: 0; } .ps-tip p + p { margin-top: 6px; }
.ps-tip a { color: var(--ps-color-sprout); text-decoration: underline; text-underline-offset: .2em; }
/* Nov 8 (Sisi): one tooltip mark on every page, the lime "i" (the page head's, Oct 23): a lime disc with an italic serif i in ink.
   Older markup that still carries the info icon inside shows the i instead. --head is the page title's size, --lime a section title's. */
.ps-tip-btn { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; margin: 0 0 0 6px; padding: 0; border: 0; border-radius: 50%; vertical-align: middle; cursor: pointer;
  background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none; transition: background-color var(--ps-dur-press) ease; }
.ps-tip-btn::before { content: "i"; font: italic 400 var(--ps-type-caption)/1 var(--ps-font-mark); }
.ps-tip-btn > .ps-icon { display: none; }
.ps-tip-btn:hover, .ps-tip-btn[aria-expanded="true"] { background: var(--ps-color-sprout-strong); color: var(--ps-color-ink); box-shadow: none; }
.ps-tip-btn:focus-visible, .section-tip-icon:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-tip-btn::after { content: ""; position: absolute; inset: -13px; }
/* The page head's "i" (Oct 23): a lime disc as tall as the title's capitals, an italic serif i in ink. One per .ps-pagehead,
   made by ps-ui.js from its .ps-pagehead__sub; hidden while the description is empty. */
.ps-tip-btn--head { width: .72em; height: .72em; margin: 0; font-size: var(--ps-type-page-title); align-self: center; cursor: pointer;
  background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none; transition: background-color var(--ps-dur-press) ease; }
.ps-tip-btn--head::before { content: "i"; font: italic 400 .46em/1 var(--ps-font-mark); }
.ps-tip-btn--head:hover, .ps-tip-btn--head[aria-expanded="true"] { background: var(--ps-color-sprout-strong); color: var(--ps-color-ink); box-shadow: none; }
.ps-tip-btn--head[hidden] { display: none; }
@media (max-width: 768px) { .ps-tip-btn--head { font-size: var(--ps-type-page-title-phone); } }
/* Nov 7 (Sisi): the same lime "i" beside a section's or a part's title (Voice and Words' six parts): the page head's disc at a
   title's size. Write it after the title: <button class="ps-tip-btn ps-tip-btn--lime" aria-label="About …" data-ps-tip="…"></button> */
.ps-tip-btn--lime { width: 20px; height: 20px; margin: 0; cursor: pointer; background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none;
  transition: background-color var(--ps-dur-press) ease; }
.ps-tip-btn--lime::before { content: "i"; font: italic 400 14px/1 var(--ps-font-mark); }
.ps-tip-btn--lime:hover, .ps-tip-btn--lime[aria-expanded="true"] { background: var(--ps-color-sprout-strong); color: var(--ps-color-ink); box-shadow: none; }
.ps-tip.is-wide { max-width: min(380px, calc(100vw - 24px)); }
.section-tip-icon { cursor: help; }

/* ---------- Gantt (.ps-gantt, PS.gantt): tall bars that carry their label, drag to move, handles to resize, a milestone
   diamond, the original plan under the bar, a today line, and states (done, overdue, at risk, stretch, waits on, locked) ----------
   Geometry is data (days × px): PS.gantt sets --ps-gantt-x / --ps-gantt-w on each bar after render. */
.ps-gantt { --ps-gantt-label: 300px; --ps-gantt-row: 48px; --ps-gantt-bar: 30px; border-radius: var(--ps-radius-card); overflow: hidden; min-width: 0; }
.ps-gantt__scroll { overflow: auto; max-height: min(78vh, 900px); overscroll-behavior: contain; }
.ps-gantt__grid { display: grid; grid-template-columns: var(--ps-gantt-label) var(--ps-gantt-width, 1200px); width: max-content; min-width: 100%; }
.ps-gantt__corner, .ps-gantt__scale { position: sticky; top: 0; z-index: var(--ps-layer-sticky); height: 40px; background: var(--ps-glass-solid); border-bottom: 1px solid var(--ps-line); }
.ps-gantt__corner { left: 0; z-index: var(--ps-layer-dropdown); display: flex; align-items: center; padding: 0 16px; box-shadow: 1px 0 0 var(--ps-line);
  font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-gantt__tick { position: absolute; top: 0; bottom: 0; left: var(--ps-gantt-x, 0); display: flex; align-items: center; padding-left: 6px; border-left: 1px solid var(--ps-line);
  font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); color: var(--ps-fg-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ps-gantt__group { grid-column: 1 / -1; display: flex; align-items: center; height: 36px; padding: 0 16px; border-bottom: 1px solid var(--ps-line); background: var(--ps-chip); }
.ps-gantt__group > span { position: sticky; left: 16px; display: inline-flex; align-items: center; gap: var(--ps-space-2); font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-2); }
.ps-gantt__label { position: sticky; left: 0; z-index: var(--ps-layer-sticky); display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; height: var(--ps-gantt-row); padding: 0 16px;
  margin: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--ps-line); background: var(--ps-glass-solid); box-shadow: 1px 0 0 var(--ps-line); color: var(--ps-fg); font: inherit; text-align: left; cursor: pointer; }
.ps-gantt__label b { display: flex; align-items: center; gap: 6px; min-width: 0; font: 500 var(--ps-type-control)/1.3 var(--ps-font-ui); }
.ps-gantt__label b > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-gantt__label small { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.ps-gantt__label:hover b > span { text-decoration: underline; text-decoration-color: var(--ps-fg-3); text-underline-offset: .2em; }
.ps-gantt__label:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; }
.ps-gantt__lane { position: relative; height: var(--ps-gantt-row); border-bottom: 1px solid var(--ps-line);
  background-image: repeating-linear-gradient(to right, color-mix(in srgb, var(--ps-line) 70%, transparent) 0 1px, transparent 1px var(--ps-gantt-step, 154px)); background-position: var(--ps-gantt-step-x, 0) 0; }
.ps-gantt__lane.is-hl { background: color-mix(in srgb, var(--ps-info-soft) 60%, transparent); }
.ps-gantt__label.is-hl { background: color-mix(in srgb, var(--ps-info-soft) 60%, var(--ps-glass-solid)); }
/* today: a lime line through the scale and every lane */
.ps-gantt__scale::after, .ps-gantt__lane::after { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: var(--ps-gantt-today, -10px); width: 2px; margin-left: -1px; background: var(--ps-color-sprout-strong); pointer-events: none; }
.ps-gantt__today { position: absolute; top: 50%; left: var(--ps-gantt-today, -100px); transform: translate(-50%, -50%);
  background: var(--ps-color-sprout); color: var(--ps-color-ink); }   /* a pill of the family (see "Pills"), placed on the today line */
.ps-gantt__bar { position: absolute; top: 50%; left: var(--ps-gantt-x, 0); width: var(--ps-gantt-w, 40px); height: var(--ps-gantt-bar); margin-top: calc(var(--ps-gantt-bar) / -2);
  display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 10px; border: 0; border-radius: 9px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  background: var(--ps-series, var(--ps-fg-2)); color: var(--ps-series-on); font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); text-align: left;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ps-color-ink) 14%, transparent);
  transition: box-shadow var(--ps-dur-press) ease, filter var(--ps-dur-press) ease, opacity var(--ps-dur-press) ease; }
.ps-gantt__bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.ps-gantt__bar .ps-icon { width: 13px; height: 13px; flex: none; pointer-events: none; }
.ps-gantt__bar:hover { filter: brightness(1.04); box-shadow: 0 4px 12px color-mix(in srgb, var(--ps-color-ink) 18%, transparent); }
.ps-gantt__bar:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
html.ps-v2 .ps-gantt :is(.ps-gantt__bar, .ps-gantt__label):active:not(:disabled) { transform: none; }   /* no press scale: the bar follows the pointer */
.ps-gantt__bar.is-dragging { cursor: grabbing; box-shadow: 0 10px 24px color-mix(in srgb, var(--ps-color-ink) 24%, transparent); }
/* a short bar puts its label to the right of itself */
.ps-gantt__bar.is-narrow { overflow: visible; }
.ps-gantt__bar.is-narrow > span { position: absolute; left: calc(100% + 8px); max-width: 260px; color: var(--ps-fg-2); }
/* resize handles: the ends of the bar, with a resize cursor and a grip that shows on hover and focus */
.ps-gantt__h { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; touch-action: none; }
.ps-gantt__h--start { left: -2px; } .ps-gantt__h--end { right: -2px; }
.ps-gantt__h::after { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 2px; background: currentColor; opacity: 0; transition: opacity var(--ps-dur-press) ease; }
.ps-gantt__bar:hover .ps-gantt__h::after, .ps-gantt__bar:focus-visible .ps-gantt__h::after, .ps-gantt__bar.is-dragging .ps-gantt__h::after { opacity: .55; }
/* the original plan, as a thin track under the bar */
.ps-gantt__base { position: absolute; bottom: 4px; left: var(--ps-gantt-x, 0); width: var(--ps-gantt-w, 40px); height: 4px; border-radius: 2px; background: var(--ps-fg-3); opacity: .45; pointer-events: none; }
.ps-gantt__lane:has(.ps-gantt__base) .ps-gantt__bar { margin-top: calc(var(--ps-gantt-bar) / -2 - 3px); }
/* milestone: a diamond on its day */
.ps-gantt__bar.is-milestone { width: var(--ps-gantt-bar); padding: 0; margin-left: calc(var(--ps-gantt-w, 0px) / 2 - var(--ps-gantt-bar) / 2); background: none; box-shadow: none; overflow: visible; }
.ps-gantt__bar.is-milestone::before { content: ""; position: absolute; inset: 7px; border-radius: 3px; transform: rotate(45deg); background: var(--ps-series, var(--ps-fg)); box-shadow: 0 0 0 2px var(--ps-page); }
.ps-gantt__bar.is-milestone > span { position: absolute; left: calc(100% + 4px); max-width: 260px; color: var(--ps-fg-2); }
.ps-gantt__bar.is-milestone .ps-gantt__h { display: none; }
/* states */
.ps-gantt__bar.is-done { --ps-series: var(--ps-ok-soft); --ps-series-on: var(--ps-ok-text); }
.ps-gantt__bar.is-overdue { box-shadow: inset 0 0 0 2px var(--ps-danger), 0 1px 2px color-mix(in srgb, var(--ps-color-ink) 14%, transparent); }
.ps-gantt__bar.is-risk { box-shadow: inset 0 0 0 2px var(--ps-warn), 0 1px 2px color-mix(in srgb, var(--ps-color-ink) 14%, transparent); }
.ps-gantt__bar.is-stretch { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ps-color-white) 22%, transparent) 0 6px, transparent 6px 12px); }
.ps-gantt__bar.is-dep { box-shadow: inset 0 0 0 2px var(--ps-info), 0 0 0 3px var(--ps-info-soft); }
.ps-gantt__bar.is-locked { cursor: pointer; }
.ps-gantt__bar.is-locked .ps-gantt__h { display: none; }
.ps-gantt__bar.is-milestone.is-overdue::before { box-shadow: 0 0 0 2px var(--ps-danger); }
.ps-gantt__bar.is-milestone.is-risk::before { box-shadow: 0 0 0 2px var(--ps-warn); }
.ps-gantt__bar.is-milestone:is(.is-overdue, .is-risk, .is-dep) { box-shadow: none; }
.ps-gantt__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2) var(--ps-space-4); padding: 10px 16px; border-top: 1px solid var(--ps-line); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-gantt__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ps-gantt__key { width: 18px; height: 10px; border-radius: 4px; background: var(--ps-fg-3); }
.ps-gantt__key--ms { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); }
.ps-gantt__key--overdue { background: none; box-shadow: inset 0 0 0 2px var(--ps-danger); }
.ps-gantt__key--risk { background: none; box-shadow: inset 0 0 0 2px var(--ps-warn); }
.ps-gantt__key--base { height: 4px; opacity: .45; }
.ps-gantt__key--today { width: 2px; height: 14px; border-radius: 1px; background: var(--ps-color-sprout-strong); }
@media (pointer: coarse) { .ps-gantt__h { width: 20px; } .ps-gantt__h--start { left: -8px; } .ps-gantt__h--end { right: -8px; } }
@media (max-width: 720px) { .ps-gantt { --ps-gantt-label: 168px; --ps-gantt-row: 52px; } }

/* ---------- Balance: one big figure with its label, a line under it and chips (My Pay, GTM-336) ---------- */
.ps-balance { display: grid; gap: var(--ps-space-2); justify-items: start; }
.ps-balance__amount { font: 400 var(--ps-type-number)/.95 var(--ps-font-display); font-variant-numeric: tabular-nums; color: var(--ps-fg); }
.ps-balance__sub { font-size: var(--ps-type-caption); color: var(--ps-fg-2); max-width: 46em; }
.ps-balance > .ps-chips { margin-top: var(--ps-space-2); }
@media (max-width: 720px) { .ps-balance__amount { font-size: var(--ps-type-number-phone); } }

/* ---------- Lists: divided rows, selected rows, a capped scrolling list ---------- */
.ps-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ps-list > * + * { border-top: 1px solid var(--ps-line); }
.ps-list__row { display: flex; align-items: center; gap: var(--ps-space-3); min-width: 0; min-height: var(--ps-size-touch); padding: 10px 4px; color: inherit; text-decoration: none; }
a.ps-list__row, button.ps-list__row { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; transition: background-color var(--ps-dur-press) ease; }
a.ps-list__row:hover, button.ps-list__row:hover { background: var(--ps-chip); }
a.ps-list__row:focus-visible, button.ps-list__row:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; }
.ps-list__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-list__title { font: 500 var(--ps-type-control)/1.35 var(--ps-font-ui); color: var(--ps-fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-list__meta { font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-list__end { flex: none; display: flex; align-items: center; gap: var(--ps-space-2); color: var(--ps-fg-2); }
.ps-list--compact .ps-list__row { min-height: 0; padding-block: 6px; }
/* a recording to play in a row's body (GTM-399 S-50, the Audio page's voiceovers): the whole width, a little room above */
.ps-list__media { display: block; width: 100%; max-width: 480px; margin-top: var(--ps-space-2); }
/* a row that opens on its body and keeps a control at its end (a setting with its switch, GTM-336 Company → Settings) */
button.ps-list__body { border: 0; padding: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--ps-radius-small); }
button.ps-list__body:hover .ps-list__title { text-decoration: underline; text-underline-offset: 3px; }
button.ps-list__body:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-list--wrap .ps-list__title, .ps-list--wrap .ps-list__meta { white-space: normal; overflow: visible; overflow-wrap: anywhere; }   /* notes and claims read whole (GTM-310 Knowledge) */
.ps-list__row.is-selected, .ps-list__row[aria-selected="true"], .ps-list__row[aria-current="true"], .ps-wrow.is-selected, .ps-ni.is-selected {
  background: color-mix(in srgb, var(--ps-color-sprout) 18%, transparent); box-shadow: inset 2px 0 0 var(--ps-color-sprout-strong); border-radius: 10px; }
.ps-scroll { --ps-cap: 320px; max-height: var(--ps-cap); overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.ps-scroll--sm { --ps-cap: 220px; } .ps-scroll--lg { --ps-cap: 480px; }

/* ---------- Thumbs: a small square row thumb, and a grid of fixed-size thumbs that never stretches a lone item ---------- */
.ps-thumb { position: relative; flex: none; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--ps-chip); color: var(--ps-fg-3); }
.ps-thumb--sm { width: 32px; height: 32px; border-radius: 9px; } .ps-thumb--lg { width: 64px; height: 64px; border-radius: 14px; }
.ps-thumb > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-thumbs { --ps-thumbs-size: 96px; display: grid; grid-template-columns: repeat(auto-fill, var(--ps-thumbs-size)); gap: var(--ps-space-2); justify-content: start; }
.ps-thumbs--sm { --ps-thumbs-size: 72px; } .ps-thumbs--lg { --ps-thumbs-size: 132px; }
.ps-thumbs > * { width: var(--ps-thumbs-size); min-width: 0; }
.ps-thumbs .ps-thumb { width: var(--ps-thumbs-size); height: var(--ps-thumbs-size); border-radius: var(--ps-radius-control); }
/* a "paper" thumb: always white, contained (logo masters) */
.ps-media__thumb--paper, .ps-thumb--paper { background: var(--ps-color-white); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-media__thumb--paper > :is(img, video), .ps-thumb--paper > :is(img, video) { object-fit: contain; padding: 10%; }

/* ---------- Message thread: chat bubbles with author, time, tags and a timestamp chip ---------- */
.ps-thread { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-bubble { display: flex; gap: var(--ps-space-2); align-items: flex-end; max-width: min(560px, 92%); }
.ps-bubble__body { min-width: 0; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--ps-chip); color: var(--ps-fg); font: 400 var(--ps-type-body)/1.5 var(--ps-font-ui); overflow-wrap: anywhere; }
.ps-bubble__body p { margin: 0; } .ps-bubble__body p + p { margin-top: 6px; }
.ps-bubble__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.ps-bubble__head b { color: var(--ps-fg-2); font-weight: 500; }
.ps-bubble__time { border: 0; cursor: pointer; background: var(--ps-pop-bg); color: var(--ps-fg); box-shadow: inset 0 0 0 1px var(--ps-line); }   /* a pill of the family (see "Pills") */
.ps-bubble__time:hover { box-shadow: inset 0 0 0 1px var(--ps-fg-3); }
.ps-bubble__time:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 1px; }
.ps-bubble--me { align-self: flex-end; flex-direction: row-reverse; }
.ps-bubble--me .ps-bubble__body { border-radius: 18px 18px 6px 18px; background: var(--ps-fg); color: var(--ps-page); }
.ps-bubble--me .ps-bubble__head { justify-content: flex-end; }
.ps-avatar.ps-avatar--ai { background: var(--ps-agent-bg); color: var(--ps-agent-fg); }
.ps-bubble--ai .ps-bubble__body { background: var(--ps-agent-bg); color: var(--ps-fg); }
.ps-bubble--client .ps-bubble__body { background: var(--ps-info-soft); }

/* ---------- Section divider inside a card (optionally labelled) ---------- */
/* Sections inside one card, chapter, drawer or modal (Sisi, Oct 31, 2026: sections must never feel cramped). Every page,
   drawer and editor with several sections uses this, never its own gap or a bare hairline between them:
   .ps-sections            the container: its direct children are the sections, each split from the one before by a
                           --ps-line-strong divider. The space is uneven on purpose (Sisi, Oct 31): a section ends with room,
                           --ps-space-section (48) from its content down to the divider, and starts close, --ps-space-section-start
                           (20) from the divider to its title. On a phone: --ps-space-section-phone (40) and --ps-space-4 (16).
                           Every divider between sections in the portal follows this (.ps-divider and the Book editors too).
   .ps-sections__head      a section's title (medium, the lede size), then --ps-space-4 to its content
   .ps-sections__sub       a quiet line under the title */
.ps-sections { display: flex; flex-direction: column; min-width: 0; }
.ps-sections > * + * { margin-top: var(--ps-space-section); padding-top: var(--ps-space-section-start); border-top: 1px solid var(--ps-line-strong); }
.ps-sections > * { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; }
.ps-sections > * > :is(h2, h3, h4, h5) { margin-block: 0; }   /* a heading's own margins never add to the rule's spacing */
.ps-sections__head { margin: 0; font: var(--ps-weight-medium) var(--ps-type-lede)/1.25 var(--ps-font-ui); color: var(--ps-fg); }
.ps-sections__sub { margin: calc(var(--ps-space-3) * -1) 0 0; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
@media (max-width: 600px) { .ps-sections > * + * { margin-top: var(--ps-space-section-phone); padding-top: var(--ps-space-4); } }
.ps-divider { display: block; height: 0; margin: var(--ps-space-section) 0 var(--ps-space-section-start); border: 0; border-top: 1px solid var(--ps-line-strong); }   /* the section rule: room above, close below (Oct 31) */
@media (max-width: 600px) { .ps-divider { margin: var(--ps-space-section-phone) 0 var(--ps-space-4); } }
.ps-divider--label { display: flex; align-items: center; gap: var(--ps-space-3); height: auto; border-top: 0; font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-divider--label::after { content: ""; flex: 1; height: 1px; background: var(--ps-line-strong); }

/* ---------- Knowledge card (GTM-310): one note, a shelf or a calendar day, read as a card ----------
   .ps-card.ps-kcard: the whole card opens through one .ps-kcard__open (a button named after the note), a direct child that covers
   it, like .ps-media__open. __kicker is the label-caps line (where it came from, the shelf), __text the note itself (4 lines),
   __meta the source line (2 lines), __foot the badges at the bottom. A calendar card leads with __date (__day + __month).
   Other controls inside the card sit above the open button. Example: internal/design-system.html #ds-kcard. */
.ps-card.ps-kcard { gap: var(--ps-space-3); padding: var(--ps-space-4); }
.ps-kcard__open { position: absolute; inset: 0; display: block; margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ps-kcard__open:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-kcard:has(> .ps-kcard__open) :where(a[href], button, input, select, textarea, summary, label):not(.ps-kcard__open) { position: relative; z-index: var(--ps-layer-sticky); }
.ps-kcard__kicker { display: flex; align-items: center; gap: var(--ps-space-2); min-width: 0; color: var(--ps-fg-3);
  font: 500 var(--ps-type-label)/1.3 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; }
.ps-kcard__kicker > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-kcard__title { margin: 0; font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-kcard__text { margin: 0; font: 400 var(--ps-type-body)/1.5 var(--ps-font-ui); color: var(--ps-fg); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.ps-kcard__meta { margin: 0; font: 400 var(--ps-type-caption)/1.45 var(--ps-font-ui); color: var(--ps-fg-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ps-kcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); margin-top: auto; }
.ps-kcard__date { display: flex; align-items: baseline; gap: var(--ps-space-2); }
.ps-kcard__day { font: 400 var(--ps-type-number-sm)/1 var(--ps-font-display); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--ps-fg); }
.ps-kcard__month { font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-2); }
@media (hover: hover) and (pointer: fine) { .ps-kcard:has(> .ps-kcard__open):hover { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .ps-kcard:has(> .ps-kcard__open):hover { transform: none; } }

/* ---------- The Brain's Overview parts (GTM-310, Oct 23, 2026, Natalia) ----------
   Made for internal/brain.html's first view; examples on internal/design-system.html #ds-brain-overview.
   .ps-dtiles > .ps-dtile: a count and what it counts, one per kind of decision (a button when it opens the list); .is-on is the one
   shown below it, .is-zero dims an empty one. .ps-batch: a group of things to decide (__icon, __body with __title and __text, the
   action at the end). .ps-reviewer: one item at a time (__top: back, title, a .ps-progress and __count; __claim the item; __facts
   in up to three columns of __fact with a __label; __actions and __keys, the keyboard hint). .ps-shelfcard: a section as a card that
   opens as a whole (__top with __name and the __n count, __date, a .ps-bar, __line, __foot; .is-thin dims the count).
   .ps-way: one way in (__head with its icon, then a line of text). .ps-swatch--dot: a round swatch whose color comes from data, set
   through the CSSOM as --ps-swatch-color (never a style attribute). .ps-readers: an agent and the badges of what it reads.
   .ps-words: plain words, each with the old word struck through (<s>) and what it means. */
.ps-dtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ps-space-3); }
.ps-dtile { display: grid; gap: 2px; align-content: start; padding: var(--ps-space-3) var(--ps-space-4); border: 0; border-radius: var(--ps-radius-control);
  background: var(--ps-chip); color: var(--ps-fg); font: inherit; text-align: left; min-width: 0; }
button.ps-dtile { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--ps-dur-base) var(--ps-ease-out); }
button.ps-dtile:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-dtile__n { font: 400 var(--ps-type-number-sm)/1 var(--ps-font-display); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ps-dtile__label { font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-dtile.is-on { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-dtile.is-on .ps-dtile__label { color: var(--ps-color-ink); }
.ps-dtile.is-zero .ps-dtile__n { color: var(--ps-fg-3); }
.ps-batch { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ps-space-3) var(--ps-space-4);
  padding: var(--ps-space-4); border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); }
.ps-batch__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ps-agent-bg); color: var(--ps-agent-fg); }
.ps-batch__body { display: grid; gap: 2px; min-width: 0; }
.ps-batch__title { font: 500 var(--ps-type-body)/1.4 var(--ps-font-ui); }
.ps-batch__text { margin: 0; font: 400 var(--ps-type-caption)/1.5 var(--ps-font-ui); color: var(--ps-fg-2); max-width: 78ch; }
.ps-batch.is-done { opacity: .7; }
.ps-reviewer { display: grid; gap: var(--ps-space-4); min-width: 0; }
.ps-reviewer__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); }
.ps-reviewer__top > .ps-progress { flex: 1 1 160px; }
.ps-reviewer__count { font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); font-variant-numeric: tabular-nums; }
.ps-reviewer__claim { margin: 0; max-width: 68ch; font: 400 var(--ps-type-title)/1.6 var(--ps-font-ui); color: var(--ps-fg); text-wrap: pretty; overflow-wrap: anywhere; }
.ps-reviewer__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-4); }
.ps-reviewer__fact { display: grid; gap: var(--ps-space-2); align-content: start; min-width: 0; }
.ps-reviewer__fact p { margin: 0; font: 400 var(--ps-type-caption)/1.5 var(--ps-font-ui); color: var(--ps-fg-2); overflow-wrap: anywhere; }
.ps-reviewer__label { font: 500 var(--ps-type-label)/1.3 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-reviewer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); }
.ps-reviewer__keys { font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-shelfgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--ps-space-3); }
.ps-shelfcard { position: relative; display: grid; gap: var(--ps-space-2); align-content: start; padding: var(--ps-space-4); border: 0; border-radius: var(--ps-radius-card);
  background: var(--ps-glass); box-shadow: var(--ps-glass-shadow); color: var(--ps-fg); font: inherit; text-align: left; min-width: 0; }
button.ps-shelfcard { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--ps-dur-base) var(--ps-ease-out); }
button.ps-shelfcard:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-shelfcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ps-space-2); }
.ps-shelfcard__name { font: 500 var(--ps-type-body)/1.35 var(--ps-font-ui); min-width: 0; }
.ps-shelfcard__n { font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ps-shelfcard__date { font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-3); font-variant-numeric: tabular-nums; }
.ps-shelfcard > .ps-bar { flex: none; }
.ps-shelfcard__line { margin: 0; font: 400 var(--ps-type-caption)/1.45 var(--ps-font-ui); color: var(--ps-fg-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ps-shelfcard__foot { display: flex; flex-wrap: wrap; gap: var(--ps-space-1); }
.ps-shelfcard.is-thin .ps-shelfcard__n { color: var(--ps-fg-3); }
@media (hover: hover) and (pointer: fine) { button.ps-shelfcard:hover { transform: translateY(-2px); } }
.ps-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ps-space-3); }
.ps-way { display: grid; gap: var(--ps-space-1); align-content: start; padding: var(--ps-space-4); border-radius: var(--ps-radius-control); background: var(--ps-chip); min-width: 0; }
.ps-way__head { display: flex; align-items: center; gap: var(--ps-space-2); font: 500 var(--ps-type-body)/1.35 var(--ps-font-ui); }
.ps-way p { margin: 0; font: 400 var(--ps-type-caption)/1.45 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-swatch--dot { width: 18px; height: 18px; border-radius: 50%; background: var(--ps-swatch-color, var(--ps-fg-3)); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-readers { list-style: none; margin: 0; padding: 0; display: grid; }
.ps-readers > li { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: var(--ps-space-2) var(--ps-space-4); align-items: start;
  padding: var(--ps-space-3) 0; border-top: 1px solid var(--ps-line); }
.ps-readers > li:first-child { border-top: 0; }
.ps-readers b { font-weight: var(--ps-weight-medium); }
.ps-readers small { display: block; color: var(--ps-fg-3); font-size: var(--ps-type-caption); }
.ps-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ps-space-5); margin: 0; }
.ps-words > div { display: grid; gap: 2px; padding: var(--ps-space-2) 0; border-top: 1px solid var(--ps-line); }
.ps-words dt { font-weight: var(--ps-weight-medium); }
.ps-words dd { margin: 0; color: var(--ps-fg-2); font-size: var(--ps-type-caption); }
.ps-words s { color: var(--ps-fg-3); margin-right: var(--ps-space-1); }
@media (max-width: 900px) { .ps-dtiles, .ps-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-reviewer__facts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .ps-batch { grid-template-columns: auto minmax(0, 1fr); } .ps-batch > .ps-btn, .ps-batch > .ps-badge { grid-column: 1 / -1; justify-self: start; }
  .ps-readers > li, .ps-words { grid-template-columns: minmax(0, 1fr); } .ps-shelfgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { button.ps-shelfcard:hover { transform: none; } }

/* ---------- Text and layout utilities ---------- */
.ps-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.ps-mono-wrap { font-family: var(--ps-font-mono); font-size: var(--ps-type-mono); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.ps-flex-none { flex: none; }
.ps-show-phone { display: none !important; }
@media (max-width: 720px) { .ps-show-phone { display: revert !important; } }

/* ---------- Compact inline number input (editable table cells) ---------- */
.ps-input--num { width: 96px; height: 32px; padding: 0 10px; border-radius: 10px; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.ps-input--num::-webkit-inner-spin-button, .ps-input--num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ps-input--sm { height: 32px; padding: 0 10px; border-radius: 10px; }
@media (pointer: coarse) { .ps-input--num, .ps-input--sm { height: var(--ps-size-touch); } }

/* ---------- Profile hero: a banner with an overlapping avatar ---------- */
.ps-hero { position: relative; display: flex; flex-direction: column; border-radius: var(--ps-radius-card); overflow: hidden; min-width: 0; }
.ps-hero__banner { position: relative; aspect-ratio: 5 / 1; min-height: 120px; overflow: hidden;
  background: linear-gradient(120deg, color-mix(in srgb, var(--ps-color-sprout) 30%, var(--ps-chip)), var(--ps-chip) 60%); }
.ps-hero__banner > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-hero__banner > .ps-btn, .ps-hero__tools { position: absolute; right: 12px; bottom: 12px; }
.ps-hero__tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ps-space-2); left: 12px; pointer-events: none; }
.ps-hero__tools > * { pointer-events: auto; }
.ps-hero__banner > .ps-media__badges { }
/* the banner and the avatar as one big button (upload, or drag to reposition); the image fills it */
.ps-hero__fill { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit;
  display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.ps-hero__fill > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-hero__fill:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -3px; }
html.ps-v2 .ps-hero .ps-hero__fill:active:not(:disabled) { transform: none; }
.ps-hero__main { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--ps-space-4); padding: 0 var(--ps-space-5) var(--ps-space-5); }
.ps-hero__avatar { position: relative; flex: none; width: 112px; height: 112px; margin-top: -56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: 0 0 0 4px var(--ps-pop-bg), var(--ps-pop-shadow); font: 400 var(--ps-type-number-sm)/1 var(--ps-font-display); }
.ps-hero__avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-hero__avatar > button { position: absolute; inset: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.ps-hero__avatar > button:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 3px; }
.ps-hero__body { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: var(--ps-space-3); }
.ps-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-hero__body > .ps-bare { align-self: flex-start; text-align: left; cursor: text; }
@media (max-width: 720px) { .ps-hero__avatar { width: 84px; height: 84px; margin-top: -42px; } .ps-hero__main { padding: 0 var(--ps-space-4) var(--ps-space-4); } }

/* ---------- AI button: lavender, only for actions an agent does ---------- */
.ps-btn--ai { background: var(--ps-agent-bg); color: var(--ps-agent-fg); box-shadow: none; }
.ps-btn--ai:hover { background: color-mix(in srgb, var(--ps-color-lavender) 34%, var(--ps-agent-bg)); }

/* ---------- Full-height embed (an <iframe> or <object>: proposals, SLA documents) ---------- */
.ps-frame { display: block; width: 100%; height: calc(100vh - 220px); height: calc(100dvh - 220px); min-height: 420px; border: 0; border-radius: var(--ps-radius-card); background: var(--ps-color-white); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-frame--sm { height: 320px; min-height: 0; }
/* Email preview (GTM-343): an email at its real width (600 + its own 40px gutters, or a 375px phone). No fixed height:
   the page sets the iframe's height attribute from its content. */
.ps-email-frame { display: block; width: 100%; max-width: 680px; min-height: 240px; border: 0; border-radius: var(--ps-radius-card); background: var(--ps-color-greige); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-email-frame--phone { max-width: 375px; }

/* ---------- Sticky floating action bar: the page's main actions stay in reach at the bottom ---------- */
.ps-actionbar { position: sticky; bottom: var(--ps-space-4); z-index: var(--ps-layer-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); width: fit-content; max-width: 100%;
  margin: var(--ps-space-5) 0 0 auto; padding: 8px 8px 8px 16px; border-radius: var(--ps-radius-pill); background: var(--ps-pop-bg); box-shadow: var(--ps-pop-shadow); }
.ps-actionbar > .ps-msg, .ps-actionbar > .ps-faint { margin-right: var(--ps-space-2); }
.ps-actionbar--center { margin-inline: auto; }
@media (max-width: 768px) { .ps-actionbar { bottom: calc(16px + 48px + 16px + env(safe-area-inset-bottom, 0px)); width: auto; margin-left: 0; border-radius: var(--ps-radius-card); }
  .ps-actionbar > .ps-btn { flex: 1 1 auto; } }

/* ---------- Tabs as links, and a tab bar that scrolls sideways on phones ---------- */
.ps-tabs a[role="tab"] { display: inline-flex; align-items: center; text-decoration: none; padding: 10px 12px; min-height: var(--ps-size-touch); font: 400 var(--ps-type-control)/1 var(--ps-font-ui); color: var(--ps-fg-2); white-space: nowrap; }
.ps-tabs a[role="tab"]:is([aria-selected="true"], [aria-current="page"]) { color: var(--ps-fg); }
.ps-tabs [role="tab"]:hover { color: var(--ps-fg); }
.ps-tabs span[role="tab"][aria-disabled="true"] { display: inline-flex; align-items: center; gap: var(--ps-space-1); white-space: nowrap; color: var(--ps-fg-3); cursor: default; }   /* a tab not built yet, with its Soon badge (S-42) */
.ps-tabs [role="tab"]:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; border-radius: 8px; }
.ps-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--ps-line); }
.ps-tabs::-webkit-scrollbar { display: none; }
.ps-tabs > [role="tab"] { flex: none; }
.ps-tabs__ind { bottom: 0; }
@media (max-width: 720px) { .ps-tabs { scroll-snap-type: x proximity; } .ps-tabs > [role="tab"] { scroll-snap-align: start; } }
/* The current tab (Oct 29, Sisi: one look on every tab bar; Nov 7: a low band): a lime marker stroke just under the word, exactly as
   wide as the word (the content box, not the tab's padding), the word in the text color. Full lime in both themes: the band never sits
   behind the letters, so dark needs no softer band (the 42% band read olive). It replaces the sliding underline (.ps-tabs__ind stays in
   the markup, hidden). background-origin, not the shorthand's box: clipping to the content box would cut the band off. */
.ps-tabs { --ps-tab-mark: var(--ps-color-sprout-strong); }
html[data-theme="dark"] .ps-tabs { --ps-tab-mark: var(--ps-color-sprout); }
/* Tabs on a surface that stays dark in the light theme (the Planner's phone preview, .ps-dark): the dark theme's lime (QA Nov 7) */
:is(.ps-phone, .ps-dark) .ps-tabs { --ps-tab-mark: var(--ps-color-sprout); }
.ps-tabs [role="tab"]:is([aria-selected="true"], [aria-current="page"]) { color: var(--ps-fg);
  background: linear-gradient(var(--ps-tab-mark), var(--ps-tab-mark)) no-repeat; background-origin: content-box;
  background-size: 100% .32em; background-position: 0 calc(50% + .66em); }
.ps-tabs .ps-tabs__ind { display: none; }
/* .ps-tabs--main: a page's main tabs (the Studio's), larger, regular weight (Nov 5, 2026) */
.ps-tabs--main { gap: 0; }
.ps-tabs.ps-tabs--main [role="tab"] { padding: 10px var(--ps-space-3); font-size: var(--ps-type-title); font-weight: 400; }

/* ---------- Tones for bars and dots; FullCalendar danger and info events; a roomier time grid ---------- */
.ps-bar--ok > i { background: var(--ps-ok); }
.ps-bar--warn > i { background: var(--ps-warn); }
.ps-bar--danger > i { background: var(--ps-danger); }
.ps-bar--ai > i { background: var(--ps-color-lavender); }
.ps-dot--ok { background: var(--ps-ok); } .ps-dot--info { background: var(--ps-info); } .ps-dot--warn { background: var(--ps-warn); }
.ps-dot--danger { background: var(--ps-danger); } .ps-dot--ai { background: var(--ps-color-lavender); } .ps-dot--muted { background: var(--ps-fg-3); }
html.ps-v2 .fc .fc-event.ps-ev-danger { --ps-ev-bg: var(--ps-danger-soft); --ps-ev-fg: var(--ps-danger); }
html.ps-v2 .fc .fc-event.ps-ev-info { --ps-ev-bg: var(--ps-info-soft); --ps-ev-fg: var(--ps-info); }
html.ps-v2 .fc.ps-fc-roomy .fc-timegrid-slot { height: 2.6em; }

/* ---------- Phone table cards: the lead cell reads left, the ⋯ never covers it ---------- */
@media (max-width: 720px) {
  .ps-table--cards td.ps-lead { justify-content: flex-start; text-align: left; font-weight: 500; }
  .ps-table--cards td.ps-lead > * { min-width: 0; }
  .ps-table--cards tbody tr:has(> td.ps-act) > td:first-child { padding-right: 44px; }
}

/* ---------- Touch targets for the new pieces ---------- */
@media (pointer: coarse) {
  .ps-month__num { min-width: 32px; height: 28px; }
  .ps-bubble__time { position: relative; } .ps-bubble__time::after { content: ""; position: absolute; inset: -12px -4px; }
}

/* ======================================================================================================
   Story pages (GTM-268): general components for long pages that tell a story as you scroll, and for any page outside the
   portal shell (the website, sign-in, legal pages, public portfolios, launch and case pages). A player stage with a scrub
   bar, a scroll rail in the gutter, the cycle rings, the pinned sideways track, steps beside a pinned phone, the app grid
   and the page frame. The page's script sets state and the components' own properties through the CSSOM (--v, --p, --hx,
   a ring node's --a, a pin's --at). Examples: internal/design-system.html "Story pages" (#ds-site). Rules: design/README.md.
   ====================================================================================================== */

/* ---------- Page frame: width, header, sections and headings for a page outside the portal shell ---------- */
.ps-page { margin: 0; }   /* <body class="ps-page">: a page outside the portal shell carries no CSS, so the frame resets here */
.ps-page *, .ps-page *::before, .ps-page *::after { box-sizing: border-box; }
.ps-page img, .ps-page video { max-width: 100%; }
.ps-page :is(b, strong) { font-weight: var(--ps-weight-medium); }   /* the system ships 300, 400 and 500; never a faux bold */
.ps-page-wrap { box-sizing: border-box; width: 100%; max-width: var(--ps-size-page-max); margin-inline: auto; padding-inline: clamp(var(--ps-space-4), 4vw, var(--ps-space-7)); }
.ps-page-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--ps-layer-header); box-shadow: 0 1px 0 var(--ps-line);
  background: var(--ps-glass); -webkit-backdrop-filter: var(--ps-glass-blur); backdrop-filter: var(--ps-glass-blur); }
[data-theme="dark"] .ps-page-header { background: color-mix(in oklab, var(--ps-page) 82%, transparent); }   /* on a dark page the glass reads too thin over moving video */
.ps-page-header__bar { max-width: calc(var(--ps-size-page-max) + var(--ps-space-7) * 2); margin-inline: auto; min-height: var(--ps-size-page-header); padding-inline: clamp(var(--ps-space-4), 4vw, var(--ps-space-7)); display: flex; align-items: center; gap: var(--ps-space-5); }
.ps-page-header__nav { display: flex; gap: var(--ps-space-5); }
.ps-page-header__nav a { color: var(--ps-fg-2); text-decoration: none; font: 400 var(--ps-type-control)/1 var(--ps-font-ui); transition: color var(--ps-dur-press) ease; }
.ps-page-header__nav a:hover { color: var(--ps-fg); }
.ps-page-header__end { margin-left: auto; display: flex; align-items: center; gap: var(--ps-space-3); }
.ps-page-header__menu { padding: var(--ps-space-2) var(--ps-space-4) var(--ps-space-4); }
/* The wordmark "prompt" is ALWAYS weight 300 (--ps-weight-mark), never 400 or heavier (Sisi, Nov 8, 2026): every logo rule sets
   it from the token, never a number. tests/ui/wordmark-weight.test.js checks it. */
.ps-wordmark { font: var(--ps-weight-mark) var(--ps-type-story-mark)/1 var(--ps-font-mark); color: var(--ps-fg); text-decoration: none; }

.ps-page-section { padding-block: clamp(var(--ps-space-7), 8vw, calc(var(--ps-space-7) * 2.4)); display: grid; gap: var(--ps-gap, var(--ps-space-6)); }   /* a section: its parts stack with a gap (--ps-gap, .ps-gap-N) */
.ps-page-section--lead { padding-bottom: var(--ps-space-5); }   /* a section that introduces the one right after it */
.ps-page-section--game { padding-block: var(--ps-space-7); }   /* a section holding a game (the contractor application, Nov 5): 48px above and below, so the card shows more */
/* Page split: a page section in two columns, its copy beside a picture (a phone, a card, the faces). --lead: the copy leads and the
   picture is narrower (it can stick); --picture: the picture leads. One column on phones (--picture from tablets). */
.ps-page-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.ps-page-split--lead { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: start; }
.ps-page-split--picture { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); column-gap: var(--ps-space-7); }
.ps-page-split__copy { display: grid; gap: var(--ps-space-4); }
.ps-page-split__copy p { color: var(--ps-fg-2); max-width: 32em; }
@media (max-width: 1100px) { .ps-page-split--picture { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .ps-page-split { grid-template-columns: minmax(0, 1fr); } }
.ps-headline { font: 400 clamp(var(--ps-type-display-phone), 7.4vw, var(--ps-type-headline))/.88 var(--ps-font-display); letter-spacing: 0; margin: 0; text-wrap: balance; }
.ps-headline--md { font-size: clamp(var(--ps-type-section), 5.6vw, var(--ps-type-headline-md)); line-height: .92; }   /* a statement */
:root { --heading: clamp(var(--ps-type-section), 4.2vw, var(--ps-type-display)); }   /* the section heading size, one definition */
.ps-heading { font: 400 var(--heading)/.95 var(--ps-font-display); letter-spacing: 0; margin: 0; text-wrap: balance; }
:root { --lede: clamp(var(--ps-type-title), 1.6vw, var(--ps-type-lede)); }   /* the lede size, one definition: .ps-lede and lede-sized text */
.ps-lede { font: 300 var(--lede)/1.55 var(--ps-font-ui); color: var(--ps-fg-2); max-width: 34em; margin: 0; }
.ps-lede--sm { font-size: var(--ps-type-title); }   /* a quieter lede: body size */
/* Statement heading (Oct 9, shared by the website, the waitlist intake and the application): a light Poppins line, then the
   big Bebas line, then an optional handwritten line in lime. One handwriting size everywhere (--hand). The website's
   (Its older names, .stmt / .hero-light / .hero-bold / .stmt-hand / .hand-note, are gone: the website uses these since Oct 10.) */
:root { --stmt-light: clamp(var(--ps-type-statement-light-phone), 2.8vw, var(--ps-type-statement-light)); --stmt-bold: clamp(var(--ps-type-statement-phone), 6.4vw, var(--ps-type-statement)); --hand: clamp(var(--ps-type-hand-phone), 4vw, var(--ps-type-hand)); }   /* fluid between the type tokens' phone and desktop sizes */
.ps-statement { display: grid; gap: 0; align-content: start; margin: 0; text-wrap: balance; }   /* the lines stay together when the row is taller */
.ps-statement .ps-statement__light { font-family: var(--ps-font-ui); font-weight: var(--ps-weight-light); font-size: var(--stmt-light); line-height: 1.2; letter-spacing: -.01em; }
.ps-statement .ps-statement__bold { font-family: var(--ps-font-display); font-weight: 400; font-size: var(--stmt-bold); line-height: .9; margin-top: .2em; }
.ps-statement .ps-statement__hand { display: block; font-family: var(--ps-font-human); font-weight: 400; font-size: var(--hand); line-height: 1; color: var(--ps-accent-stroke); rotate: -3deg; transform-origin: left center; margin-top: var(--ps-space-2); }
.ps-hand-note { font-family: var(--ps-font-human); font-size: var(--hand); line-height: 1; color: var(--ps-fg-2); rotate: -2deg; transform-origin: left center; margin: 0; }
.ps-page-footer, .ps-page-footer * { box-sizing: border-box; }   /* fetched into pages that set no box model of their own */
.ps-page-footer { display: grid; gap: var(--ps-space-6); font-weight: var(--ps-weight-light); padding-block: var(--ps-space-7); box-shadow: 0 -1px 0 var(--ps-line); }
/* the website keeps room under its footer for the sticky Join the waitlist bar (.ps-sticky-cta); in the portal the page
   already keeps room for its bottom bar, so the footer adds nothing (Oct 23: the two together left ~200px empty on phones) */
:where(html.ps-story) .ps-page-footer { padding-bottom: calc(var(--ps-space-7) + 72px); }
.ps-page-footer__cols { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: var(--ps-space-5); }   /* brand, then Product / About / Creatives / Legal (one footer for every public page, Oct 10; About since GTM-414) */
.ps-page-footer__cols > * { display: grid; gap: var(--ps-space-2); align-content: start; min-width: 0; overflow-wrap: anywhere; }
.ps-page-footer nav { font-size: var(--ps-type-control); }
.ps-page-footer nav a, .ps-page-footer .ps-fine a { text-decoration: none; color: var(--ps-fg-2); transition: color var(--ps-dur-base) var(--ps-ease-out); }
.ps-page-footer nav a:hover, .ps-page-footer .ps-fine a:hover { color: var(--ps-fg); }
.ps-page-footer__label { margin: 0; font: var(--ps-weight-medium) calc(var(--ps-type-label) * 1.2)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
/* phones and tablets (Natalia, Nov 5): the brand on its own row (logo, company, email, Instagram), then the four link groups
   two by two, with room between the rows and between the links */
@media (max-width: 768px) {
  .ps-page-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-6) var(--ps-space-5); }
  .ps-page-footer__cols > :first-child { grid-column: 1 / -1; padding-bottom: var(--ps-space-5); box-shadow: 0 1px 0 var(--ps-line); }
  .ps-page-footer__cols > nav { gap: var(--ps-space-3); }
}
.ps-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ps-layer-bar); display: none; padding: var(--ps-space-3) var(--ps-space-4) calc(var(--ps-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--ps-glass); -webkit-backdrop-filter: var(--ps-glass-blur); backdrop-filter: var(--ps-glass-blur); box-shadow: 0 -1px 0 var(--ps-line);
  transform: translateY(110%); transition: transform var(--ps-dur-drawer) var(--ps-ease-drawer); }
.ps-sticky-cta.is-shown { transform: none; }
.ps-sticky-cta .ps-btn { width: 100%; }

/* ---------- Player stage: the one dark island, a reel filling it and the headline over its lower edge ---------- */

 img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Scrub bar: the reel's playhead with comment pins ---------- */

/* ---------- Timeline rail: the page's playhead down the left gutter (wide screens) ---------- */

   /* the rail needs ~100px of gutter beside the 1180px column */
/* beside the rail, a full-bleed sideways track fades in after the rail instead of sliding under it */

/* ---------- Ring: a cycle of steps around a center (the five-step client loop; the job cycle) ----------
   Nodes sit at their angle --a (the script sets it: 360deg / steps × index). .ps-ring__arc marks the current step.
   .ps-ring--chase: a light runs round and lights each step in turn (--steps, --cycle). */

@keyframes ps-ring-chase { from { stroke-dashoffset: 20; } to { stroke-dashoffset: -480; } }

@keyframes ps-ring-lit { 0%, 16% { background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none; } 22%, 100% { background: var(--ps-pop-bg); color: var(--ps-fg); } }

/* ---------- Pinned sideways track: the section stays while its row of images slides across ----------
   The script sizes the section (pinned height + the track's overflow) and sets --hx. Items: --s/--m/--l/--w widths,
   --o1…--o4 drop them down the frame. Reduced motion: a plain row you swipe. */
   /* the script sets --hs-h: the sticky height plus the sideways distance */

/* ---------- Scroll story: steps on one side, a sticky visual that shows the active step (.is-active / .is-on) ---------- */

/* ---------- Faces: overlapping round portraits with a name (directory previews) ---------- */
.ps-faces { list-style: none; margin: 0; padding: 0 var(--ps-space-4); display: flex; flex-wrap: wrap; justify-content: center; row-gap: var(--ps-space-4); }
.ps-faces > li { margin: 0 -10px; }   /* the faces overlap, like a crowd */
.ps-faces a { display: grid; justify-items: center; gap: var(--ps-space-2); color: var(--ps-fg-2); text-decoration: none; font: 400 var(--ps-type-caption)/1.2 var(--ps-font-ui); transition: transform var(--ps-dur-move) var(--ps-ease-out); }
html.ps-v2 .ps-faces a { text-decoration: none; }
.ps-faces img { width: clamp(var(--ps-size-page-face-min), 9vw, var(--ps-size-page-face)); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  border: 4px solid var(--ps-page); box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--ps-color-ink) 45%, transparent); }   /* the first design: the page-colored border inside, a soft drop shadow */
@media (hover: hover) and (pointer: fine) { .ps-faces a:hover { transform: translateY(-6px); position: relative; } }
/* the website's crowd (Oct 9, Natalia): every face the same size, set at different heights, overlapping, names for screen readers only */
.ps-faces--cluster { --face: clamp(96px, 11vw, 150px); max-width: calc(var(--face) * 4.4); margin-inline: auto; row-gap: 0; padding-block: var(--ps-space-5) var(--ps-space-7); align-items: flex-start; }
.ps-faces--cluster > li { margin: 0 -8px -14px; transform: translateY(var(--y, 0px)); }
.ps-faces--cluster img { width: var(--face); border-width: 2px; }
.ps-faces--cluster span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ps-faces--cluster > li:nth-child(7n + 1) { --y: 10px; } .ps-faces--cluster > li:nth-child(7n + 2) { --y: 52px; } .ps-faces--cluster > li:nth-child(7n + 3) { --y: -6px; }
.ps-faces--cluster > li:nth-child(7n + 4) { --y: 38px; } .ps-faces--cluster > li:nth-child(7n + 5) { --y: 0px; } .ps-faces--cluster > li:nth-child(7n + 6) { --y: 26px; } .ps-faces--cluster > li:nth-child(7n + 7) { --y: -14px; }
.ps-faces--cluster > li:nth-child(even) { position: relative; z-index: 1; }
.ps-faces--cluster > li:hover { position: relative; z-index: 2; }
@media (max-width: 768px) { .ps-faces--cluster { --face: 25vw; max-width: none; padding-inline: var(--ps-space-2); } }   /* the face you point at rises above its neighbors */

/* ---------- Ladder: levels that rise (Entry → Director) ---------- */
.ps-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: var(--ps-space-2); align-items: end; }
.ps-ladder > li { padding: var(--ps-space-3); border-radius: var(--ps-radius-control); background: var(--ps-chip); font: 400 var(--ps-type-section)/1 var(--ps-font-display); }
.ps-ladder > li:nth-child(2) { padding-top: var(--ps-space-6); } .ps-ladder > li:nth-child(3) { padding-top: var(--ps-space-7); }
.ps-ladder > li:last-child { padding-top: calc(var(--ps-space-7) + var(--ps-space-5)); background: var(--ps-color-sprout); color: var(--ps-color-ink); }
@media (max-width: 480px) { .ps-ladder > li { font-size: var(--ps-type-title); } }

/* ---------- Terms: short headline + one line each, on hairlines (two columns on wide screens) ---------- */
.ps-terms { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ps-space-7); }
.ps-terms > div { display: grid; gap: var(--ps-space-2); align-content: start; padding-block: var(--ps-space-5); box-shadow: 0 -1px 0 var(--ps-line); }   /* a short term sits at the top of its row, no gap under its title */
.ps-terms dt { font: 400 clamp(var(--ps-type-section), 3.2vw, var(--ps-type-number))/.95 var(--ps-font-display); }
.ps-terms dd { margin: 0; color: var(--ps-fg-2); max-width: 28em; }
@media (max-width: 768px) { .ps-terms { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Big tags: Bebas pills for trades and categories ---------- */
.ps-tag--soon { background: none; box-shadow: inset 0 0 0 1px var(--ps-line); color: var(--ps-fg-3); }   /* not live yet */

/* ---------- Questions: an accordion of <details> on hairlines; the chevron turns ---------- */
.ps-faq { max-width: calc(var(--ps-size-page-max) * .75); }
.ps-faq details { box-shadow: 0 -1px 0 var(--ps-line); }
.ps-faq details:last-child { box-shadow: 0 -1px 0 var(--ps-line), 0 1px 0 var(--ps-line); }
.ps-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-4); min-height: var(--ps-size-touch); padding-block: var(--ps-space-4);
  font: 400 var(--ps-type-story-question)/1.35 var(--ps-font-ui); }
.ps-faq summary::-webkit-details-marker { display: none; }
.ps-faq summary .ps-icon { transition: transform var(--ps-dur-base) var(--ps-ease-out); }
.ps-faq details[open] summary .ps-icon { transform: rotate(180deg); }
.ps-faq details > :not(summary) { margin: 0; padding-bottom: var(--ps-space-4); color: var(--ps-fg-2); max-width: 42em; }
/* Answer pages (GTM-414): the site's pages that each answer one question read their body copy a step larger than the portal's,
   and the end card carries the waitlist button (data-view="doc", built by scripts/website/build.py). */
:where(html.ps-story) .ps-prose { font-size: var(--ps-type-title); }
:where(html.ps-story) .ps-stage--end > .ps-actions { justify-content: center; }
/* a comparison table on a phone: each row's label on a line of its own, the two answers side by side under it */
@media (max-width: 600px) {
  :where(html.ps-story) .ps-prose .ps-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  :where(html.ps-story) .ps-prose .ps-table tr > :first-child { grid-column: 1 / -1; padding-bottom: 0; border-bottom: 0; }
  :where(html.ps-story) .ps-prose .ps-table thead tr > :first-child { display: none; }
}

/* Answer-page photos (GTM-414, Nov 4, Natalia: the pages were all text): Prompt's own photos under the lede, portrait .ps-media
   tiles in a .ps-media-grid, two side by side on a phone. An AI-made clip is a muted <video> with its poster and data-src (it
   plays only while on screen and never with reduced motion: the answer-page block of the story-page script) and carries .ps-media__tag--ai. */
.ps-doc-photos { grid-template-columns: repeat(auto-fill, minmax(150px, 240px)); }   /* 240px tiles on a desktop, a single photo included */
.ps-doc-photos .ps-media__meta { white-space: normal; }   /* captions wrap, in both languages */
@media (max-width: 600px) { .ps-doc-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* two side by side on a phone */
/* a service page's loop (Nov 8, Sisi: /questions/<service>/, the pages the Order a Job pop-ups open): one wide tile across the
   column, 3:1 (2:1 on a phone), the action kept in the middle band. Same clip rules as above (on screen only, poster with reduced motion). */
.ps-doc-photos--hero { grid-template-columns: minmax(0, 1fr); }
.ps-doc-photos--hero .ps-media { --ps-media-ratio: 3 / 1; }
.ps-doc-photos--hero .ps-media__thumb > :is(img, video) { object-position: 50% 40%; }
@media (max-width: 600px) { .ps-doc-photos--hero .ps-media { --ps-media-ratio: 2 / 1; } }
:where(figure).ps-media { margin: 0; }

/* ---------- Help hub (GTM-414, Nov 4, Natalia): the Questions page opens like a help center. A big search of every answer
   (.ps-help-search; behavior: the help block of the story-page script, index built by scripts/website/build.py), then the
   most-asked questions as links (.ps-help-links) and the answer pages as cards by topic (.ps-help-card in a .ps-grid). ---------- */
.ps-help-search { position: relative; width: 100%; max-width: calc(var(--ps-size-page-max) * .75); display: grid; gap: var(--ps-space-2); }
.ps-help-search > .ps-search { height: calc(var(--ps-size-touch) * 1.5); padding-inline: var(--ps-space-5); gap: var(--ps-space-3); color: var(--ps-fg-2); }
.ps-help-search > .ps-search .ps-bare { font-size: var(--ps-type-title); }
.ps-help-search > .ps-search .ps-bare:focus-visible { outline: none; box-shadow: none; }   /* the pill shows the focus, not the field inside it */
.ps-help-results { margin: 0; padding: var(--ps-space-2); list-style: none; border-radius: var(--ps-radius-card); display: grid; }
.ps-help-results a { display: grid; gap: 2px; padding: var(--ps-space-3) var(--ps-space-4); border-radius: var(--ps-radius-control); color: var(--ps-fg); text-decoration: none; }
.ps-help-results a:hover .ps-help-results__title { font-weight: var(--ps-weight-medium); }
.ps-help-results a:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; }
.ps-help-results__kind { color: var(--ps-fg-3); font: 500 var(--ps-type-label)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; }
.ps-help-results__none { padding: var(--ps-space-3) var(--ps-space-4); color: var(--ps-fg-2); }
.ps-help-links { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); column-gap: var(--ps-space-6); }
.ps-help-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-4); min-height: var(--ps-size-touch); padding-block: var(--ps-space-3);
  box-shadow: 0 1px 0 var(--ps-line); color: var(--ps-fg); text-decoration: none; }
.ps-help-links a:hover { font-weight: var(--ps-weight-medium); }
.ps-help-links .ps-icon, .ps-help-card > .ps-icon { flex: none; color: var(--ps-fg-3); }
.ps-help-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--ps-space-4); row-gap: var(--ps-space-1);
  align-items: start; color: var(--ps-fg); text-decoration: none; }
/* the icon is the Order a Job form's service tile (.ps-element--agent[data-step], the icon in its loop color; Sisi, Nov 8) */
.ps-help-card > .ps-element--agent { grid-row: 1 / span 2; width: 48px; }
@media (hover: hover) and (pointer: fine) { .ps-help-card:hover > .ps-element--agent { transform: translateY(-3px); } }   /* lifts like the form's tile */
.ps-help-card__title { font-weight: var(--ps-weight-medium); padding-right: var(--ps-space-5); }
.ps-help-card__line { color: var(--ps-fg-2); font-size: var(--ps-type-caption); line-height: 1.45; }
.ps-help-card > .ps-icon:last-child { position: absolute; top: var(--ps-space-5); right: var(--ps-space-5); }

/* ---------- Help center navigation (Sisi, Nov 8, GTM-414: the title was too big, the page plain and hard to move around, and an
   answer had no way back, no breadcrumb and no search). One family for the Questions page and every answer page:
   - titles: an answer page's h1 (data-view="doc", the question finder's pages included) is a display title, not the home page's
     headline; inside the help layouts a section heading is the section size (--heading set once per layout)
   - .ps-help-try: popular searches under the hub's search (chips with data-help-try fill the search)
   - .ps-help-layout: the hub's topics menu (.ps-help-toc, sticky; a scrolling chip row under the header on a phone) beside its
     topic sections (.ps-help-section, each heading led by its topic's tile, the Order a Job form's .ps-element--agent[data-step]);
     most-asked questions as cards (.ps-help-q); a topic's questions in a glass box (.ps-faq__box)
   - .ps-doc-bar: an answer page's back button (.ps-doc-back), breadcrumb (.ps-doc-crumbs) and compact search (.ps-help-search--sm,
     its results float: solid, never glass on glass)
   - .ps-doc-layout: an answer page's sections (.ps-doc-section in .ps-doc-body) beside "On this page" (.ps-doc-aside holding a
     .ps-help-toc, desktop only); a single list in a section's prose reads as cards: a ul as included items, an ol as numbered steps
   - .ps-doc-related: the end of an answer page, its topic's other pages as cards and the rest as chips
   Behavior: the help block of the answer-page script (scroll spy on .ps-help-toc, data-help-try, the lazy index of --sm). ---------- */
:where(html.ps-story[data-view="doc"]) .ps-page-section--lead > .ps-headline { font-size: clamp(var(--ps-type-display-phone), 5.4vw, var(--ps-type-display)); line-height: .95; max-width: 18em; }
.ps-help-layout, .ps-doc-body, .ps-doc-related { --heading: var(--ps-type-section); }
.ps-help-hero { padding-bottom: var(--ps-space-6); }
.ps-help-try { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); }
.ps-help-try__label, .ps-help-toc__label { margin: 0; color: var(--ps-fg-3); font: 500 var(--ps-type-label)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; }

.ps-help-layout { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: var(--ps-space-7); align-items: start; padding-bottom: var(--ps-space-7); }
.ps-help-main { display: grid; gap: var(--ps-space-7); min-width: 0; }
.ps-help-section { display: grid; gap: var(--ps-space-5); scroll-margin-top: calc(var(--story-header-h) + var(--ps-space-4)); }
.ps-help-section__head { display: flex; align-items: center; gap: var(--ps-space-3); }
.ps-help-section__head > .ps-element--agent { flex: none; width: 40px; }   /* the topic's tile, the Order a Job form's (.ps-choice--svc) size */
.ps-help-section .ps-faq { max-width: none; }

.ps-help-toc { position: sticky; top: calc(var(--story-header-h) + var(--ps-space-4)); display: grid; gap: var(--ps-space-3); }
.ps-help-toc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ps-help-toc ul a { display: flex; align-items: center; gap: var(--ps-space-3); min-height: 36px; padding: var(--ps-space-2) var(--ps-space-3); border-radius: var(--ps-radius-control);
  color: var(--ps-fg-2); text-decoration: none; font-size: var(--ps-type-caption); line-height: 1.3; box-shadow: inset 2px 0 0 transparent; }
.ps-help-toc ul a .ps-icon { width: 16px; height: 16px; color: var(--ps-fg-3); }
.ps-help-toc ul a:hover { font-weight: var(--ps-weight-medium); }
.ps-help-toc ul a[aria-current="true"] { color: var(--ps-fg); font-weight: var(--ps-weight-medium); background: var(--ps-chip); box-shadow: inset 2px 0 0 var(--ps-color-sprout); }   /* lime marks where you are */
.ps-help-toc ul a[aria-current="true"] .ps-icon { color: var(--ps-fg); }
.ps-help-toc__all { display: inline-flex; align-items: center; gap: var(--ps-space-2); padding-inline: var(--ps-space-3); color: var(--ps-fg); text-decoration: none; font-size: var(--ps-type-caption); }
.ps-help-toc__all:hover { font-weight: var(--ps-weight-medium); }
.ps-help-toc__all .ps-icon { width: 14px; height: 14px; }

.ps-help-qs { --ps-grid-min: 220px; --ps-gap: var(--ps-space-4); }
.ps-help-q { display: grid; grid-template-rows: auto 1fr auto; gap: var(--ps-space-3); min-height: 168px; text-decoration: none; }
.ps-help-q__n { font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg-3); }
.ps-help-q__text { font: 500 var(--ps-type-story-question)/1.35 var(--ps-font-ui); color: var(--ps-fg); text-wrap: pretty; }
.ps-help-q__go { display: inline-flex; align-items: center; gap: var(--ps-space-2); color: var(--ps-fg-2); font-size: var(--ps-type-caption); }
.ps-help-q__go .ps-icon { width: 14px; height: 14px; transition: transform var(--ps-dur-base) var(--ps-ease-out); }
.ps-help-q:hover .ps-help-q__go { font-weight: var(--ps-weight-medium); }
.ps-help-q:hover .ps-help-q__go .ps-icon { transform: translateX(3px); }

.ps-faq__box { padding-inline: var(--ps-space-5); border-radius: var(--ps-radius-card); }
.ps-faq__box details:first-child { box-shadow: none; }
.ps-faq__box details:last-child { box-shadow: 0 -1px 0 var(--ps-line); }
.ps-faq__box details:only-child { box-shadow: none; }

.ps-doc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-3) var(--ps-space-4); padding-top: var(--ps-space-5); }
.ps-doc-bar + .ps-page-section--lead { padding-top: var(--ps-space-6); }
.ps-doc-back { flex: none; display: inline-flex; align-items: center; gap: var(--ps-space-2); height: 36px; padding: 0 var(--ps-space-4) 0 var(--ps-space-3); border-radius: var(--ps-radius-pill);
  background: var(--ps-fill); color: var(--ps-fg); text-decoration: none; font: 400 var(--ps-type-control)/1 var(--ps-font-ui); }
.ps-doc-back:hover { font-weight: var(--ps-weight-medium); }
.ps-doc-back .ps-icon { width: 16px; height: 16px; }
.ps-doc-back > span { line-height: 1; }
.ps-doc-crumbs { flex: 1 1 260px; min-width: 0; font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-doc-crumbs ol { display: flex; align-items: center; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ps-doc-crumbs ol::-webkit-scrollbar { display: none; }
.ps-doc-crumbs li { flex: none; display: inline-flex; align-items: center; gap: var(--ps-space-2); white-space: nowrap; }
.ps-doc-crumbs li + li::before { content: "›"; color: var(--ps-fg-3); }
.ps-doc-crumbs a { color: var(--ps-fg-2); text-decoration: none; }
.ps-doc-crumbs a:hover { font-weight: var(--ps-weight-medium); }
.ps-doc-crumbs [aria-current="page"] { color: var(--ps-fg); }
.ps-help-search--sm { flex: 0 1 340px; max-width: none; }
.ps-help-search--sm > .ps-search { height: 40px; padding-inline: var(--ps-space-4); }
.ps-help-search--sm > .ps-search .ps-bare { font-size: var(--ps-type-control); }
.ps-help-search--sm > .ps-help-results { position: absolute; top: calc(100% + var(--ps-space-2)); right: 0; width: max(100%, 380px); max-width: calc(100vw - 2 * var(--ps-space-4)); max-height: 70vh; overflow-y: auto; z-index: var(--ps-layer-menu); }

.ps-doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 240px); gap: var(--ps-space-7); align-items: start; }
.ps-doc-body { min-width: 0; display: grid; }
.ps-doc-section { padding-block: var(--ps-space-6); display: grid; gap: var(--ps-gap, var(--ps-space-5)); scroll-margin-top: calc(var(--story-header-h) + var(--ps-space-4)); }
.ps-doc-section + .ps-doc-section { box-shadow: 0 -1px 0 var(--ps-line); }
.ps-doc-section.ps-faq { max-width: none; }
.ps-doc-aside { position: sticky; top: calc(var(--story-header-h) + var(--ps-space-5)); padding-top: var(--ps-space-6); }
.ps-doc-aside .ps-help-toc { position: static; }
/* a section's single list reads as cards: what you get (ul, a check on each) and how it works (ol, numbered steps, four to a row) */
.ps-doc-body .ps-prose:has(> :is(ul, ol):only-child) { max-width: none; }
.ps-doc-body .ps-prose > :is(ul, ol):only-child { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--ps-space-3); counter-reset: ps-doc-step; }
.ps-doc-body .ps-prose > :is(ul, ol):only-child > li { position: relative; margin: 0; padding: var(--ps-space-4) var(--ps-space-4) var(--ps-space-4) calc(var(--ps-space-4) + 32px); border-radius: var(--ps-radius-card);
  background: var(--ps-raise); box-shadow: var(--ps-raise-shadow); line-height: 1.5; }
.ps-doc-body .ps-prose > ul:only-child > li::before { content: ""; position: absolute; left: var(--ps-space-4); top: calc(var(--ps-space-4) + 4px); width: 20px; height: 20px; border-radius: 50%; background: var(--ps-color-loop-make-deep); }
.ps-doc-body .ps-prose > ul:only-child > li::after { content: ""; position: absolute; left: calc(var(--ps-space-4) + 7px); top: calc(var(--ps-space-4) + 8px); width: 5px; height: 9px; border: solid var(--ps-color-loop-make-rail); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ps-doc-body .ps-prose > ol:only-child { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.ps-doc-body .ps-prose > ol:only-child > li { counter-increment: ps-doc-step; padding: var(--ps-space-5) var(--ps-space-4) var(--ps-space-4); }
.ps-doc-body .ps-prose > ol:only-child > li::before { content: counter(ps-doc-step, decimal-leading-zero); display: block; margin-bottom: var(--ps-space-2); font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg-3); }

.ps-doc-related { padding-top: var(--ps-space-7); }
.ps-doc-related .ps-grid { --ps-grid-min: 260px; --ps-gap: var(--ps-space-4); }
.ps-doc-related__more { display: grid; gap: var(--ps-space-3); }

@media (max-width: 960px) {
  .ps-doc-layout { grid-template-columns: minmax(0, 1fr); }
  .ps-doc-aside { display: none; }   /* a phone or tablet has the breadcrumb and the search at the top instead */
  .ps-help-layout { grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-5); }
  /* the topics become one scrolling row of chips that stays under the header */
  .ps-help-toc { top: var(--ps-help-toc-top, 0px); z-index: var(--ps-layer-sticky); margin-inline: calc(-1 * clamp(var(--ps-space-4), 4vw, var(--ps-space-7))); padding: var(--ps-space-2) clamp(var(--ps-space-4), 4vw, var(--ps-space-7));
    background: var(--ps-glass); -webkit-backdrop-filter: var(--ps-glass-blur); backdrop-filter: var(--ps-glass-blur); box-shadow: 0 1px 0 var(--ps-line); }
  .ps-help-toc__label { display: none; }
  .ps-help-toc ul { display: flex; gap: var(--ps-space-2); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ps-help-toc ul::-webkit-scrollbar { display: none; }
  .ps-help-toc ul a { flex: none; white-space: nowrap; min-height: 34px; padding: 0 var(--ps-space-3); border-radius: var(--ps-radius-pill); background: var(--ps-fill); box-shadow: none; }
  .ps-help-toc ul a[aria-current="true"] { background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none; }
  .ps-help-toc ul a[aria-current="true"] .ps-icon { color: inherit; }
}
@media (max-width: 600px) {
  .ps-doc-bar { gap: var(--ps-space-3); }
  .ps-doc-crumbs { flex-basis: calc(100% - 180px); }
  .ps-help-search--sm { flex: 1 1 100%; }
  .ps-help-search--sm > .ps-help-results { left: 0; right: 0; width: auto; }
  .ps-help-q { min-height: 0; }
  .ps-faq__box { padding-inline: var(--ps-space-4); }
}
@media (prefers-reduced-motion: reduce) { .ps-help-q__go .ps-icon { transition: none; } .ps-help-q:hover .ps-help-q__go .ps-icon { transform: none; } }

/* ---------- Why this works (GTM-310 BR-22): the knowledge behind an agent's result. One lavender line (AI only) that opens to the
   citations, each with its source. Rendered by the AI field (assets/ai-field.js) under every feature's result. ---------- */
.ps-why { margin-top: var(--ps-space-2); border-radius: var(--ps-radius-control); background: var(--ps-agent-bg); color: var(--ps-fg); font: 400 var(--ps-type-caption)/1.45 var(--ps-font-ui); min-width: 0; }
.ps-why > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--ps-space-2); min-height: var(--ps-size-touch); padding-inline: var(--ps-space-3); min-width: 0; }
.ps-why > summary::-webkit-details-marker { display: none; }
.ps-why > summary > .ps-icon { flex: none; color: var(--ps-agent-fg); }
.ps-why > summary > .ps-icon:last-child { margin-left: auto; color: var(--ps-fg-3); transition: transform var(--ps-dur-base) var(--ps-ease-out); }
.ps-why[open] > summary > .ps-icon:last-child { transform: rotate(180deg); }
.ps-why__label { flex: none; font-weight: var(--ps-weight-medium); color: var(--ps-agent-fg); }
.ps-why__first { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ps-fg-2); }
.ps-why[open] .ps-why__first { visibility: hidden; }
.ps-why__list { margin: 0; padding: 0 var(--ps-space-3) var(--ps-space-3) calc(var(--ps-space-3) + var(--ps-size-icon-sm) + var(--ps-space-2)); list-style: none; display: grid; gap: var(--ps-space-2); color: var(--ps-fg-2); overflow-wrap: anywhere; }
.ps-why:focus-within > summary { outline: none; }
.ps-why > summary:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; border-radius: var(--ps-radius-control); }

/* ---------- Media grid for reels: six across on wide screens, three on phones ---------- */

/* ---------- Story pages: phones and reduced motion ---------- */
@media (max-width: 1100px) { .ps-page-header__nav { display: none; } }
@media (max-width: 1100px) { body:has(.ps-page-fab) .ps-page-header__end > .ps-seg { display: none; } }   /* with the corner menu, the header's switch moves into it */
.ps-page-menu .ps-seg :is(button, a) { min-height: var(--ps-size-touch); font-size: var(--ps-type-control-phone); }   /* at touch size */
@media (max-width: 1100px) and (min-width: 769px) { body:has(.ps-page-fab) .ps-page-header__end { padding-right: calc(48px + var(--ps-space-3)); } }   /* room for the corner menu button */
@media (max-width: 768px) {
  .ps-page-header__bar { flex-wrap: wrap; row-gap: 0; padding-block: var(--ps-space-2); gap: var(--ps-space-3); }
  .ps-page-header__bar > .ps-seg { order: 3; width: 100%; margin-bottom: var(--ps-space-2); }
  body:has(.ps-page-fab) .ps-page-header__bar > .ps-seg { width: calc(100% - 48px - var(--ps-space-3)); }   /* beside the corner menu button */
  .ps-page-header__bar:has(> .ps-seg) { min-height: calc(var(--ps-size-page-header) + 44px); }   /* two rows on phones (the website's AI | Human switch): a steady height, so sticky parts sit just under it */

  .ps-sticky-cta { display: block; }
}
/* ---------- Agent grid: the platform's agents as a phone home screen (one tile per agent) ----------
   <ul class="ps-appgrid"><li><button class="ps-app" aria-pressed="false"><span class="ps-app__icon">svg</span><span class="ps-app__name">Ideator</span></button></li>
   A live agent carries the lavender agent dot where a phone shows its badge; .ps-app--soon is drawn as an outline with a "Soon" line.
   The site's script sets each tile's --i (its order) for the staggered entrance and adds .is-in to the grid when it scrolls in. */

/* ---------- Page menu on phones and tablets (or at every width, --always): the portal's slide-out, for pages outside the portal shell ----------
   <button class="ps-page-fab"> (fixed, top right) opens <nav class="ps-page-menu"> (graphite panel from the right) over
   <div class="ps-page-scrim">. Rows: .ps-page-menu__row (aria-current="page" for the current one), labels .ps-page-menu__label.
   PS.pageMenu(fab, menu): open/close, Escape, focus kept inside, page behind inert, swipe right to close. */
.ps-page-fab { position: fixed; top: var(--ps-space-4); right: var(--ps-space-4); z-index: var(--ps-layer-fab); width: 48px; height: 48px; padding: 0; align-items: center; justify-content: center;
  cursor: pointer; border: 0; border-radius: 50%; background: var(--ps-color-graphite); color: var(--ps-color-on-dark); -webkit-backdrop-filter: var(--ps-glass-blur); backdrop-filter: var(--ps-glass-blur);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ps-color-on-dark) 8%, transparent), 0 4px 16px color-mix(in srgb, var(--ps-color-ink) 25%, transparent); }
.ps-page-fab:focus-visible { outline: 2px solid var(--ps-color-sprout-strong); outline-offset: 2px; }
.ps-page-scrim { position: fixed; inset: 0; z-index: var(--ps-layer-header);   /* over the sticky page header (later in the page, so above it) */ background: var(--ps-color-scrim-strong); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity var(--ps-dur-drawer) var(--ps-ease-drawer), visibility 0s linear var(--ps-dur-drawer); }
.ps-page-scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.ps-page-menu { flex-direction: column; gap: var(--ps-space-1); position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--ps-layer-header-menu); width: min(78%, 340px); overflow-y: auto; touch-action: pan-y;
  padding: calc(48px + var(--ps-space-4) * 2) var(--ps-space-2) var(--ps-space-5); border-radius: 26px 0 0 26px; background: var(--ps-color-graphite); color: var(--ps-color-on-dark);
  -webkit-backdrop-filter: var(--ps-glass-blur); backdrop-filter: var(--ps-glass-blur); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ps-color-on-dark) 7%, transparent);
  transform: translateX(100%); visibility: hidden; transition: transform var(--ps-dur-drawer) var(--ps-ease-drawer), visibility 0s linear var(--ps-dur-drawer); }
.ps-page-menu.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.ps-page-menu.is-dragging, .ps-page-scrim.is-dragging { transition: none; }
.ps-page-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-page-menu__row { display: flex; align-items: center; gap: var(--ps-space-2); min-height: var(--ps-size-touch); padding: 6px 12px; border-radius: var(--ps-radius-control);
  color: color-mix(in srgb, var(--ps-color-on-dark) 66%, transparent); text-decoration: none; font: 400 var(--ps-type-control-phone)/1.3 var(--ps-font-ui);
  transition: background-color var(--ps-dur-press) ease, color var(--ps-dur-press) ease; }
.ps-page-menu__row:hover { color: var(--ps-color-on-dark); background: color-mix(in srgb, var(--ps-color-on-dark) 6%, transparent); }
.ps-page-menu__row[aria-current="page"] { color: var(--ps-color-sprout); background: color-mix(in srgb, var(--ps-color-sprout) 12%, transparent); }
.ps-page-menu__row:focus-visible { outline: 2px solid var(--ps-color-sprout-strong); outline-offset: -2px; }
.ps-page-menu__label { padding: var(--ps-space-5) 12px var(--ps-space-2); font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase;
  color: color-mix(in srgb, var(--ps-color-sprout) 62%, transparent); }
.ps-page-menu__end { margin-top: auto; padding: var(--ps-space-5) var(--ps-space-2) 0; display: flex; flex-direction: column; gap: var(--ps-space-3); }
.ps-page-menu__end .ps-btn { width: 100%; }
/* .ps-page-menu__cta: a row in __end, a small switch (EN | ES) beside the call to action, which takes the rest (Natalia, Nov 5) */
.ps-page-menu__cta { display: flex; align-items: stretch; gap: var(--ps-space-2); }
.ps-page-menu__cta > .ps-seg { flex: none; }
.ps-page-menu__cta > .ps-seg :is(button, a) { min-height: calc(48px - 6px); }   /* the switch as tall as the --lg button beside it */
.ps-page-menu__end .ps-page-menu__cta > .ps-btn { flex: 1; width: auto; min-width: 0; height: auto; min-height: 48px; padding-inline: var(--ps-space-4);
  white-space: normal; line-height: 1.15; text-align: center; }   /* a long label (Spanish) wraps to two lines instead of overflowing */
/* .ps-page-menu__logo: the full logo, small, at the top of the panel, level with the corner button (Natalia, Nov 5).
   <a class="ps-page-menu__logo" href="/" aria-label="Prompt home"><span class="ps-page-menu__slash" aria-hidden="true">/</span>prompt</a> */
.ps-page-menu__logo { position: absolute; top: var(--ps-space-4); left: calc(var(--ps-space-2) + 12px); height: 48px; display: inline-flex; align-items: center;
  font: var(--ps-weight-mark) var(--ps-type-lede)/1 var(--ps-font-mark); color: var(--ps-color-on-dark); text-decoration: none; }
.ps-page-menu__slash { color: var(--ps-color-sprout); -webkit-text-stroke: .045em currentColor; paint-order: stroke fill; margin-right: .04em; font-size: 1.087em; transform: translateY(-.03em); }
/* desktop (a mouse, tablet width up): the menu's text and buttons at control size, not touch size; 16px read too big (Natalia, Nov 5) */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .ps-page-menu__row { min-height: 36px; font-size: var(--ps-type-control); }
  .ps-page-menu .ps-seg :is(button, a) { min-height: 32px; font-size: var(--ps-type-control); }
  .ps-page-menu .ps-page-menu__cta > .ps-seg :is(button, a) { min-height: calc(var(--ps-size-control) - 6px); }
  .ps-page-menu__end .ps-btn { height: var(--ps-size-control); padding-inline: var(--ps-space-4); font-size: var(--ps-type-control); }   /* the buttons at control size too */
  .ps-page-menu__end .ps-page-menu__cta > .ps-btn { height: auto; min-height: var(--ps-size-control); }
}
.ps-page-fab, .ps-page-menu, .ps-page-scrim { display: none; }   /* shown on phones and tablets, or at every width with --always */
@media (max-width: 1100px) { .ps-page-fab { display: flex; } .ps-page-menu { display: flex; } .ps-page-scrim { display: block; } }
.ps-page.is-menu-open { overflow: hidden; }
/* .ps-page-fab--always: the menu at every width (the website, Oct 12). The header keeps only the wordmark and its switch (AI | Human),
   which fills the bar; the nav, language, Sign In and the call to action live in the menu. From tablets up the bar is as tall as the
   corner button's spot (48px + 16px above and below), so the button sits centered in it. */
.ps-page-fab--always { display: flex; }
body:has(.ps-page-fab--always) .ps-page-menu { display: flex; }
body:has(.ps-page-fab--always) .ps-page-scrim { display: block; }
body:has(.ps-page-fab--always) :is(.ps-page-header__nav, .ps-page-header__end) { display: none; }
@media (min-width: 769px) {
  body:has(.ps-page-fab--always) .ps-page-header__bar { max-width: none; min-height: calc(48px + var(--ps-space-4) * 2); padding-right: calc(48px + var(--ps-space-4) + var(--ps-space-5)); gap: var(--ps-space-6); }
  body:has(.ps-page-fab--always) .ps-page-header__bar > .ps-seg { flex: 1; }
  body:has(.ps-page-fab--always) .ps-page-header__bar > .ps-seg button { min-height: var(--ps-size-touch); font-size: var(--ps-type-control-phone); }
  body:has(.ps-page-fab--always) .ps-page-header__bar > .ps-seg .ps-icon { width: var(--ps-size-icon); height: var(--ps-size-icon); }
}

/* ---------- The player stage, played by agents: a grid of agent tiles in place of the reel; each lights as the playhead passes ---------- */

@media (prefers-reduced-motion: reduce) {

   .ps-sticky-cta{ transition: none; }
   
  .ps-page-menu, .ps-page-scrim { transition: opacity 120ms ease, visibility 0s; }
}

/* ---------- Reduced motion (GTM-337 pieces): fades stay, movement goes ---------- */
@media (prefers-reduced-motion: reduce) {
  .ps-wizard__step.is-entering, .ps-wizard__step.is-entering.is-back { animation: ps-step-fade 200ms ease both; }
  .ps-steps > li.is-just-done .ps-steps__dot, .ps-steps > li.is-just-done .ps-steps__dot .ps-icon { animation: none; }
  .ps-progress > i { transition: none; }
  .ps-choice:active, .ps-month__ev:active { transform: none; }
  .ps-choice__mark::after { transition: none; }
  .ps-tip, .ps-tip.is-open { transform: none; }
}

/* ======================================================================================================
   GTM-332 motion still missing at GTM-337: hold to delete, the approval moment ("Your new week" went with GTM-333 on Oct 12). Each one has a named
   purpose, never loops, and keeps only fades (or a still state) under reduced motion.
   ====================================================================================================== */

/* ---------- Hold to delete (PS.hold): the fill grows while held; letting go before it's full cancels. No pop-up to click
   through for actions that can't be undone. Space or Enter held works the same; the hint says so to screen readers. ---------- */
.ps-hold { position: relative; overflow: hidden; isolation: isolate; user-select: none; -webkit-user-select: none; touch-action: none; }
.ps-hold::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ps-danger); opacity: .28; clip-path: inset(0 100% 0 0);
  transition: clip-path 200ms var(--ps-ease-out); }
.ps-hold.is-holding::before { clip-path: inset(0 0 0 0); transition: clip-path var(--ps-hold-ms, 1600ms) linear; }
html.ps-v2 .ps-hold.is-holding:not(:disabled) { transform: scale(var(--ps-press-scale)); }
.ps-hold.is-done { opacity: .6; }

/* ---------- The approval moment (PS.approve): the button turns lime, draws its check and pulses once ---------- */
@keyframes ps-pulse-once { 0% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ps-color-sprout-strong) 70%, transparent); }
  100% { opacity: 0; box-shadow: 0 0 0 14px color-mix(in srgb, var(--ps-color-sprout-strong) 0%, transparent); } }
.ps-approve { position: relative; }
.ps-approve::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; }
.ps-approve.is-done { background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none; pointer-events: none; }
.ps-approve.is-done::after { animation: ps-pulse-once 600ms var(--ps-ease-out); }
.ps-approve.is-done .ps-icon { animation: ps-icon-in 280ms var(--ps-ease-out) 80ms both; }

@media (prefers-reduced-motion: reduce) {
  html.ps-v2 .ps-hold.is-holding:not(:disabled) { transform: none; }
  .ps-approve.is-done::after, .ps-approve.is-done .ps-icon { animation: none; }
}

/* ---------- The sign-in card (moved from portal.css, Oct 10; redesigned Nov 7, Sisi, GTM-337) ----------
   One definition for the sign-in pages (index.html, internal/index.html, forgot and reset password, the invitation) and the
   sign-in gate below. Each sign-in keeps its own colors in both themes (the tokens in ps-tokens.css): the team's is a light
   page (.login-scene, the box behind the card) with a near-black card (.login-card), the subscribers' is a dark page
   (.login-scene--subscriber) with a light card (.login-card--subscriber). login-effects.js draws the canvases from the
   scene's own tokens. */
.login-bg-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; }
/* The scene's own page color under the whole window: the canvases are see-through, and the page under them follows the theme,
   so without this a dark page would show through the team's light scene (and the reverse). Below everything in the scene. */
.login-scene::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--ps-page); pointer-events: none; }
.login-wrap ~ [id$="footer-placeholder"] { position: relative; z-index: 3; background: var(--ps-page); }   /* the shared footer sits on the page, above the sign-in background, so it reads */
#login-matrix-canvas   { z-index: 0; opacity: .72; }
#login-circuit-canvas  { z-index: 1; opacity: .55; }
#login-scanline-canvas { z-index: 2; }
.login-card { width: 90%; max-width: 440px; padding: var(--ps-space-7); border: 0; border-radius: var(--ps-radius-card); background: var(--ps-pop-bg); box-shadow: var(--ps-pop-shadow); color: var(--ps-fg); }
.login-wordmark { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--ps-space-6); }
.login-wordmark-name { display: block; text-align: center; font: var(--ps-weight-mark) var(--ps-type-section)/1 var(--ps-font-mark); color: var(--ps-fg); }
/* In the card, the logo is the full mark on the left: the brand's lime "/" then "prompt" (the word 92% of the slash, as in
   the opening). On the light card the slash keeps an ink outline so it reads. The onboarding header keeps the plain word above. */
.login-card .login-wordmark { flex-direction: row; align-items: baseline; text-align: left; margin-bottom: var(--ps-space-5);
  font: var(--ps-weight-mark) var(--ps-type-signin-mark)/1 var(--ps-font-mark); }
.login-wordmark-slash { color: var(--ps-color-sprout); -webkit-text-stroke: .045em currentColor; paint-order: stroke fill; margin-right: .04em; }
.login-card--subscriber .login-wordmark-slash { -webkit-text-stroke-color: var(--ps-color-ink); }
.login-card .login-wordmark-name { font-size: .92em; text-align: left; }
.login-eyebrow { display: block; margin-bottom: 10px; font: 500 var(--ps-type-label)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-2); }
.login-heading { margin: 0 0 var(--ps-space-3); font: 400 var(--ps-type-display)/.95 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
.login-sub { margin-bottom: var(--ps-space-6); font: 400 var(--ps-type-body)/1.6 var(--ps-font-ui); color: var(--ps-fg-2); }
.login-heading + form, .login-heading + .login-field { margin-top: var(--ps-space-4); }   /* no line under the heading: the form keeps its room */
.login-field { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: 12px 14px; border: 0; border-radius: var(--ps-radius-control); outline: none; -webkit-appearance: none;
  background: var(--ps-chip); box-shadow: inset 0 0 0 1px var(--ps-line); color: var(--ps-fg); font: 400 var(--ps-type-body)/1.4 var(--ps-font-ui);
  transition: box-shadow var(--ps-dur-press) ease; }
.login-field:focus { box-shadow: inset 0 0 0 1px var(--ps-focus); }
.login-field::placeholder { color: var(--ps-fg-3); }
/* A field the browser filled in keeps the card's own colors. Chrome, Safari and Edge paint their own autofill fill (a blue-grey
   on the dark card, a pale blue on a light one) and Firefox tints it with a filter. The inset shadows paint over that fill:
   the field's line, the chip, then the card under the chip (the chip is see-through). GTM-337, Nov 7, Sisi.
   Two rules, not one list: a browser that doesn't know one of the selectors would drop the whole list. */
.login-field:-webkit-autofill { -webkit-text-fill-color: var(--ps-fg); caret-color: var(--ps-fg);
  box-shadow: inset 0 0 0 1px var(--ps-line), inset 0 0 0 100px var(--ps-chip), inset 0 0 0 100px var(--ps-pop-bg);
  transition: background-color 600000s 0s, color 600000s 0s; }
.login-field:autofill { filter: none; -webkit-text-fill-color: var(--ps-fg); caret-color: var(--ps-fg);
  box-shadow: inset 0 0 0 1px var(--ps-line), inset 0 0 0 100px var(--ps-chip), inset 0 0 0 100px var(--ps-pop-bg); }
.login-field:-webkit-autofill:focus { box-shadow: inset 0 0 0 1px var(--ps-focus), inset 0 0 0 100px var(--ps-chip), inset 0 0 0 100px var(--ps-pop-bg); }
.login-field:autofill:focus { box-shadow: inset 0 0 0 1px var(--ps-focus), inset 0 0 0 100px var(--ps-chip), inset 0 0 0 100px var(--ps-pop-bg); }
.login-field + .login-field { margin-top: 10px; }
.login-field.shake { animation: login-shake .4s ease; box-shadow: inset 0 0 0 1.5px var(--ps-danger); }
@keyframes login-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
.login-btn { display: block; width: 100%; height: 48px; margin-top: var(--ps-space-2); border: 0; border-radius: var(--ps-radius-pill); cursor: pointer;
  background: var(--ps-color-sprout); color: var(--ps-color-ink); font: 500 var(--ps-type-title)/1 var(--ps-font-ui); letter-spacing: 0; text-transform: none;
  transition: background-color var(--ps-dur-press) ease, transform var(--ps-dur-press) var(--ps-ease-out); }
.login-btn:hover { background: var(--ps-color-sprout-strong); }
.login-btn:active:not(:disabled) { transform: scale(var(--ps-press-scale)); }
.login-btn:disabled { opacity: .6; cursor: default; }
.login-help { margin-top: var(--ps-space-5); text-align: center; font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.login-help a { padding-block: 4px; color: var(--ps-fg-2); text-decoration: underline; transition: color var(--ps-dur-press) ease; }   /* inline padding: a 24px target, same line height */
.login-help a:hover { color: var(--ps-fg); }
/* "Forgot password?" and "Need more help?" side by side, one line (Nov 7) */
.login-help--links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--ps-space-5); row-gap: var(--ps-space-1); }
.client-login-link, .team-login-link { margin-top: 20px; text-align: center; font-size: var(--ps-type-micro); color: var(--ps-fg-3); }
.client-login-link a, .team-login-link a { color: var(--ps-fg-3); opacity: .4; text-decoration: none; letter-spacing: var(--ps-tracking-label); transition: color var(--ps-dur-press) ease; }   /* the other sign-in, almost hidden (Nov 7) */
.client-login-link a:hover, .team-login-link a:hover { color: var(--ps-fg); }
@media (max-width: 640px) {   /* a smaller card on a phone, so more of the background shows (Nov 7) */
  .login-card { width: clamp(260px, 70vw, 300px); padding: var(--ps-space-5) var(--ps-space-4); }
  .login-card .login-wordmark { margin-bottom: var(--ps-space-4); font-size: var(--ps-type-signin-mark-phone); }
  .login-heading { font-size: var(--ps-type-signin-heading-phone); }
  .login-help { margin-top: var(--ps-space-4); }
  .login-help--links { column-gap: var(--ps-space-3); font-size: var(--ps-type-menu); }
}

/* ---------- Sign-in gate (GTM-349 part 2) ----------
   A public page turns into the sign-in matrix, then the sign-in page's own card (read from that page) rises over it. PS.signIn.open() / [data-signin]
   links (ps-ui.js). From the back: the sign-in background (the canvases above, drawn by login-effects.js), the wipe (code
   rain eating the page column by column), the card: stacked by order, the canvases' own z-index kept inside the background.
   The wipe reads its colors from the tokens at runtime. */
.ps-gate { position: fixed; inset: 0; z-index: var(--ps-layer-modal); display: grid; place-items: center; padding: var(--ps-space-4); overflow: auto; }
.ps-gate[hidden] { display: none; }
.ps-gate__bg { position: absolute; inset: 0; isolation: isolate; background: var(--ps-page); opacity: 0; transition: opacity var(--ps-dur-move) var(--ps-ease-out); }
.ps-gate.is-matrix .ps-gate__bg { opacity: 1; }
.ps-gate__bg .login-bg-canvas { position: absolute; width: 100%; height: 100%; }
.ps-gate__wipe { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity var(--ps-dur-move) var(--ps-ease-out); }
.ps-gate.is-matrix .ps-gate__wipe { opacity: 0; }
.ps-gate__card { position: relative; max-height: calc(100dvh - var(--ps-space-6)); overflow: auto; opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity var(--ps-dur-base) var(--ps-ease-out), transform var(--ps-dur-move) var(--ps-ease-out); }
.ps-gate.is-card .ps-gate__card { opacity: 1; transform: none; }
.ps-gate.is-leaving .ps-gate__card { opacity: 0; transform: translateY(8px) scale(.98); transition-duration: var(--ps-dur-pop); }
.ps-gate__slot { position: relative; display: grid; place-items: center; width: 100%; }
.ps-gate__slot .login-card { margin: 0; }
html.ps-gate-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ps-gate__card, .ps-gate__bg, .ps-gate__wipe { transition-property: opacity; }
  .ps-gate__card, .ps-gate.is-card .ps-gate__card, .ps-gate.is-leaving .ps-gate__card { transform: none; }
}


/* ======================================================================================================
   Story pages: the marketing website (GTM-240, GTM-268; one library since Oct 10, GTM-331)
   Everything the website shows is a component here, with a ps- name. The website's <html> carries .ps-story: the rules
   that style plain elements (body, links, headings) or tune a shared component for the site's big type and its dark AI
   side are scoped to it with :where(html.ps-story), so their weight is unchanged and no portal page is touched.
   The loop colors are tokens (--ps-color-loop-*); the story sizes (--story-*) are clamps of the type tokens.
   Behaviors: the story-page block at the end of ps-ui.js (player, scroll rail, step ring, sideways track, agents, ...).
   ====================================================================================================== */
:root{
  /* Marketing scale on top of the app scale (proposed tokens: type.hero, type.lede, a 12px small-text floor). */
  --story-body: var(--ps-type-title);
  --story-micro: calc(var(--ps-type-label) * 1.2);
  --story-gutter: clamp(var(--ps-space-4), 4vw, var(--ps-space-7));
  --story-header-h: 80px;   /* the header with its corner menu button (.ps-page-fab--always), from tablets up */
  --story-stage-r: 28px;
  --p: 0;      /* page playhead, 0..1, set from scroll */
  --v: 0;      /* hero video playhead, 0..1 */
  --hx: 0px;   /* h-track offset */
}

:where(html.ps-story) *, :where(html.ps-story) *::before, :where(html.ps-story) *::after{ box-sizing: border-box; }
html:where(.ps-story){ scroll-behavior: smooth; scroll-padding-top: calc(var(--story-header-h) + var(--ps-space-4)); -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ps-fg-3) var(--ps-page); accent-color: var(--ps-ok); caret-color: var(--ps-accent-stroke); }
:where(html.ps-story) body{ margin: 0; background: var(--ps-page); color: var(--ps-fg); font-family: var(--ps-font-ui); font-weight: var(--ps-weight-light); font-size: var(--story-body); line-height: 1.6; }
:where(html.ps-story) ::selection{ background: var(--ps-color-sprout); color: var(--ps-color-ink); }
:where(html.ps-story) img, :where(html.ps-story) svg, :where(html.ps-story) video{ max-width: 100%; }
:where(html.ps-story) a{ color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(html.ps-story) h1, :where(html.ps-story) h2, :where(html.ps-story) h3{ margin: 0; text-wrap: balance; }
:where(html.ps-story) p{ margin: 0; }
:where(html.ps-story) :focus-visible{ outline: 2px solid var(--ps-accent-stroke); outline-offset: 3px; border-radius: var(--ps-radius-small); }
:where(html.ps-story) [hidden]{ display: none !important; }

/* Language, phase, audience and view switching */
.ps-ph { display: none; }
html[data-phase="1"] .ps-ph-1, html[data-phase="2"] .ps-ph-2, html[data-phase="3"] .ps-ph-3 { display: revert; }
html:not([data-view="home"]) .ps-scroll-rail, html:not([data-view="home"]) .ps-scrub-mini { display: none !important; }


/* ---------- Header ---------- */

.ps-scrub-mini { display: none; position: relative; height: 3px; background: var(--ps-line); }
.ps-scrub-mini-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p)); background: var(--ps-accent-stroke); }
.ps-tc-mini { position: absolute; right: var(--story-gutter); top: 7px; font-size: var(--ps-type-title); line-height: 1; padding: 3px 7px; border-radius: var(--ps-radius-small); background: var(--ps-pop-bg); box-shadow: var(--ps-glass-shadow); }

/* ---------- Icons and buttons ---------- */



.ps-btn--block { width: 100%; }   /* buttons are the portal's .ps-btn (--accent, --lg); full width where the site needs it */
.ps-actions { display: flex; flex-wrap: wrap; gap: var(--ps-space-3); align-items: center; }

/* ---------- Type ---------- */
.ps-fine { margin: 0; font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.ps-tc { font-family: var(--ps-font-display); font-weight: 400; }

/* ---------- The rail: the review player's timeline, down the page ---------- */
.ps-scroll-rail { position: fixed; z-index: var(--ps-layer-sticky); left: max(var(--ps-space-4), calc((100vw - var(--ps-size-page-max)) / 2 - 96px)); top: calc(var(--story-header-h) + var(--ps-space-5));
  bottom: var(--ps-space-5); width: 84px; display: none; flex-direction: column; align-items: center; gap: var(--ps-space-3); pointer-events: none; transition: opacity var(--ps-dur-move) var(--ps-ease-out); }
.ps-rail-now { font-size: var(--story-micro); font-weight: var(--ps-weight-medium); color: var(--ps-fg-2); text-align: center; line-height: 1.3; min-height: 2.6em; text-wrap: balance; }
.ps-tc-rail { font-size: var(--ps-type-title); color: var(--ps-fg-3); white-space: nowrap; text-align: center; }
.ps-tc-rail b { font-weight: 400; color: var(--ps-fg); font-size: calc(var(--ps-type-title) * 1.7); display: block; line-height: 1; }
.ps-rail-line { position: relative; flex: 1; width: 2px; background: var(--ps-line); border-radius: 2px; }
.ps-rail-fill { position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--p)); background: var(--ps-accent-stroke); border-radius: 2px; }
.ps-rail-head { position: absolute; left: 50%; top: calc(var(--p) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ps-color-sprout);
  box-shadow: 0 0 0 4px var(--ps-ok-soft), 0 2px 6px color-mix(in oklab, var(--ps-color-ink) 20%, transparent); }
.ps-rail-pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.ps-rail-pins li { position: absolute; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ps-page); border: 2px solid var(--ps-fg-3);
  transition: transform var(--ps-dur-pop) var(--ps-ease-out), border-color var(--ps-dur-base) var(--ps-ease-out), background-color var(--ps-dur-base) var(--ps-ease-out); }
.ps-rail-pins li span { display: none; position: absolute; left: 18px; top: 50%; translate: 0 -50%; white-space: nowrap; font-size: var(--story-micro); font-weight: var(--ps-weight-medium); color: var(--ps-fg-2);
  padding: 2px 8px; border-radius: var(--ps-radius-pill); background: var(--ps-pop-bg); box-shadow: var(--ps-glass-shadow);
  opacity: 0; transform: translateX(-4px); transition: opacity var(--ps-dur-base) var(--ps-ease-out), transform var(--ps-dur-base) var(--ps-ease-out); }
.ps-rail-pins li.is-hit { border-color: var(--ps-accent-stroke); background: var(--ps-color-sprout); }
.ps-rail-pins li.is-now { transform: scale(1.35); }
.ps-rail-pins li.is-now span { opacity: 1; transform: none; }

/* ---------- The player stage (hero and end card): the one dark island ---------- */
.ps-story-hero { max-width: calc(var(--ps-size-page-max) + 40px); margin-inline: auto; padding: var(--ps-space-5) var(--story-gutter) var(--ps-space-6); display: grid; gap: var(--ps-space-4); }
.ps-stage { position: relative; border-radius: var(--story-stage-r); overflow: hidden; background: var(--ps-glass-solid); color: var(--ps-fg);
  display: grid; grid-template-columns: minmax(0, 1fr); min-height: clamp(440px, 62vh, 620px);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ps-color-on-dark) 14%, transparent), 0 2px 6px color-mix(in oklab, var(--ps-color-ink) 18%, transparent), 0 30px 60px -20px color-mix(in oklab, var(--ps-color-ink) 45%, transparent); }
.ps-stage-media { position: absolute; inset: 0; background: var(--ps-glass-solid); }
.ps-stage-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--ps-page) 30%, transparent), transparent 26%, transparent 46%, color-mix(in oklab, var(--ps-page) 88%, transparent) 88%); pointer-events: none; }
.ps-reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; animation: ps-drift 18s ease-in-out infinite alternate; }   /* a still from our reels while the newest one loads */
@keyframes ps-drift { from { transform: scale(1.02); } to { transform: scale(1.1) translateY(-1.5%); } }
.ps-stage-media.has-reel .ps-hero-reel { opacity: 0; transition: opacity 700ms var(--ps-ease-out); }
.ps-stage-media.is-live .ps-hero-reel { opacity: 1; }
.ps-stage-media.is-live .ps-hero-poster { animation: none; visibility: hidden; transition: visibility 0s 700ms; }
@media (prefers-reduced-motion: reduce) { .ps-hero-poster { animation: none; } }
.ps-stage-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--ps-space-6); padding: clamp(var(--ps-space-5), 3.4vw, var(--ps-space-7)); min-height: inherit; }
.ps-stage-copy .ps-headline { max-width: 12em; }
.ps-stage-copy .ps-headline { order: 2; color: var(--ps-fg); }
.ps-stage-notes { order: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ps-space-2); align-self: flex-end; justify-content: flex-end; max-width: 30em; }
.ps-stage-notes li { display: inline-flex; align-items: center; gap: var(--ps-space-2); padding: var(--ps-space-2) var(--ps-space-3); border-radius: var(--ps-radius-pill); background: var(--ps-glass-strong);
  border: 1px solid var(--ps-line); font-size: var(--ps-type-caption); font-weight: var(--ps-weight-regular); color: var(--ps-fg-2);
  opacity: 0; transform: translateY(8px) scale(.96); transition: opacity var(--ps-dur-move) var(--ps-ease-out), transform var(--ps-dur-drawer) var(--ps-ease-drawer), border-color var(--ps-dur-base) var(--ps-ease-out); }
.ps-stage-notes li.is-on { opacity: 1; transform: none; }
.ps-stage-notes .ps-note-ai.is-on { border-color: var(--ps-color-lavender); color: var(--ps-agent-fg); }
.ps-stage-notes .ps-note-human { color: var(--ps-fg); }   /* a person's note, in quotes, in the same Poppins as the other notes (Oct 9) */
.ps-stage-notes .ps-note-human .ps-num { font-family: var(--ps-font-ui); font-size: var(--story-micro); padding: 2px 6px; border-radius: var(--ps-radius-pill); background: var(--ps-chip); }
.ps-stage-notes .ps-note-ok.is-on { border-color: var(--ps-ok); color: var(--ps-ok-text); }

.ps-scrub { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ps-space-4); padding-inline: var(--ps-space-2); }
.ps-scrub-play { width: var(--ps-size-control); height: var(--ps-size-control); border-radius: 50%; border: 1px solid var(--ps-line); background: var(--ps-glass-strong); color: var(--ps-fg); cursor: pointer; display: grid; place-items: center; }
.ps-scrub-play .ps-ico-play { display: none; }
.ps-scrub-play[aria-pressed="true"] .ps-ico-play { display: block; }
.ps-scrub-play[aria-pressed="true"] .ps-ico-pause { display: none; }
.ps-scrub-track { position: relative; height: 24px; }
.ps-scrub-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--ps-line); }
.ps-scrub-track::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: repeating-linear-gradient(90deg, var(--ps-fg-3) 0 1px, transparent 1px 2.5%); opacity: .4; }
.ps-scrub-fill { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; transform-origin: left; transform: scaleX(var(--v)); background: var(--ps-accent-stroke); }
.ps-scrub-head { position: absolute; top: 50%; left: calc(var(--v) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ps-color-sprout); box-shadow: 0 0 0 4px var(--ps-ok-soft); }
.ps-scrub-pin { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--ps-fg-3); }
.ps-scrub-pin.ps-pin-ai { background: var(--ps-color-lavender); }
.ps-scrub-pin.ps-pin-human { background: var(--ps-fg); }
.ps-scrub-pin.ps-pin-ok { background: var(--ps-ok); }
.ps-hero-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "actions lede" "fine lede"; align-items: center; column-gap: var(--ps-space-6); row-gap: var(--ps-space-2); padding-inline: var(--ps-space-2); }
.ps-hero-foot .ps-lede { grid-area: lede; }
.ps-hero-foot .ps-actions { grid-area: actions; }
.ps-hero-foot .ps-fine { grid-area: fine; }
.ps-hero-foot .ps-lede { justify-self: end; max-width: 30em; }

/* Creatives hero: headline over the offer card */

.ps-stage .ps-media__tag { position: absolute; left: var(--ps-space-4); top: var(--ps-space-4); z-index: 1; }   /* the file label over the hero video */
.ps-stage-copy .ps-offer { order: 1; align-self: flex-end; width: min(360px, 100%); animation: offer-in .9s var(--ps-ease-drawer) .4s both; }   /* the library offer card, sliding in over the hero video */
@keyframes offer-in { from { transform: translateY(36px); opacity: 0; } to { transform: none; opacity: 1; } }














/* ---------- Sections ---------- */
.ps-section-head { display: grid; gap: var(--ps-space-3); max-width: 46em; }

/* How a job works: steps + sticky phone */
.ps-loop-steps { list-style: none; margin: var(--ps-space-4) 0 0; padding: 0; display: grid; }
.ps-loop-step { position: relative; padding: var(--ps-space-6) 0 var(--ps-space-6) calc(var(--ps-space-7) + var(--ps-space-3)); min-height: 32vh; border-top: 1px solid var(--ps-line);
  opacity: .42; transition: opacity var(--ps-dur-move) var(--ps-ease-out); display: grid; gap: var(--ps-space-2); align-content: start; }
.ps-loop-step h3 { font-weight: var(--ps-weight-medium); font-size: calc(var(--ps-type-title) * 1.3); line-height: 1.2; text-wrap: balance; }
.ps-loop-step p { color: var(--ps-fg-2); max-width: 30em; }
.ps-loop-step.is-active { opacity: 1; }
.ps-steps-visual { position: sticky; top: calc(var(--story-header-h) + var(--ps-space-6)); }
.ps-stage-app { position: relative; flex: 1; min-height: 0; }
.ps-app-card { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--ps-space-3); padding: 0 var(--ps-space-4) var(--ps-space-5); overflow: hidden;   /* a screen of the app, edge to edge */
  opacity: 0; transform: translateY(16px) scale(.98); transition: opacity var(--ps-dur-move) var(--ps-ease-out), transform var(--ps-dur-drawer) var(--ps-ease-drawer); }

.ps-stage-app[data-stage="1"] .ps-st1, .ps-stage-app[data-stage="2"] .ps-st2, .ps-stage-app[data-stage="3"] .ps-st3, .ps-stage-app[data-stage="4"] .ps-st4, .ps-stage-app[data-stage="5"] .ps-st5 { opacity: 1; transform: none; }
.ps-player-mini { aspect-ratio: 9 / 11; border-radius: var(--ps-radius-control); background: var(--ps-page); position: relative; overflow: hidden; }
.ps-player-mini > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-player-mini:has(> :is(img, video)) { background: var(--ps-color-graphite-solid); }
.ps-player-mini:has(> :is(img, video))::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--ps-color-ink) 70%, transparent), transparent 40%); }
.ps-player-mini__chip { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 3px 9px; border-radius: var(--ps-radius-pill); background: var(--ps-color-scrim-strong); color: var(--ps-color-on-dark); font-size: var(--ps-type-caption); }
.ps-player-mini__draw { position: absolute; z-index: 1; left: 18%; top: 14%; width: 64%; fill: none; stroke: var(--ps-color-sprout); stroke-width: 2; stroke-linecap: round; }
.ps-player-mini__pause { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ps-color-scrim-strong); color: var(--ps-color-on-dark); }
.ps-player-mini__time { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 6px; color: var(--ps-color-on-dark); font-size: var(--ps-type-caption); }
.ps-player-mini__time .ps-timeline { position: relative; inset: auto; height: 4px; background: color-mix(in oklab, var(--ps-color-on-dark) 25%, transparent); }
.ps-player-mini__time .ps-timeline::before { content: ""; position: absolute; inset: 0 calc(100% - var(--p, 23%)) 0 0; border-radius: inherit; background: var(--ps-color-sprout); }
.ps-player-mini__time .ps-scrub-mark { top: 50%; left: 23%; width: 10px; height: 10px; margin: -5px 0 0 -5px; box-shadow: 0 0 0 2px var(--ps-color-ink); }
.ps-player-mini__time .ps-scrub-mark--2 { left: 40%; background: var(--ps-color-on-dark); }
/* --live: the playhead runs (PS story pages: the Reviewer preview); the drawn note and the pause show only while it stops on a note */
.ps-player-mini--live :is(.ps-player-mini__draw, .ps-player-mini__pause) { opacity: 0; transition: opacity var(--ps-dur-base) var(--ps-ease-out); }
.ps-player-mini--live.is-noted :is(.ps-player-mini__draw, .ps-player-mini__pause) { opacity: 1; }
.ps-timeline { position: absolute; left: var(--ps-space-3); right: var(--ps-space-3); bottom: var(--ps-space-3); height: 4px; border-radius: var(--ps-radius-pill); background: var(--ps-line); }
.ps-scrub-mark { position: absolute; left: 28%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ps-color-sprout); box-shadow: 0 0 0 4px var(--ps-ok-soft); }

/* Reels strip (.reels-grid kept from the current site) */






.ps-reel-ico { position: absolute; left: var(--ps-space-2); bottom: var(--ps-space-2); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in oklab, var(--ps-color-ink) 50%, transparent); color: var(--ps-color-on-dark); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ps-reel-ico .ps-icon { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); }

/* AI + us */
.ps-ai-us { gap: var(--ps-space-5); }
.ps-ai-quote { margin: 0; }
.ps-ai-quote p { font-size: clamp(calc(var(--ps-type-title) * 1.6), 3.3vw, calc(var(--ps-type-title) * 3.4)); line-height: 1.28; font-weight: var(--ps-weight-light); max-width: 24em; text-wrap: pretty; }
.ps-ai-quote .ps-dot--ai { width: .5em; height: .5em; margin-right: .3em; vertical-align: .12em; }
.ps-underlined { position: relative; white-space: nowrap; font-weight: var(--ps-weight-regular); }
.ps-hand-line { position: absolute; left: -2%; width: 104%; bottom: -.32em; height: .4em; overflow: visible; }
.ps-hand-line path { fill: none; stroke: var(--ps-accent-stroke); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 0; }
.ps-ai-caption { color: var(--ps-fg-2); max-width: 36em; font-size: var(--lede); }

/* Not everything can be AI: the horizontal track, pinned while you scroll (#h-track kept) */
.ps-h-track-section { position: relative; height: 280vh; } /* the script sets the exact height: pinned height + track overflow */
.ps-h-sticky { position: sticky; top: var(--story-header-h); height: calc(100vh - var(--story-header-h)); height: calc(100svh - var(--story-header-h)); overflow: hidden; display: flex; align-items: center; }
#h-track { display: flex; align-items: flex-start; gap: clamp(var(--ps-space-5), 3vw, var(--ps-space-7)); padding-inline: var(--story-gutter) 10vw; transform: translate3d(var(--hx), 0, 0); will-change: transform; height: 80%; }
.ps-h-track-headline { flex: none; align-self: center; display: grid; gap: var(--ps-space-2); padding-right: var(--ps-space-6); }
.ps-h-track-headline h2 { font-family: var(--ps-font-display); font-weight: 400; font-size: clamp(88px, 13vw, 220px); line-height: .82; display: grid; }
.ps-ht-accent { font-family: var(--ps-font-human); font-size: clamp(48px, 5.5vw, 92px); line-height: .9; rotate: -4deg; justify-self: end; color: var(--ps-fg-2); }
.ps-h-item { flex: none; margin: 0; position: relative; display: flex; flex-direction: column; gap: var(--ps-space-2); }
.ps-h-item img { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: var(--ps-radius-card); display: block; box-shadow: 0 2px 6px color-mix(in oklab, var(--ps-color-ink) 14%, transparent), 0 24px 40px -24px color-mix(in oklab, var(--ps-color-ink) 40%, transparent); }
.ps-h-item figcaption { font-family: var(--ps-font-human); font-size: var(--ps-type-human); line-height: 1; color: var(--ps-fg-2); padding-left: var(--ps-space-2); }
.ps-hi-1 { width: 34vh; height: 32vh; margin-top: 30vh; } .ps-hi-2 { width: 30vh; height: 42vh; margin-top: 6vh; } .ps-hi-3 { width: 26vh; height: 38vh; margin-top: 24vh; }
.ps-hi-4 { width: 48vh; height: 36vh; margin-top: 2vh; } .ps-hi-5 { width: 26vh; height: 38vh; margin-top: 28vh; } .ps-hi-6 { width: 40vh; height: 32vh; margin-top: 12vh; }
.ps-hi-7 { width: 32vh; height: 28vh; margin-top: 34vh; } .ps-hi-8 { width: 44vh; height: 34vh; margin-top: 4vh; }

/* The loop ring (kept from v0) */
.ps-loop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ps-space-7); align-items: center; }
.ps-loop-ring { position: relative; width: min(440px, 100%); aspect-ratio: 1; justify-self: center; container-type: inline-size; }
.ps-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ps-ring-track { fill: none; stroke: var(--ps-line); stroke-width: 2; }
.ps-ring-progress { fill: none; stroke: var(--ps-accent-stroke); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 500; transition: stroke-dashoffset var(--ps-dur-drawer) var(--ps-ease-drawer); }
.ps-ring-center { position: absolute; inset: 30%; display: grid; place-content: center; text-align: center; gap: var(--ps-space-1); }
.ps-ring-word { font-family: var(--ps-font-display); font-size: var(--ps-type-section); line-height: 1; }

.ps-ring-nodes { position: absolute; inset: 0; }
.ps-node { --a: 0deg; position: absolute; left: 50%; top: 50%; width: 112px; margin: -26px 0 0 -56px; transform: rotate(var(--a)) translateY(-37.5cqw) rotate(calc(var(--a) * -1));
  border: 1px solid var(--ps-line); cursor: pointer; display: grid; justify-items: center; gap: 2px; padding: var(--ps-space-2); border-radius: var(--ps-radius-control);
  background: var(--ps-pop-bg); color: var(--ps-fg-2); font: var(--ps-weight-medium) var(--story-micro) / 1.25 var(--ps-font-ui); text-align: center;
  transition: background-color var(--ps-dur-base) var(--ps-ease-out), color var(--ps-dur-base) var(--ps-ease-out), scale var(--ps-dur-pop) var(--ps-ease-out); }
.ps-node .ps-num { font-family: var(--ps-font-display); font-size: calc(var(--ps-type-title) * 1.4); font-weight: 400; color: var(--ps-fg-3); }
.ps-node[aria-selected="true"] { background: var(--ps-color-sprout); color: var(--ps-color-ink); scale: 1.06; border-color: var(--ps-color-sprout-strong); }
.ps-node[aria-selected="true"] .ps-num { color: var(--ps-color-ink); }
.ps-node:nth-child(1) { --a: 0deg; } .ps-node:nth-child(2) { --a: 72deg; } .ps-node:nth-child(3) { --a: 144deg; }
.ps-node:nth-child(4) { --a: 216deg; } .ps-node:nth-child(5) { --a: 288deg; }
.ps-loop-panels { min-width: 0; }
.ps-loop-panel { display: grid; gap: var(--ps-space-4); padding: var(--ps-space-6); animation: panel-in var(--ps-dur-move) var(--ps-ease-out); }
.ps-loop-panel h3 { font-family: var(--ps-font-display); font-weight: 400; font-size: var(--heading); line-height: 1; }
.ps-loop-panel p { color: var(--ps-fg-2); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ps-platforms { display: flex; gap: var(--ps-space-3); color: var(--ps-fg-2); }

/* AI or a person */

.ps-mode { display: grid; gap: var(--ps-space-3); align-content: start; padding: var(--ps-space-6); }
.ps-mode h3 { font-weight: var(--ps-weight-medium); font-size: calc(var(--ps-type-title) * 1.25); }
.ps-mode h3 .ps-dot--ai { margin-right: var(--ps-space-1); vertical-align: .15em; }
.ps-mode p { color: var(--ps-fg-2); }



/* Who makes it + face strip */

/* Testimonials as comments on the final cut (#testimonials kept) */



















/* End card */
.ps-endcard { max-width: calc(var(--ps-size-page-max) + 40px); margin-inline: auto; padding: var(--ps-space-6) var(--story-gutter) var(--ps-space-7); }
.ps-stage--end { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; text-align: center; gap: var(--ps-space-5); min-height: clamp(360px, 54vh, 520px); padding: var(--ps-space-7) var(--ps-space-5); }
.ps-end-line { font-family: var(--ps-font-display); font-size: clamp(64px, 10vw, 168px); line-height: .86; max-width: 9em; text-wrap: balance; }

/* ---------- Creatives ---------- */



@keyframes orbit { from { stroke-dashoffset: 20; } to { stroke-dashoffset: -480; } }








@keyframes cs-lit { 0%, 16% { background: var(--ps-color-sprout); border-color: var(--ps-color-sprout-strong); color: var(--ps-color-ink); } 22%, 100% { background: var(--ps-pop-bg); border-color: var(--ps-line); color: var(--ps-fg); } }





/* ---------- Forms ---------- */





:where(html.ps-story) input[type="text"], :where(html.ps-story) input[type="email"], :where(html.ps-story) input[type="url"], :where(html.ps-story) input:not([type]), :where(html.ps-story) select{
  width: 100%; min-height: var(--ps-size-touch); padding: 0 var(--ps-space-3); border-radius: var(--ps-radius-control); border: 1px solid var(--ps-line); background: var(--ps-glass-solid); color: var(--ps-fg);
  font: var(--ps-weight-regular) var(--ps-type-field) / 1.2 var(--ps-font-ui); transition: border-color var(--ps-dur-base) var(--ps-ease-out), box-shadow var(--ps-dur-base) var(--ps-ease-out); }
:where(html.ps-story) input::placeholder{ color: var(--ps-fg-3); }
:where(html.ps-story) input:focus, :where(html.ps-story) select:focus{ outline: none; border-color: var(--ps-accent-stroke); box-shadow: 0 0 0 3px var(--ps-ok-soft); }
:where(html.ps-story) [aria-invalid="true"]{ border-color: var(--ps-danger) !important; }























/* Plans (phase 2) */



/* FAQ */

/* ---------- Directory and portfolio ---------- */
.ps-dir-head { padding-bottom: var(--ps-space-5); gap: var(--ps-space-4); }
.ps-dir-grid-wrap { padding-bottom: calc(var(--ps-space-7) * 2); }

/* ---------- Footer, prototype controls, sticky CTA ---------- */
   /* padding and the top line come from .ps-page-footer */








/* ---------- Scroll-driven extras (content is visible at rest) ---------- */
@supports (animation-timeline: view()) {
  .ps-hand-line path { animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  @keyframes draw { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
  .ps-terms > div { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  @keyframes rise { from { transform: translateY(28px); } to { transform: none; } }
}
html:where(.ps-story)::view-transition-old(root), html:where(.ps-story)::view-transition-new(root){ animation-duration: var(--ps-dur-drawer); animation-timing-function: var(--ps-ease-drawer); }

/* ---------- Responsive ---------- */
@media (min-width: 1240px) {
  .ps-scroll-rail { display: flex; }
  .ps-h-sticky { --rail-edge: calc(max(var(--ps-space-4), (100vw - var(--ps-size-page-max)) / 2 - 96px) + 92px);
    mask-image: linear-gradient(90deg, transparent var(--rail-edge), var(--ps-color-ink) calc(var(--rail-edge) + 120px)); }

  #h-track { padding-left: calc(max(var(--ps-space-4), (100vw - var(--ps-size-page-max)) / 2 - 96px) + 132px); }
}
@media (max-width: 1239px) { .ps-scrub-mini { display: block; } }
@media (max-width: 768px) { .ps-tc-mini { display: none; } }
@media (max-width: 768px) {
  :root{ --story-header-h: 108px; --story-stage-r: 22px; }
  .ps-stage:not(.ps-stage--end) { min-height: min(68vh, 560px); }
  .ps-stage-copy { justify-content: flex-end; padding: var(--ps-space-5) var(--ps-space-4); gap: var(--ps-space-3); }
  .ps-stage-notes, .ps-stage-copy .ps-offer { display: none; }

  .ps-hero-foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lede" "actions" "fine"; }
  .ps-hero-foot .ps-lede { justify-self: start; text-align: left; }



  .ps-loop { grid-template-columns: minmax(0, 1fr); }
  .ps-steps-visual { display: none; }
  .ps-loop-step { min-height: 0; opacity: 1; padding-left: var(--ps-space-7); }

  #h-track { height: 84%; padding-inline: var(--story-gutter) 12vw; gap: var(--ps-space-5); }
  .ps-h-track-headline { padding-right: var(--ps-space-3); }
  .ps-h-track-headline h2 { font-size: clamp(64px, 21vw, 96px); }
  .ps-ht-accent { font-size: clamp(40px, 12vw, 56px); }
  .ps-h-item figcaption { font-size: calc(var(--ps-type-human) * .85); }
  .ps-hi-1 { width: 62vw; height: 30svh; margin-top: 30svh; } .ps-hi-2 { width: 54vw; height: 40svh; margin-top: 4svh; }
  .ps-hi-3 { width: 50vw; height: 38svh; margin-top: 24svh; } .ps-hi-4 { width: 72vw; height: 30svh; margin-top: 8svh; }
  .ps-hi-5 { width: 50vw; height: 38svh; margin-top: 28svh; } .ps-hi-6 { width: 66vw; height: 30svh; margin-top: 12svh; }
  .ps-hi-7 { width: 58vw; height: 28svh; margin-top: 34svh; } .ps-hi-8 { width: 70vw; height: 32svh; margin-top: 6svh; }


}
@media (max-width: 560px) {

  .ps-node { width: 92px; margin-left: -46px; }

  .ps-ring-word { font-size: var(--ps-type-title); }


}

/* ---------- Reduced motion: still frames ---------- */
@media (prefers-reduced-motion: reduce) {
  html:where(.ps-story){ scroll-behavior: auto; }
  .ps-stage-copy .ps-offer, .ps-loop-panel, .ps-hand-line path, .ps-terms > div { animation: none !important; }

  .ps-stage-notes li { opacity: 1; transform: none; }
  .ps-h-track-section { height: auto; }
  .ps-h-sticky { position: static; height: auto; overflow-x: auto; }
  #h-track { transform: none !important; height: 70vh; }
  .ps-ring-progress, .ps-rail-pins li, .ps-rail-pins li span { display: none; transition: none; }
  html:where(.ps-story)::view-transition-old(root), html:where(.ps-story)::view-transition-new(root){ animation: none; }
}

/* ======================================================================================================
   Oct 9: today's content in the first design's style. Tokens only.
   ====================================================================================================== */

/* AI | Human switch: an icon before each word */

/* The launch line: the date, then where, as pills */
.ps-launch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); }
.ps-launch > .ps-ph { display: none; }
html[data-phase="1"] .ps-launch > .ps-ph-1, html[data-phase="2"] .ps-launch > .ps-ph-2, html[data-phase="3"] .ps-launch > .ps-ph-3 { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); }
.ps-hero-foot:has(> .ps-launch:only-child) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fine"; }

/* The AI hero: the stage plays the week; the live agents light up as the playhead passes */
.ps-agent-stage { list-style: none; margin: 0; padding: 0; position: absolute; inset: 14% 8% 40% 42%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ps-space-5) var(--ps-space-4); align-content: center; }
.ps-agent-stage li { display: grid; justify-items: center; gap: var(--ps-space-2); color: var(--ps-fg-2); font-size: var(--story-micro); text-align: center; }
.ps-agent-stage .ps-element--agent { width: clamp(52px, 5vw, 68px); }

/* "We spent thousands of hours…" then "So we built Prompt." above the loop */
div.ps-why { display: grid; gap: var(--ps-space-4); max-width: 52em; } /* the site's div only: the portal's details.ps-why (the "why" disclosure) keeps no gap (GTM-425) */
.ps-why-line { font-size: clamp(calc(var(--ps-type-title) * 1.6), 3.3vw, calc(var(--ps-type-title) * 3)); line-height: 1.25; font-weight: var(--ps-weight-light); text-wrap: pretty; }

/* The agents: a phone home screen of tiles, the one you tap explained beside it */
.ps-agents-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--ps-space-7); align-items: start; }
.ps-agents-side { display: grid; gap: var(--ps-space-4); position: sticky; top: calc(var(--story-header-h) + var(--ps-space-6)); }
.ps-element-grid { list-style: none; margin: 0; padding: clamp(var(--ps-space-5), 3vw, var(--ps-space-7)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ps-space-6) var(--ps-space-3); }
.ps-element-tile { width: 100%; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ps-fg); font: inherit; display: grid; justify-items: center; align-content: start; gap: var(--ps-space-2); text-align: center; }
.ps-element--agent { container-type: normal;   /* sized by the grid, not by itself */ position: relative; width: clamp(56px, 5.4vw, 72px); aspect-ratio: 1; border-radius: 22%;   /* the brand element's radius */ display: grid; place-items: center; color: var(--ps-fg);
  background: var(--ps-glass-solid); border: 1px solid var(--ps-line); box-shadow: 0 6px 18px -10px color-mix(in oklab, var(--ps-color-ink) 45%, transparent);
  transition: transform var(--ps-dur-drawer) var(--ps-ease-drawer), background-color var(--ps-dur-base) var(--ps-ease-out); }
.ps-element-tile__name { font-size: var(--ps-type-caption); line-height: 1.25; color: var(--ps-fg-2); max-width: 10em; text-wrap: balance; }
.ps-element-tile[aria-pressed="true"] .ps-element-tile__name { color: var(--ps-fg); }
@media (hover: hover) and (pointer: fine) { .ps-element-tile:hover .ps-element--agent { transform: translateY(-3px); } }
.ps-agent-detail h3 { margin: 0; }
.ps-agent-detail .ps-labelcaps { display: flex; align-items: center; gap: var(--ps-space-2); }

/* Notes from people: a short handwritten aside under a heading or on a card */
.ps-heading + .ps-hand-note { margin-top: calc(var(--ps-space-2) * -1); }

/* "Our Creatives are free." leads straight into the track; "Want a person on it?" then the Human side */
.ps-people-lead { padding-bottom: var(--ps-space-4); gap: var(--ps-space-4); }
.ps-people-lead .ps-lede { max-width: 36em; }
.ps-to-human { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ps-space-5); }

/* The Creatives: one cluster, every face the same size, at different heights, no names */

/* AI + a person: the intro beside the card */


/* The waitlist: the heading on the left, the card on the right */



.ps-join-us { align-items: center; }

/* Phones and tablets: the design system's page menu (ps-ui.css .ps-page-fab, .ps-page-menu, PS.pageMenu). The site adds only its
   grouping: the home rows or the Work with Prompt rows, the language switch, and the row icons at 18px. */
.ps-page-menu .ps-menu-home { display: grid; gap: 2px; }   /* the menu shows at every width on the website (Oct 12) */
.ps-menu-sides { margin: 0 var(--ps-space-2) var(--ps-space-1); width: auto; }   /* the menu's AI | Human switch, a toggle (Natalia, Nov 5) */
:where(html.ps-story) body.is-menu-open{ overflow: hidden; }   /* the menu and the agent sheet */
@media (max-width: 768px) {
  .ps-agent-stage { inset: 10% 6% 46% 6%; gap: var(--ps-space-4) var(--ps-space-2); }
  .ps-agent-stage li span:last-child { display: none; }
  .ps-agents-grid{ grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-5); }
  .ps-agents-side { position: static; }
  .ps-element-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ps-space-5) var(--ps-space-2); padding: var(--ps-space-5) var(--ps-space-3); }
}
@media (prefers-reduced-motion: reduce) { .ps-element--agent { transition: none; } }

/* The closing card: "We go live", the date by hand, what's coming */
.ps-end-date { font-family: var(--ps-font-human); font-size: clamp(40px, 5vw, 72px); line-height: 1; color: var(--ps-color-sprout); rotate: -3deg; margin-top: calc(var(--ps-space-2) * -1); }
.ps-end-copy { max-width: 30em; color: var(--ps-fg-2); font-size: var(--lede); line-height: 1.5; }

/* ======================================================================================================
   Oct 9 (2): solid cards, the cycle, the opening screen, the generated AI side, the closing card. Tokens only.
   ====================================================================================================== */

/* The agents' names fit their tile at every width */
.ps-element-grid { container-type: inline-size; }
.ps-element-tile__name { font-size: clamp(10px, 2.3cqi, var(--ps-type-caption)); overflow-wrap: anywhere; hyphens: auto; max-width: 100%; }

/* The cycle: larger steps, closer to the ring; the centre is the brand's regenerative brain */
.ps-loop-ring { width: min(500px, 100%); }
.ps-node { width: 150px; margin: -34px 0 0 -75px; padding: var(--ps-space-3) var(--ps-space-2); font-size: var(--ps-type-caption); gap: 4px;
  transform: rotate(var(--a)) translateY(-31cqw) rotate(calc(var(--a) * -1)); }
.ps-node .ps-num { font-size: calc(var(--ps-type-title) * 1.6); }
.ps-ring-center { inset: 27%; }
.ps-ring-word { font-size: clamp(var(--ps-type-title), 4.4cqw, var(--ps-type-section)); line-height: 1.05; text-wrap: balance; }
.ps-ring-hand { display: block; font-family: var(--ps-font-human); font-style: normal; font-size: 1.35em; line-height: .9; color: var(--ps-accent-stroke); rotate: -4deg; margin-block: 2px; }
@media (max-width: 560px) { .ps-node { width: 112px; margin-left: -56px; font-size: var(--story-micro); padding: var(--ps-space-2); } .ps-node .ps-num { font-size: var(--ps-type-title); } .ps-ring-word { font-size: var(--ps-type-title); } }

/* The opening statement: a whole screen, a word circled and phrases underlined by hand, in lime, over and over */
.ps-why-screen { min-height: calc(100svh - var(--story-header-h)); display: grid; align-content: center; padding-block: var(--ps-space-7); }
div.ps-why { display: grid; gap: var(--ps-space-6); max-width: 1100px; }
.ps-why-screen .ps-why-line { font-size: clamp(30px, 4.6vw, 68px); line-height: 1.5; font-weight: var(--ps-weight-light); letter-spacing: -.01em; }
.ps-why-screen .ps-headline--md { font-size: clamp(56px, 9vw, 150px); }
.ps-mark-under, .ps-mark-circle { position: relative; white-space: nowrap; }
.ps-mark-under svg, .ps-mark-circle svg { position: absolute; overflow: visible; pointer-events: none; max-width: none; }
.ps-mark-under svg { left: -1%; width: 102%; bottom: -.22em; height: .32em; }
.ps-mark-circle svg { left: -12%; width: 124%; top: -30%; height: 162%; }
.ps-mark-under path, .ps-mark-circle path { fill: none; stroke: var(--ps-color-sprout-strong); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* .ps-marks: a section whose hand-drawn marks (circle, underline) draw in once it's on screen, then keep redrawing; the AI side's why screen is one */
:is(.ps-why-screen, .ps-marks).is-in .ps-mark-circle path { animation: hand-draw 5s var(--ps-ease-out) 1.2s infinite; }
:is(.ps-why-screen, .ps-marks).is-in .ps-mark-under path { animation: hand-draw 5s var(--ps-ease-out) 2s infinite; }
@keyframes hand-draw { 0% { stroke-dashoffset: 1; } 22%, 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }

/* The AI side reads like a generation: copy resolves word by word as it arrives, and a lime thread runs down the page */
.ps-gen .ps-gen-word { display: inline-block; opacity: .08; filter: blur(6px); transform: translateY(.18em); transition: opacity .6s var(--ps-ease-out), filter .6s var(--ps-ease-out), transform .6s var(--ps-ease-out); transition-delay: calc(var(--i, 0) * 32ms); }
.ps-gen.is-in .ps-gen-word { opacity: 1; filter: none; transform: none; }
.ps-scroll-thread { display: none; }
@media (max-width: 1239px) {
  html:is([data-audience="ai"], [data-audience="human"])[data-view="home"] .ps-scroll-thread { display: block; position: fixed; left: 6px; top: calc(var(--story-header-h) + var(--ps-space-3)); bottom: var(--ps-space-7); width: 2px; z-index: var(--ps-layer-sticky);
    border-radius: 2px; background: color-mix(in oklab, var(--ps-color-on-dark) 10%, transparent); pointer-events: none; }
  .ps-scroll-thread::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ps-color-sprout); transform-origin: top; transform: scaleY(var(--p, 0)); }
  .ps-scroll-thread::after { content: ""; position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ps-color-sprout); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ps-color-sprout) 25%, transparent); }
}
/* each AI section lights a small lime spark beside its heading as it arrives: the chapters, without numbers */
html[data-audience="ai"] .ps-gen.ps-heading::before, html[data-audience="ai"] .ps-gen.ps-headline--md::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: var(--ps-space-4); border-radius: 2px; background: var(--ps-color-sprout); transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ps-ease-out); }
html[data-audience="ai"] .ps-gen.is-in.ps-heading::before, html[data-audience="ai"] .ps-gen.is-in.ps-headline--md::before { transform: scaleX(1); }

/* The closing card: "We go live" light, not heavy; the date by hand, larger */
.ps-endcard .ps-end-line { font-family: var(--ps-font-display); font-weight: 400; font-synthesis: none; font-size: clamp(56px, 8vw, 132px); line-height: .9; letter-spacing: 0; }   /* Bebas at its one weight, never a faux bold */
.ps-end-date { font-size: clamp(52px, 7vw, 110px); }

@media (prefers-reduced-motion: reduce) {
  .ps-gen .ps-gen-word { opacity: 1; filter: none; transform: none; transition: none; }
  :is(.ps-why-screen, .ps-marks).is-in :is(.ps-mark-circle, .ps-mark-under) path { animation: none; stroke-dashoffset: 0; }
  html[data-audience="ai"] .ps-gen::before { transform: none; transition: none; }
}

/* Opening screen on wide screens: a smaller paragraph with more room around the whole statement */
@media (min-width: 769px) {
  .ps-why-screen { padding-block: calc(var(--ps-space-7) * 2.5); }
  .ps-why-screen .ps-why { max-width: 940px; gap: var(--ps-space-7); }
  .ps-why-screen .ps-why-line { font-size: clamp(30px, 3.2vw, 48px); }
}
/* AI hero: the same pairing as the opening screen, a light Poppins line over the Bebas word */
.ps-hero-split .ps-statement__light { display: block; font-family: var(--ps-font-ui); font-weight: var(--ps-weight-light); font-size: clamp(30px, 4.4vw, 64px); line-height: 1.3; letter-spacing: -.01em; }
.ps-hero-split .ps-statement__bold { display: block; margin-top: .14em; }

/* One statement scale for the AI hero and the opening screen: the same light Poppins size and the same Bebas size in both */
/* --stmt-light and --stmt-bold are set with the shared statement heading in ps-ui.css */
.ps-hero-split .ps-statement__light, .ps-why-screen .ps-why-line { font-size: var(--stmt-light); }
.ps-hero-split .ps-statement__bold, .ps-why-screen .ps-headline--md { font-size: var(--stmt-bold); line-height: .9; }
.ps-hero-split { font-size: var(--stmt-bold); }
@media (min-width: 769px) { .ps-why-screen .ps-why-line { font-size: var(--stmt-light); } }

/* ---------- The cycle (Oct 9, 3): the statement pairing, steps centred on the ring line, each card tied to its step ---------- */
#loop .ps-section-head { max-width: 52em; gap: var(--ps-space-5); }
#loop .ps-section-head .ps-lede { max-width: 40em; }
/* each step sits centred on the ring's line (the ring's radius is 37.5% of its width) */
.ps-node { margin: 0; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-37.5cqw) rotate(calc(var(--a) * -1)); }
.ps-loop-ring { width: min(520px, 100%); }
/* the card says which step it explains, in the same lime pill, with the five steps as dots */
.ps-panel-step { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-3); flex-wrap: wrap; }
.ps-panel-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.ps-panel-dots li { position: relative; width: 22px; height: 6px; border-radius: var(--ps-radius-pill); background: var(--ps-chip); overflow: hidden; }
[data-theme="dark"] .ps-panel-dots li { background: color-mix(in oklab, var(--ps-color-on-dark) 14%, transparent); }
.ps-panel-dots li.is-done { background: color-mix(in oklab, var(--ps-color-sprout) 45%, transparent); }
.ps-panel-dots li.is-on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ps-color-sprout); transform-origin: left; }
.ps-loop.is-auto .ps-loop-panel:not([hidden]) .ps-panel-dots li.is-on::after { animation: step-fill 4.2s linear both; }
@keyframes step-fill { from { transform: scaleX(0); } to { transform: none; } }
/* phones: the ring and its card read as one unit, the card tucked right under the ring */
@media (max-width: 768px) { .ps-loop { gap: var(--ps-space-4); } .ps-loop-panel { padding: var(--ps-space-5); } }
@media (max-width: 560px) { .ps-node { width: 104px; } }
@media (prefers-reduced-motion: reduce) { .ps-loop.is-auto .ps-loop-panel:not([hidden]) .ps-panel-dots li.is-on::after { animation: none; } }
.ps-node[aria-selected="true"] { scale: none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--ps-color-sprout) 22%, transparent); }   /* scaling would also push it off the ring line */

/* ---------- The cycle and its explanation are one object: a single card, the ring on one side, the step on the other ---------- */
.ps-loop { position: relative; padding: clamp(var(--ps-space-5), 3vw, var(--ps-space-7));
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.ps-loop .ps-loop-ring { align-self: center; }
.ps-loop .ps-loop-panels { display: grid; align-content: center; padding-left: clamp(var(--ps-space-5), 3vw, var(--ps-space-7)); border-left: 1px solid var(--ps-line); }
.ps-loop .ps-loop-panel { padding: 0; }
@media (max-width: 768px) {
  .ps-loop { grid-template-columns: minmax(0, 1fr); padding: var(--ps-space-4) var(--ps-space-3) var(--ps-space-5); }
  .ps-loop .ps-loop-panels { padding: var(--ps-space-5) var(--ps-space-2) 0; margin-top: 0; border-left: 0; border-top: 1px solid var(--ps-line); }
}
.ps-loop .ps-loop-ring { width: min(460px, 86%); margin: var(--ps-space-5) auto; }
@media (max-width: 768px) { .ps-loop .ps-loop-ring { width: min(460px, calc(100% - 104px * .15)); margin: var(--ps-space-4) auto var(--ps-space-3); } }   /* phones: the cycle takes the card's width, its side steps just inside the edge (Oct 10) */

/* ---------- The agents, grouped under the cycle's steps (Oct 9, 4) ---------- */
#agents .ps-section-head { max-width: 52em; gap: var(--ps-space-5); }
#agents .ps-section-head .ps-lede { max-width: 40em; }
.ps-agent-groups { display: grid; gap: var(--ps-space-5); padding: clamp(var(--ps-space-5), 3vw, var(--ps-space-6)); }
.ps-agent-group { display: grid; gap: var(--ps-space-3); }
.ps-agent-group + .ps-agent-group { margin-top: calc(var(--ps-space-section) - var(--ps-space-5)); padding-top: var(--ps-space-section-start); border-top: 1px solid var(--ps-line-strong); }   /* the section rule inside .ps-agent-groups' gap (Oct 31) */
@media (max-width: 600px) { .ps-agent-group + .ps-agent-group { margin-top: calc(var(--ps-space-section-phone) - var(--ps-space-5)); padding-top: var(--ps-space-4); } }
.ps-agent-group .ps-badge--loop { justify-self: start; margin-bottom: var(--ps-space-2); }
.ps-agent-group .ps-badge--loop .ps-icon { width: 15px; height: 15px; }
.ps-agent-group .ps-element-grid { padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ps-space-4) var(--ps-space-3); }

@media (max-width: 768px) { .ps-agent-group .ps-element-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ps-space-4) var(--ps-space-2); } .ps-agent-groups { padding: var(--ps-space-5) var(--ps-space-3); } }
/* the handwritten bridge hands straight over to "Our Creatives are free." */
.ps-people-lead .ps-headline--md { font-size: var(--stmt-bold); line-height: .9; }

/* ---------- Agent details: the agents it learns from and feeds, as pills; on phones a small sheet opens where you tapped ---------- */
.ps-agent-links { display: grid; gap: var(--ps-space-3); margin-top: var(--ps-space-2); }
.ps-agent-links:empty { display: none; }
.ps-agent-links__row { display: grid; gap: var(--ps-space-2); }
.ps-agent-links__k { margin: 0; font-family: var(--ps-font-human); font-size: 24px; line-height: 1; color: var(--ps-fg-2); }
.ps-agent-links__pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-agent-sheet { position: fixed; inset: 0; z-index: var(--ps-layer-modal); display: flex; align-items: flex-end; background: color-mix(in oklab, var(--ps-color-ink) 55%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .24s var(--ps-ease-out); }
.ps-agent-sheet.is-open { opacity: 1; }
.ps-agent-sheet__panel { width: 100%; max-height: 86vh; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--ps-space-3); padding: var(--ps-space-5) var(--ps-space-5) calc(var(--ps-space-6) + env(safe-area-inset-bottom, 0px));
  border-radius: 26px 26px 0 0;  transform: translateY(100%); transition: transform .32s var(--ps-ease-drawer); }
.ps-agent-sheet.is-open .ps-agent-sheet__panel { transform: none; }
.ps-agent-sheet__head { display: flex; align-items: center; gap: var(--ps-space-3); }
.ps-agent-sheet__head .ps-element--agent { width: 52px; }
.ps-agent-sheet__close { margin-left: auto; width: var(--ps-size-touch); height: var(--ps-size-touch); display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ps-chip); color: var(--ps-fg); }
[data-theme="dark"] .ps-agent-sheet__close { background: color-mix(in oklab, var(--ps-color-on-dark) 10%, transparent); }
.ps-agent-sheet h3 { margin: 0; font-family: var(--ps-font-display); font-weight: 400; font-size: var(--ps-type-number-sm); line-height: 1; }
.ps-agent-sheet [data-sheet-desc] { color: var(--ps-fg-2); font-size: var(--lede); line-height: 1.55; }
@media (min-width: 769px) { .ps-agent-sheet { display: none; } }
@media (prefers-reduced-motion: reduce) { .ps-agent-sheet, .ps-agent-sheet__panel { transition: none; } }
/* phones: the detail panel beside the grid is replaced by the sheet */
@media (max-width: 768px) { .ps-agents-side { display: none; } }

/* ---------- Desktop: more breathing room for everything after the opening screen ---------- */
@media (min-width: 769px) {
  #main-home > .ps-page-section { padding-block: clamp(calc(var(--ps-space-7) * 2), 10vw, calc(var(--ps-space-7) * 3.2)); }
  #main-home > #people { padding-top: var(--ps-space-6); }
  #main-home > .ps-page-section + .ps-endcard, #main-home > .ps-endcard { padding-block: calc(var(--ps-space-7) * 2.4); }
  #main-home .ps-section-head { margin-bottom: var(--ps-space-6); }
  .ps-agents-grid { gap: calc(var(--ps-space-7) * 1.4); }
}

/* ---------- Statement headings: one rhythm (Oct 9). A wrapped light line holds together as one phrase (1.2), and the Bebas line
   sits a clear step below it, the same in the hero, the cycle and the agents ---------- */
.ps-hero-split .ps-statement__light { line-height: 1.2; }
.ps-hero-split .ps-statement__bold { margin-top: .2em; }
/* the "tap one" note sits under the agents' lede (Oct 9) */
.ps-section-head .ps-agents-tap { margin-top: var(--ps-space-2); }
/* "Tap" taps itself: a quick press and a lime ripple from where the finger lands, every few seconds */
.ps-tap-word { position: relative; display: inline-block; color: var(--ps-fg); animation: tap-press 2.6s var(--ps-ease-out) infinite; transform-origin: 50% 70%; }
.ps-tap-word::after { content: ""; position: absolute; left: 50%; top: 55%; width: 1.3em; height: 1.3em; margin: -.65em 0 0 -.65em; border-radius: 50%;
  border: 2px solid var(--ps-color-sprout-strong); opacity: 0; pointer-events: none; animation: tap-ripple 2.6s var(--ps-ease-out) infinite; }
@keyframes tap-press { 0%, 62%, 100% { transform: none; } 68% { transform: scale(.86) translateY(.04em); } 76% { transform: scale(1.04); } 84% { transform: none; } }
@keyframes tap-ripple { 0%, 66% { opacity: 0; transform: scale(.3); } 70% { opacity: .9; } 100% { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .ps-tap-word, .ps-tap-word::after { animation: none; } }

/* ---------- One handwriting size (Oct 9): every Reenie Beanie line on the site is set at --story-hand ---------- */
:root{ --story-hand: var(--hand); }
.ps-ht-accent, .ps-end-date, .ps-agent-links__k, .ps-ring-hand { font-size: var(--story-hand); }
@media (max-width: 768px) { .ps-ht-accent { font-size: var(--story-hand); } }
/* the one exception: inside the ring the word scales with the ring so it always fits between the steps */
.ps-loop-ring .ps-ring-hand { font-size: min(var(--story-hand), 7.5cqw); }

/* ---------- Agent tiles are elements (Oct 9, study F, chosen from the tile studies): a light tile that fades from white into its
   loop step's color, the feature number top left (Platform Map numbering) and a two-letter symbol top right in Bebas, the portal
   icon drawn twice: solid in the step color, with a lighter see-through echo in the next step's color. Same tile on both sides;
   the open or working one lifts, grows and glows in its own step color, and its name gets a dot (no outline, Oct 9). The six step colors are the scroll
   rail's own gradient, lavender to lime through blue, turquoise and green, read in oklch at 0, 20, 40, 60, 80 and 100% (no warm hues). ---------- */
/* each step's section label (.ps-badge--loop) wears the same step color as its tiles: the rail's own tone at that point (Oct 9) */
/* Style A (Sisi, Oct 13, 2026): a flat tint of the step color, a hairline in that color, the Carbon glyph in the step's deep tone,
   the number and code in Bebas. Corners, type and edge match the brand element (.ps-element--brand). No glow, no echo. */
.ps-element--agent { --c: var(--ps-color-loop-learn); --soft: var(--ps-color-loop-learn-soft); --deep: var(--ps-color-loop-learn-deep); --rail: var(--ps-color-loop-learn-rail);
  --ink: var(--deep); --tint: var(--soft);
  container-type: inline-size; border: 0; overflow: hidden; isolation: isolate; color: var(--ink); background: var(--tint);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 34%, transparent), 0 1px 2px color-mix(in oklab, var(--ps-color-ink) 6%, transparent); }
.ps-element--agent[data-step="know"] { --c: var(--ps-color-loop-know); --soft: var(--ps-color-loop-know-soft); --deep: var(--ps-color-loop-know-deep); --rail: var(--ps-color-loop-know-rail); }
.ps-element--agent[data-step="say"]  { --c: var(--ps-color-loop-say);  --soft: var(--ps-color-loop-say-soft);  --deep: var(--ps-color-loop-say-deep);  --rail: var(--ps-color-loop-say-rail); }
.ps-element--agent[data-step="make"] { --c: var(--ps-color-loop-make); --soft: var(--ps-color-loop-make-soft); --deep: var(--ps-color-loop-make-deep); --rail: var(--ps-color-loop-make-rail); }
.ps-element--agent[data-step="pub"]  { --c: var(--ps-color-loop-pub);  --soft: var(--ps-color-loop-pub-soft);  --deep: var(--ps-color-loop-pub-deep);  --rail: var(--ps-color-loop-pub-rail); }
.ps-element--agent[data-step="meas"] { --c: var(--ps-color-loop-meas); --soft: var(--ps-color-loop-meas-soft); --deep: var(--ps-color-loop-meas-deep); --rail: var(--ps-color-loop-meas-rail); }
/* dark: the deep tone mixed into the page is the tint, and the bright rail tone draws the glyph */
[data-theme="dark"] .ps-element--agent, .ps-dark .ps-element--agent { --ink: var(--rail); --tint: color-mix(in oklab, var(--deep) 55%, var(--ps-page)); }
.ps-element--agent .ps-icon { grid-area: 1 / 1; width: 44%; height: 44%; color: var(--ink); }
.ps-element--agent .ps-element__num, .ps-element--agent .ps-element__sym { position: absolute; top: 11%; font: 400 max(9px, 14cqi)/1 var(--ps-font-display); color: var(--ink); }
.ps-element--agent .ps-element__num { left: 13%; }
.ps-element--agent .ps-element__sym { right: 13%; opacity: .55; }
/* the open or working agent: lifted, a deeper tint and a crisp ring in its step color */
:is(.ps-element-tile[aria-pressed="true"], li.is-lit, .ps-loop-step.is-active) .ps-element--agent,
.ps-agent-stage li.is-lit .ps-element--agent { transform: translateY(-3px);
  --tint: color-mix(in oklab, var(--soft) 70%, var(--c));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 60%, transparent), 0 0 0 3px color-mix(in oklab, var(--c) 35%, transparent), 0 6px 14px -8px color-mix(in oklab, var(--ps-color-ink) 30%, transparent); }
:is([data-theme="dark"], .ps-dark) :is(.ps-element-tile[aria-pressed="true"], li.is-lit, .ps-loop-step.is-active) .ps-element--agent,
:is([data-theme="dark"], .ps-dark) .ps-agent-stage li.is-lit .ps-element--agent { --tint: color-mix(in oklab, var(--deep) 80%, var(--c)); }
/* the selected agent's name: ink, medium, with a dot in its step color under it (no outline) */
:is(.ps-element-tile, .ps-step-app):has(> .ps-element--agent[data-step="know"]) { --sel-dot: var(--ps-color-loop-know); }
:is(.ps-element-tile, .ps-step-app):has(> .ps-element--agent[data-step="say"]) { --sel-dot: var(--ps-color-loop-say); }
:is(.ps-element-tile, .ps-step-app):has(> .ps-element--agent[data-step="make"]) { --sel-dot: var(--ps-color-loop-make); }
:is(.ps-element-tile, .ps-step-app):has(> .ps-element--agent[data-step="pub"]) { --sel-dot: var(--ps-color-loop-pub); }
:is(.ps-element-tile, .ps-step-app):has(> .ps-element--agent[data-step="meas"]) { --sel-dot: var(--ps-color-loop-meas); }
:is(.ps-element-tile, .ps-step-app):has(> .ps-element--agent[data-step="learn"]) { --sel-dot: var(--ps-color-loop-learn); }
:is(.ps-element-tile[aria-pressed="true"], .ps-loop-step.is-active .ps-step-app) .ps-element-tile__name { color: var(--ps-fg); font-weight: var(--ps-weight-medium); }
:is(.ps-element-tile[aria-pressed="true"], .ps-loop-step.is-active .ps-step-app) .ps-element-tile__name::after { content: ""; display: block; width: 5px; height: 5px; margin: 5px auto 0; border-radius: 50%; background: var(--sel-dot, var(--ps-fg)); }
[data-theme="dark"] .ps-agent-groups .ps-element-tile:active .ps-element--agent { transform: translateY(1px) scale(.97); }
.ps-agent-groups .ps-element--agent .ps-icon { animation: agent-wake 7s var(--ps-ease-out) infinite; animation-delay: calc(var(--i, 0) * .2s); transform-origin: 50% 60%; }
.ps-agent-groups .ps-element-tile[aria-pressed="true"] .ps-element--agent .ps-icon { animation: agent-busy 2.4s ease-in-out infinite; }
@keyframes agent-wake { 0%, 78%, 100% { transform: none; } 82% { transform: translateY(-3px) scale(1.12) rotate(-10deg); } 87% { transform: translateY(0) scale(1) rotate(7deg); } 91% { transform: rotate(-3deg); } 94% { transform: none; } }
@keyframes agent-busy { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .ps-agent-groups .ps-element--agent .ps-icon { animation: none; } }
/* "Not everything" uses the statement Bebas size, the same as the hero, the opening screen and the cycle (Oct 9) */
.ps-h-track-headline h2 { font-size: var(--stmt-bold); line-height: .9; }
@media (max-width: 768px) { .ps-h-track-headline h2 { font-size: var(--stmt-bold); } }
/* the track's photo captions are plain body text in Poppins (Oct 9) */
.ps-h-item figcaption { font-family: var(--ps-font-ui); font-weight: var(--ps-weight-light); font-size: var(--story-body); line-height: 1.4; color: var(--ps-fg-2); padding: var(--ps-space-2) 0 0; }
/* EN | ES (Oct 9; Nov 5): in the menu at every width, beside the call to action (.ps-page-menu__cta) */
/* the handwritten word that lands a statement ("Creative"), Oct 9: the shared handwriting size, lime, tilted */

/* ---------- The scroll line runs lavender to lime (Oct 9): lavender (the agents) at the top of the page, lime at the end.
   The gradient is fixed to the whole line and revealed as you scroll; the head and each passed pin take the color at their spot. Blended in oklch through the cool blues, so the middle stays vivid instead of greying. ---------- */
:root{ --rail-mix: color-mix(in oklch increasing hue, var(--ps-color-sprout) calc(var(--p, 0) * 100%), var(--ps-color-lavender)); }
.ps-rail-fill, .ps-scroll-thread::before { transform: none; background: linear-gradient(to bottom in oklch decreasing hue, var(--ps-color-lavender), var(--ps-color-sprout)); clip-path: inset(0 0 calc((1 - var(--p, 0)) * 100%) 0); }
.ps-scrub-mini-fill { transform: none; background: linear-gradient(to right in oklch decreasing hue, var(--ps-color-lavender), var(--ps-color-sprout)); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.ps-rail-head { background: var(--rail-mix); box-shadow: 0 0 0 4px color-mix(in oklab, var(--rail-mix) 25%, transparent), 0 2px 6px color-mix(in oklab, var(--ps-color-ink) 20%, transparent); }
.ps-scroll-thread::after { background: var(--rail-mix); box-shadow: 0 0 0 4px color-mix(in oklab, var(--rail-mix) 25%, transparent); }
.ps-rail-pins li.is-hit { --pin: color-mix(in oklch increasing hue, var(--ps-color-sprout) calc(var(--at, 1) * 100%), var(--ps-color-lavender)); border-color: var(--pin); background: var(--pin); }
/* the launch pills match the portal's chip (ps-ui.css .ps-chip, Oct 9): 30px tall, 0 12px, 13px regular, fg-2, 6px gap, 14px icon.
   The site doesn't load ps-ui.css, so the values are mirrored here from the same tokens. */

/* the Human side carries the AI side's decisions in the light theme (Oct 9): the scroll line on phones too, on a light track */
html[data-theme="light"] .ps-scroll-thread { background: var(--ps-line); }
/* the "We go live" card is a dark player card on both sides (it went white with white text on the light side) */
html[data-theme="light"] .ps-stage--end { background: var(--ps-color-graphite-solid); border-color: transparent; color: var(--ps-color-on-dark); }
html[data-theme="light"] .ps-stage--end .ps-end-copy { color: color-mix(in oklab, var(--ps-color-on-dark) 72%, transparent); }
/* the site's icons are .ps-icon (not .ps-icon): give them the portal chip's 14px icon size */

.ps-dir-filter { justify-self: start; width: fit-content; }
/* the phone menu's language switch is the portal's .ps-seg--block, dark like the graphite menu (.ps-dark), at touch height */

/* phones and tablets: the menu button sits top right, so the header's end clears it */

/* the Human side's tools (Oct 9): the Brief Generator and the Reviewer, copy beside a solid card */
.ps-tool-card { gap: var(--ps-space-4); }
.ps-tool-card .ps-player-mini { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--ps-radius-control); }
/* ---------- The photo track plays our latest reels (Oct 9): every frame 9:16, still set at staggered heights; captions stay ---------- */
.ps-h-item img, .ps-h-item .ps-h-reel { flex: none; height: auto; aspect-ratio: 9 / 16; width: 100%; min-height: 0; }
.ps-h-reel { position: relative; display: block; border-radius: var(--ps-radius-card); overflow: hidden;
  box-shadow: 0 2px 6px color-mix(in oklab, var(--ps-color-ink) 14%, transparent), 0 24px 40px -24px color-mix(in oklab, var(--ps-color-ink) 45%, transparent); }
.ps-h-reel video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ps-color-graphite-solid); }
.ps-h-reel .ps-reel-ico { position: absolute; left: var(--ps-space-3); bottom: var(--ps-space-3); }
.ps-hi-1 { width: calc(44vh * 9 / 16); height: auto; margin-top: 22vh; } .ps-hi-2 { width: calc(42vh * 9 / 16); height: auto; margin-top: 4vh; }
.ps-hi-3 { width: calc(40vh * 9 / 16); height: auto; margin-top: 28vh; } .ps-hi-4 { width: calc(50vh * 9 / 16); height: auto; margin-top: 8vh; }
.ps-hi-5 { width: calc(42vh * 9 / 16); height: auto; margin-top: 24vh; } .ps-hi-6 { width: calc(54vh * 9 / 16); height: auto; margin-top: 2vh; }
.ps-hi-7 { width: calc(40vh * 9 / 16); height: auto; margin-top: 26vh; } .ps-hi-8 { width: calc(48vh * 9 / 16); height: auto; margin-top: 10vh; }
@media (max-width: 768px) {
  .ps-hi-1 { width: calc(40svh * 9 / 16); margin-top: 20svh; } .ps-hi-2 { width: calc(46svh * 9 / 16); margin-top: 4svh; }
  .ps-hi-3 { width: calc(36svh * 9 / 16); margin-top: 26svh; } .ps-hi-4 { width: calc(44svh * 9 / 16); margin-top: 8svh; }
  .ps-hi-5 { width: calc(38svh * 9 / 16); margin-top: 22svh; } .ps-hi-6 { width: calc(48svh * 9 / 16); margin-top: 2svh; }
  .ps-hi-7 { width: calc(36svh * 9 / 16); margin-top: 24svh; } .ps-hi-8 { width: calc(44svh * 9 / 16); margin-top: 10svh; }
}
/* ---------- The heroes on desktop (Oct 9): a 9:16 player on the left (the reel from the feed, or today's stage) with its scrub bar,
   the headline and the notes on the right, the launch line under them. Phones keep the full-width player with the headline over it. ---------- */
.ps-stage-media.has-reel .ps-hero-reel { object-fit: cover; }
@media (min-width: 769px) {
  .ps-story-hero { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); grid-template-areas: "media copy" "scrub foot"; column-gap: clamp(var(--ps-space-6), 6vw, calc(var(--ps-space-7) * 2)); row-gap: var(--ps-space-4); align-items: center; }
  .ps-story-hero > .ps-stage:not(.ps-stage--end) { display: contents; }
  .ps-story-hero .ps-stage-media { grid-area: media; position: relative; inset: auto; aspect-ratio: 9 / 16; border-radius: var(--story-stage-r); overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--ps-line), 0 30px 60px -28px color-mix(in oklab, var(--ps-color-ink) 55%, transparent); }
  .ps-story-hero .ps-stage-copy { grid-area: copy; padding: 0; min-height: 0; justify-content: center; gap: var(--ps-space-6); }
  .ps-story-hero .ps-stage-notes { align-self: flex-start; justify-content: flex-start; }
  .ps-story-hero .ps-scrub { grid-area: scrub; }
  .ps-story-hero .ps-hero-foot { grid-area: foot; padding-inline: 0; }
  .ps-story-hero .ps-agent-stage { inset: 12% 10% 30% 10%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-4); }
  html[data-theme="light"] .ps-story-hero .ps-stage-copy .ps-headline { color: var(--ps-color-ink); }
}
/* How a job works (Oct 9): each step is the agent that does it, its element tile on the left with the name under it (lime while the
   step is on), then the step; the phone beside the steps shows a real preview of the feature. On phones the tile opens that preview. */
.ps-loop-step { grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--ps-space-5); padding-left: 0; }
.ps-loop-step > :not(.ps-step-app) { grid-column: 2; }
.ps-loop-step h3 .ps-badge--num { margin-right: var(--ps-space-3); }
.ps-step-app { grid-column: 1; grid-row: 1 / span 2; align-self: start; display: grid; justify-items: center; gap: var(--ps-space-2); margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: center; }
.ps-step-app .ps-element--agent { width: 64px; }
.ps-step-app .ps-element-tile__name { font-size: var(--story-micro); line-height: 1.25; color: var(--ps-fg-2); max-width: 9em; text-wrap: balance; }
.ps-step-app:focus-visible { outline: 2px solid var(--ps-color-sprout-strong); outline-offset: 4px; border-radius: var(--ps-radius-control); }
@media (max-width: 768px) { .ps-loop-step { padding-left: 0; grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--ps-space-4); } .ps-step-app .ps-element--agent { width: 56px; } }

/* the feature previews inside the phone (and the phone pop-up) */
.ps-timeline .ps-scrub-mark--2 { left: 40%; }


/* the phone pop-up: the same preview, in a phone frame */
.ps-step-sheet .ps-agent-sheet__head h3 { margin: 0; font-family: var(--ps-font-display); font-weight: 400; font-size: var(--ps-type-number-sm); line-height: 1; }
.ps-step-sheet .ps-agent-sheet__head .ps-element--agent { width: 48px; }
.ps-phone--sm .ps-app-card { position: relative; opacity: 1; transform: none; }
/* ---------- How a job works, the phone previews (Oct 9, v2): each screen fills the phone and shows the real feature, from the
   portal's own fields. The brief scrolls slowly through the whole brief; the Reviewer's player takes the top half; the Media
   Library shows one asset with its description, tags and script. Human jobs are in dollars only, never credits. ---------- */
.ps-app-card > :is(.ps-btn, .ps-grid):last-child { margin-top: auto; }   /* the screen's action sits at the bottom, like the app's */
.ps-phone--sm .ps-stage-app { position: relative; }
.ps-phone--sm .ps-app-card { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.ps-st1 { padding-bottom: 0; }
.ps-st1 .ps-scr-view { flex: 1; min-height: 0; overflow: hidden; container-type: size; margin-inline: calc(var(--ps-space-4) * -1); }   /* the brief scrolls under the bar */
.ps-st1 .ps-scr-roll { display: grid; gap: var(--ps-space-3); padding: var(--ps-space-1) var(--ps-space-4) var(--ps-space-5); }
.ps-stage-app[data-stage="1"] .ps-st1 .ps-scr-roll { animation: brief-roll 16s var(--ps-ease-out) 1s infinite; }
@keyframes brief-roll { 0%, 12% { translate: 0 0; } 55%, 72% { translate: 0 calc(-100% + 100cqh); } 92%, 100% { translate: 0 0; } }
.ps-phone--sm .ps-st1 .ps-scr-roll { animation: none; }
.ps-phone--sm .ps-st1 .ps-scr-view { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.ps-st4 .ps-player-mini { flex: 0 0 46%; aspect-ratio: auto; min-height: 0; margin-inline: calc(var(--ps-space-4) * -1); border-radius: 0; }   /* the draft fills the screen's width */
@media (prefers-reduced-motion: reduce) { .ps-stage-app .ps-st1 .ps-scr-roll { animation: none; } .ps-stage-app .ps-st1 .ps-scr-view { overflow-y: auto; } .ps-app-card { transition: none; } }

/* ---------- Motion (Oct 10): the page is a draft under review (behaviors: the Motion block of the story-page script) ---------- */
/* handwriting writes itself, word by word, left to right */
.ps-ink .ps-ink-w { display: inline-block; clip-path: inset(-30% 100% -30% -8%); }
.ps-ink.is-in .ps-ink-w { clip-path: inset(-30% -8% -30% -8%); transition: clip-path 520ms cubic-bezier(.55, .1, .35, 1) calc(var(--i, 0) * 210ms + 120ms); }
/* section headings are framed: viewfinder corners close in on the statement as it arrives, then let go */
:where(html.ps-story) :is(.ps-statement, .ps-why-screen .ps-headline) { position: relative; }
:where(html.ps-story) :is(.ps-statement, .ps-why-screen .ps-headline)::after { content: ""; position: absolute; inset: -14px -18px; pointer-events: none; opacity: 0;
  --k: var(--ps-color-sprout-strong);
  background: linear-gradient(var(--k), var(--k)) top left / 18px 2px no-repeat, linear-gradient(var(--k), var(--k)) top left / 2px 18px no-repeat,
    linear-gradient(var(--k), var(--k)) top right / 18px 2px no-repeat, linear-gradient(var(--k), var(--k)) top right / 2px 18px no-repeat,
    linear-gradient(var(--k), var(--k)) bottom left / 18px 2px no-repeat, linear-gradient(var(--k), var(--k)) bottom left / 2px 18px no-repeat,
    linear-gradient(var(--k), var(--k)) bottom right / 18px 2px no-repeat, linear-gradient(var(--k), var(--k)) bottom right / 2px 18px no-repeat; }
:where(html.ps-story) :is(.ps-statement, .ps-why-screen .ps-headline).is-in::after { animation: ps-frame 1.4s cubic-bezier(.16, 1, .3, 1) .15s both; }
@keyframes ps-frame { 0% { opacity: 0; inset: -48px -56px; } 35% { opacity: 1; } 60% { opacity: 1; inset: -14px -18px; } 100% { opacity: 0; inset: -10px -14px; } }
/* a section reached lands on the rail: its pin pops with a ring; on phones the time code names it */
.ps-rail-pins li.is-landed { animation: ps-land 900ms cubic-bezier(.16, 1, .3, 1); }
@keyframes ps-land { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ps-color-sprout-strong) 80%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.ps-tc-mini.is-landed::after { content: attr(data-note); margin-left: 6px; font-family: var(--ps-font-ui); font-size: var(--story-micro); font-weight: var(--ps-weight-medium); }
.ps-tc-mini.is-landed { animation: ps-pop 420ms cubic-bezier(.16, 1, .3, 1); }
@keyframes ps-pop { from { transform: scale(.86); } to { transform: none; } }
/* the hero's notes type themselves in as the playhead (or the first scroll) reaches them */
.ps-stage-notes li.is-on > span:is([lang], :not([class])) { animation: ps-type 640ms steps(22, end) both; }
@keyframes ps-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ps-stage-notes li.is-on:last-child { box-shadow: 0 0 0 4px color-mix(in oklab, var(--ps-color-sprout) 40%, transparent); }
/* the end card is the approved cut */
.ps-stage--end { position: relative; }
.ps-approved-stamp { position: absolute; top: var(--ps-space-5); right: var(--ps-space-5); display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--ps-radius-pill);
  background: var(--ps-color-sprout); color: var(--ps-color-ink); font: var(--ps-weight-medium) var(--ps-type-title)/1 var(--ps-font-ui); opacity: 0; rotate: -6deg; box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--ps-color-sprout) 70%, transparent); }
.ps-approved-stamp .ps-icon { width: 18px; height: 18px; }
.ps-stage--end.is-in .ps-approved-stamp { animation: ps-stamp 700ms cubic-bezier(.16, 1, .3, 1) .6s both; }
.ps-stage--end.is-in { animation: ps-flash 1.6s cubic-bezier(.16, 1, .3, 1) .7s; }
@keyframes ps-stamp { 0% { opacity: 0; transform: scale(1.9); } 60% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes ps-flash { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ps-color-sprout) 70%, transparent); } 100% { box-shadow: 0 0 0 28px transparent; } }
/* live agents: the work moves from one agent to the next */
.ps-agent-groups { position: relative; }
.ps-handoff { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 2;
  background: var(--c, var(--ps-color-sprout)); box-shadow: 0 0 14px 4px color-mix(in oklab, var(--c, var(--ps-color-sprout)) 60%, transparent); }
.ps-element-tile.is-working .ps-element--agent { transform: translateY(-4px) scale(1.07); box-shadow: 0 12px 28px -10px var(--c, var(--ps-color-sprout)), 0 0 0 3px color-mix(in oklab, var(--c, var(--ps-color-sprout)) 35%, transparent);
  transition: transform 380ms cubic-bezier(.16, 1, .3, 1), box-shadow 380ms ease; }
.ps-element-tile .ps-element--agent { transition: transform 380ms cubic-bezier(.16, 1, .3, 1), box-shadow 380ms ease; }
@media (prefers-reduced-motion: reduce) {
  .ps-ink .ps-ink-w { clip-path: none; }
  :where(html.ps-story) :is(.ps-statement, .ps-why-screen .ps-headline)::after { display: none; }
  .ps-stage-notes li.is-on > span { animation: none; }
  .ps-approved-stamp { opacity: 1; transform: none; animation: none !important; }
  .ps-stage--end.is-in { animation: none; }
}


/* ---------- Ask Prompt: the assistant dock (GTM-358, PS.assist) ----------
   Docked on the right, non-modal: the page stays usable beside it; drawers and modals open above it. A sheet on a phone. */
.ps-assist { position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: var(--ps-layer-fab); width: min(400px, calc(100% - 24px));
  display: flex; flex-direction: column; border-radius: var(--ps-radius-card); background: var(--ps-pop-bg); box-shadow: var(--ps-pop-shadow); color: var(--ps-fg);
  transform: translateX(calc(100% + 24px)); transition: transform 220ms var(--ps-ease-drawer); }
.ps-assist.is-open { transform: none; }
.ps-assist__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-2); padding: var(--ps-space-3) var(--ps-space-4); border-bottom: 1px solid var(--ps-line); }
.ps-assist__title { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--ps-type-body)/1.3 var(--ps-font-ui); white-space: nowrap; min-width: 0; }
/* The header stays one row at any width and in either language: the tools never wrap or shrink. */
.ps-assist__tools { flex-wrap: nowrap; flex: none; }
.ps-assist__tools .ps-btn { white-space: nowrap; }
.ps-assist__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--ps-space-4); }
.ps-assist__body .ps-bubble { max-width: 100%; flex-direction: column; align-items: flex-start; }
.ps-assist__body .ps-bubble--me { align-items: flex-end; }
.ps-assist__foot { padding: var(--ps-space-3); border-top: 1px solid var(--ps-line); }
.ps-assist__card { display: flex; flex-direction: column; gap: 6px; margin-top: var(--ps-space-2); padding: var(--ps-space-3); border-radius: var(--ps-radius-control); background: var(--ps-pop-bg); }
.ps-assist__card p { margin: 0; }
.ps-assist__steps { margin: 0; padding-left: 1.2em; font-size: var(--ps-type-caption); }
.ps-assist__fb { margin-top: 2px; }
.ps-assist__empty { display: flex; flex-direction: column; gap: var(--ps-space-3); }
.ps-assist__empty p { margin: 0; }
/* The empty panel (Natalia, Nov 4): the opening line, the note and the chips sit in the middle of the panel, centered */
.ps-assist__body.is-empty { display: flex; flex-direction: column; }
.ps-assist__body.is-empty .ps-thread { flex: 1 1 auto; }
.ps-assist__body.is-empty .ps-assist__empty { flex: 1 1 auto; justify-content: center; align-items: center; text-align: center; padding: 0 var(--ps-space-2); }
.ps-assist__chips { justify-content: center; flex-wrap: wrap; }
/* GTM-295 (Natalia, Nov 5, H-05): under the opening line, that it shows how to do things on this page; the book is the how-to articles */
.ps-assist__howto { display: inline-flex; align-items: flex-start; gap: var(--ps-space-1); max-width: 22em; color: var(--ps-fg-2); font-size: var(--ps-type-caption); text-wrap: pretty; }
.ps-assist__howto > .ps-icon { flex: none; margin-top: 0.15em; color: var(--ps-color-lavender); }   /* the agent's lavender, as the header's dot */
/* A page's task in the panel (GTM-358, Sisi Nov 6: every "let AI help you with this" opens this panel): the strip names the job
   over the page's own box (the AI field with its files and price), Chat Instead goes back to the chat. A panel with tasks only
   (the person's chat isn't on) has no Recent Chats or New Chat. */
.ps-assist__task { display: flex; align-items: center; gap: var(--ps-space-2); padding: var(--ps-space-2) var(--ps-space-3) 0; font: 500 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-assist__task[hidden] { display: none; }
.ps-assist__task-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-assist__foot--task { border-top: 0; }
.ps-assist__foot--task .psaf { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.ps-assist__view { display: flex; flex-direction: column; gap: var(--ps-space-2); }
.ps-assist--tasks [data-assist="history"], .ps-assist--tasks [data-assist="new"] { display: none; }
.ps-assist__box .ps-drop--sm, .ps-drop--sm { min-height: 96px; padding: var(--ps-space-3); }
.ps-assist__files { flex-wrap: wrap; }
.ps-assist__files:empty { display: none; }
.ps-assist__files .ps-chip { gap: 4px; padding-right: 2px; }
.ps-assist--inline { position: relative; inset: auto; z-index: 0; width: 100%; max-width: 400px; height: 440px; transform: none; }   /* the reference page's example */
@media (max-width: 640px) {
  .ps-assist:not(.ps-assist--inline) { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: min(78vh, 640px); transform: translateY(calc(100% + 16px)); }
  .ps-assist.is-open:not(.ps-assist--inline) { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ps-assist { transition: none; } }
/* Prompt AI reads as a chat (Oct 28, Sisi): the box sits flat in the panel's foot, no card inside a card; the opening line is the hand */
.ps-assist__foot.psaf { padding: var(--ps-space-3); background: none; box-shadow: none; border-radius: 0; gap: var(--ps-space-2); }   /* the field mounts on the foot itself */
.ps-assist__foot .psaf-note:empty { display: none; }
/* The lists open the panel's width at most, so model names show whole; the level list from the left, the model list from the right */
.ps-assist__foot .psaf-menu { width: max-content; min-width: 100%; max-width: calc(min(400px, 100vw - 24px) - 2 * var(--ps-space-3)); }
@media (max-width: 640px) { .ps-assist__foot .psaf-menu { max-width: calc(100vw - 16px - 2 * var(--ps-space-3)); } }
.ps-assist__hello { margin: 0; font: 500 var(--ps-type-assist-hello)/1.25 var(--ps-font-ui); color: var(--ps-fg); text-wrap: balance; max-width: 16em; }   /* Poppins, not the hand (Natalia, Nov 4) */
/* Recent Chats (§15): one row per chat, the page it started on, the first words, the day; delete at the end of the row */
.ps-assist__hist-top { margin: 0 0 var(--ps-space-2) calc(-1 * var(--ps-space-2)); }
.ps-assist__hist-group { margin: var(--ps-space-3) 0 var(--ps-space-1); }
.ps-assist__hist { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ps-assist__hist-row { display: flex; align-items: center; gap: var(--ps-space-1); border-radius: var(--ps-radius-control); }
.ps-assist__hist-row:hover, .ps-assist__hist-row[aria-current="true"] { background: var(--ps-chip); }
.ps-assist__hist-open { flex: 1 1 0%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ps-space-2); padding: var(--ps-space-2);
  cursor: pointer; text-align: left; border: 0; border-radius: var(--ps-radius-control); background: none; color: var(--ps-fg); font: 400 var(--ps-type-control)/1.35 var(--ps-font-ui); }
.ps-assist__hist-open:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; }
.ps-assist__hist-page { grid-column: 1; font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.ps-assist__hist-day { grid-column: 2; grid-row: 1; font-size: var(--ps-type-caption); color: var(--ps-fg-3); white-space: nowrap; }
.ps-assist__hist-words { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* §19 files in the chat: a message's files as chips (a thumbnail or the file icon, then the name), opening the file; a removed one is quiet.
   A Recent Chats row counts its files with a paperclip before the first words. */
.ps-assist__msgfiles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ps-assist__msgfiles:only-child { margin-bottom: 0; }
.ps-assist__msgfile { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 220px; padding: 3px 12px 3px 3px; border: 0; border-radius: 999px;
  background: var(--ps-pop-bg); color: var(--ps-fg); box-shadow: inset 0 0 0 1px var(--ps-line); font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); cursor: pointer; text-align: left; }
.ps-assist__msgfile > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-assist__msgfile:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-assist__msgfile.is-gone { cursor: default; color: var(--ps-fg-3); }
.ps-assist__hist-files { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; color: var(--ps-fg-3); vertical-align: middle; }
/* A fill card (§14): what goes in which field; and the fields Prompt AI filled, marked in the agent's lavender until the person edits them */
.ps-assist__fill { display: grid; gap: 2px var(--ps-space-3); margin: 0; font-size: var(--ps-type-caption); }
.ps-assist__fill dt { color: var(--ps-fg-3); }
.ps-assist__fill dd { margin: 0 0 var(--ps-space-1); overflow-wrap: anywhere; }
.ps-assist-filled { box-shadow: 0 0 0 2px var(--ps-color-lavender), 0 0 0 5px var(--ps-agent-bg) !important; transition: box-shadow var(--ps-dur-pop) var(--ps-ease-out); }
@media (prefers-reduced-motion: reduce) { .ps-assist-filled { transition: none; } }
/* Insert (§16): while the person picks a field, the fields and the spots behind an Edit button show where the text can go */
.ps-assist-picking main input:not([type=password]):not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]),
.ps-assist-picking main textarea, .ps-assist-picking .ps-assist-pickable { outline: 2px dashed var(--ps-color-lavender); outline-offset: 2px; cursor: copy; }
/* On a phone the page behind the sheet is blurred (the modal's scrim material); tapping it closes the sheet. The desktop panel
   stays non-modal, so there is no scrim there. Reduced transparency: a plain dim, no blur; reduced motion: no fade. */
.ps-assist-scrim { display: none; }
@media (max-width: 640px) {
  .ps-assist-scrim { display: block; position: fixed; inset: 0; z-index: var(--ps-layer-fab-scrim); background: var(--ps-color-scrim);
    -webkit-backdrop-filter: var(--ps-glass-blur); backdrop-filter: var(--ps-glass-blur);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms var(--ps-ease-drawer), visibility 0s linear 220ms; }
  .ps-assist-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
}
@media (prefers-reduced-transparency: reduce) { .ps-assist-scrim { background: var(--ps-color-scrim-strong); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .ps-assist-scrim { transition: none; } }
/* The shell's Ask Prompt button (§11): on every portal page, added by the shell (PS.assist.shell), placed by portal.css section 12.
   On the desktop a graphite pill like the header group's buttons, with the spark and its name; on a phone one round 48px button
   with the spark only, above the bottom bar, hidden while the dock's sheet is open (--round is the phone look at any width, for the
   reference page). */
.ps-assist-fab { display: inline-flex; align-items: center; gap: var(--ps-space-2); height: var(--ps-size-head-button); padding: 0 var(--ps-space-4) 0 var(--ps-space-3);
  border: 0; border-radius: var(--ps-radius-pill); background: var(--ps-color-graphite-solid); color: var(--ps-color-on-dark); cursor: pointer; white-space: nowrap;
  font: 500 var(--ps-type-control)/1 var(--ps-font-ui);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ps-color-on-dark) 8%, transparent), 0 4px 14px color-mix(in srgb, var(--ps-color-ink) 18%, transparent);
  transition: color var(--ps-dur-press) ease, transform var(--ps-dur-press) var(--ps-ease-out); }
.ps-assist-fab[hidden] { display: none; }
.ps-assist-fab .ps-icon { width: var(--ps-size-icon); height: var(--ps-size-icon); color: var(--ps-color-lavender); }
.ps-assist-fab:hover, .ps-assist-fab[aria-expanded="true"] { color: var(--ps-color-sprout); }
.ps-assist-fab:active { transform: scale(.96); }
html.ps-v2[data-theme="dark"] .ps-assist-fab { background: var(--ps-glass-strong); }   /* Night Wash, as the bell and the timer */
.ps-assist-fab--round { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
.ps-assist-fab--round .ps-assist-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ps-assist-fab--round .ps-icon { width: var(--ps-size-icon-lg); height: var(--ps-size-icon-lg); }
@media (max-width: 768px) {
  .ps-assist-fab { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
  .ps-assist-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ps-assist-fab .ps-icon { width: var(--ps-size-icon-lg); height: var(--ps-size-icon-lg); }
}
@media (prefers-reduced-motion: reduce) { .ps-assist-fab { transition: none; } .ps-assist-fab:active { transform: none; } }

/* ---------- Brief Generator pieces (GTM-256, docs/brief-generator/PLAN.md section 8 item 2) ----------
   The quote bar, the "filled by" field mark, the review summary rows, stacked choice tiles, source buttons, type-colored thumbs
   for file rows (a .ps-list row with a .ps-thumb--type) and a medium swatch. Tokens only. */
/* Quote bar: the price so far, Back and the step's main action, at the bottom of a wizard on every step. Sticky in the page's
   column (never under the rail); on a phone it rides above the bottom bar and the home indicator. Put it last in .ps-wizard. */
.ps-quotebar { position: sticky; bottom: var(--ps-space-4); z-index: var(--ps-layer-sticky); display: flex; align-items: center; gap: var(--ps-space-3);
  width: calc(100% - 2 * var(--ps-space-4)); max-width: var(--ps-wizard-w, 640px); margin: var(--ps-space-5) auto 0; padding: var(--ps-space-3);
  border-radius: calc(var(--ps-radius-card) + var(--ps-space-1)); background: var(--ps-bar); box-shadow: var(--ps-bar-shadow); }   /* the top surface, roomier (GTM-337, Nov 7) */
.ps-quotebar__price { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-left: var(--ps-space-2); }
.ps-quotebar__label { font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-quotebar__num { font: 400 var(--ps-type-section)/.95 var(--ps-font-display); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--ps-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-quotebar__num small { margin-left: var(--ps-space-1); font: 400 var(--ps-type-caption)/1 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-quotebar__num.is-empty { font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-quotebar__num.is-tick { animation: ps-quote-tick 260ms var(--ps-ease-out); }
@keyframes ps-quote-tick { from { opacity: .35; transform: translateY(3px); } }
.ps-quotebar > .ps-btn { flex: none; }
.ps-quotebar--inline { position: relative; bottom: auto; width: 100%; margin: 0; }   /* the reference page's example */
.ps-quotebar > .ps-btn--accent { min-width: 128px; }
@media (max-width: 768px) { .ps-quotebar:not(.ps-quotebar--inline) { bottom: calc(16px + 48px + 16px + env(safe-area-inset-bottom, 0px)); width: 100%; }
  .ps-quotebar > .ps-btn--accent { min-width: 0; } }
/* Provenance: who filled a field. On a .ps-badge: neutral for brand guidelines, the profile or a rule; --ai (lavender) for Prompt.
   A field Prompt filled also gets .is-filled-ai on its input until the person edits it. */
.ps-filled .ps-icon { width: 12px; height: 12px; }
.ps-filled--ai { background: var(--ps-agent-bg); color: var(--ps-agent-fg); }
.ps-input.is-filled-ai { box-shadow: inset 0 0 0 1.5px var(--ps-color-lavender); }
/* Summary rows: a step collapsed to its label, one line of what was answered, and Edit (the review of a wizard) */
.ps-sumrow { display: flex; flex-direction: column; gap: var(--ps-space-1); padding: var(--ps-space-4) 0; border-top: 1px solid var(--ps-line); min-width: 0; }
.ps-sumrow:first-child { border-top: 0; padding-top: 0; }
.ps-sumrow:last-child { padding-bottom: 0; }
.ps-sumrow__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-2); min-height: var(--ps-size-control-sm); }
.ps-sumrow__body { margin: 0; color: var(--ps-fg-2); overflow-wrap: anywhere; }
.ps-sumrow.is-error .ps-sumrow__body { color: var(--ps-danger); }
/* Stacked choice tiles: icon above the text, for a grid of big options (the services) */
/* A wizard inside a page column (#main-view already pads it): no side padding of its own */
.ps-wizard--flush .ps-wizard__bar, .ps-wizard--flush .ps-wizard__body { padding-inline: 0; }
@media (max-width: 768px) { .ps-wizard--flush .ps-wizard__inner { padding-right: calc(48px + var(--ps-space-3)); } }   /* clear of the phone's menu button when the bar sticks */
.ps-choices--tiles { --ps-choice-min: 136px; }
.ps-choice--stack { flex-direction: column; gap: var(--ps-space-2); min-height: 112px; }
.ps-choice--stack .ps-choice__body { align-self: stretch; }
/* Source buttons: where files come from (Upload, Library, Drive), three across at every width, icon over label */
.ps-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-2); }
.ps-sources > .ps-btn { height: auto; min-height: 64px; flex-direction: column; gap: var(--ps-space-1); padding: var(--ps-space-2); border-radius: var(--ps-radius-control); }
/* A thumb in the asset type's color (a file row's icon): data-type video | image | audio | logo | typography */
.ps-thumb--type { background: var(--ps-asset, var(--ps-chip)); color: var(--ps-asset-on, var(--ps-fg-2)); }
.ps-swatch--md { width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ps-line); }
@media (prefers-reduced-motion: reduce) { .ps-quotebar__num.is-tick { animation: ps-step-fade 200ms ease both; } }
/* ps-site-dir:start */
/* GTM-429 the website's Creatives directory (ps-ui.js story block): under a card's trades line, the person's motto in the
   handwriting font (their own words, the one place a card uses it), two lines at most. The home page's faces strip stays
   hidden until the Instagram feed answers (PS.igPhotos un-hides it). Tokens only. */
.ps-dir-motto { margin: 2px 0 0; font: 400 calc(var(--ps-type-body) * 1.6)/1.05 var(--ps-font-human); color: var(--ps-fg-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ps-faces[hidden] { display: none; }
/* ps-site-dir:end */
/* ps-creative:start */
/* GTM-429 to GTM-432, GTM-354: the Creative profile (CP-01 to CP-11; prototype approved by Natalia, Nov 5, 2026), its editor
   and the contact scan's note. Tokens only. Behaviour: PS.scanNote, PS.creativeProfile, PS.workEditor (ps-ui.js). */

/* the scan's note under a field: the message in the reader's language, the text with what to take out marked (S2, CP-09) */
.ps-scan-note { display: grid; gap: var(--ps-space-2); padding: var(--ps-space-2) var(--ps-space-3); border-radius: var(--ps-radius-control); background: var(--ps-warn-soft); color: var(--ps-fg); font-size: var(--ps-type-caption); line-height: 1.45; }
.ps-scan-note.is-block { background: var(--ps-danger-soft); }
.ps-scan-note__msg { margin: 0; display: flex; gap: var(--ps-space-2); align-items: flex-start; }
.ps-scan-note__msg .ps-icon { flex: none; margin-top: 2px; color: var(--ps-warn); }
.ps-scan-note.is-block .ps-scan-note__msg .ps-icon { color: var(--ps-danger); }
.ps-scan-note__text { margin: 0; padding: var(--ps-space-2) var(--ps-space-3); border-radius: var(--ps-radius-small); background: var(--ps-glass-strong); color: var(--ps-fg-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ps-scan-note__mark { background: none; color: var(--ps-fg); box-shadow: inset 0 -2px 0 var(--ps-danger); border-radius: 2px; }
.ps-scan-note__appeal { justify-self: start; }
.ps-scan-note__thanks { margin: 0; color: var(--ps-fg-2); }

/* a person's riso print in a ring of their level's color (DESIGN.md "Profile photos"): Entry lavender, Junior sky,
   Associate turquoise, Senior green, Director lime. data-level on the photo, on the level badge, or on any parent */
[data-level="entry"] { --cp-lv: var(--ps-color-loop-know); }
[data-level="junior"] { --cp-lv: var(--ps-color-loop-make); }
[data-level="associate"] { --cp-lv: var(--ps-color-loop-pub); }
[data-level="senior"] { --cp-lv: var(--ps-color-loop-meas); }
[data-level="director"] { --cp-lv: var(--ps-color-loop-learn); }
.ps-cp-av { --cp-av: 44px; --cp-ring: 2px; position: relative; flex: none; width: var(--cp-av); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--ps-color-greige-deep); color: var(--ps-color-ink); font: 400 calc(var(--cp-av) * .42)/1 var(--ps-font-display);
  box-shadow: 0 0 0 var(--cp-ring) var(--ps-page), 0 0 0 calc(var(--cp-ring) * 2) var(--cp-lv, var(--ps-line-strong)); }
.ps-cp-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-cp-av--xs { --cp-av: 26px; --cp-ring: 1.5px; }
.ps-cp-av--sm { --cp-av: 34px; }
.ps-cp-av--md { --cp-av: 76px; --cp-ring: 3px; }
.ps-cp-av--lg { --cp-av: 92px; --cp-ring: 3px; }
/* the level as a badge of the pill family, in the level's color with ink text */
.ps-badge--level { background: var(--cp-lv, var(--ps-chip)); color: var(--ps-color-ink); }

/* ---------- The profile (.ps-cp, PS.creativeProfile): one component that reflows by its own width (container queries):
   an Instagram header on a phone, a big hero with a facts passport on the desktop, the square work grid, the viewer. ---------- */
.ps-cp { container: cp / inline-size; position: relative; min-width: 0; --cp-top: 0px; }
/* under a sticky page header (team/profile.html is a .ps-page): the bar and the tabs stick below it */
.ps-page .ps-cp { --cp-top: calc(var(--ps-size-page-header) + env(safe-area-inset-top, 0px)); }
.ps-cp__wrap { width: 100%; max-width: var(--ps-size-page-max); margin: 0 auto; padding-inline: var(--ps-space-4); }
.ps-cp__bar { position: sticky; top: var(--cp-top); z-index: var(--ps-layer-sticky); display: grid; grid-template-columns: var(--ps-size-touch) minmax(0, 1fr) auto; align-items: center; gap: var(--ps-space-1);
  height: 54px; padding: 0 var(--ps-space-2); background: color-mix(in srgb, var(--ps-page) 86%, transparent); backdrop-filter: blur(var(--ps-glass-blur-touch)); }
.ps-cp__bar-t { display: flex; align-items: center; justify-content: center; gap: var(--ps-space-2); min-width: 0; font: 500 var(--ps-type-title)/1 var(--ps-font-ui); }
.ps-cp__bar-mini { display: none; align-items: center; gap: var(--ps-space-2); min-width: 0; }
.ps-cp__bar-end { display: flex; align-items: center; gap: var(--ps-space-1); }
.ps-cp__bar-pick { display: none; }
.ps-cp.is-scrolled .ps-cp__bar-mini { display: inline-flex; animation: ps-cp-rise var(--ps-dur-move) var(--ps-ease-out); }
.ps-cp.is-scrolled .ps-cp__bar-lbl, .ps-cp.is-scrolled .ps-cp__bar-save { display: none; }
.ps-cp.is-scrolled .ps-cp__bar-pick { display: inline-flex; }
@keyframes ps-cp-rise { from { opacity: 0; transform: translateY(6px); } }

/* the page's photo (in the owner's bar): the level ring at 92px */
.ps-cp__photo > .ps-cp-av { --cp-av: 92px; --cp-ring: 3px; }
@keyframes ps-cp-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ps-color-sprout-strong) 0%, transparent); } }
.ps-cp__motto { margin: 0; font: 400 var(--ps-type-human)/1 var(--ps-font-human); color: var(--ps-fg); }
.ps-cp [data-cp-save][aria-pressed="true"] .ps-icon { color: var(--ps-accent-stroke); }

/* a fact's label and value (k / v) */
.ps-cp__k { font: 500 var(--ps-type-label)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-cp__v { font-size: var(--ps-type-body); font-weight: var(--ps-weight-regular); overflow-wrap: anywhere; }
.ps-cp__v small { display: block; font-size: var(--ps-type-menu); font-weight: var(--ps-weight-light); color: var(--ps-fg-2); }

/* the work */
.ps-cp__main { min-width: 0; }
.ps-cp__tabs { position: sticky; top: calc(var(--cp-top) + 54px); z-index: var(--ps-layer-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-2);
  border-top: 1px solid var(--ps-line); background: color-mix(in srgb, var(--ps-page) 90%, transparent); backdrop-filter: blur(var(--ps-glass-blur-touch)); }
.ps-cp__tabset { display: flex; flex: 1; }
.ps-cp__tab { position: relative; flex: 1; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: var(--ps-space-2); border: 0; background: none; cursor: pointer;
  color: var(--ps-fg-3); font: 400 var(--ps-type-menu)/1 var(--ps-font-ui); letter-spacing: .08em; text-transform: uppercase; }
.ps-cp__tab .ps-icon { width: 20px; height: 20px; }
.ps-cp__tab-t { display: none; }
.ps-cp__tab[aria-selected="true"] { color: var(--ps-fg); }
.ps-cp__tab[aria-selected="true"]::before { content: ""; position: absolute; top: -1px; left: 18%; right: 18%; height: 2px; background: var(--ps-fg); }
.ps-cp__tab:focus-visible, .ps-cp__view > button:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; }
.ps-cp__view { display: none; gap: 2px; padding-right: 2px; }
.ps-cp__view > button { width: var(--ps-size-touch); height: var(--ps-size-touch); display: grid; place-items: center; border: 0; border-radius: var(--ps-radius-control); background: none; color: var(--ps-fg-3); cursor: pointer; }
.ps-cp__view > button[aria-pressed="true"] { background: var(--ps-chip); color: var(--ps-fg); }
.ps-cp__view .ps-icon { width: 16px; height: 16px; }
.ps-cp__view > [data-cp-pause] { display: inline-grid; }
.ps-cp__more { display: flex; justify-content: center; padding: var(--ps-space-4) 0 var(--ps-space-1); }

/* the grid: square tiles, 3 across on a phone with 2px gaps, 3 or 4 on the desktop with 6px; the focal point keeps the subject in view */
.ps-work-grid { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.ps-work-grid > li { min-width: 0; }
.ps-work { position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 1; overflow: hidden; padding: 0; border: 0; cursor: pointer; background: var(--ps-chip); color: var(--ps-color-on-dark); }
.ps-work img, .ps-work video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%);
  transition: transform .6s var(--ps-ease-out), opacity var(--ps-dur-base) var(--ps-ease-out); }
.ps-work video { opacity: 0; }
.ps-work.is-playing video { opacity: 1; }
.ps-work__mark { position: absolute; top: 7px; right: 7px; display: flex; gap: 5px; pointer-events: none; }
.ps-work__mark .ps-icon, .ps-work__pin .ps-icon { width: 17px; height: 17px; filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--ps-color-ink) 60%, transparent)); }
.ps-work__pin { position: absolute; top: 7px; left: 7px; pointer-events: none; color: var(--ps-color-sprout); }
.ps-work__made { position: absolute; left: 7px; bottom: 7px; pointer-events: none; }
.ps-work__ov { position: absolute; inset: 0; display: grid; align-content: end; gap: var(--ps-space-1); padding: var(--ps-space-3); text-align: left; pointer-events: none; opacity: 0;
  background: linear-gradient(transparent 45%, color-mix(in srgb, var(--ps-color-ink) 72%, transparent)); transition: opacity var(--ps-dur-base) var(--ps-ease-out); }
.ps-work__ov b { font: 400 calc(var(--ps-type-section) * .7)/1 var(--ps-font-display); }
.ps-work__ov span { font-size: var(--ps-type-menu); }
.ps-work:focus-visible { outline: 3px solid var(--ps-focus); outline-offset: -3px; }
@media (hover: hover) {
  .ps-work:hover img, .ps-work:hover video { transform: scale(1.035); }
  .ps-work:hover .ps-work__ov, .ps-work:focus-visible .ps-work__ov { opacity: 1; }
  .ps-work:hover .ps-work__made { opacity: 0; }
}

/* the index: a numbered list with a floating preview that follows the pointer (desktop) */
.ps-cp__index { list-style: none; margin: var(--ps-space-2) 0 0; padding: 0; display: none; }
.ps-cp[data-view="index"] .ps-cp__index { display: block; }
.ps-cp[data-view="index"] .ps-work-grid { display: none; }
.ps-cp__index button { width: 100%; display: grid; grid-template-columns: 44px 56px minmax(0, 1fr) auto; gap: var(--ps-space-4); align-items: center; padding: var(--ps-space-3) 6px; border: 0;
  border-bottom: 1px solid var(--ps-line); background: none; color: inherit; text-align: left; cursor: pointer; transition: background var(--ps-dur-base), padding var(--ps-dur-move) var(--ps-ease-out); }
.ps-cp__index button:hover { background: var(--ps-chip); padding-left: 14px; }
.ps-cp__n { font: 400 calc(var(--ps-type-section) * .7)/1 var(--ps-font-display); color: var(--ps-fg-3); font-variant-numeric: tabular-nums; }
.ps-cp__index img { width: 56px; height: 56px; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); border-radius: var(--ps-radius-small); display: block; }
.ps-cp__index-t { font: 400 calc(var(--ps-type-section) * .8)/1 var(--ps-font-display); }
.ps-cp__index-m { font-size: var(--ps-type-menu); color: var(--ps-fg-2); text-align: right; }
.ps-cp__peek { position: fixed; left: var(--px, 0); top: var(--py, 0); z-index: var(--ps-layer-tooltip); width: 240px; aspect-ratio: 1; border-radius: var(--ps-radius-card); overflow: hidden; pointer-events: none;
  opacity: 0; transform: scale(.92) rotate(-2deg); transition: opacity var(--ps-dur-pop), transform var(--ps-dur-move) var(--ps-ease-out); box-shadow: var(--ps-pop-shadow); }
.ps-cp__peek.is-on { opacity: 1; transform: none; }
.ps-cp__peek img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* a section's eyebrow */
.ps-cp__eyebrow { font: 500 var(--ps-type-label)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-cp__lang { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--ps-type-menu); }
.ps-cp__lang i { display: block; height: 5px; border-radius: 3px; background: var(--ps-line); overflow: hidden; }
.ps-cp__lang i::after { content: ""; display: block; height: 100%; width: var(--w, 0%); border-radius: 3px; background: linear-gradient(90deg in oklch, var(--ps-color-lavender), var(--ps-color-sprout-strong)); }
.ps-cp__lang small { color: var(--ps-fg-3); font-size: var(--ps-type-menu-line); }
.ps-cp__kv { display: grid; gap: var(--ps-space-2); margin: 0; }
.ps-cp__kv > div { display: grid; gap: 2px; padding-bottom: 7px; border-bottom: 1px dashed var(--ps-line-strong); font-size: var(--ps-type-menu); }
.ps-cp__kv > div:last-child { padding: 0; border: 0; }
.ps-cp__kv dt { color: var(--ps-fg-2); }
.ps-cp__kv dd { margin: 0; color: var(--ps-fg); }
.ps-cp__gear { margin: 0; font-size: var(--ps-type-menu); color: var(--ps-fg-2); line-height: 1.6; }
.ps-cp__gear b { color: var(--ps-fg); font-weight: var(--ps-weight-regular); }

/* the sections under the work: reviews, their story, also on Prompt, the closing panel */
.ps-cp__sec { display: grid; gap: var(--ps-space-5); padding-top: calc(var(--ps-space-7) + var(--ps-space-2)); }
.ps-cp__sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--ps-space-3); }
.ps-cp__sec-head h2 { margin: 0; font: 500 var(--ps-type-title)/1.2 var(--ps-font-ui); }   /* GTM-430 (Nov 6): the body's type, never the display face's big numbers */
.ps-cp__rv { display: grid; gap: 18px; }
.ps-cp__score { display: grid; gap: var(--ps-space-3); }
.ps-cp__score-n { display: flex; align-items: end; gap: var(--ps-space-3); }
.ps-cp__score-n > b { font: 400 calc(var(--ps-type-number) * 1.64)/.8 var(--ps-font-display); font-variant-numeric: tabular-nums; }
.ps-cp__stars { display: inline-flex; gap: 2px; }
.ps-cp__stars .ps-icon { width: 15px; height: 15px; }
.ps-cp__bars { display: grid; gap: 6px; }
.ps-cp__bars > div { display: grid; grid-template-columns: 14px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: var(--ps-type-menu); color: var(--ps-fg-2); font-variant-numeric: tabular-nums; }
.ps-cp__bars i { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--ps-line); overflow: hidden; }
.ps-cp__bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 3px; background: var(--ps-fg); }
.ps-cp__sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--ps-space-4); padding-top: 6px; }
.ps-cp__sub > div { display: grid; gap: 2px; }
.ps-cp__sub b { font: 400 calc(var(--ps-type-section) * .7)/1 var(--ps-font-display); }
.ps-cp__sub span { font-size: var(--ps-type-menu); color: var(--ps-fg-2); }
.ps-cp__quotes { display: grid; gap: var(--ps-space-3); }
.ps-cp__quote { display: grid; gap: 10px; align-content: start; margin: 0; padding: 18px; border-radius: calc(var(--ps-radius-card) + 2px); background: var(--ps-glass-strong); box-shadow: var(--ps-glass-shadow); }
.ps-cp__quote p { margin: 0; font-size: var(--ps-type-field); font-weight: var(--ps-weight-light); }
.ps-cp__quote--big { background: var(--ps-color-graphite-solid); color: var(--ps-color-on-dark); }
.ps-cp__quote--big .ps-cp__stars { color: var(--ps-color-sprout); }
.ps-cp__who { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: var(--ps-type-menu); color: var(--ps-fg-3); }
.ps-cp__quote--big .ps-cp__who { color: color-mix(in srgb, var(--ps-color-on-dark) 72%, transparent); }
.ps-cp__tl { list-style: none; margin: 0; padding: 0; display: grid; }
.ps-cp__tl > li { position: relative; display: grid; grid-template-columns: 74px 18px minmax(0, 1fr); gap: var(--ps-space-3); align-items: start; padding-bottom: 18px; }
.ps-cp__tl > li::before { content: ""; position: absolute; left: 82px; top: 14px; bottom: -4px; width: 2px; background: var(--ps-line-strong); }
.ps-cp__tl > li:last-child::before { display: none; }
.ps-cp__y { font: 400 calc(var(--ps-type-section) * .7)/1 var(--ps-font-display); text-align: right; }
.ps-cp__dot { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--ps-page); box-shadow: inset 0 0 0 2px var(--ps-fg-3); }
.ps-cp__tl > li.is-now .ps-cp__dot { box-shadow: inset 0 0 0 5px var(--ps-color-sprout-strong); }
.ps-cp__w { font-size: var(--ps-type-body); }
.ps-cp__w small { display: block; color: var(--ps-fg-2); font-size: var(--ps-type-menu); }
.ps-cp__sim { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-3); }
.ps-cp__simc { display: grid; gap: var(--ps-space-2); justify-items: center; padding: var(--ps-space-4); border-radius: calc(var(--ps-radius-card) + 2px); background: var(--ps-glass-strong); box-shadow: var(--ps-glass-shadow);
  color: inherit; text-align: center; text-decoration: none; transition: transform var(--ps-dur-move) var(--ps-ease-out); }
.ps-cp__simc:hover { transform: translateY(-3px); }
.ps-cp__simc b { font: 400 calc(var(--ps-type-section) * .82)/1 var(--ps-font-display); }
.ps-cp__simc span:last-child { font-size: var(--ps-type-menu); color: var(--ps-fg-2); }
.ps-cp__foot { padding: var(--ps-space-6) 0 var(--ps-space-7); font-size: var(--ps-type-menu); color: var(--ps-fg-3); }
.ps-cp__team { display: grid; gap: var(--ps-space-2); }
.ps-cp__team a { overflow-wrap: anywhere; }

@container cp (min-width: 760px) {
  .ps-cp__wrap { padding-inline: 40px; }
  .ps-cp__bar { display: none; }
  .ps-cp__photo > .ps-cp-av { --cp-av: clamp(180px, 22cqi, 248px); --cp-ring: 6px; }
  .ps-cp__motto { font-size: calc(var(--ps-type-human) * 1.27); margin-top: -4px; }
  .ps-cp__tabs { top: var(--cp-top); }
  .ps-cp__tabset { flex: 0 1 auto; gap: 28px; }
  .ps-cp__tab { flex: none; padding: 0 2px; }
  .ps-cp__tab-t { display: inline; }
  .ps-cp__tab .ps-icon { width: 15px; height: 15px; }
  .ps-cp__tab[aria-selected="true"]::before { left: 0; right: 0; }
  .ps-cp__view { display: inline-flex; }
  .ps-work-grid { gap: 6px; margin-top: 6px; }
  .ps-work { border-radius: 6px; }
  .ps-cp__rv { grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; }
  .ps-cp__quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-cp__quote--big { grid-column: 1 / -1; padding: 26px 28px; }
  .ps-cp__quote--big p { font: 400 calc(var(--ps-type-section) * 1.06)/1.02 var(--ps-font-display); }
  .ps-cp__tl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ps-cp__tl > li { grid-template-columns: 1fr; gap: 10px; padding: 0 var(--ps-space-4) 0 0; }
  .ps-cp__tl > li::before { left: 18px; right: 0; top: 30px; bottom: auto; width: auto; height: 2px; }
  .ps-cp__tl > li .ps-cp__y { order: -1; }
  .ps-cp__y { text-align: left; font-size: calc(var(--ps-type-section) * .94); }
  .ps-cp__sim { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container cp (min-width: 1000px) {
}

/* ---------- The viewer (.ps-viewer): a dark island over the page. Desktop: the media and its facts side by side; phone: full screen.
   Arrows, swipe and Escape; the focus stays inside and goes back to the tile. ---------- */
.ps-viewer { position: fixed; inset: 0; z-index: var(--ps-layer-modal); display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--ps-color-ink) 82%, transparent); backdrop-filter: blur(6px); animation: ps-cp-fade var(--ps-dur-pop) var(--ps-ease-out); }
@keyframes ps-cp-fade { from { opacity: 0; } }
.ps-viewer__box { width: min(1060px, 100%); max-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); overflow: auto; border-radius: var(--ps-radius-card); background: var(--ps-color-graphite-solid); color: var(--ps-color-on-dark); }
.ps-viewer__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: 70vh; background: var(--ps-color-ink); }
.ps-viewer__media > img, .ps-viewer__media > video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.ps-viewer__info { display: grid; gap: var(--ps-space-3); align-content: start; padding: var(--ps-space-4) 18px 20px; }
.ps-viewer__who { display: flex; align-items: center; gap: 10px; font-weight: var(--ps-weight-medium); font-size: var(--ps-type-body); }
.ps-viewer__t { margin: 0; font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); }   /* GTM-430 (Nov 6): the post's title in the body's type, its caption under it */
.ps-viewer__d { margin: 0; font-size: var(--ps-type-body); color: color-mix(in srgb, var(--ps-color-on-dark) 78%, transparent); }
.ps-viewer__count { font-size: var(--ps-type-menu); color: color-mix(in srgb, var(--ps-color-on-dark) 70%, transparent); }
.ps-viewer__x, .ps-viewer__nav { position: absolute; width: var(--ps-size-touch); height: var(--ps-size-touch); display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--ps-color-graphite-solid) 70%, transparent); color: var(--ps-color-on-dark); }
.ps-viewer__x { top: 10px; right: 10px; }
.ps-viewer__nav { top: 50%; transform: translateY(-50%); }
.ps-viewer__nav--prev { left: 10px; } .ps-viewer__nav--next { right: 10px; }
.ps-viewer__x:focus-visible, .ps-viewer__nav:focus-visible { outline: 2px solid var(--ps-color-sprout); outline-offset: 2px; }
@media (min-width: 760px) {
  .ps-viewer__box { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); overflow: hidden; }
  .ps-viewer__media { aspect-ratio: auto; max-height: none; min-height: min(82vh, 640px); }
  .ps-viewer__info { padding: 26px; gap: var(--ps-space-4); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }   /* a long owner form (captions, slides) scrolls in its panel */
}
@media (max-width: 759px) {
  .ps-viewer { padding: 0; place-items: stretch; }
  .ps-viewer__box { width: 100%; height: 100%; max-height: none; border-radius: 0; align-content: start; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-work img, .ps-work video, .ps-cp__index button, .ps-cp__simc, .ps-cp__peek { transition: none; }
  .ps-work:hover img { transform: none; }
  .ps-cp.is-scrolled .ps-cp__bar-mini { animation: none; }
}

/* ---------- The editor (.ps-work-editor, PS.workEditor): the contractor's own page in onboarding's Your page step and on Profile ---------- */
.ps-work-editor { display: grid; gap: var(--ps-space-4); min-width: 0; }
.ps-work-editor__photo { display: flex; align-items: center; gap: var(--ps-space-4); }
.ps-work-editor__photo .ps-stack { flex: 1; min-width: 0; }
.ps-work-editor__ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--ps-space-2); }
.ps-work-editor__way { position: relative; min-height: 92px; display: grid; gap: 6px; justify-items: center; align-content: center; padding: var(--ps-space-3) var(--ps-space-2); border: 1.5px dashed var(--ps-line-strong);
  border-radius: var(--ps-radius-card); background: transparent; color: inherit; text-align: center; font: 400 var(--ps-type-menu)/1.25 var(--ps-font-ui); cursor: pointer; }
.ps-work-editor__way .ps-icon { width: 22px; height: 22px; }
.ps-work-editor__way:hover, .ps-work-editor__way:focus-within { border-color: var(--ps-accent-stroke); }
.ps-work-editor__way:focus-within { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-work-editor__way input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ps-work-editor__way.is-busy { opacity: .6; pointer-events: none; }
.ps-work-editor__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ps-space-2); font-size: var(--ps-type-menu); color: var(--ps-fg-2); }
.ps-work-editor__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-1); }
.ps-work-editor__item { position: relative; aspect-ratio: 1; min-width: 0; overflow: hidden; border-radius: var(--ps-radius-small); background: var(--ps-chip); }
.ps-work-editor__item.is-dragging { opacity: .4; }
.ps-work-editor__item.is-over { box-shadow: inset 0 0 0 2px var(--ps-accent-stroke); }
.ps-work-editor__item.is-flag { box-shadow: inset 0 0 0 2px var(--ps-color-vivid-orange); }
.ps-work-editor__open { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: grab; }
.ps-work-editor__open:focus-visible { outline: 3px solid var(--ps-focus); outline-offset: -3px; }
.ps-work-editor__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); pointer-events: none; }
.ps-work-editor__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ps-fg-3); }
.ps-work-editor__st { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--ps-space-1); pointer-events: none; }
/* over a photo the soft badge fills disappear: solid fills here (lavender stays the AI check, lime ready, danger a fix) */
.ps-work-editor__st .ps-badge { background: var(--ps-pop-bg); color: var(--ps-fg); }
.ps-work-editor__st .ps-badge--ai { background: var(--ps-color-lavender); color: var(--ps-color-ink); }
.ps-work-editor__st .ps-badge--accent { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-work-editor__st .ps-badge--danger { background: var(--ps-danger); color: var(--ps-color-white); }
.ps-work-editor__pin { position: absolute; top: 4px; right: 4px; width: var(--ps-size-touch); height: var(--ps-size-touch); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ps-work-editor__pin::before { content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--ps-color-ink) 55%, transparent); }
.ps-work-editor__pin .ps-icon { position: relative; width: 14px; height: 14px; color: var(--ps-color-on-dark); }
.ps-work-editor__pin[aria-pressed="true"]::before { background: var(--ps-color-sprout); }
.ps-work-editor__pin[aria-pressed="true"] .ps-icon { color: var(--ps-color-ink); }
.ps-work-editor__pin:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -6px; }
.ps-work-editor__suggest { position: absolute; inset: auto 4px 4px; display: flex; gap: var(--ps-space-1); }
.ps-work-editor__issues { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ps-space-2); }
.ps-work-editor__issues > li { display: flex; gap: var(--ps-space-2); align-items: flex-start; padding: var(--ps-space-2) var(--ps-space-3); border-radius: var(--ps-radius-control); background: var(--ps-danger-soft); font-size: var(--ps-type-caption); }
.ps-work-editor__issues > li.is-held { background: var(--ps-chip); }
.ps-work-editor__issues .ps-icon { flex: none; margin-top: 1px; }
.ps-work-editor__focal { position: relative; width: min(100%, 360px); aspect-ratio: 1; overflow: hidden; border-radius: var(--ps-radius-control); background: var(--ps-color-ink); cursor: crosshair; }
.ps-work-editor__focal img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.ps-work-editor__focal::after { content: ""; position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px var(--ps-color-sprout), 0 0 0 4px color-mix(in srgb, var(--ps-color-ink) 55%, transparent); }
.ps-work-editor__check { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ps-space-2); font-size: var(--ps-type-body); }
.ps-work-editor__check > li { display: flex; gap: var(--ps-space-2); align-items: center; color: var(--ps-fg-2); }
.ps-work-editor__check > li .ps-icon { flex: none; color: var(--ps-fg-3); }
.ps-work-editor__check > li.is-done { color: var(--ps-fg); }
.ps-work-editor__check > li.is-done .ps-icon { color: var(--ps-accent-stroke); }
.ps-work-editor__meter { height: 6px; border-radius: 3px; background: var(--ps-line); overflow: hidden; }
.ps-work-editor__meter i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg in oklch, var(--ps-color-lavender), var(--ps-color-sprout-strong)); transition: width var(--ps-dur-move) var(--ps-ease-out); }
.ps-work-editor__story { display: grid; gap: var(--ps-space-2); }
.ps-work-editor__storyrow { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--ps-space-2); align-items: start; }
.ps-work-editor__ig { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ps-space-1); margin: 0; padding: 0; list-style: none; }
.ps-work-editor__ig button { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--ps-radius-small); overflow: hidden; background: var(--ps-chip); cursor: pointer; }
.ps-work-editor__ig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-work-editor__ig button[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ps-color-sprout-strong); }
@media (min-width: 761px) { .ps-work-editor__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ps-work-editor__storyrow { grid-template-columns: 80px minmax(0, 1fr) auto; } .ps-work-editor__storyrow > :nth-child(3) { grid-column: 2 / 3; } }
.ps-work-editor__photo-btn { position: relative; }
.ps-work-editor__photo-btn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ps-work-editor__photo-btn:focus-within { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-work-editor__other { display: grid; gap: var(--ps-space-2); }
.ps-work-editor__other > summary { cursor: pointer; width: max-content; max-width: 100%; min-height: 24px; }

/* ---------- The profile in the portal shell and in its owner's hands (Nov 5, Natalia: edited in place, in the same layout) ---------- */
.ps-cp--shell .ps-cp__wrap { padding-inline: 0; }
.ps-cp--shell .ps-cp__tabs { top: var(--cp-top); }
@media (max-width: 768px) { .ps-cp--shell { --cp-top: var(--nav-phone-bar-h, 0px); } }
.ps-cp-av img { object-position: var(--fx, 50%) var(--fy, 50%); }
/* the owner's bar: where the page stands, what it still needs, Preview as Subscribers, Send for Review */
.ps-cp__editbar { display: grid; gap: var(--ps-space-3); margin: var(--ps-space-2) 0 var(--ps-space-4); padding: var(--ps-space-3) var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); box-shadow: var(--ps-glass-shadow); }
.ps-cp__editbar-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); }
.ps-cp__editbar-msg { flex: 1 1 260px; margin: 0; font-size: var(--ps-type-body); color: var(--ps-fg-2); }
.ps-cp__editbar-acts { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-cp__editbar-note { display: flex; gap: var(--ps-space-2); align-items: flex-start; margin: 0; padding: var(--ps-space-3); border-radius: var(--ps-radius-control); background: var(--ps-warn-soft); font-size: var(--ps-type-body); }
.ps-cp__editbar-note .ps-icon { flex: none; margin-top: 2px; color: var(--ps-warn); }
.ps-cp__ready { display: flex; flex-wrap: wrap; gap: var(--ps-space-2) var(--ps-space-4); margin: 0; padding: 0; list-style: none; font-size: var(--ps-type-menu); color: var(--ps-fg-2); }
.ps-cp__ready > li { display: inline-flex; align-items: center; gap: 6px; }
.ps-cp__ready .ps-icon { color: var(--ps-fg-3); }
.ps-cp__ready > li.is-done { color: var(--ps-fg); }
.ps-cp__ready > li.is-done .ps-icon { color: var(--ps-accent-stroke); }
/* in-place text: the words are the control; empty, a quiet invitation in their place */
.ps-cp__edit { display: inline; border-radius: var(--ps-radius-small); cursor: text; text-decoration: underline dashed var(--ps-line-strong); text-underline-offset: .3em; text-decoration-thickness: 1px; }
.ps-cp__edit:hover { background: var(--ps-chip); text-decoration-color: var(--ps-accent-stroke); }
.ps-cp__edit:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-cp__edit.is-empty { color: var(--ps-fg-3); }
.ps-cp__edit.is-empty::before { content: "+ "; }
.ps-cp__field { box-sizing: border-box; width: 100%; min-width: 0; max-width: 40em; }
textarea.ps-cp__field { min-height: 64px; }
.ps-cp__kv dd, .ps-cp__kv > div { min-width: 0; }
.ps-input.ps-cp__field--hand { height: auto; padding: var(--ps-space-1) var(--ps-space-3); font: 400 var(--ps-type-human)/1.1 var(--ps-font-human); }
.ps-cp__field--chip { width: 14em; height: 30px; border-radius: var(--ps-radius-pill); }
.ps-cp__lvl { min-height: 28px; padding: 0 var(--ps-space-2); border: 0; border-radius: var(--ps-radius-small); background: var(--ps-chip); color: var(--ps-fg); font: inherit; }
.ps-cp__lvl:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 1px; }
/* the photo: Change Photo and Reposition under it */
.ps-cp__photo { display: contents; }
.ps-cp__photo-btn { position: relative; }
.ps-cp__photo-btn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ps-cp__photo-btn:focus-within { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-cp__photo.is-moving .ps-cp-av { cursor: grab; touch-action: none; box-shadow: 0 0 0 var(--cp-ring) var(--ps-page), 0 0 0 calc(var(--cp-ring) * 2) var(--ps-accent-stroke); }
/* the owner's grid: Add Work first, each piece with its check and the pin star, ghost squares inviting the first pieces */
.ps-work-grid > li { position: relative; }
.ps-work-grid > li.is-flag .ps-work { box-shadow: inset 0 0 0 2px var(--ps-color-vivid-orange); }
.ps-work-grid > li.is-dragging { opacity: .4; }
.ps-work-grid > li.is-over .ps-work { box-shadow: inset 0 0 0 3px var(--ps-accent-stroke); }
.ps-work-grid--edit li[draggable] .ps-work { cursor: grab; }
.ps-work--add { display: grid; place-content: center; justify-items: center; gap: var(--ps-space-1); border: 1.5px dashed var(--ps-line-strong); background: var(--ps-glass-strong); color: var(--ps-fg); text-align: center; }
.ps-work--add .ps-icon { width: 26px; height: 26px; }
.ps-work.ps-work--add b { font: 400 calc(var(--ps-type-section) * .8)/1 var(--ps-font-display); color: var(--ps-fg); }
.ps-work--add > span { padding-inline: var(--ps-space-2); font-size: var(--ps-type-menu); color: var(--ps-fg-2); }
.ps-work--add:hover { border-color: var(--ps-accent-stroke); }
.ps-work-ghost { display: grid; place-items: center; aspect-ratio: 1; border: 1.5px dashed var(--ps-line); background: color-mix(in srgb, var(--ps-chip) 60%, transparent); color: var(--ps-fg-3);
  font: 400 calc(var(--ps-type-section) * .8)/1 var(--ps-font-display); }
.ps-work__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ps-fg-3); }
.ps-work__st { position: absolute; left: 6px; bottom: 6px; pointer-events: none; }
/* over a photo every chip is solid (never a tint on a picture): Checking lavender (the work checker is AI), Ready lime, Fix rose, Held graphite */
.ps-work__st .ps-badge { background: var(--ps-color-graphite-solid); color: var(--ps-color-on-dark); }
.ps-work__st .ps-badge--ai { background: var(--ps-color-lavender); color: var(--ps-color-ink); }
.ps-work__st .ps-badge--accent { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-work__st .ps-badge--danger { background: var(--ps-danger); color: var(--ps-color-white); }
.ps-work .ps-work__made { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-work__pinbtn { position: absolute; top: 0; left: 0; width: var(--ps-size-touch); height: var(--ps-size-touch); display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ps-color-on-dark); }
.ps-work__pinbtn::before { content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--ps-color-ink) 55%, transparent); }
.ps-work__pinbtn .ps-icon { position: relative; width: 15px; height: 15px; }
.ps-work__pinbtn[aria-pressed="true"]::before { background: var(--ps-color-sprout); }
.ps-work__pinbtn[aria-pressed="true"] { color: var(--ps-color-ink); }
.ps-work__pinbtn:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -6px; }
.ps-work__suggest { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; flex-wrap: wrap; gap: var(--ps-space-1); }
.ps-work-grid > li.is-suggested .ps-work__made { bottom: auto; top: 7px; }
.ps-cp__addbar { display: grid; gap: var(--ps-space-2); padding: var(--ps-space-3) 0 var(--ps-space-2); }
.ps-cp__addbar > .ps-hint { margin: 0; }
.ps-cp__trades { justify-self: start; }
.ps-cp__linkform { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); align-items: center; }
.ps-cp__linkform .ps-input { flex: 1 1 260px; }
.ps-cp__linkform .ps-hint { flex-basis: 100%; margin: 0; }
.ps-cp__tabs.ps-cp__tabs--owner { position: static; min-height: 0; padding: var(--ps-space-4) 0 var(--ps-space-2); background: none; backdrop-filter: none; }
.ps-cp__main > .ps-work-editor__issues { margin-top: var(--ps-space-3); }
/* the story in the owner's hands: a moment is a button; it opens as three small fields where it was */
.ps-cp__moment { display: contents; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: text; }
.ps-cp__moment:focus-visible .ps-cp__w { outline: 2px solid var(--ps-focus); outline-offset: 2px; border-radius: var(--ps-radius-small); }
.ps-cp__moment--add .ps-cp__w, .ps-cp__moment--add .ps-cp__y { color: var(--ps-fg-3); }
.ps-cp__moment--add .ps-cp__dot { box-shadow: inset 0 0 0 2px var(--ps-line-strong); }
.ps-cp__momentform { grid-column: 1 / -1; display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--ps-space-2); align-items: start; }
.ps-cp__momentform > .ps-scan-note { grid-column: 1 / -1; }
/* the viewer as the owner's piece editor */
.ps-viewer__media.is-focal { cursor: crosshair; }
.ps-viewer__focal { position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px var(--ps-color-sprout), 0 0 0 5px color-mix(in srgb, var(--ps-color-ink) 55%, transparent); }
.ps-viewer__form { display: grid; gap: var(--ps-space-3); }
.ps-viewer__info, .ps-viewer__form, .ps-viewer__form > *, .ps-viewer__row > * { min-width: 0; }
.ps-viewer__form .ps-input { box-sizing: border-box; width: 100%; min-width: 0; }
.ps-viewer__row .ps-input { height: 42px; }
.ps-viewer__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--ps-space-2); }
.ps-viewer__acts { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-viewer__issue { display: flex; gap: var(--ps-space-2); margin: 0; padding: var(--ps-space-2) var(--ps-space-3); border-radius: var(--ps-radius-control); background: var(--ps-danger-soft); font-size: var(--ps-type-caption); }
@container cp (min-width: 760px) {
  .ps-cp__photo { display: grid; justify-items: center; gap: var(--ps-space-3); }
  .ps-cp__editbar { margin: var(--ps-space-4) 0 0; }
  .ps-input.ps-cp__field--hand { font-size: calc(var(--ps-type-human) * 1.27); }
}
@media (max-width: 600px) { .ps-cp__momentform { grid-template-columns: 80px minmax(0, 1fr) auto; } .ps-cp__momentform > :nth-child(3) { grid-column: 2 / 3; } }
/* ---------- GTM-430 (Sisi, Nov 6, 2026: "completely redesign"): the portal's own header, four plain fact columns, the square grid ----------
   The header (drawn into the host page's .ps-pagehead): the photo at the dashboards' 56px with the level's ring, the first name,
   the page's button right after it, the level and the country on the data line. The facts: plain columns, never boxes, each with
   room for many values. The grid stays the decided square grid; on day one its squares are grey with one line over them. */
.ps-cp__headav[data-level] { box-shadow: 0 0 0 2px var(--ps-page), 0 0 0 4px var(--cp-lv); }
.ps-cp__headav img { object-position: var(--fx, 50%) var(--fy, 50%); }
.ps-cp__headav.is-moving { cursor: grab; touch-action: none; }
.ps-cp__head { margin-bottom: var(--ps-space-4); }
.ps-cp__editbar + .ps-cp__dl { margin-top: var(--ps-space-5); }   /* the owner's status bar, then room before the facts */
.ps-cp__dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ps-space-5); margin: 0 0 var(--ps-space-6); }
.ps-cp__dl > div { display: flex; flex-direction: column; min-width: 0; }
.ps-cp__dl dt { margin-bottom: var(--ps-space-2); font: 500 var(--ps-type-micro)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-cp__dl .ps-cp__dt2 { margin-top: var(--ps-space-4); }
.ps-cp__dl dd { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font: 400 var(--ps-type-control)/1.5 var(--ps-font-ui); color: var(--ps-fg); }
.ps-cp__li { display: block; }
.ps-cp__li > .ps-cp__x { vertical-align: middle; margin-left: var(--ps-space-1); }
.ps-cp__langrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); }
.ps-cp__dim { color: var(--ps-fg-3); }
.ps-cp__hint { margin-top: var(--ps-space-1); font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-cp__x { display: inline-grid; place-items: center; padding: 2px; border: 0; border-radius: var(--ps-radius-small); background: none; color: var(--ps-fg-3); cursor: pointer; }
.ps-cp__x:focus-visible, .ps-cp__addlink:focus-visible, .ps-cp__addsel:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-cp__addlink, .ps-cp__addsel { margin-top: var(--ps-space-1); padding: 0; border: 0; border-bottom: 1px dashed var(--ps-line-strong); border-radius: 0; background: none; font: inherit; color: var(--ps-fg-2); cursor: pointer; }
.ps-cp__langrow .ps-cp__lvl { font: inherit; color: var(--ps-fg-3); }
@container cp (max-width: 760px) { .ps-cp__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-5) var(--ps-space-4); } }
@container cp (max-width: 560px) { .ps-cp__dl--edit { grid-template-columns: minmax(0, 1fr); } }   /* the owner's rows (a level, a remove) need the width */
@media (max-width: 768px) { .ps-pagehead__actions .ps-cp__photo-t { display: none; } }   /* phones: the camera alone beside the name */
.ps-work--ph { cursor: default; background: var(--ps-line-strong); }
.ps-cp__dayone { position: relative; }
.ps-cp__dayone .ps-work--ph { aspect-ratio: 4 / 3; }   /* day one: one short row of grey (QA Nov 7) */
.ps-cp__dayone .ps-unlock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - var(--ps-space-6))); background: var(--ps-pop-bg); box-shadow: var(--ps-pop-shadow); }
.ps-cp__rvday { display: flex; flex-direction: column; gap: var(--ps-space-4); }
.ps-cp__dayone .ps-stepcard__tag, .ps-cp__rvday .ps-stepcard__tag { margin-left: 0; align-self: flex-start; }
.ps-cp__gear, .ps-cp__team { margin: var(--ps-space-4) 0 0; font: 400 var(--ps-type-caption)/1.5 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-cp__k { margin-right: var(--ps-space-2); font: 500 var(--ps-type-micro)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
/* the post (the viewer's side): who made it, the caption, then the facts, Instagram's order */
.ps-viewer__whot { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-viewer__whot b { font: 600 var(--ps-type-control)/1.2 var(--ps-font-ui); }
.ps-viewer__whot span { font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-viewer__cap { margin: 0; font: 400 var(--ps-type-control)/1.55 var(--ps-font-ui); color: var(--ps-fg); }
.ps-viewer__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--ps-space-4); margin: 0; font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); }
.ps-viewer__facts dt { color: var(--ps-fg-3); }
.ps-viewer__facts dd { margin: 0; color: var(--ps-fg); }
/* a carousel in the post (GTM-430): which slide of how many, the dots under it; the owner's strip of slides with their checks */
.ps-viewer__sc { position: absolute; top: var(--ps-space-3); left: var(--ps-space-3); padding: 2px var(--ps-space-2); border-radius: var(--ps-radius-pill); background: color-mix(in srgb, var(--ps-color-ink) 60%, transparent);
  color: var(--ps-color-on-dark); font: 500 var(--ps-type-caption)/1.4 var(--ps-font-ui); }
.ps-viewer__dots { position: absolute; left: 0; right: 0; bottom: var(--ps-space-3); display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.ps-viewer__dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ps-color-on-dark) 50%, transparent); }
.ps-viewer__dots i.is-on { background: var(--ps-color-on-dark); }
.ps-viewer__slides { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ps-space-2); }
.ps-viewer__strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-viewer__strip li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ps-viewer__thumb { position: relative; display: grid; place-items: center; width: 56px; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: var(--ps-radius-control); background: var(--ps-chip); color: var(--ps-fg-2); cursor: pointer; }
.ps-viewer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ps-viewer__strip li[aria-current="true"] .ps-viewer__thumb { box-shadow: 0 0 0 2px var(--ps-accent-stroke); }
.ps-viewer__thumb:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-viewer__slact { display: flex; justify-content: center; gap: 2px; }
.ps-viewer__thumbst { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); }   /* a slide's check sits on its thumbnail, so the move and remove buttons line up */
/* GTM-430 (CP-12): another trade, asked for with proof: the request's line under the trades, the form's piece picker */
.ps-cp__ask { display: block; }   /* a request's line under the trades: the trade, where it stands, take it back */
.ps-cp__asknote { display: block; margin-top: 0; }
.ps-cp__askerr { color: var(--ps-danger); }
.ps-cp__askform { --ps-gap: var(--ps-space-4); }
.ps-cp__askform .ps-input { box-sizing: border-box; }   /* its padding stays inside the dialog, as in a record (Nov 5) */
.ps-cp__askpieces > legend { padding: 0; }
.ps-cp__askpieces { margin: 0; padding: 0; border: 0; min-width: 0; }
.ps-cp__askgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--ps-space-2); }
.ps-cp__askpick { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--ps-radius-control); background: var(--ps-chip); cursor: pointer; }
.ps-cp__askpick img { width: 100%; height: 100%; object-fit: cover; }
.ps-cp__askpick input { position: absolute; top: var(--ps-space-1); left: var(--ps-space-1); z-index: var(--ps-layer-sticky); width: 18px; height: 18px; margin: 0; accent-color: var(--ps-fg); }
.ps-cp__askpick:has(input:checked) { box-shadow: 0 0 0 2px var(--ps-accent-stroke); }
.ps-cp__askpick:has(input:focus-visible) { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-cp__proof { display: grid; place-items: center; width: 56px; aspect-ratio: 1; overflow: hidden; border-radius: var(--ps-radius-control); background: var(--ps-chip); color: var(--ps-fg-2); }   /* a proof piece in the admins' queue */
.ps-cp__proof img { width: 100%; height: 100%; object-fit: cover; }
.ps-cp__proof:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
/* ps-creative:end */

/* ---------- The order: a cart of job requests (GTM-256, docs/brief-generator/PLAN.md B-16, Nov 5, 2026) ----------
   .ps-order holds the order's job lines in one card: each .ps-orderline is a job (a type thumb, its title and one line of what
   it is, its price range at the end, Edit and Remove under it); .ps-orderline--follow is a follow-up job, set in under the job
   it follows with the corner mark; .is-unfinished shows a job that still needs answers. A .ps-followup under a job offers its
   follow-up (a tinted box, no border: text, then the action). .ps-order__add is "Add another job", full width. On a phone the
   price stays on the title's row and the actions wrap under the text. Tokens only. */
.ps-order { display: flex; flex-direction: column; min-width: 0; }
.ps-orderline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "thumb body price" ". actions actions";
  column-gap: var(--ps-space-3); row-gap: var(--ps-space-2); align-items: start; padding: var(--ps-space-4) 0; border-top: 1px solid var(--ps-line); min-width: 0; }
.ps-order > .ps-orderline:first-child { border-top: 0; padding-top: 0; }
.ps-order > :last-child { padding-bottom: 0; }
.ps-orderline > .ps-thumb { grid-area: thumb; }
.ps-orderline__body { grid-area: body; display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-orderline__title { font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-orderline__meta { font: 400 var(--ps-type-body)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); overflow-wrap: anywhere; }
.ps-orderline__price { grid-area: price; font: 400 var(--ps-type-title)/1.3 var(--ps-font-ui); font-variant-numeric: tabular-nums; color: var(--ps-fg); white-space: nowrap; text-align: right; }
.ps-orderline__price small { display: block; font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-orderline__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); min-width: 0; }
.ps-orderline__who { grid-column: 2 / -1; display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }   /* a follow-up: who takes it */
.ps-orderline__who > .ps-seg { max-width: 440px; }
.ps-orderline.is-unfinished .ps-orderline__meta { color: var(--ps-warn); }
.ps-orderline--follow { margin-left: var(--ps-space-6); border-top-style: dashed; }
.ps-orderline__from { display: inline-flex; align-items: center; gap: var(--ps-space-1); font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-orderline__from .ps-icon { width: 12px; height: 12px; }
.ps-followup { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ps-space-3);
  padding: var(--ps-space-3) var(--ps-space-4); border-radius: var(--ps-radius-control); background: var(--ps-chip); min-width: 0; }
.ps-followup__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.ps-followup__title { font: 500 var(--ps-type-body)/1.35 var(--ps-font-ui); color: var(--ps-fg); }
.ps-followup__desc { font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-order__add { width: 100%; min-height: 56px; justify-content: center; gap: var(--ps-space-2); background: var(--ps-chip); }
/* GTM-337 (Nov 7): in the list, Add Another Job is its last row, under a hairline, not a bar of its own */
.ps-order__add--row { min-height: var(--ps-size-touch); height: auto; margin-top: var(--ps-space-4); padding: var(--ps-space-3) var(--ps-space-1) 0; justify-content: flex-start;
  border-top: 1px solid var(--ps-line); border-radius: 0; background: transparent; box-shadow: none; }
@media (max-width: 640px) {
  .ps-orderline { column-gap: var(--ps-space-2); }
  .ps-orderline--follow { margin-left: var(--ps-space-4); }
  .ps-followup, .ps-orderline__who { grid-column: 1 / -1; }
  .ps-followup > .ps-btn { flex: 1 1 100%; justify-content: center; }
}
/* Your Projects: the jobs sent in one order sit together under its label, on a thin rail */
.ps-ordergroup { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-ordergroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ps-space-2); }
.ps-ordergroup__jobs { display: flex; flex-direction: column; gap: var(--ps-space-4); padding-left: var(--ps-space-3); box-shadow: inset 2px 0 0 var(--ps-line); min-width: 0; }
/* A wizard beside its element card (the Brief Generator's brief as a periodic-table element, Oct 12): .ps-wizard-wrap holds
   the wizard and an .ps-element-card (the Game's card) in its own column, sticky beside it (clear of the page's top-right buttons); below 960px the card sits above
   the wizard as the slim bar and scrolls with the page (the wizard's own bar is the sticky one). .is-done: the card's column
   goes and the finish screen (.ps-game-finish with the tilted, finished element) gets the room. */
.ps-wizard-wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 280px); gap: var(--ps-space-6); align-items: start; }
.ps-wizard-wrap.is-done { grid-template-columns: minmax(0, 1fr); }
.ps-wizard-wrap.is-done > .ps-element-card { display: none; }
.ps-wizard-wrap.is-done > .ps-wizard { --ps-wizard-w: 820px; }
.ps-wizard-wrap .ps-game-finish { grid-template-columns: minmax(0, 1fr) minmax(180px, 240px); }
@media (max-width: 960px) {
  .ps-wizard-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-3); }
  .ps-wizard-wrap > .ps-element-card { position: relative; top: auto; }
  .ps-wizard-wrap .ps-game-finish { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The Brief Generator on a wide screen (GTM-337, Nov 7, Sisi: "designed for the phone, wastes the desktop") ----------
   Two steps share a page, one above the other at full width (side by side until Sisi's evening review, Nov 7): PS.wizard's
   span option sets .is-paired and the page puts the first step's key in [data-pair] (the services as tiles across the top with
   the chosen service's questions under them, then Message and Files, Timing and Who; Review alone). The brief's element rides in the quote bar (.ps-quotebar__brief with a .ps-element--mini) instead of a big card
   beside the wizard (.ps-wizard-wrap--bar). Your Order (.ps-order-layout): the jobs, and on a desktop the total with Send
   Order beside them (.ps-order-total); the quote bar steps aside there (.is-order) so the total shows once. On a phone the
   total stays in the quote bar and .ps-order-total keeps only its notes (the hold line, the credits switch). */
.ps-wizard.is-paired, .ps-wizard-wrap > .ps-wizard.is-paired { --ps-wizard-w: 1120px; }
.ps-wizard.is-paired .ps-wizard__body { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--ps-space-7); align-items: start; }   /* one above the other, full width (Sisi, Nov 7 evening: the services back on top, not on the left) */
.ps-wizard.is-paired .ps-wizard__body > :not(.ps-wizard__step) { grid-column: 1 / -1; }
.ps-wizard-wrap--bar { grid-template-columns: minmax(0, 1fr); }
.ps-quotebar__brief { flex: 0 1 300px; min-width: 0; display: flex; align-items: center; gap: var(--ps-space-3); padding-right: var(--ps-space-4); border-right: 1px solid var(--ps-line); }
.ps-quotebar__brief-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-quotebar__brief-text > strong { font: 500 var(--ps-type-body)/1.3 var(--ps-font-ui); color: var(--ps-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-quotebar__brief-text > span { font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-wizard-wrap.is-done .ps-quotebar__brief { display: none; }
.ps-element--mini { width: 52px; flex: none; padding: 0; border-radius: var(--ps-radius-control); display: grid; place-items: center; grid-template-rows: none; }
.ps-element--mini > :not(.ps-element__sym) { display: none; }
@media (max-width: 640px) {
  .ps-quotebar__brief { flex: none; padding-right: 0; border-right: 0; }
  .ps-quotebar__brief-text { display: none; }
  .ps-element--mini { width: 44px; }
}
.ps-order-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-5); align-items: start; }
.ps-order-layout__main { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; }
.ps-order-total { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-order-total__desk { display: none; }
@media (min-width: 1024px) {
  .ps-wizard.is-order, .ps-wizard-wrap > .ps-wizard.is-order { --ps-wizard-w: 1120px; }
  .ps-order-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--ps-space-6); }
  .ps-order-total { position: sticky; top: calc(64px + var(--ps-space-5)); gap: var(--ps-space-3); padding: var(--ps-space-5); border-radius: var(--ps-radius-card);
    background: var(--ps-bar); box-shadow: var(--ps-bar-shadow); }
  .ps-order-total > .ps-order-total__desk { display: block; }
  .ps-order-total > .ps-btn.ps-order-total__desk { display: inline-flex; width: 100%; margin-top: var(--ps-space-1); }
  .ps-wizard.is-order .ps-quotebar { display: none; }
  .ps-orderline { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "thumb body price actions"; align-items: center; }
  .ps-orderline__actions { justify-content: flex-end; }
}

/* ---------- Question block, step groups, follow-ups (B-13, Oct 13, the Brief Generator critique) ----------
   .ps-question is one question: the label row (.ps-question__head: the label 15px medium in the text color, an optional faint
   marker word such as "optional" or "pick any", the tip button, and .ps-question__end with a mark such as Suggested), then the
   answer, its hint, and the follow-ups it opens (.ps-question__follow: inset under it with a 2px rule, no hairline; .is-new
   eases in). Questions in a .ps-step-group are split by a hairline with --ps-space-5 above and below (none on the first);
   .ps-step-group__label is the group's caption. .ps-question--error marks its own answer, not its follow-ups'. */
.ps-question { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; }
.ps-question__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-1) var(--ps-space-2); min-width: 0; }
.ps-question__label { font: 500 var(--ps-type-question-label)/1.3 var(--ps-font-ui); color: var(--ps-fg); overflow-wrap: anywhere; }   /* 17px over 13px options (GTM-337, Nov 7) */
.ps-question__follow .ps-question__label { font-size: var(--ps-type-title); color: var(--ps-fg-2); }   /* a follow-up's question sits between the two */
.ps-question__marker { font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-question__head > .ps-tip-btn { margin: 0; }
.ps-question__end { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); margin-left: auto; min-width: 0; }
.ps-question__end > output { font: 500 var(--ps-type-control)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums; color: var(--ps-fg); }
.ps-question--error > :is(.ps-input, .ps-tags) { box-shadow: inset 0 0 0 1.5px var(--ps-danger); }
.ps-question--error > .ps-hint { color: var(--ps-danger); }
.ps-question__follow { display: flex; flex-direction: column; gap: var(--ps-space-5); margin-top: var(--ps-space-1); padding-left: var(--ps-space-4);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ps-fg-3) 35%, transparent); }
.ps-question__follow > .ps-question { gap: var(--ps-space-2); }
@keyframes ps-follow-in { from { opacity: 0; transform: translateY(-4px); } }
.ps-question__follow.is-new { animation: ps-follow-in 220ms var(--ps-ease-out) both; }
.ps-step-group { display: flex; flex-direction: column; gap: var(--ps-space-6); min-width: 0; }
.ps-step-group + .ps-step-group { margin-top: calc(var(--ps-space-section) - var(--ps-space-6)); padding-top: var(--ps-space-section-start); border-top: 1px solid var(--ps-line-strong); }   /* the groups are the sections, in the step's .ps-stack.ps-gap-6 (Oct 31); the questions in one keep their hairline */
@media (max-width: 600px) { .ps-step-group + .ps-step-group { margin-top: calc(var(--ps-space-section-phone) - var(--ps-space-6)); padding-top: var(--ps-space-4); } }
.ps-step-group__label { margin: 0; font: 500 var(--ps-type-label)/1.4 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-step-group__label + * { margin-top: calc(-1 * var(--ps-space-2)); }
.ps-step-group > .ps-question + .ps-question { padding-top: var(--ps-space-6); border-top: 1px solid var(--ps-line-strong); }
/* Chips in a question (B-13): .ps-chips--fit lets a long option label wrap inside its chip instead of running past a phone's
   edge; .ps-chips--multi chips show a check when on (.ps-chip__check, pick many) so they read differently from pick-one;
   .ps-chip--more is the long list's More Options toggle (aria-expanded); a Suggested .ps-badge may sit at a chip's end. */
.ps-chips--fit .ps-chip { max-width: 100%; height: auto; min-height: 30px; padding-block: 6px; white-space: normal; line-height: 1.25; text-align: left; }
.ps-chip__check { display: none; }
.ps-chip[aria-pressed="true"] .ps-chip__check { display: inline-grid; }
.ps-chip > .ps-badge { margin-right: calc(-1 * var(--ps-space-1)); }
.ps-chip[aria-pressed="true"] > .ps-badge { background: color-mix(in srgb, var(--ps-color-ink) 10%, transparent); color: var(--ps-color-ink); }
.ps-chip--more { background: transparent; box-shadow: inset 0 0 0 1px var(--ps-line); color: var(--ps-fg-2); }
.ps-chip--more .ps-icon { transition: transform var(--ps-dur-base) var(--ps-ease-out); }
.ps-chip--more[aria-expanded="true"] .ps-icon { transform: rotate(180deg); }
/* A segmented control whose option labels may be long (B-13: pick one of up to 4 in a form): labels wrap, centered */
.ps-seg--wrap button { white-space: normal; line-height: 1.2; text-align: center; padding-block: var(--ps-space-1); }
/* Touch (B-13): on a phone-width screen chips, the compact chips' hit area and segments are 44px like on a touch screen */
@media (max-width: 640px) {
  .ps-chip { height: var(--ps-size-touch); }
  .ps-chips--fit .ps-chip { height: auto; min-height: var(--ps-size-touch); }
  .ps-chips--sm .ps-chip::after { content: ""; position: absolute; inset: -11px -2px; }
  .ps-seg button { min-height: var(--ps-size-touch); }
}
@media (pointer: coarse) { .ps-chips--fit .ps-chip { min-height: var(--ps-size-touch); } }
/* Focus flow (B-13): a page that is one task from start to finish (the Brief Generator) puts body.ps-focus-flow: a wizard's
   quote bar takes the bottom.
   A flush wizard's bar gets a solid backdrop, edge to edge on a phone, clear of the menu button. */
.ps-wizard--flush .ps-wizard__bar { background: var(--ps-pop-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 768px) {
  body.ps-focus-flow #portal-body { padding-bottom: 0; }
  /* B-13 (4) on the Oct 27 tab bar too: the quote bar takes the bottom, so its Continue, Add to Order and Send Order are never
     under the tab bar (B-16, Nov 5: the order is sent from the phone) */
  body.ps-focus-flow .ps-tabbar { display: none; }
  body.ps-focus-flow .ps-quotebar:not(.ps-quotebar--inline) { bottom: calc(var(--ps-space-4) + env(safe-area-inset-bottom, 0px)); }
  .ps-wizard--flush .ps-wizard__bar { margin-inline: calc(-1 * var(--ps-space-4)); padding-inline: var(--ps-space-4); border-radius: 0; }
}
/* A flush wizard uses its column's whole width (GTM-337, Nov 7, Sisi: the 1120px cap left gaps at each side) and, on a
   desktop, its bar is an island: the same top surface as the quote bar at the bottom (--ps-bar, rounded on every corner), so
   the two bars frame the steps instead of the bar reading as the top of a card that never comes ("broken"). It sticks just
   below the page's top-right buttons (as .ps-order-total), never under them. On a phone the bar stays the solid strip edge to edge. */
.ps-wizard.ps-wizard--flush, .ps-wizard-wrap > .ps-wizard.ps-wizard--flush { --ps-wizard-w: 100%; }
.ps-wizard--flush .ps-quotebar:not(.ps-quotebar--inline) { width: 100%; }
@media (min-width: 769px) {
  .ps-wizard--flush .ps-wizard__bar { top: calc(64px + var(--ps-space-4)); padding: var(--ps-space-4) var(--ps-space-5); border-radius: var(--ps-radius-card);
    background: var(--ps-bar); box-shadow: var(--ps-bar-shadow); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-question__follow.is-new { animation: ps-step-fade 160ms ease both; }
  .ps-chip--more .ps-icon { transition: none; }
}

/* ---------- Profile facts (GTM-227, Oct 13, 2026; first: the F2 Profile on internal/client.html) ----------
   One section of facts in a card: .ps-card.ps-facts with its .ps-card__head (title, and a count in __meta: "4 of 6 set"),
   then one .ps-fact row per fact: __label, __value (.is-empty: "Not set"), an optional __act (the Edit button) and an
   optional __meta under the value (where a fact came from and when: step 2). Editing in place: the row takes .is-editing
   and shows its __form (fields, then Save and Cancel) across the whole row; the value and the button step aside.
   On phones the label and the button share the first line and the value runs under them. */
.ps-facts { gap: 0; }
.ps-facts__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ps-fact { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; column-gap: var(--ps-space-4); row-gap: var(--ps-space-1);
  align-items: start; padding: var(--ps-space-3) 0; border-top: 1px solid var(--ps-line); min-width: 0; }
.ps-fact:first-child { border-top: 0; padding-top: 0; }
.ps-fact:last-child { padding-bottom: 0; }
.ps-fact__label { grid-column: 1; grid-row: 1; padding-top: 6px; color: var(--ps-fg-2); font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); }
.ps-fact__value { grid-column: 2; grid-row: 1; padding-top: 4px; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; color: var(--ps-fg); }
.ps-fact__value.is-empty { color: var(--ps-fg-3); }
.ps-fact__value .ps-tag, .ps-fact__value .ps-badge { white-space: nowrap; }
.ps-fact__meta { grid-column: 2; color: var(--ps-fg-3); font-size: var(--ps-type-caption); }
.ps-fact__act { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: var(--ps-space-1); }
.ps-fact__form { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--ps-space-2); padding-top: var(--ps-space-2); }
.ps-fact__form[hidden] { display: none; }
.ps-fact__form .ps-grid { --ps-gap: var(--ps-space-2); }   /* several fields in one fact (city and state, a competitor's three) */
.ps-fact__form .ps-grid > *, .ps-fact__form .ps-input { min-width: 0; }
.ps-fact__form .ps-input { width: 100%; }
.ps-fact.is-editing .ps-fact__value, .ps-fact.is-editing .ps-fact__act, .ps-fact.is-editing .ps-fact__meta { display: none; }
.ps-fact[aria-busy="true"] .ps-fact__form { pointer-events: none; }
@media (max-width: 600px) {
  .ps-fact { grid-template-columns: minmax(0, 1fr) auto; }
  .ps-fact__label { grid-column: 1; }
  .ps-fact__act { grid-column: 2; }
  .ps-fact__value, .ps-fact__meta { grid-column: 1 / -1; grid-row: auto; padding-top: 0; }
}

/* ======================================================================================================
   GTM-310 BR-20 ("Add to the Brain", the quick capture on internal/brain.html; Natalia, Oct 14). Examples on
   internal/design-system.html (#ds-capture).
   ====================================================================================================== */

/* ---------- Sheet modal: PS.modal.open({ size: 'sheet' }). A 640px dialog on a desktop; at phone width it fills the screen,
   the body scrolls between a fixed head and fixed actions, and both clear the notch and the home indicator. ---------- */
.ps-modal--sheet { --ps-modal-w: 640px; }
@media (max-width: 768px) {
  .ps-modal.ps-modal--sheet { padding: 0; place-items: stretch; }
  .ps-modal--sheet .ps-modal__dialog { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; transform: translateY(24px); }
  .ps-modal--sheet.is-open .ps-modal__dialog { transform: none; }
  .ps-modal--sheet .ps-modal__head { padding-top: calc(var(--ps-space-4) + env(safe-area-inset-top, 0px)); }
  .ps-modal--sheet .ps-modal__actions { padding-bottom: calc(var(--ps-space-4) + env(safe-area-inset-bottom, 0px)); }
  .ps-modal--sheet .ps-modal__actions > .ps-btn { flex: 1 1 auto; min-height: var(--ps-size-touch); }
}
@media (prefers-reduced-motion: reduce) { .ps-modal--sheet .ps-modal__dialog, .ps-modal--sheet.is-open .ps-modal__dialog { transform: none; transition: none; } }

/* ---------- Side sheet: PS.modal.open({ size: 'side' }) (GTM-380, the Book's chapter editors, Oct 22). On a desktop a tall
   panel docked to the right that slides in (the page stays in view beside it); at phone width it fills the screen like the
   sheet modal. The body scrolls between a fixed head and fixed actions (Cancel, Save). ---------- */
.ps-modal--side { --ps-modal-w: 680px; place-items: stretch end; grid-template-rows: minmax(0, 1fr); padding: var(--ps-space-3); }   /* the row is the screen's height, never the form's: the body scrolls inside */
.ps-modal--side .ps-modal__dialog { height: 100%; max-height: none; transform: translateX(calc(100% + var(--ps-space-3))); transition: transform var(--ps-dur-drawer) var(--ps-ease-drawer); }
.ps-modal--side.is-open .ps-modal__dialog { transform: none; }
@media (max-width: 768px) {
  .ps-modal.ps-modal--side { padding: 0; place-items: stretch; }
  .ps-modal--side .ps-modal__dialog { width: 100%; max-width: none; height: 100vh; height: 100dvh; border-radius: 0; transform: translateY(24px); }
  .ps-modal--side.is-open .ps-modal__dialog { transform: none; }
  .ps-modal--side .ps-modal__head { padding-top: calc(var(--ps-space-4) + env(safe-area-inset-top, 0px)); }
  .ps-modal--side .ps-modal__actions { padding-bottom: calc(var(--ps-space-4) + env(safe-area-inset-bottom, 0px)); }
  .ps-modal--side .ps-modal__actions > .ps-btn { flex: 1 1 auto; min-height: var(--ps-size-touch); }
}
@media (prefers-reduced-motion: reduce) { .ps-modal--side .ps-modal__dialog, .ps-modal--side.is-open .ps-modal__dialog { transform: none; transition: none; } }
/* A chapter editor inside the side sheet (assets/brand-book-editors.js): groups of fields one under another, each group a
   label-caps title, its fields, and the group's own add button. Rows of several fields are a .ps-table--cards (cards on a phone). */
.ps-bookedit { display: flex; flex-direction: column; gap: 0; color: var(--ps-fg); }   /* its groups are sections: .ps-sections spacing and divider (Oct 31) */
.ps-bookedit *, .ps-bookedit *::before, .ps-bookedit *::after { box-sizing: border-box; }
.ps-bookedit__group { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-bookedit__group > .ps-labelcaps { margin: 0; color: var(--ps-fg-2); }
.ps-bookedit__group + .ps-bookedit__group, .ps-bookedit > form + .ps-bookedit__group { margin-top: var(--ps-space-section); padding-top: var(--ps-space-section-start); border-top: 1px solid var(--ps-line-strong); }
@media (max-width: 600px) { .ps-bookedit__group + .ps-bookedit__group, .ps-bookedit > form + .ps-bookedit__group { margin-top: var(--ps-space-section-phone); padding-top: var(--ps-space-4); } }
.ps-bookedit__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--ps-space-3); }
.ps-bookedit .ps-twrap { max-height: none; }
.ps-bookedit .ps-colorwell__swatch { width: var(--ps-size-control); height: var(--ps-size-control); border-radius: var(--ps-radius-control); }
.ps-bookedit .ps-table input.ps-input { min-width: calc(var(--ps-size-touch) * 1.6); }
.ps-bookedit .ps-table input.ps-input[type="number"] { min-width: calc(var(--ps-size-touch) * 1.4); }
.ps-bookedit .ps-media__thumb--contain > img { object-fit: contain; }
/* Oct 28 (Sisi): the editor reads in order, section, then its content, then the actions. A section's name is a heading, not a
 * small label; a typeface that is set is its name, large, in its own face (.ps-fontset); Typesetting & Hierarchy is one row per
 * role with its specimen beside its controls (.ps-typerow). The roomy side sheet (className 'ps-modal--roomy') is wider on a desktop. */
@media (min-width: 1100px) { .ps-modal--side.ps-modal--roomy { --ps-modal-w: 920px; } }
.ps-bookedit__group > .ps-bookedit__head { margin: 0; font: var(--ps-weight-medium) var(--ps-type-lede)/1.25 var(--ps-font-ui); color: var(--ps-fg); }
.ps-bookedit__group > .ps-bookedit__head + .ps-bookedit__sub { margin: calc(var(--ps-space-2) * -1) 0 0; }
.ps-fontset { gap: var(--ps-space-3); }
.ps-fontset__name { margin: 0; font: var(--ps-brand-weight, 400) var(--ps-type-section)/1.15 var(--ps-brand-font, var(--ps-font-ui)); color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-fontset__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.ps-fontset__meta > span:not(.ps-badge) + span:not(.ps-badge)::before { content: '·'; margin-right: var(--ps-space-2); }
.ps-fontset__panel, .ps-fontset__change { padding: var(--ps-space-4); border: 1px solid var(--ps-line); border-radius: var(--ps-radius-card); }
.ps-fontset__files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ps-fontset__file { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--ps-space-3); padding: var(--ps-space-3) 0; }
.ps-fontset__file + .ps-fontset__file { border-top: 1px solid var(--ps-line); }
.ps-typerows { display: flex; flex-direction: column; }
.ps-typerow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: center; gap: var(--ps-space-5); padding: var(--ps-space-4) 0; }
.ps-typerow + .ps-typerow { border-top: 1px solid var(--ps-line); }
.ps-typerow__specimen { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-typerow__specimen > .ps-book__specimen { overflow: hidden; text-overflow: ellipsis; }
.ps-typerow__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-2); align-items: end; }
.ps-typerow__controls > .ps-typerow__font { grid-column: 1 / -1; }
.ps-typerow__controls > .ps-typerow__case { grid-column: 1 / 3; }
.ps-typerow__controls > .ps-typerow__italic { align-self: center; padding-top: var(--ps-space-4); }
.ps-typerow__controls .ps-field { gap: var(--ps-space-1); }
.ps-typerow__controls .ps-input { min-width: 0; width: 100%; }
@media (max-width: 720px) {
  .ps-typerow { grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-3); }
  .ps-fontset__file { grid-template-columns: minmax(0, 1fr); }
  .ps-fontset__name { font-size: var(--ps-type-section); }
}

/* ---------- A thumbnail's remove button (.ps-thumb__x inside a .ps-thumb holding an <img>): a 44px target around a small disc ---------- */
.ps-thumb__x { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ps-pop-bg); color: var(--ps-fg); box-shadow: var(--ps-pop-shadow); z-index: 1; }
.ps-thumb__x::before { content: ""; position: absolute; inset: -8px; }
.ps-thumb__x:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }

/* ---------- Recorder: a recording's state and time (.ps-rec; .is-on while recording, the dot pulses) ---------- */
.ps-rec { display: inline-flex; align-items: center; gap: var(--ps-space-2); font-variant-numeric: tabular-nums; color: var(--ps-fg-2); }
.ps-rec__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ps-fg-3); }
.ps-rec.is-on { color: var(--ps-fg); }
.ps-rec.is-on .ps-rec__dot { background: var(--ps-danger); animation: ps-rec-pulse 1.2s var(--ps-ease-in-out) infinite; }
@keyframes ps-rec-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ps-rec.is-on .ps-rec__dot { animation: none; } }

/* ---------- Progress, indeterminate (PS.progress(el, null)): the line breathes while the length is unknown (an agent reading) ---------- */
.ps-progress.is-busy > i { animation: ps-progress-busy 1.4s var(--ps-ease-in-out) infinite; }
@keyframes ps-progress-busy { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ps-progress.is-busy > i { animation: none; } }

/* ---------- The Brand game's pieces (GTM-363 a5, Oct 14; the approved prototype "Brand: the game"): the client's OWN colors and
   type shown as data (the Brand Guidelines exception, design/README.md). The page script sets only custom properties through
   the CSSOM, never a property directly: --ps-brand-bg / --ps-brand-fg (a ground and the text that reads on it, checked by the
   house rules on the server), --ps-brand-font / --ps-brand-weight (a typeface of the kit) and --ps-brand-size (a type style's
   size, px), --ps-series on a swatch, --ps-tone-at (0-100) on a tone dot.
   .ps-brandtile: a tile painted in a brand color: --wall (a competitor on the wall), --direction (a direction to pick), --role
   (a color role with its hex and contrast), --post / --story / --ad (the reveal's previews, 4:5), --photo (an AI or own photo,
   4:3, the image covers it), --logo (the text logo sample). .ps-brandfont sets a run of text in the kit's typeface.
   .ps-inset: the inset panel inside a game screen (the import box, the scale, the tone). .ps-tints: a role's tonal steps, one row whatever their count.
   .ps-typescale: a type scale, one row per style (name and spec, then a sample). .ps-tone: the four tone dimensions, a dot each. */
.ps-brandtile { --ps-brand-bg: var(--ps-chip); --ps-brand-fg: var(--ps-fg); display: flex; flex-direction: column; justify-content: space-between; gap: var(--ps-space-3);
  min-width: 0; padding: var(--ps-space-4); border-radius: var(--ps-radius-control); background: var(--ps-brand-bg); color: var(--ps-brand-fg);
  box-shadow: inset 0 0 0 1px var(--ps-line); overflow-wrap: anywhere; }
.ps-brandtile--wall { align-items: center; justify-content: center; min-height: 64px; padding: var(--ps-space-3); text-align: center; font: var(--ps-weight-medium) var(--ps-type-title)/1.2 var(--ps-font-ui); }
.ps-brandtile--direction { min-height: 150px; }
.ps-brandtile--role { min-height: 96px; gap: var(--ps-space-1); padding: var(--ps-space-3); font-size: var(--ps-type-caption); }
.ps-brandtile--role > b { font: 400 var(--ps-type-section)/1 var(--ps-font-display); }
.ps-brandtile--post, .ps-brandtile--story, .ps-brandtile--ad { justify-content: flex-end; aspect-ratio: 4 / 5; }
.ps-brandtile--photo { position: relative; justify-content: flex-end; aspect-ratio: 4 / 3; padding: var(--ps-space-3); overflow: hidden; font-size: var(--ps-type-caption); }
.ps-brandtile--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-brandtile--photo > :not(img) { position: relative; }
.ps-brandtile--logo { display: inline-flex; align-self: flex-start; padding: var(--ps-space-3) var(--ps-space-5); }
.ps-brandtile__dots { display: flex; gap: var(--ps-space-1); }
.ps-brandtile__dots .ps-swatch { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--ps-color-white) 70%, transparent); }
.ps-brandfont { font-family: var(--ps-brand-font, var(--ps-font-display)); font-weight: var(--ps-brand-weight, 400); line-height: 1.1; }
.ps-brandfont--lg { font-size: var(--ps-type-section); }
.ps-brandfont--md { font-size: var(--ps-type-lede); }
.ps-brandfont--body { font-size: var(--ps-type-title); line-height: 1.5; }
.ps-inset { display: grid; gap: var(--ps-space-2); padding: var(--ps-space-4); border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-tints { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.ps-tints > i { height: 18px; border-radius: 5px; background: var(--ps-series, var(--ps-chip)); }
.ps-typescale { display: grid; gap: var(--ps-space-2); }
.ps-typescale__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--ps-space-3); align-items: baseline; padding-top: var(--ps-space-2); box-shadow: inset 0 1px 0 var(--ps-line); }
.ps-typescale__row > span:first-child { color: var(--ps-fg-3); font-size: var(--ps-type-caption); font-variant-numeric: tabular-nums; }
.ps-typescale__row > .ps-brandfont { font-size: min(var(--ps-brand-size, var(--ps-type-title)), var(--ps-type-display)); overflow-wrap: anywhere; }
.ps-tone { display: grid; gap: var(--ps-space-2); }
.ps-tone__row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px; gap: var(--ps-space-3); align-items: center; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-tone__row > span:first-child { text-align: right; }
.ps-tone__track { position: relative; height: 6px; border-radius: 6px; background: var(--ps-chip); }
.ps-tone__track > i { position: absolute; top: -4px; left: calc(var(--ps-tone-at, 50) * 1% - 7px); width: 14px; height: 14px; border-radius: 50%;
  background: var(--ps-color-sprout-strong); box-shadow: 0 0 0 2px var(--ps-page); transition: left 400ms var(--ps-ease-out); }
@media (max-width: 600px) { .ps-typescale__row { grid-template-columns: minmax(0, 1fr); } .ps-tone__row { grid-template-columns: 80px minmax(0, 1fr) 80px; } }
@media (prefers-reduced-motion: reduce) { .ps-tone__track > i { transition: none; } }

/* ---------- The Brand Guidelines page (GTM-363 F3b, Oct 15; the approved prototype's third screen, "Guidelines"): six numbered sections on
   glass. The client's own colors and type are data, set as custom properties through the CSSOM like the Brand game's pieces
   (--ps-brand-bg, --ps-brand-fg, --ps-brand-font, --ps-brand-weight, --ps-brand-size; --ps-series and --ps-share on a proportion
   segment). .ps-guide: a section (its head: a number and a title in the display face, then Edit or "From your kit, by rule").
   .ps-weare: the "We are / We are not" table. .ps-proportion: the color proportion bar, one segment per role at its share.
   .ps-rulelist: rules on hairlines. .ps-brandtile--logouse: a logo-use tile (--clear: the clear space as a dashed line; --never: a
   don't, faded; --stretch: the logo stretched). .ps-brandfont--caps: a label style in capitals. .ps-chip--strike: a word to avoid. */
.ps-guide { display: flex; flex-direction: column; gap: var(--ps-space-4); padding: var(--ps-space-5); border-radius: var(--ps-radius-card); min-width: 0; }
.ps-guide__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ps-space-3); min-width: 0; }
.ps-guide__title { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
.ps-guide__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-5); }
.ps-guide__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-guide__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ps-space-3); }
@media (max-width: 860px) { .ps-guide__cols, .ps-guide__cols--3 { grid-template-columns: minmax(0, 1fr); } .ps-guide__cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ps-weare { display: grid; align-content: start; min-width: 0; }
.ps-weare__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-3); padding: var(--ps-space-2) 0; box-shadow: inset 0 1px 0 var(--ps-line); font-size: var(--ps-type-body); }
.ps-weare__row > :first-child { font-weight: var(--ps-weight-medium); }
.ps-weare__row > :last-child { color: var(--ps-fg-2); }
.ps-weare__row--head { box-shadow: none; padding-top: 0; font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.ps-weare__row--head > :first-child { font-weight: 400; }
.ps-proportion { display: flex; height: 44px; border-radius: var(--ps-radius-control); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-proportion > i { flex: var(--ps-share, 1) 1 0; min-width: 4px; background: var(--ps-series, var(--ps-chip)); }
.ps-rulelist { display: grid; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-rulelist > li { padding-top: var(--ps-space-2); box-shadow: inset 0 1px 0 var(--ps-line); font-size: var(--ps-type-body); overflow-wrap: anywhere; }
.ps-brandtile--logouse { align-items: center; justify-content: center; min-height: 110px; text-align: center; }
.ps-brandtile--logouse > img { max-width: 70%; max-height: 64px; object-fit: contain; }
.ps-brandtile--clear > :first-child { outline: 1px dashed currentColor; outline-offset: 14px; }
.ps-brandtile--never { opacity: .55; }
.ps-brandtile--stretch > :first-child { transform: scaleX(1.4); }
.ps-brandfont--caps { text-transform: uppercase; letter-spacing: var(--ps-tracking-label); }
.ps-chip--strike { text-decoration: line-through; }

/* ---------- The website on phones (GTM-331, Sisi, Oct 15) ----------
   1. Nothing wider than the screen can be dragged into view. On iPhone the page could be dragged sideways (the closed slide-out
      menu waits off-screen to the right, and fixed layers stretched with it). overflow-x: clip cuts it without making the page a
      scroll container, so sticky parts keep working; older browsers without clip get hidden on body.
   2. Phones read the page upright. A web page can't lock the screen's rotation (only an installed app can), so a phone turned
      sideways sees .ps-rotate-notice, asking to turn it back, instead of a squeezed page. Tablets and computers are never
      affected (a coarse pointer and a short landscape screen). */
:where(html.ps-story), :where(html.ps-story) body{ overflow-x: clip; }
@supports not (overflow: clip){ :where(html.ps-story) body{ overflow-x: hidden; } }
.ps-rotate-notice{ display: none; }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse){
  .ps-rotate-notice{ display: grid; position: fixed; inset: 0; z-index: var(--ps-layer-tooltip); place-content: center; justify-items: center; gap: var(--ps-space-3);
    padding: var(--ps-space-5); background: var(--ps-page); color: var(--ps-fg); text-align: center; }
  .ps-rotate-notice .ps-icon{ width: 40px; height: 40px; color: var(--ps-color-sprout); }
  .ps-rotate-notice__title{ font-family: var(--ps-font-display); font-weight: 400; font-size: 32px; line-height: 1; }
  .ps-rotate-notice__text{ color: var(--ps-fg-2); max-width: 32ch; }
  :where(html.ps-story) body:has(.ps-rotate-notice){ overflow: hidden; }
}
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) and (prefers-reduced-motion: no-preference){
  .ps-rotate-notice .ps-icon{ animation: ps-rotate-hint 1.6s ease-in-out infinite; }
}
@keyframes ps-rotate-hint{ 0%, 30%{ transform: rotate(0deg); } 60%, 100%{ transform: rotate(-90deg); } }
/* 3. The opening statement has no card. Its wrapper is called .ps-why, the same name as the AI field's "Why this works" line
      (lavender background, rounded), which drew a purple box around the paragraph. The statement sits on the page, as on
      computers. (Sisi, Oct 15) */
:where(html.ps-story) .ps-why-screen .ps-why{ background: none; border-radius: 0; margin-top: 0; }
/* 4. The cycle on phones: the centre ("Your brand's regenerative brain") and the five steps about a fifth larger, so they read
      at arm's length. The ring takes the card's full width and the card's side padding narrows to make room; the centre gets a
      wider box so the larger words don't break further. (Sisi, Oct 15) */
@media (max-width: 560px){
  .ps-loop{ padding-inline: var(--ps-space-2); }
  .ps-loop .ps-loop-ring{ width: 100%; }
  .ps-loop .ps-node{ width: min(116px, 34cqw); gap: 4px; padding: var(--ps-space-2) var(--ps-space-1) calc(var(--ps-space-2) + 2px); font-size: calc(var(--story-micro) * 1.2); line-height: 1.2; }
  .ps-loop .ps-node .ps-num{ font-size: calc(var(--ps-type-title) * 1.25); line-height: 1; }
  .ps-loop .ps-ring-center{ inset: 24%; }
  .ps-loop .ps-ring-word{ font-size: calc(var(--ps-type-title) * 1.2); }
  .ps-loop .ps-loop-ring .ps-ring-hand{ font-size: min(calc(var(--story-hand) * 1.2), 8.5cqw); }
}

/* ---------- Elements (GTM-366 F3c, docs/brand/ELEMENTS.md): the New card, the photo guide, the strength meter, a chip with a picture ----------
   .ps-media--add: the "New …" card that leads a media grid (a dashed frame with a plus; the whole card is its button).
   .ps-shots > .ps-shot: the photo guide, one shot per row: __fig (the line figure from PS.silhouette, or the photo once the shot
   is filled), __body (__title numbered by the list, __meta), __end (the shot's action). .is-filled: a photo carries the shot;
   .is-required: the shot an element needs. .ps-silhouette: the figure, stroked in currentColor.
   .ps-strength: Front only → Good → Great, three segments (data-level 0 to 3) and the word after them.
   .ps-chip__img: a round picture at the start of a chip (an element's main image before its @handle). */
.ps-media--add > .ps-media__thumb { background: transparent; border: 1.5px dashed var(--ps-fg-3); color: var(--ps-fg-2); }
.ps-media--add > .ps-media__thumb .ps-icon { width: var(--ps-size-icon-lg); height: var(--ps-size-icon-lg); }
.ps-media--add:hover > .ps-media__thumb { border-color: var(--ps-fg); color: var(--ps-fg); }
.ps-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; counter-reset: ps-shot; }
.ps-shot { counter-increment: ps-shot; display: flex; align-items: center; gap: var(--ps-space-3); min-width: 0; padding: var(--ps-space-2) var(--ps-space-3) var(--ps-space-2) var(--ps-space-2);
  border-radius: var(--ps-radius-control); background: var(--ps-chip); }
.ps-shot__fig { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 68px; overflow: hidden; border-radius: var(--ps-radius-small);
  background: var(--ps-pop-bg); color: var(--ps-fg-3); }
.ps-shot__fig > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-shot__fig > .ps-icon { width: var(--ps-size-icon-lg); height: var(--ps-size-icon-lg); }
.ps-shot__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-shot__title { font: 500 var(--ps-type-control)/1.3 var(--ps-font-ui); color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-shot__title::before { content: counter(ps-shot) ". "; color: var(--ps-fg-3); font-variant-numeric: tabular-nums; }
.ps-shot__meta { font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-3); overflow-wrap: anywhere; }
.ps-shot__end { flex: none; display: flex; align-items: center; gap: var(--ps-space-1); }
.ps-shot.is-required .ps-shot__fig { box-shadow: inset 0 0 0 1.5px var(--ps-fg-3); }
.ps-shot.is-filled { box-shadow: inset 0 0 0 1.5px var(--ps-color-sprout-strong); }
.ps-shot.is-filled .ps-shot__fig { box-shadow: none; }
.ps-silhouette { width: 36px; height: 50px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ps-strength { display: inline-flex; align-items: center; gap: var(--ps-space-2); font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-strength > i { display: block; width: 28px; height: 6px; border-radius: 3px; background: var(--ps-chip); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-strength > i + i { margin-left: calc(-1 * var(--ps-space-1)); }
.ps-strength[data-level="1"] > i:nth-of-type(-n+1), .ps-strength[data-level="2"] > i:nth-of-type(-n+2), .ps-strength[data-level="3"] > i:nth-of-type(-n+3) { background: var(--ps-color-sprout-strong); box-shadow: none; }
.ps-strength[data-level="0"] { color: var(--ps-warn); }
.ps-chip__img { flex: none; width: 22px; height: 22px; margin-left: -8px; border-radius: 50%; object-fit: cover; background: var(--ps-pop-bg); }

/* ---------- The opening and the loader (GTM-331, S-25, Oct 17, 2026) ----------
   Both sit on a dark surface (.ps-dark) whatever the theme: the brand's moment, like a film's opening. The rain is drawn by
   PS.matrix (ps-ui.js); the veil keeps the middle calm so the logo reads. html.ps-opening-on is set before the first paint
   by the head snippet (scripts/ds-head.js) on the first page of a browser session: the page waits under the opening, and is
   shown anyway after 4.5 s if the script never runs. The snippet also sets html.ps-has-opening (no styles: it tells ps-ui.js
   the page has the opening, so it plays again after 30 minutes away). */
html.ps-opening-on, html.ps-opening-on body { background: var(--ps-color-ink); overflow: hidden; }
html.ps-opening-on body > :not(.ps-opening) { visibility: hidden; animation: ps-opening-safety 0s 4.5s forwards; }
@keyframes ps-opening-safety { to { visibility: visible; } }
.ps-opening, .ps-loader { position: fixed; inset: 0; z-index: var(--ps-layer-opening); display: flex; align-items: center; justify-content: center;
  background: var(--ps-page); color: var(--ps-fg); transition: opacity var(--ps-dur-move) var(--ps-ease-out); }
.ps-opening.is-leaving, .ps-loader.is-leaving { opacity: 0; pointer-events: none; }
.ps-rain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .72; }
.ps-rain-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at center, var(--ps-page) 0%,
  color-mix(in srgb, var(--ps-page) 85%, transparent) 28%, color-mix(in srgb, var(--ps-page) 25%, transparent) 70%, transparent 100%); }
/* The logo: "/" first, then "prompt" comes out of it (the word is 92% of the slash; the padding keeps the p's tails inside the clip). */
.ps-logo-anim { position: relative; display: flex; align-items: baseline; font-family: var(--ps-font-mark); font-weight: var(--ps-weight-mark);
  font-size: clamp(34px, 5.2vw, 52px); line-height: 1; color: var(--ps-fg); }
.ps-logo-anim__slash { color: var(--ps-color-sprout); -webkit-text-stroke: .045em currentColor; paint-order: stroke fill; margin-right: .04em;
  animation: ps-slash-blink 1.1s ease-in-out 1.3s infinite; }
.ps-logo-anim__word { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 0; font-size: .92em;
  padding: .06em 0 .28em; margin: -.06em 0 -.28em; animation: ps-logo-reveal .8s cubic-bezier(.2, .8, .2, 1) .35s forwards; }
@keyframes ps-logo-reveal { to { max-width: 3.6em; } }
@keyframes ps-slash-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* The loader: only the slash, lifted to its optical center (DM Serif sets it low). */
.ps-loader__slash { position: relative; font-family: var(--ps-font-mark); font-size: 48px; line-height: 1; color: var(--ps-color-sprout);
  -webkit-text-stroke: .045em currentColor; paint-order: stroke fill; transform: translateY(-.067em); animation: ps-slash-blink 1.1s ease-in-out infinite; }
/* A wait in one place, in place of a spinner (Natalia, Oct 23): the brand's slash, blinking, at the size of the text around it.
   <span class="ps-slash" role="status"><span class="ps-vh">Loading</span></span>; .ps-slash--lg for a panel's own wait. */
.ps-slash { display: inline-flex; align-items: center; justify-content: center; font-family: var(--ps-font-mark); font-size: 1.25em; line-height: 1;
  color: var(--ps-color-sprout-strong); animation: ps-slash-blink 1.1s ease-in-out infinite; }
.ps-dark .ps-slash { color: var(--ps-color-sprout); }
.ps-slash::before { content: "/"; transform: translateY(-.067em); }
.ps-slash--lg { font-size: 40px; }
@media (prefers-reduced-motion: reduce) {
  .ps-logo-anim__word { animation: none; max-width: 3.6em; }
  .ps-logo-anim__slash, .ps-loader__slash, .ps-slash { animation: none; }
  .ps-opening, .ps-loader { transition: none; }
}

/* ---------- The 404 page (GTM-331, S-25): /404, the logo and the matrix rain, on the dark surface ---------- */
.ps-404-page { margin: 0; background: var(--ps-color-ink); }
.ps-404 { position: fixed; inset: 0; overflow: hidden; background: var(--ps-page); color: var(--ps-fg); font-family: var(--ps-font-ui); }
.ps-404__logo { position: absolute; top: var(--ps-space-6); left: var(--ps-space-6); z-index: 1; display: flex; align-items: baseline;
  font-family: var(--ps-font-mark); font-weight: var(--ps-weight-mark); font-size: 28px; line-height: 1; color: var(--ps-fg); text-decoration: none; }
.ps-404__slash { color: var(--ps-color-sprout); -webkit-text-stroke: .045em currentColor; paint-order: stroke fill; margin-right: .04em; }
.ps-404__word { font-size: .92em; }
.ps-404__body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ps-space-5); padding: 0 var(--ps-space-5); text-align: center; }
.ps-404__code { margin: 0; font-family: var(--ps-font-display); font-weight: 400; font-size: clamp(140px, 18vw, 220px); line-height: .9; letter-spacing: 0; }
.ps-404__code .ps-404__slash { -webkit-text-stroke: 0; margin-right: 0; }
.ps-404__text { margin: 0; max-width: 440px; font-size: 18px; line-height: 1.5; color: var(--ps-fg-2); }
.ps-404__actions { display: flex; gap: var(--ps-space-3); margin-top: var(--ps-space-2); }
.ps-404__actions [hidden] { display: none; }
@media (max-width: 560px) {
  .ps-404__logo { top: var(--ps-space-5); left: var(--ps-space-5); font-size: 26px; }
  .ps-404__text { font-size: 16px; }
  .ps-404__actions { flex-direction: column; width: 100%; max-width: 300px; }
}

/* ---------- The shell: five loop tabs, the Studio Reel, the top bar, the account slide-out (GTM-332; S-21, S-22, S-26) ----------
   Mounted by PS.shell (ps-ui.js) on every portal page, the only menu (html.ps-shell-on). On a phone: the top bar at the top of
   the page and the tab bar at the bottom; on the desktop: the five categories in the sidebar. The active tab changes color only,
   never weight. */
.ps-topbar, .ps-tabbar { display: none; }
@media (max-width: 768px) {
  html.ps-shell-on body::before { content: none !important; }
  /* the room for the tab bar is kept once, by the body; #portal-body sits inside it and keeps none (Oct 23: both kept it,
     with the old bottom nav's 100px gone, and the footer ended ~150px above the tab bar) */
  /* R16 (Sisi, Nov 7): less room taken at the top and bottom of a phone. The bar is 52px (was 60) and 8px from the bottom (was 16);
     --tabbar-h and --tabbar-gap say so once, for the bar, the Reel, Ask Prompt and the room the page keeps under its content */
  html.ps-shell-on { --tabbar-h: 52px; --tabbar-gap: var(--ps-space-2); }
  html.ps-shell-on body { padding-bottom: calc(var(--tabbar-gap) + var(--tabbar-h) + var(--ps-space-5) + env(safe-area-inset-bottom)); }
  html.ps-shell-on #portal-body { padding-bottom: 0; }
  html.ps-shell-on #sidebar { display: none !important; }
  /* inside the Prompt app the tab bar is native, below the page, so the page keeps no room for one (GTM-383) */
  html.ps-shell-on.ps-in-app body { padding-bottom: var(--ps-space-4); }
  .ps-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-3); flex: none;
    padding: var(--ps-space-2) var(--ps-space-4) 0; box-sizing: border-box; }
  /* R16 (Sisi, Nov 7): no empty band at the top. The page starts 16px under the team's bar (was 32px); a subscriber's bar is only
     the photo, so it floats at the top right, level with the page's first line, and the page starts at the top */
  html.ps-shell-on :is(#main-content, #main-view) { padding-top: var(--ps-space-4) !important; }
  html.ps-shell-on .ps-topbar--solo { position: absolute; top: 0; right: 0; z-index: var(--ps-layer-bar); }   /* above the page, under the account sheet */
  html.ps-shell-on:has(.ps-topbar--solo) :is(#main-content, #main-view) { padding-top: var(--ps-space-5) !important; }
  /* Oct 27 (Sisi, GTM-332): a dark graphite pill floating above the page, icons only, 16px from the sides and the bottom, as the old bar was */
  .ps-tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; position: fixed; left: var(--ps-space-4); right: var(--ps-space-4);
    bottom: calc(var(--tabbar-gap) + env(safe-area-inset-bottom)); z-index: var(--ps-layer-tabbar); padding: var(--ps-space-1);
    border-radius: var(--ps-radius-pill); background: var(--ps-nav);   /* graphite in light; R15 (Sisi, Nov 7, Loop Colors): plum in dark, so the bar stands off the page */
    box-shadow: inset 0 0 0 1px var(--ps-nav-edge), 0 10px 30px color-mix(in srgb, var(--ps-color-ink) 18%, transparent); }
}
.ps-topbar__start { flex: 1; }   /* Oct 31 (Sisi): no logo in the phone's top bar; a subscriber's keeps this side empty */
.ps-topbar__end { display: flex; align-items: center; gap: var(--ps-space-3); }
.ps-topbar__credits { display: inline-flex; align-items: center; height: var(--ps-size-head-button); padding: 0 var(--ps-space-3);
  border-radius: var(--ps-radius-pill); background: var(--ps-chip); color: var(--ps-accent-stroke); font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); text-decoration: none; }
.ps-avatar-btn { width: var(--ps-size-control); height: var(--ps-size-control); padding: 0; border: 0; border-radius: 50%; overflow: hidden;
  background: var(--ps-chip); color: var(--ps-fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ps-avatar-btn__img, .ps-account__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ps-avatar-btn__initial, .ps-account__initial { font: 600 var(--ps-type-title)/1 var(--ps-font-ui); }

/* The tab bar: four tabs and the Reel in the middle, raised above the bar. */
.ps-tabbar__slot { position: relative; display: flex; justify-content: center; min-width: 0; }
.ps-tabbar__tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ps-space-1); min-width: var(--ps-size-touch);
  min-height: var(--ps-size-touch); padding: 0; border: 0; background: none; color: color-mix(in srgb, var(--ps-color-on-dark) 66%, transparent); cursor: pointer;
  font: 500 var(--ps-type-label)/1.2 var(--ps-font-ui); position: relative; }
.ps-tabbar__tab .ps-icon { width: var(--ps-size-icon-lg); height: var(--ps-size-icon-lg); }
/* Oct 27 (Sisi): icons only on the bar; each tab's name stays for screen readers */
.ps-tabbar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ps-tabbar__tab[aria-current="page"] { color: var(--ps-color-sprout); }
/* R15 (Sisi, Nov 7, 2026: Loop Colors, option 3 of 4, in dark; then in light too, with a softer wash). Each tab is its loop step's
   color (--ps-nav-loop), the current one full strength on a soft pill of its color; a tab's menu takes its step's color (a band on top,
   a wash of --ps-nav-tint: 26% in dark, 14% in light, its icons); the account sheet and the desktop's side panels carry the whole
   loop as an edge. */
.ps-tabbar__slot[data-loop] > .ps-tabbar__tab:not(.ps-tabbar__tab--reel) { isolation: isolate;
  color: color-mix(in srgb, color-mix(in srgb, var(--loop) 75%, transparent) var(--ps-nav-loop), color-mix(in srgb, var(--ps-color-on-dark) 66%, transparent)); }
.ps-tabbar__slot[data-loop] > .ps-tabbar__tab:not(.ps-tabbar__tab--reel)[aria-current="page"] { color: color-mix(in srgb, var(--loop) var(--ps-nav-loop), var(--ps-color-sprout)); }
.ps-tabbar__slot[data-loop] > .ps-tabbar__tab:not(.ps-tabbar__tab--reel)[aria-current="page"]::before { content: ""; position: absolute; inset: var(--ps-space-1) calc(-1 * var(--ps-space-2));
  z-index: -1; border-radius: var(--ps-radius-pill); background: color-mix(in srgb, var(--loop) calc(var(--ps-nav-loop) * 0.22), transparent); }
.ps-tabbar__slot[data-loop] .ps-tabmenu { background: linear-gradient(180deg, color-mix(in srgb, var(--loop) var(--ps-nav-tint), var(--ps-nav-pop)), var(--ps-nav-pop) 70%);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--loop) var(--ps-nav-loop), transparent), var(--ps-pop-shadow); }
.ps-tabbar__slot[data-loop] .ps-tabmenu__item > .ps-icon { color: color-mix(in srgb, var(--loop) var(--ps-nav-loop), var(--ps-fg-2)); }
/* the whole loop, as a 4px edge; set on .ps-account, which isn't .ps-dark, so a docked panel keeps the page's theme */
.ps-account { --nav-panel: var(--ps-nav-panel); --nav-pop: var(--ps-nav-pop); --nav-edge: var(--ps-nav-edge);
  --nav-loop-edge: linear-gradient(180deg, color-mix(in srgb, var(--ps-color-loop-know) var(--ps-nav-loop), transparent), color-mix(in srgb, var(--ps-color-loop-say) var(--ps-nav-loop), transparent),
    color-mix(in srgb, var(--ps-color-loop-make) var(--ps-nav-loop), transparent), color-mix(in srgb, var(--ps-color-loop-pub) var(--ps-nav-loop), transparent), color-mix(in srgb, var(--ps-color-loop-meas) var(--ps-nav-loop), transparent)) left / 4px 100% no-repeat; }
.ps-tabbar__dot { position: absolute; top: 0; left: calc(50% + var(--ps-space-2)); width: var(--ps-space-2); height: var(--ps-space-2);
  border-radius: 50%; background: var(--ps-color-lavender); }
/* a count in the dot (My Jobs' open offers, GTM-326) */
.ps-tabbar__dot--num { width: auto; height: auto; min-width: 16px; padding: 1px 4px; top: -2px; border-radius: var(--ps-radius-pill); text-align: center;
  font: 600 10px/14px var(--ps-font-ui); color: var(--ps-color-ink); background: var(--ps-color-sprout); }
.ps-tabbar__tab--reel { margin-top: calc(-1 * var(--ps-space-6)); }
/* Oct 27 (Sisi): on a phone the Reel is its own round button beside the pill, where the old "+" was; the pill keeps the other four */
@media (max-width: 768px) {
  .ps-tabbar { right: calc(var(--ps-space-4) + var(--tabbar-h) + var(--ps-space-3)); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; }
  .ps-tabbar__slot--reel { position: fixed; right: var(--ps-space-4); bottom: calc(var(--tabbar-gap) + env(safe-area-inset-bottom)); }
  .ps-tabbar__slot--reel .ps-reel { width: var(--tabbar-h); height: var(--tabbar-h); }   /* the Reel is as tall as the bar beside it */
  .ps-tabbar__tab--reel { margin-top: 0; padding: 0; min-height: 0; }
  .ps-tabbar__slot--reel .ps-tabmenu { left: auto; right: 0; transform: none; }
}
.ps-reel { width: var(--ps-size-page-app-icon-min); height: var(--ps-size-page-app-icon-min); display: block; overflow: visible;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--ps-color-ink) 30%, transparent)); }   /* a small shadow (Oct 27) */
.ps-reel__film { fill: var(--ps-color-ink); }
.ps-reel__flange { fill: var(--ps-color-sprout); stroke: var(--ps-color-reel-rim); stroke-width: 1.2; }
.ps-reel__ring { fill: none; stroke: var(--ps-color-reel-wall); stroke-width: .6; opacity: .7; }
/* the Reel turns slowly at rest and fast while something is being made (PS.shell.making); still with reduced motion */
.ps-reel__spokes { transform-box: fill-box; transform-origin: center; animation: ps-reel-spin 14s linear infinite; }
html.ps-making .ps-reel__spokes { animation-duration: 2.4s; }
@keyframes ps-reel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ps-reel__spokes { animation: none; } }

/* A tab's menu opens upward from the tab. */
.ps-tabmenu { position: absolute; bottom: calc(100% + var(--ps-space-3)); left: 50%; transform: translateX(-50%); z-index: var(--ps-layer-tabmenu);
  width: max-content; min-width: 200px; max-width: calc(100vw - 2 * var(--ps-space-4)); padding: var(--ps-space-2); box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--ps-space-1); border-radius: var(--ps-radius-card); background: var(--ps-nav-pop); box-shadow: var(--ps-pop-shadow); }
.ps-tabmenu[hidden] { display: none; }
.ps-tabbar__slot:first-child .ps-tabmenu { left: 0; transform: none; }
.ps-tabbar__slot:last-child .ps-tabmenu { left: auto; right: 0; transform: none; }
.ps-tabmenu__item { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-3); min-height: var(--ps-size-touch);
  padding: 0 var(--ps-space-3); border-radius: var(--ps-radius-control); color: var(--ps-fg); text-decoration: none; font: 400 var(--ps-type-field)/1.3 var(--ps-font-ui); }
.ps-tabmenu__item:hover, .ps-tabmenu__item:focus-visible { background: var(--ps-chip); }
.ps-tabmenu__item { justify-content: flex-start; }   /* S-29: the item's icon, then its name, then any badge at the end */
.ps-tabmenu__item > span:not(.ps-badge) { flex: 1; min-width: 0; }
.ps-tabmenu__item > .ps-icon { flex: none; color: var(--ps-fg-2); }

/* The account slide-out, from the person's photo. */
.ps-account { position: fixed; inset: 0; z-index: var(--ps-layer-account); pointer-events: none; }
.ps-account__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ps-color-ink) 55%, transparent); opacity: 0;
  transition: opacity var(--ps-dur-drawer) var(--ps-ease-drawer); }
.ps-account__sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); box-sizing: border-box; overflow-y: auto;
  padding: var(--ps-space-6) var(--ps-space-5) var(--ps-space-5); display: flex; flex-direction: column; gap: var(--ps-space-5);
  border-radius: var(--ps-radius-card) 0 0 var(--ps-radius-card); background: var(--nav-loop-edge), var(--nav-pop); box-shadow: var(--ps-pop-shadow);
  transform: translateX(100%); transition: transform var(--ps-dur-drawer) var(--ps-ease-drawer); }
.ps-account.is-open { pointer-events: auto; }
.ps-account.is-open .ps-account__scrim { opacity: 1; }
.ps-account.is-open .ps-account__sheet { transform: none; }
html.ps-account-open { overflow: hidden; }
/* Desktop (GTM-337 walkthrough 13, Nov 5, 2026): the account panel opens just right of the folded menu, and the page moves over to
   make room instead of being covered; no scrim. 12px gaps match the rail's own margin. */
@media (min-width: 769px) {
  .ps-account__sheet { --dock-left: calc(var(--rail-left, 12px) + 64px + 4px); --dock-w: 240px; }   /* R6a (Nov 6): 4px from the rail, so the two read as one; --rail-left is where the rail starts (12px on a subscriber's pages, 20px on the team's) */   /* R2 (Nov 6): narrower, 240px (was 320px) */
  html.ps-account-docked .ps-account { pointer-events: none; }
  html.ps-account-docked .ps-account__scrim { display: none; }
  html.ps-account-docked .ps-account__sheet { pointer-events: auto; left: var(--dock-left); right: auto; top: 12px; bottom: 12px; width: var(--dock-w); border-radius: var(--ps-radius-card); transform: none; opacity: 1;
    padding: var(--ps-space-5) var(--ps-space-4); gap: var(--ps-space-4); background: var(--nav-loop-edge), var(--nav-panel); box-shadow: inset 0 0 0 1px var(--nav-edge); }   /* R3 (Natalia, Nov 6, option B): the menu's lighter grey, so it reads as the menu going on; R15 (Nov 7): plum with the loop's edge in dark */
  html.ps-account-docked .ps-account__sheet .ps-account__action { background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none; }
  html.ps-account-docked .ps-account__sheet .ps-find { background: color-mix(in srgb, var(--ps-color-graphite-solid) 70%, transparent); }
  html.ps-account-docked #sidebar-collapse-btn:disabled { opacity: .35; cursor: default; }
  /* R6b (Nov 6): the name card in the 240px panel: the photo and the two buttons on top, the name on its own line under them */
  html.ps-account-docked .ps-account__sheet .ps-account__who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--ps-space-2); }
  html.ps-account-docked .ps-account__sheet .ps-account__who > :is(.ps-account__img, .ps-account__initial) { width: 40px; height: 40px; }
  html.ps-account-docked .ps-account__sheet .ps-account__who > .ps-account__icon:first-of-type { grid-column: 3; }
  html.ps-account-docked .ps-account__sheet .ps-account__name { grid-column: 1 / -1; grid-row: 2; }
  html.ps-account-docked .ps-account__sheet .ps-account__link { min-height: var(--ps-size-control-sm); }   /* R12: a mouse, not a thumb: rows of 34px so the account panel's lists and Sign Out fit a laptop screen */
  html.ps-account-docked .ps-account__sheet .ps-account__group { gap: var(--ps-space-1); }
  html.ps-account-docked .ps-account__sheet .ps-account__group + .ps-account__group { padding-top: var(--ps-space-3); }
  html.ps-account-docked .ps-account__sheet .ps-account__out { background: transparent; color: var(--ps-fg); box-shadow: inset 0 0 0 1px var(--ps-line-strong, var(--ps-line)); }
  .ps-account:not(.is-open) .ps-account__sheet { left: var(--dock-left); right: auto; top: 12px; bottom: 12px; width: var(--dock-w); border-radius: var(--ps-radius-card); transform: translateX(-16px); opacity: 0; visibility: hidden;
    transition: transform var(--ps-dur-drawer) var(--ps-ease-drawer), opacity var(--ps-dur-drawer) var(--ps-ease-drawer), visibility 0s linear var(--ps-dur-drawer); }
  #portal-body { transition: margin-left var(--ps-dur-drawer) var(--ps-ease-drawer); }
  html.ps-account-docked #portal-body { margin-left: calc(var(--dock-w, 240px) + 12px); }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) { #portal-body, .ps-account__sheet { transition: none; } }
.ps-account__who { display: flex; align-items: center; gap: var(--ps-space-3); }
.ps-account__who > .ps-account__img, .ps-account__who > .ps-account__initial { width: var(--ps-size-page-app-icon-min); height: var(--ps-size-page-app-icon-min);
  flex: none; border-radius: 50%; background: var(--ps-chip); display: inline-flex; align-items: center; justify-content: center; }
.ps-account__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ps-space-1); font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-account__name b { font-weight: 600; font-size: var(--ps-type-title); color: var(--ps-fg); }
.ps-account__credits { display: flex; flex-direction: column; gap: var(--ps-space-3); padding: var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-chip); }
.ps-account__credits b { font: 400 var(--ps-type-number-sm)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-accent-stroke); }
.ps-account__credits .ps-btn { width: 100%; box-sizing: border-box; }
.ps-account__links { display: flex; flex-direction: column; gap: var(--ps-space-1); }
.ps-account__link { display: flex; align-items: center; gap: var(--ps-space-3); min-height: var(--ps-size-touch); padding: 0 var(--ps-space-2);
  border-radius: var(--ps-radius-control); color: var(--ps-fg); text-decoration: none; font: 400 var(--ps-type-field)/1.3 var(--ps-font-ui); }
.ps-account__link:hover, .ps-account__link:focus-visible { background: var(--ps-chip); }
/* The team's My Work and Company (Natalia, Nov 6, 2026: GTM-337 walkthrough 13): the docked panel beside the rail, as the account's,
   its name on top in the display face and its pages as links; the page it's on is lit as the rail lights its own */
.ps-account__grouphead { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-2); }
.ps-account__grouptitle { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
/* R12 (Natalia, Nov 6, 2026): one list design for every secondary menu (the account, My Work, Company): the icon, the name, any count;
   the page you're on is lit as the rail lights its own; groups are named in small capitals and set apart by a hairline */
.ps-account__link > .ps-icon, .ps-account__noicon { flex: none; width: var(--ps-size-icon-sm); color: var(--ps-fg-2); }
.ps-account__link > span:not(.ps-badge, .ps-account__noicon) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-account__link[aria-current="page"] { background: var(--ps-color-sprout); color: var(--ps-color-ink); font-weight: 500; }
.ps-account__link[aria-current="page"] > .ps-icon { color: inherit; }
.ps-account__link:hover > .ps-icon, .ps-account__link:focus-visible > .ps-icon { color: var(--ps-fg); }
.ps-account__links { gap: 2px; }
.ps-account__group + .ps-account__group { padding-top: var(--ps-space-4); border-top: 1px solid var(--ps-line); }
.ps-account__grouphead { padding-bottom: var(--ps-space-1); }
.ps-account__for { color: var(--ps-fg-3); }
.ps-account__out { margin-top: auto; }
.ps-account__sheet > * { flex-shrink: 0; }   /* the sheet scrolls; nothing in it squashes (Sisi, Oct 21: Sign Out was squashed thin on the phone) */
.ps-account__out, .ps-account__action { min-height: var(--ps-size-touch); }
/* The slide-out's own actions (Hire a Creative), the shape of Sign Out, just above it: the first one takes the free space */
.ps-account__action { margin-top: auto; box-sizing: border-box; width: 100%; }
.ps-account__action ~ .ps-account__action, .ps-account__action ~ .ps-account__out { margin-top: calc(var(--ps-space-3) - var(--ps-space-5)); }   /* 12px apart, not the sheet's 24 */
@media (prefers-reduced-motion: reduce) { .ps-account__scrim, .ps-account__sheet { transition: none; } }

/* The desktop: the five categories in the sidebar, the open one with its items, the others folded with their badges. */
.ps-sidecat { display: flex; flex-direction: column; gap: var(--ps-space-3); padding: var(--ps-space-2) 0; }
#sidebar > .ps-sidecat { flex: 1; min-height: 0; overflow-y: auto; padding: var(--ps-space-2) var(--ps-space-3); }
#sidebar > .ps-sidecat { margin-bottom: var(--ps-space-3); }   /* room above the account block (the audit: Company sat flush on it) */
#sidebar > .ps-sidecat.has-more { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--ps-space-6)), transparent);
  mask-image: linear-gradient(to bottom, black calc(100% - var(--ps-space-6)), transparent); }   /* more below: the bottom fades */   /* fills the rail; the account stays at the bottom */
.ps-sidecat__group { display: flex; flex-direction: column; gap: var(--ps-space-1); }
.ps-sidecat__head { display: flex; align-items: center; gap: var(--ps-space-3); min-height: var(--ps-size-control); padding: 0 var(--ps-space-3);
  border: 0; border-radius: var(--ps-radius-control); background: none; color: var(--nav-text, var(--ps-fg)); cursor: pointer; text-align: left;
  font: 400 var(--ps-type-lede)/1 var(--ps-font-display); letter-spacing: 0; }   /* the names in Bebas Neue, set tight (GTM-332 team shell, Oct 18) */
.ps-sidecat__head span:not(.ps-badge) { flex: 1; }
.ps-sidecat__head .ps-icon { color: inherit; }
.ps-sidecat__head[aria-current="true"] { color: var(--ps-color-sprout); }
.ps-sidecat--loop .ps-sidecat__head[aria-current="true"]:not([aria-expanded="true"]) { color: var(--nav-text, var(--ps-fg)); }   /* the loop rail: the name stays white, the node marks the page */
.ps-sidecat__head:hover { background: color-mix(in srgb, var(--ps-color-on-dark) 8%, transparent); }
.ps-sidecat__items { display: flex; flex-direction: column; gap: var(--ps-space-1); }
.ps-sidecat__items[hidden] { display: none; }
.ps-sidecat__item { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-2); min-height: var(--ps-size-control-sm);
  padding: 0 var(--ps-space-3) 0 calc(var(--ps-space-3) + var(--ps-size-icon) + var(--ps-space-3)); border-radius: var(--ps-radius-control);
  color: var(--nav-text-dim, var(--ps-fg-2)); text-decoration: none; font: 400 var(--ps-type-body)/1.3 var(--ps-font-ui); }
.ps-sidecat__item:hover { background: color-mix(in srgb, var(--ps-color-on-dark) 8%, transparent); color: var(--nav-text, var(--ps-fg)); }
/* S-29: every item has its icon (the website's sprite), quiet until the item is hovered or current */
.ps-sidecat__item[hidden], .ps-tabmenu__item[hidden], .ps-account__link[hidden] { display: none; }   /* a subscriber's item waits for a pick */
.ps-sidecat__item { justify-content: flex-start; padding-left: calc(var(--ps-space-3) + var(--ps-space-5)); }   /* the icon steps in under the category's icon */
.ps-sidecat__item > span:not(.ps-badge) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-sidecat__item > .ps-icon { flex: none; opacity: .7; }
.ps-sidecat__item:hover > .ps-icon, .ps-sidecat__item[aria-current="page"] > .ps-icon { opacity: 1; }
.ps-sidecat__item[aria-current="page"] { color: var(--ps-color-sprout); background: color-mix(in srgb, var(--ps-color-on-dark) 10%, transparent); }
#sidebar.collapsed .ps-sidecat__head span, #sidebar.collapsed .ps-sidecat__items { display: none; }
#sidebar.collapsed .ps-sidecat__head { justify-content: center; padding: 0; }
/* the groups beyond the five (the team's My Work, an admin's Company) sit under a hairline */
.ps-sidecat__rule { height: 1px; margin: var(--ps-space-1) var(--ps-space-3); background: var(--ps-line); }
.ps-sidecat__client { display: flex; padding-bottom: var(--ps-space-1); }
.ps-sidecat__client .ps-clientswitch { flex: 1; }
#sidebar.collapsed .ps-sidecat__client .ps-clientswitch { justify-content: center; padding: 0; }
#sidebar.collapsed .ps-sidecat__client .ps-clientswitch__name, #sidebar.collapsed .ps-sidecat__client .ps-clientswitch > .ps-icon { display: none; }
/* ── S-32 (Oct 21, Sisi; the prototype's Navigation page, direction D): the loop rail, the "/" palette, the account card ──
   Each category is a step of the loop: a numbered node in its loop color on one connecting line (the website's line), the open
   one glowing. The loop colors here are the loop's own (DESIGN.md, the Loop Rule: loop pills and element tiles). */
[data-loop="home"] { --loop: var(--ps-color-loop-home); --loop-rail: var(--ps-color-loop-home-rail); --loop-deep: var(--ps-color-loop-home-deep); }
[data-loop="know"] { --loop: var(--ps-color-loop-know); --loop-rail: var(--ps-color-loop-know-rail); --loop-deep: var(--ps-color-loop-know-deep); }
[data-loop="say"] { --loop: var(--ps-color-loop-say); --loop-rail: var(--ps-color-loop-say-rail); --loop-deep: var(--ps-color-loop-say-deep); }
[data-loop="make"] { --loop: var(--ps-color-loop-make); --loop-rail: var(--ps-color-loop-make-rail); --loop-deep: var(--ps-color-loop-make-deep); }
[data-loop="pub"] { --loop: var(--ps-color-loop-pub); --loop-rail: var(--ps-color-loop-pub-rail); --loop-deep: var(--ps-color-loop-pub-deep); }
[data-loop="meas"] { --loop: var(--ps-color-loop-meas); --loop-rail: var(--ps-color-loop-meas-rail); --loop-deep: var(--ps-color-loop-meas-deep); }
[data-loop="learn"] { --loop: var(--ps-color-loop-learn); --loop-rail: var(--ps-color-loop-learn-rail); --loop-deep: var(--ps-color-loop-learn-deep); }
html.ps-shell-on #sidebar { box-sizing: border-box; padding-top: var(--ps-space-3); padding-bottom: var(--ps-space-3); }   /* its padding inside its height, so the account card stays on screen;
   the card sits on the bottom, as far from it as from the sides (Sisi, Oct 21: the space below looked odd) */
/* the logo and the fold arrow sit on the top, 12 px in like the account card on the bottom (Sisi, Oct 21: the space above looked off) */
html.ps-shell-on #sidebar > .sidebar-top { padding: 0 var(--ps-space-3) 0 var(--ps-space-4); margin-bottom: var(--ps-space-4); }
html.ps-shell-on #sidebar.collapsed > .sidebar-top { padding: 0; }
/* folding the rail gives its width to the page (Sisi, Oct 21: the page only slid left and left the space empty). A page capped at the
   page width (--ps-size-page-max) adds this to its cap: the rail's open width (220 px) less its folded width (64 px), from portal.css */
html.ps-shell-on:has(#sidebar.collapsed) { --shell-freed: calc(220px - 64px); }
#sidebar > .ps-sidecat--loop { overflow: visible; gap: var(--ps-space-4); margin-bottom: 0; padding-bottom: 0; }
#sidebar > .ps-sidecat--loop.has-more { -webkit-mask-image: none; mask-image: none; }
/* the "/" field: the palette's door, on the rail and in the account sheet */
.ps-find { display: flex; align-items: center; gap: var(--ps-space-3); width: 100%; min-height: var(--ps-size-control); padding: 0 var(--ps-space-3); box-sizing: border-box;
  border: 1px solid var(--nav-border, var(--ps-line)); border-radius: var(--ps-radius-control); background: color-mix(in srgb, var(--ps-color-ink) 30%, transparent);
  color: var(--nav-text-dim, var(--ps-fg-2)); cursor: pointer; text-align: left; font: 400 var(--ps-type-body)/1.2 var(--ps-font-ui); }
.ps-find:hover { color: var(--nav-text, var(--ps-fg)); border-color: color-mix(in srgb, var(--ps-color-sprout) 40%, transparent); }
.ps-find > span:not(.ps-find__mark) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-find__mark { flex: none; color: var(--ps-color-sprout); font: 400 var(--ps-type-lede)/1 var(--ps-font-mark); }
.ps-find kbd { flex: none; font: 400 var(--ps-type-caption)/1 var(--ps-font-mono); color: var(--nav-text-ghost, var(--ps-fg-3)); }
/* the subscriber the team works for: a card washed in the first loop colors */
.ps-sidecat--loop .ps-sidecat__client .ps-clientswitch { min-height: calc(var(--ps-size-touch) + var(--ps-space-3)); padding: var(--ps-space-2) var(--ps-space-3) var(--ps-space-2) var(--ps-space-2);
  border-radius: var(--ps-radius-card); border-color: color-mix(in srgb, var(--ps-color-on-dark) 12%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ps-color-loop-make) 20%, transparent), color-mix(in srgb, var(--ps-color-loop-know) 18%, transparent)); }
.ps-clientswitch__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-clientswitch__for { display: none; font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--nav-text-dim, var(--ps-fg-2)); }
.ps-sidecat--loop .ps-clientswitch__for { display: block; }
/* the loop: one line through the nodes, from the first loop color to the last */
.ps-sidecat__loop { flex: 1; min-height: 0; overflow-y: auto; padding: var(--ps-space-1) 0; }
/* Home (Sisi, Nov 7, 2026): the landing dashboard, one click from every page. Since Nov 8 (Sisi) it is step 00, the first node on the
   loop's line, in orchid (the color before the loop's purple), shaped like a step's row; it has no menu, so it is a link */
.ps-sidecat__home { position: relative; display: flex; align-items: center; gap: var(--ps-space-2); min-height: var(--ps-size-control);
  padding: 0 var(--ps-space-3) 0 calc(var(--ps-space-3) + var(--ps-space-5) + var(--ps-space-1));
  border-radius: var(--ps-radius-control); color: var(--nav-text, var(--ps-fg)); text-decoration: none; font: 400 var(--ps-type-lede)/1 var(--ps-font-display); letter-spacing: 0; }
.ps-sidecat__homename { flex: 1; }
.ps-sidecat__home:hover { background: color-mix(in srgb, var(--ps-color-on-dark) 8%, transparent); }
.ps-sidecat__home:hover .ps-sidecat__node { opacity: 1; }
.ps-sidecat__home[aria-current="page"] { color: var(--loop); }
.ps-sidecat__home[aria-current="page"] .ps-sidecat__node { opacity: 1; transform: scale(1.6);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--loop) 25%, transparent), 0 0 18px color-mix(in srgb, var(--loop) 60%, transparent); }
.ps-sidecat__home:focus-visible { outline-offset: -2px; }
#sidebar.collapsed .ps-sidecat__home { justify-content: center; padding: 0; }
#sidebar.collapsed .ps-sidecat__homename { display: none; }
#sidebar.collapsed .ps-sidecat__home:hover { background: none; }
/* the open rail: each step's icon again at the row's right edge, in its color, one column (Sisi, Nov 8, 2026: option E2); folded, the
   icon is the circle's */
.ps-sidecat__trail { flex: none !important; display: grid; place-items: center; width: var(--ps-size-icon); height: var(--ps-size-icon); margin-left: auto; color: var(--loop); }
.ps-sidecat__trail :is(.ps-icon, svg) { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); }
.ps-sidecat__trail .ps-reel { width: var(--ps-size-icon); height: var(--ps-size-icon); }
.ps-sidecat__trail .ps-reel__film { fill: none; }
.ps-sidecat__trail .ps-reel__flange { fill: var(--loop); stroke: none; }
.ps-sidecat__trail .ps-reel__ring { display: none; }
#sidebar.collapsed .ps-sidecat__trail { display: none; }
.ps-account__links--home { margin-top: calc(-1 * var(--ps-space-2)); }
.ps-sidecat__steps { position: relative; display: flex; flex-direction: column; gap: var(--ps-space-1); }
.ps-sidecat__steps::before { content: ""; position: absolute; left: calc(var(--ps-space-3) + 5px); top: calc(var(--ps-size-control) / 2); bottom: calc(var(--ps-size-control) / 2); width: 2px; border-radius: 1px; opacity: .6;
  background: linear-gradient(var(--ps-color-loop-home), var(--ps-color-loop-know), var(--ps-color-loop-say), var(--ps-color-loop-make), var(--ps-color-loop-pub), var(--ps-color-loop-meas), var(--ps-color-loop-learn)); }
.ps-sidecat__loop.has-more { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--ps-space-6)), transparent); mask-image: linear-gradient(to bottom, black calc(100% - var(--ps-space-6)), transparent); }
.ps-sidecat--loop .ps-sidecat__head { position: relative; gap: var(--ps-space-2); padding-left: calc(var(--ps-space-3) + var(--ps-space-5) + var(--ps-space-1)); }
.ps-sidecat__node { position: absolute; left: var(--ps-space-3); top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--loop); opacity: .6;
  transition: transform var(--ps-dur-base) var(--ps-ease-out), opacity var(--ps-dur-base) var(--ps-ease-out); }
.ps-sidecat__icon { display: none; }
.ps-sidecat__num { flex: none !important; min-width: 2ch; font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); color: var(--loop); }
.ps-sidecat--loop .ps-sidecat__head:hover .ps-sidecat__node { opacity: 1; }
/* the open step grows and glows in its color (Sisi, Oct 21: Studio, Publish and Analyze didn't when opened); the page's own step, folded, keeps only its node at full color (Sisi, Oct 21: a quieter marker) */
.ps-sidecat--loop .ps-sidecat__head[aria-expanded="true"] { color: var(--loop); font-size: var(--ps-type-section); }
.ps-sidecat--loop .ps-sidecat__head[aria-expanded="true"] .ps-sidecat__node { opacity: 1; transform: scale(1.6);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--loop) 25%, transparent), 0 0 18px color-mix(in srgb, var(--loop) 60%, transparent); }
.ps-sidecat--loop .ps-sidecat__head[aria-current="true"]:not([aria-expanded="true"]) .ps-sidecat__node { opacity: 1; }
.ps-sidecat__head:focus-visible { outline-offset: -2px; }   /* the keyboard ring inside the rail, not cut at its edge */
.ps-sidecat--loop .ps-sidecat__item { padding-left: calc(var(--ps-space-3) + var(--ps-space-5) + var(--ps-space-1)); }
.ps-sidecat--loop .ps-sidecat__item[aria-current="page"] { background: var(--loop, var(--ps-color-sprout)); color: var(--loop-deep, var(--ps-color-ink)); }
.ps-sidecat--loop .ps-sidecat__group:not([data-loop]) .ps-sidecat__item[aria-current="page"] { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
@media (prefers-reduced-motion: reduce) { .ps-sidecat__node { transition: none; } }
/* the account card: photo, name and role (opens the account sheet), icons for My Work, Company and the theme */
.ps-sidecat__me { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-5) var(--ps-space-2); padding: var(--ps-space-4) var(--ps-space-3) var(--ps-space-3); border-radius: var(--ps-radius-card);   /* room to breathe (Sisi, Oct 21: too crammed) */
  background: color-mix(in srgb, var(--ps-color-on-dark) 6%, transparent); border: 1px solid var(--nav-border, var(--ps-line)); }
.ps-sidecat__who { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: var(--ps-space-3); padding: 0 0 0 var(--ps-space-1); border: 0; background: none; color: var(--nav-text, var(--ps-fg)); cursor: pointer; text-align: left; }
.ps-sidecat__who .ps-avatar-btn__img, .ps-sidecat__who .ps-avatar-btn__initial { flex: none; width: var(--ps-size-control); height: var(--ps-size-control); border-radius: 50%;
  box-shadow: 0 0 0 2px var(--nav-bg, var(--ps-page)), 0 0 0 4px var(--ps-color-loop-know); object-fit: cover; }
.ps-sidecat__who .ps-avatar-btn__initial { display: grid; place-items: center; background: var(--ps-chip); font: 400 var(--ps-type-lede)/1 var(--ps-font-display); }
.ps-sidecat__whoname { min-width: 0; display: flex; flex-direction: column; gap: var(--ps-space-1); }
.ps-sidecat__whoname b { font: 400 var(--ps-type-lede)/1 var(--ps-font-display); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-sidecat__whoname span { font: 400 var(--ps-type-caption)/1.2 var(--ps-font-ui); color: var(--ps-color-lavender-on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-sidecat__tools { flex: 1 1 100%; display: flex; gap: var(--ps-space-2); }
.ps-sidecat__tools .ps-sidecat__tool { flex: 1; width: auto; }
.ps-sidecat__tool { display: grid; place-items: center; width: var(--ps-size-control-sm); height: var(--ps-size-control-sm); padding: 0; border-radius: var(--ps-radius-control);
  border: 1px solid var(--nav-border, var(--ps-line)); background: color-mix(in srgb, var(--ps-color-on-dark) 5%, transparent); color: var(--nav-text, var(--ps-fg)); cursor: pointer; }
.ps-sidecat__tool:hover, .ps-sidecat__tool[aria-expanded="true"] { background: color-mix(in srgb, var(--ps-color-on-dark) 14%, transparent); }
/* S-41 (Oct 24): an account tool with its label (a subscriber's Orders), wider than the theme beside it */
.ps-sidecat__tools:has(.ps-sidecat__tool--label) { min-width: 0; gap: var(--ps-space-1); }
.ps-sidecat__tools .ps-sidecat__tool--label { flex: 1 1 0; }
.ps-sidecat__tools:has(.ps-sidecat__tool--label) [data-shell-theme] { flex: 0 0 var(--ps-size-control-sm); }
.ps-sidecat__tool--label { display: flex; align-items: center; justify-content: center; gap: var(--ps-space-2); padding: 0; min-width: 0;
  font: 400 var(--ps-type-caption)/1 var(--ps-font-ui); text-decoration: none; white-space: nowrap; }
.ps-sidecat__tool--label span { overflow: hidden; text-overflow: ellipsis; }
.ps-sidecat__tool--label[aria-current="page"] { background: color-mix(in srgb, var(--ps-color-on-dark) 14%, transparent); }
/* the narrow rail (Oct 21, Sisi: "Working For" and the photo looked off): one 40 px column, centered. The "/" field is a search
   button (the logo above is the "/"), the subscriber is their round mark, each step is its numbered node on the line, the account is the photo */
.ps-find__icon { display: none; }
#sidebar.collapsed .ps-find > span:not(.ps-find__icon), #sidebar.collapsed .ps-find kbd, #sidebar.collapsed .ps-sidecat__whoname, #sidebar.collapsed .ps-sidecat__tools { display: none; }
#sidebar.collapsed .ps-find { justify-content: center; padding: 0; width: var(--ps-size-control); min-height: var(--ps-size-control); margin: 0 auto; }
#sidebar.collapsed .ps-find__icon { display: grid; place-items: center; }
#sidebar.collapsed .ps-sidecat__client { justify-content: center; }
#sidebar.collapsed .ps-sidecat--loop .ps-sidecat__client .ps-clientswitch { flex: none; width: var(--ps-size-control); min-height: var(--ps-size-control); height: var(--ps-size-control);
  padding: 0; border-radius: 50%; justify-content: center; background: none; border: 0;
  box-shadow: 0 0 0 2px var(--nav-bg, var(--ps-page)), 0 0 0 3px var(--ps-color-loop-make); }
#sidebar.collapsed .ps-sidecat__client .ps-clientswitch__text { display: none; }
#sidebar.collapsed .ps-sidecat__client .ps-clientswitch__dot { width: 100%; height: 100%; font-size: var(--ps-type-lede); }
#sidebar.collapsed .ps-sidecat__steps { gap: var(--ps-space-5); }   /* room between the icon circles and their number tags (Natalia, Nov 6: walkthrough R1a) */
#sidebar.collapsed .ps-sidecat__loop { overflow: visible; }   /* the page's step halo isn't cut by the list's own box */
#sidebar.collapsed .ps-sidecat__steps::before { left: calc(50% - 1px); }
#sidebar.collapsed .ps-sidecat--loop .ps-sidecat__head { min-height: var(--ps-size-control); }
#sidebar.collapsed .ps-sidecat--loop .ps-sidecat__head:hover { background: none; }
#sidebar.collapsed :is(.ps-sidecat__head, .ps-sidecat__home) .ps-sidecat__num { display: block; }
#sidebar.collapsed :is(.ps-sidecat__head, .ps-sidecat__home) .ps-sidecat__node { display: grid; }
/* Folded (GTM-337 walkthrough 12a, Nov 5, 2026): the step's icon in its circle, the number a small tag on the circle's top left */
#sidebar.collapsed .ps-sidecat__node { left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; opacity: 1; place-items: center;   /* solid (R1b) */
  box-shadow: 0 0 0 3px var(--nav-bg, var(--ps-page)); }
#sidebar.collapsed :is(.ps-sidecat__head, .ps-sidecat__home) .ps-sidecat__icon { display: grid; place-items: center; color: var(--loop-deep, var(--ps-color-ink)); }
#sidebar.collapsed .ps-sidecat__icon :is(.ps-icon, svg) { width: 16px; height: 16px; }   /* the Studio's is the Studio Reel, as on the phone's bar */
/* R18 (Sisi, Nov 7, 2026): the Studio's step is the Reel itself, as on the phone, not a reel in a circle; in its loop color (the
   Studio's blue), so the steps keep their color order */
#sidebar.collapsed .ps-sidecat__node:has(.ps-reel) { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: none; }
#sidebar.collapsed .ps-sidecat__node:has(.ps-reel) .ps-sidecat__icon svg { width: 40px; height: 40px; }
#sidebar .ps-sidecat__node .ps-reel__flange { fill: var(--loop); stroke: var(--loop-deep); }
#sidebar .ps-sidecat__node .ps-reel__ring { stroke: var(--loop-deep); }
#sidebar.collapsed .ps-sidecat__num { position: absolute; left: calc(50% - 22px); top: calc(50% - 22px); z-index: 1; min-width: 0; padding: 2px 3px; border-radius: 999px;
  text-align: center; font-size: 9px; line-height: 1; letter-spacing: 0; background: var(--nav-bg, var(--ps-page)); color: var(--loop); pointer-events: none; }
#sidebar.collapsed .ps-sidecat--loop :is(.ps-sidecat__head, .ps-sidecat__home):is(:hover, :focus-visible) .ps-sidecat__node { opacity: 1; transform: scale(1.06); }
#sidebar.collapsed .ps-sidecat--loop .ps-sidecat__head[aria-expanded="true"]:not([aria-current="true"]) .ps-sidecat__node { opacity: 1; transform: none; box-shadow: 0 0 0 3px var(--nav-bg, var(--ps-page)); }   /* narrow: only the page's step glows */
/* the page's step: a ring and a soft glow that fit the folded rail (12b: the 115% circle, its rings and 16px glow were cut at the
   rail's sides, which scrolls and so clips what spills past it); no scaling */
#sidebar.collapsed .ps-sidecat--loop :is(.ps-sidecat__head[aria-current="true"], .ps-sidecat__home[aria-current="page"]) .ps-sidecat__node { opacity: 1; transform: none;
  box-shadow: 0 0 0 3px var(--nav-bg, var(--ps-page)), 0 0 0 6px var(--loop), 0 0 0 9px color-mix(in srgb, var(--loop) 30%, transparent), 0 0 16px 6px color-mix(in srgb, var(--loop) 45%, transparent); }   /* a clear halo: a gap, a solid ring, a soft ring and a glow, inside the 64px rail (R1c) */
#sidebar.collapsed .ps-sidecat__me { justify-content: center; padding: 0; background: none; border: 0; }
#sidebar.collapsed .ps-sidecat__who { flex: none; justify-content: center; }
#sidebar.collapsed .ps-sidecat__who .ps-avatar-btn__img, #sidebar.collapsed .ps-sidecat__who .ps-avatar-btn__initial { width: var(--ps-size-control-sm); height: var(--ps-size-control-sm);
  box-shadow: 0 0 0 2px var(--nav-bg, var(--ps-page)), 0 0 0 3px var(--ps-color-loop-know); }
/* the account sheet (the phone, and the desktop from the card): who you are on top (R12, Nov 6: a plain row, no tinted card), the "/" field,
   then the groups as lists */
.ps-account__id { display: flex; flex-direction: column; gap: var(--ps-space-3); padding: 0 0 var(--ps-space-4); border-bottom: 1px solid var(--ps-line); }
.ps-account__id .ps-account__who { padding: 0; border: 0; }
.ps-account__icon { flex: none; display: grid; place-items: center; width: var(--ps-size-control-sm); height: var(--ps-size-control-sm); padding: 0; border-radius: var(--ps-radius-control);
  border: 1px solid var(--ps-line); background: var(--ps-chip); color: var(--ps-fg); cursor: pointer; }
.ps-account__sheet .ps-find { margin: 0; border-color: var(--ps-line); background: var(--ps-chip); color: var(--ps-fg-2); }
/* the palette: centered on the desktop, from the bottom on a phone */
.ps-palette { position: fixed; inset: 0; z-index: var(--ps-layer-modal); pointer-events: none; }
.ps-palette.is-open { pointer-events: auto; }
.ps-palette__scrim { position: absolute; inset: 0; background: var(--ps-color-scrim-strong); opacity: 0; transition: opacity var(--ps-dur-base) var(--ps-ease-out); }
.ps-palette.is-open .ps-palette__scrim { opacity: 1; }
.ps-palette__box { position: absolute; left: 50%; top: 14vh; width: min(620px, calc(100vw - 2 * var(--ps-space-4))); transform: translate(-50%, -8px); opacity: 0;
  display: flex; flex-direction: column; gap: var(--ps-space-2); padding: var(--ps-space-3); box-sizing: border-box; border-radius: var(--ps-radius-card);
  background: var(--ps-pop-bg); border: 1px solid var(--ps-line); box-shadow: 0 var(--ps-space-6) var(--ps-space-7) var(--ps-color-scrim-strong); color: var(--ps-fg);
  transition: transform var(--ps-dur-base) var(--ps-ease-out), opacity var(--ps-dur-base) var(--ps-ease-out); }
.ps-palette.is-open .ps-palette__box { transform: translate(-50%, 0); opacity: 1; }
.ps-palette__field { display: flex; align-items: center; gap: var(--ps-space-3); min-height: var(--ps-size-touch); padding: 0 var(--ps-space-3); border-bottom: 1px solid var(--ps-line); }
.ps-palette__field .ps-find__mark { font-size: var(--ps-type-section); }
.ps-palette .ps-palette__field input { flex: 1; min-width: 0; min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--ps-fg); font: 400 var(--ps-type-lede)/1.3 var(--ps-font-ui); outline: none; }
.ps-palette .ps-palette__field input:focus, .ps-palette .ps-palette__field input:focus-visible { outline: none; box-shadow: none; }   /* the box shows focus, not the bare field */
.ps-palette__field:focus-within { border-bottom-color: var(--ps-color-sprout); }
.ps-palette__list { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow-y: auto; }
.ps-palette__item { display: flex; align-items: center; gap: var(--ps-space-3); min-height: var(--ps-size-touch); padding: 0 var(--ps-space-3); border-radius: var(--ps-radius-control); cursor: pointer; }
.ps-palette__item > .ps-icon { flex: none; color: var(--loop, var(--ps-fg-2)); }
.ps-palette__item[aria-selected="true"], .ps-palette__item:hover { background: color-mix(in srgb, var(--ps-color-sprout) 22%, transparent); }
.ps-palette__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 var(--ps-type-field)/1.3 var(--ps-font-ui); }
.ps-palette__hint { flex: none; font: 400 var(--ps-type-caption)/1 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-palette__empty { margin: 0; padding: var(--ps-space-3); color: var(--ps-fg-3); font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); }
@media (max-width: 768px) {
  .ps-palette__box { top: auto; bottom: 0; left: 0; width: 100%; transform: translateY(16px); border-radius: var(--ps-radius-card) var(--ps-radius-card) 0 0;
    padding-bottom: calc(var(--ps-space-4) + env(safe-area-inset-bottom)); }
  .ps-palette.is-open .ps-palette__box { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ps-palette__scrim, .ps-palette__box { transition: none; } }

/* The Strategist's client switch (S-21): the subscriber the five tabs work on, in the top bar on a phone and on top of the
   categories on the desktop; it opens the picker in the drawer. */
.ps-clientswitch { display: inline-flex; align-items: center; gap: var(--ps-space-2); min-width: 0; max-width: 100%; min-height: var(--ps-size-touch);
  padding: 0 var(--ps-space-3) 0 var(--ps-space-1); border: 1px solid var(--ps-line); border-radius: var(--ps-radius-pill); background: var(--ps-chip);
  color: var(--nav-text, var(--ps-fg)); cursor: pointer; font: 500 var(--ps-type-field)/1.2 var(--ps-font-ui); text-align: left; box-sizing: border-box; }
.ps-clientswitch:hover { background: color-mix(in srgb, var(--ps-color-on-dark) 8%, var(--ps-chip)); }
.ps-clientswitch__dot { flex: none; width: var(--ps-size-control-sm); height: var(--ps-size-control-sm); border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--ps-color-lavender); color: var(--ps-color-ink); font: 400 var(--ps-type-story-question)/1 var(--ps-font-display); letter-spacing: 0; }
html.ps-shell-client [data-shell-client] { display: none; }   /* S-30: the page follows the menu's subscriber switch */
.ps-clientswitch__dot:has(.ps-clientswitch__logo) { background: var(--ps-color-white); overflow: hidden; }   /* paper behind a transparent logo */
.ps-clientswitch__logo { display: block; width: 100%; height: 100%; object-fit: cover; }   /* the subscriber's logo fills the circle (Oct 26; was contained on a padded square, Oct 21) */
.ps-clientswitch__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-clientswitch > .ps-icon { flex: none; color: var(--ps-fg-2); }
.ps-topbar .ps-clientswitch { flex: 0 1 auto; color: var(--ps-fg); }   /* the page's text color in the top bar, not the dark rail's (audit B2) */
/* Oct 31 (Sisi, like Instagram's account switch): on a phone the closed switch is only the subscriber's name and a small chevron, no pill
   and no mark (the pill took too much room). It still opens the same picker in the drawer; the desktop rail keeps its card. */
.ps-topbar .ps-clientswitch { min-height: var(--ps-size-control); margin-left: calc(-1 * var(--ps-space-2)); padding: 0 var(--ps-space-2); gap: var(--ps-space-1);
  border: 0; border-radius: var(--ps-radius-control); background: none; font-size: var(--ps-type-control-phone); font-weight: 600; }
.ps-topbar .ps-clientswitch:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.ps-topbar .ps-clientswitch__dot { display: none; }
.ps-topbar .ps-clientswitch__text { flex: 0 1 auto; }
.ps-topbar .ps-clientswitch > .ps-icon { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); }
.ps-clientpick > .ps-input { flex: none; min-height: var(--ps-size-control); }   /* the search keeps its height in the drawer's column (audit B3) */
.ps-clientpick { display: flex; flex-direction: column; gap: var(--ps-space-3); padding-top: var(--ps-space-4); min-height: 0; }
.ps-clientpick__list { display: flex; flex-direction: column; gap: var(--ps-space-1); }
.ps-clientpick__item { display: flex; align-items: center; gap: var(--ps-space-3); width: 100%; min-height: var(--ps-size-touch); padding: 0 var(--ps-space-2);
  border: 0; border-radius: var(--ps-radius-control); background: none; color: var(--ps-fg); cursor: pointer; text-align: left; font: 400 var(--ps-type-field)/1.3 var(--ps-font-ui); }
.ps-clientpick__item:hover, .ps-clientpick__item:focus-visible, .ps-clientpick__item[aria-pressed="true"] { background: var(--ps-chip); }
.ps-clientpick__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-clientpick__status { flex: none; color: var(--ps-fg-3); font-size: var(--ps-type-caption); }
.ps-clientpick__item > .ps-icon { flex: none; color: var(--ps-accent-stroke); }
.ps-clientpick__empty { margin: 0; padding: var(--ps-space-3) var(--ps-space-2); color: var(--ps-fg-3); font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); }

/* The secondary menus' groups (My Work, Company, Account; inside a panel, Work or Operations), named in small capitals (R12, Nov 6). */
.ps-account__group { display: flex; flex-direction: column; gap: var(--ps-space-2); }
.ps-account__head { margin: 0; padding: 0 var(--ps-space-2); font: 500 var(--ps-type-label)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }

/* ======================================================================================================
   Studio home (GTM-378, S-20, Oct 17, 2026; the prototype's board "1 · Studio home", docs/design/REDESIGN-BUILD.md)
   One box on top (what to make, the format it will use, Make It), the Cast row, then the format tiles, all the same size.
   The same components on a phone and the desktop: only the columns and the type step change (S-26).
   ====================================================================================================== */
.ps-studio-home { display: flex; flex-direction: column; gap: var(--ps-space-6); width: 100%; min-width: 0; }   /* full width of the page (Sisi, Oct 17) */
.ps-studio-home *, .ps-studio-home *::before, .ps-studio-home *::after { box-sizing: border-box; }   /* also on pages outside .ps-page */
.ps-studio-home__section { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-studio-home__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ps-space-3); }
.ps-studio-home__head > :first-child, .ps-studio-home__section > .ps-section { margin: 0; }
@media (max-width: 720px) { .ps-studio-home { gap: var(--ps-space-5); } }

/* ---------- The box: what to make (.ps-studio-box on a .ps-card): the agent's line, the field, the format it will use, Make It ---------- */
.ps-studio-box { gap: var(--ps-space-3); }
.ps-studio-box__ask { display: flex; align-items: flex-start; gap: var(--ps-space-3); margin: 0; font: 400 var(--ps-type-title)/1.45 var(--ps-font-ui); color: var(--ps-agent-fg); }
.ps-studio-box__agent { flex: none; width: var(--ps-size-head-button); height: var(--ps-size-head-button); border-radius: 50%; background: var(--ps-color-lavender);
  box-shadow: 0 0 0 var(--ps-space-1) var(--ps-agent-bg); }   /* the agent is lavender (AI only), never a dark panel */
.ps-studio-box textarea.ps-input { min-height: calc(var(--ps-size-touch) * 2); resize: none; font-size: var(--ps-type-field); }
.ps-studio-box__as { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ps-space-2); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-studio-box__as .ps-btn .ps-icon { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); }
.ps-studio-box__go { width: 100%; }
@media (max-width: 720px) { .ps-studio-box.ps-card { padding: var(--ps-space-4); } .ps-studio-box__go { min-height: var(--ps-size-touch); } }

/* ---------- The Cast row (.ps-cast-row): round faces with their @handles, Add to Cast last; scrolls sideways on a phone ---------- */
.ps-cast-row { display: flex; gap: var(--ps-space-3); margin: 0; padding: 0 0 var(--ps-space-1); list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.ps-cast-row::-webkit-scrollbar { display: none; }
.ps-cast-row__item { flex: none; width: calc(var(--ps-space-7) + var(--ps-space-4)); display: flex; flex-direction: column; align-items: center; gap: var(--ps-space-2);
  scroll-snap-align: start; color: var(--ps-fg-2); text-decoration: none; font-size: var(--ps-type-caption); }
.ps-cast-row__face { width: calc(var(--ps-size-touch) + var(--ps-space-3)); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--ps-series, var(--ps-color-sprout)); color: var(--ps-series-on, var(--ps-color-ink)); font: 500 var(--ps-type-title)/1 var(--ps-font-ui); }
.ps-cast-row__face img { width: 100%; height: 100%; object-fit: cover; }
.ps-cast-row__handle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-cast-row__item--add .ps-cast-row__face { background: none; color: var(--ps-fg-2); box-shadow: inset 0 0 0 1.5px var(--ps-line); }
.ps-cast-row__item--add:hover .ps-cast-row__face { background: var(--ps-chip); }
button.ps-cast-row__item { padding: 0; border: 0; background: none; font: inherit; font-size: var(--ps-type-caption); cursor: pointer; }   /* a face that types its @handle into the box */
button.ps-cast-row__item:active .ps-cast-row__face { transform: scale(var(--ps-press-scale)); }
.ps-cast-row__face { transition: transform var(--ps-dur-press) var(--ps-ease-out); }
.ps-cast-row__item:focus-visible { outline: none; }
.ps-cast-row__item:focus-visible .ps-cast-row__face { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-cast-row__empty { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ps-space-3); margin: 0; color: var(--ps-fg-2); font-size: var(--ps-type-body); }

/* ---------- Format tiles (.ps-format-tiles): every tile the same size; two columns on a phone, three on the desktop.
   A live format is a link (.ps-format-tile); one not built yet is .is-soon with a Coming Soon tag; .is-picked is the box's format.
   Equal rows (grid-auto-rows: 1fr): a tile that needs more room grows every tile with it ---------- */
.ps-format-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--ps-space-4); margin: 0; padding: 0; list-style: none; }
.ps-format-tiles > li { display: flex; min-width: 0; }
.ps-format-tile { position: relative; flex: 1; min-width: 0; min-height: calc(var(--ps-space-7) * 2.5); display: flex; flex-direction: column; justify-content: space-between; gap: var(--ps-space-2);
  padding: var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line);
  color: var(--ps-fg); text-decoration: none; transition: transform var(--ps-dur-press) var(--ps-ease-out), background-color var(--ps-dur-base) ease; }
.ps-format-tile__name { font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; }
.ps-format-tile__line { font-size: var(--ps-type-caption); line-height: 1.35; color: var(--ps-fg-2); }
.ps-format-tile .ps-tag--soon { order: -1; align-self: flex-start; }   /* above the name, in the flow: never over it */
a.ps-format-tile:active { transform: scale(var(--ps-press-scale)); }
a.ps-format-tile:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { a.ps-format-tile:hover { background: var(--ps-glass-solid); } }
.ps-format-tile.is-picked { background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none; }
.ps-format-tile.is-picked .ps-format-tile__line { color: var(--ps-color-loop-learn-deep); }
.ps-format-tile.is-soon { color: var(--ps-fg-3); box-shadow: inset 0 0 0 1px var(--ps-line); background: none; }
.ps-format-tile.is-soon .ps-format-tile__line { color: var(--ps-fg-3); }
@media (max-width: 720px) {
  .ps-format-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-3); }
  .ps-format-tile { min-height: calc(var(--ps-space-7) * 2); padding: var(--ps-space-3) var(--ps-space-4); }
  .ps-format-tile__name { font-size: var(--ps-type-story-mark); }
}
@media (prefers-reduced-motion: reduce) { a.ps-format-tile { transition: none; } a.ps-format-tile:active { transform: none; } }

/* ======================================================================================================
   The Studio by what you make (GTM-378, S-42, Oct 24, 2026; the Studio Redesign prototype, boards 01 to 11): Explore's box with
   what it understood, the examples with Recreate, Make One of Your Ideas, the preset picker that takes over the history (Looks on
   Image, presets on Video), the big preset card at the top of Video's left column, and the three steps of an empty Video.
   Every card is square or the preset card's 3:4; the art is a series color until the Effects Library has previews (GTM-393).
   ====================================================================================================== */
.ps-explore { display: flex; flex-direction: column; gap: var(--ps-space-6); width: 100%; min-width: 0; }
.ps-explore *, .ps-explore *::before, .ps-explore *::after { box-sizing: border-box; }
.ps-explore__section { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-explore__section > .ps-section { margin: 0; }
@media (max-width: 720px) { .ps-explore { gap: var(--ps-space-5); } }

/* ---------- What the box understood (.ps-understood): "Understood:" and a chip per reading, each one tap to change ---------- */
.ps-understood { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ps-space-2); min-height: var(--ps-size-control-sm); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-understood__label { font: 400 var(--ps-type-micro)/1.3 var(--ps-font-mono); }
.ps-understood__hint { margin-left: auto; font: 400 var(--ps-type-micro)/1.3 var(--ps-font-mono); color: var(--ps-fg-3); }
.ps-understood .ps-chip[data-part="hub"] { background: var(--ps-color-loop-make-soft); color: var(--ps-fg); }
@media (max-width: 720px) { .ps-understood__hint { display: none; } }

/* ---------- The examples (.ps-examples > .ps-example): six across on a wide screen, two on a phone; square art with its tag ---------- */
.ps-examples { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ps-space-4); margin: 0; padding: 0; list-style: none; }
.ps-example { position: relative; display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-example__art { position: relative; aspect-ratio: 1; border-radius: var(--ps-radius-card); overflow: hidden; display: flex; align-items: flex-end; padding: var(--ps-space-2);
  background: var(--ps-series, var(--ps-color-sprout)); }
.ps-example__tag { padding: var(--ps-space-1) var(--ps-space-2); border-radius: var(--ps-radius-small); background: var(--ps-color-scrim-strong); color: var(--ps-color-on-dark);
  font: 500 var(--ps-type-micro)/1 var(--ps-font-mono); text-transform: uppercase; }
.ps-example__cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ps-space-2); font-size: var(--ps-type-caption); min-width: 0; }
.ps-example__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-example__meta { flex: none; font: 400 var(--ps-type-micro)/1.3 var(--ps-font-mono); color: var(--ps-fg-2); }
.ps-example__go { align-self: flex-start; }
@media (hover: hover) and (pointer: fine) {
  .ps-example__go { position: absolute; top: var(--ps-space-2); right: var(--ps-space-2); opacity: 0; transition: opacity var(--ps-dur-base) ease; }
  .ps-example:hover .ps-example__go, .ps-example__go:focus-visible { opacity: 1; }
}
@media (max-width: 1100px) { .ps-examples { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ps-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-3); } }

/* ---------- Make One of Your Ideas (.ps-idea-cards > .ps-idea-card): the idea, its best format, Make It ---------- */
.ps-idea-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-4); margin: 0; padding: 0; list-style: none; }
.ps-idea-card { display: flex; align-items: center; gap: var(--ps-space-3); min-width: 0; padding: var(--ps-space-3); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); }
.ps-idea-card__art { flex: none; width: var(--ps-size-touch); aspect-ratio: 1; border-radius: var(--ps-radius-control); background: var(--ps-series, var(--ps-chip)); }
.ps-idea-card__text { display: flex; flex-direction: column; gap: var(--ps-space-1); flex: 1; min-width: 0; }
.ps-idea-card__title { font-weight: 500; font-size: var(--ps-type-caption); line-height: 1.3; }
.ps-idea-card__best { font: 400 var(--ps-type-micro)/1.3 var(--ps-font-mono); color: var(--ps-fg-2); }
@media (max-width: 1100px) { .ps-idea-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The preset picker (.ps-preset-picker): takes over the history; kinds as chips, a search, Close, then the cards ---------- */
.ps-preset-picker { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; padding: var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong);
  box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-preset-picker *, .ps-preset-picker *::before, .ps-preset-picker *::after { box-sizing: border-box; }
.ps-preset-picker__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ps-space-3); }
.ps-preset-picker__title { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); }
.ps-preset-picker__kinds { order: 3; flex: 1 1 100%; min-width: 0; }   /* the kinds on their own row, under the title, the search and Close */
.ps-preset-picker__kinds .ps-chip[aria-pressed="true"] { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-preset-picker__search { margin-left: auto; display: inline-flex; align-items: center; gap: var(--ps-space-2); height: var(--ps-size-control-sm); padding: 0 var(--ps-space-3); border-radius: var(--ps-radius-pill);
  background: var(--ps-chip); color: var(--ps-fg-2); }
.ps-preset-picker__search input { width: calc(var(--ps-space-7) * 3); min-width: 0; font-size: var(--ps-type-caption); color: var(--ps-fg); }
.ps-preset-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--ps-space-7) * 3), 1fr)); gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; }
.ps-preset-picker__empty { grid-column: 1 / -1; color: var(--ps-fg-2); font-size: var(--ps-type-caption); }
.ps-preset-picker__note { margin: 0; }
.ps-preset-card { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: var(--ps-space-1); padding: 0; border: 0; background: none; color: var(--ps-fg); text-align: left; font: inherit; cursor: pointer; }
.ps-preset-card__art { position: relative; aspect-ratio: 1; border-radius: var(--ps-radius-control); overflow: hidden; display: grid; place-items: center; background: var(--ps-series, var(--ps-chip));
  transition: transform var(--ps-dur-press) var(--ps-ease-out); }
.ps-preset-picker--tall .ps-preset-card__art { aspect-ratio: 3 / 4; }
.ps-preset-card__art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-preset-card.is-plain .ps-preset-card__art { background: none; box-shadow: inset 0 0 0 1.5px var(--ps-line); }
.ps-preset-card__none { font: 400 var(--ps-type-micro)/1 var(--ps-font-mono); color: var(--ps-fg-2); }
.ps-preset-card__name { font-size: var(--ps-type-caption); font-weight: 500; }
.ps-preset-card__line { font: 400 var(--ps-type-micro)/1.3 var(--ps-font-mono); color: var(--ps-fg-2); }
.ps-preset-card[aria-pressed="true"] .ps-preset-card__art { box-shadow: 0 0 0 2px var(--ps-page), 0 0 0 4px var(--ps-color-sprout); }
.ps-preset-card:active .ps-preset-card__art { transform: scale(var(--ps-press-scale)); }
.ps-preset-card:focus-visible { outline: none; }
.ps-preset-card:focus-visible .ps-preset-card__art { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
@media (max-width: 720px) {
  .ps-preset-picker { padding: var(--ps-space-3); }
  .ps-preset-picker__kinds { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ps-preset-picker__search { flex: 1; }
  .ps-preset-picker__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-2); }
}
@media (prefers-reduced-motion: reduce) { .ps-preset-card__art { transition: none; } .ps-preset-card:active .ps-preset-card__art { transform: none; } }

/* ---------- The preset card (.ps-preset-now): the big card on top of Video's left column, its name and kind, and Change ---------- */
.ps-preset-now { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--ps-space-1); width: 100%; min-height: calc(var(--ps-space-7) * 4);
  padding: var(--ps-space-3); border: 0; border-radius: var(--ps-radius-card); overflow: hidden; background: var(--ps-series, var(--ps-color-loop-make)); color: var(--ps-series-on, var(--ps-fg));
  text-align: left; font: inherit; cursor: pointer; }
.ps-preset-now__name { font: 400 var(--ps-type-section)/0.95 var(--ps-font-display); }
.ps-preset-now__line { font: 400 var(--ps-type-micro)/1.3 var(--ps-font-mono); opacity: .8; }
.ps-preset-now__change { position: absolute; top: var(--ps-space-2); right: var(--ps-space-2); display: inline-flex; align-items: center; height: var(--ps-size-control-sm); padding: 0 var(--ps-space-3);
  border-radius: var(--ps-radius-pill); background: var(--ps-glass-strong); color: var(--ps-fg); font-size: var(--ps-type-caption); font-weight: 500; }
.ps-preset-now:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-preset-now:active { transform: scale(var(--ps-press-scale)); }
@media (prefers-reduced-motion: reduce) { .ps-preset-now:active { transform: none; } }

/* ---------- Three steps (.ps-studio-steps): an empty Video's first time, then a link to Explore ---------- */
.ps-studio-steps { display: flex; flex-direction: column; gap: var(--ps-space-4); padding: var(--ps-space-6) var(--ps-space-4); }
.ps-studio-steps__title { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); }
.ps-studio-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.ps-studio-steps__list > li { display: flex; flex-direction: column; gap: var(--ps-space-2); counter-increment: step; }
.ps-studio-steps__list > li::before { content: counter(step, decimal-leading-zero); font: 400 var(--ps-type-micro)/1 var(--ps-font-mono); color: var(--ps-fg-2); }
.ps-studio-steps__name { font-weight: 500; }
.ps-studio-steps__line { font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); }
@media (max-width: 720px) { .ps-studio-steps__list { grid-template-columns: minmax(0, 1fr); } .ps-studio-steps { padding: var(--ps-space-4) 0; } }

/* ---------- The Studio's two columns (.ps-studio-split; boards 10 and 11: Short Film, the Explainer; Posts' history beside its
   form): the form in a card on the left (.ps-studio-split__col), what it makes on the right (.ps-studio-split__main). On a wide
   screen the form stays while the right side works (the page's show() keeps its step, since [hidden] is always hidden), so a change is one edit away;
   below 1024px the steps go back to one at a time, the form first. .ps-studio-split__idle fills the right before anything is made;
   .ps-studio-split__back (Back to the form) only shows when the form isn't beside it. ---------- */
.ps-movie.ps-movie--split { max-width: none; }
.ps-studio-split { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; gap: var(--ps-space-6); min-width: 0; }
.ps-studio-split__col { position: sticky; top: var(--ps-space-4); display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; padding: var(--ps-space-4);
  border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-studio-split__col .ps-movie__step { gap: var(--ps-space-4); }
.ps-studio-split__col:not(:has(> :not([hidden]))) { display: none; }   /* nothing in it shown yet (a page still asking which subscriber): no empty card (Nov 6, 2026) */
.ps-studio-split__col .ps-card.ps-studio-box, .ps-studio-split__col .ps-card { padding: var(--ps-space-3); box-shadow: none; background: var(--ps-chip); }
.ps-studio-split__col .ps-movie-bar { flex-direction: column; align-items: stretch; }
.ps-studio-split__col .ps-movie-bar .ps-movie-bar__text { flex: none; }
.ps-studio-split__col .ps-movie-bar .ps-btn { width: 100%; }
.ps-studio-split__main { display: flex; flex-direction: column; gap: var(--ps-space-5); min-width: 0; }
.ps-studio-split__main:has(> .ps-movie__step:not([hidden])) > .ps-studio-split__idle { display: none; }
.ps-studio-split__main > .ps-studio-split__idle, .ps-studio-split__main > .ps-movie__step { order: -1; }   /* what's being made first, the list of past ones under it */
.ps-studio-split__back { display: none; }
/* GTM-399 part 4: a step that needs the whole width (a talking video's review): the form's column steps aside (.ps-studio-split--full). */
.ps-studio-split--full { grid-template-columns: minmax(0, 1fr); }
.ps-studio-split--full > .ps-studio-split__col { display: none; }
.ps-studio-split__src { width: 100%; }
.ps-studio-split__src > button { flex: 1; }

/* ---------- Posts (board 07): the slide strip (.ps-slide-strip > .ps-slide): 4:5 cards in a row that scrolls sideways, the cover
   (.ps-slide--cover, lime) and the last slide (.ps-slide--end, ink) around the points; each point's words are typed on its card
   (.ps-slide__input). The bottom composer (.ps-post-dock): the pictures, the words, Make the Set with the quote, then the chips;
   it stays at the bottom of the screen while the page scrolls, above the phone's tab bar. ---------- */
.ps-slide-strip { display: flex; gap: var(--ps-space-3); padding-bottom: var(--ps-space-1); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.ps-slide-strip[hidden] { display: none; }
.ps-slide-strip__points { display: contents; }
.ps-slide { flex: none; width: calc(var(--ps-space-7) * 4); aspect-ratio: 4 / 5; display: flex; flex-direction: column; gap: var(--ps-space-2); padding: var(--ps-space-3);
  border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); scroll-snap-align: start; }
.ps-slide__n { font: 400 var(--ps-type-micro)/1 var(--ps-font-mono); color: var(--ps-fg-2); text-transform: uppercase; }
.ps-slide__text { font: 400 var(--ps-type-section)/1 var(--ps-font-display); overflow-wrap: anywhere; }
.ps-slide__input { flex: 1; width: 100%; resize: none; font: 500 var(--ps-type-body)/1.35 var(--ps-font-ui); color: inherit; }
.ps-slide__input::placeholder { color: var(--ps-fg-3); }
.ps-slide:focus-within { box-shadow: inset 0 0 0 2px var(--ps-focus); }
.ps-slide--cover { cursor: text; background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none; }
.ps-slide--cover .ps-slide__n { color: var(--ps-color-ink); opacity: .7; }
.ps-slide--end { background: var(--ps-color-ink); color: var(--ps-color-on-dark); box-shadow: none; }
.ps-slide--end .ps-slide__n { color: var(--ps-color-on-dark); opacity: .7; }
.ps-slide--end .ps-slide__input::placeholder { color: var(--ps-color-on-dark); opacity: .5; }
.ps-post-dock { position: sticky; bottom: var(--ps-space-4); z-index: var(--ps-layer-dropdown); display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "pics words go" "chips chips chips"; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); padding: var(--ps-space-3);
  border-radius: var(--ps-radius-card); background: var(--ps-glass-solid); box-shadow: var(--ps-glass-shadow); }
.ps-post-dock__pics { grid-area: pics; }
.ps-post-dock__words { grid-area: words; display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-post-dock__words input { width: 100%; min-height: var(--ps-size-control); font: 400 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-post-dock__words input::placeholder { color: var(--ps-fg-3); }
.ps-post-dock__note { font-size: var(--ps-type-caption); line-height: 1.35; color: var(--ps-fg-2); }
.ps-post-dock__go { grid-area: go; display: flex; flex-direction: column; align-items: stretch; gap: var(--ps-space-1); text-align: center; }
.ps-post-dock__go .ps-movie-bar__price, .ps-post-dock__go .ps-movie-bar__price.is-empty { font: 500 var(--ps-type-micro)/1.3 var(--ps-font-mono); color: var(--ps-fg-2); }   /* "up to N credits" under the button, as on Generate */
.ps-post-dock__chips { grid-area: chips; display: flex; align-items: center; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-post-dock__chips > .ps-hint { flex: 1; min-width: 0; }
.ps-post-dock:focus-within { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
@media (max-width: 720px) {
  .ps-slide { width: calc(var(--ps-space-7) * 3); }
  html.ps-shell-on .ps-post-dock { bottom: calc(var(--ps-space-7) + var(--ps-space-6) + var(--ps-space-4) + env(safe-area-inset-bottom, 0px)); }   /* above the tab bar */
  .ps-post-dock { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pics words" "go go" "chips chips"; }
  .ps-post-dock__go { flex-direction: row-reverse; align-items: center; justify-content: space-between; }
}
@media (max-width: 1023px) {
  .ps-studio-split { grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-5); }
  .ps-studio-split__col { position: static; padding: 0; background: none; box-shadow: none; }
  .ps-studio-split__col:not(:has(> .ps-movie__step:not([hidden]))) { display: none; }
  .ps-studio-split__back { display: flex; }
  .ps-studio-split__idle { display: none; }
}

/* ---------- GTM-402 the guided Explainer (docs/studio/EXPLAINER-REWORK.md 2.7): steps as panels side by side (.ps-flow-cols >
   .ps-flow-col, 2:3; a full-width step under them is a .ps-flow-col on its own), the phone's step line (.ps-flow-line, a .ps-steps
   shown below 1024px only), an option card with its letter (.ps-option, A or B), the "or" between two options (.ps-or), a chat
   under a field (.ps-enhance), three choices in a row (.ps-choices--three), pieces attached to a chat message (.ps-bubble__media),
   the storyboard as a grid of scene cards (.ps-scenes > .ps-scene: the frame with its number, time and tags, the fields, the
   tools), what the storyboard will hold before it exists (.ps-board-idle) and the finished video beside its script
   (.ps-result-wide). Below 1024px the page shows one step at a time (its own show()); the panels lose their card. ---------- */
.ps-flow-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--ps-space-4); align-items: start; min-width: 0; }
.ps-flow-col { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; padding: var(--ps-space-5); border-radius: var(--ps-radius-card);
  background: var(--ps-glass-solid); box-shadow: var(--ps-glass-shadow); }
.ps-flow-col[hidden] { display: none; }
.ps-flow-col__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ps-space-3); }
.ps-flow-col__title { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); }
.ps-flow-col__sub { margin-left: auto; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-flow-col.is-waiting > :not(.ps-flow-col__head) { opacity: .55; }
.ps-flow-line { display: none; }
.ps-option { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; padding: var(--ps-space-3); border-radius: var(--ps-radius-card); background: var(--ps-chip); }
.ps-option[hidden] { display: none; }
.ps-option__head { display: flex; align-items: flex-start; gap: var(--ps-space-3); }
.ps-option__letter { flex: none; width: var(--ps-space-6); height: var(--ps-space-6); border-radius: 50%; display: grid; place-items: center; background: var(--ps-color-sprout);
  color: var(--ps-color-ink); font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); }
.ps-option__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ps-space-2); font: 500 var(--ps-type-body)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-option__line { display: block; font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg-2); }
.ps-flow-col .ps-input { box-sizing: border-box; max-width: 100%; }
.ps-option textarea.ps-input { resize: vertical; line-height: 1.55; }
.ps-option--script textarea.ps-input { min-height: calc(var(--ps-size-touch) * 5); }
.ps-or { display: flex; align-items: center; gap: var(--ps-space-3); font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-or::before, .ps-or::after { content: ""; flex: 1; height: 1px; background: var(--ps-line); }
.ps-enhance { display: flex; flex-direction: column; gap: var(--ps-space-2); padding-top: var(--ps-space-2); border-top: 1px solid var(--ps-line); }
.ps-enhance[hidden] { display: none; }
.ps-choices--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .ps-choices--three { grid-template-columns: minmax(0, 1fr); } }
.ps-bubble__media { display: flex; flex-wrap: wrap; gap: var(--ps-space-1); margin-top: var(--ps-space-2); }
.ps-bubble__media > span, .ps-bubble__media > img { width: calc(var(--ps-space-7) * 1.1); aspect-ratio: 1; border-radius: var(--ps-radius-small); object-fit: cover; display: grid; place-items: center; background: var(--ps-chip); }
.ps-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; min-width: 0; }
.ps-scene { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; padding: var(--ps-space-3); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-scene__frame { position: relative; aspect-ratio: 16 / 10; border-radius: var(--ps-radius-control); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--ps-space-2);
  padding: var(--ps-space-2); background: var(--ps-series, var(--ps-color-loop-make-soft)); color: var(--ps-series-on, var(--ps-color-ink)); }
.ps-scene__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ps-space-2); }
/* GTM-402 (Nov 2, Sisi): a scene's two frames side by side, the footage (.ps-scene__shot: the piece's picture where the scene starts,
   or .ps-scene__ground) and the graphic over it (.ps-scene__look: a .ps-sketch of the effect with the scene's words), in the video's
   shape (data-shape). A frame is a button when it opens Change Piece or Change Effect. */
.ps-scene__frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-2); }
.ps-scene__shot, .ps-scene__look { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ps-space-1); aspect-ratio: 9 / 16; min-width: 0;
  margin: 0; padding: var(--ps-space-2); border: 0; border-radius: var(--ps-radius-control); overflow: hidden; background: var(--ps-color-ink); color: var(--ps-color-on-dark); font: inherit; text-align: left; container-type: inline-size; }
.ps-scene__frames[data-shape="1:1"] > * { aspect-ratio: 1; }
.ps-scene__frames[data-shape="16:9"] > * { aspect-ratio: 16 / 9; }
.ps-scene__shot > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-scene__shot > .ps-scene__tag:last-child { margin-top: auto; }
.ps-scene__shot > .ps-scene__tag, .ps-scene__look > :is(.ps-scene__tag, .ps-scene__fx) { position: relative; flex: none; }
button:is(.ps-scene__shot, .ps-scene__look) { cursor: pointer; }
button:is(.ps-scene__shot, .ps-scene__look):is(:hover, :focus-visible) { box-shadow: inset 0 0 0 2px var(--ps-color-sprout); outline: none; }
.ps-scene__ground { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ps-color-graphite); color: var(--ps-color-on-dark); font: 500 var(--ps-type-caption)/1.3 var(--ps-font-ui); }
.ps-sketch { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2cqi; text-align: center; overflow: hidden; overflow-wrap: anywhere; }
.ps-sketch--top { justify-content: flex-start; padding-top: 10cqi; }
.ps-sketch--bottom { justify-content: flex-end; align-items: flex-start; text-align: left; padding-bottom: 10cqi; }
.ps-sketch__head { font: 400 12cqi/1 var(--ps-font-display); }
.ps-sketch__bold { font: 400 15cqi/.95 var(--ps-font-display); }
.ps-sketch__light { font: 300 7cqi/1.15 var(--ps-font-ui); }
.ps-sketch__sub { font: 400 6cqi/1.3 var(--ps-font-ui); opacity: .85; }
.ps-sketch__hand { font: 400 10cqi/1 var(--ps-font-human); color: var(--ps-color-sprout); }
.ps-sketch__none { font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); opacity: .7; }
.ps-sketch__mark { background: none; color: inherit; }
.ps-sketch__mark--accent { color: var(--ps-color-sprout); }
.ps-sketch__mark--circle { padding: 0 .15em; border-radius: 50%; box-shadow: 0 0 0 2px var(--ps-color-sprout); }
.ps-sketch__mark--under { text-decoration: underline 3px var(--ps-color-sprout); text-underline-offset: .12em; }
.ps-sketch__list { display: flex; flex-direction: column; gap: 2cqi; margin: 0; padding: 0; list-style: none; font: 500 6cqi/1.3 var(--ps-font-ui); }
.ps-sketch__list > li { padding: 1cqi 4cqi; border-radius: var(--ps-radius-pill); background: color-mix(in oklab, var(--ps-color-on-dark) 14%, transparent); }
.ps-sketch__ring { position: relative; width: 70%; aspect-ratio: 1; margin: 6cqi 0; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ps-color-sprout); }
.ps-sketch__ring-mid { max-width: 70%; font: 400 9cqi/1 var(--ps-font-display); }
.ps-sketch__ring-item { position: absolute; padding: 1cqi 3cqi; border-radius: var(--ps-radius-pill); background: var(--ps-color-sprout); color: var(--ps-color-ink); font: 500 5cqi/1.2 var(--ps-font-ui); white-space: nowrap; }
.ps-sketch__ring-item:nth-child(2) { top: 0; left: 50%; transform: translate(-50%, -50%); }
.ps-sketch__ring-item:nth-child(3) { top: 50%; right: 0; transform: translate(40%, -50%); }
.ps-sketch__ring-item:nth-child(4) { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.ps-sketch__ring-item:nth-child(5) { top: 50%; left: 0; transform: translate(-40%, -50%); }
.ps-scene__n { font: 400 var(--ps-type-story-mark)/1 var(--ps-font-display); }
.ps-scene__tags { display: flex; flex-wrap: wrap; gap: var(--ps-space-1); }
.ps-scene__tag, .ps-scene__fx { display: inline-flex; align-items: center; gap: var(--ps-space-1); max-width: 100%; padding: 2px var(--ps-space-2); border-radius: var(--ps-radius-pill);
  background: var(--ps-page); color: var(--ps-fg); font: 500 var(--ps-type-micro)/1.3 var(--ps-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-scene__time { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-scene__warn { margin: 0; font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-warn); }
.ps-scene__said { min-height: calc(var(--ps-size-touch) * 1.6); resize: vertical; }
.ps-scene__pick { display: flex; flex-direction: column; gap: var(--ps-space-2); padding: var(--ps-space-2); border-radius: var(--ps-radius-control); background: var(--ps-chip); }
.ps-scene__acts { display: flex; flex-wrap: wrap; gap: var(--ps-space-1); margin-top: auto; }
.ps-board-idle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; }
.ps-board-idle > li { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; padding: var(--ps-space-3); border-radius: var(--ps-radius-card); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-board-idle .ps-scene__frame { opacity: .45; }
.ps-result-wide { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--ps-space-6); align-items: start; }
.ps-result-wide[hidden] { display: none; }
@media (max-width: 1023px) {
  .ps-flow-cols { grid-template-columns: minmax(0, 1fr); }
  .ps-flow-col { padding: 0; background: none; box-shadow: none; }
  .ps-flow-col.is-waiting > :not(.ps-flow-col__head) { opacity: 1; }
  .ps-flow-line { display: block; }
  .ps-board-idle, .ps-result-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) { .ps-scenes { grid-template-columns: minmax(0, 1fr); } }

/* ======================================================================================================
   Brand at a glance (GTM-380, S-21, Oct 17, 2026; the prototype's boards BrandHome, BrandVoice, BrandShare, BrandPillars,
   BrandElements and BrandGame; docs/design/REDESIGN-BUILD.md section 3). The subscriber's Brand home: the brand card on top
   (logo, palette, type pairing, one voice line, Share), the voice (We are / We are not), Strategy and Pillars, then where the
   Cast and the Elements live. An empty brand shows the brand game's start instead of empty cards.
   The card shows the client's OWN colors and type (the Brand pages' exception, CLAUDE.md): PS.brandCard sets only custom
   properties through the CSSOM (--ps-brand-bg, --ps-brand-fg, --ps-brand-head, --ps-brand-body; --ps-series on a swatch), never
   a property directly and never in markup. The same components on a phone and the desktop: one column on a phone, two from
   960 px (S-26).
   ====================================================================================================== */
.ps-brand-glance { display: flex; flex-direction: column; gap: var(--ps-space-6); width: 100%; min-width: 0; }   /* the full width on a desktop, like every portal page (Oct 27, Sisi): no page-width cap */
.ps-brand-glance *, .ps-brand-glance *::before, .ps-brand-glance *::after { box-sizing: border-box; }   /* also on pages outside .ps-page */
.ps-brand-glance__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-6); align-items: start; }
.ps-brand-glance__col { display: flex; flex-direction: column; gap: var(--ps-space-6); min-width: 0; }
.ps-brand-glance__section { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-brand-glance__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ps-space-3); }
.ps-brand-glance__head > :first-child, .ps-brand-glance__section > .ps-section { margin: 0; }
@media (min-width: 960px) { .ps-brand-glance__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); } }
@media (max-width: 720px) { .ps-brand-glance, .ps-brand-glance__grid, .ps-brand-glance__col { gap: var(--ps-space-5); } }

/* ---------- The brand card (.ps-brand-card): painted in the brand's own ground and text color; the design system's light paper
   when the brand has none. Its head (the logo or the name in the brand's heading face, then Share), the palette (one swatch per
   color, at most six), the type pairing (Aa in the heading face and the two names), one voice line, and the footer mark ---------- */
.ps-brand-card { --ps-brand-bg: var(--ps-color-white); --ps-brand-fg: var(--ps-color-ink); display: flex; flex-direction: column; gap: var(--ps-space-4);
  padding: var(--ps-space-5); border-radius: calc(var(--ps-radius-card) * 1.5); background: var(--ps-brand-bg); color: var(--ps-brand-fg);
  box-shadow: inset 0 0 0 1px var(--ps-line); min-width: 0; overflow-wrap: anywhere; }
.ps-brand-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-3); min-height: var(--ps-size-touch); }
.ps-brand-card__logo { display: block; max-width: 60%; max-height: calc(var(--ps-size-touch) * 1.25); object-fit: contain; object-position: left center; }
/* several logos side by side, one per lockup (an icon and a wordmark; Oct 27, Sisi) */
.ps-brand-card__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-5); min-width: 0; }
.ps-brand-card__logos > .ps-brand-card__logo { max-width: 40%; }
.ps-brand-card__name { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-brand-head, var(--ps-font-mark)); letter-spacing: 0; color: inherit; }
.ps-brand-card__share.ps-btn { flex: none; background: var(--ps-brand-fg); color: var(--ps-brand-bg); box-shadow: none; }   /* the card's own colors, so it reads on any brand */
.ps-brand-card__share.ps-btn:hover { background: var(--ps-brand-fg); opacity: .88; }
.ps-brand-card__palette { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-brand-card__swatch { height: var(--ps-size-touch); border-radius: var(--ps-radius-control); background: var(--ps-series, var(--ps-chip));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ps-brand-fg) 14%, transparent); }
.ps-brand-card__type { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ps-space-3); margin: 0; }
.ps-brand-card__aa { font: 400 var(--ps-type-human)/1 var(--ps-brand-head, var(--ps-font-display)); letter-spacing: 0; }
.ps-brand-card__pair { font: 400 var(--ps-type-caption)/1.4 var(--ps-brand-body, var(--ps-font-ui)); opacity: .78; }
.ps-brand-card__voice { margin: 0; font: 400 var(--ps-type-title)/1.5 var(--ps-brand-body, var(--ps-font-ui)); }
.ps-brand-card__foot { margin: 0; font-size: var(--ps-type-micro); opacity: .6; }
@media (max-width: 720px) { .ps-brand-card { padding: var(--ps-space-4); gap: var(--ps-space-3); } }

/* ---------- The voice (.ps-brand-voice): We are and We are not, each a row of chips; a line that sounds like the brand ---------- */
.ps-brand-voice { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-4); }
.ps-brand-voice__group { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-brand-voice__group > .ps-labelcaps { margin: 0; color: var(--ps-fg-2); }
.ps-brand-voice__chips { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-brand-voice__chips > li { display: inline-flex; align-items: center; min-height: calc(var(--ps-size-control) - var(--ps-space-1)); padding: var(--ps-space-1) var(--ps-space-4);
  border-radius: var(--ps-radius-pill); background: var(--ps-chip); color: var(--ps-fg); font-size: var(--ps-type-caption); line-height: 1.3; }
.ps-brand-voice__group--not .ps-brand-voice__chips > li { background: none; color: var(--ps-fg-2); box-shadow: inset 0 0 0 1px var(--ps-line); }

/* ---------- Strategy and Pillars (.ps-brand-pillars): one row per pillar, a bar in its series color, the name and its line, its share ---------- */
.ps-brand-strategy { margin: 0; font-size: var(--ps-type-title); line-height: 1.5; color: var(--ps-fg); }
.ps-brand-pillars { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-brand-pillars__item { display: grid; grid-template-columns: var(--ps-space-2) minmax(0, 1fr) auto; align-items: center; gap: var(--ps-space-3);
  padding: var(--ps-space-3); border-radius: var(--ps-radius-control); background: var(--ps-chip); }
.ps-brand-pillars__bar { align-self: stretch; min-height: var(--ps-size-control); border-radius: var(--ps-radius-pill); background: var(--ps-series, var(--ps-fg-3)); }
.ps-brand-pillars__text { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-brand-pillars__name { font-size: var(--ps-type-title); font-weight: var(--ps-weight-medium); color: var(--ps-fg); }
.ps-brand-pillars__line { font-size: var(--ps-type-caption); color: var(--ps-fg-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ps-brand-pillars__share { font-size: var(--ps-type-caption); color: var(--ps-fg-2); font-variant-numeric: tabular-nums; }

/* ---------- Where the rest lives (.ps-brand-rows): a link row per area, its name and its state (a count), a chevron ---------- */
.ps-brand-rows { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-brand-rows__item { display: flex; align-items: center; gap: var(--ps-space-3); min-height: calc(var(--ps-size-touch) + var(--ps-space-1)); padding: 0 var(--ps-space-4);
  border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); color: var(--ps-fg); text-decoration: none;
  transition: transform var(--ps-dur-press) var(--ps-ease-out), background-color var(--ps-dur-base) ease; }
.ps-brand-rows__name { flex: 1; min-width: 0; font-size: var(--ps-type-title); }
.ps-brand-rows__state { font-size: var(--ps-type-caption); color: var(--ps-fg-2); text-align: right; }
.ps-brand-rows__item > .ps-icon { flex: none; width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); color: var(--ps-fg-3); }
a.ps-brand-rows__item:active { transform: scale(var(--ps-press-scale)); }
a.ps-brand-rows__item:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }

/* ---------- S-34 (Sisi, Oct 21): the Brand Dashboard. The wide grid on the desktop (direction A), the numbered order everywhere and,
   on a phone, the sections hanging on one line by their numbers (direction B). 01 is the Brand Guidelines at a glance (the card made
   wide, .ps-brand-card--hero) and opens the full guidelines; 02 Voice, 03 Strategy + Pillars, 04 Cast + Elements. The numbers wear the
   brand's own colors (PS.brandSteps sets --ps-series through the CSSOM). ---------- */
.ps-brand-dash { --step-num: var(--ps-size-control-sm); position: relative; display: flex; flex-direction: column; gap: var(--ps-space-5);
  padding-left: calc(var(--step-num) + var(--ps-space-3)); min-width: 0; }
.ps-brand-dash::before { content: ""; position: absolute; left: calc(var(--step-num) / 2 - 1px); top: var(--ps-space-6); bottom: var(--ps-space-6); width: 2px;
  border-radius: 1px; background: var(--ps-line); }   /* the line the numbers hang on */
.ps-brand-step { position: relative; display: flex; flex-direction: column; gap: var(--ps-space-5); min-width: 0; padding: var(--ps-space-5);
  border-radius: calc(var(--ps-radius-card) * 1.33); }
.ps-brand-step--hero { padding: 0; }
.ps-brand-step__num { position: absolute; left: calc(-1 * (var(--step-num) + var(--ps-space-3))); top: var(--ps-space-5); z-index: 1; display: grid; place-items: center;
  width: var(--step-num); height: var(--step-num); border-radius: 50%; background: var(--ps-series, var(--ps-fg)); color: var(--ps-color-white);
  box-shadow: 0 0 0 4px var(--ps-page); font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums; }
.ps-brand-step__num.is-light { color: var(--ps-color-ink); }
.ps-brand-step__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ps-space-3); min-width: 0; }
.ps-brand-step__title { --ps-gap: 0px; display: flex; flex-direction: column; gap: 0; min-width: 0; }   /* the section's own title-and-line spacing, not the stack's */
.ps-brand-step__title > .ps-section { margin: 0; }
.ps-brand-step__sub { margin: 0; font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg-2); }
.ps-brand-step__end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--ps-space-2); }
.ps-brand-step__end .ps-badge { white-space: nowrap; }
.ps-brand-step__lede { margin: 0; font-size: var(--ps-type-title); line-height: 1.5; color: var(--ps-fg); }
.ps-brand-step__group { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-brand-step__group > .ps-labelcaps { margin: 0; color: var(--ps-fg-2); }
.ps-brand-step__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-5); align-items: start; }
.ps-brand-goal { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: var(--ps-space-4) var(--ps-space-5); border-radius: var(--ps-radius-card); background: var(--ps-agent-bg); }
.ps-brand-goal > .ps-labelcaps { margin: 0; }
.ps-brand-goal > p:last-child { margin: 0; font-size: var(--ps-type-lede); line-height: 1.4; color: var(--ps-fg); }
/* the pillars' shares in one bar */
.ps-brand-pillarbar { display: flex; gap: 3px; height: var(--ps-space-3); border-radius: var(--ps-radius-pill); overflow: hidden; }
.ps-brand-pillarbar > span { flex: var(--ps-share, 1) 1 0; min-width: var(--ps-space-2); background: var(--ps-series, var(--ps-fg-3)); }
.ps-brand-step .ps-brand-pillars__item { background: none; padding: 0; }
.ps-brand-step .ps-brand-pillars__bar { min-height: var(--ps-space-3); height: var(--ps-space-3); width: var(--ps-space-3); align-self: start; margin-top: var(--ps-space-1); border-radius: var(--ps-radius-control); }
.ps-brand-step .ps-brand-pillars { gap: var(--ps-space-4); }
/* the Cast's faces and the Elements' pictures */
.ps-brand-faces { display: flex; flex-wrap: wrap; gap: var(--ps-space-4); margin: 0; padding: 0; list-style: none; }
.ps-brand-faces__item { display: flex; flex-direction: column; align-items: center; gap: var(--ps-space-2); width: calc(var(--ps-size-touch) * 1.45); color: var(--ps-fg); text-decoration: none; text-align: center; }
.ps-brand-faces__pic { display: grid; place-items: center; width: calc(var(--ps-size-touch) * 1.45); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--ps-chip);
  font: 400 var(--ps-type-human-sm)/1 var(--ps-font-display); color: var(--ps-fg-2); }
.ps-brand-faces__pic > img { width: 100%; height: 100%; object-fit: cover; }
.ps-brand-faces--things .ps-brand-faces__item { align-items: flex-start; text-align: left; width: calc(var(--ps-size-touch) * 1.9); }
.ps-brand-faces--things .ps-brand-faces__pic { width: 100%; border-radius: var(--ps-radius-card); aspect-ratio: 4 / 3; }
.ps-brand-faces__name { display: flex; flex-direction: column; gap: 2px; font-size: var(--ps-type-caption); line-height: 1.3; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.ps-brand-faces__name > span { color: var(--ps-fg-3); }
.ps-brand-faces__add .ps-brand-faces__pic { background: none; box-shadow: inset 0 0 0 1px var(--ps-line); border: 1px dashed var(--ps-fg-3); color: var(--ps-fg-2); }
.ps-brand-faces__add .ps-brand-faces__name { color: var(--ps-fg-2); }
a.ps-brand-faces__item:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 4px; border-radius: var(--ps-radius-control); }
/* how much is ready */
.ps-brand-progress { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-brand-progress__text { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg-2); }
.ps-brand-progress__text > b { font-weight: var(--ps-weight-medium); color: var(--ps-fg); }
.ps-brand-progress__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ps-brand-progress__bar { display: flex; gap: var(--ps-space-1); }
.ps-brand-progress__bar > span { flex: 1; height: 6px; border-radius: var(--ps-radius-pill); background: var(--ps-line); }
.ps-brand-progress__bar > span.is-done { background: var(--ps-color-lavender); }
/* 01: the card made wide */
.ps-brand-card--hero { gap: var(--ps-space-5); padding: var(--ps-space-5); box-shadow: 0 16px 48px color-mix(in oklab, var(--ps-brand-fg) 14%, transparent), inset 0 0 0 1px var(--ps-line); }
.ps-brand-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-3); }
.ps-brand-card__eyebrow { display: flex; flex-direction: column; gap: 2px; margin: 0; font: 400 var(--ps-type-caption)/1.3 var(--ps-brand-body, var(--ps-font-ui)); }
.ps-brand-card__eyebrow > b { font-weight: var(--ps-weight-medium); letter-spacing: .14em; text-transform: uppercase; font-size: var(--ps-type-micro); }
.ps-brand-card__eyebrow > span { opacity: .65; }
.ps-brand-card--hero .ps-brand-card__share.ps-btn { background: none; color: var(--ps-brand-fg); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ps-brand-fg) 25%, transparent); }
.ps-brand-card__main, .ps-brand-card__look { display: flex; flex-direction: column; gap: var(--ps-space-5); min-width: 0; }
.ps-brand-card__id { display: flex; align-items: center; gap: var(--ps-space-4); min-width: 0; }
.ps-brand-card--hero .ps-brand-card__name { font-size: var(--ps-type-number-sm); }
.ps-brand-card--hero .ps-brand-card__logo { max-width: 70%; max-height: calc(var(--ps-size-touch) * 1.6); }
.ps-brand-card--hero .ps-brand-card__voice { font: 400 var(--ps-type-human-sm)/1.25 var(--ps-brand-head, var(--ps-font-display)); }
.ps-brand-card__act { margin: 0; }
.ps-brand-card__see.ps-btn { background: var(--ps-brand-fg); color: var(--ps-brand-bg); box-shadow: none; }
.ps-brand-card__see.ps-btn:hover { background: var(--ps-brand-fg); opacity: .88; }
.ps-brand-card--hero .ps-brand-card__palette { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(calc(var(--ps-size-touch) * 1.4), 1fr)); gap: var(--ps-space-3); }
.ps-brand-card__color { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-brand-card--hero .ps-brand-card__swatch { height: calc(var(--ps-size-touch) * 1.3); border-radius: var(--ps-radius-card); }
.ps-brand-card__cname { font: 500 var(--ps-type-micro)/1.4 var(--ps-brand-body, var(--ps-font-ui)); overflow-wrap: anywhere; }
.ps-brand-card__cname > span { font-weight: 400; opacity: .6; }
.ps-brand-card--hero .ps-brand-card__type { align-items: flex-end; gap: var(--ps-space-4); padding-top: var(--ps-space-4); border-top: 1px solid color-mix(in oklab, var(--ps-brand-fg) 12%, transparent); }
.ps-brand-card--hero .ps-brand-card__aa { font-size: var(--ps-type-number); line-height: .9; }
@media (min-width: 960px) {
  .ps-brand-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 0; gap: var(--ps-space-5); }
  .ps-brand-dash::before { display: none; }
  .ps-brand-step--hero, .ps-brand-step--wide { grid-column: 1 / -1; }
  .ps-brand-step--two { grid-column: span 2; }
  .ps-brand-step__num { position: static; flex: none; box-shadow: none; }
  .ps-brand-step__head { align-items: center; }
  .ps-brand-step__head > .ps-brand-step__num + .ps-brand-step__title { margin-right: auto; }
  .ps-brand-step__head { justify-content: flex-start; gap: var(--ps-space-4); }
  .ps-brand-step__end { flex-direction: row; align-items: center; gap: var(--ps-space-4); }
  /* a narrow card keeps its title on one line and moves the badge and Edit under it (Oct 28: Voice and Tone broke over three lines) */
  .ps-brand-step__head { flex-wrap: wrap; }
  .ps-brand-step__head > .ps-brand-step__title { flex: 1 1 0; min-width: auto; }
  .ps-brand-step__head > .ps-brand-step__title > .ps-section { white-space: nowrap; }
  .ps-brand-step__head > .ps-brand-step__end { margin-left: auto; }
  .ps-brand-step--hero > .ps-brand-step__num { position: absolute; left: var(--ps-space-7); top: var(--ps-space-6); }
  .ps-brand-card--hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--ps-space-7); row-gap: var(--ps-space-6);
    padding: var(--ps-space-6) var(--ps-space-7) var(--ps-space-7); border-radius: calc(var(--ps-radius-card) * 1.8); }
  .ps-brand-card--hero .ps-brand-card__top { grid-column: 1 / -1; padding-left: calc(var(--step-num) + var(--ps-space-3)); }
  .ps-brand-card--hero .ps-brand-card__main { gap: var(--ps-space-6); }
  .ps-brand-card--hero .ps-brand-card__act { margin-top: auto; }
  .ps-brand-card--hero .ps-brand-card__look { justify-content: center; }
  .ps-brand-card--hero .ps-brand-card__name { font-size: var(--ps-type-number); }
  .ps-brand-card--hero .ps-brand-card__voice { font-size: var(--ps-type-human); }
  .ps-brand-card--hero .ps-brand-card__swatch { height: calc(var(--ps-size-touch) * 2.4); }
  .ps-brand-card--hero .ps-brand-card__aa { font-size: var(--ps-type-headline-md); }
  .ps-brand-step__split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--ps-space-6); }
  .ps-brand-step__split--divided > :last-child { padding-left: var(--ps-space-6); border-left: 1px solid var(--ps-line); }
  .ps-brand-head-progress { flex: none; width: min(380px, 34vw); }
  .ps-brand-head-progress .ps-brand-progress__text { flex-direction: row; justify-content: space-between; gap: var(--ps-space-3); }
}
.ps-brand-head-progress { min-width: 0; }
/* Oct 28 (Sisi): a status beside the title (the Brand Dashboard's progress), not at the far right where the fixed corner buttons sit */
.ps-pagehead__status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ps-space-3); min-width: 0; }
@media (min-width: 960px) { .ps-pagehead__main > .ps-pagehead__status { margin-right: auto; } }
/* the logos fill the card's first column, side by side on tiles, each as large as it reads (Oct 28, Sisi: they were small in a lot of white) */
.ps-brand-card--hero .ps-brand-card__id { align-items: stretch; }
.ps-brand-card--hero .ps-brand-card__logos { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--ps-space-3); }
.ps-brand-card--hero .ps-brand-card__logos > .ps-brand-card__logo { width: 100%; max-width: none; height: calc(var(--ps-size-touch) * 2.4); max-height: none; padding: var(--ps-space-4);
  border-radius: var(--ps-radius-card); background: color-mix(in oklab, var(--ps-brand-fg) 4%, transparent); object-fit: contain; object-position: center; }
.ps-brand-card--hero .ps-brand-card__id > .ps-brand-card__logo { max-width: 100%; max-height: calc(var(--ps-size-touch) * 2.6); }
@media (min-width: 960px) {
  .ps-brand-card--hero .ps-brand-card__logos > .ps-brand-card__logo { height: calc(var(--ps-size-touch) * 3.4); padding: var(--ps-space-5); }
  .ps-brand-card--hero .ps-brand-card__id > .ps-brand-card__logo { max-height: calc(var(--ps-size-touch) * 3.4); }
}
/* 04's Voices: one line per voice, its state at the end */
.ps-brand-step__voices { margin-top: calc(var(--ps-space-section) - var(--ps-space-5)); padding-top: var(--ps-space-section-start); border-top: 1px solid var(--ps-line-strong); }   /* the section rule inside the chapter's gap (Oct 31) */
@media (max-width: 600px) { .ps-brand-step__voices { margin-top: calc(var(--ps-space-section-phone) - var(--ps-space-5)); padding-top: var(--ps-space-4); } }
.ps-brand-voices { display: flex; flex-wrap: wrap; gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; }
.ps-brand-voices__item { display: flex; align-items: center; gap: var(--ps-space-2); min-width: 0; padding: var(--ps-space-2) var(--ps-space-3) var(--ps-space-2) var(--ps-space-2);
  border-radius: var(--ps-radius-pill); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-brand-voices__name { font-weight: var(--ps-weight-medium); overflow-wrap: anywhere; }

/* ---------- S-35 (Sisi, Oct 21): the Brand Guidelines as a Book (direction A). A cover in the brand's own colors and type
   (assets/brand-guidelines.js paints --ps-brand-bg, --ps-brand-fg and --ps-brand-font through the CSSOM), then eight numbered
   chapters (.ps-brand-step in .ps-brand-dash--book: on a phone they hang on the line by their numbers); on the desktop a chapter
   rail beside them (.ps-book__nav) follows the reading. On a phone the rail is a row of chips to jump. ---------- */
.ps-book { display: flex; flex-direction: column; gap: var(--ps-space-5); min-width: 0; }
.ps-book *, .ps-book *::before, .ps-book *::after { box-sizing: border-box; }
.ps-book__main { display: flex; flex-direction: column; gap: var(--ps-space-5); min-width: 0; }
.ps-book__tools { flex-wrap: wrap; align-items: center; }
/* the book's actions follow the title on the left, as every header's do (design rule Nov 6; QA Nov 7: Something's Off sat at the far right) */
/* the rail: on a phone a row of chips, sticky under the top bar */
.ps-book__nav { position: sticky; top: var(--ps-space-2); z-index: var(--ps-layer-sticky); display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-book__nav > .ps-labelcaps { display: none; margin: 0; color: var(--ps-fg-2); }
.ps-book__toc { display: flex; gap: var(--ps-space-2); margin: 0; padding: var(--ps-space-1); list-style: none; overflow-x: auto; scrollbar-width: none;
  border-radius: var(--ps-radius-pill); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-book__toc::-webkit-scrollbar { display: none; }
.ps-book__toc a { display: inline-flex; align-items: center; gap: var(--ps-space-2); min-height: var(--ps-size-control); padding: 0 var(--ps-space-3) 0 var(--ps-space-1);
  border-radius: var(--ps-radius-pill); color: var(--ps-fg-2); text-decoration: none; white-space: nowrap; font-size: var(--ps-type-caption); }
.ps-book__toc a[aria-current="true"] { background: var(--ps-chip); color: var(--ps-fg); font-weight: var(--ps-weight-medium); }
.ps-book__toc .ps-brand-step__num { position: static; --step-num: var(--ps-size-control-sm); width: calc(var(--ps-size-control-sm) - var(--ps-space-2)); height: calc(var(--ps-size-control-sm) - var(--ps-space-2)); box-shadow: none; font-size: var(--ps-type-micro); }
.ps-book__waiting, .ps-book__aside { display: none; }   /* the rail's notes under the chapters (S-35 waiting; GTM-389 what reads the strategy): desktop only */
/* the cover */
.ps-book__cover { --ps-brand-bg: var(--ps-color-ink); --ps-brand-fg: var(--ps-color-white); display: flex; flex-direction: column; gap: var(--ps-space-4); padding: var(--ps-space-5);
  border-radius: calc(var(--ps-radius-card) * 1.5); background: var(--ps-brand-bg); color: var(--ps-brand-fg); box-shadow: 0 20px 48px color-mix(in oklab, var(--ps-brand-bg) 30%, transparent); overflow: hidden; }
.ps-book__cover > .ps-row > .ps-labelcaps { margin: 0; color: inherit; opacity: .7; }
.ps-book__name { margin: 0; font: var(--ps-brand-weight, 600) var(--ps-type-display-phone)/0.95 var(--ps-brand-font, var(--ps-font-mark)); letter-spacing: 0; overflow-wrap: anywhere; }
.ps-book__line { margin: 0; max-width: 28ch; font: 400 var(--ps-type-lede)/1.3 var(--ps-brand-font, var(--ps-font-mark)); opacity: .92; }
.ps-book__made { margin: 0; font-size: var(--ps-type-caption); opacity: .7; }
.ps-book__strip { display: flex; height: var(--ps-space-3); margin: var(--ps-space-2) calc(-1 * var(--ps-space-5)) calc(-1 * var(--ps-space-5)); }
.ps-book__strip > i { flex: 1; background: var(--ps-series, var(--ps-chip)); }
/* a chapter's title in the brand's own heading face */
.ps-book__title { margin: 0; font: var(--ps-brand-weight, 600) var(--ps-type-human-sm)/1.05 var(--ps-brand-font, var(--ps-font-display)); letter-spacing: 0; color: var(--ps-fg); }
.ps-book__lead { margin: 0; max-width: 30ch; font: 400 var(--ps-type-human-sm)/1.25 var(--ps-brand-font, var(--ps-font-mark)); color: var(--ps-fg); }
.ps-book__facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-4); }
.ps-book__fact { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-book__fact > p { margin: 0; }
.ps-book__fact > .ps-labelcaps { color: var(--ps-fg-2); }
.ps-book__fact > p:not(.ps-labelcaps) { font-size: var(--ps-type-title); line-height: 1.5; color: var(--ps-fg); }
.ps-book__swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; }
.ps-book__swatches > li { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-book__swatch { display: flex; align-items: flex-end; height: calc(var(--ps-size-touch) * 2); padding: var(--ps-space-3); border-radius: var(--ps-radius-card); background: var(--ps-series, var(--ps-chip));
  box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-book__swatch > b { padding: 2px var(--ps-space-2); border-radius: var(--ps-radius-pill); background: var(--ps-glass-strong); color: var(--ps-fg); font-size: var(--ps-type-micro); font-weight: var(--ps-weight-medium); }
.ps-book__hex { font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg); }
.ps-book__code { color: var(--ps-fg-2); font-family: var(--ps-font-mono); font-size: var(--ps-type-mono); }
.ps-brand-dash--book .ps-brand-step { gap: var(--ps-space-5); }
.ps-book__specimen { font: var(--ps-brand-weight, 400) var(--ps-brand-size, var(--ps-type-title))/1.1 var(--ps-brand-font, var(--ps-font-ui)); letter-spacing: var(--ps-brand-ls, 0); color: var(--ps-fg); white-space: nowrap; }
.ps-book__specimen--italic { font-style: italic; }
.ps-book__hier td { vertical-align: middle; }
.ps-book__twrap { max-height: none; }   /* the whole hierarchy, no inner scroll */
.ps-book__chapter { scroll-margin-top: calc(var(--ps-size-touch) * 2); }   /* a jump from the rail or the chips lands below the sticky chips */
@media (max-width: 600px) {   /* a chapter's title keeps the width on a phone: its actions (Regenerate, Edit) go on their own row under it (Oct 31) */
  .ps-book__chapter > .ps-brand-step__head { flex-wrap: wrap; }
  .ps-book__chapter > .ps-brand-step__head > .ps-brand-step__title { flex: 1 1 100%; }
  .ps-book__chapter > .ps-brand-step__head > .ps-brand-step__end { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: flex-start; }
}
@media (min-width: 960px) {
  .ps-book { display: grid; grid-template-columns: calc(var(--ps-size-touch) * 4.6) minmax(0, 1fr); gap: var(--ps-space-6); align-items: start; }
  .ps-book__nav { top: var(--ps-space-5); gap: var(--ps-space-3); }
  .ps-book__nav > .ps-labelcaps { display: block; }
  .ps-book__toc { position: relative; flex-direction: column; gap: 2px; padding: 0; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  .ps-book__toc::before { content: ""; position: absolute; left: calc((var(--ps-size-control-sm) - var(--ps-space-2)) / 2 + var(--ps-space-1) - 1px); top: var(--ps-space-4); bottom: var(--ps-space-4); width: 2px; background: var(--ps-line); }
  .ps-book__toc a { position: relative; padding-right: var(--ps-space-2); background: none; font-size: var(--ps-type-body); }
  .ps-book__toc a[aria-current="true"] { background: none; font-size: var(--ps-type-title); }
  .ps-book__toc a[aria-current="true"] .ps-brand-step__num { transform: scale(1.2); box-shadow: 0 0 0 3px var(--ps-page); }
  .ps-book__toc .ps-brand-step__num { box-shadow: 0 0 0 3px var(--ps-page); transition: transform var(--ps-dur-base) var(--ps-ease-out); }
  .ps-book__waiting, .ps-book__aside { display: flex; flex-direction: column; gap: var(--ps-space-2); padding: var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
  .ps-book__waiting > p, .ps-book__aside > p { margin: 0; }
  .ps-brand-dash--book { display: flex; }
  .ps-book__cover { gap: var(--ps-space-5); padding: var(--ps-space-7); border-radius: calc(var(--ps-radius-card) * 1.8); }
  .ps-book__strip { margin: var(--ps-space-3) calc(-1 * var(--ps-space-7)) calc(-1 * var(--ps-space-7)); height: var(--ps-space-4); }
  .ps-book__name { font-size: var(--ps-type-headline-md); }
  .ps-book__line { font-size: var(--ps-type-human); }
  .ps-book__title { font-size: var(--ps-type-section); }
  .ps-book__lead { font-size: var(--ps-type-human); }
  .ps-book__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ps-space-6); }
  .ps-book__swatches { grid-template-columns: repeat(auto-fit, minmax(calc(var(--ps-size-touch) * 3), 1fr)); }
  .ps-book__swatch { height: calc(var(--ps-size-touch) * 3); }
}
@media (prefers-reduced-motion: reduce) { .ps-book__toc .ps-brand-step__num { transition: none; } }
@media (max-width: 959px) {
  .ps-pagehead__status:has(> .ps-brand-head-progress:not([hidden])) { flex: 1 1 100%; }   /* the progress under the title, full width */
  .ps-brand-head-progress { width: 100%; padding: var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
  /* 01 on a phone: the name, the voice line, the colors and the type, then See Full Guidelines */
  .ps-brand-card--hero .ps-brand-card__main, .ps-brand-card--hero .ps-brand-card__look { display: contents; }
  .ps-brand-card--hero .ps-brand-card__act { order: 1; }
  .ps-brand-card--hero .ps-brand-card__palette { grid-template-columns: repeat(auto-fit, minmax(calc(var(--ps-size-touch) * 1.1), 1fr)); gap: var(--ps-space-2); }
}
@media (hover: hover) and (pointer: fine) { a.ps-brand-rows__item:hover { background: var(--ps-glass-solid); } }

/* ---------- An empty or first-time brand (.ps-brand-start): the brand game's first step instead of empty cards ---------- */
.ps-brand-start { gap: var(--ps-space-4); align-items: flex-start; }
.ps-brand-start__eyebrow { margin: 0; color: var(--ps-fg-2); }
.ps-brand-start__title { margin: 0; font: 400 var(--ps-type-section)/1.05 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
.ps-brand-start__lede { margin: 0; max-width: 52ch; font-size: var(--ps-type-title); line-height: 1.5; color: var(--ps-fg-2); }
.ps-brand-start__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-1); width: 100%; max-width: calc(var(--ps-space-7) * 6); margin: 0; padding: 0; list-style: none; }
.ps-brand-start__steps > li { height: var(--ps-space-1); border-radius: var(--ps-radius-pill); background: var(--ps-chip); }
.ps-brand-start__steps > li:first-child { background: var(--ps-color-sprout); }
@media (max-width: 720px) { .ps-brand-start .ps-btn { width: 100%; min-height: var(--ps-size-touch); } }
/* The empty brand's "What do you have today?" (B-50): the game's three answers as links, the game's own choice tiles */
.ps-brand-start__have { width: 100%; max-width: 60ch; }
a.ps-choice { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { a.ps-brand-rows__item { transition: none; } a.ps-brand-rows__item:active { transform: none; } }
/* The public brand card (card/index.html, GTM-380): the card alone in a narrow column, with Download Image and Make Your Own */
.ps-brand-public { display: flex; flex-direction: column; gap: var(--ps-space-5); width: 100%; max-width: calc(var(--ps-space-7) * 9); margin: var(--ps-space-7) auto; min-width: 0; }
.ps-brand-public *, .ps-brand-public *::before, .ps-brand-public *::after { box-sizing: border-box; }
.ps-brand-public__skel { height: calc(var(--ps-space-7) * 6); border-radius: calc(var(--ps-radius-card) * 1.5); }
.ps-brand-public__actions { display: flex; flex-wrap: wrap; gap: var(--ps-space-3); }
@media (max-width: 720px) { .ps-brand-public { margin: var(--ps-space-5) auto; } .ps-brand-public__actions .ps-btn { flex: 1 1 100%; min-height: var(--ps-size-touch); } }

/* ======================================================================================================
   Strategy + Pillars, the Plan (GTM-389, ST-01, Sisi Oct 21, 2026; the prototype's board StratA; docs/strategy/PLAN.md)
   The subscriber's content strategy as the Brand Guidelines Book's chapters (S-35: .ps-book, .ps-book__nav, .ps-brand-step in
   .ps-brand-dash--book; the numbers in the brand's own colors through PS.brandSteps), six of them: 01 Goal, 02 Audience, 03 Why Us,
   04 Content Pillars, 05 Mix and Cadence, 06 Offers and Moments (client/strategy.html, assets/strategy-page.js). Only what the
   Book doesn't have is here: the goal's measure (.ps-strat-kpi), the cards of the audience groups and the five pillars
   (.ps-strat-cards > .ps-strat-card), why they pick you (.ps-strat-reasons) and the proof (.ps-strat-quotes), the mix's two
   parts (.ps-strat-mix; the shares are .ps-brand-pillarbar, their names .ps-legend), dated rows for offers and moments
   (.ps-strat-dates) and the inline edit forms (.ps-strat-edit). Where a part came from is a .ps-badge.ps-filled.
   ====================================================================================================== */
.ps-brand-start, .ps-brand-start *, .ps-brand-start *::before, .ps-brand-start *::after { box-sizing: border-box; }   /* the empty start outside .ps-brand-glance (its tiles stay inside the card) */
.ps-strat-kpi { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-strat-kpi > .ps-labelcaps { margin: 0; color: var(--ps-fg-2); }
.ps-strat-kpi__num { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ps-space-2); margin: 0; font: 400 var(--ps-type-number-sm)/1 var(--ps-font-display);
  letter-spacing: 0; color: var(--ps-fg); font-variant-numeric: tabular-nums; }
.ps-strat-kpi__num > span { font: 400 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-strat-kpi__src { margin: 0; font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); }
.ps-strat-tags { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-strat-tags .ps-swatch { width: var(--ps-space-2); height: var(--ps-space-2); border-radius: 50%; }
/* the audience groups and the pillars: one card each, one column on a phone */
.ps-strat-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-4); margin: 0; padding: 0; list-style: none; }
/* the five pillars side by side on a wide screen (walkthrough R9, Nov 6) */
@media (min-width: 1280px) { .ps-strat-cards.ps-strat-cards--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ps-strat-card { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; padding: var(--ps-space-5); border-radius: var(--ps-radius-card);
  background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-strat-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ps-space-2); min-width: 0; }
.ps-strat-card__name { min-width: 0; margin: 0; font: 400 var(--ps-type-lede)/1.2 var(--ps-font-mark); color: var(--ps-fg); overflow-wrap: break-word; }
.ps-strat-card__who { margin: 0; font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); }
.ps-strat-card__facts { display: flex; flex-direction: column; gap: var(--ps-space-3); margin: 0; }
.ps-strat-card__facts > div { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-strat-card__facts dt { margin: 0; color: var(--ps-fg-2); }
.ps-strat-card__facts dd { margin: 0; font-size: var(--ps-type-body); line-height: 1.5; color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-strat-card__facts ul { display: flex; flex-direction: column; gap: var(--ps-space-1); margin: 0; padding-left: var(--ps-space-4); }
.ps-strat-card__foot { display: flex; justify-content: flex-end; margin-top: auto; }
/* The Content Pillars board (GTM-434, ST-12, Sisi Nov 8; the "Content Pillars Board" canvas). Five columns from day one: an empty one
   (.is-empty) is a dashed outline with grey shapes of what fills it and Add Pillar (the first, .is-next, in lime); a column fills as
   its pillar is typed (.is-editing, outlined in its series color; the form under the board, .ps-pillaredit) or drafted. Above, the
   share of posts (.ps-brand-pillarbar) fills the same way, its striped __left the part not planned yet. Under 960 px the five are a
   strip of small boxes (.ps-pillarboard__strip), then a card each, an empty one a dashed row. Colors (Sisi, Nov 8: never the chart
   series): the five pillars wear the loop's five colors, lavender to green and never warm (.ps-pillar-1 to .ps-pillar-5; --ps-series the
   color, --ps-pillar-ink its deep shade for words, --ps-pillar-soft its tint). Tokens only. */
.ps-pillar-1 { --ps-series: var(--ps-color-loop-know); --ps-pillar-ink: var(--ps-color-loop-know-deep); --ps-pillar-soft: var(--ps-color-loop-know-soft); }
.ps-pillar-2 { --ps-series: var(--ps-color-loop-say); --ps-pillar-ink: var(--ps-color-loop-say-deep); --ps-pillar-soft: var(--ps-color-loop-say-soft); }
.ps-pillar-3 { --ps-series: var(--ps-color-loop-make); --ps-pillar-ink: var(--ps-color-loop-make-deep); --ps-pillar-soft: var(--ps-color-loop-make-soft); }
.ps-pillar-4 { --ps-series: var(--ps-color-loop-pub); --ps-pillar-ink: var(--ps-color-loop-pub-deep); --ps-pillar-soft: var(--ps-color-loop-pub-soft); }
.ps-pillar-5 { --ps-series: var(--ps-color-loop-meas); --ps-pillar-ink: var(--ps-color-loop-meas-deep); --ps-pillar-soft: var(--ps-color-loop-meas-soft); }
:root[data-theme="dark"] :is(.ps-pillar-1, .ps-pillar-2, .ps-pillar-3, .ps-pillar-4, .ps-pillar-5), .ps-dark :is(.ps-pillar-1, .ps-pillar-2, .ps-pillar-3, .ps-pillar-4, .ps-pillar-5) {
  --ps-pillar-ink: var(--ps-series); --ps-pillar-soft: color-mix(in srgb, var(--ps-series) 18%, transparent); }
.ps-pillarboard { display: flex; flex-direction: column; gap: var(--ps-space-5); min-width: 0; }
.ps-pillarboard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ps-space-3); min-width: 0; }
.ps-pillarboard__count { font-size: var(--ps-type-caption); font-weight: var(--ps-weight-medium); color: var(--ps-fg-2); }
.ps-pillarboard__meter { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-pillarboard__meterhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ps-space-3); }
.ps-pillarboard__meterhead > .ps-labelcaps { margin: 0; color: var(--ps-fg-2); }
.ps-pillarboard__total { font-size: var(--ps-type-caption); font-weight: var(--ps-weight-medium); color: var(--ps-fg-2); font-variant-numeric: tabular-nums; }
.ps-pillarboard__total.is-over { color: var(--ps-danger); }
.ps-brand-pillarbar > .ps-brand-pillarbar__left { min-width: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ps-fg) 8%, transparent) 0 calc(var(--ps-space-1) * 1.5), color-mix(in srgb, var(--ps-fg) 3%, transparent) calc(var(--ps-space-1) * 1.5) var(--ps-space-3)); }
.ps-brand-pillarbar > span { transition: flex-grow var(--ps-dur-press) var(--ps-ease-out); }
.ps-pillarboard__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; }
.ps-pillarcol { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; padding: var(--ps-space-4); border-radius: var(--ps-radius-card);
  background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); transition: box-shadow var(--ps-dur-press) var(--ps-ease-out); }
.ps-pillarcol.is-empty { background: transparent; box-shadow: none; outline: 2px dashed color-mix(in srgb, var(--ps-fg) 18%, transparent); outline-offset: -2px; }
.ps-pillarcol.is-editing { box-shadow: inset 0 0 0 2px var(--ps-series); }
.ps-pillarcol__band { display: block; height: calc(var(--ps-space-1) * 1.5); border-radius: var(--ps-radius-pill); background: var(--ps-series, var(--ps-fg-3)); }
.ps-pillarcol.is-empty .ps-pillarcol__band { background: color-mix(in srgb, var(--ps-fg) 8%, transparent); }
.ps-pillarcol__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ps-space-2); min-height: calc(var(--ps-space-5) + 2px); }
.ps-pillarcol__num { flex: none; width: calc(var(--ps-space-5) + 2px); height: calc(var(--ps-space-5) + 2px); border-radius: 50%; display: inline-grid; place-items: center; background: var(--ps-series); color: var(--ps-color-ink);
  font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums; }
.ps-pillarcol.is-empty .ps-pillarcol__num { background: transparent; color: var(--ps-fg-2); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ps-fg) 18%, transparent); }
.ps-pillarcol__tag { padding: var(--ps-space-1) calc(var(--ps-space-2) + 2px); border-radius: var(--ps-radius-pill); background: var(--ps-pillar-soft); color: var(--ps-pillar-ink);
  font: 600 var(--ps-type-micro)/1 var(--ps-font-ui); letter-spacing: .06em; text-transform: uppercase; }
.ps-pillarcol__emptylabel { margin-right: auto; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-pillarcol__share { margin: 0; font: 400 var(--ps-type-number-sm)/.9 var(--ps-font-display); letter-spacing: 0; color: var(--ps-pillar-ink, var(--ps-fg)); font-variant-numeric: tabular-nums; }
.ps-pillarcol__name { margin: 0; font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg); overflow-wrap: break-word; }
.ps-pillarcol__name.is-placeholder { color: var(--ps-fg-3); }
.ps-pillarcol__topics { display: flex; flex-direction: column; gap: var(--ps-space-1); margin: 0; padding-left: var(--ps-space-4); font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); overflow-wrap: anywhere; }
.ps-pillarcol__formats { margin: 0; font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg-3); }
.ps-pillarcol__skel { display: flex; flex-direction: column; gap: var(--ps-space-3); }
.ps-pillarcol__skel > span { display: block; width: 80%; height: var(--ps-space-2); border-radius: var(--ps-radius-pill); background: color-mix(in srgb, var(--ps-fg) 6%, transparent); }
.ps-pillarcol__skel > span:nth-child(1) { width: calc(var(--ps-space-6) + var(--ps-space-5)); height: calc(var(--ps-space-6) - 2px); border-radius: var(--ps-radius-control); }
.ps-pillarcol__skel > span:nth-child(2) { width: 85%; height: var(--ps-space-3); }
.ps-pillarcol__skel > span:nth-child(3) { width: 50%; height: calc(var(--ps-space-4) + 2px); }
.ps-pillarcol__next { margin: 0; font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); }
.ps-pillarcol__foot { display: flex; margin-top: auto; }
.ps-pillarcol.is-empty .ps-pillarcol__foot > .ps-btn { flex: 1 1 auto; }
.ps-pillarboard__strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-pillarboard__slot { width: 100%; height: calc(var(--ps-size-touch) * 1.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ps-space-1);
  padding: 0; border: 0; border-radius: var(--ps-radius-control); background: transparent; color: var(--ps-fg-3); cursor: pointer;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ps-fg) 14%, transparent); font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); }
.ps-pillarboard__slot > b { font: 400 var(--ps-type-story-step)/1 var(--ps-font-display); letter-spacing: 0; }
.ps-pillarboard__slot.is-filled { background: var(--ps-pillar-soft); color: var(--ps-pillar-ink); box-shadow: inset 0 -4px 0 var(--ps-series); }
.ps-pillarboard__slot.is-editing { box-shadow: inset 0 0 0 2px var(--ps-series); }
/* the form under the board: in its pillar's color, in titled sections (.ps-formsec), the title beside the fields on a wide screen */
.ps-pillaredit { padding: var(--ps-space-5); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 2px var(--ps-series); }
.ps-pillaredit__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-3); min-width: 0; }
.ps-pillaredit__title { margin: 0; font: 400 var(--ps-type-human-sm)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
.ps-pillaredit__head > .ps-hint { margin: 0 0 0 auto; }
.ps-pillaredit .ps-range-field output { font: 400 var(--ps-type-number-sm)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-pillar-ink); }
.ps-pillaredit .ps-range { accent-color: var(--ps-series); }
@media (min-width: 960px) {
  .ps-pillarboard__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ps-space-4); }
  .ps-pillarcol { min-height: calc(var(--ps-size-touch) * 7.5); }
  .ps-pillarboard__strip, .ps-pillarcol__emptylabel { display: none; }
  .ps-pillaredit { padding: var(--ps-space-6); }
  .ps-pillaredit .ps-formsec { grid-template-columns: calc(var(--ps-size-touch) * 5) minmax(0, 1fr); align-items: start; column-gap: var(--ps-space-6); }
}
@media (max-width: 959px) {
  .ps-pillarcol.is-empty { flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--ps-space-3) var(--ps-space-3) var(--ps-space-3) var(--ps-space-4); }
  .ps-pillarcol.is-empty :is(.ps-pillarcol__band, .ps-pillarcol__skel, .ps-pillarcol__next) { display: none; }
  .ps-pillarcol.is-empty .ps-pillarcol__top { flex: 1 1 auto; }
  .ps-pillarcol.is-empty .ps-pillarcol__foot { margin: 0; }
  .ps-pillarcol.is-empty .ps-pillarcol__foot > .ps-btn { flex: none; }
}
/* why they pick you, with a check each; the proof as quotes */
.ps-strat-reasons { display: flex; flex-direction: column; gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; }
.ps-strat-reasons > li { display: flex; align-items: flex-start; gap: var(--ps-space-2); font-size: var(--ps-type-title); line-height: 1.45; color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-strat-reasons .ps-icon { flex: none; width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); margin-top: 2px; color: var(--ps-ok); }
.ps-strat-quotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; }
.ps-strat-quote { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-chip); }
.ps-strat-quote > blockquote { margin: 0; font: 400 var(--ps-type-title)/1.5 var(--ps-font-mark); color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-strat-quote > figcaption { font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg-2); }
/* the mix: by stage, and proven · variations · new */
.ps-strat-mix { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-6); min-width: 0; }
.ps-strat-mix__part { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-strat-mix__part > .ps-labelcaps { margin: 0; color: var(--ps-fg-2); }
.ps-strat-mix__note { margin: 0; font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); }
/* offers and moments: when, then what */
/* GTM-388 ST-11: "The Basics", a chapter's Profile facts (.ps-fact rows) under a line, with their own Edit */
.ps-strat-basics { margin-top: calc(var(--ps-space-section) - var(--ps-space-5)); padding-top: var(--ps-space-section-start); border-top: 1px solid var(--ps-line-strong); }   /* the section rule inside the chapter's gap (Oct 31) */
@media (max-width: 600px) { .ps-strat-basics { margin-top: calc(var(--ps-space-section-phone) - var(--ps-space-5)); padding-top: var(--ps-space-4); } }
.ps-strat-basics > .ps-row > .ps-labelcaps { margin: 0; color: var(--ps-fg-2); }
.ps-strat-dates { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ps-strat-dates > li { display: grid; grid-template-columns: calc(var(--ps-size-touch) * 1.6) minmax(0, 1fr); gap: var(--ps-space-3); align-items: start; padding: var(--ps-space-3) 0; }
.ps-strat-dates > li + li { border-top: 1px solid var(--ps-line); }
.ps-strat-dates__when { font: 400 var(--ps-type-human-sm)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.ps-strat-dates__body { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-strat-dates__title { margin: 0; font-size: var(--ps-type-title); font-weight: var(--ps-weight-medium); line-height: 1.4; color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-strat-dates__meta { margin: 0; font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg-2); }
/* the inline edit forms: fields two by two from 720 px; a group per audience, offer, moment, proof or channel */
.ps-strat-edit { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; }
.ps-strat-edit__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-3) var(--ps-space-4); min-width: 0; }
.ps-strat-edit__item { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; margin: 0; padding: var(--ps-space-4); border: 0; border-radius: var(--ps-radius-card);
  box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-strat-edit__item > legend { float: left; width: 100%; padding: 0; font-size: var(--ps-type-title); font-weight: var(--ps-weight-medium); color: var(--ps-fg); }
.ps-strat-edit__item > legend + * { clear: both; }
.ps-strat-edit__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-3); min-width: 0; }
@media (min-width: 720px) {
  .ps-strat-cards { grid-template-columns: repeat(auto-fill, minmax(calc(var(--ps-size-touch) * 5), 1fr)); }
  .ps-strat-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-strat-edit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-strat-edit__wide { grid-column: 1 / -1; }
}
@media (max-width: 719px) { .ps-strat-card { padding: var(--ps-space-4); } }   /* inside a chapter on a phone: room for the words */
@media (min-width: 960px) { .ps-strat-mix { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-7); } }

/* ======================================================================================================
   Ideator swipe (GTM-381, S-21, Oct 17, 2026; the prototype's Ideator boards IdeatorFeed, IdeaDetail and IdeatorYes)
   The deck (.ps-swipe, PS.swipeDeck): one idea card at a time, the next ones peeking behind; right is yes, left is no, with the
   No and Yes buttons and the arrow keys too. Your Yes List (.ps-yes-list, PS.yesList): every yes, its picture, its best format
   and Make It, Expand and Plan It. One idea opened (.ps-idea-detail, PS.ideaDetail) and the Media Library picker for Add Media
   (.ps-media-pick, PS.mediaPick). The same components on a phone and the desktop (S-26); the AI's words are lavender (.ps-idea-why).
   ====================================================================================================== */
.ps-ideator-swipe { display: flex; flex-direction: column; gap: var(--ps-space-6); width: 100%; max-width: calc(var(--ps-size-page-max) / 2.4); min-width: 0; }
.ps-ideator-swipe *, .ps-ideator-swipe *::before, .ps-ideator-swipe *::after { box-sizing: border-box; }
.ps-ideator-swipe__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ps-space-3); }
.ps-ideator-swipe__count { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; }
@media (max-width: 720px) { .ps-ideator-swipe { gap: var(--ps-space-5); } .ps-ideator-swipe__count { font-size: var(--ps-type-story-mark); } }

/* ---------- The AI's reason (.ps-idea-why): a lavender dot and the agent's words, on the card and in the opened idea ---------- */
.ps-idea-why { display: flex; align-items: flex-start; gap: var(--ps-space-2); margin: 0; padding: var(--ps-space-3); border-radius: var(--ps-radius-control);
  background: var(--ps-agent-bg); color: var(--ps-agent-fg); font: 400 var(--ps-type-caption)/1.45 var(--ps-font-ui); }
.ps-idea-why::before { content: ""; flex: none; width: var(--ps-space-4); height: var(--ps-space-4); margin-top: 1px; border-radius: 50%; background: var(--ps-color-lavender); }

/* ---------- The deck (.ps-swipe): a stack of cards, the front one draggable and focusable; the buttons under it ---------- */
.ps-swipe { display: flex; flex-direction: column; gap: var(--ps-space-5); min-width: 0; }
.ps-swipe__stack { position: relative; height: clamp(calc(var(--ps-space-7) * 8), 60svh, calc(var(--ps-space-7) * 11)); }
.ps-swipe-card { position: absolute; inset: var(--ps-space-5) 0 0; display: flex; flex-direction: column; overflow: hidden; border-radius: calc(var(--ps-radius-card) + var(--ps-space-2));
  background: var(--ps-glass-solid); box-shadow: inset 0 0 0 1px var(--ps-line), var(--ps-glass-shadow); color: var(--ps-fg);
  transform-origin: 50% 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  transition: transform var(--ps-dur-move) var(--ps-ease-out), opacity var(--ps-dur-move) ease; }
/* the next cards peek above the front one: scaled from their top edge, then lifted */
.ps-swipe-card[data-depth="1"] { transform-origin: 50% 0; transform: translateY(calc(var(--ps-space-3) * -1)) scale(.94); pointer-events: none; }
.ps-swipe-card[data-depth="2"] { transform-origin: 50% 0; transform: translateY(calc(var(--ps-space-5) * -1)) scale(.88); pointer-events: none; opacity: .6; }
.ps-swipe-card[data-depth="1"] > *, .ps-swipe-card[data-depth="2"] > * { visibility: hidden; }   /* the peeking cards are plain sheets: one idea at a time */
.ps-swipe-card.is-dragging { transition: none; cursor: grabbing; }
.ps-swipe-card.is-out-yes { transform: translateX(120%) rotate(16deg); opacity: 0; pointer-events: none; }
.ps-swipe-card.is-out-no { transform: translateX(-120%) rotate(-16deg); opacity: 0; pointer-events: none; }
.ps-swipe-card:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 3px; }
.ps-swipe-card__media { position: relative; flex: none; height: 46%; overflow: hidden; background: var(--ps-series, var(--ps-color-lavender-soft)); color: var(--ps-series-on, var(--ps-color-ink)); }
.ps-swipe-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.ps-swipe-card__media.has-picture::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, var(--ps-color-scrim-strong)); }
.ps-swipe-card__format, .ps-swipe-card__flag { position: absolute; top: var(--ps-space-3); z-index: 1; display: inline-flex; align-items: center; height: calc(var(--ps-size-pill) + var(--ps-space-1));
  padding: 0 var(--ps-space-3); border-radius: var(--ps-radius-pill); font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); }
.ps-swipe-card__format { left: var(--ps-space-3); background: var(--ps-color-scrim-strong); color: var(--ps-color-on-dark); }
.ps-swipe-card__flag { right: var(--ps-space-3); background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-swipe-card__title { position: absolute; left: var(--ps-space-4); right: var(--ps-space-4); bottom: var(--ps-space-4); z-index: 1; margin: 0;
  font: 400 var(--ps-type-display-phone)/.95 var(--ps-font-display); letter-spacing: 0; color: inherit;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ps-swipe-card__media.has-picture .ps-swipe-card__title { color: var(--ps-color-on-dark); }
.ps-swipe-card__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--ps-space-3); padding: var(--ps-space-4); overflow: hidden; }
.ps-swipe-card__text { margin: 0; font: 400 var(--ps-type-title)/1.45 var(--ps-font-ui); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ps-swipe-card__body .ps-idea-why { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ps-swipe-card__body .ps-idea-why::before { display: inline-block; vertical-align: -3px; margin: 0 var(--ps-space-2) 0 0; }
.ps-swipe-card__source { margin: auto 0 0; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-swipe-card__stamp { position: absolute; top: var(--ps-space-6); z-index: 2; padding: var(--ps-space-1) var(--ps-space-3); border-radius: var(--ps-radius-control);
  font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; pointer-events: none; opacity: 0; }
.ps-swipe-card__stamp--yes { left: var(--ps-space-4); transform: rotate(-12deg); background: var(--ps-color-sprout); color: var(--ps-color-ink); opacity: var(--ps-swipe-yes, 0); }
.ps-swipe-card__stamp--no { right: var(--ps-space-4); transform: rotate(12deg); background: var(--ps-fg); color: var(--ps-page); opacity: var(--ps-swipe-no, 0); }
.ps-swipe-card.is-out-yes .ps-swipe-card__stamp--yes, .ps-swipe-card.is-out-no .ps-swipe-card__stamp--no { opacity: 1; }
.ps-swipe__empty { position: absolute; inset: var(--ps-space-5) 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ps-space-4);
  padding: var(--ps-space-6); border-radius: calc(var(--ps-radius-card) + var(--ps-space-2)); border: 1px dashed var(--ps-line); text-align: center; color: var(--ps-fg-2); }
.ps-swipe__empty p { margin: 0; max-width: 32ch; font: 400 var(--ps-type-title)/1.5 var(--ps-font-ui); }
.ps-swipe__empty b { display: block; margin-bottom: var(--ps-space-2); font: 400 var(--ps-type-story-mark)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
.ps-swipe__actions { display: flex; align-items: center; justify-content: center; gap: var(--ps-space-6); }
.ps-swipe__btn { width: calc(var(--ps-size-touch) + var(--ps-space-4)); aspect-ratio: 1; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  transition: transform var(--ps-dur-press) var(--ps-ease-out), background-color var(--ps-dur-base) ease; }
.ps-swipe__btn .ps-icon { width: var(--ps-size-icon-lg); height: var(--ps-size-icon-lg); }
.ps-swipe__btn--no { background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); color: var(--ps-fg); }
.ps-swipe__btn--yes { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-swipe__btn:active { transform: scale(var(--ps-press-scale)); }
.ps-swipe__btn:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 3px; }
.ps-swipe__btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) { .ps-swipe__btn--no:hover { background: var(--ps-glass-solid); } .ps-swipe__btn--yes:hover { background: var(--ps-color-sprout-strong); } }
@media (max-width: 720px) { .ps-swipe { gap: var(--ps-space-4); } .ps-swipe__stack { height: clamp(calc(var(--ps-space-7) * 6.5), 44svh, calc(var(--ps-space-7) * 10)); }
  .ps-swipe-card__media { height: 42%; } .ps-swipe-card__title { font-size: var(--ps-type-section); } .ps-swipe__btn { width: calc(var(--ps-size-touch) + var(--ps-space-3)); } }
.ps-swipe__hint { margin: 0; text-align: center; font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
@media (prefers-reduced-motion: reduce) { .ps-swipe-card, .ps-swipe__btn { transition: none; } .ps-swipe__btn:active { transform: none; } }

/* ---------- Your Yes List (.ps-yes-list of .ps-yes-row): the picture, the title, the best format, and Make It, Expand, Plan It ---------- */
.ps-yes-list { display: flex; flex-direction: column; gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; }
.ps-yes-row { display: flex; gap: var(--ps-space-4); padding: var(--ps-space-3); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); min-width: 0; }
.ps-yes-row__thumb { flex: none; align-self: flex-start; width: calc(var(--ps-space-7) + var(--ps-space-5)); aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: var(--ps-radius-control); overflow: hidden; cursor: pointer;
  background: var(--ps-series, var(--ps-color-lavender-soft)); color: var(--ps-series-on, var(--ps-color-ink)); display: grid; place-items: center; }
.ps-yes-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ps-yes-row__thumb:focus-visible, .ps-yes-row__open:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-yes-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ps-space-1); }
.ps-yes-row__open { padding: 0; border: 0; background: none; color: var(--ps-fg); text-align: left; cursor: pointer; font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); }
.ps-yes-row__best { font-size: var(--ps-type-caption); color: var(--ps-agent-fg); }
.ps-yes-row__state { font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-yes-row__actions { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); margin-top: auto; padding-top: var(--ps-space-2); }
.ps-yes-row.is-made .ps-yes-row__thumb { opacity: .7; }
.ps-yes-list__note { margin: 0; font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); }
@media (max-width: 720px) { .ps-yes-row { gap: var(--ps-space-3); } }

/* ---------- One idea opened (.ps-idea-detail, in a dialog): the picture and title, chips, Hook, The Angle, why, its media, Make It ---------- */
.ps-idea-detail { display: flex; flex-direction: column; gap: var(--ps-space-5); min-width: 0; }
.ps-idea-detail__media { position: relative; display: flex; align-items: flex-end; min-height: calc(var(--ps-space-7) * 4); padding: var(--ps-space-4); overflow: hidden;
  border-radius: var(--ps-radius-card); background: var(--ps-series, var(--ps-color-lavender-soft)); color: var(--ps-series-on, var(--ps-color-ink)); }
.ps-idea-detail__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-idea-detail__media.has-picture::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, var(--ps-color-scrim-strong)); }
.ps-idea-detail__title { position: relative; z-index: 1; margin: 0; font: 400 var(--ps-type-display-phone)/.95 var(--ps-font-display); letter-spacing: 0; }
.ps-idea-detail__media.has-picture .ps-idea-detail__title { color: var(--ps-color-on-dark); }
.ps-idea-detail__chips { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-idea-detail__part { display: flex; flex-direction: column; gap: var(--ps-space-1); }
.ps-idea-detail__part p { margin: 0; font: 400 var(--ps-type-title)/1.5 var(--ps-font-ui); }
.ps-idea-detail__thumbs { display: flex; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.ps-idea-detail__thumbs li { flex: none; width: calc(var(--ps-space-7) + var(--ps-space-2)); aspect-ratio: 1; border-radius: var(--ps-radius-small); overflow: hidden; background: var(--ps-chip); }
.ps-idea-detail__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.ps-idea-detail__tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-2); }
.ps-idea-detail__make { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-3); min-height: calc(var(--ps-size-touch) + var(--ps-space-4));
  padding: var(--ps-space-2) var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-color-sprout); color: var(--ps-color-ink); text-decoration: none;
  transition: transform var(--ps-dur-press) var(--ps-ease-out), background-color var(--ps-dur-base) ease; }
.ps-idea-detail__make:hover { background: var(--ps-color-sprout-strong); }
.ps-idea-detail__make:active { transform: scale(var(--ps-press-scale)); }
.ps-idea-detail__make:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-idea-detail__make-name { display: block; font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); }
.ps-idea-detail__make-why { display: block; font-size: var(--ps-type-caption); color: var(--ps-color-loop-learn-deep); }
.ps-idea-detail__or { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ps-space-2) var(--ps-space-3); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
@media (prefers-reduced-motion: reduce) { .ps-idea-detail__make { transition: none; } .ps-idea-detail__make:active { transform: none; } }

/* ---------- Add Media (.ps-media-pick): the subscriber's Media Library as square toggles; a picked one has the lime ring and a check ---------- */
.ps-media-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--ps-space-7) * 2), 1fr)); gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-media-pick__item { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--ps-radius-small); overflow: hidden; cursor: pointer;
  background: var(--ps-chip); color: var(--ps-fg-2); }
.ps-media-pick__item img { width: 100%; height: 100%; object-fit: cover; }
.ps-media-pick__item[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ps-color-sprout); }
.ps-media-pick__check { position: absolute; top: var(--ps-space-1); right: var(--ps-space-1); display: none; width: var(--ps-space-5); height: var(--ps-space-5); place-items: center;
  border-radius: 50%; background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-media-pick__item[aria-pressed="true"] .ps-media-pick__check { display: grid; }
.ps-media-pick__item:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-media-pick__kind { position: absolute; left: var(--ps-space-1); bottom: var(--ps-space-1); display: grid; place-items: center; width: var(--ps-space-5); height: var(--ps-space-5);
  border-radius: 50%; background: var(--ps-color-scrim-strong); color: var(--ps-color-on-dark); }

/* ======================================================================================================
   Movie flow (GTM-378, S-20, S-23, Oct 17, 2026; the prototype's boards "Movie: my script", "Movie: storyboard", Filming,
   "The film", "Change a shot"). client/movie.html, the same components on a phone and the desktop (S-26): one calm column.
   .ps-movie            the column: one step at a time (script → storyboard → filming → the film)
   .ps-movie-script     My Script: the label row, the field, the Cast to tap in
   .ps-pick-grid        big equal choices (the length, the shape); .ps-pick, .ps-pick--num, .ps-pick__shape--reels|feed|tv; .ps-pick-grid--3 rows of three
   .ps-movie-bar        the step's one action, with the server's price beside it (the action takes the full width on a phone)
   .ps-shots            the storyboard: .ps-part-mark between the parts, .ps-shot cards (frame, camera, action, line, actions)
   .ps-filming          the orb, the headline, the filmstrip (.ps-filmstrip) and the steps (.ps-movie-steps)
   .ps-film             the finished movie: the player, the size switch, the changes (.ps-film__more: Change Style, Change a Shot, a Creative)
   Lavender is the agent's color (AI only); lime marks the one primary action and the picked choice.
   ====================================================================================================== */
.ps-movie { display: flex; flex-direction: column; gap: var(--ps-space-5); width: 100%; max-width: calc(var(--ps-size-page-max) / 2); min-width: 0; }
.ps-movie *, .ps-movie *::before, .ps-movie *::after { box-sizing: border-box; }
.ps-movie__step { display: flex; flex-direction: column; gap: var(--ps-space-5); min-width: 0; }
.ps-movie__step[hidden], .ps-movie__skel[hidden] { display: none; }
.ps-movie > :empty:not(.ps-skel), .ps-movie__step > :empty { display: none; }   /* an empty message slot takes no gap */
.ps-movie__skel { height: calc(var(--ps-size-touch) * 4); }
.ps-movie__head { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-movie__title { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-movie__meta { margin: 0; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
@media (max-width: 720px) { .ps-movie, .ps-movie__step { gap: var(--ps-space-4); } .ps-movie__title { font-size: var(--ps-type-story-mark); } }

/* ---------- My Script (.ps-movie-script on a .ps-card): the label row, the field, "Tap to cast" ---------- */
.ps-movie-script { gap: var(--ps-space-3); }
.ps-movie-script__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ps-space-3); }
.ps-movie-script textarea.ps-input { min-height: calc(var(--ps-size-touch) * 4); resize: vertical; font-size: var(--ps-type-field); line-height: 1.55; }
.ps-movie-script__cast { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-movie-script__cast .ps-chip[disabled] { cursor: not-allowed; color: var(--ps-fg-3); }

/* ---------- Big equal choices (.ps-pick-grid > .ps-pick[aria-pressed]): the length and the shape; .ps-pick-field is their fieldset ---------- */
.ps-pick-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.ps-pick-field > legend { padding: 0; margin-bottom: var(--ps-space-2); }
.ps-pick-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ps-space-2); min-width: 0; }
.ps-pick-grid--3 { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* more than four choices: rows of three (Edit a Video's length) */
.ps-pick { display: flex; align-items: center; justify-content: center; gap: var(--ps-space-2); min-width: 0; min-height: var(--ps-size-touch); padding: 0 var(--ps-space-3);
  border: 0; border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); color: var(--ps-fg);
  font: 500 var(--ps-type-control)/1 var(--ps-font-ui); cursor: pointer; transition: transform var(--ps-dur-press) var(--ps-ease-out), background-color var(--ps-dur-base) ease; }
.ps-pick--num { font: 400 var(--ps-type-story-mark)/1 var(--ps-font-display); letter-spacing: 0; }
.ps-pick[aria-pressed="true"] { background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none; }
.ps-pick:active { transform: scale(var(--ps-press-scale)); }
.ps-pick:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-pick:disabled { cursor: not-allowed; color: var(--ps-fg-3); }
.ps-pick__shape { flex: none; height: var(--ps-size-icon); border: 2px solid currentColor; border-radius: var(--ps-radius-small); }
.ps-pick__shape--reels { aspect-ratio: 9 / 16; height: calc(var(--ps-size-icon) * 1.1); }
.ps-pick__shape--feed { aspect-ratio: 1; height: calc(var(--ps-size-icon) * .85); }
.ps-pick__shape--tv { aspect-ratio: 16 / 9; height: calc(var(--ps-size-icon) * .7); }
@media (prefers-reduced-motion: reduce) { .ps-pick { transition: none; } .ps-pick:active { transform: none; } }

/* ---------- GTM-402 the Explainer (docs/studio/EXPLAINER-REWORK.md 2.1) ----------
   .ps-effects > .ps-effect[aria-pressed]   the effects gallery: a tile per effect, its preview playing (muted, looping; PS.effectPicker),
                                             a check when picked; .ps-effect__media is empty (an icon) while there's no preview yet
   .ps-caption-sample[data-style]           a caption style's moving sample on a dark frame: clean, highlight, boxed
   .ps-more                                 "More options": a <details> whose summary is a quiet row with a chevron */
.ps-effects { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--ps-space-3) var(--ps-space-2); }
.ps-effect { position: relative; display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ps-effect__media { position: relative; display: grid; place-items: center; aspect-ratio: 9 / 16; border-radius: var(--ps-radius-card); overflow: hidden;
  background: var(--ps-chip); color: var(--ps-fg-3); box-shadow: inset 0 0 0 1px var(--ps-line); transition: box-shadow var(--ps-dur-base) var(--ps-ease-out); }
.ps-effect__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-effect__name { font: 500 var(--ps-type-caption) / 1.3 var(--ps-font-ui); overflow-wrap: anywhere; }
.ps-effect__check { position: absolute; top: var(--ps-space-1); right: var(--ps-space-1); display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: var(--ps-radius-pill); background: var(--ps-color-sprout-strong); color: var(--ps-color-ink); opacity: 0; transform: scale(.8);
  transition: opacity var(--ps-dur-base) var(--ps-ease-out), transform var(--ps-dur-base) var(--ps-ease-out); }
.ps-effect[aria-pressed="true"] .ps-effect__media { box-shadow: inset 0 0 0 3px var(--ps-color-sprout-strong); }
.ps-effect[aria-pressed="true"] .ps-effect__check { opacity: 1; transform: none; }
.ps-effect:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 3px; border-radius: var(--ps-radius-card); }
.ps-caption-sample { display: flex; align-items: flex-end; justify-content: center; min-height: 96px; padding: var(--ps-space-4); border-radius: var(--ps-radius-card);
  background: var(--ps-page); text-align: center; }
.ps-caption-sample__line { margin: 0; font: 700 var(--ps-type-title) / 1.25 var(--ps-font-ui); color: var(--ps-fg); }
.ps-caption-sample__w { display: inline-block; padding: 0 .12em; border-radius: var(--ps-radius-small); opacity: .55; animation: ps-caption-word 2.4s var(--ps-ease-in-out) infinite; }
.ps-caption-sample__w:nth-child(2) { animation-delay: .6s; } .ps-caption-sample__w:nth-child(3) { animation-delay: 1.2s; } .ps-caption-sample__w:nth-child(4) { animation-delay: 1.8s; }
.ps-caption-sample[data-style="clean"] .ps-caption-sample__w { animation-name: ps-caption-clean; }
.ps-caption-sample[data-style="boxed"] .ps-caption-sample__line { padding: var(--ps-space-1) var(--ps-space-2); border-radius: var(--ps-radius-small); background: var(--ps-fg); color: var(--ps-page); }
.ps-caption-sample[data-style="boxed"] .ps-caption-sample__w { animation-name: ps-caption-clean; }
@keyframes ps-caption-word { 0%, 30% { opacity: 1; color: var(--ps-color-sprout); transform: scale(1.08); } 31%, 100% { opacity: .55; color: inherit; transform: none; } }
@keyframes ps-caption-clean { 0%, 30% { opacity: 1; } 31%, 100% { opacity: .55; } }
.ps-more { border-radius: var(--ps-radius-card); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-2); padding: var(--ps-space-3) var(--ps-space-4);
  list-style: none; cursor: pointer; font: 600 var(--ps-type-control) / 1.3 var(--ps-font-ui); }
.ps-more > summary::-webkit-details-marker { display: none; }
.ps-more > summary .ps-icon { transition: transform var(--ps-dur-base) var(--ps-ease-out); }
.ps-more[open] > summary .ps-icon { transform: rotate(180deg); }
.ps-more > summary:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; border-radius: var(--ps-radius-card); }
.ps-more__body { display: grid; gap: var(--ps-space-4); padding: 0 var(--ps-space-4) var(--ps-space-4); }
@media (prefers-reduced-motion: reduce) {
  .ps-effect__media, .ps-effect__check, .ps-more > summary .ps-icon { transition: none; }
  .ps-caption-sample__w { animation: none; opacity: 1; }
}

/* ---------- The step's action bar (.ps-movie-bar): the note or the server's price, then the one action ---------- */
.ps-movie-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-3);
  padding: var(--ps-space-3) var(--ps-space-3) var(--ps-space-3) var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-glass-solid); box-shadow: var(--ps-glass-shadow); }
.ps-movie-bar__text { flex: 1 1 14em; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-movie-bar__price { font: 400 var(--ps-type-story-mark)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
.ps-movie-bar__price.is-empty { font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-movie-bar__note { font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg-2); }
.ps-movie-bar .ps-btn { flex: none; }
.ps-movie-bar--quiet { background: none; box-shadow: inset 0 0 0 1px var(--ps-line); }   /* a second action on the step: no lift */
.ps-movie-bar--quiet .ps-movie-bar__price { font-size: var(--ps-type-lede); }
.ps-movie-bar[hidden] { display: none; }
@media (max-width: 720px) { .ps-movie-bar .ps-btn { flex: 1 1 auto; min-height: var(--ps-size-touch); } }

/* ---------- The storyboard (.ps-shots): the part marks and the shot cards ---------- */
.ps-shots { display: flex; flex-direction: column; gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; min-width: 0; }
.ps-part-mark { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ps-space-2); padding-top: var(--ps-space-2); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-part-mark .ps-badge { background: var(--ps-info-soft); color: var(--ps-info); }
.ps-shot { display: flex; gap: var(--ps-space-3); min-width: 0; padding: var(--ps-space-3); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-shot__frame { position: relative; flex: none; width: calc(var(--ps-space-7) * 2); aspect-ratio: 9 / 16; border-radius: var(--ps-radius-control); overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: var(--ps-space-2);
  background: var(--ps-series, var(--ps-color-loop-make-soft)); color: var(--ps-series-on, var(--ps-color-ink)); }
.ps-shot__frame[data-shape="1:1"] { aspect-ratio: 1; }
.ps-shot__frame[data-shape="16:9"] { aspect-ratio: 16 / 9; width: calc(var(--ps-space-7) * 3); }
.ps-shot__frame img, .ps-shot__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-shot__n { position: relative; font: 400 var(--ps-type-story-mark)/1 var(--ps-font-display); letter-spacing: 0; }
.ps-shot__top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ps-space-1); width: 100%; }
.ps-shot__tag { padding: 2px var(--ps-space-2); border-radius: var(--ps-radius-pill); background: var(--ps-page); color: var(--ps-fg-2); font: 500 var(--ps-type-micro)/1.3 var(--ps-font-ui); white-space: nowrap; }
.ps-shot__frame.has-still .ps-shot__n { color: var(--ps-color-white); text-shadow: 0 1px 2px var(--ps-color-scrim-strong); }   /* GTM-384: readable on any still */
.ps-shot__frame.is-making { animation: ps-skel 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ps-shot__frame.is-making { animation: none; } }
.ps-shot__time { position: relative; padding: 2px var(--ps-space-2); border-radius: var(--ps-radius-small); background: var(--ps-page); color: var(--ps-fg); font: 500 var(--ps-type-micro)/1.3 var(--ps-font-ui); }
.ps-shot__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ps-space-1); }
.ps-shot__camera { font: 500 var(--ps-type-caption)/1.3 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-2); }
.ps-shot__action { margin: 0; font-size: var(--ps-type-body); line-height: 1.4; color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-shot__line { margin: 0; font-size: var(--ps-type-body); line-height: 1.4; color: var(--ps-agent-fg); overflow-wrap: anywhere; }
.ps-shot__actions { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); margin-top: auto; padding-top: var(--ps-space-2); }
.ps-shot__edit { display: flex; flex-direction: column; gap: var(--ps-space-3); padding-top: var(--ps-space-2); }
.ps-shot__edit[hidden] { display: none; }
.ps-shot__edit textarea.ps-input { resize: vertical; }
.ps-shot.is-editing { box-shadow: inset 0 0 0 1.5px var(--ps-focus); }
@media (max-width: 720px) {
  .ps-shot__frame { width: calc(var(--ps-space-7) * 1.6); }
  .ps-shot__frame[data-shape="16:9"] { width: calc(var(--ps-space-7) * 2.2); }
  .ps-shot__actions .ps-btn { min-height: var(--ps-size-touch); }
}

/* ---------- Filming (.ps-filming): the orb, the headline, the filmstrip, the steps ---------- */
.ps-filming { display: flex; flex-direction: column; align-items: center; gap: var(--ps-space-4); padding-top: var(--ps-space-4); text-align: center; }
.ps-filming__orb { width: calc(var(--ps-space-7) * 3); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--ps-agent-bg); }
.ps-filming__orb::before { content: ''; width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--ps-agent-bg); box-shadow: 0 0 0 0 var(--ps-agent-bg); animation: ps-filming-pulse 2.4s var(--ps-ease-in-out) infinite; }
.ps-filming__orb::after { content: ''; position: absolute; width: calc(var(--ps-space-7) * 1.35); aspect-ratio: 1; border-radius: 50%; background: var(--ps-color-lavender); }
.ps-filming__orb { position: relative; }
.ps-filming.is-done .ps-filming__orb::before { animation: none; }
.ps-filming__title { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
.ps-filming__sub { margin: 0; max-width: 36ch; font-size: var(--ps-type-body); line-height: 1.45; color: var(--ps-fg-2); }
@keyframes ps-filming-pulse { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .ps-filming__orb::before { animation: none; } }

.ps-filmstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ps-space-2); width: 100%; margin: 0; padding: 0; list-style: none; }
.ps-filmstrip__cell { min-height: calc(var(--ps-space-7) * 1.8); border-radius: var(--ps-radius-control); display: flex; align-items: flex-end; padding: var(--ps-space-2);
  font-size: var(--ps-type-micro); color: var(--ps-fg-3); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-filmstrip__cell[data-state="done"] { background: var(--ps-series, var(--ps-color-loop-make-soft)); color: var(--ps-series-on, var(--ps-color-ink)); box-shadow: none; }
.ps-filmstrip__cell[data-state="now"] { background: var(--ps-agent-bg); color: var(--ps-agent-fg); box-shadow: inset 0 0 0 2px var(--ps-color-lavender); }

.ps-movie-steps { display: flex; flex-direction: column; gap: var(--ps-space-2); width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; }
.ps-movie-steps__item { display: flex; align-items: center; gap: var(--ps-space-3); min-height: calc(var(--ps-size-touch) + var(--ps-space-1)); padding: 0 var(--ps-space-4);
  border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); font-size: var(--ps-type-body); color: var(--ps-fg-3); }
.ps-movie-steps__dot { flex: none; width: var(--ps-size-icon); aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ps-line); }
.ps-movie-steps__label { flex: 1; min-width: 0; }
.ps-movie-steps__state { font-size: var(--ps-type-caption); }
.ps-movie-steps__item[data-state="done"] { color: var(--ps-fg); }
.ps-movie-steps__item[data-state="done"] .ps-movie-steps__dot { background: var(--ps-ok); box-shadow: none; }
.ps-movie-steps__item[data-state="done"] .ps-movie-steps__state { color: var(--ps-ok-text); }
.ps-movie-steps__item[data-state="now"] { color: var(--ps-fg); box-shadow: inset 0 0 0 1px var(--ps-color-lavender); }
.ps-movie-steps__item[data-state="now"] .ps-movie-steps__dot { background: var(--ps-color-lavender); box-shadow: none; }
.ps-movie-steps__item[data-state="now"] .ps-movie-steps__state { color: var(--ps-agent-fg); }
.ps-movie-steps__item[data-state="failed"] { color: var(--ps-fg); }
.ps-movie-steps__item[data-state="failed"] .ps-movie-steps__dot { background: var(--ps-danger); box-shadow: none; }

/* ---------- The film (.ps-film): the player, the size switch, the next things ---------- */
.ps-film { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; }
.ps-film__player { position: relative; width: 100%; max-width: calc(var(--ps-space-7) * 9); align-self: center; aspect-ratio: 9 / 16; border-radius: var(--ps-radius-card); overflow: hidden; background: var(--ps-color-ink); }
.ps-film__player[data-shape="1:1"] { aspect-ratio: 1; max-width: calc(var(--ps-space-7) * 12); }
.ps-film__player[data-shape="4:5"] { aspect-ratio: 4 / 5; max-width: calc(var(--ps-space-7) * 11); }
.ps-film__player[data-shape="16:9"] { aspect-ratio: 16 / 9; max-width: none; }
.ps-film__player video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ps-color-ink); }
.ps-film__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ps-space-3); }
.ps-film__credits { font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-film__actions { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-film__actions .ps-btn { flex: 1 1 auto; }
.ps-film__more { display: flex; flex-direction: column; gap: var(--ps-space-4); padding-top: var(--ps-space-2); }
.ps-film__more [hidden] { display: none; }
@media (max-width: 720px) { .ps-film__player { max-width: none; } .ps-film__actions .ps-btn { min-height: var(--ps-size-touch); } }

/* ---------- The Change a Shot pop-up (GTM-384): PS.modal.open({ size: 'bottom' }), a dialog on the desktop and a sheet that rises
   from the bottom on a phone, as tall as what it holds (the prototype's board "Change a shot") ---------- */
.ps-modal--bottom { --ps-modal-w: 520px; }
.ps-modal--bottom .ps-modal__body *, .ps-modal--bottom .ps-modal__body *::before { box-sizing: border-box; }
.ps-modal--bottom textarea.ps-input { width: 100%; resize: vertical; }
@media (max-width: 768px) {
  .ps-modal.ps-modal--bottom { padding: 0; place-items: end stretch; }
  .ps-modal--bottom .ps-modal__dialog { width: 100%; max-width: none; border-radius: var(--ps-radius-card) var(--ps-radius-card) 0 0; transform: translateY(24px); }
  .ps-modal--bottom.is-open .ps-modal__dialog { transform: none; }
  .ps-modal--bottom .ps-modal__actions { padding-bottom: calc(var(--ps-space-4) + env(safe-area-inset-bottom, 0px)); }
  .ps-modal--bottom .ps-modal__actions > .ps-btn { flex: 1 1 auto; min-height: var(--ps-size-touch); }
}
@media (prefers-reduced-motion: reduce) { .ps-modal--bottom .ps-modal__dialog, .ps-modal--bottom.is-open .ps-modal__dialog { transform: none; transition: none; } }

/* ======================================================================================================
   The Studio's Media Library and the Cast (GTM-378, S-20 (7) and (8), S-21 (6), Oct 18, 2026; the prototype's boards "Library",
   "Library: one asset", "Library: empty" and "Cast"). client/library.html and client/cast.html: the same components on a phone and
   the desktop (S-26), one calm column with the grid filling the page.
   .ps-studio-page   the column: a section per part, 24 px or more apart (breathing room)
   .ps-lib-tools     the search and the filter chips above the grid
   .ps-lib-grid      one uniform square grid (.ps-lib-tile): its time, the used check, AI; picked tiles a lime ring and their order
   .ps-asset         one asset in a sheet: the media, its name and facts, Use in Studio, Download, Delete, every word about it
   .ps-lib-start     an empty library: what it's for and the ways to bring media in (.ps-lib-choice); .ps-lib-upload the progress
   .ps-cast-head     one person: the face, the @handle, their consent; .ps-voice-card their own voice (waits for counsel, S-20 8)
   Lavender is the agent's color (AI only); lime marks the one primary action and the picked item.
   ====================================================================================================== */
.ps-studio-page { display: flex; flex-direction: column; gap: var(--ps-space-6); width: 100%; min-width: 0; }
.ps-studio-page *, .ps-studio-page *::before, .ps-studio-page *::after { box-sizing: border-box; }
.ps-studio-page[hidden], .ps-studio-page [hidden] { display: none; }
.ps-studio-page > .ps-msg:empty { display: none; }   /* an empty message slot takes no gap */
.ps-studio-page__section { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-studio-page__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--ps-space-3); }
.ps-studio-page__head > :first-child { margin: 0; }
.ps-studio-page__count { margin: 0; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
@media (max-width: 720px) { .ps-studio-page { gap: var(--ps-space-5); } }

/* ---------- Search and filters (.ps-lib-tools): the search takes the row; the chips scroll sideways on a phone ---------- */
.ps-lib-tools { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-lib-tools .ps-search { width: 100%; height: var(--ps-size-touch); }
.ps-lib-tools .ps-search input { width: auto; font-size: var(--ps-type-field); }
.ps-lib-tools .ps-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--ps-space-1); }
.ps-lib-tools .ps-chips::-webkit-scrollbar { display: none; }
.ps-lib-tools .ps-chip { flex: none; }

/* Search that says where it looks (Oct 24, the Library search boards): the box and the Look In switch share a row (stacked on a
   phone), a help line under it, ideas from the library's own tags while the box is empty, then the chips with the Added By,
   Project and Sort buttons at the row's end, and a line saying how many and in what order. */
.ps-lib-find { display: flex; align-items: center; gap: var(--ps-space-3); min-width: 0; }
.ps-lib-find > .ps-search { flex: 1 1 auto; }
.ps-lib-find > .ps-seg { flex: none; }
.ps-lib-tools__help { margin: 0; padding-inline: var(--ps-space-4); font-size: var(--ps-type-caption); line-height: 1.5; color: var(--ps-fg-2); }
.ps-lib-suggest { display: flex; flex-wrap: wrap; gap: var(--ps-space-4) var(--ps-space-6); }
.ps-lib-suggest > div { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-lib-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ps-space-2) var(--ps-space-3); min-width: 0; }
.ps-lib-tools .ps-lib-bar > .ps-chips { min-width: 0; flex-wrap: wrap; overflow: visible; }   /* the desktop: every chip shows; the extras wrap under them when the row is full */
.ps-lib-bar__more { display: flex; align-items: center; gap: var(--ps-space-1); flex: none; }
.ps-lib-count { margin: 0; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-lib-count:empty { display: none; }
@media (max-width: 720px) {
  .ps-lib-find { flex-direction: column; align-items: stretch; }
  .ps-lib-find > .ps-seg { display: grid; grid-auto-columns: auto; justify-content: start; }
  .ps-lib-tools__help { padding-inline: var(--ps-space-1); }
  .ps-lib-bar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .ps-lib-tools .ps-lib-bar > .ps-chips { flex-wrap: nowrap; overflow-x: auto; }
  .ps-lib-bar__more { overflow-x: auto; scrollbar-width: none; }
  .ps-lib-bar__more > .ps-btn { flex: none; }
}
/* A result that says why it matched: what's said (.ps-lib-hits, a card per video with the line, the words marked) and what's
   seen or named (a caption under a grid tile, .ps-lib-tile__cap). Marks are lime, the same as a picked tile. */
.ps-lib-hits { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--ps-space-7) * 9), 1fr)); gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; }
.ps-lib-hit { display: flex; gap: var(--ps-space-3); width: 100%; padding: var(--ps-space-2); border: 0; border-radius: var(--ps-radius-card); background: var(--ps-chip);
  color: var(--ps-fg); font: inherit; text-align: left; cursor: pointer; }
.ps-lib-hit:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-lib-hit__media { position: relative; flex: none; width: calc(var(--ps-space-7) * 2.5); aspect-ratio: 1; border-radius: var(--ps-radius-small); overflow: hidden; background: var(--ps-chip); }
.ps-lib-hit__media > img, .ps-lib-hit__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ps-lib-hit__body { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-lib-hit__name { font: 500 var(--ps-type-caption)/1.3 var(--ps-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-lib-hit__why { font: 500 var(--ps-type-micro)/1.3 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-2); }
.ps-lib-hit__line { margin: 0; font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ps-lib-tile__cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: var(--ps-space-1); font-size: var(--ps-type-micro); line-height: 1.35; color: var(--ps-fg-2); }
.ps-lib-hit mark, .ps-lib-tile__cap mark { background: var(--ps-color-sprout); color: var(--ps-color-ink); border-radius: var(--ps-radius-small); padding: 0 2px; }
@media (max-width: 720px) { .ps-lib-hits { grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-2); } }
/* Your Collections (S-40, the Library board "Your Collections"): saved searches as chips with today's count, under the filters.
   The open one is lime (aria-pressed) with its Rename or Delete menu beside it; Save This Search is a dashed chip on the accent's
   stroke, shown only while there is a search to keep; .ps-lib-name is its name dialog (Save This Search, Rename). The label sits on its own line on a phone, the chips scroll sideways. */
.ps-lib-sets { display: flex; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); min-width: 0; }
.ps-lib-sets > .ps-labelcaps { flex: none; color: var(--ps-fg-2); }
.ps-lib-tools .ps-lib-sets > .ps-chips { flex: 1 1 auto; min-width: 0; align-items: center; }
.ps-lib-set { max-width: calc(var(--ps-space-7) * 7); overflow: hidden; text-overflow: ellipsis; }
.ps-lib-set--add { background: transparent; border: 1px dashed var(--ps-accent-stroke); color: var(--ps-fg); font-weight: 500; }
.ps-lib-set--add .ps-icon { color: var(--ps-accent-stroke); }
.ps-lib-set__more { flex: none; margin-left: calc(-1 * var(--ps-space-1)); }
.ps-lib-name .ps-modal__body *, .ps-lib-name .ps-modal__body *::before { box-sizing: border-box; }   /* the name dialog sits outside .ps-studio-page */
@media (max-width: 720px) {
  .ps-lib-sets { flex-direction: column; align-items: stretch; }
}
/* Nothing matched: say so, widen or clear in one tap, the closest matches, and a way to make what's missing */
.ps-lib-none { display: flex; flex-direction: column; gap: var(--ps-space-5); }
.ps-lib-none__make { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ps-space-3); padding: var(--ps-space-4);
  border-radius: var(--ps-radius-card); box-shadow: inset 0 0 0 1px var(--ps-line); }

/* ---------- The grid (.ps-lib-grid > li > .ps-lib-tile): every tile square; three columns on a phone, more as the page widens ---------- */
.ps-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--ps-space-7) * 3), 1fr)); gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-lib-grid > li { position: relative; min-width: 0; }
.ps-lib-tile { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--ps-radius-small); overflow: hidden; cursor: pointer;
  background: var(--ps-chip); color: var(--ps-fg-2); font: inherit; text-decoration: none; transition: transform var(--ps-dur-press) var(--ps-ease-out); }
.ps-lib-tile > img, .ps-lib-tile > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ps-lib-tile__kind { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ps-fg-3); }
.ps-lib-tile__time, .ps-lib-tile__ai, .ps-lib-tile__used, .ps-lib-tile__n, .ps-lib-tile__main { position: absolute; display: inline-flex; align-items: center; justify-content: center;
  font: 600 var(--ps-type-micro)/1 var(--ps-font-ui); letter-spacing: 0; }
.ps-lib-tile__time { right: var(--ps-space-1); bottom: var(--ps-space-1); padding: var(--ps-space-1) var(--ps-space-2); border-radius: var(--ps-radius-pill);
  background: var(--ps-color-scrim-strong); color: var(--ps-color-on-dark); font-variant-numeric: tabular-nums; }
.ps-lib-tile__ai { right: var(--ps-space-1); top: var(--ps-space-1); padding: var(--ps-space-1) var(--ps-space-2); border-radius: var(--ps-radius-pill);
  background: var(--ps-color-lavender); color: var(--ps-color-ink); }
.ps-lib-tile__used { left: var(--ps-space-1); top: var(--ps-space-1); width: var(--ps-space-5); height: var(--ps-space-5); border-radius: 50%; background: var(--ps-ok-soft); color: var(--ps-ok-text); }
.ps-lib-tile__used .ps-icon { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); }
.ps-lib-tile__main { left: var(--ps-space-1); top: var(--ps-space-1); padding: var(--ps-space-1) var(--ps-space-2); border-radius: var(--ps-radius-pill);
  background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-lib-tile__n { right: var(--ps-space-1); top: var(--ps-space-1); width: var(--ps-space-5); height: var(--ps-space-5); border-radius: 50%;
  background: var(--ps-color-sprout); color: var(--ps-color-ink); font-variant-numeric: tabular-nums; }
.ps-lib-tile[aria-pressed="true"], .ps-lib-tile.is-main { box-shadow: inset 0 0 0 3px var(--ps-color-sprout); }
.ps-lib-tile[aria-pressed="true"] .ps-lib-tile__ai { display: none; }   /* the order number takes the corner */
.ps-lib-tile:active { transform: scale(var(--ps-press-scale)); }
.ps-lib-tile:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
/* Bring It to Life on a picked photo: a lavender bar across the tile's foot (the agent's action), its own button beside the tile */
.ps-lib-life { position: absolute; left: var(--ps-space-1); right: var(--ps-space-1); bottom: var(--ps-space-1); min-height: var(--ps-space-6); padding: 0 var(--ps-space-2);
  border: 0; border-radius: var(--ps-radius-pill); background: var(--ps-color-lavender); color: var(--ps-color-ink); cursor: pointer;
  font: 600 var(--ps-type-micro)/1.1 var(--ps-font-ui); letter-spacing: 0; text-align: center; }
.ps-lib-life.is-on { background: var(--ps-agent-bg); color: var(--ps-agent-fg); box-shadow: inset 0 0 0 1.5px var(--ps-color-lavender); }
.ps-lib-life:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-lib-grid__more { display: flex; justify-content: center; }
@media (max-width: 720px) { .ps-lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-1); } }
@media (prefers-reduced-motion: reduce) { .ps-lib-tile { transition: none; } .ps-lib-tile:active { transform: none; } }

/* ---------- One asset (.ps-asset, in a PS.modal sheet): everything the web page shows (S-21 6) ---------- */
.ps-asset { display: flex; flex-direction: column; gap: var(--ps-space-5); min-width: 0; }
.ps-asset *, .ps-asset *::before, .ps-asset *::after { box-sizing: border-box; }
.ps-asset__media { position: relative; display: grid; place-items: center; min-height: calc(var(--ps-space-7) * 4); max-height: 56vh; border-radius: var(--ps-radius-card);
  overflow: hidden; background: var(--ps-chip); color: var(--ps-fg-3); }
.ps-asset__media > img, .ps-asset__media > video { display: block; width: 100%; height: 100%; max-height: 56vh; object-fit: contain; }
.ps-asset__media > audio { width: calc(100% - var(--ps-space-5) * 2); }
.ps-asset__media--sm, .ps-asset__media--sm > img, .ps-asset__media--sm > video { min-height: 0; max-height: calc(var(--ps-space-7) * 4); }   /* a preview inside a sheet (Bring It to Life) */
.ps-asset__badges { position: absolute; left: var(--ps-space-3); right: var(--ps-space-3); bottom: var(--ps-space-3); display: flex; justify-content: space-between; gap: var(--ps-space-2); pointer-events: none; }
.ps-asset__head { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-asset__name { margin: 0; font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-asset__meta { margin: 0; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-asset__go { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-2); }
.ps-asset__go > .ps-btn { width: 100%; min-height: var(--ps-size-touch); }
.ps-asset__tools { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-asset__part { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-asset__part > p { margin: 0; font-size: var(--ps-type-body); line-height: 1.5; color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-asset__part textarea.ps-input { width: 100%; resize: vertical; }
.ps-asset__said { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ps-asset__said.is-open { display: block; }
.ps-asset__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ps-space-2); padding-top: var(--ps-space-3); border-top: 1px solid var(--ps-line);
  font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
@media (max-width: 720px) { .ps-asset { gap: var(--ps-space-4); } }

/* ---------- An empty library (.ps-lib-start): the ways in, the first one lime; .ps-lib-upload: an upload under way ---------- */
.ps-lib-start { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; }
.ps-lib-start__lede { margin: 0; max-width: 60ch; font-size: var(--ps-type-body); line-height: 1.5; color: var(--ps-fg-2); }
.ps-lib-start__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--ps-space-7) * 5), 1fr)); gap: var(--ps-space-3); }
.ps-lib-choice { position: relative; display: flex; align-items: center; gap: var(--ps-space-4); min-height: calc(var(--ps-size-touch) * 1.5); padding: var(--ps-space-3) var(--ps-space-4);
  border: 0; border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); color: var(--ps-fg);
  font: inherit; text-align: left; cursor: pointer; transition: transform var(--ps-dur-press) var(--ps-ease-out); }
.ps-lib-choice > .ps-icon { flex: none; width: var(--ps-size-icon-lg); height: var(--ps-size-icon-lg); }
.ps-lib-choice__text { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-lib-choice__name { font: 500 var(--ps-type-title)/1.2 var(--ps-font-ui); }
.ps-lib-choice__line { font-size: var(--ps-type-caption); line-height: 1.35; color: var(--ps-fg-2); }
.ps-lib-choice--accent { background: var(--ps-color-sprout); color: var(--ps-color-ink); box-shadow: none; }
.ps-lib-choice--accent .ps-lib-choice__line { color: var(--ps-color-loop-learn-deep); }
.ps-lib-choice input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ps-lib-choice:has(input:focus-visible) { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-lib-choice:active { transform: scale(var(--ps-press-scale)); }
.ps-lib-upload { gap: var(--ps-space-3); }
.ps-lib-upload__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ps-space-2); font-size: var(--ps-type-body); }
.ps-lib-upload__top > :first-child { font-weight: 500; color: var(--ps-fg); }
.ps-lib-upload__top > :last-child { font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-lib-upload__agent { display: flex; align-items: center; gap: var(--ps-space-2); margin: 0; font-size: var(--ps-type-caption); color: var(--ps-agent-fg); }
.ps-lib-upload__agent::before { content: ""; flex: none; width: var(--ps-space-4); height: var(--ps-space-4); border-radius: 50%; background: var(--ps-color-lavender); }
@media (prefers-reduced-motion: reduce) { .ps-lib-choice { transition: none; } .ps-lib-choice:active { transform: none; } }
/* Nov 8, 2026 (Sisi): a computer opens one file window for Photos and Files alike, so it gets one way in, From Your Computer
   (--pointer), and can drop files on the page; a phone keeps From Your Photos and From Your Files (--touch), which open different pickers */
@media (hover: hover) and (pointer: fine) { .ps-lib-choice--touch { display: none; } }
@media not all and (hover: hover) and (pointer: fine) { .ps-lib-choice--pointer { display: none; } }
/* .ps-dropveil: files dragged over a page that takes them; it covers the page (not the menus) and says what a drop does */
.ps-dropveil { position: fixed; inset: 0; z-index: var(--ps-layer-dropdown); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ps-space-2);
  margin: var(--ps-space-3); border: 2px dashed var(--ps-ok); border-radius: var(--ps-radius-card); background: color-mix(in srgb, var(--ps-page) 86%, transparent);
  color: var(--ps-fg); text-align: center; pointer-events: none; }
.ps-dropveil[hidden] { display: none; }
.ps-dropveil > .ps-icon { width: var(--ps-size-icon-lg); height: var(--ps-size-icon-lg); }
.ps-dropveil__title { font: 500 var(--ps-type-title)/1.2 var(--ps-font-ui); }
.ps-dropveil__hint { font-size: var(--ps-type-caption); color: var(--ps-fg-2); }

/* ---------- The Cast (client/cast.html): the people in a wrapping row; one person's head, consent and voice ---------- */
.ps-cast-row--wrap { flex-wrap: wrap; overflow: visible; row-gap: var(--ps-space-4); }
.ps-cast-head { display: flex; align-items: center; gap: var(--ps-space-4); min-width: 0; }
.ps-cast-head .ps-cast-row__face { flex: none; width: calc(var(--ps-size-touch) * 2); }
.ps-cast-head__text { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-cast-head__handle { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-cast-head__line { margin: 0; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-consent-line { display: flex; align-items: center; gap: var(--ps-space-2); margin: 0; font-size: var(--ps-type-caption); color: var(--ps-ok-text); }
.ps-consent-line::before { content: ""; flex: none; width: var(--ps-space-4); height: var(--ps-space-4); border-radius: 50%; background: var(--ps-ok-soft); box-shadow: inset 0 0 0 4px var(--ps-ok); }
.ps-consent-line.is-missing { color: var(--ps-fg-2); }
.ps-consent-line.is-missing::before { background: none; box-shadow: inset 0 0 0 1.5px var(--ps-line); }
.ps-voice-card { gap: var(--ps-space-4); box-shadow: inset 0 0 0 1px var(--ps-color-lavender); }
.ps-voice-card__head { display: flex; align-items: center; gap: var(--ps-space-3); }
.ps-voice-card__mark { flex: none; display: grid; place-items: center; width: var(--ps-size-touch); height: var(--ps-size-touch); border-radius: 50%;
  background: var(--ps-color-lavender); color: var(--ps-color-ink); }
.ps-voice-card__title { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; }
.ps-voice-card__line { margin: 0; font-size: var(--ps-type-caption); color: var(--ps-agent-fg); }
.ps-voice-card ol { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding-left: var(--ps-space-5); font-size: var(--ps-type-body); line-height: 1.45; }
@media (max-width: 720px) { .ps-cast-head .ps-cast-row__face { width: calc(var(--ps-size-touch) * 1.5); } .ps-cast-head__handle { font-size: var(--ps-type-story-mark); } }

/* ---------- Design (GTM-378, S-17; client/design.html): the two starts as choice tiles; one not open yet is disabled with Coming Soon ---------- */
.ps-design-starts .ps-choice:disabled { cursor: not-allowed; box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-design-starts .ps-choice:disabled :is(.ps-choice__title, .ps-choice__desc) { color: var(--ps-fg-3); }
.ps-design-starts .ps-choice:disabled:active { transform: none; }
.ps-design-starts .ps-tag--soon { align-self: flex-start; }

/* ======================================================================================================
   Publish (GTM-379, S-24, Oct 18, 2026; the prototype's Publish boards PublishScheduled, PublishCaption, PlannerWeek, PublishLive,
   PublishFailed, AdsBoost, and the map's Review and ReviewPlayer boards). client/publish.html (Review, Planner, Ads) and
   client/publish-post.html (one post), the same components on a phone and the desktop (S-26): one calm column.
   .ps-publish        the column, sections 32 px apart (24 on a phone)
   .ps-pub-list       Review: every finished piece, .ps-pub-card (the thumb with its kind, who made it, when, the title)
   .ps-pub-when       approving schedules it: the date the AI picked and why (.ps-pub-why, lavender: the AI's words)
   .ps-chan-list      one post across channels: .ps-chan (the platform, its time, why, a switch), live, failed and off states
   .ps-cap            a caption per channel: tabs with a dot for the ones to approve, the words, hashtags, Rewrite, Shorter, Approve
   .ps-plan           the Planner's week: .ps-plan-day (the day, its posts or the Ideator's ideas), .ps-plan-post (red when it failed)
   .ps-fix            didn't post: the red card and its one button
   .ps-live           posted: the post and its first results (.ps-results, real numbers only)
   .ps-coming         Ads: still being planned
   ====================================================================================================== */
.ps-publish { display: flex; flex-direction: column; gap: var(--ps-space-6); width: 100%; max-width: calc(var(--ps-size-page-max) / 2.2); min-width: 0; }
.ps-publish *, .ps-publish *::before, .ps-publish *::after { box-sizing: border-box; }
.ps-publish__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ps-space-3); }
.ps-publish__title { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; }
.ps-publish__note { margin: 0; font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); }
.ps-publish__actions { display: flex; flex-wrap: wrap; gap: var(--ps-space-3); }
.ps-publish__actions .ps-btn { flex: 1 1 auto; }
@media (max-width: 720px) { .ps-publish { gap: var(--ps-space-5); } .ps-publish__title { font-size: var(--ps-type-story-mark); } }

/* ---------- Review: the inbox (.ps-pub-list of .ps-pub-card) ---------- */
.ps-pub-list { display: flex; flex-direction: column; gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; }
.ps-pub-card { display: flex; gap: var(--ps-space-3); padding: var(--ps-space-3); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong);
  box-shadow: inset 0 0 0 1px var(--ps-line); color: var(--ps-fg); text-decoration: none; min-width: 0;
  transition: transform var(--ps-dur-press) var(--ps-ease-out), background-color var(--ps-dur-base) ease; }
.ps-pub-card:active { transform: scale(var(--ps-press-scale)); }
.ps-pub-card:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ps-pub-card:hover { background: var(--ps-glass-solid); } }
.ps-pub-card__thumb { position: relative; flex: none; width: calc(var(--ps-space-7) + var(--ps-space-6) + var(--ps-space-1)); aspect-ratio: 3 / 4; border-radius: var(--ps-radius-control);
  overflow: hidden; background: var(--ps-series, var(--ps-color-lavender-soft)); }
.ps-pub-card__thumb :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the kind is a .ps-badge (the one pill), placed on the picture and solid, never glass on a photo */
.ps-pub-card__kind { position: absolute; left: var(--ps-space-1); bottom: var(--ps-space-1); background: var(--ps-color-scrim-strong); color: var(--ps-color-on-dark); }
.ps-pub-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ps-space-2); }
.ps-pub-card__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-pub-card__title { margin: 0; font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); overflow-wrap: anywhere; }
.ps-pub-card__note { margin: 0; font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg-2); }
.ps-pub-card__chans { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-1); margin-top: auto; }
.ps-pub-card.is-failed { box-shadow: inset 0 0 0 1.5px var(--ps-danger); }
.ps-pub-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ps-space-3); padding: var(--ps-space-5); border-radius: var(--ps-radius-card);
  border: 1px dashed var(--ps-line); color: var(--ps-fg-2); }
.ps-pub-empty b { font: 400 var(--ps-type-story-mark)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
.ps-pub-empty p { margin: 0; font-size: var(--ps-type-body); line-height: 1.5; max-width: 44ch; }
@media (prefers-reduced-motion: reduce) { .ps-pub-card { transition: none; } .ps-pub-card:active { transform: none; } }

/* ---------- Approving schedules it: the date and why (.ps-pub-when); the AI's words (.ps-pub-why) ---------- */
.ps-pub-when { display: flex; flex-direction: column; gap: var(--ps-space-4); padding: var(--ps-space-5); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong);
  box-shadow: inset 0 0 0 1px var(--ps-line); min-width: 0; }
.ps-pub-when__date { margin: 0; font: 400 var(--ps-type-display-phone)/.95 var(--ps-font-display); letter-spacing: 0; }
.ps-pub-why { display: flex; align-items: flex-start; gap: var(--ps-space-2); margin: 0; padding: var(--ps-space-3); border-radius: var(--ps-radius-control);
  background: var(--ps-agent-bg); color: var(--ps-agent-fg); font: 400 var(--ps-type-caption)/1.45 var(--ps-font-ui); }
.ps-pub-why::before { content: ""; flex: none; width: var(--ps-space-3); height: var(--ps-space-3); margin-top: var(--ps-space-1); border-radius: 50%; background: var(--ps-color-lavender); }
.ps-pub-why--person { background: var(--ps-chip); color: var(--ps-fg-2); }
.ps-pub-why--person::before { background: var(--ps-color-sprout-strong); }
.ps-pub-done { display: flex; align-items: center; gap: var(--ps-space-3); margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; }
.ps-pub-done__mark { display: grid; place-items: center; flex: none; width: calc(var(--ps-size-touch) - var(--ps-space-1)); aspect-ratio: 1; border-radius: 50%;
  background: var(--ps-color-sprout); color: var(--ps-color-ink); }

/* ---------- One post across channels (.ps-chan-list of .ps-chan) ---------- */
.ps-chan-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-radius: var(--ps-radius-control); box-shadow: inset 0 0 0 1px var(--ps-line); overflow: hidden; }
.ps-chan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--ps-space-3); padding: var(--ps-space-3); min-height: calc(var(--ps-size-touch) + var(--ps-space-3)); }
.ps-chan + .ps-chan { border-top: 1px solid var(--ps-line); }
.ps-chan__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 500 var(--ps-type-body)/1.3 var(--ps-font-ui); }
.ps-chan__sub { font: 400 var(--ps-type-caption)/1.35 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-chan__time { display: inline-flex; align-items: center; gap: var(--ps-space-1); min-height: var(--ps-size-touch); padding: 0 var(--ps-space-3); border: 0; border-radius: var(--ps-radius-pill);
  background: var(--ps-chip); color: var(--ps-fg); cursor: pointer; font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-chan__time:hover { background: var(--ps-glass-solid); }
.ps-chan__time:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-chan__time:disabled { cursor: default; background: none; }
.ps-chan .ps-switch { flex: none; }
.ps-chan.is-off .ps-chan__name, .ps-chan.is-off .ps-chan__time { color: var(--ps-fg-3); }
.ps-chan.is-failed { background: var(--ps-danger-soft); }
.ps-chan.is-failed .ps-chan__sub { color: var(--ps-danger); }
.ps-chan.is-live .ps-chan__sub { color: var(--ps-ok-text); }
.ps-chan-add { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-chan-add a { display: inline-flex; align-items: center; gap: var(--ps-space-2); min-height: var(--ps-size-touch); padding: 0 var(--ps-space-3); border-radius: var(--ps-radius-pill);
  border: 1px dashed var(--ps-line); color: var(--ps-fg-2); font-size: var(--ps-type-caption); text-decoration: none; }
.ps-chan-add a:hover { color: var(--ps-fg); }
.ps-chan-add a:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
@media (max-width: 420px) { .ps-chan { grid-template-columns: auto minmax(0, 1fr) auto; } .ps-chan .ps-switch { grid-column: 3; grid-row: 1; }
  .ps-chan__time { grid-column: 2 / 4; justify-self: start; } }

/* ---------- A caption per channel (.ps-cap) ---------- */
.ps-cap { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; }
.ps-cap__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-3); padding: var(--ps-space-1) 2px; }
/* Channel tiles (Sisi, Nov 7, from Plann's Create): a square per channel, its one-color icon; picked or approved: the lime frame and a check;
   a caption to approve: an amber dot; left out: faded; "+" connects another. */
.ps-chtile { position: relative; display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 0; border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); color: var(--ps-fg); cursor: pointer; text-decoration: none; }
.ps-chtile:is([aria-selected="true"], [aria-pressed="true"]) { border-color: var(--ps-color-sprout-strong); box-shadow: inset 0 0 0 1px var(--ps-color-sprout-strong);
  background: color-mix(in oklab, var(--ps-color-sprout) 35%, var(--ps-glass-strong)); }
.ps-chtile[aria-pressed="false"] { opacity: .5; }
.ps-chtile:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-chtile--add { border-style: dashed; background: transparent; color: var(--ps-fg-2); }
.ps-chtile__badge { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ps-page); }
.ps-chtile__badge .ps-icon { width: 12px; height: 12px; }
.ps-chtile__badge--ok { background: var(--ps-color-sprout-strong); color: var(--ps-color-ink); }
.ps-chtile__badge.ps-cap__dot { right: -3px; bottom: -3px; width: 12px; height: 12px; background: var(--ps-warn); }
.ps-cap__check { display: inline-grid; color: var(--ps-ok-text); }
.ps-chtile__badge--ok.ps-cap__check { display: grid; color: var(--ps-color-ink); }
.ps-cap__dot { width: var(--ps-space-2); height: var(--ps-space-2); flex: none; border-radius: 50%; background: var(--ps-warn); }
/* The caption box: the words, and under them one bar of tools (Write with AI, Rewrite, Shorter, the hashtags and their count, what comes
   after launch, the character count), as Plann's */
.ps-capbox { display: flex; flex-direction: column; border: 1px solid var(--ps-line); border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); overflow: hidden; }
.ps-capbox:focus-within { border-color: var(--ps-fg-3); }
.ps-capbox > textarea.ps-input { border: 0; border-radius: 0; background: transparent; box-shadow: none; resize: vertical; }
.ps-capbox > textarea.ps-input:focus { outline: none; box-shadow: none; }
.ps-capbox__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: var(--ps-space-2) var(--ps-space-3); box-shadow: inset 0 1px 0 var(--ps-line); }
.ps-capbox__bar > .ps-btn--ai { margin-right: var(--ps-space-1); }
.ps-capbox__sep { width: 1px; height: 20px; margin: 0 2px; background: var(--ps-line); }
.ps-capbox__n { margin-right: var(--ps-space-1); }
.ps-capbox__tool { display: inline-grid; place-items: center; min-width: 24px; height: 32px; padding: 0 var(--ps-space-1); border: 0; border-radius: var(--ps-radius-small); background: transparent;
  color: var(--ps-fg-2); font: 500 var(--ps-type-control)/1 var(--ps-font-ui); cursor: pointer; }
.ps-capbox__tool:hover { background: var(--ps-chip); color: var(--ps-fg); }
.ps-capbox__tool:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 1px; }
.ps-capbox__tool--ai { color: var(--ps-agent-fg); }
.ps-capbox__tool[aria-disabled="true"] { opacity: .45; cursor: default; }
.ps-capbox__tool[aria-disabled="true"]:hover { background: transparent; color: var(--ps-fg-2); }
.ps-capbox__n { font-size: var(--ps-type-caption); color: var(--ps-fg-2); font-variant-numeric: tabular-nums; }
.ps-capbox__n.is-over { color: var(--ps-danger); }
.ps-cap__meta [data-draft-count].is-over { color: var(--ps-danger); }
.ps-cap__panel { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-cap__text { min-height: calc(var(--ps-space-7) * 3); line-height: 1.5; }
.ps-cap__tags { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-cap__tags li { display: inline-flex; align-items: center; height: calc(var(--ps-size-pill) + var(--ps-space-1)); padding: 0 var(--ps-space-3); border-radius: var(--ps-radius-pill);
  background: var(--ps-chip); color: var(--ps-fg-2); font-size: var(--ps-type-caption); }
.ps-cap__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ps-space-2); font-size: var(--ps-type-caption); color: var(--ps-fg-2); font-variant-numeric: tabular-nums; }
.ps-cap__meta.is-over { color: var(--ps-danger); }
.ps-cap__tools { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-cap__approved { display: inline-flex; align-items: center; gap: var(--ps-space-2); font-size: var(--ps-type-caption); color: var(--ps-ok-text); }

/* ---------- The Planner's week (.ps-plan of .ps-plan-day; .ps-plan-post) ---------- */
.ps-plan { display: flex; flex-direction: column; gap: var(--ps-space-4); margin: 0; padding: 0; list-style: none; }
.ps-plan-day { display: grid; grid-template-columns: calc(var(--ps-space-7) + var(--ps-space-1)) minmax(0, 1fr); gap: var(--ps-space-3); align-items: start; }
.ps-plan-day__date { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: var(--ps-space-2); color: var(--ps-fg-2); font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); }
.ps-plan-day__date b { font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
.ps-plan-day.is-today .ps-plan-day__date b { display: grid; place-items: center; width: calc(var(--ps-size-touch) - var(--ps-space-2)); aspect-ratio: 1; border-radius: 50%;
  background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-plan-day__posts { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-plan-day__empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); min-height: calc(var(--ps-size-touch) + var(--ps-space-2)); padding: var(--ps-space-2) var(--ps-space-3);
  border-radius: var(--ps-radius-control); border: 1px dashed var(--ps-line); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-plan-day__empty a { color: var(--ps-agent-fg); }
.ps-plan-post { display: flex; align-items: center; gap: var(--ps-space-3); padding: var(--ps-space-2); border-radius: var(--ps-radius-control); background: var(--ps-glass-strong);
  box-shadow: inset 0 0 0 1px var(--ps-line); color: var(--ps-fg); text-decoration: none; min-width: 0; }
.ps-plan-post:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ps-plan-post:hover { background: var(--ps-glass-solid); } }
.ps-plan-post__thumb { flex: none; width: calc(var(--ps-space-7) - var(--ps-space-2)); aspect-ratio: 1; border-radius: var(--ps-radius-small); overflow: hidden; background: var(--ps-chip); }
.ps-plan-post__thumb :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-plan-post__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ps-space-1); }
.ps-plan-post__title { font: 500 var(--ps-type-body)/1.3 var(--ps-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-plan-post__chans { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-1); font-size: var(--ps-type-caption); color: var(--ps-fg-2); font-variant-numeric: tabular-nums; }
.ps-plan-post__chans .ps-plat { width: var(--ps-space-5); height: var(--ps-space-5); }
.ps-plan-post .ps-badge { flex: none; }
.ps-plan-post.is-failed { background: var(--ps-danger-soft); box-shadow: inset 0 0 0 1.5px var(--ps-danger); }
.ps-plan-post.is-failed .ps-plan-post__chans { color: var(--ps-danger); }
.ps-plan-post.is-upcoming .ps-plan-post__thumb { outline: 1.5px dashed var(--ps-fg-3); outline-offset: -1.5px; }
.ps-plan-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-3); }
.ps-plan-nav__label { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; }
@media (max-width: 720px) { .ps-plan-nav__label { font-size: var(--ps-type-story-mark); } }
/* the grid and calendar module (GTM-253, F13b) mounts its Month and Grid views in here */
.ps-plan-module { min-width: 0; }

/* ---------- Didn't post: the red card and its one fix (.ps-fix) ---------- */
.ps-fix { display: flex; flex-direction: column; gap: var(--ps-space-3); padding: var(--ps-space-5); border-radius: var(--ps-radius-card); background: var(--ps-danger-soft);
  box-shadow: inset 0 0 0 1.5px var(--ps-danger); color: var(--ps-fg); }
.ps-fix__title { display: flex; align-items: center; gap: var(--ps-space-2); margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-danger); }
.ps-fix__text { margin: 0; font: 400 var(--ps-type-body)/1.5 var(--ps-font-ui); }
.ps-fix__note { margin: 0; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-fix .ps-btn { align-self: flex-start; }

/* ---------- Posted: the post and its first results (.ps-live, .ps-results) ---------- */
.ps-live { display: flex; flex-direction: column; gap: var(--ps-space-4); padding: var(--ps-space-5); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-live__head { display: flex; align-items: center; gap: var(--ps-space-3); min-width: 0; }
.ps-live__thumb { flex: none; width: calc(var(--ps-space-7) + var(--ps-space-2)); aspect-ratio: 1; border-radius: var(--ps-radius-control); overflow: hidden; background: var(--ps-chip); }
.ps-live__thumb :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-live__what { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-live__title { margin: 0; font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); }
.ps-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--ps-space-7) * 1.6), 1fr)); gap: var(--ps-space-3); margin: 0; }
.ps-results div { display: flex; flex-direction: column; gap: var(--ps-space-1); padding: var(--ps-space-3); border-radius: var(--ps-radius-control); background: var(--ps-chip); }
.ps-results dt { order: 2; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-results dd { order: 1; margin: 0; font: 400 var(--ps-type-number-sm)/1 var(--ps-font-display); letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* ---------- The AI result in Review (a movie): the film on its dark stage, then Revise with AI, Send to a Creative, Approve ---------- */
.ps-pub-stage { display: grid; place-items: center; overflow: hidden; border-radius: var(--ps-radius-card); background: var(--ps-page); }
.ps-pub-stage video { display: block; width: 100%; max-height: 70svh; background: var(--ps-page); }
.ps-pub-route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-2); }
.ps-pub-route a { display: flex; flex-direction: column; justify-content: space-between; gap: var(--ps-space-2); min-height: calc(var(--ps-size-touch) * 1.7); padding: var(--ps-space-3);
  border-radius: var(--ps-radius-card); text-decoration: none; color: var(--ps-agent-fg); background: var(--ps-agent-bg); font: 500 var(--ps-type-body)/1.3 var(--ps-font-ui); }
.ps-pub-route a + a { background: none; box-shadow: inset 0 0 0 1px var(--ps-color-lavender); color: var(--ps-fg); }
.ps-pub-route span { font: 400 var(--ps-type-caption)/1.35 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-pub-route a:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }

/* ---------- Ads: still being planned (.ps-coming) ---------- */
.ps-coming { display: flex; flex-direction: column; gap: var(--ps-space-3); padding: var(--ps-space-5); border-radius: var(--ps-radius-card); border: 1px dashed var(--ps-line); }
.ps-coming b { font: 400 var(--ps-type-story-mark)/1 var(--ps-font-display); letter-spacing: 0; }
.ps-coming p { margin: 0; font-size: var(--ps-type-body); line-height: 1.5; color: var(--ps-fg-2); max-width: 52ch; }

/* ---------- The red badge on Publish (PS.publish.flagShell): the shell's dot and badges in the danger color while something didn't post ---------- */
.ps-tabbar__dot.is-danger { background: var(--ps-danger); }
.ps-sidecat .ps-badge.ps-badge--danger { background: var(--ps-danger); color: var(--ps-color-white); }   /* solid on the dark rail */

/* ---------- The post editor (Planner redesign part 3, Nov 6): the post's media on top, the From Review line, New Post's picker ---------- */
.ps-pub-media { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ps-pub-media::-webkit-scrollbar { display: none; }
.ps-pub-media__track { display: flex; gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; }
.ps-pub-media__slide { position: relative; flex: none; width: min(78%, 360px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--ps-radius-card); background: var(--ps-color-graphite-solid);
  scroll-snap-align: start; }
.ps-pub-media__slide:only-child { width: min(100%, 420px); }
.ps-pub-media__slide > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-pub-media__n { position: absolute; left: var(--ps-space-2); bottom: var(--ps-space-2); padding: 2px var(--ps-space-2); border-radius: var(--ps-radius-pill); background: var(--ps-glass-strong);
  color: var(--ps-fg); font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums; }
.ps-pub-origin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); margin: 0; padding: var(--ps-space-3) var(--ps-space-4); border-radius: var(--ps-radius-control);
  background: var(--ps-chip); font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); }
.ps-pub-origin > span:last-child { flex: 1 1 220px; }
/* The slides strip (Sisi, Nov 7, the approved mockup): a thumbnail per slide in its 3:4 shape, × to take one out, drag to reorder, + to add */
.ps-slides { display: flex; flex-direction: column; gap: var(--ps-space-2); }
.ps-slides__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-slides__item { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--ps-radius-small); background: var(--ps-chip); cursor: grab; }
.ps-slides__item > :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-slides__item:first-child { box-shadow: 0 0 0 2px var(--ps-page), 0 0 0 4px var(--ps-color-sprout-strong); }
.ps-slides__n { position: absolute; left: 4px; bottom: 4px; padding: 0 var(--ps-space-1); border-radius: var(--ps-radius-pill); background: color-mix(in srgb, var(--ps-color-ink) 60%, transparent);
  color: var(--ps-color-white); font-size: var(--ps-type-micro); font-variant-numeric: tabular-nums; }
.ps-slides__x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--ps-color-ink) 60%, transparent); color: var(--ps-color-white); cursor: pointer; }
.ps-slides__x .ps-icon { width: 12px; height: 12px; }
.ps-slides__x:focus-visible, .ps-slides__add:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-slides__add { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 1.5px dashed var(--ps-line); border-radius: var(--ps-radius-small);
  background: transparent; color: var(--ps-fg-2); cursor: pointer; }
.ps-slides__menu { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-slides__menu[hidden] { display: none; }
.ps-pub-pick { display: flex; flex-direction: column; gap: var(--ps-space-3); }
.ps-pub-pick__drop { min-height: 220px; }
.ps-pub-pick__srcs { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }

/* ---------- The desktop Planner (part 3b): the week strip on top, the post's composer under it, the grid on the right ---------- */
.ps-pub-strip { display: flex; align-items: center; gap: var(--ps-space-2); padding: var(--ps-space-2) var(--ps-space-3); border-radius: var(--ps-radius-card); background: var(--ps-glass);
  box-shadow: var(--ps-glass-shadow); }
.ps-pub-strip__days { display: grid; flex: 1 1 auto; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ps-space-1); min-width: 0; }
.ps-pub-strip__day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ps-space-1); min-height: 64px; padding: var(--ps-space-1) 0; border: 0;
  border-radius: var(--ps-radius-control); background: transparent; color: var(--ps-fg); font: inherit; cursor: pointer; }
.ps-pub-strip__day:hover { background: var(--ps-chip); }
.ps-pub-strip__day.is-on { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-pub-strip__day.is-past:not(.is-on) .ps-pub-strip__n { color: var(--ps-fg-3); }
.ps-pub-strip__day:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 1px; }
.ps-pub-strip__n { font: 400 var(--ps-type-title)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums; }
.ps-pub-strip__day.is-today .ps-pub-strip__n { box-shadow: inset 0 -2px 0 var(--ps-accent-stroke); }
.ps-pub-strip__wd { font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-2); }
.ps-pub-strip__day.is-on .ps-pub-strip__wd { color: inherit; }
.ps-pub-strip__dots { display: flex; gap: 2px; min-height: 5px; }
.ps-pub-strip__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ps-accent-stroke); }
.ps-pub-strip__dots i.is-live { background: var(--ps-fg-3); }
.ps-pub-strip__dots i.is-failed { background: var(--ps-danger); }
.ps-pub-composer { display: flex; flex-direction: column; gap: var(--ps-space-5); padding: var(--ps-space-5); border-radius: var(--ps-radius-card); background: var(--ps-glass); box-shadow: var(--ps-glass-shadow); }
.ps-pub-composer__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); }
.ps-pub-composer__head > h2 { flex: 1 1 auto; margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; }
/* As the approved mockup (artboard 7, Sisi Nov 6): the media in a 300px column, the captions beside it, When to Post and the channels
   side by side under both; one column when the composer is narrow. */
.ps-pub-composer__two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-5); align-items: start; }
.ps-pub-composer__write { min-width: 0; }
.ps-pub-composer__media .ps-pub-media__slide { width: 100%; }
.ps-pub-composer__media .ps-pub-pick__drop { aspect-ratio: 3 / 4; justify-content: center; }   /* New Post: the post's own shape, as Plann's Create */
.ps-pub-composer__when { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-5); padding-top: var(--ps-space-5); box-shadow: inset 0 1px 0 var(--ps-line); }
.ps-pub-composer__when .ps-publish__title { margin: 0; }
@media (min-width: 1280px) {
  .ps-pub-composer__two { grid-template-columns: 280px minmax(0, 1fr); }
  .ps-pub-composer__when { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ps-planner__aside .ps-gp-grid { max-width: none; }

/* ---------- Copy & Post (part 7b): a channel the person posts themselves; due in the warn tone, posted quiet ---------- */
.ps-copypost { display: flex; flex-direction: column; gap: var(--ps-space-3); padding: var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong);
  box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-copypost.is-due { background: var(--ps-warn-soft); box-shadow: inset 0 0 0 1px var(--ps-warn); }
.ps-copypost.is-live { background: transparent; }
.ps-copypost__head { display: flex; align-items: center; gap: var(--ps-space-3); }
.ps-copypost__title { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.ps-copypost__title b { font-weight: 500; }
.ps-copypost__title > span { font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg-2); }
.ps-copypost__acts { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }

/* ---------- The post's pillar (part 7a): its series color (the pillar's position), a quiet select ---------- */
.ps-pub-pillar { display: inline-flex; align-items: center; gap: var(--ps-space-2); max-width: 100%; min-height: var(--ps-size-touch); padding: 0 var(--ps-space-3);
  border: 1px solid var(--ps-line); border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); }
.ps-pub-pillar__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ps-fg-3); }
.ps-pub-pillar[data-pos] .ps-pub-pillar__dot { box-shadow: none; background: var(--pillar-c, var(--ps-fg-3)); }
.ps-pub-pillar[data-pos="1"] { --pillar-c: var(--ps-series-1); } .ps-pub-pillar[data-pos="2"] { --pillar-c: var(--ps-series-2); }
.ps-pub-pillar[data-pos="3"] { --pillar-c: var(--ps-series-3); } .ps-pub-pillar[data-pos="4"] { --pillar-c: var(--ps-series-4); }
.ps-pub-pillar[data-pos="5"] { --pillar-c: var(--ps-series-5); }
.ps-pub-pillar__select { min-width: 0; max-width: 100%; border: 0; background: transparent; color: var(--ps-fg); font: 400 var(--ps-type-control)/1.2 var(--ps-font-ui); cursor: pointer; }
.ps-pub-pillar__select:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; border-radius: var(--ps-radius-small); }

/* ---------- When to Post (part 4): the AI's best time, its other good times, Pick a Time, Post Now (PS.publish.whenToPost) ---------- */
.ps-when { display: flex; flex-direction: column; gap: var(--ps-space-2); }
.ps-when__opt { display: flex; align-items: flex-start; gap: var(--ps-space-3); width: 100%; padding: var(--ps-space-3) var(--ps-space-4); border: 1px solid var(--ps-line); border-radius: var(--ps-radius-card);
  background: transparent; color: var(--ps-fg); font: inherit; text-align: left; cursor: pointer; }
.ps-when__opt[aria-checked="true"] { border-color: var(--ps-color-sprout-strong); background: var(--ps-ok-soft); }
.ps-when__opt:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-when__radio { display: grid; place-items: center; flex: none; width: var(--ps-space-5); height: var(--ps-space-5); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ps-fg-3); }
.ps-when__opt[aria-checked="true"] .ps-when__radio { box-shadow: inset 0 0 0 1.5px var(--ps-accent-stroke); }
.ps-when__opt[aria-checked="true"] .ps-when__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ps-accent-stroke); }
.ps-when__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ps-space-1); min-width: 0; }
.ps-when__text b { font-weight: 500; }
.ps-when__text > span:last-child { font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); }
.ps-when__big { font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; }
.ps-when__alts { display: flex; flex-direction: column; gap: var(--ps-space-2); padding: var(--ps-space-1) var(--ps-space-4) var(--ps-space-3) calc(var(--ps-space-4) + var(--ps-space-5) + var(--ps-space-3)); }
.ps-when__custom { box-sizing: border-box; width: 100%; min-width: 0; padding-left: calc(var(--ps-space-4) + var(--ps-space-5) + var(--ps-space-3)); }
.ps-when__custom[hidden] { display: none; }
.ps-when__custom .ps-input { box-sizing: border-box; width: 100%; min-width: 0; }

/* ======================================================================================================
   Voice and Words (GTM-380, S-21, Oct 20, 2026; the prototype's board BrandVoice). The subscriber's voice on the phone:
   We Are / We Are Not, Sounds Like Us (one line per sample, each language marked), Never Say; Edit in place (pairs kept
   together, as the Brand Guidelines store them), Rewrite with AI ("up to N credits" first), and, while a new version waits
   for their yes, Current / Proposed with Keep Current and Approve New Version. Reads and writes the Brand Guidelines'
   sections 1 and 2 (no route of its own). The same components on a phone and the desktop (S-26).
   ====================================================================================================== */
.ps-voice { display: flex; flex-direction: column; gap: var(--ps-space-6); width: 100%; max-width: calc(var(--ps-size-page-max) / 2 + var(--ps-space-7) * 2); min-width: 0; }
.ps-voice *, .ps-voice *::before, .ps-voice *::after { box-sizing: border-box; }   /* also on pages outside .ps-page */
.ps-voice__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ps-space-3); }
.ps-voice__head > .ps-section { margin: 0; }
.ps-voice__groups { display: flex; flex-direction: column; gap: var(--ps-space-5); min-width: 0; }
.ps-voice__group { display: flex; flex-direction: column; gap: var(--ps-space-2); min-width: 0; }
.ps-voice__group > .ps-labelcaps { margin: 0; color: var(--ps-fg-2); }
.ps-voice__lines { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-voice__line { display: flex; align-items: baseline; gap: var(--ps-space-2); padding: var(--ps-space-3) var(--ps-space-4); border-radius: var(--ps-radius-control);
  background: var(--ps-chip); color: var(--ps-fg); font-size: var(--ps-type-title); line-height: 1.45; overflow-wrap: anywhere; }
.ps-voice__line > .ps-tag { flex: none; }
.ps-brand-voice__group--never .ps-brand-voice__chips > li { background: var(--ps-warn-soft); color: var(--ps-warn); }   /* never say: the warn tint, its text the theme's warn */
.ps-voice__ai { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ps-space-2); }
.ps-voice__actions { display: flex; flex-wrap: wrap; gap: var(--ps-space-3); }
.ps-voice__actions .ps-btn--accent { flex: 1 1 auto; }
/* Nov 7, 2026 (Sisi; pricing PL-7, PL-9): the whole voice as one page of numbered parts (PS.voice.sheet). The same fields whether the
   AI wrote them on a plan or the person typed them on Free: every value edits where it is (.ps-editval wells), a list of lines keeps
   its Remove beside each line on a phone too (.ps-voice-list), and the page is as wide as a page, since each part has two columns. */
.ps-voice--sheet { max-width: var(--ps-size-page-max); }
.ps-voice__sheet { display: flex; flex-direction: column; gap: var(--ps-space-6); min-width: 0; }
.ps-voice__val { color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-voice-list { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; min-width: 0; }
.ps-voice-list > li { display: flex; align-items: flex-start; gap: var(--ps-space-2); min-width: 0; }
.ps-voice-list > li > :first-child { flex: 1 1 auto; min-width: 0; }
.ps-voice-list > li > .ps-btn { flex: none; }
/* The editor: We Are / We Are Not as pairs (a row of two fields and Remove), Never Say as tags, Sounds Like Us one line per sample */
.ps-voice-pairs { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-voice-pairs--described { gap: var(--ps-space-5); }   /* each row has a line under it (a trait and how it sounds): rows stand apart (Oct 31) */
.ps-voice-pairs--described > li { display: flex; flex-direction: column; gap: var(--ps-space-2); }
.ps-voice-pairs__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: var(--ps-space-2); }
.ps-voice-pairs__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--ps-size-control); gap: var(--ps-space-2); }
.ps-voice-pairs__head > span { color: var(--ps-fg-2); font-size: var(--ps-type-caption); }
.ps-voice textarea.ps-input { min-height: calc(var(--ps-size-touch) * 2); resize: vertical; font-size: var(--ps-type-field); }
@media (max-width: 720px) {
  .ps-voice { gap: var(--ps-space-5); }
  .ps-voice__actions .ps-btn { flex: 1 1 100%; min-height: var(--ps-size-touch); }
  .ps-voice__ai .ps-btn { width: 100%; min-height: var(--ps-size-touch); }
}

/* ps-teammode:start */
/* ======================================================================================================
   Team mode (GTM-388, S-31, Oct 21, 2026): the team on a subscriber's own screens (PS.teamMode in ps-ui.js). The page is the
   subscriber's; the team sees whom they work for under the title, and their own notes in a card the subscriber never gets.
   ====================================================================================================== */
.ps-pagehead__for { display: flex; align-items: center; gap: var(--ps-space-2); margin: 0; min-width: 0;
  font: 400 var(--ps-type-body)/1.3 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-pagehead__for b { font-weight: 600; color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-teammode-pick { align-items: flex-start; }
.ps-teammode-pick > .ps-icon { color: var(--ps-fg-3); }
.ps-teamnotes { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-teamnotes__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ps-space-3); margin: 0; }
.ps-teamnotes__facts dd { margin: var(--ps-space-1) 0 0; color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-teamnotes__asks, .ps-teamnotes__log { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-teamnotes__ask { display: flex; flex-direction: column; gap: var(--ps-space-1); }
.ps-teamnotes__ask q { color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-teamnotes__log li { color: var(--ps-fg-2); overflow-wrap: anywhere; }
.ps-teamnotes__log b { font-weight: 600; color: var(--ps-fg); }
/* ps-teammode:end */

   Signals (GTM-229, Oct 17, 2026): the Ideator's Signals source card (F18 Signals), on both Ideator pages (PS.signalList).
   What is happening around a business (weather alerts, federal rules on how its industry advertises and sells…), researched once
   a week for every business in its industry and area: one card per signal with its kind (.ps-badge), its area (.ps-tag), its
   dates, the title, a short summary, why it matters in the agent's lavender (.ps-idea-why, from the Ideator swipe section) and
   its source link. A quiet note when there is nothing yet. Tokens only.
   ====================================================================================================== */
.ps-signals { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; }
.ps-signals *, .ps-signals *::before, .ps-signals *::after { box-sizing: border-box; }
.ps-signals__lead { margin: 0; max-width: 68ch; font-size: var(--ps-type-body); line-height: 1.5; color: var(--ps-fg-2); }
.ps-signals__lead strong { font-weight: 500; color: var(--ps-fg); }
.ps-signal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--ps-space-7) * 8)), 1fr)); gap: var(--ps-space-3);
  margin: 0; padding: 0; list-style: none; min-width: 0; }
.ps-signal { display: flex; gap: var(--ps-space-3); min-width: 0; padding: var(--ps-space-4); border-radius: var(--ps-radius-card);
  background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-signal__icon { flex: none; display: grid; place-items: center; width: var(--ps-size-control-sm); height: var(--ps-size-control-sm); border-radius: 50%;
  background: var(--ps-chip); color: var(--ps-fg-2); }
.ps-signal__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ps-space-2); }
.ps-signal__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); }
.ps-signal__when { font-size: var(--ps-type-caption); color: var(--ps-fg-2); font-variant-numeric: tabular-nums; }
.ps-signal__title { margin: 0; font: 500 var(--ps-type-body)/1.35 var(--ps-font-ui); color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-signal__summary { margin: 0; font-size: var(--ps-type-caption); line-height: 1.5; color: var(--ps-fg-2); overflow-wrap: anywhere; }
.ps-signal__source { display: inline-flex; align-items: center; gap: var(--ps-space-1); align-self: flex-start; font-size: var(--ps-type-caption); color: var(--ps-fg-2); text-decoration: none; }
.ps-signal__source:hover { font-weight: 500; }   /* links change weight on hover, never color */
.ps-signal__source:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; border-radius: var(--ps-radius-small); }
.ps-signals__empty { margin: 0; padding: var(--ps-space-5); border-radius: var(--ps-radius-card); box-shadow: inset 0 0 0 1px var(--ps-line);
  font-size: var(--ps-type-body); line-height: 1.5; color: var(--ps-fg-2); }
.ps-signals__foot { margin: 0; font-size: var(--ps-type-caption); line-height: 1.5; color: var(--ps-fg-3); }
/* Groups (Oct 18: Trends, News, Alerts): a quiet label-caps title with the group's count, then its cards. */
.ps-signals__group { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-signals__group-title { display: flex; align-items: center; gap: var(--ps-space-2); margin: 0; font: 500 var(--ps-type-caption)/1.3 var(--ps-font-ui);
  letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-2); }
.ps-signals__group-count { font-variant-numeric: tabular-nums; color: var(--ps-fg-3); letter-spacing: 0; }
/* On a phone the kind's badge says what the icon says, so the text gets the card's whole width. */
@media (max-width: 720px) { .ps-signal { padding: var(--ps-space-3); } .ps-signal__icon { display: none; } .ps-signal__source { min-height: var(--ps-size-touch); } }
/* ps-castel:start */
/* ===============================================================================================   Cast + Elements (GTM-388, docs/studio/PLAN.md S-38, Oct 22, 2026): one page for a subscriber's people, places and products
   (client/cast.html; assets/brand-elements.js PSElements.mount with layout 'shelves'), for the subscriber and the team.
   .ps-pagehead--cta + .ps-pagehead__cta: the page's one main button with a short line under it (a limit, a count), at the end of
     the title and the sub line on the desktop, after the sub line at full width on a phone.
   .ps-shelf (--portrait 4:5 people, --wide 3:2 places, --square products): __head (__icon tile, __title in Bebas, __sub),
     __note (a side line: under the row on a phone), __row (cards of one width that wrap on the desktop and scroll sideways on a
     phone), __add (the dashed Add tile that ends a row: a .ps-media--add with __addlabel inside its thumb).
   .ps-media__voice: a person's voice line under the @handle (GTM-390 voice clones; .is-ready, .is-waiting).
   .ps-shelf--list: a shelf whose items are .ps-list rows, not cards (Voices, Oct 27: nothing to picture); a .ps-hint after the
     list is its count line. On a phone a row's __end (badge, buttons) goes under its name.
   .ps-chips--scroll: a chip row that scrolls sideways on a phone instead of wrapping.
   .ps-castintro: the start card of an empty library (on .ps-card--accent): __title, __text, __actions, __more.
   .ps-kindcards > .ps-kindcard (on .ps-card): what each kind is for: __art (a dashed frame with the kind's icon), __title,
     __text, __example (after a .ps-labelcaps "For example"), then its Add button.
   .ps-banner--tip: a lime tip line.
   ====================================================================================================== */
.ps-pagehead--cta { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ps-space-5); }
.ps-pagehead--cta > :not(.ps-pagehead__cta) { grid-column: 1; }
.ps-pagehead__cta { grid-column: 2; grid-row: 2 / span 2; align-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: var(--ps-space-3); min-width: 0; }
.ps-pagehead--cta:has(> .ps-pagehead__for) > .ps-pagehead__cta { grid-row: 2 / span 3; }
.ps-pagehead__cta > .ps-hint { margin: 0; text-align: right; }
@media (max-width: 768px) {
  .ps-pagehead--cta { grid-template-columns: minmax(0, 1fr); }
  .ps-pagehead--cta > .ps-pagehead__cta { grid-column: 1; grid-row: auto; align-items: stretch; gap: var(--ps-space-2); margin-top: var(--ps-space-3); }
  .ps-pagehead__cta > .ps-btn { min-height: var(--ps-size-touch); justify-content: flex-start; }
  /* a round "+" (Oct 31, Sisi: just the icon): its line on the left, the button at the right end of the same row */
  .ps-pagehead--cta > .ps-pagehead__cta:has(> .ps-btn--icon) { flex-direction: row-reverse; justify-content: space-between; align-items: center; }
  .ps-pagehead__cta > .ps-btn--icon { flex: none; width: var(--ps-size-touch); justify-content: center; }
  /* with its line in the "i", the round plus sits beside the title */
  .ps-pagehead--cta:has(> .ps-pagehead__cta > .ps-btn--icon) { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ps-space-3); }
  .ps-pagehead--cta > .ps-pagehead__cta:has(> .ps-btn--icon) { grid-column: 2; grid-row: 2; align-self: center; margin-top: 0; }
  .ps-pagehead__cta > .ps-hint { text-align: left; }
}

.ps-shelf { --ps-shelf-card: 180px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head note" "row row"; align-items: end;
  gap: var(--ps-space-4) var(--ps-space-5); min-width: 0; }
.ps-shelf--wide { --ps-shelf-card: 260px; }
.ps-shelf--portrait .ps-media { --ps-media-ratio: 4 / 5; }
.ps-shelf--wide .ps-media { --ps-media-ratio: 3 / 2; }
.ps-shelf--square .ps-media { --ps-media-ratio: 1; }
.ps-shelf__head { grid-area: head; display: flex; align-items: flex-start; gap: var(--ps-space-3); min-width: 0; }
.ps-shelf__icon { flex: none; display: grid; place-items: center; width: var(--ps-size-head-button); height: var(--ps-size-head-button); border-radius: var(--ps-radius-small);
  background: var(--ps-chip); color: var(--ps-fg-2); }
.ps-shelf__text { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-shelf__title { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
.ps-shelf__sub { margin: 0; font: 400 var(--ps-type-caption)/1.45 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-shelf__note { grid-area: note; display: flex; align-items: center; gap: var(--ps-space-2); margin: 0; font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-shelf__note .ps-icon { flex: none; width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); color: var(--ps-fg-3); }
.ps-shelf__row { grid-area: row; display: grid; grid-template-columns: repeat(auto-fill, minmax(0, var(--ps-shelf-card))); gap: var(--ps-space-5); margin: 0; padding: 0; list-style: none; min-width: 0; }
.ps-shelf__row > li { display: flex; flex-direction: column; min-width: 0; }
.ps-shelf__row > li > .ps-media { flex: 1 1 auto; }
.ps-shelf__row > li.ps-hint { grid-column: 1 / -1; }
.ps-shelf__add > .ps-media__thumb { align-content: center; gap: var(--ps-space-2); }
.ps-shelf__addlabel { font: 500 var(--ps-type-caption)/1.3 var(--ps-font-ui); }
.ps-media__tag > .ps-dot--warn { background: var(--ps-color-vivid-orange); }   /* on the solid graphite tag, in both themes */
.ps-media__voice { display: flex; align-items: center; gap: var(--ps-space-1); min-width: 0; margin-top: var(--ps-space-1); font: 500 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-media__voice > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-media__voice .ps-icon { flex: none; width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); }
.ps-media__voice.is-ready { color: var(--ps-fg); } .ps-media__voice.is-ready .ps-icon { color: var(--ps-ok-text); }
.ps-media__voice.is-waiting { color: var(--ps-fg); } .ps-media__voice.is-waiting .ps-icon { color: var(--ps-warn); }
.ps-shelf--list > .ps-list { grid-area: row; }
.ps-shelf--list > .ps-hint { grid-column: 1 / -1; margin: 0; }
.ps-chips--scroll { min-width: 0; }
@media (max-width: 720px) {
  .ps-shelf--list .ps-list__row { flex-wrap: wrap; row-gap: var(--ps-space-2); }
  .ps-shelf--list .ps-list__body { flex: 1 1 calc(100% - 32px - var(--ps-space-3)); }
  .ps-shelf--list .ps-list__end { flex-wrap: wrap; margin-left: calc(32px + var(--ps-space-3)); }
  .ps-shelf { --ps-shelf-card: 150px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "row" "note"; gap: var(--ps-space-3); }
  .ps-shelf--wide { --ps-shelf-card: 220px; }
  .ps-shelf__row { display: flex; gap: var(--ps-space-3); margin: calc(-1 * var(--ps-space-1)); padding: var(--ps-space-1); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; }
  .ps-shelf__row::-webkit-scrollbar { display: none; }
  .ps-shelf__row > li { flex: none; width: var(--ps-shelf-card); scroll-snap-align: start; }
  .ps-shelf__row > li.ps-hint { width: auto; }
  .ps-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: calc(-1 * var(--ps-space-1)); padding: var(--ps-space-1); }
  .ps-chips--scroll::-webkit-scrollbar { display: none; }
  .ps-chips--scroll > * { flex: none; }
}

.ps-castintro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--ps-space-5) var(--ps-space-6); padding: var(--ps-space-6); }
.ps-castintro__title { margin: 0 0 var(--ps-space-3); font: 400 calc(var(--ps-type-section) * 1.25)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-castintro__text { margin: 0; max-width: 62ch; font: 400 var(--ps-type-title)/1.55 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-castintro__actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ps-space-3); min-width: 0; }
.ps-castintro__more { display: flex; align-items: center; gap: var(--ps-space-2); margin: 0; font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-kindcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-5); margin: 0; padding: 0; list-style: none; }
.ps-kindcards > li { display: flex; min-width: 0; }
.ps-kindcard { flex: 1 1 auto; gap: var(--ps-space-3); }
.ps-kindcard__art { display: grid; place-items: center; aspect-ratio: 2 / 1; margin-bottom: var(--ps-space-2); border-radius: var(--ps-radius-control);
  border: 1.5px dashed color-mix(in oklab, var(--ps-fg-3) 55%, transparent); background: var(--ps-chip); color: var(--ps-fg-2); }
.ps-kindcard__art .ps-icon { width: calc(var(--ps-size-icon-lg) * 1.3); height: calc(var(--ps-size-icon-lg) * 1.3); }
.ps-kindcard__title { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
.ps-kindcard__text { margin: 0; font: 400 var(--ps-type-body)/1.55 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-kindcard__example { margin: calc(-1 * var(--ps-space-2)) 0 0; font: 400 var(--ps-type-body)/1.45 var(--ps-font-ui); color: var(--ps-fg); }
.ps-kindcard > .ps-btn { align-self: flex-start; margin-top: auto; }
.ps-kindcard > .ps-labelcaps { margin: var(--ps-space-1) 0 0; }
.ps-banner--tip { background: color-mix(in oklab, var(--ps-color-sprout) 38%, transparent); }
.ps-banner--tip .ps-banner__icon { color: var(--ps-fg); }
@media (max-width: 860px) { .ps-kindcards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .ps-castintro { grid-template-columns: minmax(0, 1fr); padding: var(--ps-space-5); }
  .ps-castintro__title { font-size: var(--ps-type-section); }
  .ps-castintro__actions { align-items: stretch; }
  .ps-castintro__actions > .ps-btn { min-height: var(--ps-size-touch); justify-content: flex-start; }
}
/* ps-castel:end */
/* ---------- The team's Account page (GTM-388 S-39, internal/client.html): who the business is, what needs doing ----------
   Under the page head: the team on the account (.ps-acct-team > .ps-acct-person: an avatar, the name, the role), the key facts
   strip (.ps-acct-facts, a __cell each), then the Overview: Needs Attention and Recent Work side by side (.ps-acct-grid of
   .ps-acct-card, each headed by .ps-acct-head with a Bebas .ps-section), each attention row's icon (.ps-acct-attn, tone --warn
   orange, --ai lavender, --info sky), their brand's three parts as link cards (.ps-acct-links > a.ps-acct-link) and the Account
   Details in two columns (.ps-acct-details). Phones stack everything; the facts strip goes two by two. */
.ps-acct-team { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-3) var(--ps-space-5); margin-top: var(--ps-space-2); min-width: 0; }
.ps-acct-team > .ps-row:empty { display: none; }
.ps-acct-person { display: inline-flex; align-items: center; gap: var(--ps-space-2); min-width: 0; }
.ps-acct-person__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-acct-person__name { font: 500 var(--ps-type-control)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-acct-person__role { font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-acct-person__role .ps-link { font: inherit; padding: 0; border: 0; background: none; cursor: pointer; }
.ps-acct-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ps-space-4); padding: var(--ps-space-4) var(--ps-space-5);
  border-radius: var(--ps-radius-card); background: var(--ps-glass); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-acct-facts:empty { display: none; }
.ps-acct-facts__cell { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-acct-facts__cell > .ps-labelcaps { margin: 0; color: var(--ps-fg-3); }
.ps-acct-facts__value { font: 500 var(--ps-type-control)/1.35 var(--ps-font-ui); color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-acct-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--ps-space-5); align-items: start; }
.ps-acct-grid > :only-child { grid-column: 1 / -1; }
.ps-acct-card { gap: var(--ps-space-3); }
.ps-acct-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--ps-space-2) var(--ps-space-4); min-width: 0; }
.ps-acct-head > .ps-section { margin: 0; color: var(--ps-fg); }
.ps-acct-attn { flex: none; width: var(--ps-size-control); height: var(--ps-size-control); border-radius: 50%; display: grid; place-items: center; color: var(--ps-fg);
  background: color-mix(in srgb, var(--acct-tone, var(--ps-fg-3)) 20%, transparent); }
.ps-acct-attn--warn { --acct-tone: var(--ps-color-vivid-orange); }
.ps-acct-attn--ai { --acct-tone: var(--ps-color-lavender); }
.ps-acct-attn--info { --acct-tone: var(--ps-color-loop-say); }
.ps-acct-empty { display: flex; align-items: center; gap: var(--ps-space-2); margin: 0; padding: var(--ps-space-3) 0; color: var(--ps-fg-2); }
.ps-acct-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-4); }
.ps-acct-link { gap: var(--ps-space-3); color: inherit; text-decoration: none; }
.ps-acct-link:hover { transform: translateY(-1px); }
.ps-acct-link:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-acct-link__head { display: flex; align-items: center; gap: var(--ps-space-2); min-width: 0; color: var(--ps-fg-2); }
.ps-acct-link__title { flex: 1 1 auto; min-width: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); }
.ps-acct-link__go { display: inline-flex; align-items: center; gap: 2px; font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); color: var(--ps-fg); }
.ps-acct-link__swatches { display: flex; gap: var(--ps-space-2); }
.ps-acct-link__state { font: 500 var(--ps-type-control)/1.35 var(--ps-font-ui); color: var(--ps-fg); }
.ps-acct-link__meta { font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-acct-details { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--ps-space-6); align-items: start; }
.ps-acct-details .ps-labelcaps { margin: 0; }
#acct-details { scroll-margin-top: var(--ps-space-6); }
@media (max-width: 900px) {
  .ps-acct-grid, .ps-acct-details, .ps-acct-links { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ps-acct-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--ps-space-4); }
  .ps-acct-team { gap: var(--ps-space-3) var(--ps-space-4); }
}

/* ===============================================================================================
/* ======================================================================================================
   Competitive research (GTM-231, F19, Oct 17, 2026): the Ideator's Competitors card, on the subscriber's and the team's Ideator
   (assets/ideator.js draws it with PS.research; ps-ui.js "Competitive research (GTM-231)"). One calm column:
   .ps-research             the column: the tracked list, the run, the report
   .ps-research__head       a section's title row (.ps-section or .ps-labelcaps, then a badge and its action at the end)
   .ps-research__tracked    the businesses and brands tracked, one .ps-research__item each (name, kind tag, what can be read)
   .ps-research__form       the list being edited: one .ps-research__row each (name, website, Instagram, kind; the note under them)
   .ps-research__run        Run Research: the mode (.ps-seg), the AI field's host (.ps-research__field) and the notice
   .ps-research__summary    the report's summary, in the agent's color (lavender: the AI's reading)
   .ps-research__biz        one business in the report: head, the counted numbers (.ps-research__stats > .ps-research__stat),
                            what they post and offer and the room they leave (.ps-kv)
   .ps-research__ideas      the opportunities for the F6 Ideator and this week's standout posts (.ps-research__idea: the angle, why, what it
                            answers in lavender, its pillar and format); .is-dropped on the Strategist's review (struck through, kept visible
                            so it can be put back)
   .ps-research__review     the Strategist's review: the note and Release to Client
   Lavender is the agent's color (AI only); lime marks the one primary action. Tokens only.
   ====================================================================================================== */
.ps-research { display: flex; flex-direction: column; gap: var(--ps-space-5); min-width: 0; }
.ps-research *, .ps-research *::before, .ps-research *::after { box-sizing: border-box; }
.ps-research__section { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-research__section[hidden], .ps-research__form[hidden], .ps-research__notice:empty, .ps-research__gathered:empty { display: none; }
.ps-research__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); min-width: 0; }
.ps-research__head > :first-child { margin: 0; flex: 1 1 auto; min-width: 0; }
.ps-research__lede { margin: 0; max-width: 60ch; font-size: var(--ps-type-body); line-height: 1.5; color: var(--ps-fg-2); }

/* ---------- The tracked list (read) ---------- */
.ps-research__tracked { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; min-width: 0; }
.ps-research__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); min-width: 0; min-height: var(--ps-size-touch);
  padding: var(--ps-space-2) var(--ps-space-3); border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-research__name { flex: 1 1 12em; min-width: 0; font: 500 var(--ps-type-body)/1.35 var(--ps-font-ui); color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-research__where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-research__where > span { display: inline-flex; align-items: center; gap: var(--ps-space-1); min-width: 0; }
.ps-research__where .ps-icon { flex: none; color: var(--ps-fg-3); }
.ps-research__where .is-off { color: var(--ps-fg-3); }
.ps-research__note { flex: 1 0 100%; margin: 0; font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); overflow-wrap: anywhere; }

/* ---------- The tracked list (edit) ---------- */
.ps-research__form { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-research__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10em), 1fr)); gap: var(--ps-space-2); min-width: 0;
  padding: var(--ps-space-3); border-radius: var(--ps-radius-control); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-research__row > .ps-field--note { grid-column: 1 / -1; }
.ps-research__row textarea.ps-input { width: 100%; min-height: calc(var(--ps-size-touch) * 1.4); resize: vertical; }
.ps-research__form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ps-space-2); }
.ps-research__form-foot .ps-hint { margin-right: auto; }

/* ---------- Run Research ---------- */
.ps-research__run { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; padding: var(--ps-space-4); border-radius: var(--ps-radius-card);
  background: var(--ps-glass-solid); box-shadow: var(--ps-glass-shadow); }
.ps-research__modes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); }
.ps-research__field { min-width: 0; }
.ps-research__gathered { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }

/* ---------- The report ---------- */
.ps-research__summary { margin: 0; padding: var(--ps-space-3) var(--ps-space-4); border-radius: var(--ps-radius-control); background: var(--ps-agent-bg);
  color: var(--ps-fg); font-size: var(--ps-type-body); line-height: 1.5; max-width: 72ch; }
.ps-research__strategist { margin: 0; padding: var(--ps-space-3) var(--ps-space-4); border-radius: var(--ps-radius-control); box-shadow: inset 0 0 0 1px var(--ps-line);
  font-size: var(--ps-type-body); line-height: 1.5; color: var(--ps-fg); max-width: 72ch; overflow-wrap: anywhere; }
.ps-research__strategist > .ps-labelcaps { display: block; margin-bottom: var(--ps-space-1); }
.ps-research__bizlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; }
.ps-research__biz { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; padding: var(--ps-space-4); border-radius: var(--ps-radius-card);
  background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-research__biz-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); min-width: 0; }
.ps-research__biz-name { margin: 0; flex: 1 1 auto; min-width: 0; font: 400 var(--ps-type-story-mark)/1 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-research__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-2); margin: 0; }
.ps-research__stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--ps-space-2) var(--ps-space-3); border-radius: var(--ps-radius-control); background: var(--ps-chip); }
.ps-research__stat dt { order: 2; font-size: var(--ps-type-micro); line-height: 1.3; color: var(--ps-fg-2); }
.ps-research__stat dd { order: 1; margin: 0; font: 400 var(--ps-type-story-mark)/1 var(--ps-font-display); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--ps-fg); }
/* the label above its value: a card is often a narrow column (three across on the desktop, the Ideator panel on a phone) */
.ps-research__biz .ps-kv { grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-1); font-size: var(--ps-type-caption); line-height: 1.45; }
.ps-research__biz .ps-kv dd { color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-research__biz .ps-kv dd + dt { margin-top: var(--ps-space-2); }
.ps-research__biz .ps-kv dd .ps-tag, .ps-research__idea-top .ps-tag { max-width: 100%; overflow: hidden; }
.ps-research__biz .ps-kv dd .ps-tag { margin: 0 var(--ps-space-1) var(--ps-space-1) 0; }
.ps-research__room { margin: 0; padding-top: var(--ps-space-2); border-top: 1px solid var(--ps-line); font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-agent-fg); }
.ps-research__unread { margin: 0; font-size: var(--ps-type-caption); color: var(--ps-fg-3); }

/* ---------- Counter-ideas ---------- */
.ps-research__ideas { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; min-width: 0; }
.ps-research__idea { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; padding: var(--ps-space-3) var(--ps-space-4); border-radius: var(--ps-radius-control);
  background: var(--ps-glass-strong); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-research__idea-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); min-width: 0; }
.ps-research__idea-title { flex: 1 1 auto; margin: 0; min-width: 0; font: 500 var(--ps-type-body)/1.35 var(--ps-font-ui); color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-research__idea-hook { margin: 0; font-size: var(--ps-type-body); line-height: 1.45; color: var(--ps-fg-2); overflow-wrap: anywhere; }
.ps-research__idea-answers { margin: 0; font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-agent-fg); overflow-wrap: anywhere; }
.ps-research__idea.is-dropped { box-shadow: inset 0 0 0 1px var(--ps-line); background: none; }
.ps-research__idea.is-dropped :is(.ps-research__idea-title, .ps-research__idea-hook) { text-decoration: line-through; color: var(--ps-fg-3); }

/* ---------- The Strategist's review ---------- */
.ps-research__review { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; padding: var(--ps-space-4); border-radius: var(--ps-radius-card);
  box-shadow: inset 0 0 0 1.5px var(--ps-color-lavender); }
.ps-research__review textarea.ps-input { width: 100%; min-height: calc(var(--ps-size-touch) * 2); resize: vertical; }

@media (max-width: 720px) {
  .ps-research { gap: var(--ps-space-4); }
  .ps-research__row { grid-template-columns: minmax(0, 1fr); }
  .ps-research__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ps-research__form-foot .ps-btn, .ps-research__review .ps-btn { flex: 1 1 auto; min-height: var(--ps-size-touch); }
}

/* ps-whatsworking:start */
/* ======================================================================================================
   What's working (GTM-234; F15, the Ideator's "What's working" source card, docs/agents/ideator.md 7)
   The reading of a business's own posts, by rule (.ps-working, PS.whatsWorking): what to do more and less of, the top and
   weakest posts, what gets the most views, saves, shares and comments, the best time to post and the hashtags that work.
   Before there's a reading (no accounts, a connection to renew, too few posts) the same block shows one calm state with
   its next step. The same component on the subscriber's Ideator and the team's, on a phone and the desktop (S-26).
   ====================================================================================================== */
.ps-working { display: flex; flex-direction: column; gap: var(--ps-space-6); min-width: 0; }
.ps-working *, .ps-working *::before, .ps-working *::after { box-sizing: border-box; }
.ps-working__meta { margin: 0; font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); }
.ps-working__title { margin: 0 0 var(--ps-space-3); font: 500 var(--ps-type-label)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-working__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-5); }

/* do more of / do less of: one line each, the reason under it */
.ps-working__tips { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-working__tip { display: flex; align-items: flex-start; gap: var(--ps-space-3); padding: var(--ps-space-3); border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); }
.ps-working__tip > .ps-icon { flex: none; margin-top: 1px; }
.ps-working__tip[data-dir="more"] > .ps-icon { color: var(--ps-ok-text); }
.ps-working__tip[data-dir="less"] > .ps-icon { color: var(--ps-fg-3); }
.ps-working__tip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-working__tip-label { font: 500 var(--ps-type-body)/1.35 var(--ps-font-ui); color: var(--ps-fg); }
.ps-working__tip-why { font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg-2); }
.ps-working__none { margin: 0; font-size: var(--ps-type-caption); color: var(--ps-fg-3); }

/* top and weakest posts: the platform, two lines of the caption, the numbers */
.ps-working__posts { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ps-working__post { display: flex; align-items: flex-start; gap: var(--ps-space-3); padding: var(--ps-space-3) 0; box-shadow: inset 0 -1px 0 var(--ps-line); }
.ps-working__post:last-child { box-shadow: none; }
.ps-working__post > .ps-plat { flex: none; }
.ps-working__post-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-working__post-text { margin: 0; font-size: var(--ps-type-body); line-height: 1.4; color: var(--ps-fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps-working__post-meta { font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg-2); }

/* what gets the most, the best time and the hashtags */
.ps-working__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ps-space-2) var(--ps-space-4); margin: 0; }
.ps-working__facts dt { font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.ps-working__facts dd { margin: 0; min-width: 0; font-size: var(--ps-type-body); color: var(--ps-fg); }
.ps-working__tags { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }

/* before there's a reading: one state, its reason and its next step */
.ps-working__state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ps-space-2); max-width: 60ch; }
.ps-working__state > .ps-icon { color: var(--ps-fg-3); }
.ps-working__state-title { margin: 0; font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-working__state-text { margin: 0; font-size: var(--ps-type-body); line-height: 1.5; color: var(--ps-fg-2); }
.ps-working__state .ps-btn { margin-top: var(--ps-space-2); }

@media (max-width: 720px) {
  .ps-working { gap: var(--ps-space-5); }
  .ps-working__cols { grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-5); }
  .ps-working__facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ps-working__facts dd + dt { margin-top: var(--ps-space-2); }
}

/* ======================================================================================================
   Needs your accounts (GTM-234; Sisi, Oct 21, 2026): a feature that reads the subscriber's connected accounts says what it
   needs (.ps-needs-accounts, PS.needsAccounts). Nothing connected: one calm block with its reason and next step. Partly
   connected: one line that says what it reads and what's missing (--compact). The subscriber's step is Connect Your Channels
   (their Channels page); the team's is Remind <Subscriber>, never connecting for them. First on What's working (F15); Analyze
   Results, Publish and Social Chatter can use the same block.
   ====================================================================================================== */
.ps-needs-accounts { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ps-space-2); max-width: 60ch; min-width: 0; }
.ps-needs-accounts *, .ps-needs-accounts *::before, .ps-needs-accounts *::after { box-sizing: border-box; }
.ps-needs-accounts > .ps-icon { color: var(--ps-fg-3); }
.ps-needs-accounts__title { margin: 0; font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-needs-accounts__text { margin: 0; font-size: var(--ps-type-body); line-height: 1.5; color: var(--ps-fg-2); }
.ps-needs-accounts__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-3); margin-top: var(--ps-space-2); }
.ps-needs-accounts__note { font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg-3); }
.ps-needs-accounts--compact { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ps-space-3); max-width: none;
  padding: var(--ps-space-3) var(--ps-space-4); border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); }
.ps-needs-accounts--compact > .ps-icon { flex: none; }
.ps-needs-accounts--compact .ps-needs-accounts__text { flex: 1 1 calc(var(--ps-space-7) * 5); min-width: 0; color: var(--ps-fg); }
.ps-needs-accounts--compact .ps-needs-accounts__actions { margin-top: 0; }
@media (max-width: 720px) {
  .ps-needs-accounts__actions, .ps-needs-accounts__actions .ps-btn { width: 100%; }
  .ps-needs-accounts__actions .ps-btn { min-height: var(--ps-size-touch); justify-content: center; }
}
/* ps-whatsworking:end */

/* ---------- The cut review (GTM-399 Edit a Video, part 4; docs/studio/EDIT-A-VIDEO-PLAN.md v2 section 3): a talking video's transcript is
   its editor. .ps-cutsheet holds it: the opening (.ps-cuthook, the agent's pick and the other openings), the sections (.ps-cutsec: Hook,
   Point, Proof, Call to Action), a row per sentence (.ps-cutline) with its words as buttons (.ps-word: a tap cuts a word or brings it back),
   a line's takes (.ps-takes), and the key to the cuts' reasons (.ps-cutkey). Cut words are struck through and tinted by reason (data-why);
   a word that may be a filler is underlined dashed until accepted (.is-maybe). The player (.ps-cutplayer) previews the cut from the clips.
   "Want help?" (.ps-helpoffer) is the quiet offer on every step of the Studio (plan section 3, decision 5). Tokens only. ---------- */
.ps-cutsheet { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; }
.ps-cutsheet__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ps-space-2) var(--ps-space-4); font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-cutsheet__meta b { font: 600 var(--ps-type-body)/1 var(--ps-font-ui); color: var(--ps-fg); font-variant-numeric: tabular-nums; }
.ps-cuthook { display: flex; flex-direction: column; gap: var(--ps-space-2); padding: var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-agent-bg); color: var(--ps-fg); }
.ps-cuthook__said { margin: 0; font: 500 var(--ps-type-title)/1.45 var(--ps-font-ui); }
.ps-cuthook__why { margin: 0; font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-agent-fg); }
.ps-cuthook__alts { display: flex; flex-direction: column; gap: var(--ps-space-1); margin: var(--ps-space-1) 0 0; padding: 0; list-style: none; }
.ps-cuthook__alt { display: flex; align-items: center; gap: var(--ps-space-3); justify-content: space-between; padding: var(--ps-space-2) var(--ps-space-3); border-radius: var(--ps-radius-small);
  background: var(--ps-pop-bg); font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); }
.ps-cuthook__alt span { min-width: 0; }
.ps-cuthook__alt small { display: block; color: var(--ps-fg-3); font-size: var(--ps-type-caption); }
.ps-cutsec { display: flex; flex-direction: column; gap: var(--ps-space-1); }
.ps-cutsec__title { margin: 0 0 var(--ps-space-1); }
.ps-cutline { display: flex; align-items: flex-start; gap: var(--ps-space-2); padding: var(--ps-space-2); border-radius: var(--ps-radius-small); background: var(--ps-chip); }
.ps-cutline__body { flex: 1; min-width: 0; }
.ps-cutline__text { margin: 0; font: 400 var(--ps-type-field)/1.75 var(--ps-font-ui); color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-cutline__tools { flex: none; display: flex; gap: 2px; }
.ps-cutline__tools .ps-btn--icon { width: 28px; height: 28px; min-height: 28px; }
.ps-cutline__clip { flex: none; min-width: 28px; padding-top: var(--ps-space-1); font: 500 var(--ps-type-label)/1.4 var(--ps-font-mono); color: var(--ps-fg-3); text-align: center; }
.ps-cutline.is-out { background: none; box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-cutline.is-out .ps-cutline__text { color: var(--ps-fg-3); }
.ps-cutline__out { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ps-space-2); margin-top: var(--ps-space-1); font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-word { display: inline; margin: 0; padding: 1px 1px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; line-height: inherit; cursor: pointer; }
.ps-word:hover { background: var(--ps-pop-bg); }
.ps-word.is-cut { color: var(--ps-fg-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ps-word.is-cut[data-why="filler"] { background: var(--ps-warn-soft); }
.ps-word.is-cut:is([data-why="false_start"], [data-why="retake"], [data-why="retake_cue"]) { background: var(--ps-danger-soft); }
.ps-word.is-cut[data-why="off_topic"] { background: var(--ps-agent-bg); }
.ps-word.is-cut[data-why="person"] { background: var(--ps-info-soft); }
.ps-word.is-maybe { text-decoration: underline dashed var(--ps-warn); text-underline-offset: 4px; }
.ps-takes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); margin-top: var(--ps-space-1); font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-cutkey { display: flex; flex-wrap: wrap; gap: var(--ps-space-2) var(--ps-space-3); margin: 0; padding: 0; list-style: none; font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-cutkey li { display: inline-flex; align-items: center; gap: var(--ps-space-1); }
.ps-cutkey .ps-word { cursor: default; }
.ps-cutplayer { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-cutplayer__frame { position: relative; overflow: hidden; border-radius: var(--ps-radius-card); background: var(--ps-color-ink); aspect-ratio: 9 / 16; max-height: 70vh; margin: 0 auto; width: auto; max-width: 100%; }
.ps-cutplayer__frame[data-size="4:5"] { aspect-ratio: 4 / 5; }
.ps-cutplayer__frame[data-size="1:1"] { aspect-ratio: 1 / 1; }
.ps-cutplayer__frame[data-size="16:9"] { aspect-ratio: 16 / 9; width: 100%; max-height: none; }
.ps-cutplayer__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-cutplayer__bar { display: flex; align-items: center; gap: var(--ps-space-3); font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-cutplayer__note { margin: 0; font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-cutplayer__time { margin-left: auto; font-family: var(--ps-font-mono); font-variant-numeric: tabular-nums; }
.ps-helpoffer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); padding: var(--ps-space-3) var(--ps-space-4); border-radius: var(--ps-radius-card);
  box-shadow: inset 0 0 0 1px var(--ps-line); font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-helpoffer__ask { flex: 1 1 200px; margin: 0; }
.ps-helpoffer__ask b { color: var(--ps-fg); font-weight: 500; }
.ps-helpoffer__ways { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
@media (max-width: 720px) {
  .ps-cutline__text { font-size: var(--ps-type-field); }
  .ps-cutplayer__frame { max-height: none; width: min(100%, calc(42vh * 9 / 16)); }
  .ps-cutplayer__frame[data-size="4:5"] { width: min(100%, calc(42vh * 4 / 5)); }
  .ps-cutplayer__frame[data-size="1:1"] { width: min(100%, 42vh); }
  .ps-cutplayer__frame[data-size="16:9"] { width: 100%; }
}
/* The review's stage (GTM-399 part 4): the transcript beside the preview and Make, which stay in view; one column under 1024px, the preview first. */
.ps-cutstage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: start; gap: var(--ps-space-6); min-width: 0; }
.ps-cutstage__side { position: sticky; top: var(--ps-space-4); display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-cutstage__side .ps-movie-bar { flex-direction: column; align-items: stretch; }
.ps-cutstage__side .ps-movie-bar .ps-btn { width: 100%; }
.ps-cutstage__side .ps-movie-bar .ps-movie-bar__text { flex: none; }
@media (max-width: 1023px) {
  .ps-cutstage { grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-5); }
  .ps-cutstage__side { position: static; order: -1; }
}

/* ======================================================================================================
   Grid planner (GTM-253, F13b; Natalia's module, assets/ps-grid-planner.js): the Planner's Grid and Month views, the dark iPhone
   beside them and the tray of approved posts not scheduled yet. Mockups approved Nov 4, 2026 (https://claude.ai/artifact/SbDa9EcXpcKHJnTmbVWc3v):
   the views run Grid, Week, Month; on a desktop the phone stays on the right (320 × 656, a black frame with a notch).
   .ps-planner           the Planner's two columns (the views, the phone) from 1100 px; one column below
   .ps-publish--wide     Publish's column without its reading width (the Planner)
   .ps-gp, .ps-gp-grid, .ps-gp-tile   the grid: 3:4 tiles, upcoming dashed with a date flag, posted dimmed while rearranging
   .ps-gp-month, .ps-gp-day, .ps-gp-chip, .ps-gp-dayplan   the month: chips on a desktop, dots and the picked day's list on a phone
   .ps-gp-tray           approved, not scheduled yet (Plan It)
   .ps-phone--device     the approved device frame on .ps-phone (.ps-phone__notch, .ps-phone__keys); .ps-gp-phone__*, .ps-gp-feed the screens
   ====================================================================================================== */
.ps-publish--wide { max-width: none; }
.ps-planner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-6); align-items: start; }
.ps-planner__main { display: flex; flex-direction: column; gap: var(--ps-space-5); min-width: 0; }
.ps-planner__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-3); }
.ps-planner__tools > .ps-grow { flex: 1 1 auto; }
.ps-planner__aside { display: none; }
@media (min-width: 1100px) {
  .ps-planner { grid-template-columns: minmax(0, 1fr) 340px; }
  .ps-planner__aside { position: sticky; top: calc(var(--ps-size-head-top) + var(--ps-size-head-button) + var(--ps-space-4));   /* below the top bar's buttons */
     display: flex; flex-direction: column; align-items: center; gap: var(--ps-space-4); }
  .ps-planner__aside > .ps-gp-tray { align-self: stretch; }
}
@media (min-width: 1400px) {   /* the Week as seven columns once there is room for them */
  .ps-planner .ps-plan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ps-space-2); }
  .ps-planner .ps-plan-day { grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 420px; padding: var(--ps-space-2); border-radius: var(--ps-radius-control); background: var(--ps-glass); }
  .ps-planner .ps-plan-day.is-today { box-shadow: inset 0 0 0 2px var(--ps-color-sprout-strong); }
  .ps-planner .ps-plan-post { flex-direction: column; align-items: stretch; }
  .ps-planner .ps-plan-post__thumb { width: 100%; aspect-ratio: 4 / 5; }
  .ps-planner .ps-plan-post__title { white-space: normal; }
}

.ps-gp { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-gp__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ps-space-3); }
.ps-gp__banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); padding: var(--ps-space-2) var(--ps-space-2) var(--ps-space-2) var(--ps-space-4);
  border-radius: var(--ps-radius-control); background: var(--ps-color-graphite-solid); color: var(--ps-color-on-dark); font-size: var(--ps-type-caption); }
.ps-gp__banner > span { flex: 1 1 200px; }
.ps-gp__note { margin: 0; font-size: var(--ps-type-caption); line-height: 1.45; color: var(--ps-fg-2); }
.ps-gp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; width: 100%; max-width: 480px; margin: 0; padding: 2px; list-style: none;
  border-radius: var(--ps-radius-control); background: var(--ps-color-ink); }
.ps-gp-grid > li { min-width: 0; }
.ps-gp-tile { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; margin: 0; padding: 0; border: 0; border-radius: 2px;
  background: var(--ps-color-graphite-solid); color: var(--ps-color-on-dark); cursor: pointer; transition: transform var(--ps-dur-press) var(--ps-ease-out), opacity var(--ps-dur-base) ease; }
.ps-gp-tile > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-gp-tile.is-upcoming::after { content: ""; position: absolute; inset: var(--ps-space-1); border: 1.5px dashed var(--ps-color-on-dark); border-radius: 2px; pointer-events: none; }
.ps-gp-tile.is-failed { box-shadow: inset 0 0 0 2px var(--ps-danger); }
.ps-gp-tile.is-empty { cursor: default; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ps-color-on-dark) 14%, transparent); }
.ps-gp-tile:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; }
.ps-gp-tile:disabled { cursor: default; }
.ps-gp-grid.is-arranging .ps-gp-tile:is(.is-live, .is-other, .is-failed) { opacity: .4; }
.ps-gp-grid.is-arranging .ps-gp-tile.is-upcoming { cursor: grab; }
.ps-gp-tile.is-picked, .ps-gp-tile.is-drop { outline: 3px solid var(--ps-color-sprout); outline-offset: -3px; }
.ps-gp-tile.is-picked { transform: scale(1.04); }
.ps-gp-tile.is-lifted { opacity: .5; }
.ps-gp-tile__flag { position: absolute; top: 6px; left: 6px; padding: 2px var(--ps-space-2); border-radius: var(--ps-radius-pill); background: var(--ps-color-sprout); color: var(--ps-color-ink);
  font: 600 var(--ps-type-micro)/1 var(--ps-font-ui); white-space: nowrap; }
.ps-gp-tile__kind { position: absolute; top: 6px; right: 6px; display: grid; color: var(--ps-color-on-dark); }
.ps-gp-tile__kind .ps-icon { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); }
.ps-gp-tile__title { padding: var(--ps-space-2); font-size: var(--ps-type-caption); line-height: 1.3; text-align: center; color: var(--ps-color-on-dark); }
@media (prefers-reduced-motion: reduce) { .ps-gp-tile { transition: none; } .ps-gp-tile.is-picked { transform: none; } }
/* The grid as the Planner's home (GTM-379 Planner redesign, Sisi Nov 6, 2026): the type tabs, the New from Review strip, an approved
   post with no time yet (dashed on-dark, a light "No Time Yet" flag), the From Review badge on a tile, and the Stories note. */
.ps-gp__tabs { margin-bottom: 0; }
.ps-gp__arrived { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2) var(--ps-space-3); padding: var(--ps-space-2) var(--ps-space-2) var(--ps-space-2) var(--ps-space-3);
  border-radius: var(--ps-radius-card); background: var(--ps-ok-soft); box-shadow: inset 0 0 0 1px var(--ps-color-sprout-strong); font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg); }
.ps-gp__arrived > span:not(.ps-gp__arrived-n) { flex: 1 1 200px; }
.ps-gp__arrived-n { display: grid; place-items: center; flex: none; min-width: var(--ps-space-6); height: var(--ps-space-6); padding: 0 var(--ps-space-1); border-radius: var(--ps-radius-pill);
  background: var(--ps-color-ink); color: var(--ps-color-on-dark); font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums; }
.ps-gp-tile.is-unplanned::after { content: ""; position: absolute; inset: var(--ps-space-1); border: 1.5px dashed color-mix(in srgb, var(--ps-color-on-dark) 55%, transparent); border-radius: 2px; pointer-events: none; }
.ps-gp-tile__flag--none { background: var(--ps-color-on-dark); color: var(--ps-color-ink); }
.ps-gp-tile__new { position: absolute; left: 6px; bottom: 6px; padding: 2px var(--ps-space-2); border-radius: var(--ps-radius-pill); background: var(--ps-color-sprout); color: var(--ps-color-ink);
  font: 600 var(--ps-type-micro)/1 var(--ps-font-ui); white-space: nowrap; }
/* Plan For (GTM-379 part 2): the handle on the grid's bar, the feed of a channel without a grid, and the list it opens (in PS.drawer). */
.ps-gp-planfor { display: inline-flex; align-items: center; gap: var(--ps-space-2); min-height: var(--ps-size-touch); max-width: 100%; padding: var(--ps-space-1) var(--ps-space-3) var(--ps-space-1) var(--ps-space-2);
  border: 1px solid var(--ps-line); border-radius: var(--ps-radius-pill); background: var(--ps-glass-strong); color: var(--ps-fg); font: 400 var(--ps-type-control)/1.2 var(--ps-font-ui); text-align: left; cursor: pointer; }
.ps-gp-planfor:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-gp-planfor:disabled { opacity: .5; cursor: default; }
.ps-gp-planfor__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-gp-planfor__text b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-gp-planfor__text span { font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
/* The grid inside the phone (desktop Planner, GTM-379; the approved mockup's artboard 7, Sisi Nov 6): Plan For above the device, the profile,
   chips, tabs, Select and the grid on its screen, the hint under it. PSGridPlanner.mount(el, { device: true }). */
.ps-gp--device { align-items: center; gap: var(--ps-space-3); }
.ps-gp--device > .ps-gp__bar { align-self: stretch; justify-content: center; }
/* Plan For above the phone (Sisi, Nov 6): as wide as the phone, the channel's icon, the handle and the channel, the arrow at the end */
.ps-gp--device .ps-gp-planfor { width: 320px; gap: var(--ps-space-3); min-height: 56px; padding: var(--ps-space-2) var(--ps-space-4) var(--ps-space-2) var(--ps-space-2); border-radius: var(--ps-radius-control); }
.ps-gp--device .ps-gp-planfor__text { flex: 1 1 auto; align-items: flex-start; text-align: left; }
.ps-gp--device .ps-gp-planfor > .ps-icon:last-child { flex: none; margin-left: auto; }
.ps-gp--device > .ps-gp__note { max-width: 300px; text-align: center; }
.ps-gp__device .ps-phone__screen { height: 640px; }
.ps-gp__screen { display: flex; flex-direction: column; gap: var(--ps-space-2); padding-bottom: var(--ps-space-4); }
.ps-gp__screen > :is(.ps-chips, .ps-gp__tabrow, .ps-gp__arrived, .ps-gp__banner, .ps-gp__soon, .ps-gp-feedlist) { margin-inline: var(--ps-space-3); }
.ps-gp__screen .ps-gp-phone__profile { padding-bottom: 0; }
.ps-gp__screen .ps-chips { gap: var(--ps-space-1); }
.ps-gp__screen .ps-chip { min-height: 28px; padding-inline: var(--ps-space-2); font-size: var(--ps-type-micro); }
.ps-gp__tabrow { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-2); box-shadow: inset 0 -1px 0 var(--ps-line); }
.ps-gp__tabrow > .ps-tabs { flex: 1 1 auto; box-shadow: none; }
.ps-gp__tabrow > .ps-tabs [role="tab"] { font-size: var(--ps-type-micro); }
.ps-gp__tabrow > .ps-btn { min-height: 28px; padding-inline: var(--ps-space-2); font-size: var(--ps-type-micro); }
.ps-gp__screen .ps-gp-grid { max-width: none; gap: 1.5px; padding: 0; }
.ps-gp__screen .ps-gp-tile { border-radius: 0; }
.ps-gp__screen .ps-gp-tile__flag { top: 4px; left: 4px; padding: 2px var(--ps-space-1); }
.ps-gp__screen .ps-gp__arrived { font-size: var(--ps-type-micro); }
.ps-gp__screen .ps-gp__note { margin-inline: var(--ps-space-3); font-size: var(--ps-type-micro); }
.ps-gp-feedlist { display: flex; flex-direction: column; gap: var(--ps-space-3); width: 100%; max-width: 480px; margin: 0; padding: 0; list-style: none; }
.ps-gp-post { display: flex; flex-direction: column; width: 100%; overflow: hidden; margin: 0; padding: 0; border: 0; border-radius: var(--ps-radius-card); background: var(--ps-glass-strong);
  box-shadow: var(--ps-glass-shadow); color: var(--ps-fg); text-align: left; cursor: pointer; font: inherit; }
.ps-gp-post.is-upcoming { box-shadow: none; outline: 1.5px dashed var(--ps-accent-stroke); outline-offset: -1.5px; }
.ps-gp-post.is-unplanned { box-shadow: none; outline: 1.5px dashed var(--ps-fg-3); outline-offset: -1.5px; }
.ps-gp-post.is-failed { box-shadow: inset 0 0 0 1px var(--ps-danger); }
.ps-gp-post:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-gp-post__media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ps-color-graphite-solid); }
.ps-gp-post__media > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-gp-post__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-1) var(--ps-space-2); padding: var(--ps-space-3) var(--ps-space-4) var(--ps-space-4); }
.ps-gp-post__title { flex: 1 1 100%; font-weight: 500; line-height: 1.35; }
.ps-gp-post__when { font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-gp-chans { display: flex; flex-direction: column; gap: var(--ps-space-1); padding: var(--ps-space-2) var(--ps-space-4) var(--ps-space-5); }
.ps-gp-chans > .ps-labelcaps { margin: var(--ps-space-4) var(--ps-space-2) var(--ps-space-1); }
.ps-gp-chans__manage { align-self: center; margin-top: var(--ps-space-4); }
.ps-gp-chan { display: flex; align-items: center; gap: var(--ps-space-2); width: 100%; min-height: 60px; box-sizing: border-box; padding: var(--ps-space-1) var(--ps-space-1) var(--ps-space-1) var(--ps-space-3);
  border: 0; border-radius: var(--ps-radius-card); background: transparent; color: var(--ps-fg); font: inherit; text-align: left; }
button.ps-gp-chan { cursor: pointer; padding-right: var(--ps-space-3); }
.ps-gp-chan--all { background: var(--ps-chip); }
.ps-gp-chan.is-current { background: var(--ps-ok-soft); box-shadow: inset 0 0 0 1px var(--ps-color-sprout-strong); }
.ps-gp-chan__pick { display: flex; flex: 1 1 auto; align-items: center; gap: var(--ps-space-3); min-width: 0; min-height: var(--ps-size-touch); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ps-gp-chan__pick:focus-visible, button.ps-gp-chan:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; border-radius: var(--ps-radius-control); }
.ps-gp-chan__icon { display: grid; place-items: center; flex: none; width: var(--ps-space-7); height: var(--ps-space-7); border-radius: 50%; background: var(--ps-glass-strong); color: var(--ps-fg-2); }
.ps-gp-chan--add .ps-gp-chan__icon { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ps-fg-3); }
.ps-gp-chan__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.ps-gp-chan__text b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-gp-chan__text span { font-size: var(--ps-type-caption); line-height: 1.35; color: var(--ps-fg-2); }
.ps-gp-chan.is-expired .ps-gp-chan__text span { color: var(--ps-danger); }
.ps-gp-chan__check { display: grid; place-items: center; flex: none; width: var(--ps-space-6); height: var(--ps-space-6); border-radius: 50%; background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-gp__soon { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ps-space-2); padding: var(--ps-space-5) var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-glass); }

.ps-gp-month { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; }
.ps-gp-month__nav { display: flex; align-items: center; gap: var(--ps-space-2); }
.ps-gp-month__label { margin: 0; font: 400 var(--ps-type-section)/1 var(--ps-font-display); letter-spacing: 0; }
.ps-gp-month__dow, .ps-gp-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ps-space-1); }
.ps-gp-month__dow > span { padding: 0 var(--ps-space-2); font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-2); }
.ps-gp-day { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; min-height: 112px; padding: var(--ps-space-1); border-radius: var(--ps-radius-control); background: var(--ps-glass-strong); }
.ps-gp-day.is-out { background: var(--ps-glass); }
.ps-gp-day.is-out .ps-gp-day__num, .ps-gp-day.is-past .ps-gp-day__num { color: var(--ps-fg-3); }
.ps-gp-day.is-drop { box-shadow: inset 0 0 0 2px var(--ps-color-sprout-strong); }
.ps-gp-day__num { align-self: flex-start; min-width: var(--ps-space-6); height: var(--ps-space-6); padding: 0 var(--ps-space-1); border: 0; border-radius: var(--ps-radius-pill); background: none; cursor: pointer;
  color: var(--ps-fg-2); font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums; }
.ps-gp-day.is-today .ps-gp-day__num { background: var(--ps-color-sprout-strong); color: var(--ps-color-ink); }
.ps-gp-day__num:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 1px; }
.ps-gp-day__posts { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-gp-day__idea { display: flex; align-items: center; gap: var(--ps-space-1); padding: var(--ps-space-1); border-radius: var(--ps-radius-small); border: 1.5px dashed var(--ps-color-lavender);
  background: var(--ps-agent-bg); color: var(--ps-agent-fg); font-size: var(--ps-type-micro); text-decoration: none; }
.ps-gp-day__idea .ps-icon { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); flex: none; }
.ps-gp-day__dots { display: none; justify-content: center; gap: 2px; min-height: 5px; }
.ps-gp-day__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ps-fg-2); }
.ps-gp-day__dots i.is-failed { background: var(--ps-danger); }
.ps-gp-day__dots i.is-live { background: var(--ps-fg-3); }
.ps-gp-chip { display: flex; align-items: center; gap: var(--ps-space-1); min-width: 0; overflow: hidden; padding: var(--ps-space-1); border-radius: var(--ps-radius-small); background: var(--ps-glass-solid);
  box-shadow: inset 0 0 0 1px var(--ps-line); color: var(--ps-fg); text-decoration: none; }
.ps-gp-chip.is-upcoming { background: transparent; box-shadow: none; outline: 1.5px dashed var(--ps-fg-3); outline-offset: -1.5px; cursor: grab; }
.ps-gp-chip.is-failed { background: var(--ps-danger-soft); box-shadow: inset 0 0 0 1px var(--ps-danger); }
.ps-gp-chip:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 1px; }
.ps-gp-chip__thumb { position: relative; flex: none; width: var(--ps-space-6); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--ps-radius-small); background: var(--ps-chip); }
.ps-gp-chip__thumb > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-gp-chip__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-gp-chip__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--ps-type-micro)/1.25 var(--ps-font-ui); }
.ps-gp-chip__meta { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; font-size: var(--ps-type-micro); color: var(--ps-fg-2); white-space: nowrap; }
.ps-gp-chip__meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ps-gp-chip.is-failed .ps-gp-chip__meta { color: var(--ps-danger); }
.ps-gp-chip__meta .ps-plat { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); flex: none; }
.ps-gp-day { position: relative; }
/* GTM-379 part 5: events on the calendar (a dot in the kind's series color; they never post), the AI's best open time on an empty
   coming day (lavender: the AI's), and on a desktop a + to add an event (shown on hover and keyboard focus) */
.ps-gp-event { display: flex; align-items: center; gap: var(--ps-space-1); min-width: 0; overflow: hidden; padding: 2px var(--ps-space-1); border-radius: var(--ps-radius-small); background: var(--ps-chip);
  color: var(--ps-fg); font: 500 var(--ps-type-micro)/1.25 var(--ps-font-ui); white-space: nowrap; text-overflow: ellipsis; }
.ps-gp-event::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--ps-fg-3); }
.ps-gp-event[data-kind="shoot"]::before { background: var(--ps-series-3); }
.ps-gp-event[data-kind="launch"]::before { background: var(--ps-series-1); }
.ps-gp-event[data-kind="sale"]::before { background: var(--ps-series-6); }
.ps-gp-day__slot { display: inline-flex; align-items: center; align-self: flex-start; gap: 2px; padding: 2px var(--ps-space-1); border-radius: var(--ps-radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--ps-color-lavender); color: var(--ps-agent-fg); font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); white-space: nowrap; }
.ps-gp-day__slot .ps-icon, .ps-gp-dayplan__slot .ps-icon { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); flex: none; }
.ps-gp-day__evdot { display: none; }
.ps-gp-day__add { position: absolute; right: var(--ps-space-1); bottom: var(--ps-space-1); display: grid; place-items: center; width: var(--ps-space-6); height: var(--ps-space-6); padding: 0; border: 0;
  border-radius: 50%; background: var(--ps-glass-solid); color: var(--ps-fg-2); cursor: pointer; opacity: 0; transition: opacity var(--ps-dur-base) ease; }
.ps-gp-day__add .ps-icon { width: var(--ps-size-icon-sm); height: var(--ps-size-icon-sm); }
.ps-gp-day:hover .ps-gp-day__add, .ps-gp-day__add:focus-visible { opacity: 1; }
.ps-gp-day__add:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 1px; }
.ps-gp-dayplan__event { display: flex; align-items: center; gap: var(--ps-space-2); padding: var(--ps-space-1) var(--ps-space-1) var(--ps-space-1) var(--ps-space-2); border-radius: var(--ps-radius-control); background: var(--ps-chip); }
.ps-gp-dayplan__event b { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.ps-gp-dayplan__slot { display: flex; align-items: center; gap: var(--ps-space-2); margin: 0; padding: var(--ps-space-2) var(--ps-space-3); border-radius: var(--ps-radius-control);
  background: var(--ps-agent-bg); color: var(--ps-agent-fg); font-size: var(--ps-type-caption); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .ps-gp-day__add { transition: none; } }
.ps-gp-dayplan { display: none; flex-direction: column; gap: var(--ps-space-2); }
.ps-gp-dayplan__title { margin: 0; font: 600 var(--ps-type-body)/1.3 var(--ps-font-ui); }
.ps-gp-dayplan .ps-gp-chip { padding: var(--ps-space-2); }
.ps-gp-dayplan .ps-gp-chip__thumb { width: var(--ps-space-7); }
.ps-gp-dayplan .ps-gp-chip__title { font-size: var(--ps-type-body); }
.ps-gp-dayplan .ps-gp-chip__meta { font-size: var(--ps-type-caption); }
@media (max-width: 720px) {   /* a phone: dots in the days, the picked day's posts below */
  .ps-gp-month__grid { gap: 2px; }
  .ps-gp-day { min-height: 0; align-items: center; padding: 2px; background: none; }
  .ps-gp-day.is-out { background: none; }
  .ps-gp-day__num { align-self: center; min-width: var(--ps-size-touch); height: var(--ps-size-control-sm); border-radius: var(--ps-radius-control); font-size: var(--ps-type-body); color: var(--ps-fg); }
  .ps-gp-day.is-picked .ps-gp-day__num { background: var(--ps-color-graphite-solid); color: var(--ps-color-on-dark); }
  .ps-gp-day__posts, .ps-gp__note--wide { display: none; }
  .ps-gp-day__dots { display: flex; }
  .ps-gp-dayplan { display: flex; }
  .ps-gp-day__add, .ps-gp-day__slot { display: none; }
  .ps-gp-day__evdot { display: block; width: 5px; height: 5px; border-radius: 1px; background: var(--ps-fg); }
  .ps-gp-grid { max-width: none; padding: 0; border-radius: 0; }
}

.ps-gp-tray { display: flex; flex-direction: column; gap: var(--ps-space-2); padding: var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); }
.ps-gp-tray__head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--ps-type-body); }
.ps-gp-tray__head b { font-weight: 600; }
.ps-gp-tray__head span { color: var(--ps-fg-2); font-variant-numeric: tabular-nums; }
.ps-gp-tray__list { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-gp-tray__item { display: flex; align-items: center; gap: var(--ps-space-3); min-width: 0; }
.ps-gp-tray__item .ps-gp-chip__title { flex: 1 1 auto; font-size: var(--ps-type-body); }

/* the device: 320 × 656 outside, a black frame with a notch and side keys (the reference Natalia approved Nov 4) */
.ps-phone--device { width: 320px; flex: none; padding: var(--ps-space-2); border-radius: 50px; background: var(--ps-color-ink);
  box-shadow: 0 0 0 2px var(--ps-fg-3), 0 24px 48px color-mix(in srgb, var(--ps-color-ink) 22%, transparent); }
.ps-phone--device .ps-phone__screen { height: 640px; border-radius: 42px; background: var(--ps-color-ink); color: var(--ps-color-on-dark); }
.ps-phone__notch { position: absolute; top: 8px; left: 50%; width: 122px; height: 26px; transform: translateX(-50%); border-radius: 0 0 16px 16px; background: var(--ps-color-ink); }
.ps-phone__notch::after { content: ""; position: absolute; top: 9px; left: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--ps-color-graphite-solid); }
.ps-phone__keys::before, .ps-phone__keys::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: var(--ps-fg-3); }
.ps-phone__keys::before { left: -4px; top: 104px; height: 28px; box-shadow: 0 48px 0 0 var(--ps-fg-3), 0 92px 0 0 var(--ps-fg-3); }
.ps-phone__keys::after { right: -4px; top: 170px; height: 70px; }
.ps-phone--device .ps-phone__status { padding: 0 var(--ps-space-6); }
.ps-gp-phone__profile { display: flex; align-items: center; gap: var(--ps-space-3); padding: var(--ps-space-2) var(--ps-space-4) var(--ps-space-3); }
.ps-gp-phone__avatar { flex: none; display: grid; place-items: center; width: 60px; height: 60px; overflow: hidden; border-radius: 50%; background: var(--ps-color-graphite-solid);
  box-shadow: 0 0 0 2px var(--ps-color-ink), 0 0 0 3.5px var(--ps-color-lavender); font: 600 var(--ps-type-title)/1 var(--ps-font-ui); }
.ps-gp-phone__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ps-gp-phone__avatar--sm { width: 30px; height: 30px; font-size: var(--ps-type-micro); }
.ps-gp-phone__avatar--xs { width: 22px; height: 22px; box-shadow: 0 0 0 1.5px var(--ps-color-on-dark); font-size: var(--ps-type-micro); }
.ps-gp-phone__who { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; font-size: var(--ps-type-caption); }
.ps-gp-phone__who span { color: var(--ps-fg-3); }
.ps-gp-phone__who em { font-style: normal; color: var(--ps-color-sprout); }
.ps-gp-phone__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5px; }
.ps-gp-phone__grid .ps-gp-tile { border-radius: 0; }
.ps-gp-phone__grid .ps-gp-tile__flag { top: 4px; left: 4px; padding: 2px var(--ps-space-1); }
.ps-gp-phone__nav { flex: none; display: flex; justify-content: space-around; align-items: center; padding: var(--ps-space-2) var(--ps-space-3) var(--ps-space-1);
  border-top: 1px solid color-mix(in srgb, var(--ps-color-on-dark) 14%, transparent); color: var(--ps-color-on-dark); }
.ps-gp-phone__home { flex: none; align-self: center; width: 110px; height: 4px; margin: var(--ps-space-1) 0 var(--ps-space-2); border-radius: var(--ps-radius-pill); background: var(--ps-color-on-dark); }
.ps-gp-feed { display: flex; flex-direction: column; }
.ps-gp-feed__head { display: flex; align-items: center; gap: var(--ps-space-2); padding: var(--ps-space-2) var(--ps-space-3); font-size: var(--ps-type-caption); }
.ps-gp-feed__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ps-color-graphite-solid); font-size: var(--ps-type-caption); color: var(--ps-fg-3); }
.ps-gp-feed__media > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-gp-feed__bar { display: flex; gap: var(--ps-space-4); padding: var(--ps-space-2) var(--ps-space-3); }
.ps-gp-feed__cap { margin: 0; padding: 0 var(--ps-space-3); font-size: var(--ps-type-caption); line-height: 1.45; }
.ps-gp-feed__tags { color: var(--ps-color-lavender-on-dark); }
.ps-gp-feed__when { margin: 0; padding: var(--ps-space-2) var(--ps-space-3); font-size: var(--ps-type-micro); color: var(--ps-fg-3); }
.ps-gp-pick { display: flex; flex-direction: column; gap: var(--ps-space-2); width: 320px; padding: var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-glass-strong); }
.ps-gp-pick__row { display: flex; align-items: center; gap: var(--ps-space-2); font-size: var(--ps-type-body); }
.ps-gp-pick__row > span { flex: 1 1 auto; }
.ps-gp-pick__row .ps-plat { width: var(--ps-size-icon); height: var(--ps-size-icon); flex: none; }
.ps-gp-pick__why { margin: 0; padding: var(--ps-space-2) var(--ps-space-3); border-radius: var(--ps-radius-control); background: var(--ps-agent-bg); color: var(--ps-agent-fg); font-size: var(--ps-type-caption); line-height: 1.45; }
.ps-gp-pick__acts { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.ps-gp-pick__acts .ps-btn { flex: 1 1 auto; }
/* grid-planner:end */

/* ps-ads:start
   GTM-425 F14 Ads pieces (docs/design/ads-2026-11-04/README.md). Charts use the validated chart colors (--ps-chart-1..3,
   decided Nov 4 by Natalia: they pass the dataviz color check in both themes; the series colors don't). */
/* Chart (PS.chart): thin marks, hairline grid, text in text tokens; a crosshair (line) or a per-bar tooltip; the title names the series. */
.ps-chart { position: relative; min-width: 0; }
.ps-chart svg { display: block; width: 100%; overflow: visible; }
.ps-chart text { fill: var(--ps-fg-3); font: 400 var(--ps-type-caption) var(--ps-font-ui); font-variant-numeric: tabular-nums; }
.ps-chart .ps-chart__lbl { fill: var(--ps-fg); font-weight: 500; }
.ps-chart .ps-chart__grid { stroke: var(--ps-line); stroke-width: 1; }
.ps-chart .ps-chart__ref { stroke: var(--ps-fg-3); stroke-width: 1; }
.ps-chart .ps-chart__line { fill: none; stroke: var(--ps-chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ps-chart .ps-chart__area { fill: var(--ps-chart-1); opacity: .1; }
.ps-chart .ps-chart__bar { fill: var(--ps-chart-1); transition: opacity var(--ps-dur-press) var(--ps-ease-out); }
.ps-chart .ps-chart__bar.is-on { opacity: .72; }
.ps-chart .ps-chart__dot { fill: var(--ps-chart-1); stroke: var(--ps-glass-solid); stroke-width: 2; }
.ps-chart .ps-chart__cross { stroke: var(--ps-fg-3); stroke-width: 1; }
.ps-chart .ps-chart__hit { fill: transparent; outline: none; }
.ps-chart .ps-chart__hit:focus-visible { stroke: var(--ps-focus); stroke-width: 2; }
.ps-chart__tip { position: absolute; pointer-events: none; padding: var(--ps-space-1) var(--ps-space-3); border-radius: var(--ps-radius-small);
  background: var(--ps-pop-bg); box-shadow: var(--ps-pop-shadow); font-size: var(--ps-type-caption); color: var(--ps-fg-2); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.ps-chart__tip b { display: block; color: var(--ps-fg); font-size: var(--ps-type-body); }
/* Split bar (PS.split): one whole in parts, 2px surface gaps, always with its legend (identity is never color alone). */
.ps-split { display: flex; gap: 2px; height: 12px; }
.ps-split > i { display: block; height: 100%; border-radius: 4px; flex: var(--ps-split-share, 1) 1 0; min-width: 4px; }
.ps-split > i:nth-child(1), .ps-key[data-n="1"] { background: var(--ps-chart-1); }
.ps-split > i:nth-child(2), .ps-key[data-n="2"] { background: var(--ps-chart-2); }
.ps-split > i:nth-child(3), .ps-key[data-n="3"] { background: var(--ps-chart-3); }
.ps-split > i:nth-child(n+4), .ps-key[data-n="4"] { background: var(--ps-fg-3); }
.ps-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ps-split-legend { display: flex; flex-wrap: wrap; gap: var(--ps-space-1) var(--ps-space-4); margin: 0; padding: 0; list-style: none; font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-split-legend > li { display: inline-flex; align-items: center; gap: var(--ps-space-2); }
/* Data freshness line: when each source last synced. */
.ps-fresh { display: flex; flex-wrap: wrap; gap: var(--ps-space-2) var(--ps-space-4); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-fresh > span { display: inline-flex; align-items: center; gap: var(--ps-space-2); }
/* Why chips: a reason for or against. */
.ps-factor { display: inline-flex; align-items: center; gap: var(--ps-space-1); padding: 2px var(--ps-space-2); border-radius: var(--ps-radius-pill); font-size: var(--ps-type-caption);
  background: var(--ps-chip); color: var(--ps-fg-2); }
.ps-factor--up { background: var(--ps-ok-soft); color: var(--ps-fg); }
.ps-factor--down { background: var(--ps-warn-soft); color: var(--ps-warn); }
/* Numbered step head and a numbered list in the same circles. */
.ps-stephead { display: flex; align-items: center; gap: var(--ps-space-2); }
.ps-stephead__n, .ps-numlist > li::before { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--ps-color-sprout); color: var(--ps-color-ink); font: 400 var(--ps-type-title)/1 var(--ps-font-display); }
.ps-numlist { counter-reset: ps-num; display: flex; flex-direction: column; gap: var(--ps-space-3); margin: 0; padding: 0; list-style: none; }
.ps-numlist > li { counter-increment: ps-num; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--ps-space-3); align-items: start; }
.ps-numlist > li::before { content: counter(ps-num); }
/* Ad previews: a grid on the desktop, a swipe row on a phone. */
.ps-adframes { display: grid; gap: var(--ps-space-4); grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 280px)); }
.ps-adframe { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--ps-radius-card); border: 1px solid var(--ps-line); background: var(--ps-glass-solid); }
.ps-adframe__top { display: flex; align-items: center; gap: var(--ps-space-2); padding: var(--ps-space-3); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-adframe__media { aspect-ratio: 1 / 1; max-width: 100%; display: grid; place-items: center; overflow: hidden; color: var(--ps-color-ink);
  background: linear-gradient(135deg, var(--ps-color-loop-make-soft), var(--ps-color-loop-pub-soft)); }
.ps-adframe__media > img { width: 100%; height: 100%; object-fit: cover; }
.ps-adframe__media--tall { aspect-ratio: 4 / 5; }
.ps-adframe__body { display: flex; flex-direction: column; gap: var(--ps-space-2); padding: var(--ps-space-3); font-size: var(--ps-type-body); }
.ps-adframe__head { color: var(--ps-info); font-size: var(--ps-type-title); line-height: 1.3; }
.ps-adframe__url { color: var(--ps-ok-text); font-size: var(--ps-type-caption); }
.ps-adframe__cta { display: flex; justify-content: space-between; align-items: center; gap: var(--ps-space-2); padding: var(--ps-space-2) var(--ps-space-3);
  border-top: 1px solid var(--ps-line); font-size: var(--ps-type-caption); }
/* A builder: steps beside a sticky summary on the desktop; on a phone the summary is a bar held above the tab bar. */
.ps-build { display: grid; gap: var(--ps-space-5); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.ps-summary { position: sticky; top: var(--ps-space-5); }
.ps-summary__bar { display: none; }
.ps-payrows { display: grid; gap: var(--ps-space-2); }
.ps-payrows > div { display: flex; justify-content: space-between; gap: var(--ps-space-3); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-payrows b { color: var(--ps-fg); font-weight: 500; white-space: nowrap; }
@media (max-width: 720px) {
  .ps-build { grid-template-columns: minmax(0, 1fr); }
  .ps-summary { top: auto; bottom: calc(var(--ps-space-3) + env(safe-area-inset-bottom, 0px)); order: 2; }
  html.ps-shell-on:not(.ps-in-app) .ps-summary { bottom: calc(var(--ps-space-7) + var(--ps-space-6) + env(safe-area-inset-bottom, 0px)); }
  .ps-summary__full { display: none; }
  .ps-summary__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-space-3); }
  .ps-adframes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--ps-space-2); }
  .ps-adframe { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .ps-chart .ps-chart__bar { transition: none; } }
/* ps-ads:end */
/* ---------- Step dashboards (GTM-337, Nov 6, 2026, Natalia: walkthrough items 8 and 11; mockups on the Step Dashboards canvas) ----------
   Every loop step's first menu item is its Dashboard: the trail says Dashboard, the title is the step. .ps-stepdash is a 12-column grid
   on a desktop, one column on a phone; each .ps-stepcard is a glass card with its number in the step's color (data-loop on the page sets
   --loop), its title, a short line and one link in. Spans: --5, --6, --7, --12 (all full width on a phone).
   Day one (decided Nov 6): a card that waits for data is a preview card: .ps-preview draws the shapes of what will be there (chart, list,
   grid, figures) grey and faint, never numbers; .ps-stepcard__tag says Preview; .ps-unlock holds the one action that fills it. A card turns
   real by itself once its data exists. .ps-headprogress under the title says how far along the subscriber is. */
.ps-stepdash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-4); min-width: 0; }
@media (min-width: 900px) {
  .ps-stepdash { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ps-space-5); }
  .ps-stepcard--5 { grid-column: span 5; } .ps-stepcard--6 { grid-column: span 6; } .ps-stepcard--7 { grid-column: span 7; } .ps-stepcard--12 { grid-column: span 12; }
}
.ps-stepcard { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; padding: var(--ps-space-5); }
.ps-stepcard__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ps-space-1) var(--ps-space-3); min-width: 0; }
.ps-stepcard__num { font: 500 var(--ps-type-caption)/1 var(--ps-font-ui); font-variant-numeric: tabular-nums; color: var(--loop-deep, var(--ps-fg-2)); }
html[data-theme="dark"] .ps-stepcard__num { color: var(--loop-rail, var(--ps-fg-2)); }
.ps-stepcard__title { margin: 0; font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-stepcard__sub { font-size: var(--ps-type-caption); line-height: 1.4; color: var(--ps-fg-2); }
.ps-stepcard__go { margin-left: auto; font-size: var(--ps-type-caption); color: var(--ps-fg); text-decoration: none; white-space: nowrap; }
.ps-stepcard__go:hover { font-weight: 500; }
.ps-stepcard__go:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; border-radius: 4px; }
.ps-stepcard__tag { margin-left: auto; display: inline-flex; align-items: center; gap: var(--ps-space-1); min-height: 22px; padding: 0 var(--ps-space-3); border-radius: var(--ps-radius-pill);
  background: var(--ps-chip); color: var(--ps-fg-2); font: 500 var(--ps-type-micro)/1 var(--ps-font-ui); white-space: nowrap; }
.ps-stepcard__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px dashed currentColor; }
/* figures: a big number and its label, side by side */
.ps-figures { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ps-space-4) var(--ps-space-6); }
.ps-figure { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-figure__n { font: 400 var(--ps-type-number-sm, 48px)/.9 var(--ps-font-display); letter-spacing: 0; color: var(--ps-fg); font-variant-numeric: tabular-nums; }
.ps-figure--lg .ps-figure__n { font-size: calc(var(--ps-type-number-sm, 48px) * 1.35); }
.ps-figure__l { font: 500 var(--ps-type-micro)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-2); }
/* rows inside a card: a quiet sheet with its parts on one line */
.ps-steprows { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-steprow { display: flex; align-items: center; gap: var(--ps-space-3); min-width: 0; padding: var(--ps-space-3); border-radius: var(--ps-radius-control); background: var(--ps-chip); color: var(--ps-fg); text-decoration: none; }
.ps-steprow__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-steprow__title { font-size: var(--ps-type-body); color: var(--ps-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-steprow__meta { font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-steprow__thumb { flex: none; width: 40px; height: 52px; border-radius: var(--ps-radius-small); background: var(--ps-line); overflow: hidden; }
.ps-steprow__thumb img, .ps-steprow__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
a.ps-steprow:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
/* a bar for a share (pillars, channels) */
.ps-stepbar { display: grid; grid-template-columns: minmax(80px, 30%) minmax(0, 1fr) auto; align-items: center; gap: var(--ps-space-3); font-size: var(--ps-type-caption); }
.ps-stepbar__track { height: 8px; border-radius: var(--ps-radius-pill); background: var(--ps-chip); overflow: hidden; }
.ps-stepbar__track > span { display: block; height: 100%; border-radius: inherit; background: var(--loop, var(--ps-fg-3)); }
.ps-stepbar__n { color: var(--ps-fg-2); font-variant-numeric: tabular-nums; }
/* thumbs in a row (the Library) */
.ps-stepthumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .ps-stepthumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ps-stepthumbs > li { aspect-ratio: 3 / 4; border-radius: var(--ps-radius-control); overflow: hidden; background: var(--ps-chip); }
.ps-stepthumbs img, .ps-stepthumbs video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the preview (day one): shapes, grey and faint, never numbers; not read by screen readers (the card's own line says what comes) */
.ps-preview { display: flex; flex-direction: column; gap: var(--ps-space-3); filter: grayscale(1); opacity: .45; pointer-events: none; user-select: none; }
.ps-preview__line { display: block; height: 10px; border-radius: var(--ps-radius-pill); background: var(--ps-line-strong, var(--ps-line)); }
.ps-preview__block { display: block; height: 40px; width: 120px; border-radius: var(--ps-radius-small); background: var(--ps-line-strong, var(--ps-line)); }
.ps-preview__block--sm { width: 80px; height: 28px; }
.ps-preview__block--tag { width: 56px; height: 22px; flex: none; }
.ps-stepcard__skel { height: 120px; }
.ps-preview__row { display: flex; align-items: center; gap: var(--ps-space-3); }
.ps-preview__tile { display: block; aspect-ratio: 3 / 4; border-radius: var(--ps-radius-control); background: var(--ps-line-strong, var(--ps-line)); }
.ps-preview__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ps-space-2); }
.ps-preview svg { width: 100%; height: 96px; display: block; color: var(--ps-fg-3); }
/* the one action that fills a preview card */
.ps-unlock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-3); padding: var(--ps-space-4); border-radius: var(--ps-radius-control);
  background: color-mix(in srgb, var(--loop, var(--ps-color-sprout)) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--loop, var(--ps-color-sprout)) 40%, transparent); }
.ps-unlock > p { flex: 1 1 220px; margin: 0; font-size: var(--ps-type-caption); line-height: 1.5; color: var(--ps-fg); }
/* how far along (under the title): one short bar per part, then the words */
.ps-headprogress { display: inline-flex; align-items: center; gap: var(--ps-space-2); font-size: var(--ps-type-caption); color: var(--ps-fg-2); }
.ps-headprogress > i { width: 22px; height: 5px; border-radius: var(--ps-radius-pill); background: var(--ps-chip); }
.ps-headprogress > i.is-on { background: var(--loop, var(--ps-color-sprout-strong)); }
.ps-pagehead .ps-headprogress { order: 4; align-self: center; }
/* PS.preview (R10, Nov 6): the same day-one preview for any section, with its tag on top */
.ps-previewbox { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; text-align: left; font: 400 var(--ps-type-body)/1.5 var(--ps-font-ui); color: var(--ps-fg); }   /* its own type, whatever empty-state box it sits in */
.ps-previewbox__tag { margin-left: 0; align-self: flex-start; }
/* PS.editInPlace (R7, Nov 6): a value that edits where it is (the inline-edit rule) */
.ps-editval { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-1); width: 100%; max-width: 100%; box-sizing: border-box; min-height: 34px; margin: 0; padding: var(--ps-space-2) var(--ps-space-3);
  border: 0; border-radius: var(--ps-radius-control); background: var(--ps-field); color: var(--ps-fg); font: 400 var(--ps-type-input)/1.4 var(--ps-font-ui); text-align: left; cursor: text;
  transition: background-color var(--ps-dur-base) var(--ps-ease-out); }   /* a field well at rest (Nov 7): click it to type */
.ps-editval:hover { background: var(--ps-field-hover); }
.ps-editval:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-editval.is-empty { color: var(--ps-fg-3); }   /* "Add …" reads as a placeholder, not a link */
/* a title edited where it is (a business's name, an audience's name) stays a title: no well, its own type */
:is(.ps-infotile__name, .ps-infotile__title) .ps-editval { display: inline-flex; width: auto; min-height: 0; margin: -2px calc(-1 * var(--ps-space-1)); padding: 2px var(--ps-space-1);
  border-radius: var(--ps-radius-small); background: transparent; font: inherit; }
:is(.ps-infotile__name, .ps-infotile__title) .ps-editval:hover { background: var(--ps-chip); }
:is(.ps-infotile__name, .ps-infotile__title) .ps-editval.is-empty { color: var(--ps-fg-2); text-decoration: underline; text-underline-offset: 3px; }
/* a read-only value beside the wells: the same 12px */
.ps-infogrid > div > :not(.ps-infogrid__l) { font-size: var(--ps-type-input); }
/* .ps-locked (Sisi, Nov 7): a value set by Prompt or by billing, read-only here. A well's shape at half its fill, no border, a small lock at
   the end; no hover and no text cursor, so it never invites a click. */
.ps-locked { display: flex; align-items: center; gap: var(--ps-space-2); min-height: 34px; box-sizing: border-box; padding: var(--ps-space-2) var(--ps-space-3); border-radius: var(--ps-radius-control);
  background: color-mix(in srgb, var(--ps-field) 50%, transparent); color: var(--ps-fg); font: 400 var(--ps-type-input)/1.4 var(--ps-font-ui); cursor: default; }
.ps-locked > span:not(.ps-locked__lock) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ps-locked__lock { flex: none; display: inline-flex; color: var(--ps-fg-3); }
.ps-locked__lock .ps-icon { width: 12px; height: 12px; }
.ps-editval__input { width: 100%; }
[aria-busy="true"] > .ps-editval { opacity: .55; }
/* the Profile and the Strategy as cards (R7, R9): a label over its value, two to a row */
.ps-infogrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-4) var(--ps-space-5); }
.ps-infogrid > div { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; overflow-wrap: anywhere; }
.ps-infogrid__l { font: 500 var(--ps-type-micro)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-2); }
.ps-infogrid > .ps-infogrid__wide { grid-column: 1 / -1; }   /* a long fact across both columns (the team's "What they do", Nov 6) */
.ps-infotiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--ps-space-3); }   /* as many as the card holds (Nov 7: by its own width, not the window's) */
.ps-infotile { display: flex; flex-direction: column; gap: var(--ps-space-3); min-width: 0; padding: var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-chip); }
/* Nov 8 (Sisi): one card style across pages: a tile you fill in, white with a hairline like Order a Job's cards (.ps-choice: --ps-tile,
   --ps-line-strong), for editable cards that sit on the page itself (Voice and Words' traits and moments) */
.ps-infotile--solid { border-radius: var(--ps-radius-control); background: var(--ps-tile); box-shadow: inset 0 0 0 1px var(--ps-line-strong); }
.ps-infotile--add { align-items: center; justify-content: center; min-height: 88px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ps-line); color: var(--ps-fg-2); border: 0; font: inherit; cursor: pointer; }
.ps-infotile--add:hover { background: var(--ps-chip); }
.ps-infotile__title { font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-infotile__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-space-3); padding: var(--ps-space-3) 0; border-top: 1px solid var(--ps-line); border-bottom: 1px solid var(--ps-line); }
.ps-infotile > .ps-badge { align-self: flex-start; }
.ps-infotiles > .ps-infotile--add { align-self: start; }
.ps-infotile__name { font: 400 var(--ps-type-section)/1 var(--ps-font-display); color: var(--ps-fg); }
.ps-chiplist { display: flex; flex-wrap: wrap; gap: var(--ps-space-1); }
.ps-chiplist > span { display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--ps-space-3); border-radius: var(--ps-radius-pill); background: var(--ps-glass-strong); font-size: var(--ps-type-caption); color: var(--ps-fg); }
.ps-chiplist--pain > span { background: color-mix(in srgb, var(--ps-danger) 12%, transparent); }

/* ps-orderajob:start ---------- Order a Job (GTM-337; Sisi's review Nov 7–8, the Order a Job mockup #6–#39). ----------
   .ps-crumbs: the steps as breadcrumbs in a wizard bar (PS.wizard({ crumbs })): done steps take you back, the current one has the
   lime dot, a phone shows short names and a done step as its check. .ps-choices--grid: option cards in an even grid (4 / 3 / 2
   across), every card the same height; .ps-choices--3 three across. .ps-choice-wrap: a card with a description behind an arrow
   (.ps-choice__more, a sibling button, never a button in a button; .ps-choice__about shows when the wrap is .is-open; the grid
   keeps the closed height while one is open). .ps-choices--services: services in sections side by side (.ps-svc-section and its
   __title, __items), each tile a row (.ps-choice--svc) led by the website's agent tile (.ps-element--agent[data-step], the icon
   in its loop color, #39) and a .ps-choice__readmore arrow that opens the service's page (.ps-svcpage, in a PS.modal).
   .ps-or--text: "or …" in body text between two hairlines. */
.ps-crumbs { min-width: 0; flex: 1 1 auto; font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); letter-spacing: 0; text-transform: none; color: var(--ps-fg-3); }
.ps-crumbs > ol { display: flex; align-items: center; gap: var(--ps-space-1); margin: 0; padding: 0; list-style: none; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ps-crumbs > ol::-webkit-scrollbar { display: none; }
.ps-crumbs li { flex: none; display: inline-flex; align-items: center; gap: var(--ps-space-1); white-space: nowrap; }
.ps-crumbs li + li::before { content: "›"; color: var(--ps-fg-3); padding-right: var(--ps-space-1); }
.ps-crumbs__step { display: inline-flex; align-items: center; gap: var(--ps-space-1); padding: var(--ps-space-1) 0; border: 0; background: none; color: inherit; font: inherit; }
button.ps-crumbs__step { cursor: pointer; color: var(--ps-fg-2); border-radius: var(--ps-radius-small); }
button.ps-crumbs__step:hover { font-weight: var(--ps-weight-medium); }
button.ps-crumbs__step:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-crumbs__step .ps-icon { width: 12px; height: 12px; color: var(--ps-ok-text); }
.ps-crumbs li[aria-current="step"] { color: var(--ps-fg); font-weight: var(--ps-weight-medium); }
.ps-crumbs li[aria-current="step"] .ps-crumbs__step::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ps-color-lime-neon); }
.ps-crumbs__short { display: none; }
@media (max-width: 560px) { .ps-crumbs__long { display: none; } .ps-crumbs__short { display: inline; } button.ps-crumbs__step .ps-crumbs__short { display: none; } }

.ps-choices--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.ps-choices--grid.ps-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-choices--grid.has-open { grid-auto-rows: auto; align-items: start; }   /* .has-open: set by ps-ui.js (and the page's redraw), never :has() */
.ps-choices--grid.has-open .ps-choice-wrap > .ps-choice { min-height: var(--choices-h, auto); }
.ps-choices--grid .ps-choices__pair { display: contents; }
.ps-choices--grid .ps-choice__title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ps-space-1); }
.ps-choices--grid .ps-choice__title .ps-badge { margin: 0; }
@media (max-width: 900px) { .ps-choices--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ps-choices--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-choices--grid.ps-choices--3 { grid-template-columns: minmax(0, 1fr); } }
.ps-choice-wrap { position: relative; display: grid; min-width: 0; }
.ps-choice-wrap[hidden] { display: none; }
.ps-choice-wrap > .ps-choice { padding-right: var(--ps-space-7); align-items: flex-start; height: 100%; }
.ps-choice-wrap > .ps-choice .ps-choice__body { align-self: flex-start; }
.ps-choice__more { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ps-radius-pill);
  display: grid; place-items: center; background: transparent; color: var(--ps-fg-3); cursor: pointer; transition: background-color var(--ps-dur-press) ease, color var(--ps-dur-press) ease; }
.ps-choice__more:hover { background: var(--ps-chip); }
.ps-choice__more:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-choice__more .ps-icon { transition: transform var(--ps-dur-base) var(--ps-ease-out); }
.ps-choice__more[aria-expanded="true"] { color: var(--ps-fg); }
.ps-choice__more[aria-expanded="true"] .ps-icon { transform: rotate(180deg); }
.ps-choice__about { display: none; margin-top: var(--ps-space-2); font: 400 var(--ps-type-caption)/1.45 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-choice-wrap.is-open .ps-choice__about { display: block; }

.ps-choices--services { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ps-space-5) var(--ps-space-3); align-items: start; }   /* one column per section */
@media (max-width: 1100px) { .ps-choices--services { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ps-choices--services { grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-5); } }
.ps-svc-section { display: grid; gap: var(--ps-space-3); align-content: start; min-width: 0; }
.ps-svc-section__title { margin: 0; font: var(--ps-weight-medium) var(--ps-type-label)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-2); }
.ps-svc-section__items { display: grid; gap: var(--ps-space-2); align-content: start; }
.ps-choice--svc { flex-direction: row; align-items: flex-start; gap: var(--ps-space-3); padding: var(--ps-space-3) var(--ps-space-7) var(--ps-space-3) var(--ps-space-3); }
.ps-choice--svc > .ps-element--agent { flex: none; width: 40px; }
.ps-choice--svc .ps-choice__desc { line-height: 1.35; }
.ps-choice--svc[aria-checked="true"] > .ps-element--agent { transform: translateY(-3px); --tint: color-mix(in oklab, var(--soft) 70%, var(--c));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 60%, transparent), 0 0 0 3px color-mix(in oklab, var(--c) 35%, transparent); }
:is([data-theme="dark"], .ps-dark) .ps-choice--svc[aria-checked="true"] > .ps-element--agent { --tint: color-mix(in oklab, var(--deep) 80%, var(--c)); }
@media (hover: hover) and (pointer: fine) { .ps-choice--svc:hover > .ps-element--agent { transform: translateY(-3px); } }
.ps-choice__readmore { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ps-radius-pill);
  display: grid; place-items: center; background: var(--ps-chip); color: var(--ps-fg-2); cursor: pointer; transition: background-color var(--ps-dur-press) ease, color var(--ps-dur-press) ease, transform var(--ps-dur-press) ease; }
.ps-choice__readmore:hover { background: var(--ps-line-strong); transform: translate(2px, -50%); }
.ps-choice__readmore:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ps-choice__more .ps-icon, .ps-choice__readmore { transition: none; } .ps-choice__readmore:hover { transform: translateY(-50%); } }

.ps-svcpage { display: grid; gap: var(--ps-space-4); color: var(--ps-fg-2); }
.ps-svcpage__hero { margin: 0; aspect-ratio: 3 / 1; overflow: hidden; border-radius: var(--ps-radius-control); background: var(--ps-chip); }
@media (max-width: 600px) { .ps-svcpage__hero { aspect-ratio: 2 / 1; } }
.ps-svcpage__hero :is(video, img) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ps-svcpage__lede { margin: 0; font: 400 var(--ps-type-title)/1.5 var(--ps-font-ui); color: var(--ps-fg); }
.ps-svcpage section { display: grid; gap: var(--ps-space-2); padding-top: var(--ps-space-4); border-top: 1px solid var(--ps-line); }
.ps-svcpage h3 { margin: 0; font: var(--ps-weight-medium) var(--ps-type-label)/1.2 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-svcpage :is(ul, ol) { margin: 0; padding-left: 1.2em; display: grid; gap: var(--ps-space-1); }
.ps-svcpage p { margin: 0; }
.ps-svcpage dl { margin: 0; display: grid; gap: var(--ps-space-3); }
.ps-svcpage dt { font-weight: var(--ps-weight-medium); color: var(--ps-fg); }
.ps-svcpage dd { margin: 2px 0 0; }
.ps-svcpage__src { font: 400 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg-3); }

.ps-or--text { font: 400 var(--ps-type-body)/1.2 var(--ps-font-ui); letter-spacing: 0; text-transform: none; color: var(--ps-fg-2); }
.ps-or--text::before, .ps-or--text::after { background: var(--ps-line-strong); }

/* the Brief Generator's step bar scrolls away with the page (Sisi, Nov 8, #35); groups lose their captions and sit closer: 24px
   each side of the hairline, 12px from a question to its answer (#25) */
.ps-wizard--flush .ps-wizard__bar { position: relative; top: auto; }
.ps-wizard--flush .ps-step-group + .ps-step-group { margin-top: 0; padding-top: var(--ps-space-5); }
.ps-wizard--flush .ps-step-group { gap: var(--ps-space-5); }
.ps-wizard--flush .ps-step-group > .ps-question + .ps-question { padding-top: var(--ps-space-5); }
.ps-wizard--flush .ps-wizard__step .ps-question { gap: var(--ps-space-3); }
/* ps-orderajob:end */

/* ps-agreement:start ---------- The brief is the agreement (GTM-439; Sisi's S1–S3, S13, Nov 8; the Order a Job mockup #40–#45). ----------
   .ps-fxmenu > .ps-fxmenu__item: the effects menu, how many of each (a `counts` question); .ps-scope-level: the level worked out from the
   picks (S2), never asked; .ps-receipt: What You'll Get, a line a check marks is checked when the work is delivered; .ps-notincl: Not
   Included (the first three, then See All); .ps-changes: How Changes Work (Fix, Change, New Work); .ps-agree: the I Agree checkbox and
   the portfolio switch. The Review step and the contractor's offer card show the same list. */
.ps-fxmenu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-2); }
@media (max-width: 900px) { .ps-fxmenu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ps-fxmenu { grid-template-columns: minmax(0, 1fr); } }
.ps-fxmenu__item { display: grid; gap: var(--ps-space-1); align-content: start; padding: var(--ps-space-3); border-radius: var(--ps-radius-card); background: var(--ps-tile); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-fxmenu__item.is-on { box-shadow: inset 0 0 0 1px var(--ps-line-strong), inset 0 2px 0 0 var(--ps-color-lime-neon); }
.ps-fxmenu__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-1); font: 500 var(--ps-type-body)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-fxmenu__desc { font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-fxmenu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-2); padding-top: var(--ps-space-1); }
.ps-fxmenu__price { flex: 1 1 100%; font: 500 var(--ps-type-caption)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-scope-level { display: flex; gap: var(--ps-space-2); align-items: flex-start; padding: var(--ps-space-3) var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-tile); box-shadow: inset 0 0 0 1px var(--ps-line); font: 400 var(--ps-type-body)/1.45 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-scope-level > .ps-icon { flex: none; }
.ps-scope-level strong { color: var(--ps-fg); font-weight: 500; }
.ps-receipt, .ps-notincl, .ps-changes { display: grid; gap: var(--ps-space-3); padding: var(--ps-space-4); border-radius: var(--ps-radius-card); background: var(--ps-tile); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-receipt { box-shadow: inset 0 0 0 1px var(--ps-line-strong); }
.ps-receipt__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ps-space-2); }
.ps-receipt__title { margin: 0; font: 500 var(--ps-type-title)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-receipt__ver { font: 500 var(--ps-type-label)/1 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; color: var(--ps-fg-3); }
.ps-receipt__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ps-space-2); }
.ps-receipt__list > li { display: grid; grid-template-columns: var(--ps-space-5) minmax(0, 1fr) var(--ps-space-5); gap: var(--ps-space-2); align-items: start; font: 400 var(--ps-type-body)/1.45 var(--ps-font-ui); color: var(--ps-fg); }
.ps-receipt__list > li > .ps-icon { justify-self: center; color: var(--ps-fg-3); }
.ps-notincl .ps-receipt__list > li { color: var(--ps-fg-2); }
.ps-receipt__check { display: inline-grid; place-items: center; width: var(--ps-space-5); height: var(--ps-space-5); border-radius: var(--ps-radius-pill); color: var(--ps-ok-text); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-receipt__note { margin: 0; display: flex; gap: var(--ps-space-2); align-items: flex-start; font: 400 var(--ps-type-caption)/1.45 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-receipt__note > .ps-icon { flex: none; color: var(--ps-ok-text); }
.ps-notincl__more { justify-self: start; }
.ps-changes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-3); }
@media (max-width: 700px) { .ps-changes__grid { grid-template-columns: minmax(0, 1fr); } }
.ps-changes__item { display: grid; align-content: start; gap: var(--ps-space-1); font: 400 var(--ps-type-caption)/1.45 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-changes__item > strong { font: 500 var(--ps-type-body)/1.3 var(--ps-font-ui); color: var(--ps-fg); }
.ps-changes__tag { justify-self: start; padding: 0 var(--ps-space-2); border-radius: var(--ps-radius-pill); font: 500 var(--ps-type-label)/1.8 var(--ps-font-ui); letter-spacing: var(--ps-tracking-label); text-transform: uppercase; background: var(--ps-chip); color: var(--ps-fg-2); }
.ps-changes__tag.is-free { background: var(--ps-ok-soft); color: var(--ps-ok-text); }
.ps-changes__tag.is-new { background: var(--ps-color-sprout); color: var(--ps-color-ink); }
.ps-agree { display: grid; gap: var(--ps-space-3); justify-items: start; }
.ps-agree__own { width: 100%; }
/* ps-agreement:end */

/* ps-fontpicker:start */
/* ======================================================================================================
   Font picker (GTM-363 B-61 and B-63, Oct 21, 2026; PS.fontPicker in ps-ui.js). Search the whole font library by name,
   filter by kind, live specimens (the brand's own name, a sample line, the family's styles), More Like This, and choose for
   the headings or the text; the house rules' pairing warning under a result, never a block. Each specimen's family and
   weight come from the data through the CSSOM (--ps-fontpick-family, --ps-fontpick-weight), like the brand fonts elsewhere.
   ====================================================================================================== */
.ps-fontpick { display: flex; flex-direction: column; gap: var(--ps-space-4); min-width: 0; }
.ps-fontpick *, .ps-fontpick *::before, .ps-fontpick *::after { box-sizing: border-box; }
.ps-fontpick > .ps-seg { align-self: flex-start; }
.ps-fontpick__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-3); min-width: 0; }
.ps-fontpick__bar > .ps-search { flex: 1 1 240px; height: var(--ps-size-control); }
.ps-fontpick__bar > .ps-search input { width: 100%; }
.ps-fontpick__bar > .ps-search input:focus-visible { outline: none; }   /* the pill shows the focus ring (.ps-search:has) */
.ps-fontpick__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ps-space-2); }
.ps-fontpick__head > .ps-labelcaps { margin: 0; overflow-wrap: anywhere; }
.ps-fontpick__status { margin: 0; font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-2); }
.ps-fontpick__list { display: flex; flex-direction: column; gap: var(--ps-space-2); margin: 0; padding: 0; list-style: none; }
.ps-fontpick__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ps-space-4);
  padding: var(--ps-space-4); border-radius: var(--ps-radius-control); background: var(--ps-chip); }
.ps-fontpick__item.is-current { box-shadow: inset 0 0 0 1.5px var(--ps-color-sprout-strong); }
.ps-fontpick__spec { display: flex; flex-direction: column; gap: var(--ps-space-1); min-width: 0; }
.ps-fontpick [data-fp-face] { font-family: var(--ps-fontpick-family, var(--ps-font-ui)); font-weight: var(--ps-fontpick-weight, 400); }
.ps-fontpick [data-fp-face][data-italic] { font-style: italic; }
.ps-fontpick__name { font-size: var(--ps-type-section); line-height: 1.15; color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-fontpick__line { font-size: var(--ps-type-title); line-height: 1.45; color: var(--ps-fg-2); overflow-wrap: anywhere; }
.ps-fontpick__styles { display: flex; flex-wrap: wrap; gap: var(--ps-space-1) var(--ps-space-3); font-size: var(--ps-type-body); line-height: 1.3; color: var(--ps-fg-2); }
.ps-fontpick__item.is-waiting [data-fp-face] { color: var(--ps-fg-3); }   /* until the family has loaded: the fallback, quieter */
.ps-fontpick__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-space-1) var(--ps-space-3); margin-top: var(--ps-space-1);
  font: 400 var(--ps-type-caption)/1.4 var(--ps-font-ui); color: var(--ps-fg-3); }
.ps-fontpick__meta b { font-weight: 600; color: var(--ps-fg); overflow-wrap: anywhere; }
.ps-fontpick__warn { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ps-space-1); margin-top: var(--ps-space-1); }
.ps-fontpick__warn > .ps-badge { height: auto; max-width: 100%; padding-block: var(--ps-space-1); white-space: normal; line-height: 1.3; }
.ps-fontpick__warn > .ps-hint { max-width: 60ch; }
.ps-fontpick__acts { display: flex; flex-direction: column; align-items: stretch; gap: var(--ps-space-2); }
.ps-fontpick__more { align-self: flex-start; }
.ps-fontpick-modal .ps-modal__dialog { min-width: 0; }   /* the long kind row scrolls inside; it never widens the dialog */
.ps-fontpick-modal .ps-modal__body { min-height: min(60vh, 520px); }
@media (max-width: 720px) {
  .ps-fontpick__bar > .ps-chips { flex: 1 1 100%; flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ps-fontpick__bar > .ps-chips > .ps-chip { flex: none; }
  .ps-fontpick__item { grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-3); }
  .ps-fontpick__acts { flex-direction: row; flex-wrap: wrap; }
  .ps-fontpick__acts .ps-btn { flex: 1 1 auto; min-height: var(--ps-size-touch); }
  .ps-fontpick__more { align-self: stretch; min-height: var(--ps-size-touch); }
}
/* ps-fontpicker:end */