/* Career portal - the school's brand as accents (navy #272555, gold #E3A81F, DM Sans 400/500/700, 2px cards) on a
   neutral page: near-white in the light theme, near-black in the dark theme. The theme follows the visitor's
   system setting. Navy is for text/buttons on light; gold takes over those jobs on dark, where navy would vanish. */
:root {
    color-scheme: light dark;

    --cp-navy: #272555;
    --cp-gold: #E3A81F;

    --cp-bg: #F4F5F7;            /* page */
    --cp-card: #FFFFFF;          /* cards, inputs */
    --cp-tint: #F7F7FA;          /* grouped sections */
    --cp-text: #1F2433;
    --cp-muted: #5A6178;
    --cp-line: #CDD0DB;
    --cp-heading: #272555;
    --cp-link: #272555;
    --cp-accent: #272555;        /* primary button, progress, checked controls */
    --cp-on-accent: #FFFFFF;
    --cp-focus: #B07F00;         /* 4.5:1+ on white; gold itself is too pale for a focus ring on white */
    --cp-err: #B3261E;
    --cp-shadow: 2px 4px 24px rgb(46 44 111 / 10%);
}
@media (prefers-color-scheme: dark) {
    :root {
        --cp-bg: #131418;
        --cp-card: #1D1E24;
        --cp-tint: #23242B;
        --cp-text: #ECEEF4;
        --cp-muted: #AEB2C2;
        --cp-line: #3C3E4A;
        --cp-heading: #FFFFFF;
        --cp-link: #F0BC45;
        --cp-accent: #E3A81F;
        --cp-on-accent: #1A1A1A;
        --cp-focus: #E3A81F;
        --cp-err: #FF8A80;
        --cp-shadow: 0 2px 16px rgb(0 0 0 / 45%);
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--cp-text);
    background: var(--cp-bg);
}
[hidden] { display: none !important; }
a { color: var(--cp-link); }

.cp-shell { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
.cp-head { text-align: center; padding: 8px 0 20px; }
.cp-logo { max-width: 240px; width: 100%; height: auto; }
.cp-head h1 { font-size: 25px; font-weight: 700; margin: 16px 0 4px; color: var(--cp-heading); }
.cp-head p { margin: 0; color: var(--cp-muted); }

.cp-alert {
    border: 1px solid var(--cp-err); color: var(--cp-err); background: var(--cp-card);
    padding: 12px 16px; margin-bottom: 16px; border-radius: 2px;
}

/* progress */
.cp-steps { list-style: none; display: flex; gap: 8px; margin: 0 0 16px; padding: 0; flex-wrap: wrap; }
.cp-steps li {
    flex: 1 1 140px; font-size: 14px; font-weight: 500; padding: 8px 12px; border-top: 3px solid var(--cp-line);
    color: var(--cp-muted);
}
.cp-steps li.is-active { border-top-color: var(--cp-gold); color: var(--cp-text); font-weight: 700; }
.cp-steps li.is-done { border-top-color: var(--cp-accent); color: var(--cp-text); }

.cp-card {
    background: var(--cp-card); border: 1px solid var(--cp-line); border-radius: 2px; padding: 24px;
    box-shadow: var(--cp-shadow);
}
.cp-h2 { font-size: 19px; font-weight: 700; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; color: var(--cp-heading); }
.cp-bar { width: 6px; height: 22px; background: var(--cp-gold); display: inline-block; }

.cp-group { border: 1px solid var(--cp-line); border-radius: 2px; margin: 0 0 16px; padding: 16px; background: var(--cp-tint); }
.cp-group legend { font-weight: 700; font-size: 16px; padding: 0 8px; color: var(--cp-heading); }
.cp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 640px) { .cp-grid { grid-template-columns: 1fr; } }
.cp-wide { grid-column: 1 / -1; }

.cp-field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; color: var(--cp-text); }
.cp-req { color: var(--cp-err); }
.cp-input, .cp-field input[type=file] {
    width: 100%; font: inherit; color: var(--cp-text); background: var(--cp-card);
    border: 1px solid var(--cp-line); border-radius: 2px; padding: 10px 12px; min-height: 44px;
}
.cp-input::placeholder { color: var(--cp-muted); opacity: 1; }
.cp-input option { background: var(--cp-card); color: var(--cp-text); }
.cp-input option:disabled { color: var(--cp-muted); }
textarea.cp-input { min-height: 88px; resize: vertical; }
.cp-field input[type=file]::file-selector-button {
    font: inherit; font-weight: 500; margin-right: 12px; padding: 6px 12px; border-radius: 2px; cursor: pointer;
    border: 1px solid var(--cp-line); background: var(--cp-tint); color: var(--cp-text);
}
.cp-input:focus-visible, .cp-btn:focus-visible, .cp-radio input:focus-visible, .cp-check input:focus-visible,
.cp-field input[type=file]:focus-visible {
    outline: 2px solid var(--cp-focus); outline-offset: 1px;
}
.cp-has-error .cp-input { border-color: var(--cp-err); }
.cp-err { color: var(--cp-err); font-size: 14px; margin: 4px 0 0; }
.cp-hint { color: var(--cp-muted); font-size: 14px; margin: 8px 0 0; }

.cp-radio-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .cp-radio-row { grid-template-columns: 1fr; } }
.cp-radio {
    display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--cp-line);
    border-radius: 2px; cursor: pointer; font-weight: 500; background: var(--cp-card); color: var(--cp-text);
}
.cp-radio:has(input:checked) { border-color: var(--cp-gold); box-shadow: inset 0 0 0 1px var(--cp-gold); }
.cp-radio input { width: 18px; height: 18px; accent-color: var(--cp-accent); }

.cp-repeat { background: var(--cp-card); border: 1px dashed var(--cp-line); border-radius: 2px; padding: 12px; margin-top: 12px; }
.cp-repeat-foot { text-align: right; margin-top: 12px; }
.cp-add { margin-left: auto; display: block; }
.cp-hidden { display: none; }

.cp-check { margin-bottom: 14px; }
.cp-check label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; color: var(--cp-text); }
.cp-check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--cp-accent); flex: 0 0 auto; }

.cp-nav { display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; }
.cp-btn {
    font: inherit; font-weight: 500; border-radius: 2px; padding: 10px 22px; min-height: 44px; cursor: pointer;
    border: 1px solid var(--cp-line); background: var(--cp-card); color: var(--cp-text); text-decoration: none;
    display: inline-block;
}
.cp-btn-primary { background: var(--cp-accent); border-color: var(--cp-accent); color: var(--cp-on-accent); font-weight: 700; }
.cp-btn-primary:disabled { opacity: .6; cursor: wait; }
.cp-btn-ghost:hover { border-color: var(--cp-accent); }
.cp-done p { margin: 0 0 12px; }
.cp-foot { text-align: center; color: var(--cp-muted); font-size: 14px; margin-top: 24px; }

/* No JavaScript: show everything, one long form. */
.no-js .cp-step { display: block !important; }
.no-js [data-next], .no-js [data-back] { display: none !important; }

.cp-photo { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 4px; }
.cp-photo .cp-field { flex: 1 1 280px; }
.cp-photo-preview {
    width: 96px; height: 120px; object-fit: cover; border-radius: 2px; border: 1px solid var(--cp-line);
    background: var(--cp-tint);
}