/* Portal — public-facing talent application surface.
   Built on Planetary Talent design tokens. Brand rules:
   - Pill buttons, soft radii, no drop shadows, no gradients.
   - Sentence case throughout. Phosphor icons only.
   - Moret reserved for hero/brand moments — DM Sans for everything else. */

* {
    border-color: var(--pt-border);
}

html {
    font-size: var(--pt-text-md);
}

body {
    background-color: var(--pt-bg);
    color: var(--pt-fg);
    font-family: var(--pt-font-body);
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--pt-leading-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pt-font-body);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: var(--pt-leading-snug);
    color: var(--pt-fg);
    margin: 0;
}

/* Marketing display class — Moret for one focal moment per view. */
.pt-display {
    font-family: var(--pt-font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: var(--pt-leading-tight);
    color: var(--pt-fg);
    margin: 0;
}

/* ---------- Markdown / prose ---------- */
.markdown-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--pt-fg-muted);
}

.markdown-content p {
    margin-bottom: 1rem;
    font-size: 15px;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    color: var(--pt-fg);
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.markdown-content h1 { font-size: var(--pt-text-xl); }
.markdown-content h2 { font-size: var(--pt-text-lg); }
.markdown-content h3 { font-size: 18px; }
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 { font-size: var(--pt-text-md); }

.markdown-content ul,
.markdown-content ol {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.markdown-content ul { list-style-type: disc; }
.markdown-content ol { list-style-type: decimal; }

.markdown-content li {
    margin-bottom: 0.375rem;
    padding-left: 0.25rem;
}

.markdown-content li::marker { color: var(--pt-fg-muted); }

.markdown-content strong {
    color: var(--pt-fg);
    font-weight: 600;
}

.markdown-content a {
    color: var(--pt-rocket-flame);
    text-decoration: underline;
}

.markdown-content a:hover { opacity: 0.8; }

.markdown-content blockquote {
    border-left: 3px solid var(--pt-rocket-flame);
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: var(--pt-fg-muted);
}

.markdown-content code {
    background: var(--pt-bg);
    padding: 0.125rem 0.375rem;
    border-radius: var(--pt-radius-xs);
    font-size: 0.875em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.markdown-content pre {
    background: var(--pt-bg);
    padding: 1rem;
    border-radius: var(--pt-radius-md);
    overflow-x: auto;
    margin: 1rem 0;
}

.markdown-content pre code {
    background: none;
    padding: 0;
}

.markdown-content hr {
    border: none;
    border-top: 1px solid var(--pt-border);
    margin: 1.5rem 0;
}

.markdown-content > *:first-child { margin-top: 0; }
.markdown-content > *:last-child  { margin-bottom: 0; }

/* ---------- Buttons — pill, never square ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pt-space-2);
    white-space: nowrap;
    font-family: var(--pt-font-body);
    font-size: var(--pt-text-md);
    font-weight: 600;
    line-height: 1;
    transition: background var(--pt-dur-instant) var(--pt-ease-paper),
                color var(--pt-dur-instant) var(--pt-ease-paper),
                border-color var(--pt-dur-instant) var(--pt-ease-paper),
                opacity var(--pt-dur-instant) var(--pt-ease-paper),
                transform var(--pt-dur-fast) var(--pt-ease-paper);
    cursor: pointer;
    outline: none;
    text-decoration: none;
    border-radius: var(--pt-radius-pill);
    height: 48px;
    padding: 0 var(--pt-space-6);
    border: none;
}

.btn:active   { transform: scale(0.97); }
.btn:disabled { pointer-events: none; opacity: 0.5; }

.btn svg {
    pointer-events: none;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.btn-primary {
    background: var(--pt-rocket-flame);
    color: var(--pt-white);
}
.btn-primary:hover { background: #d95428; }

.btn-outline {
    border: 1px solid var(--pt-rocket-flame);
    color: var(--pt-rocket-flame);
    background: transparent;
}
.btn-outline:hover {
    background: var(--pt-rocket-flame);
    color: var(--pt-white);
}

.btn-ghost { background: transparent; color: var(--pt-fg); }
.btn-ghost:hover { background: rgba(0, 0, 0, 0.05); }

.btn-sm   { height: 40px; padding: 0 var(--pt-space-4); font-size: var(--pt-text-sm); }
.btn-full { width: 100%; }
.btn-lg   { height: 56px; padding: 0 var(--pt-space-6); font-size: var(--pt-text-md); }

/* ---------- Inputs — pill capsule by default. No drop shadows. ---------- */
.input {
    width: 100%;
    min-width: 0;
    height: 48px;
    border-radius: var(--pt-radius-pill);
    border: 1px solid var(--pt-border);
    background: var(--pt-surface);
    padding: 0 var(--pt-space-4);
    font-family: var(--pt-font-body);
    font-size: var(--pt-text-md);
    line-height: 1;
    color: var(--pt-fg);
    box-sizing: border-box;
    transition: border-color var(--pt-dur-instant) var(--pt-ease-paper);
    outline: none;
}

.input::placeholder { color: var(--pt-fg-muted); }

.input:focus-visible {
    border-color: var(--pt-fg);
}

.input:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}

@media (min-width: 768px) {
    .input { font-size: 15px; }
}

/* ---------- Select trigger ---------- */
.select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    border-radius: var(--pt-radius-pill);
    border: 1px solid var(--pt-border);
    padding: var(--pt-space-2) var(--pt-space-4);
    font-size: 15px;
    background: var(--pt-surface);
    color: var(--pt-fg);
    cursor: pointer;
    outline: none;
    transition: border-color var(--pt-dur-instant) var(--pt-ease-paper);
}

.select-trigger:focus { border-color: var(--pt-fg); }

/* ---------- Dual-handle range (weekly hours) ----------
   Two native range inputs stacked over a drawn track; only the thumbs take
   pointer events so either handle can be grabbed. Alpine sets --pt-range-lo and
   --pt-range-hi (0-100) on the fill; the rule turns them into left/right. */
.pt-range { position: relative; width: 100%; height: 20px; }
.pt-range__track,
.pt-range__fill {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 6px; border-radius: var(--pt-radius-pill);
}
.pt-range__track { width: 100%; background: var(--pt-border); }
.pt-range__fill  {
    background: var(--pt-rocket-flame);
    left: calc(var(--pt-range-lo, 0) * 1%);
    right: calc(var(--pt-range-hi, 0) * 1%);
}
.pt-range__input {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none;
}
.pt-range__input + .pt-range__input { z-index: 2; }
.pt-range__input::-webkit-slider-thumb {
    pointer-events: auto; -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: var(--pt-radius-pill);
    border: 2px solid var(--pt-white); background: var(--pt-rocket-flame); cursor: pointer;
}
.pt-range__input::-moz-range-thumb {
    pointer-events: auto;
    width: 16px; height: 16px; border-radius: var(--pt-radius-pill);
    border: 2px solid var(--pt-white); background: var(--pt-rocket-flame); cursor: pointer;
}

/* ---------- Input with a trailing unit ("/ Year", "/ hr") ---------- */
.pt-input-affix { position: relative; flex: 1 1 0%; min-width: 0; }
.pt-input-affix .input { padding-right: var(--pt-space-16); }
.pt-input-affix__suffix {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: var(--pt-text-sm); font-weight: 500; color: var(--pt-rocket-flame); pointer-events: none;
}

/* ============================================================
   ONBOARDING DESIGN SYSTEM  (v2 — employer-onboarding direction)
   Shared layout + component layer used by the talent portal flow
   and, later, the employer portal. Built only on --pt-* tokens.
   Brand rules enforced: flat (no shadows), no gradients, pill
   buttons, soft radii, 8-pt spacing, 20% tints, sentence case.
   ============================================================ */

/* ---------- Light/secondary button (employer "Back") ---------- */
.btn-light {
    background: var(--pt-surface);
    color: var(--pt-fg);
    border: 1px solid var(--pt-border);
}
.btn-light:hover { background: var(--pt-cosmic-fog); }

/* ---------- Minimal onboarding shell header ---------- */
.pt-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: var(--pt-bg);
}
.pt-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-4);
    height: 80px;
    padding: 0 40px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--pt-bg);
    border-bottom: 1px solid var(--pt-border);
}
.pt-shell-brand { display: inline-flex; align-items: center; }
.pt-shell-brand img { height: 28px; width: auto; display: block; }
.pt-shell-actions { display: inline-flex; align-items: center; gap: var(--pt-space-2); }

/* ---------- Flow main area + two-column grid (card + summary) ---------- */
.pt-flow-main {
    flex: 1;
    width: 100%;
    padding: var(--pt-space-12) var(--pt-space-6);
}
@media (min-width: 768px) {
    .pt-flow-main { padding: var(--pt-space-16) var(--pt-space-8); }
}
/* Single-column centered flow — progress, main card, and joining card stacked */
.pt-flow-narrow { max-width: 720px; margin: 0 auto; }

/* Wide centered flow — the public profile's three-column layout */
.pt-flow-wide { max-width: 1152px; margin: 0 auto; }

/* ---------- Generic display card + list row (profiles, dashboards) ---------- */
.pt-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    padding: var(--pt-space-8);
}
.pt-card__title { font-size: var(--pt-text-lg); font-weight: 500; margin-bottom: var(--pt-space-4); }
.pt-list-row {
    display: flex; align-items: center; gap: var(--pt-space-4);
    padding: var(--pt-space-6);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    background: var(--pt-surface);
    color: var(--pt-fg);
    text-decoration: none;
    transition: border-color var(--pt-dur-fast) var(--pt-ease-paper);
}
a.pt-list-row:hover { border-color: var(--pt-rocket-flame); }
.pt-list-row__icon {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex-shrink: 0;
    color: var(--pt-rocket-flame);
    font-size: var(--pt-text-xl);
}
.pt-list-row__body { flex: 1 1 0%; min-width: 0; text-align: left; }
.pt-list-row__title { font-size: var(--pt-text-sm); font-weight: 500; }
.pt-list-row__body .pt-hint { margin-top: 2px; }
.pt-list-row__caret { color: var(--pt-fg-muted); }

/* Inline text link (row "Edit" actions) */
.pt-link { font-size: var(--pt-text-sm); font-weight: 500; color: var(--pt-rocket-flame); }
.pt-link:hover { text-decoration: underline; }

/* ---------- Avatar (profile photo) ---------- */
.pt-avatar { width: 80px; height: 80px; border-radius: var(--pt-radius-pill); object-fit: cover; }

/* ---------- Public profile grid: stacked on phones, 1/3 + 2/3 from 1024px ----------
   Both columns dissolve (display: contents) on phones so the cards interleave:
   identity first, then the main column, then the remaining side cards. */
.pt-profile-grid { display: flex; flex-direction: column; gap: var(--pt-space-6); }
.pt-profile-grid__side,
.pt-profile-grid__main { display: contents; }
.pt-profile-grid__side > :first-child { order: 1; }
.pt-profile-grid__main > * { order: 2; }
.pt-profile-grid__side > :nth-child(n+2) { order: 3; }
@media (min-width: 1024px) {
    .pt-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pt-profile-grid__side,
    .pt-profile-grid__main { display: block; }
    .pt-profile-grid__main { grid-column: span 2; }
    .pt-profile-grid__side > * + *,
    .pt-profile-grid__main > * + * { margin-top: var(--pt-space-6); }
}
.pt-profile-identity {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--pt-space-4);
}
.pt-profile-identity__name { font-size: var(--pt-text-lg); font-weight: 500; }
.pt-profile-headline { font-size: var(--pt-text-xl); line-height: var(--pt-leading-tight); font-weight: 500; }

/* Icon + fact rows under the avatar */
.pt-meta-list { width: 100%; font-size: var(--pt-text-sm); }
.pt-meta-list > * + * { margin-top: var(--pt-space-2); }
.pt-meta-row { display: flex; align-items: center; gap: var(--pt-space-2); color: var(--pt-rocket-flame); }
.pt-meta-row i { font-size: var(--pt-text-md); flex-shrink: 0; }

/* Portfolio thumbnails: 2-up on phones, 3-up from 768px */
.pt-tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pt-space-2); }
@media (min-width: 768px) {
    .pt-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pt-space-6); }
}
.pt-tile {
    display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0;
    border-radius: var(--pt-radius-md); overflow: hidden; cursor: pointer;
    background: var(--pt-cosmic-fog);
    transition: opacity var(--pt-dur-fast) var(--pt-ease-paper);
}
.pt-tile:hover { opacity: 0.9; }
.pt-tile img { width: 100%; height: 100%; object-fit: cover; }

/* Lightbox body inside .pt-modal-overlay */
.pt-lightbox { width: 100%; max-width: 896px; }
.pt-lightbox img { width: 100%; max-height: 80vh; object-fit: contain; }

/* Achievement patch: radius clips the photo's white corners. */
.pt-patch { width: 84px; height: 84px; border-radius: 12%; }

/* ---------- Two-tone frame: tinted outer card holding the white onboard
   card (extracted from the employer wizard's .card-col) ---------- */
.pt-onboard-frame {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--pt-space-1);
    background: rgba(226, 222, 221, 0.2);
    border: 1px solid var(--pt-border);
    border-radius: 20px;
}
.pt-onboard-frame .pt-onboard-card,
.pt-onboard-frame .pt-employer-card {
    width: 100%;
    border-color: rgba(226, 222, 221, 0.8);
    border-radius: 16px;
}

/* ---------- Onboarding card (centered title → body → footer) ---------- */
.pt-onboard-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    overflow: hidden;
}
.pt-onboard-card__body { padding: var(--pt-space-12); }
@media (max-width: 640px) {
    .pt-onboard-card__body { padding: var(--pt-space-8) var(--pt-space-6); }
}
.pt-onboard-head { position: relative; text-align: center; }
/* Decorative icon pinned to the head's top-right corner */
.pt-onboard-head__corner { position: absolute; top: 0; right: 0; }
.pt-onboard-head > .pt-onboard-sub:first-child { margin-top: 0; }
.pt-onboard-title {
    font-family: var(--pt-font-body);
    font-weight: 500;
    font-size: var(--pt-text-xl);
    line-height: var(--pt-leading-snug);
    letter-spacing: -0.005em;
    color: var(--pt-fg);
}
/* Secondary card title (follow-up cards under the main one) */
.pt-onboard-title--sm { font-size: var(--pt-text-lg); }
.pt-onboard-sub {
    margin-top: var(--pt-space-2);
    font-size: var(--pt-text-md);
    color: var(--pt-fg-muted);
}
/* Form body under the head: one gap from the head, field rhythm between children */
.pt-onboard-body { margin-top: var(--pt-space-6); }
.pt-onboard-body > * + * { margin-top: var(--pt-space-4); }
/* Footer action bar — hairline top, actions right-aligned */
.pt-onboard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-4);
    padding: var(--pt-space-6) var(--pt-space-12);
    border-top: 1px solid var(--pt-border);
}
.pt-onboard-foot__meta { font-size: var(--pt-text-sm); color: var(--pt-fg-muted); }
.pt-onboard-foot__actions { display: inline-flex; align-items: center; gap: var(--pt-space-2); margin-left: auto; }

/* Large centered icon above an onboarding title (sent-email, success states) */
.pt-hero-icon { display: block; margin: 0 auto var(--pt-space-4); font-size: var(--pt-text-4xl); line-height: 1; }

/* Tinted circle holding a status icon (already applied, questionnaire done) */
.pt-icon-badge {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin: 0 auto;
    border-radius: var(--pt-radius-pill);
}
.pt-icon-badge i { font-size: var(--pt-text-2xl); line-height: 1; }
.pt-icon-badge--lg { width: 64px; height: 64px; }

/* ---------- Tint pairs: 20% brand wash with its readable ink. Pair with .pt-notice, .pt-pill, .pt-icon-badge ---------- */
.pt-tint-flame   { background: var(--pt-rocket-flame-20);     color: var(--pt-ink-on-flame-20); }
.pt-tint-seafoam { background: var(--pt-galactic-seafoam-20); color: var(--pt-ink-on-seafoam-20); }
.pt-tint-gold    { background: var(--pt-solar-gold-20);       color: var(--pt-ink-on-gold-20); }
.pt-tint-blue    { background: var(--pt-atmosphere-blue-20);  color: var(--pt-ink-on-blue-20); }
.pt-tint-purple  { background: var(--pt-voyager-purple-20);   color: var(--pt-ink-on-purple-20); }
.pt-tint-red     { background: var(--pt-red-alert-20);        color: var(--pt-ink-on-red-20); }

/* ---------- Tinted notice (errors, warnings, role notes) — pair with a .pt-tint-* ---------- */
.pt-notice { border-radius: var(--pt-radius-md); padding: var(--pt-space-3) var(--pt-space-4); font-size: var(--pt-text-sm); }
.pt-notice--icon { display: flex; align-items: center; gap: var(--pt-space-2); padding: var(--pt-space-2) var(--pt-space-4); }
.pt-notice--icon i { font-size: var(--pt-text-lg); flex-shrink: 0; }

/* ---------- Role facts on the landing card ---------- */
.pt-role-meta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--pt-space-1) var(--pt-space-3); margin-top: var(--pt-space-2);
    font-size: var(--pt-text-sm); color: var(--pt-fg-muted);
}
.pt-role-meta__dot { width: 6px; height: 6px; border-radius: var(--pt-radius-pill); background: currentColor; opacity: 0.5; }

/* Tinted fact pill (role type, hours, arrangement, pay) — pair with a .pt-tint-* */
.pt-pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pt-space-2); margin-top: var(--pt-space-6); }
.pt-pill {
    display: inline-flex; align-items: center; gap: var(--pt-space-2);
    padding: var(--pt-space-1) var(--pt-space-3); border-radius: var(--pt-radius-pill);
    font-size: var(--pt-text-sm); font-weight: 500;
}
.pt-pill i { font-size: var(--pt-text-sm); }

/* ---------- Disclosure toggle ("About the job") ---------- */
.pt-disclosure {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left;
    font-family: var(--pt-font-body); font-size: var(--pt-text-md); font-weight: 500; color: var(--pt-fg);
    transition: opacity var(--pt-dur-fast) var(--pt-ease-paper);
}
.pt-disclosure:hover { opacity: 0.8; }
.pt-disclosure__chevron { font-size: var(--pt-text-lg); color: var(--pt-fg-muted); }

/* ---------- Bordered panel (terms scroll box, current-time readout) ---------- */
.pt-panel { border: 1px solid var(--pt-border); border-radius: var(--pt-radius-md); background: var(--pt-surface); padding: var(--pt-space-6); }
.pt-panel--scroll { max-height: 384px; overflow-y: auto; }
.pt-panel--tinted { background: var(--pt-cosmic-fog); padding: var(--pt-space-4); }

/* ---------- "What's next" vertical timeline ---------- */
.pt-timeline { display: flex; flex-direction: column; align-items: center; max-width: 320px; margin: var(--pt-space-6) auto 0; }
.pt-timeline__step { display: flex; flex-direction: column; align-items: center; }
.pt-timeline__body { padding: var(--pt-space-3) 0; text-align: center; }
.pt-timeline__label { font-size: var(--pt-text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--pt-fg-muted); }
.pt-timeline__title { font-size: var(--pt-text-sm); font-weight: 500; color: var(--pt-fg); }
.pt-timeline__connector { height: var(--pt-space-6); border-left: 1px dotted var(--pt-border); }

/* ---------- "or" divider between sign-in methods ---------- */
.pt-divider { display: flex; align-items: center; gap: var(--pt-space-4); margin-bottom: var(--pt-space-1); }
.pt-divider__line { flex: 1; height: 1px; background: var(--pt-border); }

/* ---------- Field scaffolding ---------- */
.pt-field { display: block; }
.pt-field + .pt-field { margin-top: var(--pt-space-6); }
.pt-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--pt-fg);
    margin-bottom: var(--pt-space-2);
}
.pt-hint { font-size: 13px; color: var(--pt-fg-muted); }
/* Hint that sits between a .pt-label and its control */
.pt-label-hint { margin: calc(-1 * var(--pt-space-1)) 0 var(--pt-space-2); }

/* Checkbox / radio / switch beside its text */
.pt-check-row { display: flex; align-items: center; gap: var(--pt-space-4); cursor: pointer; }
.pt-check-row--start { align-items: flex-start; }
.pt-check-row--start .pt-check { margin-top: 2px; }

/* Multi-line text — soft rounded rect, never a pill */
.pt-textarea {
    width: 100%;
    min-height: 120px;
    border-radius: var(--pt-radius-sm);
    border: 1px solid var(--pt-border);
    background: var(--pt-surface);
    padding: var(--pt-space-4);
    font-family: var(--pt-font-body);
    font-size: var(--pt-text-md);
    line-height: var(--pt-leading-body);
    color: var(--pt-fg);
    box-sizing: border-box;
    resize: vertical;
    outline: none;
    transition: border-color var(--pt-dur-fast) var(--pt-ease-paper);
}
.pt-textarea::placeholder { color: var(--pt-fg-muted); }
.pt-textarea:focus-visible { border-color: var(--pt-fg); }

/* Native checkbox / radio tinted to brand flame */
.pt-check { width: 18px; height: 18px; accent-color: var(--pt-rocket-flame); flex-shrink: 0; cursor: pointer; }

/* Toggle switch (e.g. "add me to the talent pool") */
.pt-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.pt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pt-switch__track {
    position: absolute; inset: 0; border-radius: var(--pt-radius-pill);
    background: var(--pt-lunar-dust);
    transition: background var(--pt-dur-fast) var(--pt-ease-paper);
}
.pt-switch__thumb {
    position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: var(--pt-radius-pill); background: var(--pt-white);
    transition: transform var(--pt-dur-fast) var(--pt-ease-paper);
}
.pt-switch input:checked ~ .pt-switch__track { background: var(--pt-rocket-flame); }
.pt-switch input:checked ~ .pt-switch__thumb { transform: translateX(20px); }
.pt-switch input:focus-visible ~ .pt-switch__track { box-shadow: var(--pt-focus-ring-accent); }

/* ---------- Segmented control (Annual / Hourly · 12h / 24h) ---------- */
.pt-segment {
    display: inline-flex;
    gap: var(--pt-space-1);
    padding: var(--pt-space-1);
    border-radius: var(--pt-radius-pill);
    background: var(--pt-cosmic-fog);
    border: 1px solid var(--pt-border);
}
.pt-segment__opt {
    appearance: none; border: 0; cursor: pointer;
    padding: var(--pt-space-2) var(--pt-space-6);
    border-radius: var(--pt-radius-pill);
    background: transparent;
    font-family: var(--pt-font-body);
    font-size: var(--pt-text-sm);
    font-weight: 500;
    color: var(--pt-fg-muted);
    transition: background var(--pt-dur-fast) var(--pt-ease-paper), color var(--pt-dur-fast) var(--pt-ease-paper),
                transform var(--pt-dur-fast) var(--pt-ease-paper);
}
.pt-segment__opt:hover { color: var(--pt-fg); }
.pt-segment__opt:active { transform: scale(0.97); }
.pt-segment__opt.is-active { background: var(--pt-surface); color: var(--pt-fg); }

/* ---------- Choice pill (outlined selectable: comms channel, call/text) ---------- */
.pt-choice {
    display: inline-flex; align-items: center; gap: var(--pt-space-2);
    padding: var(--pt-space-2) var(--pt-space-6);
    border-radius: var(--pt-radius-pill);
    border: 1px solid var(--pt-border);
    background: var(--pt-surface);
    font-size: 15px; font-weight: 500; color: var(--pt-fg);
    cursor: pointer;
    transition: border-color var(--pt-dur-fast) var(--pt-ease-paper), background var(--pt-dur-fast) var(--pt-ease-paper),
                transform var(--pt-dur-fast) var(--pt-ease-paper);
}
.pt-choice:hover { background: var(--pt-cosmic-fog); }
.pt-choice:active { transform: scale(0.97); }
.pt-choice.is-selected { border-color: var(--pt-rocket-flame); color: var(--pt-rocket-flame); }

/* ---------- Choice card (large selectable option: location ack) ---------- */
.pt-choice-card {
    display: flex; align-items: flex-start; gap: var(--pt-space-4);
    padding: var(--pt-space-6);
    border-radius: var(--pt-radius-md);
    border: 1px solid var(--pt-border);
    background: var(--pt-surface);
    cursor: pointer;
    transition: border-color var(--pt-dur-fast) var(--pt-ease-paper), background var(--pt-dur-fast) var(--pt-ease-paper),
                transform var(--pt-dur-fast) var(--pt-ease-paper);
}
.pt-choice-card:hover { border-color: var(--pt-steel-gray); }
.pt-choice-card:active { transform: scale(0.99); }
.pt-choice-card.is-selected { border-color: var(--pt-rocket-flame); background: var(--pt-rocket-flame-20); }
.pt-choice-card > .pt-check { margin-top: var(--pt-space-1); }
.pt-choice-card__title { font-size: 15px; font-weight: 500; color: var(--pt-fg); }
.pt-choice-card__desc { margin-top: var(--pt-space-1); font-size: var(--pt-text-sm); color: var(--pt-fg-muted); }

/* ---------- Removable chip / tag ---------- */
.pt-chip {
    display: inline-flex; align-items: center; gap: var(--pt-space-1);
    padding: var(--pt-space-1) var(--pt-space-4);
    border-radius: var(--pt-radius-pill);
    border: 1px solid var(--pt-border);
    background: var(--pt-surface);
    font-size: var(--pt-text-sm); color: var(--pt-fg-muted);
}
.pt-chip__remove { display: inline-flex; cursor: pointer; color: var(--pt-fg-muted); }
.pt-chip__remove:hover { color: var(--pt-fg); }

/* ---------- Accordion section (employer "filters") ---------- */
.pt-accordion { border-bottom: 1px solid var(--pt-border); }
.pt-accordion__head {
    display: flex; align-items: center; gap: var(--pt-space-4); width: 100%;
    padding: var(--pt-space-6) 0;
    background: transparent; border: 0; cursor: pointer; text-align: left;
    font-family: var(--pt-font-body); font-size: var(--pt-text-md); font-weight: 500; color: var(--pt-fg);
}
.pt-accordion__icon { color: var(--pt-rocket-flame); font-size: var(--pt-text-lg); }
.pt-accordion__chevron { margin-left: auto; color: var(--pt-fg-muted); }
.pt-accordion__body { padding-bottom: var(--pt-space-6); }

/* ---------- Upload dropzone ---------- */
.pt-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: var(--pt-space-12);
    border: 2px dashed var(--pt-border);
    border-radius: var(--pt-radius-md);
    background: var(--pt-surface);
    cursor: pointer;
    transition: border-color var(--pt-dur-fast) var(--pt-ease-paper), background-color var(--pt-dur-fast) var(--pt-ease-paper);
}
.pt-dropzone:hover { border-color: var(--pt-rocket-flame); }
.pt-dropzone.is-dragover { border-color: var(--pt-rocket-flame); background: color-mix(in srgb, var(--pt-rocket-flame) 8%, var(--pt-surface)); }
.pt-dropzone.is-disabled { cursor: not-allowed; opacity: 0.5; }
.pt-dropzone__icon { color: var(--pt-rocket-flame); font-size: var(--pt-text-3xl); line-height: 1; margin-bottom: var(--pt-space-4); }
.pt-dropzone__icon--lg { font-size: var(--pt-text-4xl); }
.pt-dropzone__title { font-weight: 500; margin-bottom: var(--pt-space-1); }
/* Round headshot preview replacing the icon once a file is picked */
.pt-dropzone__preview { width: 128px; height: 128px; border-radius: var(--pt-radius-pill); overflow: hidden; margin-bottom: var(--pt-space-4); }
.pt-dropzone__preview img { width: 100%; height: 100%; object-fit: cover; }

/* File-attached row (resume / portfolio item) */
.pt-file-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--pt-space-4);
    padding: var(--pt-space-4);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    background: var(--pt-cosmic-fog);
}
.pt-file-row__meta { display: flex; align-items: center; gap: var(--pt-space-4); min-width: 0; }
.pt-file-row__meta > i { font-size: var(--pt-text-xl); color: var(--pt-rocket-flame); flex-shrink: 0; }
.pt-file-row__name { font-size: var(--pt-text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Summary sidebar ("Joining / Applying to" card) ---------- */
.pt-summary {
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    overflow: hidden;
}
.pt-summary__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--pt-space-4);
    padding: var(--pt-space-6);
}
.pt-summary__title { font-size: var(--pt-text-md); font-weight: 600; color: var(--pt-fg); }
.pt-summary__cap { margin-top: var(--pt-space-1); font-size: var(--pt-text-sm); color: var(--pt-fg-muted); }
.pt-summary__cap strong { color: var(--pt-fg); font-weight: 600; }
.pt-summary__icon { color: var(--pt-rocket-flame); font-size: 28px; flex-shrink: 0; }
.pt-summary__body { padding: 0 var(--pt-space-6) var(--pt-space-4); }
.pt-summary__row {
    display: flex; align-items: center; gap: var(--pt-space-2);
    padding: var(--pt-space-2) 0;
    font-size: var(--pt-text-sm); color: var(--pt-fg);
}
.pt-summary__row i { color: var(--pt-rocket-flame); font-size: 18px; flex-shrink: 0; }
.pt-summary__row + .pt-summary__row { border-top: 1px solid var(--pt-border); }

/* Attached-resume row at the bottom of the summary card */
.pt-summary__resume { padding: 0 var(--pt-space-6) var(--pt-space-6); }

/* Shelf variant — summary rendered on the frame's tinted surface below the
   white card (drawer look), instead of as a standalone card. */
.pt-summary--shelf { background: transparent; border: 0; border-radius: 0; }
.pt-summary--shelf .pt-file-row { background: var(--pt-surface); }

/* ---------- Modal / dialog shell ---------- */
.pt-modal-overlay {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    padding: var(--pt-space-6);
    background: rgba(0, 0, 0, 0.5);
}
.pt-modal {
    position: relative; width: 100%; max-width: 420px;
    background: var(--pt-surface);
    border-radius: var(--pt-radius-xl);
    padding: var(--pt-space-8);
}
.pt-modal__close {
    position: absolute; top: var(--pt-space-6); right: var(--pt-space-6);
    padding: 0; border: 0; background: transparent; cursor: pointer;
    color: var(--pt-fg-muted); font-size: var(--pt-text-lg); line-height: 1;
}
.pt-modal__close:hover { color: var(--pt-fg); }

/* ---------- Top progress bar (shared: talent, employer, questionnaire) ----------
   Scale, not width: width is a layout property, and the fill is full-bleed so
   scaleX composites instead. --pt-progress is the 0-100 step percentage, set
   inline by _progress_bar.html; shared.js replays the previous step's value for
   two frames after a boosted swap so the fill grows rather than teleporting. */
.pt-progressbar { width: 100%; height: 4px; background: var(--pt-lunar-dust); }
.pt-progressbar__fill {
    width: 100%;
    height: 100%;
    background: var(--pt-galactic-seafoam);
    transform-origin: left center;
    transform: scaleX(calc(var(--pt-progress, 0) / 100));
}
@media (prefers-reduced-motion: no-preference) {
    .pt-progressbar__fill { transition: transform var(--pt-dur-base) var(--pt-ease-paper); }
}

/* ---------- Boosted navigation progress bar ----------
   htmx adds htmx-request while a request is in flight (hx-indicator on <body>);
   the delay hides it for swaps that land within the budget. */
.pt-nav-progress {
    position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 3px;
    background: var(--pt-rocket-flame); transform-origin: left center; transform: scaleX(0);
    opacity: 0; pointer-events: none;
}
.pt-nav-progress.htmx-request { opacity: 1; transform: scaleX(.85); }
@media (prefers-reduced-motion: no-preference) {
    .pt-nav-progress.htmx-request { transition: opacity .15s linear .3s, transform 6s var(--pt-ease-paper) .3s; }
}

/* ---------- Entry motion — gentle fade-up (brand: translate + opacity) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .pt-rise   { animation: pt-rise var(--pt-dur-slow) var(--pt-ease-paper) both; }
    .pt-rise-2 { animation: pt-rise var(--pt-dur-slow) var(--pt-ease-paper) 60ms both; }
    .pt-rise-3 { animation: pt-rise var(--pt-dur-slow) var(--pt-ease-paper) 120ms both; }
    @keyframes pt-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- Exit motion — quick fade for dismissed elements (Alpine x-transition:leave) ---------- */
.pt-exit-to { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
    .pt-exit { transition: opacity var(--pt-dur-fast) var(--pt-ease-paper); }
}

/* ---------- Enter motion — counterpart to .pt-exit (Alpine x-transition:enter) ----------
   Usage: x-transition:enter="pt-enter" x-transition:enter-start="pt-enter-from"
   Enters slower than it exits (240ms vs 160ms): arrivals are watched, dismissals
   are not. Reduced motion keeps the fade and drops the scale. */
.pt-enter-from { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
    .pt-enter {
        transition: opacity var(--pt-dur-base) var(--pt-ease-paper),
                    transform var(--pt-dur-base) var(--pt-ease-paper);
    }
    .pt-enter-from { transform: scale(0.96); }

    /* Overlays fade only — scaling a full-bleed backdrop would pull it off the
       viewport edges. The dialog inside carries the scale instead. */
    .pt-enter.pt-modal-overlay,
    .pt-enter-from.pt-modal-overlay { transform: none; }
    .pt-enter.pt-modal-overlay .pt-modal { transition: transform var(--pt-dur-base) var(--pt-ease-paper); }
    .pt-enter-from.pt-modal-overlay .pt-modal { transform: scale(0.96); }
}

/* Alpine removes x-cloak on init, after x-show has set display, so a hidden-by-default element never flashes */
[x-cloak] { display: none !important; }

/* ---------- Required field marker (shared talent + employer) ---------- */
.is-required::after { content: " *"; color: var(--pt-red-alert); }

/* ---------- Field errors (shared talent + employer) ---------- */
.field-error {
    margin: var(--pt-space-2) 0 0; font-size: 13px; color: var(--pt-red-alert);
    font-family: var(--pt-font-body);
}
.input.is-invalid, .pt-textarea.is-invalid, .select-trigger.is-invalid { border-color: var(--pt-red-alert); }

/* ---------- Toast (shared talent + employer; shown via base.html x-data) ---------- */
/* Resting position carries no offset, so a reduced-motion toast fades in
   already seated; the slide-up is layered on only when motion is allowed. */
.pt-toast {
    position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: var(--pt-space-3);
    background: var(--pt-graphite-core); color: #fff; padding: var(--pt-space-3) 20px; border-radius: var(--pt-radius-pill);
    font-family: var(--pt-font-body); font-size: var(--pt-text-sm); font-weight: 500; opacity: 0; pointer-events: none;
    transition: opacity var(--pt-dur-base) var(--pt-ease-paper); z-index: 50;
}
.pt-toast.toast-success { background: var(--pt-galactic-seafoam); }
.pt-toast.toast-error { background: var(--pt-red-alert); }
.pt-toast.show { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
    .pt-toast {
        transform: translateX(-50%) translateY(20px);
        transition: opacity var(--pt-dur-base) var(--pt-ease-paper),
                    transform var(--pt-dur-base) var(--pt-ease-paper);
    }
    .pt-toast.show { transform: translateX(-50%) translateY(0); }
}
.pt-toast__close {
    background: none; border: 0; color: inherit; padding: 0; font-size: 18px; line-height: 1;
    cursor: pointer; pointer-events: auto; opacity: .75;
}
.pt-toast__close:hover { opacity: 1; }

/* ---------- Loading spinner ---------- */
.pt-spin { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
    .pt-spin { animation: pt-spin 0.9s linear infinite; }
    @keyframes pt-spin { to { transform: rotate(360deg); } }
}

/* ---------- Draw-on success check (house success primitive) ---------- */
/* Fully drawn by default; the draw-on animation only runs when motion is allowed. */
.pt-check-draw { display: block; width: 1.5em; height: 1.5em; flex-shrink: 0; }
.pt-check-draw__circle, .pt-check-draw__check {
    fill: none; stroke: var(--pt-galactic-seafoam); stroke-width: 3;
    stroke-linecap: round; stroke-linejoin: round;
}
.pt-check-draw__circle { --pt-draw: 151; stroke-dasharray: 151; }
.pt-check-draw__check  { --pt-draw: 34;  stroke-dasharray: 34; }
@media (prefers-reduced-motion: no-preference) {
    .pt-check-draw__circle { animation: pt-draw var(--pt-dur-slow) var(--pt-ease-settle) both; }
    .pt-check-draw__check  { animation: pt-draw var(--pt-dur-slow) var(--pt-ease-settle) 150ms both; }
    @keyframes pt-draw { from { stroke-dashoffset: var(--pt-draw); } to { stroke-dashoffset: 0; } }
}

/* ---------- Completion choreography (flow endings only) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .pt-badge-pop { animation: pt-badge-pop var(--pt-dur-slow) var(--pt-ease-settle) both; }
    @keyframes pt-badge-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

    /* Timeline cascade: children fade-up 80ms apart */
    .pt-cascade > * { animation: pt-rise var(--pt-dur-slow) var(--pt-ease-paper) both; }
    .pt-cascade > :nth-child(2) { animation-delay: 80ms; }
    .pt-cascade > :nth-child(3) { animation-delay: 160ms; }
    .pt-cascade > :nth-child(4) { animation-delay: 240ms; }
    .pt-cascade > :nth-child(5) { animation-delay: 320ms; }
    .pt-cascade > :nth-child(6) { animation-delay: 400ms; }
    .pt-cascade > :nth-child(n+7) { animation-delay: 480ms; }

    /* Ceremonial sequence: badge first, heading a beat later, then the rest */
    .pt-celebrate > * { animation: pt-rise var(--pt-dur-slow) var(--pt-ease-paper) both; }
    .pt-celebrate > :nth-child(2) { animation-delay: 300ms; }
    .pt-celebrate > :nth-child(3) { animation-delay: 450ms; }
    .pt-celebrate > :nth-child(4) { animation-delay: 600ms; }
    .pt-celebrate > :nth-child(n+5) { animation-delay: 750ms; }
    .pt-celebrate > .pt-badge-pop { animation-name: pt-badge-pop; animation-timing-function: var(--pt-ease-settle); }
}