/* SecondStage components, Quiet style. Every value comes from tokens.css. */
body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 23px; background: var(--surface); color: var(--ink); }
.ss-demo { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; padding: var(--space-6); }
.ss-demo--col { flex-direction: column; }
.ss-icon { flex: none; }
.ss-serif { font-family: var(--font-serif); font-weight: 400; }

/* Focus: a 2px outline 2px outside the element */
.ss-btn:focus-visible, .ss-input:focus-visible, .ss-select select:focus-visible, .ss-check input:focus-visible, .ss-nav__item:focus-visible, .ss-link:focus-visible, .ss-logo:focus-visible, .ss-help:focus-visible, .ss-topbar__link:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* Logo */
.ss-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; border-radius: var(--radius-md); }
.ss-logo--reversed { color: var(--on-band); }
.ss-logo__word { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.015em; line-height: 1; white-space: nowrap; transform: translateY(0.12em); }

/* Button: always a pill */
.ss-btn { font: inherit; font-size: 14px; font-weight: 500; line-height: 1; height: var(--control-md); padding: 0 18px; border-radius: var(--radius-pill); border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; box-sizing: border-box; white-space: nowrap; }
.ss-btn--sm { height: var(--control-sm); padding: 0 16px; }
.ss-btn--lg { height: var(--control-lg); padding: 0 22px; font-size: 15px; }
.ss-btn--primary { background: var(--action); color: var(--on-action); }
.ss-btn--primary:hover { background: var(--action-hover); }
.ss-btn--secondary { background: var(--surface-sunken); color: var(--ink); }
.ss-btn--secondary:hover { background: var(--line); }
.ss-btn--brand { background: var(--brand); color: var(--on-brand); }
.ss-btn--brand:hover { background: var(--brand-strong); }
.ss-btn--quiet { background: transparent; color: var(--ink); padding: 0 6px; }
.ss-btn--quiet:hover { color: var(--brand-strong); }
.ss-btn--inverse { background: var(--on-band); color: var(--band); }
.ss-btn--inverse:hover { background: var(--on-band-muted); }
.ss-btn--icon { width: var(--control-md); padding: 0; background: var(--surface-raised); border: 1px solid var(--line); color: var(--ink); }
.ss-btn--icon.ss-btn--sm { width: var(--control-sm); }
.ss-btn[disabled], .ss-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Field: input and select */
.ss-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ss-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.ss-hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ss-error { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--danger); }
.ss-input, .ss-select select { font: inherit; font-size: 15px; height: var(--control-md); box-sizing: border-box; width: 100%; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); }
.ss-input::placeholder { color: var(--ink-muted); }
.ss-input:focus, .ss-select select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--highlight); }
.ss-input[aria-invalid="true"] { border-color: var(--danger); }
.ss-select { position: relative; display: flex; }
.ss-select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.ss-select .ss-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-muted); }

/* Checkbox rows */
.ss-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-raised); }
.ss-check input { width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: var(--brand); cursor: pointer; }
.ss-check__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-check__label { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); }
.ss-check__desc { font-size: 12.5px; line-height: 18px; color: var(--ink-muted); }
.ss-check__aside { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.ss-check--done, .ss-check:has(input:checked) { background: var(--surface-sunken); border-color: var(--surface-sunken); }
.ss-check:has(input:checked) .ss-check__label { font-weight: 400; text-decoration: line-through; color: var(--ink-muted); }
.ss-check + .ss-check { margin-top: 8px; }

/* Card: white, hairline, soft shadow */
.ss-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 22px var(--space-6); display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; min-width: 0; }
.ss-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.ss-card__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 28px; letter-spacing: -0.015em; color: var(--ink); }
.ss-card__label { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.ss-card--band { background: var(--band); border-color: var(--band); color: var(--on-band); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-6) 28px; }
.ss-card--band .ss-card__title { color: var(--on-band); }
.ss-card__chip { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--band-raised); color: var(--mint); display: flex; align-items: center; justify-content: center; flex: none; }
.ss-card__band-body { display: flex; gap: var(--space-4); align-items: center; min-width: 0; }
.ss-card__band-text { margin: 4px 0 0; font-size: 13.5px; line-height: 20px; color: var(--on-band-muted); }
.ss-link { font-size: 13px; font-weight: 500; color: var(--link); text-decoration: none; border-radius: 4px; }
.ss-link:hover { color: var(--brand-strong); text-decoration: underline; }

/* Status chips and task tags */
.ss-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; width: fit-content; }
.ss-pill--calm { background: var(--calm-bg); color: var(--calm-fg); }
.ss-pill--watch { background: var(--watch-bg); color: var(--watch-fg); }
.ss-pill--act { background: var(--act-bg); color: var(--act-fg); }
.ss-pill--opportunity { background: var(--opportunity-bg); color: var(--opportunity-fg); }
.ss-pill--neutral { background: var(--surface-sunken); color: var(--ink-secondary); }
.ss-pill--lg { font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 34px; letter-spacing: -0.02em; padding: 8px 16px 8px 12px; border-radius: 12px; gap: 8px; }
.ss-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.ss-tag__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ss-tag--automate { color: var(--automate-ink); } .ss-tag--automate .ss-tag__dot { background: var(--automate); }
.ss-tag--assist { color: var(--assist-ink); } .ss-tag--assist .ss-tag__dot { background: var(--assist); }
.ss-tag--human { color: var(--human-ink); } .ss-tag--human .ss-tag__dot { background: var(--human); }

/* Stat card */
.ss-stat__value { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ss-stat__number { font-family: var(--font-serif); font-weight: 400; font-size: 60px; line-height: 57px; letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ss-stat__unit { font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.ss-stat__foot { margin-top: auto; }

/* Progress bar */
.ss-bar { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ss-bar__track { height: var(--bar-height); background: var(--surface-sunken); border-radius: var(--radius-sm); overflow: hidden; display: flex; }
.ss-bar__fill { height: 100%; background: var(--brand); }
.ss-bar__track--split { background: transparent; gap: 3px; }
.ss-bar__seg { height: 100%; }
.ss-bar__seg--automate { background: var(--automate); }
.ss-bar__seg--assist { background: var(--assist); }
.ss-bar__seg--human { background: var(--human); }
.ss-bar__seg--calm { background: var(--calm-solid); }
.ss-bar__seg--watch { background: var(--watch-solid); }
.ss-bar__seg--act { background: var(--act-solid); }
.ss-bar__legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 18px; color: var(--ink-muted); }
.ss-bar__legend li { display: flex; align-items: center; gap: 6px; }
.ss-bar__key { width: 7px; height: 7px; border-radius: 50%; }
.ss-bar__meta { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Tooltip */
.ss-tip { display: inline-flex; flex-direction: column; align-items: flex-start; }
.ss-tip__bubble { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-nav); padding: 12px 14px; max-width: 300px; font-size: 13.5px; line-height: 20px; box-sizing: border-box; }
.ss-tip__title { display: block; font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.ss-tip__anchor { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--ink-secondary); }
.ss-help { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink-muted); font: inherit; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; box-sizing: border-box; }

/* Nav sidebar (app) */
.ss-nav { width: 100%; max-width: 248px; box-sizing: border-box; background: var(--surface); border-right: 1px solid var(--line); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: 28px; min-height: 100%; }
.ss-nav__brand { padding: 4px 10px; }
.ss-nav__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ss-nav__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); text-decoration: none; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.ss-nav__item:hover { color: var(--ink); }
.ss-nav__item[aria-current="page"] { background: var(--surface-sunken); color: var(--ink); font-weight: 500; }
.ss-nav__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.ss-nav__privacy { margin: 0; padding: 0 10px; display: flex; gap: 8px; align-items: flex-start; color: var(--brand); font-size: 12.5px; line-height: 18px; }
.ss-nav__privacy span { color: var(--ink-muted); }
.ss-nav__user { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.ss-nav__avatar { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand-strong); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex: none; }
.ss-nav__name { display: flex; flex-direction: column; font-size: 14px; line-height: 18px; font-weight: 500; }
.ss-nav__name span { font-size: 12px; font-weight: 400; color: var(--ink-muted); }

/* Top bar (marketing) */
.ss-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: 18px max(16px, 4vw); border-bottom: 1px solid var(--line); background: var(--surface); }
.ss-topbar__links { display: flex; gap: 28px; }
.ss-topbar__link { font-size: 14px; color: var(--ink); text-decoration: none; border-radius: 4px; }
.ss-topbar__link:hover { color: var(--brand-strong); }
.ss-topbar__actions { display: flex; gap: var(--space-2); align-items: center; }
@media (max-width: 760px) { .ss-topbar__links { display: none; } }

/* Frame: the grey panel behind a product card */
.ss-frame { background: var(--surface-sunken); border-radius: var(--radius-2xl); padding: var(--space-12); display: flex; justify-content: center; box-sizing: border-box; min-width: 0; }
.ss-frame--open { padding-bottom: 0; align-items: flex-end; overflow: hidden; }
.ss-frame__inner { width: 100%; max-width: 640px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: 22px var(--space-6); box-sizing: border-box; font-size: 13.5px; line-height: 20px; }
.ss-frame--open .ss-frame__inner { border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: none; }
.ss-frame__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: 18px; }
.ss-frame__eyebrow { margin: 0 0 4px; font-size: 15px; color: var(--ink-muted); }
.ss-frame__title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }

@media (prefers-reduced-motion: no-preference) {
  .ss-btn, .ss-nav__item, .ss-link, .ss-topbar__link { transition: background-color .15s ease, color .15s ease; }
}