/* =========================================================
PROJECT: Walanda platform
FILE: register.css
PATH: /src/modules/auth/css/register.css
MODULE: auth
SCOPE: styling (page)
PURPOSE: styles the shared multi-step Walanda registration page
AUTHOR: Simasiku Nasilele
STANDARD: Walanda pro ui system
VERSION: 1.0.0
LAST UPDATED: 2026
========================================================= */
/* =========================================================
SECTION: variables
DESCRIPTION: root variables and theme tokens
========================================================= */

:root {
    --walanda-auth-secondary: #ffffff;
    --walanda-auth-secondary-border: #d5e0df;
    --walanda-auth-secondary-text: #2d4445;
}


/* =========================================================
SECTION: reset
DESCRIPTION: base resets and normalization
========================================================= */

.register-card-shell *,
.register-card-shell *::before,
.register-card-shell *::after {
    box-sizing: border-box;
}


/* =========================================================
SECTION: layout
DESCRIPTION: global layout structure
========================================================= */

.register-card-shell {
    width: min(100%, 760px);
}

.register-form {
    gap: 22px;
}

/* Registration progress bar — single linear track + "Step X of N ·
   Label" heading. Replaces the per-step dot+label row (1980-pixel-wide
   layout) that wrapped + cropped on phones at the 7-step learner flow.
   Adapts to any flow length without re-layout. */
.register-progress {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) 0 0;
    width: 100%;
}

.register-progress__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: 8px;
    min-width: 0;
}

.register-progress__step {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.register-progress__label {
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: right;
    /* truncate gracefully if a future step label is verbose */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.register-progress__track {
    height: 8px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.register-progress__fill {
    height: 100%;
    background: var(--primary);
    border-radius: 999px;
    transition: width 0.3s ease;
    width: 0;
}

.form-step {
    display: none;
    flex-direction: column;
    gap: 18px;
}

.form-step.active {
    display: flex;
}

.register-section-head h3 {
    margin: 0 0 6px;
    color: #17393a;
    font-size: 1.08rem;
}

.register-section-head p {
    margin: 0;
    color: #617273;
    font-size: 0.92rem;
    line-height: 1.6;
}

.register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.register-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.register-field--full {
    grid-column: 1 / -1;
}

.register-field label {
    color: #274748;
    font-size: 0.84rem;
    font-weight: 600;
}

.register-field input,
.register-field textarea,
.register-field select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #d5e0df;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.98);
    color: #1f2d2d;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* Native <select> styling — strip OS chrome and provide a custom chevron
   so the dropdown matches the rounded teal-tinted look of the inputs.
   The arrow is an inline SVG using the muted text colour so it sits in
   the same hierarchy as the field hints. */
.register-field select {
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7C7C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
}

/* Greyed placeholder option (when value is "") — uses the muted colour
   so the field's "ask state" reads differently from a real selection. */
.register-field select:has(option[value=""]:checked) {
    color: #6B7C7C;
}

.register-field select option {
    color: #1f2d2d;
}

.register-field select::-ms-expand {
    display: none; /* IE legacy chevron */
}

.register-field textarea {
    min-height: 110px;
    resize: vertical;
}

.register-field input:focus,
.register-field textarea:focus,
.register-field select:focus {
    outline: none;
    border-color: var(--walanda-auth-primary);
    box-shadow: 0 0 0 4px rgba(31, 167, 138, 0.12);
}

.password-input-wrap {
    position: relative;
    display: block;
}

.password-input-wrap input {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #6b7d7d;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease;
}

.password-toggle:hover,
.password-toggle:focus {
    color: var(--walanda-auth-primary);
    background: rgba(31, 167, 138, 0.08);
    outline: none;
}

.password-toggle[aria-pressed="true"] {
    color: var(--walanda-auth-primary);
}

/* Hover-affordance on selects only — inputs/textareas don't get this
   because they're click-anywhere; the select's "menu opens on click"
   benefits from a subtle border darken on hover. */
.register-field select:hover {
    border-color: #b9cccb;
}

.register-inline-note {
    margin: -4px 0 0;
    padding: 12px 14px;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    background: linear-gradient(180deg, #fffaf2 0%, #ffffff 100%);
    color: #915b06;
    font-size: 0.84rem;
    line-height: 1.55;
}

.register-summary-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(31, 167, 138, 0.12);
    color: #1a6e5f;
    font-size: 0.82rem;
    font-weight: 600;
}

.role-switch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.role-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid #d5e0df;
    border-radius: 12px;
    background: #ffffff;
    color: #324849;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.role-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(31, 167, 138, 0.12);
}

.role-btn.active {
    border-color: rgba(31, 167, 138, 0.24);
    background: rgba(31, 167, 138, 0.12);
    color: #1a6e5f;
}

.register-role-panels {
    display: grid;
    gap: 18px;
}

.role-panel {
    padding-top: 18px;
    border-top: 1px solid #dbe7e5;
}

.register-actions {
    display: flex;
    gap: 12px;
}

.register-actions .btn-primary,
.register-actions .btn-secondary {
    flex: 1;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 18px;
    border: 1px solid var(--walanda-auth-secondary-border);
    border-radius: 10px;
    background: var(--walanda-auth-secondary);
    color: var(--walanda-auth-secondary-text);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.btn-secondary:hover {
    transform: translateY(-1px);
    border-color: rgba(31, 167, 138, 0.3);
    box-shadow: 0 12px 24px rgba(31, 167, 138, 0.1);
}

/* Status messages now use the same banner pattern as .register-inline-note
   (left-bordered, soft tinted background) so the form feels like it's
   communicating with the user instead of dumping red text. Hidden when
   no message is set so empty containers don't reserve space. */
.register-status {
    margin: 0;
    padding: 12px 14px;
    border-left: 4px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text-dark);
    font-size: 0.84rem;
    line-height: 1.55;
    text-align: left;
}

.register-status:empty {
    display: none;
}

.register-status.is-error {
    border-left-color: #dc2626;
    background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%);
    color: #b91c1c;
}

.register-status.is-success {
    border-left-color: #059669;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
    color: #166534;
}

.register-status.is-info {
    border-left-color: #f59e0b;
    background: linear-gradient(180deg, #fffaf2 0%, #ffffff 100%);
    color: #915b06;
}

/* Fix 11 — inline availability indicator under email / username /
   phone fields. Empty by default; colored when the backend has
   answered. .is-checking is muted, .is-available is success-green,
   .is-taken is error-red. Sits in an existing .register-field-hint
   small element so we inherit the surrounding spacing. */
.register-field-hint[data-availability-status] {
    margin-top: 4px;
    font-weight: 500;
}
.register-field-hint[data-availability-status]:empty {
    display: none;
}
.register-field-hint[data-availability-status].is-checking {
    color: var(--muted);
}
.register-field-hint[data-availability-status].is-available {
    color: #166534;
}
.register-field-hint[data-availability-status].is-taken {
    color: #b91c1c;
}

.register-note {
    margin: 18px 0 0;
    text-align: center;
    color: var(--walanda-auth-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.register-note a {
    color: var(--walanda-auth-primary);
    font-weight: 600;
    text-decoration: none;
}

.register-note a:hover {
    color: var(--walanda-auth-primary-hover);
}

.is-hidden,
[hidden] {
    display: none !important;
}


/* =========================================================
SECTION: components
DESCRIPTION: reusable ui components
========================================================= */


/* =========================================================
SECTION: pages
DESCRIPTION: page-specific styles
========================================================= */


/* =========================================================
SECTION: responsive
DESCRIPTION: media queries and breakpoints
========================================================= */

@media (max-width: 720px) {
    .register-card-shell {
        padding: 28px 22px;
    }

    .register-grid {
        grid-template-columns: 1fr;
    }

    .register-field--full {
        grid-column: auto;
    }

    .register-actions {
        flex-direction: column;
    }
}


/* =========================================================
SECTION: phase-2-stage-3 expansion
DESCRIPTION: 5-step layout, paired explainer panels, role cards.
             Uses ONLY global design tokens from variables.css.
========================================================= */

/* The wider register-card-shell from Step 1 expansion: room for a paired
   explainer panel without crowding. */
.register-wrapper .register-card-shell {
    width: min(100%, 1100px);
}

/* Two-column layout for each step: form on the left, "why we ask" on the
   right. Single column at narrow widths. The section heading sits ABOVE
   this grid (not inside the form-area) so the explainer panel naturally
   top-aligns with the form fields, not with the heading. */
.register-step-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-lg);
    align-items: start;
}

.register-form-area {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.register-explainer-panel {
    position: sticky;
    top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.register-explainer-panel h4 {
    margin: 0 0 var(--space-md);
    color: var(--primary);
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.register-explainer-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.register-explainer-panel li {
    position: relative;
    padding-left: 22px;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.register-explainer-panel li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary);
    font-weight: 700;
}

.register-explainer-panel strong {
    color: var(--text-dark);
}

/* Role cards (Step 1) — replaces the flat .role-switch buttons. */
.role-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
}

.role-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-dark);
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.role-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.role-card.active {
    border-color: var(--primary);
    background: rgba(31, 167, 138, 0.06);
    box-shadow: var(--shadow-md);
}

.role-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(31, 167, 138, 0.12);
    color: var(--primary);
    font-size: 1.2rem;
}

.role-card-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-dark);
}

.role-card-summary {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.5;
}

.role-card-tags {
    margin-top: var(--space-xs);
    font-size: 0.78rem;
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Inline field-hint copy below an input. */
.register-field-hint {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

/* Learner profile-photo upload row. */
.register-avatar-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}
.register-avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--background-muted, #eef2f1);
    border: 1px solid var(--border);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 1.4rem;
}
.register-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.register-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

/* Data Protection Act notice beside the profile-photo upload (instructors). */
.register-dpa-notice {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--status-success-bg, rgba(58, 164, 155, 0.1));
    color: var(--text-dark);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Toggle / checkbox row. */
.register-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-dark);
    font-size: 0.92rem;
    cursor: pointer;
}

.register-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

/* Terms / Privacy anchors inside the consent checkbox. Match the
   footer's lower gradient stop exactly so the user reads the same
   shade in both places (no default-blue browser link styling). */
.register-toggle a {
    color: var(--footer-green);
    font-weight: 600;
    text-decoration: none;
}

.register-toggle a:hover {
    text-decoration: underline;
}

/* Radio group for instructor "kind" selection. */
.register-radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.register-radio {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--text-dark);
    font-size: 0.88rem;
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.register-radio input {
    margin-top: 2px;
    accent-color: var(--primary);
}

.register-radio:hover {
    border-color: var(--primary);
}

.register-radio:has(input:checked) {
    border-color: var(--primary);
    background: rgba(31, 167, 138, 0.06);
}

.register-radio small {
    color: var(--muted);
    font-size: 0.78rem;
}

/* Subsection within a role panel (e.g. guardian section inside learner). */
.role-panel-subsection {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--border);
}

.role-panel-subsection h5 {
    margin: 0 0 var(--space-xs);
    color: var(--text-dark);
    font-size: 0.94rem;
}

.role-panel-subsection p {
    margin: 0 0 var(--space-md);
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.role-panel-intro {
    margin: 0 0 var(--space-md);
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.register-section-subhead h5 {
    margin: 0 0 var(--space-sm);
    color: var(--text-dark);
    font-size: 0.94rem;
    font-weight: 600;
}

/* Step 5 review summary — collapsed sections per prior step. */
.register-review-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.register-review-card {
    padding: var(--space-md) var(--space-lg);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.register-review-card h5 {
    margin: 0 0 var(--space-sm);
    color: var(--primary);
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.register-review-card dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    row-gap: var(--space-xs);
    column-gap: var(--space-md);
    font-size: 0.9rem;
}

.register-review-card dt {
    color: var(--muted);
    font-weight: 500;
}

.register-review-card dd {
    margin: 0;
    color: var(--text-dark);
    overflow-wrap: anywhere;
}

/* Children list (parent role) — repeating row blocks. */
.register-child-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: end;
    margin-bottom: var(--space-sm);
}

.register-child-row .register-field {
    margin: 0;
}

.register-child-row button {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.register-child-row button:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* Institution classification step — grouped grade-level checkboxes. */
.register-levels {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.register-levels-group h4 {
    margin: 0 0 var(--space-sm);
    color: var(--text-dark);
    font-size: 0.92rem;
    font-weight: 700;
}

.register-levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-sm);
}

/* Cascading classroom picker — appears once a grade is selected, on the
   learner registration step. Visually separated from the grade groups
   above with a top border + tinted bg so the relationship is clear. */
.register-levels-classroom-row {
    margin-top: var(--space-sm);
    padding: var(--space-md);
    border: 1px dashed var(--primary);
    border-radius: var(--radius-md);
    background: rgba(31, 167, 138, 0.06);
}

.register-levels-classroom-row h4 {
    margin: 0 0 var(--space-xs);
    color: var(--primary);
    font-size: 0.92rem;
    font-weight: 700;
}

.register-levels-classroom-row .register-field-hint {
    margin: 0 0 var(--space-sm);
}

.register-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text-dark);
    font-size: 0.88rem;
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.register-checkbox input {
    accent-color: var(--primary);
}

.register-checkbox:hover {
    border-color: var(--primary);
}

.register-checkbox:has(input:checked) {
    border-color: var(--primary);
    background: rgba(31, 167, 138, 0.06);
}

/* ====================================================================
   O1.1 — Individual grade picker (nested collapsible categories +
   polished custom-card leaves). Lives on the Step 4 Grade screen
   when STATE.level === "individual". The Pupil / Student grade
   pickers keep the flat .register-checkbox layout above.
   ==================================================================== */

.grade-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Top-level category card — three of these (School / University / Skills) */
.grade-cat-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast);
    overflow: hidden;
}

.grade-cat-card:hover {
    box-shadow: var(--shadow-md);
}

.grade-cat-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 18px var(--space-md);
    cursor: pointer;
    user-select: none;
}

.grade-cat-card__head:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.grade-cat-card__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--status-success-bg, rgba(31, 167, 138, 0.12));
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.grade-cat-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.grade-cat-card__title {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 1rem;
}

.grade-cat-card__sub {
    font-size: 0.82rem;
    color: var(--muted);
}

.grade-cat-card__chevron {
    margin-left: auto;
    color: var(--muted);
    transition: transform var(--transition-fast);
}

.grade-cat-card.is-collapsed .grade-cat-card__chevron {
    transform: rotate(-90deg);
}

.grade-cat-card.is-collapsed .grade-cat-card__body {
    display: none;
}

.grade-cat-card__body {
    padding: 0 var(--space-md) 18px;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Second-level sub-category — only nested inside the School card */
.grade-subcat {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background, #F4F7F8);
    overflow: hidden;
}

.grade-subcat__head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px var(--space-md);
    cursor: pointer;
    user-select: none;
}

.grade-subcat__head:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.grade-subcat__title {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.92rem;
}

.grade-subcat__chevron {
    margin-left: auto;
    color: var(--muted);
    transition: transform var(--transition-fast);
}

.grade-subcat.is-collapsed .grade-subcat__chevron {
    transform: rotate(-90deg);
}

.grade-subcat.is-collapsed .grade-subcat__body {
    display: none;
}

.grade-subcat__body {
    padding: 0 var(--space-md) 14px;
}

/* Leaf grid — actual selectable grade tiles */
.grade-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-sm);
}

/* Polished custom card replacing raw radio for leaf options */
.grade-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 14px var(--space-md);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--text-dark);
    font-size: 0.92rem;
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}

.grade-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.grade-option:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.grade-option:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.grade-option:has(input:checked) {
    border-color: var(--primary);
    background: var(--status-success-bg, rgba(31, 167, 138, 0.12));
    box-shadow: inset 0 0 0 1px var(--primary);
}

.grade-option:has(input:checked)::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--primary);
    margin-left: auto;
}

.grade-option__label {
    flex: 1 1 auto;
    min-width: 0;
}

/* O1.2 — institutional picker extras: programme code badge + the
   "no classrooms registered" hint that appears inside a grade
   subcategory body when its classrooms array is empty. */
.grade-subcat__code {
    color: var(--muted);
    font-weight: 500;
    font-size: 0.84rem;
    margin-left: 4px;
}

.grade-subcat__note {
    margin: 0 0 var(--space-sm);
    padding: 10px var(--space-md);
    background: rgba(31, 167, 138, 0.06);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.4;
}

/* Stack the explainer panel under the form on narrower screens. */
@media (max-width: 960px) {
    .register-step-grid {
        grid-template-columns: 1fr;
    }

    .register-explainer-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .register-radio-group {
        grid-template-columns: 1fr;
    }

    .register-child-row {
        grid-template-columns: 1fr;
    }

    /* Belt-and-braces overflow guard. Any wide table / long URL inside
       the card stays clipped at the card boundary instead of widening
       the viewport. Per-section scrollers (.register-step-grid is
       already 1-col here) handle their own scroll-x. */
    .register-card-shell {
        overflow-x: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }
}


/* =========================================================
SECTION: institution picker (modal)
DESCRIPTION: searchable list of registered schools / universities
========================================================= */

.institution-input-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-sm);
    align-items: stretch;
}

.institution-input-wrap input {
    width: 100%;
}

.institution-picker-trigger {
    border: 1px solid var(--primary);
    background: var(--card);
    color: var(--primary);
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: 0 var(--space-md);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.institution-picker-trigger:hover,
.institution-picker-trigger:focus {
    background: var(--primary);
    color: var(--card);
}

.institution-picker-selected {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--status-success-bg);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 14px;
}

.institution-picker-selected i {
    color: var(--primary);
}

.institution-picker-selected strong {
    flex: 1;
}

.institution-picker-selected button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
}

.institution-picker-selected button:hover {
    color: var(--text-dark);
    border-color: var(--text-dark);
}

.institution-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.institution-modal.open {
    display: flex;
}

.institution-modal-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.institution-modal-head {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}

.institution-modal-head h3 {
    margin: 0 0 4px;
    color: var(--text-dark);
}

.institution-modal-head p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.institution-modal-close {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dark);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.institution-modal-close:hover,
.institution-modal-close:focus-visible {
    background: var(--status-danger-bg, rgba(220, 53, 69, 0.08));
    border-color: var(--status-danger-fg, #b91c1c);
    color: var(--status-danger-fg, #b91c1c);
    outline: none;
}

.institution-modal-controls {
    padding: var(--space-md) var(--space-lg);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
    border-bottom: 1px solid var(--border);
    background: var(--background);
}

.institution-modal-tabs {
    display: inline-flex;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 4px;
}

.institution-modal-tabs button {
    border: none;
    background: transparent;
    color: var(--muted);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.institution-modal-tabs button.active {
    background: var(--primary);
    color: var(--card);
}

.institution-modal-search {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 14px;
    background: var(--card);
    color: var(--text-dark);
}

.institution-modal-search:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--status-success-bg);
}

.institution-modal-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.institution-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: left;
}

.institution-row:hover,
.institution-row:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    outline: none;
}

.institution-row-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--status-success-bg);
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 700;
    overflow: hidden;
}

.institution-row-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.institution-row-body strong {
    display: block;
    color: var(--text-dark);
    font-size: 15px;
    line-height: 1.3;
}

.institution-row-body span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.institution-row-meta {
    color: var(--muted);
    font-size: 12px;
    text-align: right;
    text-transform: capitalize;
}

/* Instructor picker — dual-action rows: Join (membership) + Affiliate (badge).
   The row is not clickable as a whole; the two buttons are the affordances.
   They sit in the row's `auto` third column on desktop. */
.institution-row--dual {
    cursor: default;
}

.institution-row-actions {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.institution-row-actions .btn {
    white-space: nowrap;
}

.institution-modal-empty {
    padding: var(--space-lg);
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 720px) {
    .institution-modal-controls {
        grid-template-columns: 1fr;
    }
    .institution-row {
        grid-template-columns: 36px 1fr;
    }
    .institution-row-meta {
        grid-column: 2 / 3;
        text-align: left;
        margin-top: 4px;
    }
    /* Dual-action buttons drop to a full-width row beneath the school info,
       splitting the width so Join + Affiliate are comfortable thumb targets. */
    .institution-row--dual .institution-row-actions {
        grid-column: 1 / -1;
        margin-top: var(--space-xs);
    }
    .institution-row--dual .institution-row-actions .btn {
        flex: 1;
    }
}

/* ----------------------------------------------------------
   Instructor qualifications + subjects picker
   ----------------------------------------------------------
   Summary block on the Details panel + the picker modal that
   replaces the legacy free-text Subjects / Qualifications
   inputs. Reuses `.institution-modal` chrome for the modal
   shell; the inner views (A/B/C) get their own minimal styles.
---------------------------------------------------------- */

/* Summary block above the trigger button on the Details panel. */
.instructor-quals-summary {
    border: 1px dashed var(--border, #d6e2de);
    border-radius: 14px;
    background: rgba(31, 167, 138, 0.04);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.instructor-quals-summary__empty {
    margin: 0;
    color: var(--muted, #6f7c79);
    font-size: 0.92rem;
    line-height: 1.5;
}
.instructor-quals-summary__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.instructor-quals-summary__row {
    background: var(--card, #ffffff);
    border: 1px solid var(--border, #d6e2de);
    border-radius: 12px;
    padding: 10px 14px;
}
.instructor-quals-summary__row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.instructor-quals-summary__level {
    font-weight: 700;
    color: var(--text-dark, #1f2a26);
    font-size: 0.95rem;
}
.instructor-quals-summary__count {
    font-size: 0.78rem;
    color: var(--muted, #6f7c79);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.instructor-quals-summary__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.instructor-quals-subject-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(31, 167, 138, 0.10);
    color: var(--primary, #1fa78a);
    border: 1px solid rgba(31, 167, 138, 0.30);
    font-size: 0.78rem;
    font-weight: 600;
}

.instructor-quals-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.instructor-quals-summary__cert {
    margin-top: 8px;
}
.instructor-quals-cert-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(31, 167, 138, 0.10);
    color: var(--primary, #1fa78a);
    border: 1px solid rgba(31, 167, 138, 0.30);
    font-size: 0.78rem;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.instructor-quals-cert-chip--missing {
    background: rgba(220, 53, 69, 0.08);
    color: #b91c1c;
    border-color: rgba(220, 53, 69, 0.30);
}

/* ----- Picker modal — three views ----- */

.quals-picker-modal .institution-modal-card {
    max-width: 760px;
}
/* Each view fills the remaining card space and scrolls inside the card so
   the modal-head (with the X close) stays pinned at the top and the
   action buttons stay reachable at the bottom even when subjects + cert
   content overflows. */
.quals-picker-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 24px 22px;
    display: flex;
    flex-direction: column;
}
/* Hidden inactive views must collapse to zero so they don't compete with
   the active view for flex space. */
.quals-picker-view[hidden] {
    display: none !important;
}

/* View A — qualification chips */
.quals-picker-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.quals-picker-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border, #d6e2de);
    border-radius: 12px;
    background: var(--card, #ffffff);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.quals-picker-chip:hover {
    border-color: var(--primary, #1fa78a);
}
.quals-picker-chip--on {
    border-color: var(--primary, #1fa78a);
    background: rgba(31, 167, 138, 0.06);
}
.quals-picker-chip input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary, #1fa78a);
}
.quals-picker-chip span {
    font-weight: 600;
    color: var(--text-dark, #1f2a26);
}

/* View B — per-qualification summary rows */
.quals-picker-hint {
    margin: 0 0 14px;
    color: var(--muted, #6f7c79);
    font-size: 0.88rem;
}
.quals-picker-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.quals-picker-summary-row {
    width: 100%;
    text-align: left;
    background: var(--card, #ffffff);
    border: 1px solid var(--border, #d6e2de);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.quals-picker-summary-row:hover {
    border-color: var(--primary, #1fa78a);
    background: rgba(31, 167, 138, 0.03);
}
.quals-picker-summary-row__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.quals-picker-summary-row__level {
    font-weight: 700;
    color: var(--text-dark, #1f2a26);
}
.quals-picker-summary-row__count {
    font-size: 0.78rem;
    color: var(--muted, #6f7c79);
    font-weight: 600;
}
.quals-picker-summary-row__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.quals-picker-subject-chip {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(31, 167, 138, 0.10);
    color: var(--primary, #1fa78a);
    border: 1px solid rgba(31, 167, 138, 0.30);
    font-size: 0.78rem;
    font-weight: 600;
}
.quals-picker-summary-row__pending {
    font-size: 0.85rem;
    color: var(--muted, #6f7c79);
}
.quals-picker-summary-row__more {
    font-size: 0.78rem;
    color: var(--muted, #6f7c79);
    align-self: center;
}

/* View C — subjects multi-check */
.quals-picker-c-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.quals-picker-c-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--primary, #1fa78a);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
}
.quals-picker-search {
    flex: 1;
}
.quals-picker-subjects {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 18px;
}
.quals-picker-group + .quals-picker-group {
    margin-top: 14px;
}
.quals-picker-group__title {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--muted, #6f7c79);
}
.quals-picker-group__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
}
.quals-picker-subject {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border, #d6e2de);
    border-radius: 10px;
    background: var(--card, #ffffff);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.quals-picker-subject:hover {
    border-color: var(--primary, #1fa78a);
}
.quals-picker-subject--on {
    border-color: var(--primary, #1fa78a);
    background: rgba(31, 167, 138, 0.06);
}
.quals-picker-subject input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary, #1fa78a);
}
.quals-picker-subject span {
    color: var(--text-dark, #1f2a26);
    font-size: 0.92rem;
}

.quals-picker-empty {
    margin: 16px 0;
    color: var(--muted, #6f7c79);
    font-size: 0.92rem;
    text-align: center;
}

/* Credential upload card — sits inside view C above the subjects list. */
.quals-picker-cert-host {
    margin-bottom: 16px;
}
.quals-picker-cert {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px dashed var(--border, #d6e2de);
    border-radius: 14px;
    background: rgba(31, 167, 138, 0.04);
}
.quals-picker-cert--on {
    border-style: solid;
    border-color: var(--primary, #1fa78a);
    background: rgba(31, 167, 138, 0.08);
}
.quals-picker-cert__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--card, #ffffff);
    border: 1px solid var(--border, #d6e2de);
    display: grid;
    place-items: center;
    color: var(--primary, #1fa78a);
    font-size: 22px;
}
.quals-picker-cert__body strong {
    display: block;
    color: var(--text-dark, #1f2a26);
    font-size: 0.95rem;
}
.quals-picker-cert__body p {
    margin: 4px 0 0;
    color: var(--muted, #6f7c79);
    font-size: 0.85rem;
}
.quals-picker-cert__body p.quals-picker-cert__status {
    font-size: 0.82rem;
}
.quals-picker-cert__body p.quals-picker-cert__status[data-kind="error"] { color: #b91c1c; }
.quals-picker-cert__body p.quals-picker-cert__status[data-kind="info"]  { color: var(--primary, #1fa78a); }
.quals-picker-cert__actions {
    display: flex;
    align-items: center;
}
.quals-picker-cert__pick {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.quals-picker-c-status {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(220, 53, 69, 0.30);
    font-size: 0.88rem;
}
.quals-picker-c-status[hidden] { display: none; }

/* Summary cert chip (view B rows) */
.quals-picker-summary-row__cert {
    margin-top: 8px;
}
.quals-picker-cert-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quals-picker-cert-chip--on {
    background: rgba(31, 167, 138, 0.10);
    color: var(--primary, #1fa78a);
    border: 1px solid rgba(31, 167, 138, 0.30);
}
.quals-picker-cert-chip--missing {
    background: rgba(220, 53, 69, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(220, 53, 69, 0.30);
}
.quals-picker-summary-row--incomplete {
    border-color: rgba(220, 53, 69, 0.30);
}

/* Shared actions bar at the bottom of every view. Pinned to the bottom of
   the scrollable view so Done / Cancel / Continue stay reachable even when
   the subjects + cert content is tall. The negative margin / negative
   bottom offset compensate for the view padding (18px 24px 22px) so the
   sticky bar visually butts up to the card edges. */
.institution-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: auto -24px -22px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--border, #d6e2de);
    background: var(--card, #ffffff);
    position: sticky;
    bottom: -22px;
    z-index: 1;
}

/* ----------------------------------------------------------
   Step 2 (Level) + Step 3 (Affiliation) — choice cards
   ----------------------------------------------------------
   Added 22 May 2026 alongside the Role → Level → Affiliation
   wizard restructure. Modelled after .role-card so the visual
   language stays consistent. The --wide modifier is for the
   Affiliation step where the two cards stretch wider so the
   longer copy reads cleanly.
   ---------------------------------------------------------- */

.register-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-md);
}

.register-choice-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-dark);
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.register-choice-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.register-choice-card.active {
    border-color: var(--primary);
    background: rgba(31, 167, 138, 0.06);
    box-shadow: var(--shadow-md);
}

.register-choice-card--wide {
    min-height: 140px;
}

.register-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(31, 167, 138, 0.12);
    color: var(--primary);
    font-size: 1.2rem;
}

.register-choice-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-dark);
}

.register-choice-summary {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.5;
}

/* ----------------------------------------------------------
   Inline institution picker — embedded on Step 3 Affiliation
   ----------------------------------------------------------
   Replaces the legacy modal picker. Same .institution-row
   markup as before, just rendered inline below the
   institutional affiliation card when selected.
   ---------------------------------------------------------- */

/* Single-column variant for steps that don't have an explainer panel
   (the dedicated Picker step uses this — the page heading is enough,
   no need to consume horizontal space with a side panel). */
.register-step-grid--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
}

.institution-inline-search {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--text-dark);
    font: inherit;
    transition: border-color var(--transition-fast);
}

.institution-inline-search:focus {
    outline: none;
    border-color: var(--primary);
}

.institution-inline-list {
    display: grid;
    gap: var(--space-sm);
    max-height: 360px;
    overflow-y: auto;
}

.institution-inline-selected {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(31, 167, 138, 0.08);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    color: var(--text-dark);
}

.institution-inline-selected i {
    color: var(--primary);
    font-size: 1.1rem;
}

.institution-inline-selected strong {
    flex: 1;
    font-weight: 600;
}

.register-affiliation-confirm {
    margin-top: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(31, 167, 138, 0.08);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    color: var(--text-dark);
    font-size: 0.92rem;
}

.register-affiliation-confirm i {
    color: var(--primary);
    font-size: 1.1rem;
}

/* Institutional confirmation row variant — shown on the Affiliation
   step when the user has already picked an institution at the picker
   step. The strong tag holds the institution name, the small tag the
   "use Back to change" hint. */
.register-affiliation-confirm--inst {
    align-items: flex-start;
}

.register-affiliation-confirm--inst strong {
    display: block;
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--text-dark);
}

.register-affiliation-confirm--inst small {
    color: var(--muted);
    font-size: 0.84rem;
}

/* Institution registration document list — one chip per uploaded PDF
   or image. Sits beneath the file input on Step 4 (institution role).
   Imported from feat/register-institution-verification-documents
   (PR #57). */
.register-doc-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.register-doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-md, 8px);
    background: var(--card, #ffffff);
    border: 1px solid var(--border, #d6e2de);
    font-size: 0.85rem;
    color: var(--text-dark, #19342e);
}

.register-doc-chip i {
    color: var(--primary, #1fa78a);
}

.register-doc-chip a {
    color: inherit;
    text-decoration: none;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.register-doc-chip a:hover {
    text-decoration: underline;
}

.register-doc-chip__remove {
    background: transparent;
    border: 0;
    color: var(--muted, #6b7c7c);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-sm, 4px);
}

.register-doc-chip__remove:hover {
    background: var(--status-danger-bg, #ffe6e6);
    color: var(--status-danger-fg, #d33);
}

/* =========================================================
SECTION: publisher kind chooser dialog
DESCRIPTION: shown after the unified Publisher entry card on Step 1
             so the user picks Self-publishing Author vs Publishing
             Company without leaving the role-picker step.
========================================================= */

.register-publisher-chooser {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(900px, calc(100% - 32px));
    width: 100%;
}

.register-publisher-chooser::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.register-publisher-chooser__card {
    background: var(--card, #fff);
    border-radius: var(--radius-lg, 18px);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.32);
    padding: 28px 28px 24px;
}

.register-publisher-chooser__card h3 {
    margin: 0 0 6px;
    font-size: 22px;
    letter-spacing: -0.02em;
}

.register-publisher-chooser__card .muted {
    margin: 0 0 18px;
    color: var(--muted, #6b7c7c);
    font-size: 14px;
    line-height: 1.55;
}

.register-publisher-chooser__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.register-publisher-chooser__footer {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

/* =========================================================
END OF FILE
FILE: register.css
PATH: /src/modules/auth/css/register.css
MODULE: auth
STATUS: stable
MAINTAINED BY: Walanda core system
COPYRIGHT: © 2026 Walanda Inc. Ltd. All rights reserved.
========================================================= */