@charset "UTF-8"; /* ========================================================================== Persona Studio v2 — app.css Layout + every component. Loaded after css/tokens.css (the vocabulary) and before css/site-chrome.css (the shared-nav overrides). THREE RULES THIS FILE IS BUILT AROUND 1. No raw colour, spacing, radius, font-size, duration or easing literal. Everything resolves through a --ps-* token. The one exception the language forces is the pixel value inside a @media query, because custom properties cannot be evaluated there; the canonical five are tokens.css §1.11. 2. Zero `!important`. The token layer has no cascade to fight and neither does this one — `hidden` is handled with :not([hidden]) instead. 3. Hover never changes layout size. v1's card hover un-clamped the description and grew the card ~350px, bursting the grid row. Contents 1 Base layer / reset (Reboot is gone — head.php handed this here) 2 Page ground + aurora 3 Shell layout 4 Sidebar (docked + off-canvas) 5 Buttons, icon buttons, chips, badges, tags 6 Discover: heading, filters, grid, card 7 Persona detail + about 8 Dialogs 9 Chat surface 10 Forms 11 Lists (leaderboard, history, my personas, announcements) 12 Feedback states: skeleton, empty, error, toast 13 Utilities ========================================================================== */ /* ========================================================================== 1. BASE LAYER / RESET partials/head.php dropped Bootstrap (2.6% used) and with it Reboot, and handed the reset to css/. tokens.css predates that decision and has none, so it lives here. /css/nav-shared.css loads BEFORE this file and assumes border-box while declaring no font-family, so both have to be set globally rather than scoped to .ps-*. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* The deep ground. It is on rather than so that the aurora in §2 — a fixed pseudo-element at z-index -1 — has something to paint over. */ background-color: var(--ps-bg-deep); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* The site nav is position:sticky, so an in-page anchor (#ps-discover-title) would otherwise land under it. */ scroll-padding-top: calc(var(--ps-nav-h) + var(--ps-s-4)); tab-size: 4; /* Reserve the scrollbar's gutter permanently, so opening a dialog — which puts `overflow: hidden` on this element via .ps-scroll-lock (§8) — cannot shift the whole page sideways by the scrollbar's width. */ scrollbar-gutter: stable; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; min-height: 100dvh; /* Transparent on purpose: carries the colour, body::before the aurora. */ background-color: transparent; color: var(--ps-text-1); font-family: var(--ps-font-sans); font-size: var(--ps-fs-md); font-weight: var(--ps-fw-normal); line-height: var(--ps-lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--ps-font-display); font-weight: var(--ps-fw-semibold); line-height: var(--ps-lh-snug); letter-spacing: var(--ps-ls-tight); text-wrap: balance; } p, dl, dd, figure, blockquote, pre { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* Prose contexts opt list markers back in — the reset strips them globally because 90% of the lists in this product are layout, not content. */ .ps-dialog__body ul:not(.ps-ranked, .ps-minelist, .ps-notiflist, .ps-chatlist, .ps-taglist, .ps-starters__list) { padding-left: var(--ps-s-5); list-style: disc; } a { color: var(--ps-accent-text); text-decoration: underline; } a:hover { color: var(--ps-text-1); } img, svg, video, canvas { display: block; } img, video { max-width: 100%; height: auto; } /* The icon sprite is an 995px in a 900px viewport AND .personas-container 2948px in 773px). So the shell is ordinary document flow, the page is the only scroller, and the sidebar is sticky rather than fixed — which also means no nav height is hardcoded anywhere: --ps-nav-h is the single source and app.js keeps it honest. ========================================================================== */ .ps-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-s-4); inline-size: 100%; max-inline-size: var(--ps-shell-max); margin-inline: auto; padding-inline: var(--ps-s-4); } .ps-main { /* min-inline-size on a grid child is what stops a wide word or an unsized image from pushing the whole page sideways. */ min-inline-size: 0; padding-block: var(--ps-s-6) var(--ps-s-11); display: flex; flex-direction: column; gap: var(--ps-s-9); } @media (min-width: 1024px) { .ps-shell { /* 1440 - (2 x 20 padding) - 264 sidebar - 24 gap = 1112 = (4 x 260 --ps-card-min) + (3 x 24 grid gap): exactly four across. */ grid-template-columns: var(--ps-sidebar-w) minmax(0, 1fr); column-gap: var(--ps-s-6); padding-inline: var(--ps-s-5); } .ps-main { padding-block: var(--ps-s-8) var(--ps-s-12); } } @media (min-width: 1600px) { .ps-shell { padding-inline: var(--ps-s-7); } } /* ========================================================================== 4. SIDEBAR Docked from 1024px, an off-canvas drawer below it. In v1 it was permanently off-screen at `left: -240px` below 868px with no affordance to reveal it, so Discover, Leaderboard, Create, My Personas and the usage meter were unreachable on every phone and tablet; and it hardcoded `top: 64px` against a real nav bottom of 207px, with z-index 30 against the nav's 100, so the logo was clipped by the nav at scrollTop 0. State comes from the toggle's aria-expanded — the accessibility state IS the styling state, so the two cannot disagree. Behaviour is the JS agent's; nothing here keys off a data-ps-action value (INTERFACES §5). ========================================================================== */ .ps-sidebar { min-inline-size: 0; } .ps-sidebar__toggle { display: inline-flex; align-items: center; gap: var(--ps-s-2); min-height: var(--ps-tap-min); margin-block-start: var(--ps-s-4); padding: var(--ps-s-2) var(--ps-s-4); border: var(--ps-bw) solid var(--ps-border-strong); border-radius: var(--ps-r-pill); background-color: var(--ps-surface-1); color: var(--ps-text-1); font-size: var(--ps-fs-sm); font-weight: var(--ps-fw-medium); box-shadow: var(--ps-e-1); transition: background-color var(--ps-t-base), border-color var(--ps-t-base); } .ps-sidebar__toggle:hover { background-color: var(--ps-surface-1-hover); } .ps-sidebar__toggle:active { background-color: var(--ps-surface-1-active); } .ps-sidebar__panel { display: flex; flex-direction: column; gap: var(--ps-s-5); padding: var(--ps-s-5) var(--ps-s-4); border: var(--ps-bw) solid var(--ps-glass-hairline); border-radius: var(--ps-r-card); /* Real glass, because §2 gave it a real backdrop to refract. */ background-color: var(--ps-glass-tint); background-image: var(--ps-grad-sheen); -webkit-backdrop-filter: blur(var(--ps-glass-blur)) saturate(1.4); backdrop-filter: blur(var(--ps-glass-blur)) saturate(1.4); box-shadow: var(--ps-e-2); } .ps-sidebar__brand { display: flex; align-items: center; gap: var(--ps-s-2); } .ps-sidebar__mark { display: grid; place-items: center; inline-size: var(--ps-icon-xl); block-size: var(--ps-icon-xl); border-radius: var(--ps-r-2); background-image: var(--ps-grad-brand); color: var(--ps-on-accent); box-shadow: var(--ps-e-glow); } .ps-sidebar__name { flex: 1 1 auto; /* 264px of sidebar leaves ~176px beside the mark: the product name gets it, and the Beta badge wraps under it rather than breaking "Persona Studio" across two lines. */ white-space: nowrap; font-family: var(--ps-font-display); font-size: var(--ps-fs-md); font-weight: var(--ps-fw-bold); letter-spacing: var(--ps-ls-tight); } .ps-sidebar__brand { flex-wrap: wrap; } /* Off-canvas only (partials/sidebar.php >>> HANDOFF). Small PAINT, full-size TARGET, the same trade as .ps-btn--sm and for the same reason: measured at 390px the drawer is 285px wide and the brand row already spends 246 of its 253 available pixels on the mark, "Persona Studio" and the Beta badge. A 44px box wrapped to a second line and left a lone ✕ under the product name; pinning it absolutely instead pushed the Beta badge onto that second line. At a 24px paint the four items fit one row with 7px to spare, and the ::after restores the 44px hit area by overhanging 10px on every side — the brand row's other children are not interactive, so the overhang cannot steal a click. Hidden entirely at the docked breakpoint, below. Scoped through the parent on purpose: `.ps-sidebar__close` alone is (0,1,0), the same weight as `.ps-iconbtn` which sizes it to 44px and which comes LATER in this file, so the size below silently lost and the button stayed 44px and still wrapped. (0,2,0) settles it without reordering the sheet. */ .ps-sidebar__brand > .ps-sidebar__close { position: relative; flex: none; inline-size: var(--ps-icon-lg); block-size: var(--ps-icon-lg); margin-inline-start: auto; } .ps-sidebar__brand > .ps-sidebar__close::after { content: ""; position: absolute; inset: calc((var(--ps-tap-min) - var(--ps-icon-lg)) / -2); } .ps-sidebar__list { display: flex; flex-direction: column; gap: var(--ps-s-h); } .ps-sidebar__item { display: flex; align-items: center; gap: var(--ps-s-3); inline-size: 100%; min-height: var(--ps-tap-min); padding: var(--ps-s-2) var(--ps-s-3); border-radius: var(--ps-r-2); color: var(--ps-text-2); font-size: var(--ps-fs-sm); font-weight: var(--ps-fw-medium); text-decoration: none; transition: background-color var(--ps-t-fast), color var(--ps-t-fast); } /* A fixed icon column. v1 sized these at 26/20/20px with no box, so the sidebar's icons did not line up with each other at any width. */ .ps-sidebar__item > .ps-icon { flex: none; inline-size: var(--ps-icon-box); block-size: var(--ps-icon-md); color: var(--ps-text-3); transition: color var(--ps-t-fast); } .ps-sidebar__item > span:not(.ps-visually-hidden) { flex: 1 1 auto; min-inline-size: 0; } .ps-sidebar__item:hover { background-color: var(--ps-surface-2); color: var(--ps-text-1); } .ps-sidebar__item:hover > .ps-icon { color: var(--ps-accent-ui); } .ps-sidebar__item:active { background-color: var(--ps-surface-2-active); } .ps-sidebar__item[aria-current="page"] { background-color: var(--ps-accent-tint); color: var(--ps-text-1); box-shadow: inset var(--ps-bw-strong) 0 0 var(--ps-accent); } .ps-sidebar__item[aria-current="page"] > .ps-icon { color: var(--ps-accent-ui); } .ps-sidebar__hint-icon { color: var(--ps-text-3); } .ps-sidebar__count { flex: none; padding: var(--ps-s-h) var(--ps-s-2); border-radius: var(--ps-r-pill); background-color: var(--ps-surface-3); color: var(--ps-text-2); font-size: var(--ps-fs-xs); font-variant-numeric: tabular-nums; } .ps-sidebar__foot { display: flex; flex-direction: column; gap: var(--ps-s-3); margin-block-start: auto; padding-block-start: var(--ps-s-4); border-block-start: var(--ps-bw) solid var(--ps-border); } .ps-sidebar__item--quiet { color: var(--ps-text-3); font-weight: var(--ps-fw-normal); } .ps-sidebar__tools { display: flex; align-items: center; gap: var(--ps-s-2); justify-content: space-between; } /* --- usage meter -------------------------------------------------------- */ .ps-usage { display: flex; flex-direction: column; gap: var(--ps-s-2); padding: var(--ps-s-3); border: var(--ps-bw) solid var(--ps-border); border-radius: var(--ps-r-3); background-color: var(--ps-surface-1); } .ps-usage__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ps-s-2); } .ps-usage__label { font-size: var(--ps-fs-2xs); font-weight: var(--ps-fw-semibold); letter-spacing: var(--ps-ls-label); text-transform: uppercase; color: var(--ps-text-3); } .ps-usage__value { font-size: var(--ps-fs-sm); font-weight: var(--ps-fw-semibold); font-variant-numeric: tabular-nums; color: var(--ps-text-1); } .ps-usage__track { block-size: var(--ps-s-2); border-radius: var(--ps-r-pill); background-color: var(--ps-surface-3); overflow: hidden; } .ps-usage__fill { display: block; block-size: 100%; min-inline-size: var(--ps-s-1); border-radius: var(--ps-r-pill); background-image: var(--ps-grad-brand); transition: inline-size var(--ps-t-slow); } .ps-usage__note { font-size: var(--ps-fs-xs); color: var(--ps-text-3); } .ps-usage__note a { color: var(--ps-accent-text); font-weight: var(--ps-fw-medium); } /* --- plan pill ---------------------------------------------------------- */ .ps-tier { display: inline-flex; align-items: center; gap: var(--ps-s-1); padding: var(--ps-s-1) var(--ps-s-3); border: var(--ps-bw) solid var(--ps-border-strong); border-radius: var(--ps-r-pill); background-color: var(--ps-surface-2); color: var(--ps-text-2); font-size: var(--ps-fs-xs); font-weight: var(--ps-fw-semibold); white-space: nowrap; } .ps-tier[data-tier="pro"] { border-color: var(--ps-warm-edge); background-color: var(--ps-warm-tint); color: var(--ps-warm-text); } .ps-tier[data-tier="basic"] { border-color: var(--ps-accent-edge); background-color: var(--ps-accent-tint); color: var(--ps-accent-text); } /* --- off-canvas below the docked breakpoint ----------------------------- */ @media (max-width: 1023.98px) { .ps-sidebar__panel { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--ps-z-modal); inline-size: min(calc(var(--ps-sidebar-w) + var(--ps-s-6)), 88%); max-inline-size: 100%; border-radius: 0 var(--ps-r-card) var(--ps-r-card) 0; padding: max(var(--ps-s-5), env(safe-area-inset-top)) var(--ps-s-4) max(var(--ps-s-5), env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--ps-e-4); transform: translateX(-100%); /* visibility, not just transform: an off-canvas panel that is merely moved stays in the tab order and in the accessibility tree (v1 kept four invisible links focusable at 390px). Transitioned so it stays visible for the duration of the slide-out. */ visibility: hidden; transition: transform var(--ps-t-modal), visibility var(--ps-dur-4) var(--ps-ease-out); } .ps-sidebar__toggle[aria-expanded="true"] ~ .ps-sidebar__panel { transform: translateX(0); visibility: visible; } /* Wins over the reset's [hidden] on specificity, not with !important. */ .ps-sidebar__toggle[aria-expanded="true"] ~ .ps-sidebar__backdrop { display: block; position: fixed; inset: 0; z-index: var(--ps-z-overlay); inline-size: 100%; background-color: var(--ps-scrim); -webkit-backdrop-filter: blur(var(--ps-glass-blur)); backdrop-filter: blur(var(--ps-glass-blur)); animation: ps-fade-in var(--ps-t-base) both; } } @media (min-width: 1024px) { .ps-sidebar { position: sticky; /* Derived, never hardcoded. */ top: calc(var(--ps-nav-h) + var(--ps-s-5)); align-self: start; z-index: var(--ps-z-sidebar); max-height: calc(100dvh - var(--ps-nav-h) - var(--ps-s-9)); padding-block: var(--ps-s-8) var(--ps-s-4); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .ps-sidebar__panel { min-height: 100%; } .ps-sidebar__toggle, .ps-sidebar__close, .ps-sidebar__backdrop { display: none; } } /* ========================================================================== 5. BUTTONS, ICON BUTTONS, CHIPS, BADGES, TAGS Every control here clears 44x44 (SPEC §9). v1 measured 38px category chips, a 40x40 menu button and a 101x19 upgrade link. ========================================================================== */ .ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ps-s-2); min-height: var(--ps-tap-min); padding: var(--ps-s-2) var(--ps-s-5); border: var(--ps-bw) solid var(--ps-border-strong); border-radius: var(--ps-r-control); background-color: var(--ps-surface-2); color: var(--ps-text-1); font-size: var(--ps-fs-sm); font-weight: var(--ps-fw-semibold); line-height: var(--ps-lh-normal); text-decoration: none; white-space: nowrap; transition: background-color var(--ps-t-base), border-color var(--ps-t-base), color var(--ps-t-base), box-shadow var(--ps-t-base), transform var(--ps-t-fast); } .ps-btn > .ps-icon { flex: none; } .ps-btn:hover { background-color: var(--ps-surface-2-hover); color: var(--ps-text-1); } .ps-btn:active { background-color: var(--ps-surface-2-active); transform: translateY(var(--ps-s-h)); } .ps-btn:disabled, .ps-btn[aria-disabled="true"] { background-color: var(--ps-surface-2); border-color: var(--ps-border); color: var(--ps-text-disabled); box-shadow: none; transform: none; } .ps-btn--primary { border-color: transparent; background-color: var(--ps-accent); background-image: var(--ps-grad-brand); color: var(--ps-on-accent); box-shadow: var(--ps-e-1); } .ps-btn--primary:hover { background-color: var(--ps-accent-hover); background-image: none; color: var(--ps-on-accent); box-shadow: var(--ps-e-glow); } .ps-btn--primary:active { background-color: var(--ps-accent-active); background-image: none; } .ps-btn--primary:disabled, .ps-btn--primary[disabled] { background-color: var(--ps-surface-3); background-image: none; color: var(--ps-text-disabled); box-shadow: none; } .ps-btn--quiet { border-color: transparent; background-color: transparent; color: var(--ps-text-2); font-weight: var(--ps-fw-medium); } .ps-btn--quiet:hover { background-color: var(--ps-surface-2); color: var(--ps-text-1); } .ps-btn--danger-quiet { border-color: transparent; background-color: transparent; color: var(--ps-error-text); } .ps-btn--danger-quiet:hover { background-color: var(--ps-error-tint); border-color: var(--ps-error-edge); color: var(--ps-error-text); } .ps-btn--wide { inline-size: 100%; max-inline-size: var(--ps-composer-max); } /* --- .ps-btn--sm: small PAINT, full-size TARGET ------------------------- js/render.js and js/chat.js emit this for the per-message actions (Copy, Regenerate, Retry), the code-block Copy and the gated "See plans" — dense rows where a 44px-tall filled button is the wrong visual weight and, stacked three across under every bubble, makes the transcript look like a toolbar. So the box is 32px and the HIT AREA is still 44: an invisible ::after overhangs 6px above and below. The buttons in these rows sit side by side, so a vertical overhang cannot overlap its neighbours, and nothing above or below the row is interactive. Painted small, tappable large — rather than choosing one and losing the other. */ .ps-btn--sm { position: relative; gap: var(--ps-s-1); min-height: var(--ps-s-7); padding: var(--ps-s-1) var(--ps-s-3); font-size: var(--ps-fs-xs); } .ps-btn--sm::after { content: ""; position: absolute; inset-block: calc((var(--ps-tap-min) - var(--ps-s-7)) / -2); inset-inline: 0; } /* Destructive confirmation (js/modal.js confirm({danger:true})). The hover step is --ps-error-text, which is the lighter red on dark and the darker red on light — so the state change is visible in both themes and --ps-on-error still clears AA on it. */ .ps-btn--danger { border-color: transparent; background-color: var(--ps-error); color: var(--ps-on-error); box-shadow: var(--ps-e-1); } .ps-btn--danger:hover { background-color: var(--ps-error-text); color: var(--ps-on-error); } .ps-btn--danger:active { background-color: var(--ps-error); } /* --- icon-only ---------------------------------------------------------- */ .ps-iconbtn { display: inline-grid; place-items: center; inline-size: var(--ps-tap-min); block-size: var(--ps-tap-min); border: var(--ps-bw) solid transparent; border-radius: var(--ps-r-2); color: var(--ps-text-2); transition: background-color var(--ps-t-fast), color var(--ps-t-fast), border-color var(--ps-t-fast); } .ps-iconbtn:hover { background-color: var(--ps-surface-2); color: var(--ps-text-1); } .ps-iconbtn:active { background-color: var(--ps-surface-2-active); } /* --- chips: category filters, conversation starters, dialog tabs -------- */ .ps-chip { display: inline-flex; align-items: center; gap: var(--ps-s-2); min-height: var(--ps-tap-min); padding: var(--ps-s-2) var(--ps-s-4); border: var(--ps-bw) solid var(--ps-border-strong); border-radius: var(--ps-r-chip); background-color: var(--ps-surface-1); color: var(--ps-text-2); font-size: var(--ps-fs-sm); font-weight: var(--ps-fw-medium); text-align: start; transition: background-color var(--ps-t-base), border-color var(--ps-t-base), color var(--ps-t-base); } .ps-chip:hover { background-color: var(--ps-surface-1-hover); color: var(--ps-text-1); } .ps-chip:active { background-color: var(--ps-surface-1-active); } /* Selected state carries a border weight AND a fill AND the aria-pressed attribute it is derived from — never colour alone (SPEC §9). */ .ps-chip[aria-pressed="true"] { border-width: var(--ps-bw-strong); border-color: var(--ps-accent); background-color: var(--ps-accent-tint); color: var(--ps-accent-text); font-weight: var(--ps-fw-semibold); } .ps-chip__count { padding-inline: var(--ps-s-2); border-radius: var(--ps-r-pill); background-color: var(--ps-surface-3); color: var(--ps-text-3); font-size: var(--ps-fs-xs); font-variant-numeric: tabular-nums; } .ps-chip[aria-pressed="true"] .ps-chip__count { background-color: var(--ps-accent); color: var(--ps-on-accent); } /* --- badges: labels, never controls ------------------------------------- */ .ps-badge { display: inline-flex; align-items: center; gap: var(--ps-s-1); padding: var(--ps-s-h) var(--ps-s-2); border: var(--ps-bw) solid var(--ps-border); border-radius: var(--ps-r-pill); background-color: var(--ps-surface-2); color: var(--ps-text-2); font-size: var(--ps-fs-xs); font-weight: var(--ps-fw-medium); line-height: var(--ps-lh-normal); white-space: nowrap; } .ps-badge > .ps-icon { flex: none; } .ps-badge--beta { border-color: var(--ps-accent-edge); background-color: var(--ps-accent-tint); color: var(--ps-accent-text); font-size: var(--ps-fs-2xs); font-weight: var(--ps-fw-semibold); letter-spacing: var(--ps-ls-label); text-transform: uppercase; } .ps-badge--count { border-color: transparent; background-color: var(--ps-accent); color: var(--ps-on-accent); font-weight: var(--ps-fw-semibold); font-variant-numeric: tabular-nums; } .ps-badge--tier { border-color: var(--ps-warm-edge); background-color: var(--ps-warm-tint); color: var(--ps-warm-text); font-weight: var(--ps-fw-semibold); letter-spacing: var(--ps-ls-label); } .ps-badge--private { border-color: var(--ps-info-edge); background-color: var(--ps-info-tint); color: var(--ps-info-text); } .ps-badge--status[data-status="approved"] { border-color: var(--ps-success-edge); background-color: var(--ps-success-tint); color: var(--ps-success-text); } .ps-badge--status[data-status="rejected"] { border-color: var(--ps-error-edge); background-color: var(--ps-error-tint); color: var(--ps-error-text); } .ps-badge--status[data-status="pending"] { border-color: var(--ps-warning-edge); background-color: var(--ps-warning-tint); color: var(--ps-warning-text); } /* --- tags: 13px floor. v1 rendered these at 11.2px AND 3.78:1 — a compound failure on the most repeated element on the page. ------------------- */ .ps-taglist { display: flex; flex-wrap: wrap; gap: var(--ps-s-1); } .ps-tag { padding: var(--ps-s-h) var(--ps-s-2); border-radius: var(--ps-r-1); background-color: var(--ps-surface-2); color: var(--ps-text-3); font-size: var(--ps-fs-xs); line-height: var(--ps-lh-normal); } .ps-taglist--lg { gap: var(--ps-s-2); } .ps-taglist--lg .ps-tag { padding: var(--ps-s-1) var(--ps-s-3); border: var(--ps-bw) solid var(--ps-border); border-radius: var(--ps-r-pill); font-size: var(--ps-fs-sm); color: var(--ps-text-2); } /* --- notices + upsell --------------------------------------------------- */ .ps-notice { display: flex; align-items: flex-start; gap: var(--ps-s-3); padding: var(--ps-s-4); border: var(--ps-bw) solid var(--ps-info-edge); border-radius: var(--ps-r-3); background-color: var(--ps-info-tint); color: var(--ps-text-1); font-size: var(--ps-fs-sm); line-height: var(--ps-lh-relaxed); } .ps-notice > .ps-icon { flex: none; color: var(--ps-info-text); margin-block-start: var(--ps-s-h); } .ps-notice--error { border-color: var(--ps-error-edge); background-color: var(--ps-error-tint); } .ps-notice--error > .ps-icon { color: var(--ps-error-text); } .ps-notice--wide { grid-column: 1 / -1; } .ps-upsell { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ps-s-2); padding: var(--ps-s-3) var(--ps-s-4); border: var(--ps-bw) solid var(--ps-warm-edge); border-radius: var(--ps-r-3); background-color: var(--ps-warm-tint); color: var(--ps-text-1); font-size: var(--ps-fs-sm); } .ps-upsell > .ps-icon { color: var(--ps-warm-text); } .ps-upsell a { color: var(--ps-warm-text); font-weight: var(--ps-fw-semibold); } /* ========================================================================== 6. DISCOVER: heading, filters, grid, card ========================================================================== */ .ps-discover { display: flex; flex-direction: column; gap: var(--ps-s-6); } .ps-discover__title { font-size: var(--ps-fs-3xl); font-weight: var(--ps-fw-bold); } h1.ps-discover__title { font-size: var(--ps-fs-hero); font-weight: var(--ps-fw-extrabold); line-height: var(--ps-lh-tight); letter-spacing: var(--ps-ls-display); } .ps-discover__lead { max-inline-size: var(--ps-prose-max); margin-block-start: calc(var(--ps-s-3) * -1); color: var(--ps-text-2); font-size: var(--ps-fs-lg); line-height: var(--ps-lh-relaxed); text-wrap: pretty; } /* --- filter bar --------------------------------------------------------- */ .ps-filters { display: flex; flex-direction: column; gap: var(--ps-s-4); padding: var(--ps-s-4); border: var(--ps-bw) solid var(--ps-border); border-radius: var(--ps-r-card); background-color: var(--ps-surface-1); box-shadow: var(--ps-e-1); } .ps-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-s-3); } .ps-filters__submit { flex: none; } .ps-chips { display: flex; flex-wrap: wrap; gap: var(--ps-s-2); } /* --- phone/tablet: the fold matters more than the furniture ------------- Measured at 390x844 before this block: the H1, a three-line lead and the filter panel filled the entire first viewport and the category chips wrapped to FIVE rows, so the first persona card started at y=1204 — the user had to scroll 1.4 viewports to see one card on a page whose whole job is to show personas. Nothing here touches the desktop layout: the two rules the desktop shares are in the base, and this block only compresses. The four moves, in order of how much they bought: 1. the category chips become ONE horizontally scrollable row (~200px saved) 2. the lead drops to body size (--ps-fs-lg is a desktop luxury) (~30px) 3. the section rhythm halves: --ps-s-9 between sections is right for a 1440px page and absurd on a 390px one (~50px) 4. the filter panel tightens by one spacing step throughout (~20px) */ @media (max-width: 767.98px) { .ps-main { padding-block: var(--ps-s-3) var(--ps-s-9); gap: var(--ps-s-7); } .ps-sidebar__toggle { margin-block-start: var(--ps-s-3); } .ps-discover { gap: var(--ps-s-4); } .ps-discover__lead { margin-block-start: calc(var(--ps-s-2) * -1); font-size: var(--ps-fs-md); line-height: var(--ps-lh-normal); } .ps-filters { gap: var(--ps-s-3); padding: var(--ps-s-3); } /* An explicit two-column grid rather than flex wrapping. Wrapping put the submit on a line of its own under the Pro pill, so the button was orphaned from the field it submits; and because an has an intrinsic minimum width, which line it landed on changed with the placeholder text. Every placement here is stated, so nothing depends on intrinsic sizing: row 1 search field | Search row 2 sort (full width — a squeezed ` with a real ``, so the accessibility tree, the tab order, Space, the form value and `:checked` are all the platform's. The tick is a background image because a pseudo-element on an `` — the usual trick — is not rendered by Firefox on a replaced element. Its stroke colour is baked into the SVG and therefore lives in tokens.css §1.16, so this file still declares no colour of its own. */ .ps-field--check { flex-direction: row; align-items: center; gap: var(--ps-s-3); min-height: var(--ps-tap-min); } .ps-field--check input[type="checkbox"], .ps-radio input[type="radio"] { -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center; inline-size: var(--ps-icon-md); block-size: var(--ps-icon-md); border: var(--ps-bw-strong) solid var(--ps-border-strong); /* A RECESSED WELL, not the surface it sits on. --ps-surface-1 was the same colour as the filter pill and as the panel behind it, so the unchecked box was a hollow 2px outline with nothing inside it — an empty rounded square that read as an unstyled artefact rather than as a control, which is exactly how the search field beside it would read if it had no fill either. --ps-sunken plus --ps-e-inset is the SAME treatment the text inputs get in this section, so the box now belongs to the same family of controls: a well you can put a mark into. */ background-color: var(--ps-sunken); background-position: center; background-repeat: no-repeat; background-size: var(--ps-icon-sm) var(--ps-icon-sm); box-shadow: var(--ps-e-inset); cursor: pointer; transition: background-color var(--ps-t-fast), border-color var(--ps-t-fast), box-shadow var(--ps-t-fast); } .ps-field--check input[type="checkbox"] { border-radius: var(--ps-r-1); } .ps-radio input[type="radio"] { border-radius: var(--ps-r-circle); } /* Hover moves the FILL as well as the border. Border-alone was too quiet to answer "is this thing interactive?" — the question the unchecked box was failing to answer at all. The accent tint is the "about to be on" step: it is the checked fill's own family, one huge luminance move short of it, so the hover previews the action rather than just acknowledging the pointer. */ .ps-field--check input[type="checkbox"]:hover:not(:disabled), .ps-radio input[type="radio"]:hover:not(:disabled) { border-color: var(--ps-accent); background-color: var(--ps-accent-tint); } /* Checked and indeterminate DROP the inset well shadow: a box that has been filled is no longer a well, and an inset shadow over the accent fill only muddies the top edge of the tick. */ .ps-field--check input[type="checkbox"]:checked { border-color: var(--ps-accent); background-color: var(--ps-accent); background-image: var(--ps-img-check); box-shadow: none; } .ps-field--check input[type="checkbox"]:indeterminate { border-color: var(--ps-accent); background-color: var(--ps-accent); background-image: var(--ps-img-dash); box-shadow: none; } /* The radio's dot is an inset ring in the surface colour rather than a second image: one fill, one ring, and it scales with the box. */ .ps-radio input[type="radio"]:checked { border-color: var(--ps-accent); background-color: var(--ps-accent); box-shadow: inset 0 0 0 var(--ps-s-1) var(--ps-surface-1); } .ps-field--check input[type="checkbox"]:disabled, .ps-radio input[type="radio"]:disabled { border-color: var(--ps-border); background-color: var(--ps-surface-2); /* Flat, because a disabled control should not look like it is waiting for input, and the inset well is precisely the "put something here" signal. */ box-shadow: none; } /* The box is 20px, which is under the 44px floor, so the HIT AREA is the label and — for the filter pill below — the whole pill. */ .ps-field--check input[type="checkbox"]:focus-visible, .ps-radio input[type="radio"]:focus-visible { outline: var(--ps-focus-outline); outline-offset: var(--ps-focus-offset); } .ps-field--check > label { display: inline-flex; align-items: center; gap: var(--ps-s-2); min-height: var(--ps-tap-min); color: var(--ps-text-2); cursor: pointer; } /* The Pro-only filter reads as a control: v1 signalled it with colour alone and gave it no focus indicator at all. */ .ps-filters .ps-field--check { position: relative; gap: var(--ps-s-2); padding-inline: var(--ps-s-4); border: var(--ps-bw) solid var(--ps-border-strong); border-radius: var(--ps-r-pill); background-color: var(--ps-surface-1); transition: background-color var(--ps-t-base), border-color var(--ps-t-base), box-shadow var(--ps-t-base); } /* Exactly --ps-tap-min TALL, like the search field and the Search button either side of it. The shared .ps-field--check rule gives the LABEL a 44px min-height as its own hit area, which is right when the label is the only target — but here the pill is the target, and a 44px child inside a bordered parent makes the parent 46px, because `box-sizing: border-box` governs a declared height and not a content-driven one. Measured: a 46px pill beside 44px neighbours, and 48px once checked. The pill's own min-height (inherited, border-box) now governs, and the label stops contributing a height of its own. */ /* Semibold in BOTH states, which is also what the Search button beside it is. Bolding the label only when checked re-measured the text and grew the pill 203.4 -> 206.0px, so ticking the box nudged the Search button sideways: the same class of state-driven layout shift as the border-width above, just subtler. The checked state loses nothing by it — it still carries the tick glyph, the inset ring, the warm fill and the input's own :checked, so it is nowhere near colour-alone. */ .ps-filters .ps-field--check > label { min-height: 0; font-weight: var(--ps-fw-semibold); } .ps-filters .ps-field--check:hover { background-color: var(--ps-surface-1-hover); } /* The whole pill is the hit target, not the 20px box: the label is stretched over it, so tapping anywhere inside 44px-tall pill toggles the filter. The overlay is on the label so it is still the LABEL that is clicked, and the native label-for behaviour does the toggling. */ .ps-filters .ps-field--check > label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* Checked doubles the ring with an INSET SHADOW rather than with border-width. `border-width: 2px` grew the pill from 46x203 to 48x208 the instant the box was ticked, which nudged the Search button beside it and, at 390px where the pill is its own grid row, moved the whole chip rail down 2px — a layout shift caused by a state change, on a control whose entire job is to be toggled. An inset ring paints inside the existing border box, so the emphasis is identical and the geometry is frozen. */ .ps-filters .ps-field--check:has(input:checked) { border-color: var(--ps-warm); background-color: var(--ps-warm-tint); box-shadow: inset 0 0 0 var(--ps-bw) var(--ps-warm); } .ps-filters .ps-field--check:has(input:checked) > label { color: var(--ps-warm-text); } /* A violet box inside an amber pill fought the pill, so the checked box takes the warm fill and the dark tick that goes with it (tokens.css §1.16). */ .ps-filters .ps-field--check input[type="checkbox"]:checked { border-color: var(--ps-warm-edge); background-color: var(--ps-warm); background-image: var(--ps-img-check-dark); } /* THE WHOLE PILL takes the focus ring, not the 20px box inside it. The box is what the platform focuses, but the pill is what a sighted user perceives as the control — a 20px ring floating at the left end of a 203px pill reads as a ring around something else. Both rules are gated on :has(), so if :has() is unavailable the suppression disappears WITH the pill ring and the box keeps the default outline from the shared rule above: the failure mode is the old, less pretty indicator, never no indicator. */ .ps-filters .ps-field--check:has(input:focus-visible) { border-color: var(--ps-accent); box-shadow: var(--ps-focus-ring); } .ps-filters .ps-field--check:has(input:focus-visible) input[type="checkbox"] { outline: none; } /* Checked AND focused: keep the checked inset ring under the focus halo, so the state is still readable while the ring is up. */ .ps-filters .ps-field--check:has(input:checked):has(input:focus-visible) { box-shadow: inset 0 0 0 var(--ps-bw) var(--ps-warm), var(--ps-focus-ring); } .ps-field__preview:not(:empty) { display: flex; align-items: center; gap: var(--ps-s-3); padding: var(--ps-s-2); border: var(--ps-bw) dashed var(--ps-border-strong); border-radius: var(--ps-r-3); background-color: var(--ps-surface-2); } .ps-field__preview img { border-radius: var(--ps-r-2); } /* js/render.js avatarPreview(): sized by attribute, so this only has to keep a tall portrait from stretching the dialog. */ .ps-preview__img { flex: none; max-block-size: var(--ps-s-11); inline-size: auto; border-radius: var(--ps-r-2); object-fit: cover; } /* Starter inputs stack; the row form (--row) is what aligns their labels. */ .ps-starters__inputs { display: flex; flex-direction: column; gap: var(--ps-s-2); } /* --- removable tag chips (js/render.js tagChip) ------------------------- */ .ps-tag--removable { display: inline-flex; align-items: center; gap: var(--ps-s-1); padding: var(--ps-s-1) var(--ps-s-1) var(--ps-s-1) var(--ps-s-3); border: var(--ps-bw) solid var(--ps-border-strong); border-radius: var(--ps-r-pill); background-color: var(--ps-surface-2); color: var(--ps-text-1); font-size: var(--ps-fs-sm); } .ps-tag__remove { display: grid; place-items: center; flex: none; inline-size: var(--ps-s-6); block-size: var(--ps-s-6); border-radius: var(--ps-r-circle); color: var(--ps-text-3); transition: background-color var(--ps-t-fast), color var(--ps-t-fast); } /* Small paint, 44px target — the same overhang as .ps-btn--sm (§5). */ .ps-tag__remove { position: relative; } .ps-tag__remove::after { content: ""; position: absolute; inset: calc((var(--ps-tap-min) - var(--ps-s-6)) / -2); } .ps-tag__remove:hover { background-color: var(--ps-error-tint); color: var(--ps-error-text); } /* --- radio cards -------------------------------------------------------- */ .ps-radios { display: grid; gap: var(--ps-s-3); } .ps-radio { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--ps-s-3); padding: var(--ps-s-4); border: var(--ps-bw) solid var(--ps-border-strong); border-radius: var(--ps-r-3); background-color: var(--ps-surface-1); transition: border-color var(--ps-t-base), background-color var(--ps-t-base); } .ps-radio:hover { background-color: var(--ps-surface-1-hover); } .ps-radio:has(input:checked) { border-width: var(--ps-bw-strong); border-color: var(--ps-accent); background-color: var(--ps-accent-tint); } .ps-radio > label { display: flex; flex-direction: column; gap: var(--ps-s-1); cursor: pointer; } .ps-radio__title { display: flex; align-items: center; gap: var(--ps-s-2); color: var(--ps-text-1); font-size: var(--ps-fs-md); font-weight: var(--ps-fw-semibold); } .ps-radio__desc { color: var(--ps-text-3); font-size: var(--ps-fs-sm); } /* --- actions row -------------------------------------------------------- */ .ps-form__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ps-s-3); } /* In the consent dialogs this row is the panel's footer. */ .ps-dialog__panel > .ps-form__actions { padding: var(--ps-s-4) var(--ps-s-5) max(var(--ps-s-4), env(safe-area-inset-bottom)); border-block-start: var(--ps-bw) solid var(--ps-border); background-color: var(--ps-surface-1); } /* ========================================================================== 11. LISTS: leaderboard, my personas, announcements, chat history ========================================================================== */ .ps-ranked { display: flex; flex-direction: column; gap: var(--ps-s-2); } .ps-ranked__row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--ps-s-3); padding: var(--ps-s-2) var(--ps-s-3); border: var(--ps-bw) solid var(--ps-border); border-radius: var(--ps-r-3); background-color: var(--ps-surface-1); } .ps-ranked__pos { display: grid; place-items: center; inline-size: var(--ps-s-7); block-size: var(--ps-s-7); border: var(--ps-bw) solid transparent; border-radius: var(--ps-r-circle); background-color: var(--ps-surface-3); color: var(--ps-text-2); font-size: var(--ps-fs-sm); font-weight: var(--ps-fw-bold); font-variant-numeric: tabular-nums; } /* Gold, silver, bronze — and a real treatment for 4th onwards, which v1 had nothing for at all. */ .ps-ranked__row:nth-child(1) .ps-ranked__pos { background-color: var(--ps-medal-1); border-color: var(--ps-medal-edge); color: var(--ps-on-medal); } .ps-ranked__row:nth-child(2) .ps-ranked__pos { background-color: var(--ps-medal-2); border-color: var(--ps-medal-edge); color: var(--ps-on-medal); } .ps-ranked__row:nth-child(3) .ps-ranked__pos { background-color: var(--ps-medal-3); border-color: var(--ps-medal-edge); color: var(--ps-on-medal); } .ps-ranked__avatar { inline-size: var(--ps-s-8); block-size: var(--ps-s-8); border-radius: var(--ps-r-avatar); object-fit: cover; background-color: var(--ps-surface-2); } .ps-ranked__name { min-inline-size: 0; } .ps-ranked__name a { display: block; color: var(--ps-text-1); font-weight: var(--ps-fw-medium); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ps-ranked__name a:hover { color: var(--ps-accent-text); text-decoration: underline; } .ps-ranked__count { display: inline-flex; align-items: center; gap: var(--ps-s-1); color: var(--ps-text-3); font-size: var(--ps-fs-sm); font-variant-numeric: tabular-nums; } .ps-minelist { display: flex; flex-direction: column; gap: var(--ps-s-3); } .ps-minelist__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--ps-s-3); padding: var(--ps-s-3); border: var(--ps-bw) solid var(--ps-border); border-radius: var(--ps-r-3); background-color: var(--ps-surface-1); } .ps-minelist__avatar { inline-size: var(--ps-s-9); block-size: var(--ps-s-9); border-radius: var(--ps-r-3); object-fit: cover; background-color: var(--ps-surface-2); } .ps-minelist__main { display: flex; flex-direction: column; gap: var(--ps-s-1); min-inline-size: 0; } .ps-minelist__name { font-size: var(--ps-fs-md); font-weight: var(--ps-fw-semibold); } .ps-minelist__name a { color: var(--ps-text-1); text-decoration: none; } .ps-minelist__name a:hover { color: var(--ps-accent-text); text-decoration: underline; } .ps-minelist__tagline { color: var(--ps-text-3); font-size: var(--ps-fs-sm); } .ps-minelist__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-s-2); padding-block-start: var(--ps-s-1); } .ps-minelist__chats { display: inline-flex; align-items: center; gap: var(--ps-s-1); color: var(--ps-text-3); font-size: var(--ps-fs-xs); font-variant-numeric: tabular-nums; } .ps-minelist__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--ps-s-2); } @media (min-width: 768px) { .ps-minelist__row { grid-template-columns: auto minmax(0, 1fr) auto; } .ps-minelist__actions { grid-column: auto; } } .ps-notiflist { display: flex; flex-direction: column; gap: var(--ps-s-2); } .ps-notiflist__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ps-s-3); padding: var(--ps-s-3); border: var(--ps-bw) solid var(--ps-border); border-radius: var(--ps-r-3); background-color: var(--ps-surface-1); } /* Unread is a tint, a border AND the word "Unread" — never colour alone. */ .ps-notiflist__row[data-read="false"] { border-color: var(--ps-accent-edge); background-color: var(--ps-accent-tint); } .ps-notiflist__icon { display: grid; place-items: center; inline-size: var(--ps-s-7); block-size: var(--ps-s-7); border-radius: var(--ps-r-circle); background-color: var(--ps-surface-3); color: var(--ps-accent-ui); } .ps-notiflist__msg { color: var(--ps-text-1); font-size: var(--ps-fs-sm); line-height: var(--ps-lh-relaxed); } .ps-notiflist__when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-s-2); padding-block-start: var(--ps-s-1); color: var(--ps-text-3); font-size: var(--ps-fs-xs); } .ps-chatlist { display: flex; flex-direction: column; gap: var(--ps-s-2); } .ps-chatlist__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ps-s-3); padding: var(--ps-s-2) var(--ps-s-3); border: var(--ps-bw) solid var(--ps-border); border-radius: var(--ps-r-3); background-color: var(--ps-surface-1); transition: background-color var(--ps-t-fast), border-color var(--ps-t-fast); } .ps-chatlist__row:hover { background-color: var(--ps-surface-1-hover); border-color: var(--ps-accent-edge); } .ps-chatlist__avatar { inline-size: var(--ps-s-8); block-size: var(--ps-s-8); border-radius: var(--ps-r-avatar); object-fit: cover; background-color: var(--ps-surface-2); } .ps-chatlist__main { display: flex; flex-direction: column; gap: var(--ps-s-h); min-inline-size: 0; } .ps-chatlist__name { color: var(--ps-text-1); font-size: var(--ps-fs-sm); font-weight: var(--ps-fw-semibold); } .ps-chatlist__excerpt { color: var(--ps-text-3); font-size: var(--ps-fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ps-chatlist__when { color: var(--ps-text-3); font-size: var(--ps-fs-xs); font-variant-numeric: tabular-nums; } .ps-chatlist__loading, .ps-chatlist__empty { padding: var(--ps-s-6); color: var(--ps-text-3); font-size: var(--ps-fs-sm); text-align: center; } .ps-tabs { display: flex; flex-wrap: wrap; gap: var(--ps-s-2); } /* ========================================================================== 12. FEEDBACK STATES: skeleton, empty, error, toast v1 defined .empty-state and .persona-card-skeleton and used NEITHER. These are the states the product actually passes through, and they are shaped like the content they stand in for. ========================================================================== */ .ps-skeleton, .ps-skeleton__media, .ps-skeleton__line, .ps-skeleton__chip { border-radius: var(--ps-r-2); background-color: var(--ps-skeleton-a); background-image: linear-gradient( 100deg, var(--ps-skeleton-a) 0%, var(--ps-skeleton-b) 45%, var(--ps-skeleton-a) 90% ); background-size: 300% 100%; animation: ps-shimmer var(--ps-dur-shimmer) var(--ps-ease-linear) infinite; } @keyframes ps-shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } } @media (prefers-reduced-motion: reduce) { .ps-skeleton, .ps-skeleton__media, .ps-skeleton__line, .ps-skeleton__chip { animation: none; background-image: none; } } /* A skeleton card is a real .ps-card with skeleton parts inside it, so the grid does not resize when the real cards arrive. js/render.js puts `ps-skeleton` on the CARD as well as on the parts inside it, so the shared paint above filled the whole card with the shimmer — and the media block and both text lines, being exactly the same colour, vanished into it. Eight identical 380px violet rectangles, which is the opposite of a skeleton: it has to be shaped like the content it replaces (SPEC §8). The container therefore reverts to the real card's own surface and the parts do all the shimmering. */ .ps-card--skeleton { pointer-events: none; box-shadow: none; background-color: var(--ps-surface-1); background-image: none; animation: none; } .ps-card--skeleton .ps-skeleton__media { aspect-ratio: 4 / 3; border-radius: 0; } .ps-card--skeleton .ps-card__body { gap: var(--ps-s-3); } /* js/render.js emits a media block and two lines; a real card also carries a tag row, and without it the skeleton stopped 28px short of the card it replaces and the grid stepped when the data arrived. The third block is a pseudo-element rather than a JS change, and it inherits the shimmer by sharing the token. */ .ps-card--skeleton .ps-card__body::after { content: ""; align-self: start; inline-size: var(--ps-s-11); block-size: var(--ps-s-6); border-radius: var(--ps-r-pill); background-color: var(--ps-skeleton-a); background-image: linear-gradient( 100deg, var(--ps-skeleton-a) 0%, var(--ps-skeleton-b) 45%, var(--ps-skeleton-a) 90% ); background-size: 300% 100%; animation: ps-shimmer var(--ps-dur-shimmer) var(--ps-ease-linear) infinite; } @media (prefers-reduced-motion: reduce) { .ps-card--skeleton .ps-card__body::after { animation: none; background-image: none; } } .ps-skeleton__line { block-size: calc(var(--ps-fs-md) * var(--ps-lh-normal)); } .ps-skeleton__line--title { block-size: calc(var(--ps-fs-lg) * var(--ps-lh-snug)); inline-size: 70%; } .ps-skeleton__line--short { inline-size: 45%; } .ps-skeleton__chip { block-size: var(--ps-s-5); inline-size: var(--ps-s-11); border-radius: var(--ps-r-pill); } .ps-skeleton--bubble { block-size: calc(var(--ps-s-12) * 0.5); inline-size: 60%; border-radius: var(--ps-r-bubble); } /* --- empty / zero-results / error --------------------------------------- */ .ps-empty, .ps-grid__empty, .ps-minelist__empty, .ps-ranked__row--empty, .ps-notiflist__empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--ps-s-3); padding: var(--ps-s-9) var(--ps-s-5); border: var(--ps-bw) dashed var(--ps-border-strong); border-radius: var(--ps-r-card); background-color: var(--ps-surface-1); color: var(--ps-text-2); font-size: var(--ps-fs-sm); text-align: center; } .ps-empty > .ps-icon, .ps-grid__empty > .ps-icon, .ps-empty__icon { display: grid; place-items: center; inline-size: var(--ps-s-9); block-size: var(--ps-s-9); border-radius: var(--ps-r-circle); background-color: var(--ps-accent-tint); color: var(--ps-accent-ui); } .ps-empty strong, .ps-grid__empty strong, .ps-minelist__empty strong, .ps-empty__title { color: var(--ps-text-1); font-size: var(--ps-fs-lg); font-weight: var(--ps-fw-semibold); } .ps-empty__body { max-inline-size: var(--ps-prose-max); color: var(--ps-text-2); } .ps-empty--error { border-style: solid; border-color: var(--ps-error-edge); background-color: var(--ps-error-tint); } .ps-empty--error > .ps-icon, .ps-empty--error .ps-empty__icon { background-color: var(--ps-error-tint); color: var(--ps-error-text); } /* --- toasts ------------------------------------------------------------ The one deliberate exception to "everything below the shared nav": a toast must outrank the shared upgrade modal (1000000, external) or a confirmation is invisible behind it. */ .ps-toasts { position: fixed; inset-inline: var(--ps-s-4); inset-block-end: max(var(--ps-s-5), env(safe-area-inset-bottom)); z-index: var(--ps-z-toast); display: flex; flex-direction: column; align-items: center; gap: var(--ps-s-2); pointer-events: none; } .ps-toast { display: flex; align-items: center; gap: var(--ps-s-3); inline-size: fit-content; max-inline-size: 100%; padding: var(--ps-s-3) var(--ps-s-4); border: var(--ps-bw) solid var(--ps-border-strong); border-radius: var(--ps-r-3); background-color: var(--ps-surface-2); color: var(--ps-text-1); font-size: var(--ps-fs-sm); box-shadow: var(--ps-e-3); pointer-events: auto; animation: ps-toast-in var(--ps-t-spring) both; } .ps-toast--success { border-color: var(--ps-success-edge); background-color: var(--ps-success-tint); } .ps-toast--success > .ps-icon { color: var(--ps-success-text); } .ps-toast--error { border-color: var(--ps-error-edge); background-color: var(--ps-error-tint); } .ps-toast--error > .ps-icon { color: var(--ps-error-text); } .ps-toast--warning { border-color: var(--ps-warning-edge); background-color: var(--ps-warning-tint); } .ps-toast--warning > .ps-icon { color: var(--ps-warning-text); } @keyframes ps-toast-in { from { opacity: 0; transform: translateY(var(--ps-s-4)); } to { opacity: 1; transform: none; } } /* The three parts js/modal.js builds inside a toast. None had a style, so the message did not shrink (a long one pushed the close button off the end), the action read as body text and the dismiss button was an unstyled 16px glyph. */ .ps-toast__msg { flex: 1 1 auto; min-inline-size: 0; } .ps-toast__action { flex: none; min-height: var(--ps-s-7); padding-inline: var(--ps-s-2); border-radius: var(--ps-r-1); color: var(--ps-accent-text); font-size: var(--ps-fs-sm); font-weight: var(--ps-fw-semibold); text-decoration: underline; } .ps-toast__action:hover { color: var(--ps-text-1); } .ps-toast__close { display: grid; place-items: center; flex: none; inline-size: var(--ps-s-6); block-size: var(--ps-s-6); border-radius: var(--ps-r-circle); color: var(--ps-text-3); transition: background-color var(--ps-t-fast), color var(--ps-t-fast); } .ps-toast__close:hover { background-color: var(--ps-surface-3); color: var(--ps-text-1); } /* Small paint, 44px target, as in §5. */ .ps-toast__action, .ps-toast__close { position: relative; } .ps-toast__action::after, .ps-toast__close::after { content: ""; position: absolute; inset-block: calc((var(--ps-tap-min) - var(--ps-s-6)) / -2); inset-inline: 0; } /* The close is 24px SQUARE, so `inset-inline: 0` left the target 44 tall and only 24 wide — measured `button.ps-toast__close 24x24` in the state sweep, the one control in the product still under the floor on an axis. The vertical overhang above is enough for a row of side-by-side controls; a square icon needs the horizontal one too. The overhang is asymmetric on purpose, and both halves are bounded by geometry that already exists: end −16px, exactly .ps-toast's own padding-inline, so it stops at the toast edge and never reaches the surface behind it; start −8px, one step INSIDE the 12px flex gap, so it cannot touch .ps-toast__action's own overlay (which does not extend rightwards). 24 + 8 + 16 = 48px of target under a 24px circle. */ .ps-toast__close::after { inset-inline: calc(var(--ps-s-2) * -1) calc(var(--ps-s-4) * -1); } /* modal.js adds .is-leaving 300ms before it removes the node. Unstyled, a toast vanished on a frame boundary; --ps-dur-4 (280ms) fits inside that window and collapses to 1ms under reduced motion like everything else. */ .ps-toast.is-leaving { animation: ps-toast-out var(--ps-dur-4) var(--ps-ease-in) both; pointer-events: none; } @keyframes ps-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(var(--ps-s-2)) scale(0.98); } } /* ========================================================================== 13. UTILITIES ========================================================================== */ /* The clip-path pattern, not `display:none` — the content stays in the accessibility tree, which is the entire point of every use of it in the partials. */ .ps-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Every timestamp in the product goes through js/render.js timeEl(), which emits . Tabular figures so a column of "3 days ago" / "12 Jul" does not jitter as the list refreshes. */ .ps-when { color: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; } /* svg is display:block from the reset, which is right for imagery and wrong for a glyph sitting in a line of text. */ .ps-icon { display: inline-block; flex: none; vertical-align: middle; fill: none; } /* The theme toggle ships both glyphs and shows the one that describes what the click will DO, resolved by the same cascade tokens.css uses. */ .ps-icon--light-only { display: none; } .ps-icon--dark-only { display: inline-block; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ps-icon--light-only { display: inline-block; } :root:not([data-theme="dark"]) .ps-icon--dark-only { display: none; } } :root[data-theme="light"] .ps-icon--light-only { display: inline-block; } :root[data-theme="light"] .ps-icon--dark-only { display: none; } :root[data-theme="dark"] .ps-icon--light-only { display: none; } :root[data-theme="dark"] .ps-icon--dark-only { display: inline-block; } /* Print: the aurora, the sidebar and every dialog are screen furniture. */ @media print { .ps-body::before, .ps-sidebar, .ps-dialog, .ps-pagination, .ps-filters { display: none; } .ps-shell { display: block; } .ps-card { break-inside: avoid; } }