/* 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. */

/* ---------- Legacy aliases — let existing templates keep working
   while the new tokens take over. New code should reach for --pt-*. */
:root {
    /* Aliases consumed by the compiled Tailwind theme (see static/portal/js/tailwind.config.js). */
    --color-pure-white:        var(--pt-white);
    --color-deep-void:         var(--pt-deep-void);
    --color-rocket-flame:      var(--pt-rocket-flame);
    --color-galactic-seafoam:  var(--pt-galactic-seafoam);
    --color-solar-gold:        var(--pt-solar-gold);
    --color-cosmic-fog:        var(--pt-cosmic-fog);
    --color-lunar-dust:        var(--pt-lunar-dust);
    --color-steel-gray:        var(--pt-steel-gray);
    --color-graphite-core:     var(--pt-graphite-core);
    --color-retro-blush:       #fae2e0;
    --color-red-alert:         var(--pt-red-alert);
    --color-atmosphere-blue:   var(--pt-atmosphere-blue);

    --color-brand-primary:      var(--pt-rocket-flame);
    --color-brand-orange:       var(--pt-rocket-flame);
    --color-brand-orange-light: var(--pt-rocket-flame-20);
    --color-brand-teal:         var(--pt-galactic-seafoam);
    --color-brand-teal-light:   var(--pt-galactic-seafoam-20);
    --color-brand-blue:         var(--pt-atmosphere-blue);
    --color-brand-blue-light:   var(--pt-atmosphere-blue-20);
    --color-brand-black:        var(--pt-graphite-core);

    --background:           var(--pt-bg);
    --background-secondary: var(--pt-surface);
    --background-tertiary:  var(--pt-bg);

    /* Old HSL-format custom props kept so templates with
       hsl(var(--foreground)) keep rendering legible text. */
    --foreground: 220 4% 14%;            /* graphite core */
    --muted-foreground: 220 2% 46%;      /* steel gray */
    --muted: 0 0% 96.5%;
    --border: 0 0% 91%;
    --input: 0 0% 91%;
    --ring: 14 80% 57%;                  /* rocket flame */

    --primary: 14 80% 57%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 220 4% 14%;
    --accent: 162 45% 55%;
    --accent-foreground: 0 0% 100%;
    --destructive: 4 76% 53%;
    --destructive-foreground: 0 0% 98%;

    --radius: var(--pt-radius-md);
    --radius-pill: var(--pt-radius-pill);
}

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

html {
    font-size: 16px;
}

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: 24px; }
.markdown-content h2 { font-size: 20px; }
.markdown-content h3 { font-size: 18px; }
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 { font-size: 16px; }

.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: 16px;
    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;
    border-radius: var(--pt-radius-pill);
    height: 48px;
    padding: 0 var(--pt-space-4);
    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-3); font-size: 14px; }
.btn-full { width: 100%; }
.btn-lg   { height: 56px; padding: 0 var(--pt-space-4); font-size: 16px; }

/* ---------- 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-3);
    font-family: var(--pt-font-body);
    font-size: 16px;
    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-3);
    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); }

/* ---------- Mobile sheet overlay ---------- */
.sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.5);
}

.sheet-content {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: 100%;
    max-width: 380px;
    background: var(--pt-surface);
    border-left: 1px solid var(--pt-border);
    padding: var(--pt-space-4);
    transition: transform var(--pt-dur-base) var(--pt-ease-paper);
}

/* ---------- Slider ---------- */
.slider-track {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: var(--pt-radius-pill);
    background: var(--pt-border);
}

.slider-range {
    position: absolute;
    height: 100%;
    border-radius: var(--pt-radius-pill);
    background: var(--pt-rocket-flame);
}

.slider-thumb {
    width: 24px;
    height: 24px;
    border-radius: var(--pt-radius-pill);
    border: 2px solid var(--pt-rocket-flame);
    background: var(--pt-white);
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   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-3);
    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-6) var(--pt-space-4);
}
@media (min-width: 768px) {
    .pt-flow-main { padding: var(--pt-space-7) var(--pt-space-5); }
}
/* Single-column centered flow — progress, main card, and joining card stacked */
.pt-flow-narrow { max-width: 640px; 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-5);
}
.pt-list-row {
    display: flex; align-items: center; gap: var(--pt-space-3);
    padding: var(--pt-space-4);
    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: 24px;
}

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

/* ---------- 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-6); }
@media (max-width: 640px) {
    .pt-onboard-card__body { padding: var(--pt-space-5) var(--pt-space-4); }
}
.pt-onboard-head { text-align: center; }
.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);
}
.pt-onboard-sub {
    margin-top: var(--pt-space-2);
    font-size: var(--pt-text-base);
    color: var(--pt-fg-muted);
}
/* Footer action bar — hairline top, actions right-aligned */
.pt-onboard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-3);
    padding: var(--pt-space-4) var(--pt-space-6);
    border-top: 1px solid var(--pt-border);
}
.pt-onboard-foot__meta { font-size: 14px; color: var(--pt-fg-muted); }
.pt-onboard-foot__actions { display: inline-flex; align-items: center; gap: var(--pt-space-2); margin-left: auto; }

/* ---------- Field scaffolding ---------- */
.pt-field { display: block; }
.pt-field + .pt-field { margin-top: var(--pt-space-4); }
.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); }

/* 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-3);
    font-family: var(--pt-font-body);
    font-size: var(--pt-text-base);
    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-4);
    border-radius: var(--pt-radius-pill);
    background: transparent;
    font-family: var(--pt-font-body);
    font-size: 14px;
    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);
}
.pt-segment__opt:hover { color: var(--pt-fg); }
.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-4);
    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);
}
.pt-choice:hover { background: var(--pt-cosmic-fog); }
.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-3);
    padding: var(--pt-space-4);
    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);
}
.pt-choice-card:hover { border-color: var(--pt-steel-gray); }
.pt-choice-card.is-selected { border-color: var(--pt-rocket-flame); background: var(--pt-rocket-flame-20); }
.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: 14px; 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-3);
    border-radius: var(--pt-radius-pill);
    border: 1px solid var(--pt-border);
    background: var(--pt-surface);
    font-size: 14px; 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-3); width: 100%;
    padding: var(--pt-space-4) 0;
    background: transparent; border: 0; cursor: pointer; text-align: left;
    font-family: var(--pt-font-body); font-size: var(--pt-text-base); font-weight: 500; color: var(--pt-fg);
}
.pt-accordion__icon { color: var(--pt-rocket-flame); font-size: 20px; }
.pt-accordion__chevron { margin-left: auto; color: var(--pt-fg-muted); }
.pt-accordion__body { padding-bottom: var(--pt-space-4); }

/* ---------- Upload dropzone ---------- */
.pt-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: var(--pt-space-6);
    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__icon { color: var(--pt-rocket-flame); }

/* File-attached row (resume / portfolio item) */
.pt-file-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--pt-space-3);
    padding: var(--pt-space-3);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    background: var(--pt-cosmic-fog);
}

/* ---------- 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-3);
    padding: var(--pt-space-4);
}
.pt-summary__title { font-size: var(--pt-text-base); font-weight: 600; color: var(--pt-fg); }
.pt-summary__cap { margin-top: var(--pt-space-1); font-size: 14px; 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-4) var(--pt-space-3); }
.pt-summary__row {
    display: flex; align-items: center; gap: var(--pt-space-2);
    padding: var(--pt-space-2) 0;
    font-size: 14px; 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-4) var(--pt-space-4); }

/* ---------- 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-4);
    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-5);
}

/* ---------- Progress indicator dots ---------- */
.pt-progress { display: flex; align-items: center; justify-content: center; gap: var(--pt-space-3); }
.pt-progress__step { display: inline-flex; align-items: center; font-size: 24px; }
.pt-progress__step[data-status="completed"] { color: var(--pt-galactic-seafoam); }
.pt-progress__step[data-status="current"]   { color: var(--pt-rocket-flame); }
.pt-progress__step[data-status="upcoming"]  { color: var(--pt-polished-steel); }

/* ---------- Turbo Drive navigation progress bar ---------- */
.turbo-progress-bar { background: var(--pt-rocket-flame); }

/* ---------- 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); }
}

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

/* ---------- Field errors (shared talent + employer) ---------- */
.field-error {
    margin: 8px 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) ---------- */
.pt-toast {
    position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
    background: var(--pt-graphite-core); color: #fff; padding: 12px 20px; border-radius: var(--pt-radius-pill);
    font-family: var(--pt-font-body); font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none;
    transition: all .24s 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; transform: translateX(-50%) translateY(0); }

/* ---------- 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; }
.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); }
}