/* =============================================================================
 * PRODUCT — surfaces beyond the marketing pages: filters, states, portal shell,
 * onboarding, application stepper, auth, help center, global search, modals.
 * Built on the same tokens / Signal & Path system.
 * ===========================================================================*/

/* ---------------------------------- States -------------------------------- */
.state { text-align: center; padding: var(--space-2xl) var(--space-lg); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 50%, transparent); }
.state__icon { width: 48px; height: 48px; margin: 0 auto var(--space-md); border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-muted); }
.state__icon svg { width: 24px; height: 24px; }
.state__title { font-size: var(--step-1); }
.state__body { color: var(--text-muted); margin: var(--space-xs) auto var(--space-md); max-width: 46ch; }
.state--ok .state__icon { background: var(--mint-12); color: var(--accent-2); }
.state--warn .state__icon { background: color-mix(in srgb, var(--clay) 14%, transparent); color: #e6b450; }
.state--error .state__icon { background: rgba(224,93,93,0.14); color: #d64545; }
[data-theme='dark'] .state--warn .state__icon { color: #e6b450; }
.state--loading { display: inline-flex; align-items: center; gap: 0.6rem; border: 0; padding: var(--space-md); color: var(--text-muted); background: none; }

.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: spin-slow 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.4s; } }

/* Skeletons */
.skeleton { display: grid; gap: 0.7rem; }
.skeleton__line, .skeleton__block { border-radius: 8px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; }
.skeleton__line { height: 14px; }
.skeleton__line.short { width: 60%; }
.skeleton__block { height: 120px; }
.skeleton-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--space-lg); }
.skeleton-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-lg); display: grid; gap: 0.7rem; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton__line, .skeleton__block { animation: none; } }

/* Locked feature */
.locked { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-lg); background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); position: relative; }
.locked__badge { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.locked__badge svg { width: 14px; height: 14px; }
.locked__title { font-size: var(--step-1); margin: 0.4rem 0; }
.locked__body { color: var(--text-muted); font-size: 0.9rem; margin-bottom: var(--space-md); }

/* Status badges */
.status-badge { display: inline-flex; align-items: center; padding: 0.24em 0.6em; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; }
.status-badge--mint { background: var(--mint-12); color: var(--accent-2); }
.status-badge--peri { background: var(--peri-12); color: var(--accent-ink); }
.status-badge--amber { background: color-mix(in srgb, var(--clay) 14%, transparent); color: #e6b450; }
.status-badge--muted { background: var(--surface-2); color: var(--text-muted); }
[data-theme='dark'] .status-badge--amber { color: #e6b450; }

/* ---------------------------------- Modal --------------------------------- */
.modal-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(5,5,6,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: grid; place-items: center; padding: var(--gutter); }
.modal { width: 100%; max-width: 520px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg); border-bottom: 1px solid var(--border); }
.modal__close { width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.modal__close svg { width: 20px; height: 20px; }
.modal__body { padding: var(--space-lg); display: grid; gap: var(--space-md); }
.modal__foot { padding: var(--space-lg); border-top: 1px solid var(--border); display: flex; gap: 0.6rem; justify-content: flex-end; }
.consent-row { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: 0.85rem; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 0.9rem; }
.consent-row input { width: 22px; height: 22px; accent-color: var(--periwinkle); flex-shrink: 0; }

/* ------------------------------- Filter toolbar --------------------------- */
.toolbar { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.toolbar__row { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
.search-box { position: relative; flex: 1; min-width: 220px; }
.search-box svg { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); }
.search-box input { width: 100%; padding-left: 2.6rem; }
.filter-select { display: inline-flex; flex-direction: column; gap: 0.25rem; }
.filter-select label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.select-sm { min-height: 40px; padding: 0.4em 2rem 0.4em 0.7em; font-size: 0.85rem; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2369727A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; }
.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: 0.8rem; }
.chip button { display: inline-flex; color: var(--text-muted); }
.chip button svg { width: 14px; height: 14px; }
.toolbar__meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--text-muted); }

/* Opportunity library grid */
.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px,100%),1fr)); gap: var(--space-lg); }
.opp-card { display: flex; flex-direction: column; }
.opp-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.opp-card__save { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; }
.opp-card__save[aria-pressed='true'] { background: var(--mint-12); color: var(--accent-2); border-color: transparent; }
.opp-card__save svg { width: 18px; height: 18px; }
.opp-card__tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: var(--space-sm); }

/* ------------------------------- Stepper (apply/onboarding) --------------- */
.stepper { display: flex; gap: 0.4rem; margin-bottom: var(--space-xl); flex-wrap: wrap; }
.stepper__item { flex: 1; min-width: 60px; height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.stepper__item.done, .stepper__item.active { background: linear-gradient(90deg, var(--mint), var(--periwinkle)); }
.stepper__item.active { opacity: 0.55; }
.wizard { max-width: 640px; margin-inline: auto; }
.wizard__meta { display: flex; justify-content: space-between; margin-bottom: 0.6rem; }
.wizard__step h2 { font-size: var(--step-2); }
.wizard__nav { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); }
.choice-grid { display: grid; gap: 0.6rem; margin-top: var(--space-lg); }
.choice-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.choice { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1rem; min-height: 52px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); text-align: left; font-weight: 500; }
.choice:hover { border-color: var(--accent); }
.choice.is-selected { border-color: var(--mint); background: var(--mint-12); }
.choice__mark { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.choice.is-selected .choice__mark { background: var(--mint); border-color: transparent; }
.choice__mark svg { width: 13px; height: 13px; }
.review-list { display: grid; gap: 0.5rem; margin-top: var(--space-md); }
.review-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.review-list dt { color: var(--text-muted); }
.review-list dd { text-align: right; font-weight: 600; }
@media (max-width: 520px) { .choice-grid.cols-2 { grid-template-columns: 1fr; } }

/* ---------------------------------- Auth ---------------------------------- */
.auth-wrap { max-width: 440px; margin-inline: auto; }
.auth-switch { text-align: center; margin-top: 1.25rem; font-size: 0.9rem; color: var(--text-muted); }

/* ------------------------------- Portal shell ----------------------------- */
.portal { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; background: var(--bg); }
.portal[data-theme] { --header-h: 60px; }
.portal__side { border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.portal__brand { display: flex; align-items: center; gap: 0.6rem; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border); }
.portal__brand .brand__name { font-size: 0.95rem; }
.portal__nav { padding: var(--space-md); display: grid; gap: 0.2rem; overflow-y: auto; flex: 1; }
.portal__nav a { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; border-radius: var(--r-sm); color: var(--text-muted); font-weight: 500; font-size: 0.92rem; }
.portal__nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.portal__nav a:hover { background: var(--surface-2); color: var(--text-strong); }
.portal__nav a[aria-current='page'] { background: var(--mint-12); color: var(--text-strong); }
.portal__nav a[aria-current='page'] svg { color: var(--accent-2); }
.portal__nav .lock { margin-left: auto; opacity: 0.5; }
.portal__side-foot { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border); }
.portal__main { min-width: 0; display: flex; flex-direction: column; }
.portal__top { height: var(--header-h); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--space-md); padding-inline: var(--space-lg); position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 85%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 20; }
.portal__top h1 { font-size: var(--step-1); }
.portal__top .spacer { flex: 1; }
.portal__view { padding: var(--space-xl) var(--space-lg); max-width: 1080px; width: 100%; margin-inline: auto; }
.preview-banner { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-radius: var(--r-md); background: var(--peri-12); border: 1px solid color-mix(in srgb, var(--periwinkle) 30%, transparent); color: var(--accent-ink); font-size: 0.82rem; }
.preview-banner svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Portal content blocks */
.portal-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg); }
.pcard { grid-column: span 12; border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-lg); background: var(--surface); }
.pcard--6 { grid-column: span 6; }
.pcard--4 { grid-column: span 4; }
.pcard--8 { grid-column: span 8; }
.pcard__k { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pcard__v { font-family: var(--font-display); font-size: var(--step-1); color: var(--text-strong); margin-top: 0.3rem; }
@media (max-width: 900px) { .pcard--6, .pcard--4, .pcard--8 { grid-column: span 12; } }

/* Roadmap timeline (vertical) */
.rmap { display: grid; gap: 0; }
.rmap__item { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-md); padding-bottom: var(--space-lg); position: relative; }
.rmap__item::before { content: ''; position: absolute; left: 15px; top: 26px; bottom: 0; width: 2px; background: var(--border); }
.rmap__item:last-child::before { display: none; }
.rmap__dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; z-index: 1; }
.rmap__dot svg { width: 15px; height: 15px; }
.rmap__item.completed .rmap__dot { background: var(--mint); border-color: transparent; color: #fff; }
.rmap__item.in-progress .rmap__dot { border-color: var(--periwinkle); }
.rmap__body h4 { font-size: var(--step-0); font-weight: 600; }
.rmap__body p { color: var(--text-muted); font-size: 0.88rem; margin-top: 0.2rem; }
.checklist { display: grid; gap: 0.4rem; margin-top: 0.7rem; }
.checklist button { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: var(--text); text-align: left; }
.checklist .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.checklist button.done .box { background: var(--mint); border-color: transparent; color: #fff; }
.checklist button.done { color: var(--text-muted); text-decoration: line-through; }
.checklist .box svg { width: 12px; height: 12px; }

/* Library list */
.lib-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.lib-item + .lib-item { margin-top: 0.6rem; }
.lib-item__type { width: 44px; height: 44px; border-radius: 10px; background: var(--peri-12); color: var(--accent-ink); display: grid; place-items: center; flex-shrink: 0; font-family: var(--font-mono); font-size: 0.6rem; }
.lib-item__meta { flex: 1; min-width: 0; }
.lib-item__meta h4 { font-size: var(--step-0); }
.lib-item__meta p { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; }
.lib-item.is-locked { opacity: 0.72; }

/* Data table (sessions/projects/billing) → cards on mobile */
.dtable { width: 100%; border-collapse: collapse; }
.dtable th, .dtable td { text-align: left; padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.dtable th { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.dtable-wrap { overflow-x: auto; }

/* Bottom nav (mobile portal) */
.portal__bottom { display: none; }
@media (max-width: 860px) {
  .portal { grid-template-columns: 1fr; }
  .portal__side { display: none; }
  .portal__view { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .portal__bottom { display: grid; grid-auto-flow: column; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--border); padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom)); }
  .portal__bottom a { display: grid; justify-items: center; gap: 2px; padding: 0.4rem 0; color: var(--text-muted); font-size: 0.62rem; }
  .portal__bottom a svg { width: 20px; height: 20px; }
  .portal__bottom a[aria-current='page'] { color: var(--accent-2); }
  .portal__more-menu { position: fixed; inset: 0; z-index: 45; background: var(--bg); padding: var(--space-lg); display: none; }
  .portal__more-menu[data-open='true'] { display: block; }
}

/* ------------------------------- Help center ------------------------------ */
.help-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: var(--space-md); }
.help-cat { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-lg); background: var(--surface); display: block; }
.help-cat:hover { border-color: var(--border-strong); }
.help-cat h3 { font-size: var(--step-0); margin-top: 0.5rem; }
.help-cat p { font-size: 0.82rem; color: var(--text-muted); }

/* ------------------------------ Global search ----------------------------- */
.gsearch { position: fixed; inset: 0; z-index: 350; background: rgba(5,5,6,0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: none; padding: 10vh var(--gutter) 0; }
.gsearch[data-open='true'] { display: block; }
.gsearch__panel { max-width: 640px; margin-inline: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.gsearch__input { display: flex; align-items: center; gap: 0.6rem; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border); }
.gsearch__input svg { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; }
.gsearch__input input { border: 0; background: none; width: 100%; font-size: var(--step-1); color: var(--text); outline: none; }
.gsearch__results { max-height: 55vh; overflow-y: auto; padding: var(--space-sm); }
.gsearch__group { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 0.6rem 0.8rem 0.3rem; }
.gsearch__hit { display: block; padding: 0.7rem 0.8rem; border-radius: var(--r-sm); }
.gsearch__hit:hover, .gsearch__hit.is-active { background: var(--surface-2); }
.gsearch__hit h4 { font-size: 0.92rem; }
.gsearch__hit mark { background: var(--mint-20); color: inherit; border-radius: 3px; }
.gsearch__hit p { font-size: 0.8rem; color: var(--text-muted); }
.gsearch__foot { padding: 0.6rem 0.9rem; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-muted); display: flex; gap: 1rem; }

/* Sticky TOC for articles */
.article-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
@media (min-width: 1000px) { .article-layout { grid-template-columns: 220px 1fr; } .article-toc { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; } }
.article-toc { font-size: 0.86rem; }
.article-toc h4 { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.6rem; }
.article-toc a { display: block; padding: 0.3rem 0; color: var(--text-muted); border-left: 2px solid var(--border); padding-left: 0.75rem; }
.article-toc a:hover, .article-toc a.is-active { color: var(--text-strong); border-color: var(--accent); }