/* Training & Recruitment hub and the Join page: the clean workspace style (light surfaces, navy as
   the main colour, gold only for what needs attention). The rest of the site moves to this later. */

.ui {
  --u-bg: #F7F8FA; --u-surface: #FFFFFF; --u-sunken: #F3F4F6; --u-line: #E5E7EB; --u-line-soft: #F0F1F4;
  --u-ink: #111827; --u-ink-2: #374151; --u-muted: #6B7280; --u-faint: #9CA3AF;
  --u-navy: #0E1D54; --u-navy-ink: #FFFFFF; --u-navy-soft: #EEF2FF; --u-navy-text: #0E1D54;
  --u-gold: #EDB302; --u-gold-soft: #FFFBEB; --u-gold-line: #FCD34D; --u-gold-ink: #92400E;
  --u-good: #10B981; --u-good-soft: #ECFDF5; --u-good-ink: #047857;
  --u-bad: #EF4444; --u-bad-soft: #FEF2F2; --u-bad-ink: #B91C1C;
  --u-info: #3B82F6; --u-info-soft: #EFF6FF; --u-info-ink: #1D4ED8;
  --u-warn: #F59E0B;
  --u-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --u-shadow-lg: 0 8px 24px rgba(16, 24, 40, .10);
  --u-radius: 12px;
  background: var(--u-bg); color: var(--u-ink); font-family: var(--body); font-size: 15px; line-height: 1.55;
}
:root[data-theme="dark"] .ui {
  --u-bg: #0B0F1A; --u-surface: #121826; --u-sunken: #0F1420; --u-line: #242C3F; --u-line-soft: #1B2233;
  --u-ink: #E6E9F2; --u-ink-2: #C9CFDD; --u-muted: #9AA3B8; --u-faint: #6B7489;
  --u-navy: #3B5BDB; --u-navy-soft: #1A2342; --u-navy-text: #A9BDF5;
  --u-gold-soft: #2A2410; --u-gold-line: #6B5410; --u-gold-ink: #F7D667;
  --u-good-soft: #0F2A20; --u-good-ink: #6EE7B7; --u-bad-soft: #2C1414; --u-bad-ink: #FCA5A5; --u-info-soft: #0F1E38; --u-info-ink: #93C5FD;
  --u-shadow: none; --u-shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);
}
.ui *, .ui *::before, .ui *::after { box-sizing: border-box; }
.ui h1, .ui h2, .ui h3, .ui h4 { font-family: var(--body); text-transform: none; letter-spacing: -.01em; margin: 0; color: var(--u-ink); line-height: 1.25; }
.ui a:not([class]) { color: var(--u-navy-text); }
.ui p { margin: 0; }
.ui .u-muted { color: var(--u-muted); }
.ui .u-small { font-size: 13px; }
.ui .u-tiny { font-size: 12px; }

/* ---- Shell: section sidebar + content ---- */
.u-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 140px); }
.u-side { background: var(--u-surface); border-right: 1px solid var(--u-line); padding: 22px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; align-self: start; min-height: calc(100vh - 140px); }
.u-side-title { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--u-muted); margin: 0 12px 10px; }
.u-side a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 8px; color: var(--u-ink-2); font-weight: 500; text-decoration: none; }
.u-side a:hover { background: var(--u-sunken); }
.u-side a[aria-current="page"] { background: var(--u-navy); color: var(--u-navy-ink); }
.u-side .u-side-sep { height: 1px; background: var(--u-line); margin: 10px 12px; }
.u-side a.u-side-apply { color: var(--u-gold-ink); }
.u-side a.u-side-apply[aria-current="page"] { background: var(--u-gold); color: #111; }
.u-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--u-gold); color: #111; font-size: 12px; font-weight: 700; }
.u-side-help { margin-top: auto; padding: 14px; border-radius: 10px; background: var(--u-sunken); font-size: 13px; color: var(--u-muted); }
.u-side-help strong { display: block; color: var(--u-ink); margin-bottom: 4px; }
.u-side-help ol { margin: 0; padding-left: 18px; }

.u-main { padding: 28px 36px 56px; max-width: 1240px; width: 100%; }
.u-main.u-narrow { max-width: 880px; margin: 0 auto; }
.u-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.u-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--u-muted); margin-bottom: 4px; }
.u-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.u-head .u-sub { color: var(--u-muted); margin-top: 4px; max-width: 760px; }
.u-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Building blocks ---- */
.u-card { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); padding: 20px 22px; }
.u-card + .u-card { margin-top: 20px; }
.u-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.u-card-h h2 { font-size: 16px; font-weight: 600; }
.u-card-h .u-count { margin-left: 8px; }
.u-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--u-sunken); color: var(--u-ink-2); font-size: 12px; font-weight: 700; }
.u-count.hot { background: var(--u-gold-soft); color: var(--u-gold-ink); }
.u-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.u-grid.even { grid-template-columns: 1fr 1fr; }
.u-stack { display: grid; gap: 20px; align-content: start; }
.u-stack > .u-card + .u-card { margin-top: 0; }

.u-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 13px/1 var(--body); padding: 10px 16px; border-radius: 8px; border: 1px solid transparent; background: var(--u-navy); color: var(--u-navy-ink); cursor: pointer; text-decoration: none; white-space: nowrap; }
.u-btn:hover { filter: brightness(1.12); }
.u-btn:disabled { opacity: .5; cursor: default; }
.u-btn.gold { background: var(--u-gold); color: #111; }
.u-btn.ghost { background: var(--u-surface); color: var(--u-ink-2); border-color: var(--u-line); }
.u-btn.ghost:hover { background: var(--u-sunken); filter: none; }
.u-btn.danger { background: var(--u-bad-soft); color: var(--u-bad-ink); }
.u-btn.good { background: var(--u-good); color: #fff; }
.u-btn.big { font-size: 15px; padding: 13px 24px; }
.u-btn.sm { padding: 7px 12px; font-size: 12px; }
.u-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--u-navy-text); cursor: pointer; text-decoration: none; }
.u-link:hover { text-decoration: underline; }
.u-link.danger { color: var(--u-bad-ink); }

.u-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--u-sunken); color: var(--u-ink-2); white-space: nowrap; }
.u-chip.good { background: var(--u-good-soft); color: var(--u-good-ink); }
.u-chip.bad { background: var(--u-bad-soft); color: var(--u-bad-ink); }
.u-chip.info { background: var(--u-info-soft); color: var(--u-info-ink); }
.u-chip.warn { background: var(--u-gold-soft); color: var(--u-gold-ink); }
.u-chip.navy { background: var(--u-navy-soft); color: var(--u-navy-text); }
.u-cs { display: inline-block; font: 700 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0 7px; border-radius: 5px; background: var(--u-navy-soft); color: var(--u-navy-text); }
.u-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--u-faint); }
.u-dot.app { background: var(--u-info); } .u-dot.train { background: var(--u-good); } .u-dot.cmd { background: var(--u-warn); } .u-dot.bad { background: var(--u-bad); } .u-dot.int { background: #8B5CF6; }
.u-empty { padding: 26px 10px; text-align: center; color: var(--u-muted); font-size: 14px; }
.u-flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 500; background: var(--u-good-soft); color: var(--u-good-ink); border: 1px solid transparent; }
.u-flash.bad { background: var(--u-bad-soft); color: var(--u-bad-ink); }

/* ---- Overview ---- */
.u-pipeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.u-pipe { position: relative; display: flex; flex-direction: column; padding: 14px 16px; border-radius: var(--u-radius); background: var(--u-surface); border: 1px solid var(--u-line); text-decoration: none; color: inherit; }
.u-pipe:hover { border-color: var(--u-navy); }
.u-pipe:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--u-faint); border-right: 2px solid var(--u-faint); transform: translateY(-50%) rotate(45deg); }
.u-pipe .n { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--u-muted); }
.u-pipe strong { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 2px 0; }
.u-pipe .s { font-size: 12px; color: var(--u-muted); }
.u-pipe.hot { background: var(--u-gold-soft); border-color: var(--u-gold-line); }

.u-queue { list-style: none; margin: 0; padding: 0; }
.u-queue li { display: grid; grid-template-columns: 9px minmax(0, 1fr) minmax(0, 200px) auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--u-line-soft); }
.u-queue li:first-child { border-top: 0; padding-top: 4px; }
.u-queue .what { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--u-muted); }
.u-queue .who { font-weight: 600; font-size: 15px; color: var(--u-ink); text-decoration: none; }
.u-queue .who:hover { text-decoration: underline; }
.u-queue .note { font-size: 13px; color: var(--u-muted); }
.u-queue form { margin: 0; }
.u-queue-more { display: block; margin-top: 8px; }

.u-list { list-style: none; margin: 0; padding: 0; }
.u-list > li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--u-line-soft); }
.u-list > li:first-child { border-top: 0; padding-top: 2px; }
.u-list .grow { flex: 1; min-width: 0; }
.u-list .t { font-weight: 600; }
.u-list .d { display: block; font-size: 12px; color: var(--u-muted); }
.u-when { min-width: 92px; font-size: 13px; font-weight: 600; color: var(--u-ink-2); }
.u-when span { display: block; font-weight: 500; color: var(--u-muted); font-size: 12px; }

.u-how { margin: 0; padding: 0; list-style: none; counter-reset: how; }
.u-how li { counter-increment: how; display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 6px 0; font-size: 14px; }
.u-how li::before { content: counter(how); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--u-navy-soft); color: var(--u-navy-text); font-size: 12px; font-weight: 700; }
.u-how li span { color: var(--u-muted); display: block; font-size: 13px; }

/* ---- Tables (applications, trainees, interviews) ---- */
.u-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.u-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--u-muted); padding: 0 12px 10px; border-bottom: 1px solid var(--u-line); }
.u-table td { padding: 12px; border-bottom: 1px solid var(--u-line-soft); vertical-align: middle; }
.u-table tr:last-child td { border-bottom: 0; }
.u-table tbody tr:hover td { background: var(--u-sunken); }
.u-table .u-person { font-weight: 600; color: var(--u-ink); text-decoration: none; }
.u-table .u-person:hover { text-decoration: underline; }
.u-table td.act { text-align: right; white-space: nowrap; }
.u-table-wrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
.u-group-h { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 10px; }
.u-group-h:first-of-type { margin-top: 0; }
.u-group-h h2 { font-size: 15px; font-weight: 700; }
.u-group-h p { color: var(--u-muted); font-size: 13px; }
.u-idle { font-size: 12px; color: var(--u-muted); }
.u-idle.late { color: var(--u-bad-ink); font-weight: 600; }

.u-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.u-pills { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--u-sunken); border: 1px solid var(--u-line); }
.u-pills a { padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--u-ink-2); text-decoration: none; }
.u-pills a[aria-current="page"] { background: var(--u-surface); color: var(--u-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
.u-pills a .u-count { height: 18px; min-width: 18px; font-size: 11px; margin-left: 4px; }
.u-select, .ui input[type="text"], .ui input[type="number"], .ui input[type="search"], .ui input[type="date"], .ui input[type="time"], .ui input[type="datetime-local"], .ui select, .ui textarea {
  font: inherit; font-size: 14px; color: var(--u-ink); background: var(--u-surface); border: 1px solid var(--u-line); border-radius: 8px; padding: 9px 11px; width: 100%; text-transform: none; letter-spacing: 0;
}
.ui textarea { resize: vertical; }
.ui input:focus, .ui select:focus, .ui textarea:focus { outline: 2px solid var(--u-navy); outline-offset: -1px; border-color: transparent; }
.u-filters select { width: auto; }
.u-field { display: grid; gap: 6px; margin-bottom: 14px; }
.u-field > span { font-size: 13px; font-weight: 600; color: var(--u-ink-2); }
.u-field small { color: var(--u-muted); font-size: 12px; }
.u-row { display: flex; gap: 12px; flex-wrap: wrap; }
.u-row > * { flex: 1 1 160px; }
.u-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.u-actions .grow { flex: 1; }
.u-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.u-check input { margin-top: 4px; width: auto; }
.u-choice { display: flex; gap: 8px; flex-wrap: wrap; }
.u-choice label { position: relative; cursor: pointer; }
.u-choice input { position: absolute; opacity: 0; }
.u-choice span { display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--u-line); font-weight: 600; font-size: 14px; background: var(--u-surface); }
.u-choice input:checked + span { background: var(--u-navy); color: var(--u-navy-ink); border-color: var(--u-navy); }
.u-choice input:focus-visible + span { outline: 2px solid var(--u-navy); outline-offset: 2px; }
.u-choice .pass input:checked + span { background: var(--u-good); border-color: var(--u-good); }
.u-choice .fail input:checked + span { background: var(--u-bad); border-color: var(--u-bad); }

/* ---- Person page ---- */
.u-next { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--u-navy); color: #fff; border-radius: var(--u-radius); padding: 22px 26px; margin-bottom: 20px; }
:root[data-theme="dark"] .ui .u-next { background: #1A2A6C; }
.u-next .u-eyebrow { color: #C7D2FE; }
.u-next h2 { color: #fff; font-size: 24px; font-weight: 700; }
.u-next p { color: #C7D2FE; margin-top: 4px; }
.u-next .side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.u-next .side .u-tiny { color: #C7D2FE; }
.u-next.warn { background: #7C2D12; }
.u-next.done { background: var(--u-good-ink); }
.u-next.quiet { background: var(--u-surface); color: var(--u-ink); border: 1px solid var(--u-line); }
.u-next.quiet h2 { color: var(--u-ink); }
.u-next.quiet .u-eyebrow, .u-next.quiet p, .u-next.quiet .side .u-tiny { color: var(--u-muted); }
.u-phases { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.u-phase { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 14px 16px; border-radius: var(--u-radius); background: var(--u-surface); border: 1px solid var(--u-line); }
.u-phase .n { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--u-muted); }
.u-phase .t { font-weight: 600; }
.u-phase .c { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 20px; font-weight: 700; }
.u-phase .bar { grid-column: 1 / 3; height: 6px; border-radius: 3px; background: var(--u-sunken); margin-top: 8px; overflow: hidden; }
.u-phase .bar i { display: block; height: 100%; background: var(--u-good); }
.u-phase.now { border-color: var(--u-navy); box-shadow: inset 0 0 0 1px var(--u-navy); }

.u-steps { list-style: none; margin: 0 0 6px; padding: 0; }
.u-steps-h { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--u-muted); margin: 18px 0 6px; }
.u-steps-h:first-child { margin-top: 0; }
.u-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 9px 0; border-top: 1px solid var(--u-line-soft); }
.u-steps li:first-child { border-top: 0; }
.u-mark { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--u-line); margin-top: 3px; }
.u-steps .done .u-mark { background: var(--u-good); border-color: var(--u-good); }
.u-steps .now .u-mark { border: 5px solid var(--u-navy); }
.u-steps .flag .u-mark { background: var(--u-bad); border-color: var(--u-bad); }
.u-steps .name { font-weight: 600; }
.u-steps .todo .name { color: var(--u-muted); font-weight: 500; }
.u-steps .det { display: block; font-size: 12px; color: var(--u-muted); font-weight: 400; }
.u-steps .state { font-size: 12px; color: var(--u-muted); text-align: right; }
.u-attempts { grid-column: 2 / 4; list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.u-attempts li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 0; border: 0; font-size: 12px; color: var(--u-muted); }
.u-attempts .note { flex-basis: 100%; color: var(--u-ink-2); font-size: 13px; padding-left: 8px; border-left: 2px solid var(--u-line); }

.u-timeline { list-style: none; margin: 0; padding: 0; }
.u-timeline li { display: grid; grid-template-columns: 64px 1fr; gap: 0 12px; padding: 9px 0; border-top: 1px solid var(--u-line-soft); }
.u-timeline li:first-child { border-top: 0; padding-top: 0; }
.u-timeline .d { font-size: 12px; font-weight: 600; color: var(--u-muted); padding-top: 2px; }
.u-timeline .w { font-size: 14px; }
.u-timeline .b { grid-column: 2; font-size: 12px; color: var(--u-muted); }
.u-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.u-facts dt { color: var(--u-muted); }
.u-facts dd { margin: 0; font-weight: 500; }
.u-answers .q { font-weight: 600; margin-top: 16px; }
.u-answers .q:first-child { margin-top: 0; }
.u-answers .a { color: var(--u-ink-2); white-space: pre-wrap; margin-top: 4px; }
.u-answers h3 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--u-muted); margin: 22px 0 4px; }
.u-answers h3:first-child { margin-top: 0; }
.u-notes li { display: block; }
.u-notes li p { white-space: pre-wrap; }

/* ---- Dialogs ---- */
.ui dialog, dialog.u-dialog { border: 1px solid var(--u-line, #E5E7EB); border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--u-surface, #fff); color: var(--u-ink, #111827); box-shadow: var(--u-shadow-lg); }
.ui dialog::backdrop { background: rgba(17, 24, 39, .45); }
.ui dialog form { padding: 22px 24px; }
.ui dialog h2 { font-size: 18px; margin-bottom: 4px; }
.ui dialog .u-sub { color: var(--u-muted); font-size: 13px; margin-bottom: 16px; }

/* ---- Interviews: weekly hours and slots ---- */
.u-hours { display: grid; gap: 8px; }
.u-hour { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 8px; align-items: center; }
.u-hour button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--u-line); background: var(--u-surface); color: var(--u-muted); cursor: pointer; font-size: 18px; line-height: 1; }
.u-hour button:hover { color: var(--u-bad-ink); border-color: var(--u-bad); }
.u-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.u-chips .u-chip button { background: none; border: 0; padding: 0; margin-left: 2px; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; }
.u-live { border-color: var(--u-bad); box-shadow: inset 4px 0 0 var(--u-bad); }
.u-rec { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--u-bad); margin-right: 6px; animation: u-pulse 1.4s infinite; }
@keyframes u-pulse { 50% { opacity: .35; } }

.u-days { display: grid; gap: 18px; }
.u-day h3 { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.u-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.u-slots label { position: relative; cursor: pointer; }
.u-slots input { position: absolute; opacity: 0; }
.u-slots span { display: inline-block; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--u-line); background: var(--u-surface); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.u-slots label:hover span { border-color: var(--u-navy); }
.u-slots input:checked + span { background: var(--u-navy); color: var(--u-navy-ink); border-color: var(--u-navy); }
.u-slots input:focus-visible + span { outline: 2px solid var(--u-navy); outline-offset: 2px; }

/* ---- Settings ---- */
.u-subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--u-line); margin-bottom: 22px; overflow-x: auto; }
.u-subnav a { padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--u-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.u-subnav a[aria-current="page"] { color: var(--u-ink); border-bottom-color: var(--u-navy); }
/* The program and question editors (training-program.js, application-form.js) inside the hub. */
.ui .program-page { padding: 0; max-width: none; }
.ui .program-page .card, .ui .phase-edit { background: var(--u-surface); border: 1px solid var(--u-line); border-top: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); }
.ui .program-page h2, .ui .phase-edit h2 { font-family: var(--body); text-transform: none; letter-spacing: -.01em; font-size: 16px; }
.ui .program-stage-name { font-family: var(--body); text-transform: none; letter-spacing: -.01em; font-size: 18px; margin: 26px 0 10px; }
.ui .step-edit, .ui .stage-edit { background: var(--u-sunken); border-color: var(--u-line); }
.ui .save-bar { background: var(--u-navy); }
.ui .program-page .button, .ui .program-page .button.ghost-dark { font-family: var(--body); text-transform: none; letter-spacing: 0; border-radius: 8px; }

/* ---- Join page ---- */
.u-join-hero { background: var(--u-surface); border-bottom: 1px solid var(--u-line); padding: 64px 0 88px; }
.u-wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.u-join-hero .u-eyebrow { color: var(--u-gold-ink); }
.u-join-hero h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 800; letter-spacing: -.03em; color: var(--u-navy-text); max-width: 760px; }
.u-join-hero .lead { font-size: 18px; color: var(--u-muted); max-width: 620px; margin: 14px 0 26px; }
.u-join-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.u-join-steps { list-style: none; margin: -48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; }
.u-join-steps li { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius); padding: 20px 18px; box-shadow: 0 4px 12px rgba(16, 24, 40, .06); }
.u-join-steps li.now { border-color: var(--u-navy); box-shadow: inset 0 0 0 1px var(--u-navy), 0 4px 12px rgba(16, 24, 40, .06); }
.u-join-steps li.done { opacity: .75; }
.u-join-steps .num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--u-navy-soft); color: var(--u-navy-text); font-weight: 700; margin-bottom: 12px; }
.u-join-steps li.done .num { background: var(--u-good); color: #fff; }
.u-join-steps li.now .num { background: var(--u-navy); color: #fff; }
.u-join-steps h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.u-join-steps p { font-size: 14px; color: var(--u-muted); }
.u-join-body { padding: 28px 0 64px; }
.u-check-list { list-style: none; margin: 0; padding: 0; }
.u-check-list li { position: relative; padding: 7px 0 7px 28px; }
.u-check-list li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 12px; height: 7px; border-left: 2.5px solid var(--u-good); border-bottom: 2.5px solid var(--u-good); transform: rotate(-45deg); }
.u-faq dt { font-weight: 600; margin-top: 12px; }
.u-faq dt:first-child { margin-top: 0; }
.u-faq dd { margin: 2px 0 0; color: var(--u-muted); }
.u-status { border-left: 4px solid var(--u-navy); }
.u-status.good { border-left-color: var(--u-good); }
.u-status.bad { border-left-color: var(--u-bad); }
.u-status h2 { font-size: 20px; margin-bottom: 6px; }
.u-form-section { margin-top: 20px; }
.u-form-section h2 { font-size: 18px; }
.u-q { display: grid; gap: 6px; margin-top: 18px; }
.u-q > .l { font-weight: 600; }
.u-q > .l .req { color: var(--u-bad-ink); }
.u-q > .h { font-size: 13px; color: var(--u-muted); }
.u-q .u-choice { margin-top: 2px; }
.u-agree { padding: 14px; border-radius: 10px; background: var(--u-sunken); border: 1px solid var(--u-line); }

/* ---- Small screens: the sidebar becomes a row of tabs ---- */
@media (max-width: 960px) {
  .u-shell { grid-template-columns: 1fr; }
  .u-side { position: static; min-height: 0; flex-direction: row; overflow-x: auto; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--u-line); }
  .u-side-title, .u-side-help, .u-side .u-side-sep { display: none; }
  .u-side a { white-space: nowrap; }
  .u-main { padding: 22px 16px 48px; }
  .u-grid, .u-grid.even { grid-template-columns: 1fr; }
  .u-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .u-pipe:nth-child(3n)::after { display: none; }
  .u-queue li { grid-template-columns: 9px minmax(0, 1fr) auto; }
  .u-queue .note { grid-column: 2 / 4; grid-row: 2; }
  .u-join-steps { grid-template-columns: 1fr; margin-top: -40px; }
  .u-phases { grid-template-columns: 1fr; }
  .u-hour { grid-template-columns: 1fr 1fr; }
  .u-wrap { padding: 0 16px; }
  .u-join-hero { padding: 44px 0 72px; }
  .u-table-wrap { margin: 0 -22px; }
}
.u-answers-open { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--u-line-soft); }
.u-more > summary { margin-top: 14px; list-style: none; }
.u-more > summary::-webkit-details-marker { display: none; }
.u-more[open] > .u-answers { margin-top: 14px; }

/* ---- The exam paper ---- */
.ui .exam-timer { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ui .exam-timer strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.ui .exam-timer.low { background: var(--u-bad-soft); color: var(--u-bad-ink); }
.ui .exam-q { border: 1px solid var(--u-line); margin: 0 0 12px; }
.ui .exam-q legend { float: left; width: 100%; font-weight: 600; margin-bottom: 10px; padding: 0; }
.ui .exam-q legend + * { clear: both; }
.ui .exam-n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; background: var(--u-navy-soft); color: var(--u-navy-text); font-size: 13px; margin-right: 6px; }
.ui .exam-option { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--u-line); border-radius: 8px; margin-top: 6px; cursor: pointer; }
.ui .exam-option:hover { background: var(--u-sunken); }
.ui .exam-option:has(input:checked) { border-color: var(--u-navy); background: var(--u-navy-soft); }
.ui .exam-option input { margin-top: 5px; width: auto; }
.u-table select { width: auto; max-width: 200px; padding: 6px 8px; font-size: 13px; }
.ui a { text-decoration: none; }
.u-list a.t, .u-list .t { color: var(--u-ink); }
.u-list a.t:hover, .u-queue .who:hover, .u-table .u-person:hover { text-decoration: underline; }
.u-card > p + form, .u-card > p + .u-field, .u-card > p + div { margin-top: 14px; }
.u-hour { grid-template-columns: minmax(120px, 1.3fr) 1fr 1fr 34px; }
.u-zone { font-weight: 600; color: var(--u-ink-2); }
/* Phase cards: count beside the label, title on its own line, so narrow cards don't squash. */
.u-phase { grid-template-columns: 1fr auto; }
.u-phase .n { grid-row: 1; grid-column: 1; }
.u-phase .c { grid-row: 1; grid-column: 2; font-size: 14px; align-self: start; }
.u-phase .t { grid-row: 2; grid-column: 1 / 3; }
.u-phase .bar { grid-row: 3; }
/* The site's main-menu link styles don't apply to the hub's own navs. */
.ui nav a, .ui nav a:hover { background: none; }
.ui .u-subnav a[aria-current="page"] { background: none; color: var(--u-ink); }
.ui .u-pills a[aria-current="page"] { background: var(--u-surface); color: var(--u-ink); }
.ui .u-pills a, .ui .u-subnav a { color: var(--u-muted); }
.ui nav.u-pipeline a { color: var(--u-ink); }
@media (max-width: 960px) {
  .u-pipe .s { display: none; }
  .u-pipe strong { font-size: 22px; }
}
@media (max-width: 960px) {
  .u-join-steps { gap: 8px; }
  .u-join-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 0 12px; align-items: center; padding: 12px 14px; }
  .u-join-steps .num { margin: 0; grid-row: 1 / 3; }
  .u-join-steps h3 { margin: 0; font-size: 15px; }
  .u-join-steps li:not(.now) p { display: none; }
}
.u-daytabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; }
.u-daytabs button { flex: none; display: grid; gap: 2px; min-width: 64px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--u-line); background: var(--u-surface); color: var(--u-ink-2); cursor: pointer; font: inherit; text-align: center; }
.u-daytabs button span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--u-muted); }
.u-daytabs button strong { font-size: 14px; }
.u-daytabs button[aria-selected="true"] { background: var(--u-navy); border-color: var(--u-navy); color: var(--u-navy-ink); }
.u-daytabs button[aria-selected="true"] span { color: #C7D2FE; }

/* ==== Personnel ==== */
.u-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.u-stats .u-pipe::after { display: none; }
.u-units { list-style: none; margin: 0 0 6px; padding: 0; }
.u-units li { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(80px, 1.3fr) 56px 90px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--u-line-soft); font-size: 14px; }
.u-units li:first-child { border-top: 0; }
.u-units a { color: var(--u-ink); font-weight: 600; }
.u-units-n { font-variant-numeric: tabular-nums; color: var(--u-muted); text-align: right; }
.u-units .u-chip { justify-self: start; }
.u-bar { height: 6px; border-radius: 3px; background: var(--u-sunken); overflow: hidden; }
.u-bar i { display: block; height: 100%; background: var(--u-navy); }
.ui .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.u-late { color: var(--u-bad-ink); font-weight: 600; }
.u-hint { margin: -6px 0 14px; }
.u-log tr.is-former td { color: var(--u-muted); }
.u-log .num { text-align: right; }

/* Roster rows (driven by roster.js: search, hide vacant, drag to move, hire). */
.ui .area { display: grid; gap: 16px; }
.ui .area[hidden] { display: none; }
.ui .r-area-name { font-size: 15px; font-weight: 700; margin: 10px 0 -4px; }
.ui .r-section { padding: 6px 0 4px; }
.ui .r-section[hidden] { display: none; }
.ui .r-fold > summary { list-style: none; cursor: pointer; padding: 10px 22px 4px; margin: 0; }
.ui .r-fold > summary::-webkit-details-marker { display: none; }
.ui .r-fold > summary h2::before { content: ""; display: inline-block; width: 7px; height: 7px; border-right: 2px solid var(--u-muted); border-bottom: 2px solid var(--u-muted); transform: rotate(45deg); margin: 0 10px 3px 0; transition: transform .15s; }
.ui .r-fold:not([open]) > summary h2::before { transform: rotate(-45deg); }
.ui .r-cols, .ui .r-row { grid-template-columns: 70px minmax(150px, 1.3fr) minmax(130px, 1fr) minmax(160px, 1.5fr) 56px 96px 70px; padding: 0 22px; gap: 12px; }
.ui .r-cols { color: var(--u-muted); border-bottom: 1px solid var(--u-line); font-size: 11px; padding-top: 8px; padding-bottom: 8px; }
.ui .r-row { border-top: 1px solid var(--u-line-soft); min-height: 46px; font-size: 14px; color: var(--u-ink); }
.ui .r-row:hover { background: var(--u-sunken); }
.ui .r-row.is-vacant { background: none; color: var(--u-muted); }
.ui .r-row.is-vacant .u-cs { background: transparent; color: var(--u-faint); box-shadow: inset 0 0 0 1.5px var(--u-line); }
.ui .r-row.is-vacant:hover { background: var(--u-sunken); }
.ui .vacant-label { font-style: italic; color: var(--u-faint); }
.ui .r-rank, .ui .r-duties, .ui .r-hired { color: var(--u-ink-2); }
.ui .r-duties, .ui .r-hired, .ui .r-badge { font-size: 13px; }
.ui .r-badge { color: var(--u-muted); font-variant-numeric: tabular-nums; }
.ui .r-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ui .r-name .u-chips .u-chip { padding: 1px 8px; font-size: 11px; }
.ui .r-act { text-align: right; }
.ui .move-button { opacity: .0; }
.ui .r-row:hover .move-button, .ui .move-button:focus-visible { opacity: 1; }
.ui .r-row.drop-target.drop-hover, body.is-moving .ui .r-row.drop-target:hover { background: var(--u-good-soft); box-shadow: inset 4px 0 0 var(--u-good); }
.ui .moving-banner { background: var(--u-navy); border-top: 0; border-radius: 12px; }
@media (max-width: 960px) {
  .u-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui .r-cols { display: none; }
  .ui .r-row { grid-template-columns: 60px 1fr auto; padding: 8px 14px; }
  .ui .r-duties, .ui .r-hired, .ui .r-badge { display: none; }
  .ui .r-rank { grid-column: 2; font-size: 12px; }
  .ui .move-button { opacity: 1; }
  .u-units li { grid-template-columns: 1fr 50px 80px; }
  .u-units .u-bar { display: none; }
}

/* Profiles */
.u-profile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.u-profile-head .grow { flex: 1; min-width: 220px; }
.u-profile-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.u-profile-head .u-sub { color: var(--u-muted); margin: 4px 0 8px; }
.u-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--u-sunken); box-shadow: 0 0 0 3px var(--u-surface), 0 0 0 5px var(--u-gold); flex: none; }
.u-profile-head .chip { font-size: 11px; }
.u-going { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.u-going-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--u-surface); border: 1px solid var(--u-line); font-size: 13px; }
.u-going-item strong { display: block; font-size: 13px; }
.u-going-item span:not(.u-dot) { color: var(--u-muted); }
.u-going-item.good .u-dot { background: var(--u-good); } .u-going-item.warn .u-dot { background: var(--u-warn); } .u-going-item.bad .u-dot { background: var(--u-bad); } .u-going-item.info .u-dot { background: var(--u-info); }
.u-pstats { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius); margin-bottom: 20px; overflow: hidden; }
.u-pstat { display: flex; flex-direction: column; padding: 12px 20px; border-right: 1px solid var(--u-line-soft); }
.u-pstat span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--u-muted); }
.u-pstat strong { font-size: 18px; font-weight: 700; }
.u-pstat small { font-size: 12px; font-weight: 500; color: var(--u-muted); }
.u-pstat.bad strong { color: var(--u-bad-ink); } .u-pstat.warn strong { color: var(--u-gold-ink); }
.u-pstats .mini-rack { margin: 8px 12px 8px auto; }
.ui .tab-panel[hidden] { display: none; }
.ui .u-single { display: block; }
.ui .profile-tab-nav a .tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--u-sunken); font-size: 11px; margin-left: 4px; }
.ui .profile-tab-nav a[aria-selected="true"] { color: var(--u-ink); border-bottom-color: var(--u-navy); }
.ui .actions-menu { position: relative; }
.ui .actions-menu > summary { font: 600 13px/1 var(--body); text-transform: none; letter-spacing: 0; padding: 11px 16px; border-radius: 8px; background: var(--u-navy); color: #fff; border: 0; }
.ui .actions-list { background: var(--u-surface); border-color: var(--u-line); box-shadow: var(--u-shadow-lg); }
.ui .menu-item { color: var(--u-ink); font-size: 14px; }
.ui .menu-item:hover { background: var(--u-sunken); }
.ui .menu-sep { height: 1px; background: var(--u-line); margin: 4px 6px; }

/* Older cards and dialogs inside the new style (profiles, the Employment Log's hire dialogs):
   restyled here so they match without rewriting each one. */
.u-legacy .card { background: var(--u-surface); border: 1px solid var(--u-line); border-top: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); padding: 20px 22px; color: var(--u-ink); }
.u-legacy .card + .card { margin-top: 0; }
.u-legacy .card h2, .u-legacy .card h3, .u-legacy dialog h2 { font-family: var(--body); text-transform: none; letter-spacing: -.01em; color: var(--u-ink); }
.u-legacy .card h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.u-legacy .card h3 { font-size: 14px; font-weight: 700; }
.u-legacy .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.u-legacy .card-head h2 { margin: 0; }
.u-legacy .muted { color: var(--u-muted); }
.u-legacy .button { font: 600 13px/1 var(--body); text-transform: none; letter-spacing: 0; padding: 10px 16px; border-radius: 8px; background: var(--u-navy); color: #fff; border: 1px solid transparent; }
.u-legacy .button:hover { filter: brightness(1.12); background: var(--u-navy); color: #fff; }
.u-legacy .button.ghost, .u-legacy .button.ghost-dark { background: var(--u-surface); color: var(--u-ink-2); border-color: var(--u-line); }
.u-legacy .button.small { padding: 7px 12px; font-size: 12px; }
.u-legacy .button.danger, .u-legacy .button.danger.solid { background: var(--u-bad-soft); color: var(--u-bad-ink); border-color: transparent; }
.u-legacy .chip { border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.u-legacy .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 0; }
.u-legacy .field { padding: 8px 0; border-top: 1px solid var(--u-line-soft); }
.u-legacy .field dt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--u-muted); }
.u-legacy .field dd { margin: 2px 0 0; }
.u-legacy .dash-list li, .u-legacy .history-list li { border-color: var(--u-line-soft); }
.u-legacy dialog, .u-legacy .modal { border: 1px solid var(--u-line); border-radius: 14px; background: var(--u-surface); color: var(--u-ink); box-shadow: var(--u-shadow-lg); }
.u-legacy .field-label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--u-ink-2); font-family: var(--body); }
.u-legacy input[type="text"], .u-legacy input[type="number"], .u-legacy input[type="date"], .u-legacy input[type="datetime-local"], .u-legacy input[type="search"], .u-legacy select, .u-legacy textarea { font: inherit; font-size: 14px; color: var(--u-ink); background: var(--u-surface); border: 1px solid var(--u-line); border-radius: 8px; padding: 9px 11px; }
.u-legacy .tabs { border-bottom-color: var(--u-line); }
.u-legacy .flash { border-radius: 10px; }
.u-legacy .text-link { color: var(--u-navy-text); font-weight: 600; }
.ui .menu-item.danger { color: var(--u-bad-ink); }
.ui .menu-item.danger:hover { background: var(--u-bad-soft); }
.ui .profile-tab-nav { background: none; border-radius: 0; padding: 0; }
.ui .profile-tab-nav a { font: 600 14px var(--body); text-transform: none; letter-spacing: 0; color: var(--u-muted); background: none; border-radius: 0; padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ui .profile-tab-nav a:hover { color: var(--u-ink); }
.u-timeline a.t, .u-list a.t { color: var(--u-ink); font-weight: 600; }
.u-timeline a.t:hover { text-decoration: underline; }
.u-legacy .link-button { font: 600 12px var(--body); text-decoration: none; color: var(--u-navy-text); margin-right: 8px; }
.u-legacy .link-button.danger, .u-legacy .link-button.danger-link, .u-legacy form .link-button[type="submit"] { color: var(--u-bad-ink); }
.u-legacy .link-button:hover { text-decoration: underline; }