/* =========================================================================
   MasonOS Applicant Portal — consolidated design system.
   One token set derived from the documented Mason palette (UI_DESIGN_SYSTEM.md
   + REBUILD_DESIGN_BRIEF §13). Deep navy/slate primary, Mason red as controlled
   emphasis, accessible blue for interaction, neutral greys, white card surfaces.
   All colors meet WCAG AA contrast against their documented backgrounds.
   ========================================================================= */

:root {
    /* Brand */
    --mason-navy: #1d262f;      /* header / primary buttons */
    --mason-navy-700: #263241;
    --mason-slate: #2c3e50;     /* headings */
    --mason-red: #c00000;       /* controlled emphasis / required / errors */
    --mason-blue: #235787;      /* interactive text, completed steps (AA on white) */
    --mason-blue-600: #2c6ba0;
    --mason-blue-accent: #3498db;
    --mason-gold: #c59d42;

    /* Neutrals */
    --canvas: #f4f4f3;
    --surface: #ffffff;
    --surface-alt: #eef1f4;
    --ink: #1e2a38;
    --muted: #5b6670;           /* AA on white */
    --border: #d3d9df;
    --grey-step: #6b747c;       /* not-completed step */

    /* Status */
    --success: #1e7e34;
    --success-bg: #e7f4ec;
    --warning: #8a6d0b;
    --warning-bg: #fbf3d9;
    --error: #b02a1f;
    --error-bg: #fbeae8;

    /* Metrics */
    --radius: 8px;
    --radius-sm: 5px;
    --shadow-card: 0 1px 3px rgba(20, 30, 45, .10), 0 1px 2px rgba(20, 30, 45, .06);
    --shadow-raised: 0 4px 14px rgba(20, 30, 45, .12);
    --focus-ring: 0 0 0 3px rgba(52, 152, 219, .55);
    /* Content shell width. Wide desktop makes effective use of ~1280px (target 1200–1320px); normal
       desktop is fluid under the cap (generous, never edge-to-edge thanks to the 1rem gutter); tablet/
       mobile fluid. NOTE (measured, not guessed): git history shows this token was a constant 880px from
       the design-system commit (e39866b7) through HEAD — there was no earlier "wider" baseline that a prior
       pass narrowed, so this is an absolute widen to the requested 1200–1320px target, not a % of an old width. */
    --container: 1280px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--canvas);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4 { color: var(--mason-slate); line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }

a { color: var(--mason-blue); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--mason-blue-600); }

/* ---- Accessibility: skip link + visible focus everywhere ---- */
.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 1000;
    background: var(--mason-navy); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--mason-blue-accent); outline-offset: 2px; border-radius: 3px; }

/* ---- Header / shell chrome ---- */
.app-header {
    background: var(--mason-navy);
    color: #fff;
    border-bottom: 3px solid var(--mason-red);
}
.app-header__inner {
    max-width: var(--container); margin: 0 auto; padding: .6rem 1rem;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.app-brand { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.app-brand img { height: 44px; width: auto; display: block; }
.app-brand__title { display: flex; flex-direction: column; line-height: 1.15; }
.app-brand__title .lead { font-weight: 700; font-size: 1rem; letter-spacing: .01em; }
.app-brand__title .sub { font-size: .78rem; color: #c7ced6; }
.app-nav { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---- Page title band (dynamic) ---- */
.page-band {
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.page-band__inner {
    max-width: var(--container); margin: 0 auto; padding: 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.page-band h1 { margin: 0; }

/* ---- Main + container ---- */
main { flex: 1 0 auto; width: 100%; }
.container { max-width: var(--container); margin: 0 auto; padding: 1.25rem 1rem 2.5rem; }

/* ---- Cards / section grouping ---- */
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-card); margin: 0 0 1.25rem;
}
.card__body { padding: 1.1rem 1.15rem; }
.field-group { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0 0 1rem; overflow: hidden; }
.field-group__head {
    background: var(--surface-alt); padding: .55rem .85rem; font-weight: 600; color: var(--mason-slate);
    display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--border);
}
.field-group__body { padding: .9rem .85rem; }

/* ---- Forms ---- */
.field { margin: 0 0 1rem; }
.field > label { display: block; font-weight: 600; margin: 0 0 .3rem; color: var(--mason-slate); }
.req { color: var(--mason-red); font-weight: 700; }
.field .hint { display: block; font-size: .82rem; color: var(--muted); margin: .15rem 0 0; }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], input[type=password], select, textarea {
    width: 100%; padding: .55rem .65rem; font: inherit; color: var(--ink);
    background: #fff; border: 1px solid #b9c1c9; border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus { border-color: var(--mason-blue-accent); box-shadow: var(--focus-ring); outline: none; }
textarea { min-height: 6rem; resize: vertical; }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true],
.input-validation-error { border-color: var(--error) !important; background: var(--error-bg); }

.grid { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; gap: 0 1rem; grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 640px) { .grid, .grid-3 { grid-template-columns: 1fr; } }

fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0 0 1rem; padding: .6rem .85rem 1rem; }
legend { font-weight: 600; color: var(--mason-slate); padding: 0 .35rem; }
.choice { display: flex; align-items: flex-start; gap: .5rem; margin: .35rem 0; }
.choice input { width: auto; margin-top: .2rem; }
/* Skill-group checkboxes: one column on mobile, two on ordinary desktop/tablet, three on wide desktop. */
.choice-grid { display: grid; grid-template-columns: 1fr; gap: 0 1.25rem; }
@media (min-width: 641px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .choice-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    font: inherit; font-weight: 600; padding: .55rem 1.05rem; border-radius: var(--radius-sm);
    border: 1px solid transparent; text-decoration: none; line-height: 1.2;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--mason-navy); color: #fff; border-color: var(--mason-navy); }
.btn-primary:hover { background: var(--mason-navy-700); color: #fff; }
.btn-secondary { background: #fff; color: var(--mason-navy); border-color: var(--mason-navy); }
.btn-secondary:hover { background: var(--surface-alt); color: var(--mason-navy); }
.btn-danger { background: var(--mason-red); color: #fff; border-color: var(--mason-red); }
.btn-danger:hover { background: #a30000; color: #fff; }
.btn-sm { padding: .35rem .7rem; font-size: .85rem; }
.btn-link { background: none; border: none; color: var(--mason-blue); text-decoration: underline; padding: .2rem; }
.form-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.form-actions .spacer { margin-left: auto; }

/* ---- Progress hub ---- */
.progress-summary { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.progress-bar { flex: 1 1 220px; height: 12px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.progress-bar__fill { height: 100%; background: var(--mason-blue); border-radius: 999px; transition: width .3s ease; }
.progress-count { font-weight: 700; color: var(--mason-slate); white-space: nowrap; }
.section-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.section-item {
    display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border-bottom: 1px solid var(--border);
}
.section-item__icon {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
    color: #fff; font-size: .8rem; background: var(--grey-step);
}
.section-item.is-complete .section-item__icon { background: var(--mason-blue); }
.section-item.is-placeholder { opacity: .8; }
.section-item.is-placeholder .section-item__icon { background: var(--grey-step); }
.section-item__label { flex: 1 1 auto; }
.section-item__label small { color: var(--muted); display: block; }

/* ---- Dashboard section-card grid (three columns on wide desktop, two on ordinary desktop/tablet,
       one on mobile). Normal grid flow preserves the exact rules-engine order at every breakpoint.
       Deliberate bottom margin separates the final card from the page edge (no awkward collision). ---- */
.section-grid {
    list-style: none; margin: 1rem 0 1.75rem; padding: 0;
    display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) { .section-grid { grid-template-columns: 1fr; } }
@media (min-width: 1200px) { .section-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.section-card { display: flex; }
.section-card__link {
    display: flex; align-items: center; gap: .75rem; width: 100%;
    padding: .7rem .8rem; text-decoration: none; color: var(--ink);
    background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--grey-step);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
}
.section-card__link:hover { border-color: var(--mason-blue); box-shadow: var(--shadow-raised); color: var(--ink); }
.section-card__icon {
    width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface-alt); color: var(--grey-step); border: 1px solid var(--border);
}
.section-card__icon .sec-ico { display: block; }
.section-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.section-card__title { font-weight: 600; color: var(--mason-slate); }
.section-card__meta { font-size: .8rem; color: var(--muted); }
.section-card__badge {
    flex: 0 0 auto; font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface-alt); color: var(--muted); white-space: nowrap;
}
/* State treatments distinguished by border, icon, AND badge text — never color alone. */
.section-card[data-state=complete] .section-card__link { border-left-color: var(--success); }
.section-card[data-state=complete] .section-card__icon { background: var(--success-bg); color: var(--success); border-color: #a9d5ba; }
.section-card__badge[data-state=complete] { background: var(--success-bg); color: #14612a; border-color: #a9d5ba; }
.section-card[data-state=next] .section-card__link { border-left-color: var(--mason-blue); }
.section-card[data-state=next] .section-card__icon { background: #e6eef6; color: var(--mason-blue); border-color: #bcd2e6; }
.section-card__badge[data-state=next] { background: #e6eef6; color: var(--mason-blue); border-color: #bcd2e6; }
.section-card[data-state=outstanding] .section-card__link { border-left-color: var(--warning); }
.section-card__badge[data-state=outstanding] { background: var(--warning-bg); color: #6b540a; border-color: #d9c27a; }

/* ---- Section guidance + repeatable entry cards (employer, references, etc.) ---- */
.section-guidance { color: var(--muted); margin: 0 0 1rem; }
.entry-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-card); margin: 0 0 1rem; overflow: hidden;
}
.entry-card__head {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem;
    padding: .7rem .9rem; background: var(--surface-alt); font-weight: 600; color: var(--mason-slate);
}
.entry-card__head::-webkit-details-marker { display: none; }
.entry-card__head::before { content: "\25B8"; color: var(--muted); font-size: .85em; }
.entry-card[open] > .entry-card__head::before { content: "\25BE"; }
.entry-card[open] > .entry-card__head { border-bottom: 1px solid var(--border); }
.entry-card__title { flex: 1 1 auto; }
.entry-card__body { padding: 1rem .95rem; }
.entry-group { margin: 0 0 1rem; }
.repeat-grid { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
.repeat-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .repeat-grid { grid-template-columns: 1fr; } }
.confirm-delete { margin-top: .5rem; }
.confirm-delete > summary { display: inline-flex; cursor: pointer; color: var(--mason-red); font-size: .85rem; font-weight: 600; }
.confirm-delete__panel {
    border: 1px solid #d9c27a; border-radius: var(--radius-sm); background: var(--warning-bg);
    padding: .7rem .85rem; margin-top: .5rem;
}
.confirm-delete__panel p { margin: 0 0 .6rem; }

/* ---- Free-text chips (positions held, summary of duties) ---- */
.chip-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
    display: inline-flex; align-items: center; gap: .35rem; background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: 999px; padding: .15rem .3rem .15rem .6rem; font-size: .85rem;
}
.chip__remove {
    display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;
    border: none; border-radius: 50%; background: var(--grey-step); color: #fff; cursor: pointer; line-height: 1;
    font-size: .9rem; padding: 0;
}
.chip__remove:hover { background: var(--mason-red); }
.chip-add { display: flex; gap: .5rem; align-items: center; }
.chip-add .chip-input { flex: 1 1 auto; }

/* ---- Wage (single canonical hourly slider + live dual display) ---- */
.wage-field { display: flex; flex-direction: column; gap: .4rem; }
.wage-controls { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.wage-slider { flex: 1 1 220px; max-width: 420px; min-width: 160px; }
.wage-display { font-weight: 700; color: var(--mason-slate); white-space: nowrap; }

/* ---- Employer lookup modal ---- */
.lookup-modal {
    position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
    background: rgba(20, 30, 45, .5); padding: 1rem;
}
.lookup-modal[hidden] { display: none; }
.lookup-modal__panel {
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-raised);
    max-width: 560px; width: 100%; max-height: 85vh; overflow: auto; padding: 1.2rem 1.25rem;
}
.lookup-results { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.lookup-result {
    display: block; width: 100%; text-align: left; cursor: pointer; padding: .6rem .75rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; color: var(--ink);
}
.lookup-result:hover { border-color: var(--mason-blue); background: var(--surface-alt); }
.lookup-result strong { display: block; color: var(--mason-slate); }

/* ---- Save-state indicator ---- */
.save-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; }
.save-status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); }
.save-status[data-state=saving] { color: var(--muted); }
.save-status[data-state=saving]::before { background: var(--warning); }
.save-status[data-state=saved] { color: var(--success); }
.save-status[data-state=saved]::before { background: var(--success); }
.save-status[data-state=error] { color: var(--error); }
.save-status[data-state=error]::before { background: var(--error); }
.save-status[data-state=idle] { color: var(--muted); }

/* ---- Alerts / validation summary ---- */
.alert { border: 1px solid; border-radius: var(--radius-sm); padding: .75rem .9rem; margin: 0 0 1.1rem; }
.alert-error { background: var(--error-bg); border-color: var(--error); color: #7c1c14; }
.alert-warning { background: var(--warning-bg); border-color: #d9c27a; color: #6b540a; }
.alert-success { background: var(--success-bg); border-color: #a9d5ba; color: #14612a; }
.validation-summary-errors ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.field-validation-error, .text-danger { color: var(--error); font-size: .85rem; display: block; margin-top: .25rem; }

/* ---- Status pills ---- */
.pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.pill-inprogress { background: var(--warning-bg); color: #6b540a; }
.pill-submitted { background: var(--success-bg); color: #14612a; }

/* ---- Footer + EEO ---- */
.app-footer { flex-shrink: 0; background: var(--surface); border-top: 1px solid var(--border); margin-top: auto; }
.app-footer__inner { max-width: var(--container); margin: 0 auto; padding: 1.1rem 1rem 1.4rem; }
/* Legal text kept verbatim; only its wrapping improves. Measure widened to ~93ch — measured, not guessed:
   commit 031c41c0 ADDED the 78ch cap to a previously uncapped .eeo (i.e. 78ch was itself the narrowing, not
   a reduction of a narrower original). The original pre-031c41c0 width was the full container content
   (~143ch in the 880px shell); ~93ch ≈ 65% of that original (35% narrower than original), splitting the
   difference above the current overly-narrow 78ch. Centered + balanced lines so the company name never
   wraps alone; copyright stays a separate line. */
.eeo { font-size: .74rem; color: #6c7075; text-align: center; margin: 0 auto .5rem; max-width: 93ch; text-wrap: balance; }
.copyright { font-size: .74rem; color: #8a9098; text-align: center; margin: .6rem 0 0; }

.muted { color: var(--muted); }
.text-center { text-align: center; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- Print (used by review; the real PDF is server-generated) ---- */
@media print {
    .app-header, .app-nav, .app-footer .copyright, .form-actions, .save-status, .btn { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border-color: #999; break-inside: avoid; }
}