:root {
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --motion-fast: 100ms;
    --motion-base: 160ms;
    --uoft-navy: #002A5C;
    --uoft-blue: #005596;
}

body {
    background: linear-gradient(135deg, #f5f5f7 0%, #e0f2fe 100%);
    background-attachment: fixed;
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
}

/* View exit animation */
.view-exit {
    opacity: 0 !important;
    transform: translateY(-4px) !important;
    transition: opacity var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-out) !important;
}

/* View enter animation */
.view-enter {
    animation: viewEnter var(--motion-base) var(--ease-out) forwards;
}

@keyframes viewEnter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.stagger-1 { animation: viewEnter var(--motion-base) var(--ease-out)  0ms both; }
.stagger-2 { animation: viewEnter var(--motion-base) var(--ease-out) 30ms both; }
.stagger-3 { animation: viewEnter var(--motion-base) var(--ease-out) 60ms both; }
.stagger-4 { animation: viewEnter var(--motion-base) var(--ease-out) 90ms both; }

/* Inside a view that is already lifting in, its lines only fade, in turn.
   Moving both the view and each line stacked two slides on different clocks,
   which read as a shudder rather than one motion. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.view-enter .stagger-1, .view-enter .stagger-2,
.view-enter .stagger-3, .view-enter .stagger-4 { animation-name: fadeIn; }

/* The page keeps its scrollbar lane. Going from a long step to a short one
   otherwise removes the scrollbar mid-transition and everything jumps
   sideways by its width (17 px on Windows). */
html { scrollbar-gutter: stable; }

/* Step progress */
.progress-track {
    display: flex;
    gap: 4px;
    width: 100%;
    height: 100%;
}
.progress-step {
    flex: 1 1 0;
    height: 100%;
    border-radius: 999px;
    background: rgba(0, 42, 92, 0.12);
    position: relative;
    overflow: hidden;
}
.progress-step::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--uoft-blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--motion-base) var(--ease-out);
}
.progress-step.is-done::after,
.progress-step.is-current::after {
    transform: scaleX(1);
}
.progress-step.is-current::after {
    background: var(--uoft-navy);
}

/* Card */
.card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

/* Radio cards */
.radio-card {
    transition: border-color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
input[type="radio"]:checked + div {
    border-color: var(--uoft-navy);
    background-color: rgba(0, 42, 92, 0.04);
    box-shadow: 0 0 0 1px var(--uoft-navy);
}
input[type="radio"]:checked + div .check-icon {
    opacity: 1;
    transform: scale(1);
}
.check-icon {
    opacity: 0;
    transform: scale(0.2);
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-base) var(--ease-spring);
}

/* Rich-text descriptive blocks, piped summaries and multi-line labels */
.rich-text p { margin: 0 0 0.6em; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text a { color: var(--uoft-blue); text-decoration: underline; text-underline-offset: 2px; }
.rich-text u { text-decoration: underline; }
.rich-text ul { list-style: disc; padding-left: 1.25rem; margin: 0.4em 0; }
.rich-text li { margin: 0.15em 0; }
.rich-text h1, .rich-text h2, .rich-text h3 {
    font-weight: 700; color: var(--uoft-navy); margin: 0.2em 0 0.5em;
}

/* Step header icon badge — gives each section a graphic anchor (matches the
   welcome step's iconography) while keeping the form readable. */
.step-badge {
    width: 60px; height: 60px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #e0f2fe;
    color: var(--uoft-blue);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 85, 150, 0.12);
}
.step-badge svg { width: 30px; height: 30px; }

/* Floating action bar — Back/Continue stay on screen on long forms. It sticks
   16px above the viewport bottom while the card is taller than the screen, then
   settles at the form's end. The frosted background keeps content scrolling
   beneath it legible. */
.form-nav {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px 12px 22px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    box-shadow: 0 12px 34px rgba(0, 42, 92, 0.14);
}
.form-nav-back {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    color: #64748b;
    padding: 8px 12px;
    border-radius: 999px;
    transition: color var(--motion-fast) var(--ease-out);
}
.form-nav-back:hover { color: var(--uoft-navy); }

/* Form field stack: margin-based spacing (not grid gap) so a single field can
   collapse/expand its full footprint when branching shows/hides it — the
   reveal/hide motion is driven per-field by the Web Animations API in
   renderers.js (updateFormFields), animating height + opacity so surrounding
   fields glide rather than jump. The rest of the page stays static. */
.field-stack { display: flex; flex-direction: column; }
/* Constant per-field margin (NO :last-child exception): when branching reveals
   or removes the last field, a :last-child rule would flip a neighbour's margin
   0↔24px instantly — outside the height animation — which reads as a snap. A
   uniform margin keeps neighbours still; the trailing 24px before the nav is
   harmless. */
.field-stack > [data-field-wrap] { margin-bottom: 24px; }

/* ─── Schema form fields ──────────────────────────────────────────────────────
   Self-contained styling for the JSON-driven field types so they don't depend
   on Tailwind utilities that may be purged from the prebuilt tailwind.css. */
.field-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;            /* slate-800 */
    line-height: 1.4;
    margin-bottom: 12px;
}
.field-label .req { color: #ef4444; margin-left: 2px; }
.field-note {
    margin-top: 8px;
    font-size: 12.5px;
    color: #64748b;            /* slate-500 */
    line-height: 1.45;
}
textarea.floating-input { min-height: 116px; resize: vertical; line-height: 1.5; }

/* Option cards (radio / yesno) */
.opt-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.opt-grid.two   { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .opt-grid.two { grid-template-columns: 1fr; } }
.opt-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
    padding: 16px 18px;
    border: 2px solid #e2e8f0;       /* slate-200 */
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
.opt-card:hover { border-color: #cbd5e1; }              /* slate-300 */
.opt-label { color: #334155; line-height: 1.45; }       /* slate-700 */
.opt-label .muted { color: #94a3b8; font-style: italic; }
.opt-check {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.opt-check .check-icon {
    width: 100%; height: 100%;
    background: var(--uoft-navy);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.opt-check .check-icon svg { width: 14px; height: 14px; }
/* Selected: the global `input:checked + div` already sets the navy border/bg;
   here we keep the footprint (no scale) and color the indicator ring. */
input[type="radio"]:checked + .opt-card { transform: none; }
input[type="radio"]:checked + .opt-card .opt-check { border-color: var(--uoft-navy); }
input[type="radio"]:focus-visible + .opt-card { box-shadow: 0 0 0 4px rgba(0, 85, 150, 0.25); }

/* Descriptive / notice blocks */
.notice {
    padding: 18px 20px;
    border: 1px solid rgba(203, 213, 225, 0.7);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #475569;            /* slate-600 */
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.notice.is-alert {
    display: flex;
    gap: 12px;
    border-color: #fecaca;     /* red-200 */
    background: rgba(254, 242, 242, 0.85);
    color: #b91c1c;            /* red-700 */
}
.notice.is-alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: #ef4444; }
.notice .lookup-pending { color: #b45309; }   /* amber-700 */

.lookup-warning {
    padding: 12px 16px;
    border: 1px solid #fde68a;     /* amber-200 */
    border-radius: 14px;
    background: rgba(255, 251, 235, 0.8);
    color: #b45309;
    font-size: 13.5px;
}

/* File upload drop-zone */
.file-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px 24px;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
    transition: border-color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out);
}
.file-field:hover .file-drop { border-color: var(--uoft-blue); background: rgba(240, 249, 255, 0.6); }
.file-drop .ic {
    width: 44px; height: 44px; border-radius: 50%;
    background: #e0f2fe; color: var(--uoft-blue);
    display: flex; align-items: center; justify-content: center;
}
.file-drop .ic svg { width: 20px; height: 20px; }
.file-drop .primary { font-size: 14px; font-weight: 500; color: #334155; }
.file-drop .secondary { font-size: 12px; color: #94a3b8; }
.file-drop.is-filled {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    border-style: solid;
    border-color: #6ee7b7;        /* emerald-300 */
    background: rgba(236, 253, 245, 0.7);
    text-align: left;
}
.file-drop.is-filled .ic { background: #d1fae5; color: #059669; }
.file-drop.is-filled .meta { flex: 1 1 auto; min-width: 0; }
.file-drop.is-filled .fname { font-weight: 500; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-drop.is-filled .fsize { font-size: 12px; color: #64748b; }
.file-drop.is-filled .replace { font-size: 13px; font-weight: 500; color: var(--uoft-blue); }

/* Floating label inputs */
.floating-input-container {
    position: relative;
    padding-top: 14px;
}
.floating-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #d2d2d7;
    border-radius: 14px;
    outline: none;
    transition: all var(--motion-fast) var(--ease-out);
    color: #1d1d1f;
}
.floating-input:focus {
    border-color: var(--uoft-blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 85, 150, 0.1);
}
.floating-label {
    position: absolute;
    left: 16px;
    top: 30px;
    color: #86868b;
    font-size: 16px;
    pointer-events: none;
    transition: all var(--motion-fast) var(--ease-out);
}
.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label,
.floating-label.is-pinned {
    top: -4px;
    left: 12px;
    font-size: 12px;
    color: var(--uoft-navy);
    font-weight: 600;
    padding: 0 4px;
}

/* Toggle switch */
.toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 52px;
    height: 32px;
    background: #e5e5ea;
    border-radius: 32px;
    position: relative;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    transition: background var(--motion-fast) var(--ease-out);
}
.toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform var(--motion-base) var(--ease-spring);
}
.toggle:checked {
    background: var(--uoft-blue);
}
.toggle:checked::after {
    transform: translateX(20px);
}

/* Success checkmark */
.success-checkmark {
    width: 90px;
    height: 90px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--uoft-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: checkPop var(--motion-base) var(--ease-out) both;
}
.success-checkmark svg {
    width: 54%;
    height: 54%;
    overflow: visible;
}
.success-checkmark path {
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: drawCheck 200ms var(--ease-out) 60ms forwards;
}
/* No overshoot: at 160 ms a spring's bounce is a jolt, not a flourish. */
@keyframes checkPop {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* Range slider */
input[type=range] { -webkit-appearance: none; background: transparent; width: 100%; }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    cursor: pointer;
    margin-top: -10px;
    border: 0.5px solid rgba(0,0,0,0.1);
    transition: transform 0.1s ease;
}
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.1); }
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: #e5e5ea;
    border-radius: 4px;
}
input[type=range]:focus { outline: none; }

/* Respect reduced-motion: show final state, skip the motion */
@media (prefers-reduced-motion: reduce) {
    .platform-main > *, .platform-profile > *, .platform-loading,
    .view-enter,
    .stagger-1, .stagger-2, .stagger-3, .stagger-4,
    .success-checkmark { animation: none; opacity: 1; transform: none; }
    .view-exit { transition: none; }
    .success-checkmark path { animation: none; stroke-dashoffset: 0; }
}

/* ─── Welcome-screen login affordance ─────────────────────────────────────────
   Two states of the same slot under the CTA. Signed out: the CTA carries the
   Microsoft four-square mark on a white tile and the pill names the account
   type. Signed in: the pill becomes an identity chip (green presence dot +
   who you are + switch link). Tailwind here is a purged static build, so these
   are real rules, not utility classes. */
.ms-mark { width: 18px; height: 18px; flex: none; display: block; }

.ms-mark-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 0.75rem;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.auth-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(6px);
    font-size: 0.875rem;
    color: #475569;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.auth-chip .ms-mark { width: 14px; height: 14px; }

.auth-chip-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    flex: none;
}

.auth-chip-user { font-weight: 600; color: var(--uoft-navy); }

.auth-chip-switch {
    margin-left: 0.35rem;
    color: var(--uoft-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.auth-chip-switch:hover { color: var(--uoft-navy); }


/* Debug prefill button — staging only. Deliberately loud: if this is ever
   visible on production something is badly wrong and it should be obvious. */
#debug-prefill {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    padding: 11px 20px;
    font: 600 0.9rem/1 'Segoe UI', system-ui, sans-serif;
    color: #3d2b00;
    background: repeating-linear-gradient(45deg, #ffc83d, #ffc83d 10px, #ffb01f 10px, #ffb01f 20px);
    border: 2px solid #3d2b00;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
    cursor: pointer;
}
#debug-prefill:hover { filter: brightness(1.06); }
#debug-prefill:active { transform: translateY(1px); }

/* ─── Candidate documents ────────────────────────────────────────────────────
   Same visual language as .opt-card / .card: 2px slate border at 16px radius
   over translucent white, slate-300 on hover, navy ring when settled, and the
   shared motion tokens. */
.doc-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 32px; padding: 0; list-style: none; }

.doc-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border: 2px solid #e2e8f0;                 /* slate-200, as .opt-card */
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    transition: border-color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
.doc-card:hover { border-color: #cbd5e1; }     /* slate-300, as .opt-card */
.doc-card.is-done {
    border-color: var(--uoft-navy);
    background-color: rgba(0, 42, 92, 0.04);
    box-shadow: 0 0 0 1px var(--uoft-navy);    /* the selected-card ring */
}
.doc-card.is-drag {
    border-color: var(--uoft-navy);
    background-color: rgba(0, 85, 150, 0.06);
    box-shadow: 0 0 0 4px rgba(0, 85, 150, 0.18);
}

.doc-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 85, 150, 0.08);
    color: var(--uoft-blue);
    transition: background-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out);
}
.doc-card.is-done .doc-icon { background: var(--uoft-navy); color: #fff; }

.doc-body  { flex: 1 1 auto; min-width: 0; }
.doc-title { font-weight: 700; color: #1e293b; line-height: 1.35; }
.doc-desc  { color: #64748b; font-size: 0.9rem; margin-top: 4px; line-height: 1.5; }

/* Drop zone — click or drag. Dashed sibling of .opt-card. */
.doc-drop {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px; padding: 12px 16px;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.7);
    color: #64748b; font-size: 0.88rem; cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out);
}
.doc-drop:hover {
    border-color: var(--uoft-navy);
    color: var(--uoft-navy);
    background: rgba(255, 255, 255, 0.85);
}
.doc-drop svg { flex-shrink: 0; }
.doc-drop-hint { font-weight: 600; color: #334155; }
.doc-drop:hover .doc-drop-hint { color: var(--uoft-navy); }
.doc-drop-sub  { color: #94a3b8; }

.doc-received {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; font-size: 0.88rem;
    color: var(--uoft-navy); font-weight: 600;
}
.doc-received .doc-tick {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--uoft-navy); color: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.doc-replace {
    background: none; border: 0; padding: 0; margin-left: 4px;
    color: #64748b; font-size: 0.82rem; font-weight: 500;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
    transition: color var(--motion-fast) var(--ease-out);
}
.doc-replace:hover { color: var(--uoft-navy); }

.doc-status { margin-top: 8px; font-size: 0.84rem; color: #64748b; min-height: 1.1em; }
.doc-status.is-error { color: #ef4444; }       /* matches .field-label .req */

.doc-progress {
    height: 4px; border-radius: 999px; background: #e2e8f0;
    margin-top: 10px; overflow: hidden; display: none;
}
.doc-progress.is-on { display: block; }
.doc-progress > span {
    display: block; height: 100%; width: 0; border-radius: 999px;
    background: var(--uoft-navy);
    transition: width var(--motion-base) var(--ease-out);
}

.doc-summary { text-align: center; color: #64748b; font-size: 0.92rem; margin: 0 0 22px; }
.doc-summary strong { color: var(--uoft-navy); }

/* ─── Payroll details (payroll.js) ───────────────────────────────────────────
   The typed SIN / direct deposit / TD1 / permit step on the employee page.
   Same field language as the schema forms; sections instead of one long list. */
.payroll { max-width: 42rem; margin: 0 auto; }
.payroll-demo { text-align: right; margin: -8px 0 8px; min-height: 1px; }
.payroll-privacy { margin-bottom: 28px; }
.payroll-section { margin-bottom: 30px; }
.payroll-section[hidden], .payroll-part[hidden] { display: none; }
.payroll-heading {
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--uoft-navy);
    padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid #e2e8f0;
}
.payroll-lead { margin: 8px 0 2px; }
.payroll-grid { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .payroll-grid { grid-template-columns: 1fr; } }
.payroll-check {
    display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
    font-size: 14px; color: #475569; line-height: 1.5; cursor: pointer;
}
.payroll-check input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--uoft-navy); }
.payroll-error { text-align: center; }
.payroll-saved strong { display: block; color: var(--uoft-navy); margin-bottom: 4px; }
.payroll-again { text-align: center; margin-top: 18px; }
.floating-input[aria-invalid="true"] { border-color: #ef4444; }

/* ─── Batch roster ───────────────────────────────────────────────────────────
   One card per person, in the same language as .doc-card / .opt-card: 2px
   slate border at 16px radius over translucent white, slate-300 on hover. A
   thirty-person batch has to stay scannable, so the per-person inputs are
   compact rather than the full-width floating fields of the shared form. */
.batch-name { margin-bottom: 26px; }

.person-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }

.person-card {
    padding: 16px 18px;
    border: 2px solid #e2e8f0;                 /* slate-200 */
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
.person-card:hover { border-color: #cbd5e1; }  /* slate-300 */
.person-card:focus-within {
    border-color: var(--uoft-navy);
    box-shadow: 0 0 0 1px var(--uoft-navy);
}

.person-head { display: flex; align-items: center; gap: 12px; }

.person-num {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 85, 150, 0.08);
    color: var(--uoft-blue);
    font-size: 0.82rem; font-weight: 700;
}

.person-identity { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
@media (max-width: 640px) { .person-identity { grid-template-columns: 1fr; } }

.person-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #1e293b;
    font-size: 0.95rem;
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
.person-input:focus {
    outline: none;
    border-color: var(--uoft-blue);
    box-shadow: 0 0 0 3px rgba(0, 85, 150, 0.15);
}
textarea.person-input { resize: vertical; }

.person-remove {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border: none; border-radius: 10px;
    background: transparent;
    color: #94a3b8;                            /* slate-400 */
    font-size: 1.35rem; line-height: 1;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out);
}
.person-remove:hover { background: #fee2e2; color: #b91c1c; }

.person-questions,
.person-overrides { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 14px; }
.person-overrides { padding-top: 14px; border-top: 1px dashed #e2e8f0; }

.person-field { display: flex; flex-direction: column; gap: 5px; min-width: 190px; flex: 0 1 auto; }
.person-field-label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: #94a3b8;
}

/* Compact Yes/No: the shared form's big option cards would make a long roster
   unreadable, so per person it is a two-button segmented control. */
.person-seg { display: inline-flex; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.person-seg-option input { position: absolute; opacity: 0; pointer-events: none; }
.person-seg-option span {
    display: block;
    padding: 8px 18px;
    font-size: 0.9rem; color: #475569;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out);
}
.person-seg-option + .person-seg-option span { border-left: 1px solid #e2e8f0; }
.person-seg-option input:checked + span { background: var(--uoft-navy); color: #fff; font-weight: 600; }
.person-seg-option input:focus-visible + span { box-shadow: inset 0 0 0 3px rgba(0, 85, 150, 0.25); }

.person-override { display: flex; align-items: flex-end; gap: 10px; }
.person-override-remove {
    border: none; background: transparent;
    color: #94a3b8; font-size: 0.78rem; text-decoration: underline;
    cursor: pointer; padding: 0 0 10px;
}
.person-override-remove:hover { color: #b91c1c; }

.person-tools { margin-top: 14px; }
.person-add-override { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.person-add-override > span { font-size: 0.78rem; color: #94a3b8; }
.person-add-override .person-input { width: auto; max-width: 320px; font-size: 0.85rem; padding: 7px 10px; }

.person-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.person-add {
    padding: 10px 20px;
    border: 2px dashed #cbd5e1;
    border-radius: 999px;
    background: transparent;
    color: var(--uoft-navy);
    font-size: 0.9rem; font-weight: 600;
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out);
}
.person-add:hover { border-color: var(--uoft-navy); background: rgba(0, 42, 92, 0.04); }
.person-count { font-size: 0.85rem; color: #64748b; }


/* Roster summary on the review step */
.review-person-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.review-person-list li { display: flex; align-items: baseline; gap: 10px; font-size: 0.9rem; }
.review-person-num { color: #94a3b8; font-size: 0.75rem; min-width: 18px; }
.review-person-name { font-weight: 600; color: #1e293b; }
.review-person-email { color: #64748b; }
.review-person-diff {
    margin-left: auto;
    padding: 2px 9px; border-radius: 999px;
    background: rgba(0, 85, 150, 0.08); color: var(--uoft-blue);
    font-size: 0.72rem; font-weight: 600;
}


/* ─── Tracking ───────────────────────────────────────────────────────────────
   The signed-in view of what you have requested. Same card language again;
   a batch shows one bar made of its people's stages, so thirty contracts read
   at a glance instead of as thirty rows. */

.my-section { margin-bottom: 36px; }
.my-section > h2 {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #94a3b8; margin: 0 0 12px;
}

.request-card {
    padding: 20px 22px;
    margin-bottom: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    transition: border-color var(--motion-fast) var(--ease-out);
}
.request-card:hover { border-color: #cbd5e1; }
.request-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.request-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--uoft-navy); }
.request-meta { margin: 3px 0 0; font-size: 0.8rem; color: #94a3b8; }
.request-error { margin: 8px 0 0; font-size: 0.83rem; color: #b91c1c; }

.request-toggle {
    border: 1px solid #e2e8f0; border-radius: 999px;
    background: #fff; color: #475569;
    padding: 6px 14px; font-size: 0.8rem; cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.request-toggle:hover { border-color: var(--uoft-navy); color: var(--uoft-navy); }

/* Stage bar: one segment per stage, sized by how many people are in it. */
.track { display: flex; gap: 3px; height: 8px; margin-top: 16px; }
.track-seg { background: #e2e8f0; border-radius: 999px; }
.track-seg.is-waiting  { background: #7dd3fc; }   /* sky-300 */
.track-seg.is-done     { background: var(--uoft-navy); }
.track-seg.is-rejected { background: #fca5a5; }   /* red-300 */

.legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 0.78rem; color: #64748b; }
.legend { display: inline-flex; align-items: center; gap: 6px; }
.legend-total { margin-left: auto; color: #94a3b8; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: #e2e8f0; display: inline-block; }
.dot.is-waiting  { background: #7dd3fc; }
.dot.is-done     { background: var(--uoft-navy); }
.dot.is-rejected { background: #fca5a5; }

.stage-pill {
    flex-shrink: 0;
    padding: 4px 12px; border-radius: 999px;
    background: #f1f5f9; color: #475569;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.stage-pill.is-waiting  { background: rgba(0, 85, 150, 0.08); color: var(--uoft-blue); }
.stage-pill.is-done     { background: rgba(0, 42, 92, 0.08);  color: var(--uoft-navy); }
.stage-pill.is-rejected { background: #fee2e2; color: #b91c1c; }

.member-list { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px dashed #e2e8f0; display: flex; flex-direction: column; gap: 8px; }
/* A class with `display` beats the UA rule for [hidden], so say it here. */
.member-list[hidden] { display: none; }
.member-list li { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; }
.member-num { min-width: 18px; color: #94a3b8; font-size: 0.75rem; }
.member-name { font-weight: 600; color: #1e293b; }
.member-email { color: #64748b; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
    .member-list li { flex-wrap: wrap; gap: 6px 10px; }
    .member-email { flex-basis: 100%; }
}

/* ─── Platform shell ─────────────────────────────────────────────────────────
   The header every HR page shares: brand on the left, the three tabs, and the
   profile button in the corner. Frosted white like the original header. */
.platform-header {
    position: sticky; top: 0; z-index: 50;
    width: 100%;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.platform-bar {
    max-width: 72rem; margin: 0 auto;
    padding: 12px 24px;
    display: flex; align-items: center; gap: 20px;
}
.platform-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.platform-logo { height: 40px; width: auto; object-fit: contain; }
.platform-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.platform-brand-kicker { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; }
.platform-brand-name { font-size: 0.95rem; font-weight: 800; color: var(--uoft-navy); }

.platform-nav { flex: 1 1 auto; display: flex; justify-content: center; gap: 4px; min-width: 0; }
.platform-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    color: #475569;
    font-size: 0.9rem; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.platform-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
.platform-tab:hover { background: rgba(0, 42, 92, 0.06); color: var(--uoft-navy); }
.platform-tab.is-active { background: var(--uoft-navy); color: #fff; box-shadow: 0 6px 16px rgba(0, 42, 92, 0.22); }
.platform-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 85, 150, 0.3); }

.platform-profile { position: relative; flex-shrink: 0; width: 42px; height: 42px; }
.profile-btn {
    width: 42px; height: 42px; padding: 0;
    border: 2px solid #fff; border-radius: 999px;
    background: linear-gradient(135deg, var(--uoft-blue), var(--uoft-navy));
    color: #fff; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 42, 92, 0.22);
    transition: box-shadow var(--motion-fast) var(--ease-out);
}
.profile-btn:hover { box-shadow: 0 8px 18px rgba(0, 42, 92, 0.28); }
.profile-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 85, 150, 0.35); }
.profile-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em;
}
.profile-avatar.is-large {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--uoft-blue), var(--uoft-navy));
    color: #fff; font-size: 0.95rem;
}

.profile-menu {
    position: absolute; right: 0; top: calc(100% + 10px);
    width: 290px; padding: 8px;
    background: #fff;
    border: 1px solid #e2e8f0; border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
    animation: profile-menu-in var(--motion-base) var(--ease-out);
}
.profile-menu[hidden] { display: none; }
@keyframes profile-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.profile-menu-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; border-bottom: 1px solid #f1f5f9; margin-bottom: 6px; }
.profile-menu-who { display: flex; flex-direction: column; min-width: 0; }
.profile-menu-who strong { color: #0f172a; font-size: 0.95rem; }
.profile-menu-who span { color: #64748b; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu a {
    display: block; padding: 9px 12px;
    border-radius: 10px;
    color: #334155; font-size: 0.9rem; text-decoration: none;
}
.profile-menu a:hover, .profile-menu a:focus-visible { background: #f1f5f9; color: var(--uoft-navy); outline: none; }
.profile-menu-sep { height: 1px; background: #f1f5f9; margin: 6px 4px; }

@media (max-width: 760px) {
    .platform-bar { padding: 10px 14px; gap: 10px; }
    .platform-brand-text { display: none; }
    .platform-nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    .platform-nav::-webkit-scrollbar { display: none; }
    .platform-tab { padding: 8px 12px; font-size: 0.85rem; }
}
@media (max-width: 420px) {
    .platform-tab span { display: none; }   /* icons only on the smallest phones */
    .platform-tab { padding: 9px 12px; }
}

/* ─── Platform pages ─────────────────────────────────────────────────────── */
.platform-main { flex-grow: 1; width: 100%; max-width: 72rem; margin: 0 auto; padding: 40px 24px 24px; }
@media (max-width: 640px) { .platform-main { padding: 28px 16px 16px; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.page-head h1 { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--uoft-navy); }
.page-head p { margin: 6px 0 0; color: #64748b; }

/* Buttons shared by the tab pages. */
.btn-sm, .btn-md {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 2px solid var(--uoft-navy); border-radius: 999px;
    background: #fff; color: var(--uoft-navy);
    font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
.btn-sm { padding: 7px 14px; font-size: 0.82rem; }
.btn-md { padding: 11px 24px; font-size: 0.9rem; }
.btn-sm:hover, .btn-md:hover { background: rgba(0, 42, 92, 0.06); }
.btn-sm.is-primary, .btn-md.is-primary { background: var(--uoft-navy); color: #fff; box-shadow: 0 6px 15px rgba(0, 42, 92, 0.25); }
.btn-sm.is-primary:hover, .btn-md.is-primary:hover { background: var(--uoft-blue); border-color: var(--uoft-blue); }
.btn-sm:disabled { opacity: 0.6; cursor: default; }
.btn-link {
    border: none; background: none; padding: 4px 2px;
    color: #475569; font-size: 0.82rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn-link:hover { color: var(--uoft-navy); text-decoration: underline; }
.btn-link.is-danger { color: #b91c1c; }

.empty-card {
    padding: 24px 26px;
    border: 2px dashed #cbd5e1; border-radius: 16px;
    background: rgba(255, 255, 255, 0.55);
    color: #64748b;
}
.empty-card p { margin: 0 0 14px; }
.empty-card p:last-child { margin-bottom: 0; }
.empty-card strong { color: #1e293b; }
.empty-card.is-large { padding: 48px 32px; text-align: center; }
.empty-card.is-large h2 { margin: 0 0 8px; font-size: 1.4rem; font-weight: 800; color: var(--uoft-navy); }
.empty-card.is-large p { max-width: 34rem; margin: 0 auto 22px; }

/* ─── New request tab ────────────────────────────────────────────────────── */
.hub-hero { margin-bottom: 26px; }
.hub-kicker { margin: 0 0 4px; font-size: 0.95rem; font-weight: 600; color: var(--uoft-blue); }
.hub-hero h1 { margin: 0; font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--uoft-navy); }
@media (max-width: 640px) { .hub-hero h1 { font-size: 1.9rem; } }

.start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
@media (max-width: 720px) { .start-grid { grid-template-columns: 1fr; } }
.start-card {
    display: flex; align-items: center; gap: 18px;
    padding: 22px 24px;
    border: 2px solid #e2e8f0; border-radius: 20px;
    background: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
.start-card:hover { border-color: var(--uoft-navy); box-shadow: 0 14px 32px rgba(0, 42, 92, 0.12); }
.start-card:focus-visible { outline: none; border-color: var(--uoft-navy); box-shadow: 0 0 0 4px rgba(0, 85, 150, 0.2); }
.start-icon {
    flex-shrink: 0; width: 52px; height: 52px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 85, 150, 0.08); color: var(--uoft-blue);
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.start-icon svg { width: 26px; height: 26px; }
.start-card:hover .start-icon { background: var(--uoft-navy); color: #fff; }
.start-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.start-title { font-size: 1.1rem; font-weight: 700; color: var(--uoft-navy); }
.start-text { font-size: 0.9rem; color: #64748b; }
.start-arrow { flex-shrink: 0; width: 20px; height: 20px; color: #94a3b8; transition: transform var(--motion-fast) var(--ease-out); }
.start-card:hover .start-arrow { transform: translateX(3px); color: var(--uoft-navy); }

.hub-section { margin-bottom: 40px; }
.hub-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hub-section-head h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.hub-section-head a { font-size: 0.88rem; font-weight: 600; color: var(--uoft-blue); text-decoration: none; }
.hub-section-head a:hover { text-decoration: underline; }

.recent-list { list-style: none; margin: 0; padding: 0; border: 2px solid #e2e8f0; border-radius: 16px; background: rgba(255, 255, 255, 0.7); overflow: hidden; }
.recent-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; }
.recent-list li + li { border-top: 1px solid #f1f5f9; }
.recent-main { display: flex; flex-direction: column; min-width: 0; }
.recent-title { font-weight: 700; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-kind { font-size: 0.8rem; color: #94a3b8; }

/* ─── Template cards (New request + Templates tabs) ─────────────────────── */
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.template-card {
    display: flex; flex-direction: column;
    padding: 20px 22px;
    border: 2px solid #e2e8f0; border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
.template-card:hover { border-color: #cbd5e1; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06); }
.template-type {
    align-self: flex-start;
    margin-bottom: 10px; padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 85, 150, 0.08); color: var(--uoft-blue);
    font-size: 0.72rem; font-weight: 700;
}
.template-card h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; color: var(--uoft-navy); }
.template-meta { margin: 0 0 3px; font-size: 0.86rem; color: #475569; }
.template-updated { margin: 6px 0 16px; font-size: 0.76rem; color: #94a3b8; }
.template-actions { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.template-actions-spacer { flex: 1 1 auto; }
.confirm-inline { display: inline-flex; align-items: center; gap: 6px 12px; font-size: 0.8rem; color: #475569; flex-wrap: wrap; }

/* "From template X" / "Editing template X" at the top of the request form */
.template-chip {
    display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
    margin: -8px auto 24px; padding: 7px 16px; width: fit-content; max-width: 100%;
    border-radius: 999px;
    background: rgba(0, 85, 150, 0.08); color: var(--uoft-blue);
    font-size: 0.82rem;
}
.template-chip strong { color: var(--uoft-navy); }

/* ─── Tracking tools ─────────────────────────────────────────────────────── */
.tracking-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    border: 1px solid #e2e8f0; border-radius: 999px;
    background: #fff; color: #475569;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.filter-chip:hover { border-color: var(--uoft-navy); color: var(--uoft-navy); }
.filter-chip.is-active { background: var(--uoft-navy); border-color: var(--uoft-navy); color: #fff; }
.filter-count { padding: 0 7px; border-radius: 999px; background: rgba(148, 163, 184, 0.18); font-size: 0.75rem; }
.filter-chip.is-active .filter-count { background: rgba(255, 255, 255, 0.2); }
.tracking-search { max-width: 300px; }
@media (max-width: 640px) { .tracking-search { max-width: none; } }

/* ─── Spacing and motion fixes ───────────────────────────────────────────────
   A row of buttons. The confirmation screens used Tailwind's gap-3 and
   flex-wrap, which the purged tailwind.css does not contain, so their buttons
   sat flush against each other. */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.btn-row.is-left { justify-content: flex-start; }
.mt-2 { margin-top: 0.5rem; }            /* used by existing markup; missing from the purged build */

/* An in-place redraw (refreshStep) must not replay the entrance animation. */
.is-refresh .stagger-1, .is-refresh .stagger-2,
.is-refresh .stagger-3, .is-refresh .stagger-4 { animation: none; opacity: 1; transform: none; }

/* Tracking: what a batch is waiting for, and the split. */
.request-status { margin: 14px 0 0; font-size: 0.86rem; line-height: 1.55; color: #475569; }
.request-actions { margin-top: 12px; }
.request-note { margin: 10px 0 0; font-size: 0.8rem; color: #64748b; }
.request-note.is-success { padding: 9px 12px; border-radius: 10px; background: #f0fdf4; color: #166534; }
.split-confirm {
    margin-top: 2px; padding: 14px 16px;
    border: 1px solid #e2e8f0; border-radius: 12px;
    background: #f8fafc; color: #334155; font-size: 0.86rem; line-height: 1.55;
}
.split-confirm p { margin: 0 0 12px; }
.split-confirm .request-error { margin: 10px 0 0; }

/* ─── Motion: short, and only where something actually changed ───────────────
   Platform pages draw their content after the sign-in check; it settles in
   over 160 ms instead of popping. "Loading…" only appears if loading takes a
   noticeable time, so a fast load never flashes it. */
@keyframes settleIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.platform-main > *,
.platform-profile > .profile-btn { animation: settleIn var(--motion-base) var(--ease-out) both; }
.platform-main > .platform-loading { animation: settleIn var(--motion-base) var(--ease-out) 400ms both; }

/* Confirmation screens: two buttons and a quiet link, with room between. */
.btn-row { gap: 14px 16px; }
.success-more {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.9rem; font-weight: 600; color: var(--uoft-blue); text-decoration: none;
}
.success-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.success-text { max-width: 36rem; margin-left: auto; margin-right: auto; }   /* max-w-xl is not in the purged build */

/* ─── Utilities the markup uses but the purged tailwind.css lacks ────────────
   Values are Tailwind v3's own, so they look exactly as the markup intended.
   backend/test_css_classes.py fails CI if a class is used and defined
   nowhere; add the rule here when it does. */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-emerald-50\/70 { background-color: rgba(236, 253, 245, 0.7); }
.bg-slate-100 { background-color: #f1f5f9; }
.border-emerald-100 { border-color: #d1fae5; }
.text-emerald-600 { color: #059669; }
.h-6 { height: 1.5rem; }
.w-6 { width: 1.5rem; }
.justify-end { justify-content: flex-end; }
.max-w-md { max-width: 28rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-8 { margin-top: 2rem; }
.pb-1 { padding-bottom: 0.25rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.min-w-0 { min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.opacity-70 { opacity: 0.7; }
.rounded-xl { border-radius: 0.75rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
@media (min-width: 640px) {
    .sm\:mb-6 { margin-bottom: 1.5rem; }
    .sm\:mb-10 { margin-bottom: 2.5rem; }
    .sm\:mt-3 { margin-top: 0.75rem; }
    .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { .animate-spin { animation-duration: 2s; } }