/* * Pluripo Builder (web shell) chrome — the WEB-SHELL-ONLY pg-* surfaces. * * Styled ENTIRELY off the brand tokens in tokens.css (--color-*, --space-*, * --radius-*, --font-*, --shadow-*, --status-*, --glow-*). It NEVER introduces or * edits a palette hex — the mirror-by-hand invariant means the canonical sheets * (tokens.css / app.css, copied verbatim from desktop/ui) own every color. Tints * and rings are composed from the tokens via color-mix, never a forked literal. * * Dark-first; light mode follows from the token swap on . Status * uses the five brand tones (building / live / checking / error / stopped), each * paired with a word and a shape — color is never the only signal. Motion is * restrained (~120–150ms eases, a 1px hover lift) and fully disabled under * prefers-reduced-motion, matching the brand. */ /* ============================================================ */ /* Shared keyframes (DESIGN.md): pl-pulse (live/working dots), */ /* pl-spin (busy spinners). Both honor reduced-motion below. */ /* ============================================================ */ @keyframes pl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes pl-spin { to { transform: rotate(360deg); } } @keyframes pl-fade { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ */ /* App shell: a left nav rail beside the view body. */ /* ============================================================ */ .pg-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--color-page-bg); color: var(--color-text-primary); font-family: var(--font-sans); } /* --shell overrides the base column to a row so the rail sits beside the body (the bare test host page uses the base column). */ .pg-app--shell { flex-direction: row; } .pg-shell-nav { flex: 0 0 auto; display: flex; min-height: 0; } .pg-shell-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .pg-identity { font-size: var(--text-sm); color: var(--color-text-secondary); } .pg-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); } .pg-workspace { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .pg-chip-mount { flex: 0 0 auto; padding: var(--space-4) var(--space-5) 0; } .pg-workspace .pg-main { flex: 1 1 auto; } /* Composer-area usage indicator — a quiet "close to limit" cue at the bottom of the workspace, just below the composer. Hidden until usage is >= 85%. */ .pg-usage-indicator-mount { flex: 0 0 auto; padding: 0 var(--space-5) var(--space-3); } .pg-usage-indicator { display: inline-flex; align-items: center; gap: var(--space-3); max-width: 22rem; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: var(--border-hairline); background: var(--color-surface); color: var(--color-text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); } .pg-usage-indicator[hidden] { display: none; } .pg-usage-indicator-label { flex: 0 0 auto; white-space: nowrap; } .pg-usage-indicator-track { flex: 1 1 auto; min-width: 5rem; height: 0.35rem; border-radius: var(--radius-pill); background: var(--color-surface-raised); overflow: hidden; } .pg-usage-indicator-fill { height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--color-accent); } .pg-chat { min-width: 0; min-height: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-page-bg); } .pg-side { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--space-5); overflow: auto; } @media (max-width: 900px) { .pg-main { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ */ /* View stack — the router shows one [data-view] at a time. */ /* ============================================================ */ .pg-views { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; } .pg-view { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .pg-view[hidden] { display: none; } .pg-view--web .pg-main { flex: 1 1 auto; min-height: 0; } .pg-view--chat { padding: var(--space-5); } .pg-chat--home { flex: 1 1 auto; width: 100%; max-width: 56rem; margin: 0 auto; } /* The Builder entry scrolls and centers its describe-first column. */ .pg-view--projects { overflow-y: auto; } .pg-projects-mount { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* ============================================================ */ /* Left navigation rail. */ /* ============================================================ */ .pg-sidebar { flex: 0 0 16.5rem; width: 16.5rem; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-3); border-right: var(--border-hairline); background: var(--color-surface); overflow: hidden; } /* The brand is a home button — reset the native button chrome, keep the wordmark typography, and add a calm hover/focus affordance. */ .pg-sidebar-brand { appearance: none; border: 0; background: transparent; color: var(--color-text-primary); display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: var(--tracking-tight); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); cursor: pointer; align-self: flex-start; } .pg-sidebar-brand:hover { background: var(--color-surface-raised); } .pg-sidebar-brand:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } /* Non-interactive "Public Beta" micro-label beside the wordmark. The brand's mono-uppercase voice + a subtle brand-tinted (violet by default) chip — calm, never a warning. Tints composed from --color-brand via color-mix so it tracks the accent and swaps with the light/dark token set; shrinks the tracking and hides before it can crowd the rail at narrow widths. */ .pg-beta { flex: 0 0 auto; display: inline-flex; align-items: center; margin-left: var(--space-1); padding: 2px 6px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--color-brand) 72%, var(--color-text-secondary)); background: color-mix(in srgb, var(--color-brand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-brand) 28%, transparent); } @media (max-width: 900px) { .pg-beta { display: none; } } /* Brand tile carries the always-on mark + a faint brand glow. The mark's SVG strokes/fills use currentColor, so the tile's ink is the on-brand color. */ .pg-sidebar-brand-tile { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--color-brand-mark-bg); color: var(--color-brand-mark-fg); box-shadow: var(--glow-violet-sm); } .pg-sidebar-brand-tile svg { width: 0.9rem; height: 0.9rem; } /* Chat / Build mode switcher — a two-segment control under the brand. */ .pg-sidebar-modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-md); background: var(--color-surface-raised); border: var(--border-hairline); } .pg-sidebar-mode { appearance: none; border: 1px solid transparent; background: transparent; color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; text-align: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .pg-sidebar-mode:hover { color: var(--color-text-primary); } .pg-sidebar-mode.is-active { background: var(--color-brand); color: var(--color-on-brand); box-shadow: var(--glow-violet-sm); } .pg-sidebar-mode:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } .pg-sidebar-new { appearance: none; border: 0; background: var(--color-brand); color: var(--color-on-brand); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-base); text-align: left; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; box-shadow: var(--glow-violet-sm); transition: background 120ms ease, transform 120ms ease; } .pg-sidebar-new[hidden] { display: none; } .pg-sidebar-new:hover { background: var(--color-brand-hover); transform: translateY(-1px); } .pg-sidebar-new:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } /* The scrollable middle holds the history sections + the product entry. */ .pg-sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-1); } .pg-sidebar-section { display: flex; flex-direction: column; gap: var(--space-1); } .pg-sidebar-heading { margin: 0; padding: var(--space-1) var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-faint); } .pg-sidebar-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); } /* Chat-history rows + nudge (filled by chats.js). */ .pg-sidebar-nudge { appearance: none; border: var(--border-hairline); background: color-mix(in srgb, var(--color-brand) 8%, transparent); color: var(--color-link); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; text-align: left; padding: var(--space-3); border-radius: var(--radius-md); cursor: pointer; } .pg-sidebar-nudge:hover { text-decoration: underline; } .pg-sidebar-nudge:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } .pg-sidebar-list-item { margin: 0; padding: 0; } .pg-history-item { appearance: none; border: 1px solid transparent; background: transparent; color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--text-sm); text-align: left; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .pg-history-item:hover { background: var(--color-surface-raised); color: var(--color-text-primary); } .pg-history-item:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: -2px; } .pg-history-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pg-history-when { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); } .pg-sidebar-empty { margin: 0; padding: var(--space-3); font-size: var(--text-sm); color: var(--color-text-faint); list-style: none; border: 1px dashed var(--color-rule); border-radius: var(--radius-md); text-align: center; } /* Account block (bottom). */ .pg-sidebar-account { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-hairline); } /* Profile trigger — the always-visible row that opens the popover. */ .pg-sidebar-profile { appearance: none; border: 1px solid transparent; background: transparent; display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; padding: var(--space-2); border-radius: var(--radius-md); cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .pg-sidebar-profile:hover { background: var(--color-surface-raised); } .pg-sidebar-profile:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 1px; } .pg-sidebar-profile[aria-expanded="true"] { background: var(--color-surface-raised); border-color: var(--color-rule); } .pg-sidebar-avatar { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: var(--radius-circle); background: color-mix(in srgb, var(--color-brand) 18%, transparent); border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent); color: var(--color-accent); font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); } .pg-sidebar-ident-text { display: flex; flex-direction: column; min-width: 0; } .pg-sidebar-identity { font-weight: 600; font-size: var(--text-sm); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Account popover — anchored to the account block, opening UPWARD. */ .pg-sidebar-account-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--space-1)); z-index: 20; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); border: var(--border-default); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-lg); } .pg-sidebar-account-menu[hidden] { display: none; } .pg-sidebar-account-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-2); border-bottom: var(--border-hairline); margin-bottom: var(--space-1); } .pg-sidebar-account-email { font-size: var(--text-xs); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pg-sidebar-plan-badge { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-accent); background: color-mix(in srgb, var(--color-brand) 14%, transparent); border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent); padding: 0 var(--space-2); border-radius: var(--radius-pill); } .pg-sidebar-plan-badge[hidden] { display: none; } .pg-sidebar-account-item { appearance: none; border: 1px solid transparent; background: transparent; color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; text-align: left; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .pg-sidebar-account-item:hover { background: var(--color-surface-raised); color: var(--color-text-primary); } .pg-sidebar-account-item:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: -2px; } @media (max-width: 720px) { .pg-sidebar { flex-basis: 13rem; width: 13rem; } } /* ============================================================ */ /* Pluripo Builder entry — describe-first landing. */ /* ============================================================ */ .pg-entry { width: 100%; max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; padding: var(--space-12) var(--space-6) var(--space-16); } .pg-entry-hero { display: flex; flex-direction: column; gap: var(--space-3); } .pg-entry-eyebrow { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-accent); } .pg-entry-headline, .pg-projects-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); text-wrap: balance; } .pg-entry-headline-clause { color: var(--color-text-secondary); } .pg-entry-subhead { margin: 0; max-width: var(--measure); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-text-secondary); } /* Inline error (turn failed to start) — recoverable, muted, never alarming. */ .pg-entry-error { margin: var(--space-6) 0 0; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--status-error-bg); color: var(--status-error-text); border: 1px solid color-mix(in srgb, var(--status-error-dot) 40%, transparent); font-size: var(--text-sm); font-weight: 500; } .pg-entry-error::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-circle); background: var(--status-error-dot); } .pg-entry-error[hidden] { display: none; } /* Describe box (the hero input). */ .pg-entry-describe { position: relative; margin-top: var(--space-8); } .pg-entry-input { width: 100%; min-height: 8rem; resize: vertical; padding: var(--space-5) 8.5rem var(--space-5) var(--space-5); border-radius: var(--radius-lg); border: var(--border-default); background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--leading-snug); box-shadow: var(--shadow-sm); } .pg-entry-input::placeholder { color: var(--color-text-faint); } .pg-entry-input:focus-visible { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 22%, transparent); } .pg-entry-build { position: absolute; right: var(--space-3); bottom: var(--space-3); appearance: none; border: 0; display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-brand); color: var(--color-on-brand); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-base); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; transition: background 120ms ease, transform 120ms ease; } .pg-entry-build-glyph { font-family: var(--font-mono); font-size: var(--text-sm); opacity: 0.8; } .pg-entry-build:hover { background: var(--color-brand-hover); transform: translateY(-1px); } .pg-entry-build:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } .pg-entry-build:disabled { background: var(--color-surface-raised); color: var(--color-text-faint); cursor: default; transform: none; } .pg-entry-hint { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-faint); } .pg-entry-hint-ex { color: var(--color-text-secondary); } /* Gallery divider. */ .pg-entry-divider { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-10) 0 var(--space-6); } .pg-entry-divider-rule { flex: 1 1 auto; height: 1px; background: var(--color-rule); } .pg-entry-divider-label { flex: 0 0 auto; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-faint); white-space: nowrap; } /* Gallery (grouped job cards). */ .pg-entry-gallery { display: flex; flex-direction: column; gap: var(--space-6); } .pg-gallery-group { display: flex; flex-direction: column; gap: var(--space-3); } .pg-gallery-group-label { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-faint); } .pg-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-3); } .pg-gallery-card { appearance: none; display: flex; flex-direction: column; gap: var(--space-2); text-align: left; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: var(--border-hairline); color: inherit; cursor: pointer; font-family: var(--font-sans); transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } .pg-gallery-card:hover { border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border)); box-shadow: var(--shadow-md); transform: translateY(-1px); } .pg-gallery-card:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; border-color: var(--color-brand); } .pg-gallery-card-glyph { font-size: 1.3rem; line-height: 1; } .pg-gallery-card-job { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-text-primary); } .pg-gallery-card-sub { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-secondary); } /* "Build anything" card — more prominent than the seed cards. */ .pg-entry-anything { appearance: none; display: flex; align-items: center; gap: var(--space-4); text-align: left; margin-top: var(--space-6); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-brand) 9%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-brand) 32%, transparent); color: inherit; cursor: pointer; font-family: var(--font-sans); transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } .pg-entry-anything:hover { border-color: color-mix(in srgb, var(--color-brand) 55%, transparent); box-shadow: var(--shadow-md); transform: translateY(-1px); } .pg-entry-anything:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } .pg-entry-anything-tile { flex: 0 0 auto; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--color-brand); color: var(--color-on-brand); font-size: 1.35rem; box-shadow: var(--glow-violet-sm); } .pg-entry-anything-text { display: flex; flex-direction: column; gap: var(--space-1); } .pg-entry-anything-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text-primary); } .pg-entry-anything-sub { font-size: var(--text-sm); color: var(--color-text-secondary); } /* "Your projects" — demoted, hidden entirely when empty. */ .pg-entry-projects { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-12); } .pg-entry-projects[hidden] { display: none; } .pg-entry-projects-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .pg-entry-projects-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); } .pg-entry-projects-count { font-size: var(--text-sm); color: var(--color-text-faint); } .pg-entry-note { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); min-height: 1.25rem; } /* Saved-project cards (reused by "Your projects"). */ .pg-projects-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-3); } .pg-project-card { position: relative; display: flex; align-items: stretch; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: var(--border-hairline); transition: border-color 120ms ease, transform 120ms ease; } .pg-project-card:hover { border-color: color-mix(in srgb, var(--color-brand) 40%, var(--color-border)); transform: translateY(-1px); } .pg-project-open { appearance: none; flex: 1 1 auto; border: 0; background: transparent; color: inherit; text-align: left; display: flex; flex-direction: column; gap: var(--space-1); cursor: pointer; font-family: var(--font-sans); } .pg-project-open:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; border-radius: var(--radius-sm); } .pg-project-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-text-primary); word-break: break-word; } .pg-project-modified { font-size: var(--text-xs); color: var(--color-text-faint); } .pg-project-delete { appearance: none; align-self: flex-start; border: 1px solid transparent; background: transparent; color: var(--color-text-faint); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .pg-project-delete:hover { background: var(--status-error-bg); color: var(--status-error-text); border-color: color-mix(in srgb, var(--status-error-dot) 40%, transparent); } .pg-project-delete:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--status-error-dot); outline-offset: 2px; } /* Narrow widths: the Build button collapses to a bare glyph square. */ @media (max-width: 560px) { .pg-entry { padding: var(--space-8) var(--space-4) var(--space-12); } .pg-entry-input { padding-right: var(--space-5); padding-bottom: 3.25rem; } .pg-entry-build { padding: var(--space-2); width: 2.25rem; justify-content: center; } .pg-entry-build-label { display: none; } .pg-gallery-grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ */ /* Correctable build chip + change menu. */ /* ============================================================ */ .pg-chip { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: var(--border-hairline); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; } .pg-chip[hidden] { display: none; } .pg-chip[data-state="committed"] { background: var(--status-building-bg); color: var(--status-building-text); border-color: color-mix(in srgb, var(--status-building-dot) 35%, transparent); } .pg-chip[data-state="experimental"] { background: var(--status-checking-bg); color: var(--status-checking-text); border-color: color-mix(in srgb, var(--status-checking-dot) 35%, transparent); } /* The visitor asked to switch and the server has not confirmed: the caution tone, because nothing has changed yet — it takes effect on their next message. */ .pg-chip[data-state="pending"] { background: var(--status-checking-bg); color: var(--status-checking-text); border-color: color-mix(in srgb, var(--status-checking-dot) 35%, transparent); } .pg-chip[data-state="correcting"] { background: color-mix(in srgb, var(--color-brand) 12%, transparent); color: var(--color-brand); border-color: color-mix(in srgb, var(--color-brand) 30%, transparent); } .pg-chip-dot { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-circle); } .pg-chip[data-state="committed"] .pg-chip-dot { background: var(--status-building-dot); animation: pl-pulse 1.4s ease-in-out infinite; } .pg-chip[data-state="experimental"] .pg-chip-dot { background: var(--status-checking-dot); } /* Hollow, not filled: the switch is requested, not applied. */ .pg-chip[data-state="pending"] .pg-chip-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--status-checking-dot); } .pg-chip[data-state="correcting"] .pg-chip-dot { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--color-brand); font-weight: 700; } .pg-chip-change { appearance: none; border: 0; border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent); background: transparent; color: inherit; font: inherit; font-weight: 600; margin-left: var(--space-1); padding: 0 var(--space-2); cursor: pointer; } .pg-chip-change:hover { text-decoration: underline; } .pg-chip-change:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; border-radius: var(--radius-xs); } .pg-chip-change[hidden] { display: none; } .pg-chip-menu { position: absolute; left: 0; top: calc(100% + var(--space-2)); z-index: 20; width: 15.5rem; padding: var(--space-2); border-radius: var(--radius-lg); background: var(--color-surface); border: var(--border-default); box-shadow: var(--shadow-lg); color: var(--color-text-primary); } .pg-chip-menu[hidden] { display: none; } .pg-chip-menu-title { margin: 0; padding: var(--space-2) var(--space-3) var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-faint); } .pg-chip-menu-item { appearance: none; border: 0; background: transparent; width: 100%; display: flex; align-items: center; gap: var(--space-2); text-align: left; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-primary); cursor: pointer; transition: background 120ms ease; } .pg-chip-menu-item:hover { background: var(--color-surface-raised); } .pg-chip-menu-item:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: -2px; background: var(--color-surface-raised); } .pg-chip-menu-item[aria-current="true"] { color: var(--color-link); font-weight: 600; } /* ============================================================ */ /* Settings modal (body-level overlay + dialog). */ /* ============================================================ */ .pg-modal-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--space-6); background: color-mix(in srgb, var(--neutral-d-950) 55%, transparent); backdrop-filter: blur(3px); } .pg-modal-overlay[hidden] { display: none; } .pg-modal-dialog { display: flex; flex-direction: column; width: 54rem; max-width: 100%; max-height: 88vh; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-surface); border: var(--border-hairline); box-shadow: var(--shadow-lg); } .pg-modal-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: var(--border-hairline); } .pg-modal-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); } .pg-modal-close { appearance: none; border: 0; background: transparent; color: var(--color-text-secondary); font-size: var(--text-2xl); line-height: 1; padding: var(--space-1); border-radius: var(--radius-xs); cursor: pointer; transition: color 120ms ease; } .pg-modal-close:hover { color: var(--color-text-primary); } .pg-modal-close:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } .pg-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .pg-signin { text-decoration: none; } .pg-signin:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } /* ============================================================ */ /* Builder live-view column — the hero. Status strip → maturity */ /* chip → live-view body (adapters + overlays) → recap → banner.*/ /* ============================================================ */ .pg-side-preview { flex: 1 1 auto; min-height: 0; display: flex; } .pg-side-export { flex: 0 0 auto; position: relative; } .pg-live { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--color-surface); border: var(--border-hairline); box-shadow: var(--shadow-md); overflow: hidden; } /* ── Status strip — a row tinted by [data-tone], mapped to the brand status tones (building/live/checking/error/stopped). Color is never the only signal: the label always names the state, and the dot pulses while live. ── */ .pg-status-strip { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: var(--border-hairline); font-size: var(--text-sm); font-weight: 600; } .pg-status-strip[hidden] { display: none; } /* The tone dot + label, and the pane's own controls, as two groups. The strip can outlive the state machine: a reopened project has no live state yet, but its files are still readable, so the strip stands with only its right group. */ .pg-status-main { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .pg-status-main[hidden] { display: none; } .pg-status-actions { display: flex; align-items: center; gap: var(--space-3); flex: none; } /* No live state to report (a reopened project): the strip is a plain rule, not a tinted status band. */ .pg-status-strip[data-tone="idle"] { color: var(--color-text-secondary); background: var(--color-surface); } .pg-status-dot { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-circle); background: currentColor; } .pg-status-strip[data-pulse="true"] .pg-status-dot { animation: pl-pulse 1.4s ease-in-out infinite; } .pg-status-strip[data-tone="building"] { color: var(--status-building-text); background: var(--status-building-bg); } .pg-status-strip[data-tone="building"] .pg-status-dot { background: var(--status-building-dot); } .pg-status-strip[data-tone="live"] { color: var(--status-live-text); background: var(--status-live-bg); } .pg-status-strip[data-tone="live"] .pg-status-dot { background: var(--status-live-dot); } .pg-status-strip[data-tone="checking"] { color: var(--status-checking-text); background: var(--status-checking-bg); } .pg-status-strip[data-tone="checking"] .pg-status-dot { background: var(--status-checking-dot); } .pg-status-strip[data-tone="error"] { color: var(--status-error-text); background: var(--status-error-bg); } .pg-status-strip[data-tone="error"] .pg-status-dot { background: var(--status-error-dot); } .pg-status-strip[data-tone="stopped"] { color: var(--status-stopped-text); background: var(--status-stopped-bg); } /* The stopped dot is a square — a distinct shape, not just a muted color. */ .pg-status-strip[data-tone="stopped"] .pg-status-dot { background: var(--status-stopped-dot); border-radius: var(--radius-xs); } /* "Open in tab ↗" rides the right edge of the strip, only while live. */ .pg-preview-open { margin-left: auto; font-size: var(--text-sm); font-weight: 500; color: var(--color-link); text-decoration: none; } .pg-preview-open[hidden] { display: none; } .pg-preview-open:hover { color: var(--color-link-hover); text-decoration: underline; } .pg-preview-open:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; border-radius: var(--radius-sm); } /* ── Preview | Code — the right pane's view switch. A segmented track whose active pill is LIGHTER than the track in both modes (that inverts the usual surface/raised relationship on dark, hence the explicit dark override). The neutrals are opaque so the control stays legible on any status tone. ── */ .pg-view-toggle { display: flex; gap: 3px; padding: 3px; background: var(--color-surface-raised); border: var(--border-hairline); border-radius: var(--radius-sm); } .pg-view-toggle[hidden] { display: none; } .pg-view-toggle-btn { border: none; cursor: pointer; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; padding: var(--space-1) var(--space-3); border-radius: var(--radius-xs); background: transparent; color: var(--color-text-secondary); transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease; } .pg-view-toggle-btn[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-sm); } .pg-view-toggle-btn:hover:not([aria-pressed="true"]) { color: var(--color-text-primary); } .pg-view-toggle-btn:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 1px; } :root[data-mode="dark"] .pg-view-toggle { background: var(--color-surface); } :root[data-mode="dark"] .pg-view-toggle-btn[aria-pressed="true"] { background: var(--color-border); } @media (prefers-reduced-motion: reduce) { .pg-view-toggle-btn { transition: none; } } /* ── Maturity / reliability chip (low-emphasis whisper; never alarming). ── */ .pg-maturity { flex: 0 0 auto; padding: var(--space-2) var(--space-4); border-bottom: var(--border-hairline); } .pg-maturity[hidden] { display: none; } .pg-maturity-chip { appearance: none; border: 0; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; cursor: pointer; } .pg-maturity-chip:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } .pg-maturity[data-tone="live"] .pg-maturity-chip { color: var(--status-live-text); background: var(--status-live-bg); } .pg-maturity[data-tone="live"] .pg-maturity-dot { background: var(--status-live-dot); } .pg-maturity[data-tone="building"] .pg-maturity-chip { color: var(--status-building-text); background: var(--status-building-bg); } .pg-maturity[data-tone="building"] .pg-maturity-dot { background: var(--status-building-dot); } .pg-maturity[data-tone="checking"] .pg-maturity-chip { color: var(--status-checking-text); background: var(--status-checking-bg); } .pg-maturity[data-tone="checking"] .pg-maturity-dot { background: var(--status-checking-dot); } .pg-maturity-dot { width: 0.45rem; height: 0.45rem; border-radius: var(--radius-circle); } .pg-maturity-info { opacity: 0.7; } .pg-maturity-panel { margin-top: var(--space-2); max-width: var(--measure); } .pg-maturity-panel[hidden] { display: none; } .pg-maturity-meaning { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-primary); } .pg-maturity-honesty { margin: 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-secondary); } /* ── Live-view body (one adapter shows at a time; overlays sit on top). ── */ .pg-live-body { position: relative; flex: 1 1 auto; min-height: 360px; overflow: hidden; background: var(--color-page-bg); } .pg-adapter { position: absolute; inset: 0; overflow: auto; } .pg-adapter[hidden] { display: none; } .pg-adapter-empty { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--space-6); text-align: center; color: var(--color-text-faint); font-size: var(--text-sm); } .pg-adapter-empty[hidden] { display: none; } /* Web / mobile adapter (the sandboxed iframe). */ .pg-bezel { position: relative; width: 100%; height: 100%; } .pg-adapter-web[data-variant="mobile"] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); } .pg-adapter-web[data-variant="mobile"] .pg-bezel { flex: 0 0 auto; width: 280px; max-width: 80%; height: 70%; min-height: 360px; border-radius: 28px; border: 8px solid var(--neutral-d-800); overflow: hidden; box-shadow: var(--shadow-lg); } .pg-preview-iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; /* A fixed white canvas behind untrusted preview content in BOTH themes. */ background: var(--neutral-0); } .pg-preview-iframe[hidden] { display: none; } .pg-preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); height: 100%; padding: var(--space-6); text-align: center; color: var(--color-text-faint); font-size: var(--text-sm); } .pg-preview-empty[hidden] { display: none; } .pg-preview-empty-text { margin: 0; max-width: 40ch; line-height: var(--leading-snug); } .pg-preview-empty-code { appearance: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; padding: var(--space-1) var(--space-3); color: var(--color-text-secondary); font-family: inherit; font-size: var(--text-sm); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast); } .pg-preview-empty-code[hidden] { display: none; } .pg-preview-empty-code:hover { color: var(--color-accent); border-color: var(--color-accent); } .pg-preview-empty-code:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .pg-preview-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--color-page-bg); color: var(--color-text-secondary); font-size: var(--text-sm); } .pg-preview-loading[hidden] { display: none; } .pg-bezel-caption { margin: 0; max-width: 42ch; text-align: center; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--color-text-secondary); } .pg-bezel-caption[hidden] { display: none; } /* Plots adapter (data analysis). */ .pg-plots-list { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); } .pg-plots-list[hidden] { display: none; } .pg-plot-card { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); border: var(--border-hairline); } .pg-plot-value { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); color: var(--color-text-primary); } .pg-plot-label { font-size: var(--text-sm); color: var(--color-text-secondary); } .pg-plot-chart { display: block; width: 100%; height: 64px; margin-top: var(--space-2); } .pg-plot-chart-line { stroke: var(--color-brand); stroke-width: 2.5; } .pg-plot-nodata { margin-top: var(--space-2); align-self: flex-start; display: inline-block; padding: var(--space-1) var(--space-3); border: 1px dashed var(--color-rule); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--color-text-faint); } .pg-plot-table { display: flex; flex-direction: column; font-size: var(--text-sm); } .pg-plot-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-rule); color: var(--color-text-secondary); } .pg-plot-row-head { border-top: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); } .pg-plot-cell { overflow: hidden; text-overflow: ellipsis; } .pg-plot-artifact { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-brand) 9%, transparent); border: 1px solid color-mix(in srgb, var(--color-brand) 28%, transparent); font-size: var(--text-sm); color: var(--color-accent); } /* Request adapter (API). */ .pg-request-list { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); } .pg-request-list[hidden] { display: none; } .pg-request-rowwrap { display: flex; flex-direction: column; } .pg-request-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); border: var(--border-hairline); } .pg-request-method { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--color-surface-raised); color: var(--color-text-secondary); } .pg-request-path { flex: 1 1 auto; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; } .pg-request-status { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; } .pg-request-status[data-kind="2xx"] { color: var(--status-live-text); } .pg-request-status[data-kind="4xx"] { color: var(--status-checking-text); } .pg-request-status[data-kind="5xx"] { color: var(--status-error-text); } .pg-request-toggle { appearance: none; border: 0; background: transparent; color: var(--color-text-faint); font-family: var(--font-mono); cursor: pointer; } .pg-request-preview { margin: var(--space-1) 0 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-raised); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-secondary); white-space: pre-wrap; word-break: break-word; } .pg-request-preview[hidden] { display: none; } /* Stdout adapter (CLI / script / fallback). */ .pg-stdout-console { margin: 0; height: calc(100% - 2.5rem); min-height: 200px; overflow: auto; padding: var(--space-4); /* A terminal is intentionally always-dark in both themes — composed from the brand's darkest neutral + a light text mixed from the --neutral-0 primitive (never a forked palette literal). */ background: var(--neutral-d-950); color: color-mix(in srgb, var(--neutral-0) 86%, transparent); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-snug); white-space: pre-wrap; word-break: break-word; } .pg-stdout-console[hidden] { display: none; } .pg-stdout-out { display: block; color: color-mix(in srgb, var(--neutral-0) 86%, transparent); } .pg-stdout-err { display: block; color: var(--status-error-dot); } .pg-stdout-banner { padding: var(--space-2) var(--space-4); background: var(--status-error-bg); color: var(--status-error-text); font-size: var(--text-sm); font-weight: 600; } .pg-stdout-banner[hidden] { display: none; } .pg-stdout-advisory { padding: var(--space-2) var(--space-4); background: var(--status-checking-bg); color: var(--status-checking-text); font-size: var(--text-sm); line-height: var(--leading-snug); } .pg-stdout-advisory[hidden] { display: none; } .pg-stdout-files { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: var(--border-hairline); } .pg-stdout-files[hidden] { display: none; } .pg-stdout-files-label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); } .pg-stdout-file { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-brand) 12%, transparent); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); } /* ── Cold-start mask — single honest "building" state. ── */ .pg-coldstart { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8); text-align: center; background: color-mix(in srgb, var(--color-page-bg) 92%, transparent); backdrop-filter: blur(3px); animation: pl-fade 250ms ease; } .pg-coldstart[hidden] { display: none; } .pg-coldstart-mark { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--color-brand); box-shadow: var(--glow-violet-sm); animation: pl-pulse 1.6s ease-in-out infinite; } .pg-coldstart-headline { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text-primary); } .pg-coldstart-subhead { font-size: var(--text-sm); color: var(--color-text-secondary); } /* ── Terminal error panel (honest, never loud). ── */ .pg-live-error { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-8); text-align: center; background: var(--color-surface); } .pg-live-error[hidden] { display: none; } .pg-live-error-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--status-error-bg); border: 1px solid color-mix(in srgb, var(--status-error-dot) 40%, transparent); color: var(--status-error-text); font-weight: 600; font-size: var(--text-lg); } .pg-live-error-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text-primary); } .pg-live-error-body { max-width: 44ch; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-secondary); } /* ── Stopped nudge (the last render freezes behind it). ── */ .pg-live-stopped { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--space-6); background: color-mix(in srgb, var(--color-page-bg) 50%, transparent); } .pg-live-stopped[hidden] { display: none; } .pg-live-stopped-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface); border: var(--border-hairline); box-shadow: var(--shadow-lg); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); } .pg-live-stopped-pill::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-circle); background: var(--status-stopped-dot); } /* ── Code view — the project's saved files, read-only. Sits ABOVE the adapters and the overlays (z 4 > 3): while it is open the overlays are suppressed outright, so a broken build never covers the source a person came to read. ── */ .pg-code { position: absolute; inset: 0; z-index: 4; display: flex; min-height: 0; background: var(--color-surface); } .pg-code[hidden] { display: none; } /* File tree — quieter than the editor (page-bg against the editor's surface). */ .pg-code-tree { flex: 0 0 12.125rem; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--color-page-bg); border-right: var(--border-hairline); } .pg-code-tree[hidden] { display: none; } .pg-code-eyebrow { flex: 0 0 auto; padding: var(--space-3) var(--space-3) var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); } .pg-code-rows { display: flex; flex-direction: column; padding: 0 var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); } /* Rows are buttons: a directory toggles, a file opens. Depth is the only indent mechanism — no tree lines, no guides. */ .pg-code-dir, .pg-code-file { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-1) var(--space-2); padding-left: calc(var(--space-2) + var(--pg-code-indent, 0px)); border: none; border-radius: var(--radius-xs); background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--color-text-secondary); } .pg-code-dir[data-depth="1"], .pg-code-file[data-depth="1"] { --pg-code-indent: 0.875rem; } .pg-code-dir[data-depth="2"], .pg-code-file[data-depth="2"] { --pg-code-indent: 1.75rem; } .pg-code-dir[data-depth="3"], .pg-code-file[data-depth="3"] { --pg-code-indent: 2.625rem; } .pg-code-dir:hover, .pg-code-file:hover { background: var(--color-surface-raised); color: var(--color-text-primary); } .pg-code-dir:focus-visible, .pg-code-file:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: -2px; } .pg-code-chevron { flex: 0 0 auto; color: var(--color-text-faint); } .pg-code-file-name, .pg-code-dir-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The open file: the brand's selection pair, so it tracks the chosen accent. */ .pg-code-file[aria-current="page"] { background: var(--color-selection-bg); color: var(--color-selection-text); font-weight: 500; } :root[data-mode="dark"] .pg-code-file[aria-current="page"] { background: color-mix(in srgb, var(--color-brand) 18%, var(--color-surface)); color: var(--accent-200); } /* "Modified by the latest build" — the caution tone's dot, paired with a title so the mark is never color alone. */ .pg-code-modified { flex: 0 0 auto; margin-left: auto; width: 0.375rem; height: 0.375rem; border-radius: var(--radius-circle); background: var(--status-checking-dot); } /* Editor — read-only. */ .pg-code-editor { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--color-surface); } .pg-code-editor[hidden] { display: none; } .pg-code-tabbar { flex: 0 0 auto; display: flex; align-items: stretch; border-bottom: var(--border-hairline); } .pg-code-tab { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 2px solid var(--color-brand); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; color: var(--color-text-primary); min-width: 0; } .pg-code-tab-dot { flex: 0 0 auto; width: 0.4375rem; height: 0.4375rem; border-radius: var(--radius-circle); background: var(--color-brand); } .pg-code-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pg-code-tab-spacer { flex: 1 1 auto; } /* The full path + the honest "read-only" — this pane is a viewer, and says so. */ .pg-code-readonly { display: flex; align-items: center; padding: 0 var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-code-body { flex: 1 1 auto; display: flex; align-items: flex-start; min-height: 0; overflow: auto; } .pg-code-gutter { flex: 0 0 auto; position: sticky; left: 0; padding: var(--space-3) var(--space-2) var(--space-4) var(--space-3); text-align: right; white-space: pre; user-select: none; background: var(--color-surface); color: var(--color-text-faint); } .pg-code-gutter, .pg-code-src { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; } .pg-code-src { /* The same token palette the desktop viewer ships — keyword on the brand hue, string/number/comment on the status hues — so code reads as one system across the shells. */ --vc-keyword: oklch(0.48 0.16 300); --vc-string: oklch(0.48 0.12 80); --vc-number: oklch(0.5 0.16 27); --vc-comment: oklch(0.5 0.1 150); flex: 1 1 auto; margin: 0; padding: var(--space-3) var(--space-4) var(--space-4) var(--space-1); min-width: max-content; /* let long lines push horizontal scroll */ color: var(--color-text-primary); } :root[data-mode="dark"] .pg-code-src { --vc-keyword: oklch(0.7 0.1 300); --vc-string: oklch(0.8 0.1 80); --vc-number: oklch(0.78 0.1 27); --vc-comment: oklch(0.58 0.1 150); } .pg-code-line { display: block; white-space: pre; } .pg-code-placeholder { display: block; font-family: var(--font-sans); color: var(--color-text-faint); white-space: normal; } /* Read-side truncation (a file too big to show in full, or past the line cap). */ .pg-code-note { flex: 0 0 auto; padding: var(--space-2) var(--space-4); border-top: var(--border-hairline); font-size: var(--text-xs); color: var(--color-text-faint); } .pg-code-note[hidden] { display: none; } /* Loading / empty / couldn't-load — one calm centered state, never a dead end. */ .pg-code-status { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8); text-align: center; } .pg-code-status[hidden] { display: none; } .pg-code-status-text { margin: 0; max-width: var(--measure-narrow, 32ch); font-size: var(--text-sm); color: var(--color-text-secondary); } .pg-code-retry { padding: var(--space-2) var(--space-4); border: var(--border-hairline); border-radius: var(--radius-md); background: var(--color-surface); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-primary); cursor: pointer; } .pg-code-retry[hidden] { display: none; } .pg-code-retry:hover { background: var(--color-surface-raised); } .pg-code-retry:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } /* Syntax tokens (highlight.js class names), scoped to the code view so they never reach the chat's code blocks. Identifiers keep the default ink. */ .pg-code-src .hljs-comment, .pg-code-src .hljs-quote { color: var(--vc-comment); font-style: italic; } .pg-code-src .hljs-keyword, .pg-code-src .hljs-selector-tag, .pg-code-src .hljs-built_in, .pg-code-src .hljs-name, .pg-code-src .hljs-tag, .pg-code-src .hljs-type, .pg-code-src .hljs-title.class_ { color: var(--vc-keyword); } .pg-code-src .hljs-string, .pg-code-src .hljs-regexp, .pg-code-src .hljs-symbol, .pg-code-src .hljs-bullet, .pg-code-src .hljs-char, .pg-code-src .hljs-attr, .pg-code-src .hljs-attribute, .pg-code-src .hljs-meta .hljs-string { color: var(--vc-string); } .pg-code-src .hljs-number, .pg-code-src .hljs-literal, .pg-code-src .hljs-meta .hljs-number { color: var(--vc-number); } .pg-code-src .hljs-meta { color: var(--color-text-faint); } .pg-code-src .hljs-emphasis { font-style: italic; } .pg-code-src .hljs-strong { font-weight: 700; } /* ── "What I checked" recap card (calm; ✓ confirmed / ⚠ unconfirmed). ── */ .pg-recap { flex: 0 0 auto; margin: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-raised); border: var(--border-hairline); } .pg-recap[hidden] { display: none; } .pg-recap-heading { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-2); } .pg-recap-list { display: flex; flex-direction: column; gap: var(--space-1); } .pg-recap-row { display: flex; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-secondary); } .pg-recap-mark { flex: 0 0 auto; } .pg-recap-row[data-status="confirmed"] .pg-recap-mark { color: var(--status-live-text); } .pg-recap-row[data-status="unconfirmed"] .pg-recap-mark { color: var(--status-checking-text); } /* ============================================================ */ /* Paywall / budget banner + its CTA. */ /* ============================================================ */ .pg-banner { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-3); margin: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-raised); border: var(--border-hairline); } .pg-banner[hidden] { display: none; } .pg-banner-icon { flex: 0 0 auto; font-size: var(--text-lg); line-height: 1.3; color: var(--color-text-primary); } .pg-banner-icon[hidden] { display: none; } .pg-banner-text { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pg-banner-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-text-primary); } .pg-banner-body { font-size: var(--text-sm); color: var(--color-text-secondary); } .pg-banner-cta { flex: 0 0 auto; appearance: none; border: 0; background: var(--color-brand); color: var(--color-on-brand); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill); cursor: pointer; transition: background 120ms ease, transform 120ms ease; } .pg-banner-cta[hidden] { display: none; } .pg-banner-cta:hover { background: var(--color-brand-hover); transform: translateY(-1px); } .pg-banner-cta:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } .pg-banner-dismiss { flex: 0 0 auto; appearance: none; border: 0; background: transparent; color: var(--color-text-secondary); font-size: var(--text-lg); line-height: 1; padding: 0 var(--space-1); cursor: pointer; border-radius: var(--radius-sm); transition: color 120ms ease, background 120ms ease; } .pg-banner-dismiss[hidden] { display: none; } .pg-banner-dismiss:hover { color: var(--color-text-primary); background: color-mix(in srgb, var(--color-text-primary) 8%, transparent); } .pg-banner-dismiss:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 1px; } /* Tone bands — color is never the only signal (icon + word carry it too). */ .pg-banner[data-tone="grace"] { background: var(--status-checking-bg); border-color: color-mix(in srgb, var(--status-checking-dot) 40%, transparent); } .pg-banner[data-tone="grace"] .pg-banner-title, .pg-banner[data-tone="grace"] .pg-banner-icon { color: var(--status-checking-text); } .pg-banner[data-tone="exhausted"] { background: var(--status-error-bg); border-color: color-mix(in srgb, var(--status-error-dot) 40%, transparent); } .pg-banner[data-tone="exhausted"] .pg-banner-title, .pg-banner[data-tone="exhausted"] .pg-banner-icon { color: var(--status-error-text); } .pg-banner[data-tone="ceiling"] { background: var(--status-stopped-bg); border-color: color-mix(in srgb, var(--status-stopped-dot) 40%, transparent); } .pg-banner[data-tone="ceiling"] .pg-banner-title { color: var(--status-stopped-text); } /* ============================================================ */ /* "Export" bar — Save to GitHub (primary) · Share · Download. */ /* No Deploy/Publish affordance, ever (explicit non-affordance).*/ /* ============================================================ */ /* The ship-it bar is now just a wrapper for the toggle + its upward popover. */ .pg-ship-bar { display: flex; justify-content: flex-end; } /* "Export" trigger — a primary pill that opens the popover. */ .pg-ship-toggle { appearance: none; position: relative; display: inline-flex; align-items: center; gap: var(--space-2); border: 0; background: var(--color-brand); color: var(--color-on-brand); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; box-shadow: var(--glow-violet-sm); transition: background 120ms ease, transform 120ms ease; } .pg-ship-toggle:hover { background: var(--color-brand-hover); transform: translateY(-1px); } .pg-ship-toggle:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } /* A small "shipped" dot on the trigger (link minted / push landed). */ .pg-ship-toggle-dot { width: 0.45rem; height: 0.45rem; border-radius: var(--radius-circle); background: var(--color-on-brand); } .pg-ship-toggle-dot[hidden] { display: none; } /* The popover panel — opens UPWARD so the scrolling side column never clips it. */ .pg-ship-panel { position: absolute; right: 0; bottom: calc(100% + var(--space-2)); z-index: 20; width: 22rem; max-width: calc(100vw - var(--space-6)); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); border: var(--border-hairline); box-shadow: var(--shadow-lg); } .pg-ship-panel[hidden] { display: none; } .pg-ship-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); } .pg-ship-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } /* Quiet secondary (Download) + peer (Share) + primary (Save). */ .pg-ship-download, .pg-ship-share { appearance: none; display: inline-flex; align-items: center; gap: var(--space-2); border: var(--border-default); background: var(--color-surface); color: var(--color-text-secondary); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .pg-ship-download:hover, .pg-ship-share:hover { background: var(--color-surface-raised); color: var(--color-text-primary); border-color: var(--color-border); } /* Share reads as the brand-tinted peer (the primary "ship" gesture's sibling). */ .pg-ship-share { color: var(--color-link); background: color-mix(in srgb, var(--color-brand) 8%, transparent); border-color: color-mix(in srgb, var(--color-brand) 28%, transparent); } .pg-ship-share[hidden] { display: none; } .pg-ship-save { appearance: none; display: inline-flex; align-items: center; gap: var(--space-2); border: 0; background: var(--color-brand); color: var(--color-on-brand); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; transition: background 120ms ease, transform 120ms ease; } .pg-ship-save:hover { background: var(--color-brand-hover); transform: translateY(-1px); } .pg-ship-save[data-state="saved"] { background: var(--status-live-bg); color: var(--status-live-text); border: 1px solid color-mix(in srgb, var(--status-live-dot) 40%, transparent); } .pg-ship-download:focus-visible, .pg-ship-share:focus-visible, .pg-ship-save:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } .pg-ship-download:disabled, .pg-ship-share:disabled, .pg-ship-save:disabled { opacity: 0.55; cursor: default; transform: none; } .pg-ship-save[aria-busy="true"], .pg-ship-download[aria-busy="true"] { cursor: progress; } .pg-ship-spinner { width: 0.8rem; height: 0.8rem; border-radius: var(--radius-circle); border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; animation: pl-spin 0.7s linear infinite; } .pg-ship-spinner[hidden] { display: none; } .pg-ship-note { font-size: var(--text-sm); color: var(--color-text-secondary); } .pg-ship-helper { padding-top: var(--space-2); border-top: var(--border-hairline); font-size: var(--text-xs); color: var(--color-text-faint); } /* Inline links + the diverged overwrite confirm inside the note. */ .pg-ship-repo-link { color: var(--color-link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--color-link) 35%, transparent); } .pg-ship-repo-link:hover { color: var(--color-link-hover); } .pg-ship-link { appearance: none; border: 0; background: transparent; color: var(--color-link); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0; } .pg-ship-diverged { display: inline-flex; gap: var(--space-2); margin-left: var(--space-2); } .pg-ship-overwrite { appearance: none; border: 0; background: var(--status-error-dot); color: var(--neutral-0); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; } .pg-ship-cancel-inline { appearance: none; border: var(--border-default); background: var(--color-surface); color: var(--color-text-secondary); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; } /* The "out of build credit" note: the message reads on one line, its Top-up button a quiet brand pill sitting just after it (opens Settings → Billing). */ .pg-ship-note-text { margin-right: var(--space-2); } .pg-ship-note-cta { appearance: none; border: 0; background: var(--color-brand); color: var(--color-on-brand); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; transition: background 120ms ease, transform 120ms ease; } .pg-ship-note-cta:hover { background: var(--color-brand-hover); transform: translateY(-1px); } .pg-ship-note-cta:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } /* ── Name + visibility dialog (reuses the .pg-modal-* shell). ── */ .pg-namedialog { width: 30rem; max-width: 100%; padding: var(--space-6); gap: 0; } .pg-namedialog-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); } .pg-namedialog-intro { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-secondary); } .pg-namedialog-label, .pg-namedialog-vislabel { display: block; margin: var(--space-5) 0 var(--space-2); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); } .pg-namedialog-label[hidden], .pg-namedialog-vislabel[hidden], .pg-namedialog-input[hidden], .pg-namedialog-error[hidden], .pg-namedialog-visibility[hidden], .pg-namedialog-actions[hidden], .pg-namedialog-confirm[hidden] { display: none; } .pg-namedialog-input { width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--border-default); background: var(--color-surface-raised); color: var(--color-text-primary); font-family: var(--font-sans); font-size: var(--text-base); } .pg-namedialog-input:focus-visible { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 22%, transparent); } .pg-namedialog-error { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--status-error-text); } .pg-namedialog-visibility { display: flex; gap: var(--space-1); padding: var(--space-1); background: var(--color-surface-raised); border: var(--border-default); border-radius: var(--radius-md); } .pg-namedialog-vis { appearance: none; flex: 1 1 auto; border: 1px solid transparent; background: transparent; color: var(--color-text-secondary); font-family: var(--font-sans); font-weight: 500; font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .pg-namedialog-vis[data-selected="true"] { background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-sm); } .pg-namedialog-vis:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 1px; } .pg-namedialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); } .pg-namedialog-cancel { appearance: none; border: var(--border-default); background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; } .pg-namedialog-save { appearance: none; border: 0; background: var(--color-brand); color: var(--color-on-brand); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; } .pg-namedialog-save:disabled { opacity: 0.55; cursor: default; } .pg-namedialog-danger { appearance: none; border: 0; background: var(--status-error-dot); color: var(--neutral-0); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; } .pg-namedialog-cancel:focus-visible, .pg-namedialog-save:focus-visible, .pg-namedialog-danger:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } /* Empty-state onboarding is the shared chat module's own single `.chat-empty` state (styled in the copied chat.css), driven per-surface via installChat's `emptyState` opts — no web-only overlay panel. */ /* ============================================================ */ /* Settings panel (mounted inside the modal). */ /* ============================================================ */ .pg-settings { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); } .pg-settings-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); } .pg-settings-layout { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; } .pg-settings-tabs { display: flex; flex-direction: column; gap: var(--space-1); min-width: 11rem; } .pg-settings-tab { appearance: none; border: 0; background: transparent; color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; text-align: left; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .pg-settings-tab:hover { background: var(--color-surface-raised); color: var(--color-text-primary); } .pg-settings-tab.is-active { background: color-mix(in srgb, var(--color-brand) 12%, transparent); color: var(--color-link); } .pg-settings-tab:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: -2px; } .pg-settings-body { flex: 1 1 22rem; min-width: 0; } .pg-settings-section[hidden] { display: none; } .pg-settings-section { display: flex; flex-direction: column; gap: var(--space-4); } .pg-settings-section-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--color-text-primary); } /* A titled sub-block within a section (Privacy / Sessions under Account & security): a hairline-topped group with its own h3 heading. */ .pg-settings-subsection { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-hairline); } .pg-settings-subsection-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text-primary); } .pg-settings-billing-status, .pg-settings-deeplink-blurb { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); } .pg-settings-billing-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } .pg-settings-btn { appearance: none; border: var(--border-default); background: var(--color-surface-raised); color: var(--color-text-primary); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, transform 120ms ease; } .pg-settings-subscribe { border: 0; background: var(--color-brand); color: var(--color-on-brand); } .pg-settings-subscribe:hover { background: var(--color-brand-hover); } .pg-settings-btn:hover { border-color: var(--color-border); transform: translateY(-1px); } .pg-settings-btn:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } .pg-settings-btn[disabled] { opacity: 0.6; cursor: default; transform: none; } .pg-settings-btn[hidden] { display: none; } /* ── Usage bars (Settings → Usage) ───────────────────────────────────────── */ .pg-usage { display: flex; flex-direction: column; gap: var(--space-5); } .pg-usage-bar { display: flex; flex-direction: column; gap: var(--space-2); } .pg-usage-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .pg-usage-bar-label { font-weight: 600; color: var(--color-text-primary); } .pg-usage-bar-figure { font-family: var(--font-display); font-weight: 600; color: var(--color-brand); } .pg-usage-bar-meter { appearance: none; -webkit-appearance: none; width: 100%; height: 0.5rem; border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface-raised); } .pg-usage-bar-meter::-webkit-progress-bar { background: var(--color-surface-raised); border-radius: var(--radius-pill); } .pg-usage-bar-meter::-webkit-progress-value { background: var(--color-brand); border-radius: var(--radius-pill); } .pg-usage-bar-meter::-moz-progress-bar { background: var(--color-brand); border-radius: var(--radius-pill); } .pg-usage-bar-hint, .pg-usage-signin { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); } .pg-usage-bar-hint[hidden], .pg-usage-signin[hidden] { display: none; } /* ── Usage: header (plan chip + upgrade) + monthly bar states + top-up ────── */ .pg-usage-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .pg-usage-header[hidden] { display: none; } .pg-usage-chip { display: inline-flex; align-items: center; padding: 2px var(--space-3); border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--color-brand) 45%, transparent); color: var(--color-link); background: color-mix(in srgb, var(--color-brand) 8%, transparent); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); } .pg-usage-upgrade { appearance: none; border: 0; background: transparent; color: var(--color-link); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: 0; cursor: pointer; } .pg-usage-upgrade[hidden] { display: none; } .pg-usage-upgrade:hover { color: var(--color-link-hover); text-decoration: underline; } .pg-usage-upgrade:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; border-radius: var(--radius-sm); } .pg-usage-bar[hidden] { display: none; } /* Monthly-bar warning arc: amber on grace (>=90%), muted error on exhausted (100%). Never a saturated alarm — it reads "you used it all," recoverable. */ .pg-usage-bar-meter[data-state="grace"]::-webkit-progress-value { background: var(--status-checking-dot); } .pg-usage-bar-meter[data-state="grace"]::-moz-progress-bar { background: var(--status-checking-dot); } .pg-usage-bar-meter[data-state="exhausted"]::-webkit-progress-value { background: var(--status-error-dot); } .pg-usage-bar-meter[data-state="exhausted"]::-moz-progress-bar { background: var(--status-error-dot); } /* The grace/exhausted subtext (the sibling hint after the meter) picks up the matching warning tone; the bar fill already carries the state visually. */ .pg-usage-bar-meter[data-state="grace"] + .pg-usage-bar-hint { color: var(--status-checking-text); } .pg-usage-bar-meter[data-state="exhausted"] + .pg-usage-bar-hint { color: var(--status-error-text); } .pg-usage-topup { display: flex; flex-direction: column; gap: var(--space-3); } .pg-usage-topup[hidden] { display: none; } .pg-usage-divider { height: 1px; background: var(--color-rule); } .pg-usage-topup-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .pg-usage-balance { font-size: var(--text-sm); color: var(--color-text-primary); } .pg-usage-addusage { appearance: none; border: 0; background: var(--color-brand); color: var(--color-on-brand); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill); cursor: pointer; transition: background 120ms ease, transform 120ms ease; } .pg-usage-addusage:hover { background: var(--color-brand-hover); transform: translateY(-1px); } .pg-usage-addusage:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } /* ============================================================ */ /* Settings: pricing table, top-up, account, privacy, theme. */ /* ============================================================ */ .pg-settings-blurb { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); max-width: var(--measure, 60ch); } .pg-settings-blurb a { color: var(--color-link); } .pg-settings-guard-note { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-raised); border: var(--border-hairline); color: var(--color-text-secondary); font-size: var(--text-sm); } /* Pricing table */ .pg-pricing-head { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text-primary); } .pg-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } @media (max-width: 720px) { .pg-pricing { grid-template-columns: 1fr; } } .pg-plan { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-xl); border: var(--border-default); background: var(--color-surface); } .pg-plan.is-popular { border-color: var(--color-brand); box-shadow: 0 6px 20px color-mix(in srgb, var(--color-brand) 12%, transparent); } .pg-plan.is-current { border-color: var(--color-brand); } .pg-plan-badge { position: absolute; top: calc(-1 * var(--space-3)); left: 50%; transform: translateX(-50%); /* Absolute + left:50% caps the shrink-to-fit width at half the card, which wraps the label; pin it to its natural single-line width. */ width: max-content; white-space: nowrap; padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-on-brand); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); } .pg-plan-name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text-primary); } .pg-plan-price { display: flex; align-items: baseline; gap: var(--space-1); } .pg-plan-amount { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); color: var(--color-text-primary); } .pg-plan-cadence { font-size: var(--text-sm); color: var(--color-text-secondary); } .pg-plan-tagline { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); min-height: 2.6em; } .pg-plan-cta { width: 100%; text-align: center; } .pg-plan.is-popular .pg-plan-cta:not([disabled]) { border: 0; background: var(--color-brand); color: var(--color-on-brand); } .pg-plan-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .pg-plan-item { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); } .pg-plan-check { flex: 0 0 auto; color: var(--status-live-text); font-weight: 600; } .pg-pricing-footnote { margin: 0; font-size: var(--text-xs); color: var(--color-text-secondary); max-width: var(--measure, 60ch); } /* Top-up panel */ .pg-topup { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; } .pg-topup[hidden] { display: none; } .pg-topup-panel { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; } .pg-topup-panel[hidden] { display: none; } .pg-topup-explainer { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); max-width: var(--measure, 60ch); } .pg-topup-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); } .pg-settings-manage[hidden], .pg-settings-signin[hidden] { display: none; } /* Account / Privacy */ .pg-account[hidden], .pg-account-signin[hidden], .pg-deleted-landing[hidden] { display: none; } .pg-account { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; } .pg-account-email { display: flex; flex-direction: column; gap: 2px; } .pg-account-email-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--color-text-secondary); } .pg-account-email-value { font-size: var(--text-base); color: var(--color-text-primary); } .pg-account-note { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); } .pg-account-group { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; width: 100%; padding-top: var(--space-4); border-top: var(--border-hairline); } .pg-account-subtitle { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-text-primary); } .pg-account-blurb, .pg-account-download-note { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); max-width: var(--measure, 60ch); } .pg-account-download-note[hidden] { display: none; } /* Danger zone (delete account) */ .pg-danger .pg-account-subtitle { color: var(--status-error-text); } .pg-danger-btn { border: 1px solid color-mix(in srgb, var(--status-error-dot) 45%, transparent); background: var(--status-error-bg); color: var(--status-error-text); } .pg-danger-btn:hover { border-color: var(--status-error-dot); } .pg-delete-confirm { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; margin-top: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--status-error-dot) 30%, transparent); background: var(--color-surface-raised); } .pg-delete-confirm[hidden] { display: none; } .pg-delete-warning, .pg-delete-prompt { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); } .pg-delete-email { font-family: var(--font-mono); color: var(--color-text-primary); } .pg-delete-label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-secondary); } .pg-delete-input { appearance: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: var(--border-default); background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-sans); font-size: var(--text-sm); } .pg-delete-input:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 1px; } .pg-delete-error { margin: 0; font-size: var(--text-sm); color: var(--status-error-text); } .pg-delete-error[hidden] { display: none; } /* Sessions device list (Account & security → Sessions). Each row stacks the device label over its "Last active …" line, with the actions pinned right. */ .pg-sessions-list { display: flex; flex-direction: column; gap: var(--space-2); } .pg-session-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--border-hairline); background: var(--color-surface-raised); } .pg-session-info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .pg-session-label { font-weight: 600; color: var(--color-text-primary); } .pg-session-meta { font-size: var(--text-xs); color: var(--color-text-secondary); } .pg-session-current { flex: 0 0 auto; font-size: var(--text-sm); color: var(--color-text-secondary); } .pg-session-actions, .pg-session-confirm { display: flex; align-items: center; gap: var(--space-2); } .pg-session-confirm[hidden] { display: none; } .pg-session-error { margin: 0; font-size: var(--text-sm); color: var(--status-error-text); } .pg-session-error[hidden] { display: none; } .pg-delete-actions { display: flex; gap: var(--space-3); } /* Appearance — theme swatch grid (a light row + a dark row of accent swatches, then a "Match system" option) and the High-contrast switch. Swatch colors are painted purely from the data-accent / data-mode-choice attributes off the raw ramp + neutral tokens, so the swatch previews each theme without inline styles. */ .pg-theme-grid { display: flex; flex-direction: column; gap: var(--space-3); } .pg-theme-row { display: flex; align-items: center; gap: var(--space-3); } .pg-theme-row-label { flex: 0 0 auto; width: 3rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); } .pg-theme-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); } .pg-swatch { appearance: none; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: var(--radius-md); border: 2px solid var(--color-border); cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; } .pg-swatch[data-mode-choice="light"] { background: var(--neutral-50); } .pg-swatch[data-mode-choice="dark"] { background: var(--neutral-d-950); } .pg-swatch-dot { width: 1rem; height: 1rem; border-radius: var(--radius-pill); background: var(--color-border); } /* Accent dot: the theme's brand step — 600 on light, 500 on dark. */ .pg-swatch[data-mode-choice="light"][data-accent="violet"] .pg-swatch-dot { background: var(--violet-600); } .pg-swatch[data-mode-choice="light"][data-accent="ocean"] .pg-swatch-dot { background: var(--ocean-600); } .pg-swatch[data-mode-choice="light"][data-accent="teal"] .pg-swatch-dot { background: var(--teal-600); } .pg-swatch[data-mode-choice="light"][data-accent="amber"] .pg-swatch-dot { background: var(--amber-600); } .pg-swatch[data-mode-choice="light"][data-accent="rose"] .pg-swatch-dot { background: var(--rose-600); } .pg-swatch[data-mode-choice="dark"][data-accent="violet"] .pg-swatch-dot { background: var(--violet-500); } .pg-swatch[data-mode-choice="dark"][data-accent="ocean"] .pg-swatch-dot { background: var(--ocean-500); } .pg-swatch[data-mode-choice="dark"][data-accent="teal"] .pg-swatch-dot { background: var(--teal-500); } .pg-swatch[data-mode-choice="dark"][data-accent="amber"] .pg-swatch-dot { background: var(--amber-500); } .pg-swatch[data-mode-choice="dark"][data-accent="rose"] .pg-swatch-dot { background: var(--rose-500); } .pg-swatch:hover { border-color: var(--color-text-faint); } .pg-swatch.is-active { border-color: var(--color-brand); box-shadow: 0 0 0 2px var(--color-brand); } /* While "Match system" is chosen, the theme the OS actually resolves to is outlined — shown as in-effect without claiming to be the checked radio. */ .pg-swatch[data-current="true"] { border-color: var(--color-accent); } .pg-swatch:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } /* "Match system" — a pill with a split light/dark preview + a label. */ .pg-swatch--system { width: auto; height: auto; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border-width: 2px; background: var(--color-surface-raised); color: var(--color-text-secondary); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); } .pg-swatch--system .pg-swatch-dot { border: 1px solid var(--color-border); background: linear-gradient(135deg, var(--neutral-50) 0 50%, var(--neutral-d-950) 50% 100%); } .pg-swatch--system.is-active { color: var(--color-text-primary); } /* High-contrast switch */ .pg-contrast-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); cursor: pointer; } .pg-contrast-note { margin-top: var(--space-1); } /* Notifications */ .pg-notif-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-primary); } .pg-notif-toggle[disabled] { opacity: 0.6; } /* ============================================================ */ /* Reduced motion — kill all transitions, lifts, and the dots. */ /* ============================================================ */ @media (prefers-reduced-motion: reduce) { .pg-banner-cta, .pg-ship-note-cta, .pg-ship-toggle, .pg-ship-download, .pg-ship-share, .pg-ship-save, .pg-namedialog-vis, .pg-sidebar-new, .pg-sidebar-mode, .pg-sidebar-profile, .pg-sidebar-account-item, .pg-history-item, .pg-entry-build, .pg-gallery-card, .pg-entry-anything, .pg-project-card, .pg-project-delete, .pg-chip-menu-item, .pg-settings-tab, .pg-settings-btn, .pg-banner-dismiss, .pg-usage-addusage, .pg-swatch { transition: none; } .pg-banner-cta:hover, .pg-ship-note-cta:hover, .pg-ship-toggle:hover, .pg-ship-save:hover, .pg-sidebar-new:hover, .pg-entry-build:hover, .pg-gallery-card:hover, .pg-entry-anything:hover, .pg-project-card:hover, .pg-settings-btn:hover, .pg-usage-addusage:hover { transform: none; } .pg-chip[data-state="committed"] .pg-chip-dot, .pg-status-strip[data-pulse="true"] .pg-status-dot, .pg-coldstart, .pg-coldstart-mark, .pg-ship-spinner { animation: none; } } /* ============================================================ * Mid-turn dialogs (desktop/ui/src/dialogs.js, shared) * On-brand styled replacements for the browser's native confirm / alert / * prompt. Modal, focus-trapped, theme-following (NOT the always-dark gate). * Untrusted host strings land as textContent only. * ============================================================ */ .pl-dialog-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--space-6); background: color-mix(in srgb, var(--neutral-d-950) 55%, transparent); backdrop-filter: blur(3px); animation: pl-dialog-fade 120ms ease; } .pl-dialog { width: 100%; max-width: 28rem; padding: var(--space-7, 1.75rem); background: var(--color-surface); border: var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); outline: none; animation: pl-dialog-rise 140ms ease; } .pl-dialog-inner { display: contents; } .pl-dialog-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.3125rem; letter-spacing: -0.01em; line-height: var(--leading-snug); color: var(--color-text-primary); } .pl-dialog-message { margin: var(--space-3) 0 0; font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-secondary); } /* A title followed by a body paragraph keeps the body muted under the heading. */ .pl-dialog-title + .pl-dialog-message { margin-top: var(--space-3); } .pl-dialog-choices { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); max-height: 50vh; overflow-y: auto; } .pl-dialog-choice { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .pl-dialog-choice:hover { background: var(--color-surface-raised); } .pl-dialog-choice.is-selected { border-color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 10%, transparent); } .pl-dialog-choice-radio { flex: 0 0 auto; width: 1rem; height: 1rem; accent-color: var(--color-brand); } .pl-dialog-choice-num { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xs); color: var(--color-text-secondary); } .pl-dialog-choice-label { font-family: var(--font-sans); font-size: 0.875rem; color: var(--color-text-primary); } .pl-dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-6); } .pl-dialog-btn { appearance: none; font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .pl-dialog-btn:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } .pl-dialog-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pl-dialog-btn--ghost { border: var(--border-default); background: var(--color-surface); color: var(--color-text-primary); } .pl-dialog-btn--ghost:hover:not(:disabled) { background: var(--color-surface-raised); } .pl-dialog-btn--primary { background: var(--color-brand); color: var(--color-on-brand); } .pl-dialog-btn--primary:hover:not(:disabled) { background: var(--color-brand-hover); } /* Destructive variant — visibly distinct, muted red (never a saturated alarm). */ .pl-dialog-btn--danger { background: var(--status-error-dot); color: var(--neutral-0); } .pl-dialog-btn--danger:hover:not(:disabled) { background: var(--status-error-text); } .pl-dialog-btn--danger:focus-visible { outline-color: var(--status-error-dot); } @keyframes pl-dialog-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pl-dialog-rise { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .pl-dialog-overlay, .pl-dialog { animation: none; } .pl-dialog-choice, .pl-dialog-btn { transition: none; } } /* ============================================================ * Email one-time-code sign-in (web/src/emailSignIn.js) * The passwordless login form opened from the sign-in gate. Reuses the themed * pl-dialog-* modal shell (overlay + card + title + actions + buttons); this * block adds only the two-step form layout — the email / code fields and the * inline error line. Untrusted strings land as textContent only. * ============================================================ */ .pl-email-step { display: flex; flex-direction: column; margin: 0; } .pl-email-lead { margin-top: var(--space-3); } .pl-email-input { width: 100%; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); font-family: var(--font-sans); font-size: 0.9375rem; color: var(--color-text-primary); background: var(--color-surface); border: var(--border-default); border-radius: var(--radius-md); outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .pl-email-input:focus-visible { border-color: var(--color-brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 30%, transparent); } /* The code field reads as a discrete one-time code: wider tracking, mono. */ .pl-email-code { font-family: var(--font-mono); letter-spacing: 0.35em; text-align: center; } .pl-email-error { margin: var(--space-3) 0 0; font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.45; color: var(--status-error-text); } @media (prefers-reduced-motion: reduce) { .pl-email-input { transition: none; } } /* ============================================================ * Question dialog (web/src/askUserDialog.js) * The assistant's mid-build question batch (the ask-user tool over the * bridge's askUser hostRequest). Reuses the themed pl-dialog-* modal shell + * choice rows; this block adds only the per-question layout — header chip, * prompt, choice description/preview, and the free-text field. Assistant * strings land as textContent only. * ============================================================ */ .pl-ask-card { max-width: 34rem; } .pl-ask-questions { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-4); max-height: 60vh; overflow-y: auto; } .pl-ask-question { display: flex; flex-direction: column; gap: var(--space-3); } /* Short chip label above a question, eyebrow-voiced (mono, uppercase). */ .pl-ask-header { align-self: flex-start; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); padding: 2px var(--space-2); border: var(--border-default); border-radius: var(--radius-sm); } .pl-ask-prompt { font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-primary); } .pl-ask-choices { margin-top: 0; max-height: none; overflow-y: visible; } /* Choice rows top-align so a description/preview can wrap beneath the label. */ .pl-ask-choice { align-items: flex-start; flex-wrap: wrap; } .pl-ask-choice .pl-dialog-choice-radio { margin-top: 2px; } .pl-ask-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .pl-ask-choice-desc { font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-secondary); } .pl-ask-choice-preview { flex-basis: 100%; margin: var(--space-2) 0 0; padding: var(--space-3); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.5; color: var(--color-text-primary); background: var(--color-surface-raised); border: var(--border-default); border-radius: var(--radius-sm); overflow-x: auto; white-space: pre; } .pl-ask-other { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: var(--border-default); border-radius: var(--radius-md); } .pl-ask-freetext { width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-primary); background: var(--color-surface); border: var(--border-default); border-radius: var(--radius-md); outline: none; resize: vertical; transition: border-color 120ms ease, box-shadow 120ms ease; } .pl-ask-freetext:focus-visible { border-color: var(--color-brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 30%, transparent); } .pl-ask-freetext[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .pl-ask-freetext { transition: none; } } /* ============================================================ * Terms gate (web/src/terms.js) * The non-dismissible "Review our terms" blocking dialog shown when a signed-in * visitor's accepted terms are stale. Replaces the old unstyled full-page * redirect. Built only off the brand tokens (no forked hex, no new fonts). A * calm card: hairline border, the largest card radius, the dialog shadow, and a * single 3px accent hairline strip along the top edge as the one brand gesture. * The two legal docs are the signature — two distinct tappable rows. Honors * prefers-reduced-motion. * ============================================================ */ .pg-terms-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--space-6); background: color-mix(in srgb, var(--neutral-d-950) 55%, transparent); backdrop-filter: blur(3px); animation: pl-dialog-fade 120ms ease; } .pg-terms-card { position: relative; overflow: hidden; width: 100%; max-width: 27.5rem; padding: var(--space-7, 1.75rem); background: var(--color-surface); border: var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); outline: none; animation: pl-dialog-rise 140ms ease; } /* The single brand gesture: a 3px accent hairline strip along the top edge. */ .pg-terms-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-brand); } .pg-terms-eyebrow { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-brand); } .pg-terms-title { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; line-height: var(--leading-snug, 1.2); color: var(--color-text-primary); } .pg-terms-lede { margin: var(--space-3) 0 0; font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-secondary); } .pg-terms-docs { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); } .pg-terms-doc { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: var(--border-default); border-radius: var(--radius-lg); text-decoration: none; color: inherit; cursor: pointer; transition: border-color 120ms ease, background 120ms ease, transform 120ms ease; } .pg-terms-doc:hover { border-color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 6%, transparent); transform: translateY(-1px); } .pg-terms-doc:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } .pg-terms-doc-glyph { flex: 0 0 auto; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 12%, transparent); } .pg-terms-doc-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pg-terms-doc-name { font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; color: var(--color-text-primary); } .pg-terms-doc-sub { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--color-text-secondary); } .pg-terms-doc-arrow { flex: 0 0 auto; display: grid; place-items: center; color: var(--color-text-secondary); transition: color 120ms ease; } .pg-terms-doc:hover .pg-terms-doc-arrow { color: var(--color-brand); } .pg-terms-consent { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-default); cursor: pointer; } .pg-terms-checkbox { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin-top: 1px; accent-color: var(--color-brand); cursor: pointer; } .pg-terms-checkbox:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } .pg-terms-consent-text { font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.5; color: var(--color-text-primary); } .pg-terms-error { margin: var(--space-4) 0 0; font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.45; color: var(--status-error-text); } .pg-terms-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-6); } .pg-terms-btn { appearance: none; font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .pg-terms-btn:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } .pg-terms-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pg-terms-btn--ghost { border: var(--border-default); background: var(--color-surface); color: var(--color-text-primary); } .pg-terms-btn--ghost:hover:not(:disabled) { background: var(--color-surface-raised); } .pg-terms-btn--primary { background: var(--color-brand); color: var(--color-on-brand); } .pg-terms-btn--primary:hover:not(:disabled) { background: var(--color-brand-hover); } @media (prefers-reduced-motion: reduce) { .pg-terms-overlay, .pg-terms-card { animation: none; } .pg-terms-doc, .pg-terms-doc-arrow, .pg-terms-btn { transition: none; } } /* ============================================================ */ /* Subprocessor-change NOTICE — a calm, one-time, dismissible */ /* info bar (not a gate). Floats at the TOP, out of the app's */ /* flow: the composer is bottom-centered, so a bottom bar would */ /* cover its send control (acting as a gate) — the top keeps it */ /* clear of the composer, and there is no top header to overlap */ /* (the shell's nav is the left rail). z-index sits above page */ /* content but BELOW the shared modal overlay (.pl-dialog-overlay */ /* at 100), so an open confirm/question modal covers it. */ /* ============================================================ */ .pg-notice { position: fixed; left: 50%; top: var(--space-5); transform: translateX(-50%); z-index: 90; width: min(40rem, calc(100vw - var(--space-6))); background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface)); border: var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); /* Opacity-only fade: a transform-based rise would override the centering translateX(-50%) mid-animation and jump the bar left. */ animation: pl-dialog-fade 160ms ease; } .pg-notice-inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5); } .pg-notice-message { flex: 1 1 12rem; min-width: 0; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.5; color: var(--color-text-primary); } .pg-notice-link { flex: 0 0 auto; font-family: var(--font-sans); font-weight: 600; font-size: 0.875rem; color: var(--color-brand); text-decoration: none; white-space: nowrap; } .pg-notice-link:hover { text-decoration: underline; } .pg-notice-link:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; border-radius: var(--radius-xs); } .pg-notice-dismiss { flex: 0 0 auto; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; font-size: 1.125rem; line-height: 1; appearance: none; border: none; border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .pg-notice-dismiss:hover { background: var(--color-surface-raised); color: var(--color-text-primary); } .pg-notice-dismiss:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .pg-notice { animation: none; } .pg-notice-dismiss { transition: none; } } /* ============================================================ */ /* "Your shared links" — the manage / revoke panel inside the */ /* body-level modal. Cards stack; actions wrap on narrow widths. */ /* ============================================================ */ .pg-links { padding: var(--space-6); } .pg-links-list { display: flex; flex-direction: column; gap: var(--space-3); } /* Skeletons / empty / error / sign-in notes — siblings of the card list (an ARIA list may only own listitems), and the panel's polite live region. */ .pg-links-state { display: flex; flex-direction: column; gap: var(--space-3); } .pg-links-state:empty { display: none; } /* Announced-only outcome text (a revoke landing) — never shown. */ .pg-links-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .pg-links-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-raised); border: var(--border-hairline); } .pg-links-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); overflow-wrap: anywhere; } /* Host + view tally sit on one quiet row above the meta line. */ .pg-links-facts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); } .pg-links-host { font-family: var(--font-mono); overflow-wrap: anywhere; } .pg-links-meta { font-size: var(--text-xs); color: var(--color-text-faint); } .pg-links-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-1); } .pg-links-open { display: inline-flex; align-items: center; color: var(--color-link); font-size: var(--text-sm); font-weight: 600; text-decoration: none; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); } .pg-links-open:hover { color: var(--color-link-hover); } .pg-links-revoke { appearance: none; border: var(--border-default); background: var(--color-surface); color: var(--color-text-secondary); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .pg-links-revoke:hover:not(:disabled) { background: var(--status-error-bg); color: var(--status-error-text); border-color: color-mix(in srgb, var(--status-error-dot) 40%, transparent); } .pg-links-revoke:disabled { opacity: 0.55; cursor: progress; } .pg-links-open:focus-visible, .pg-links-revoke:focus-visible, .pg-links-retry:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-brand); outline-offset: 2px; } /* Per-card failure note (a revoke that didn't land). */ .pg-links-card-note { margin: 0; font-size: var(--text-xs); color: var(--status-error-text); } .pg-links-card-note[hidden] { display: none; } /* Loading skeletons — placeholder rows, no content. */ .pg-links-skeleton { height: 5.5rem; border-radius: var(--radius-lg); background: var(--color-surface-raised); border: var(--border-hairline); animation: pl-pulse 1.4s ease-in-out infinite; } /* Empty / error / sign-in notes. */ .pg-links-note { margin: 0; padding: var(--space-6) 0; text-align: center; font-size: var(--text-sm); color: var(--color-text-secondary); } .pg-links-error { color: var(--status-error-text); } .pg-links-retry { align-self: center; appearance: none; border: var(--border-default); background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; } .pg-links-retry:hover { background: var(--color-surface-raised); } @media (prefers-reduced-motion: reduce) { .pg-links-skeleton { animation: none; } .pg-links-revoke, .pg-links-open { transition: none; } }