/* ══════════════════════════════════════════════════════════
   APHIAS 360 — ATRIUM
   ══════════════════════════════════════════════════════════
   Modern app shell. Bloomberg-meets-Stripe. Schibsted Grotesk
   display + Albert Sans body + DM Mono numerics. Cool stone
   ground, electric cobalt accent, panels, dense data rows.
   ══════════════════════════════════════════════════════════ */

:root {
    /* Palette */
    --bg:         #f1efe9;
    --bg-alt:     #e8e5dd;
    --panel:      #ffffff;
    --panel-alt:  #fbfaf6;
    --ink:        #14171c;
    --ink-2:      #2e3138;
    --ink-soft:   #6b7079;
    --ink-faint:  #a2a6ad;

    --blue:       #1f4eb8;
    --blue-soft:  rgba(31, 78, 184, 0.10);
    --blue-tint:  rgba(31, 78, 184, 0.08);

    --red:        #b8331f;
    --red-soft:   rgba(184, 51, 31, 0.08);
    --green:      #296b3e;
    --green-soft: rgba(41, 107, 62, 0.08);
    --amber:      #a06b1f;
    --amber-soft: rgba(160, 107, 31, 0.08);

    --rule:       rgba(20, 23, 28, 0.10);
    --rule-soft:  rgba(20, 23, 28, 0.05);
    --rule-2:     rgba(20, 23, 28, 0.20);

    /* Type */
    --display: 'Schibsted Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
    --body:    'Albert Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Rhythm */
    --radius:    6px;
    --radius-lg: 8px;
}

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

html, body { height: 100%; }
body {
    font-family: var(--body);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

/* ── Top bar (masthead) ──────────────────────────────────── */
.masthead {
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
    padding: 0 32px;
    display: grid;
    grid-template-columns: 220px 1fr auto;
    align-items: center;
    height: 64px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.masthead-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.masthead-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--ink);
    line-height: 0;
}
.masthead-logo {
    height: 32px;
    width: auto;
    display: block;
}
.masthead-section {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--ink-faint);
    text-transform: uppercase;
    padding-left: 12px;
    border-left: 1px solid var(--rule);
    line-height: 1;
}

/* Center nav — horizontal */
.contents {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}
.contents-label { display: none; }   /* no "Contents" label in Atrium */
.contents-footer { display: none; }  /* footer collapses into ticker */

.nav-item {
    padding: 10px 16px;
    color: var(--ink-soft);
    text-decoration: none;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-radius: var(--radius);
    transition: all 0.15s ease;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nav-item .num {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
}
.nav-item:hover {
    color: var(--ink);
    background: var(--bg);
}
.nav-item.active {
    color: var(--ink);
    background: var(--blue-soft);
    font-weight: 600;
}
.nav-item.active .num { color: var(--blue); }

/* Right cluster — user, status, logout */
.masthead-right {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--ink-soft);
}
.masthead-status {
    background: transparent;
    border: 1px solid var(--rule-2);
    padding: 7px 12px;
    font-family: var(--body);
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-2);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    line-height: 1;
}
.masthead-status .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
}
.masthead-divider {
    width: 1px; height: 24px;
    background: var(--rule);
}
.masthead-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}
.masthead-user-name {
    font-family: var(--body);
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.masthead-user-role {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 10px;
    color: var(--ink-soft);
    margin-top: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.masthead-avatar {
    width: 32px; height: 32px;
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-decoration: none;
}
.masthead-logout {
    color: var(--ink-soft);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: var(--radius);
    transition: all 0.15s ease;
}
.masthead-logout:hover {
    color: var(--ink);
    background: var(--bg);
}

.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 18px; height: 1px; background: var(--ink); margin: 4px 0; }
.sidebar-overlay { display: none; }

/* ── Layout ──────────────────────────────────────────────── */
.app-body {
    display: block;
    margin-top: 0;
    min-height: 100vh;
}
.content {
    margin-left: 0;
    padding: 0;
    max-width: none;
}

/* ── Ticker strip ────────────────────────────────────────── */
.ticker {
    background: var(--ink);
    color: var(--bg);
    padding: 12px 32px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: center;
    font-family: var(--mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
}
.ticker-badge {
    background: var(--blue);
    padding: 5px 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 3px;
    font-size: 10px;
    color: #fff;
}
.ticker-items {
    display: flex;
    gap: 40px;
    overflow: hidden;
}
.ticker-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}
.ticker-key   { color: var(--ink-faint); }
.ticker-val   { color: var(--bg); }
.ticker-delta { color: var(--ink-faint); }
.ticker-delta.pos { color: #7fb38b; }
.ticker-delta.neg { color: #e88a73; }

/* ── Page header / hero ──────────────────────────────────── */
.page-header {
    padding: 40px 32px 24px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: end;
    border-bottom: none;
    margin-bottom: 0;
}
.page-eyebrow {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: block;
}
.page-title {
    font-family: var(--display);
    font-weight: 600;
    font-size: 48px;
    line-height: 1.04;
    color: var(--ink);
    letter-spacing: -0.025em;
    margin: 0;
}
.page-title em {
    font-style: normal;
    color: var(--ink);
}
.page-subtitle {
    font-family: var(--body);
    font-size: 16px;
    color: var(--ink-2);
    margin-top: 14px;
    max-width: 720px;
    letter-spacing: -0.005em;
    line-height: 1.5;
    font-style: normal;
}
.page-meta {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.page-meta a {
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
}
.page-meta a:hover {
    color: var(--blue);
    border-color: var(--blue);
}

/* ── Sections ─────────────────────────────────────────────── */
.section {
    margin: 40px 0 0;
    padding: 0;
}
/* When section-num/title aren't wrapped in a .section-head, give them padding */
.section > .section-num,
.section > .section-title {
    padding-left: 32px;
    padding-right: 32px;
}
.section-head {
    padding: 0 32px;
    margin-bottom: 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.section-num {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}
.section-title {
    font-family: var(--display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.1;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.02em;
}
.section-title em { font-style: normal; }
.section-sub {
    font-family: var(--body);
    font-size: 14px;
    color: var(--ink-soft);
    letter-spacing: -0.005em;
    margin-left: 12px;
}
.section-lede {
    padding: 0 32px;
    font-family: var(--body);
    font-size: 14px;
    color: var(--ink-soft);
    max-width: 64ch;
    margin-bottom: 16px;
    line-height: 1.5;
    font-style: normal;
}
.section-lede.italic { font-style: normal; }

/* ── Stat quartet ────────────────────────────────────────── */
.metric-quartet {
    padding: 0 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: transparent;
    border: none;
    margin: 0 0 8px;
}
.metric-cell {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: auto;
    border-right: 1px solid var(--rule);
}
.metric-cell:last-child { border-right: 1px solid var(--rule); }
.metric-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.metric-eyebrow {
    font-family: var(--body);
    font-weight: 500;
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: -0.005em;
    margin-bottom: 0;
    text-transform: none;
}
.metric-index {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.06em;
}
.metric-value-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.metric-value-big {
    font-family: var(--display);
    font-weight: 600;
    font-size: 44px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums lining-nums;
    margin-bottom: 0;
}
.metric-value-big em { font-style: normal; }
.metric-value-big .denom {
    color: var(--ink-faint);
    font-size: 22px;
}
.metric-delta {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 3px 6px;
    border-radius: 4px;
}
.metric-delta.pos    { color: var(--green); background: var(--green-soft); }
.metric-delta.neg    { color: var(--red);   background: var(--red-soft); }
.metric-delta.amber  { color: var(--amber); background: var(--amber-soft); }
.metric-delta.neutral{ color: var(--ink-soft); background: var(--rule-soft); }
.metric-note {
    font-family: var(--body);
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.4;
    font-style: normal;
    letter-spacing: -0.005em;
}
.metric-cell .btn { align-self: flex-start; }

/* ── Folio (panel) ───────────────────────────────────────── */
.folio {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin: 0 32px 20px;
    box-shadow: none;
    overflow: hidden;
}
.folio-tight { padding: 14px 18px; }
.folio-loose { padding: 28px 32px; }
.folio-emphasis { border-left: 3px solid var(--blue); }
.folio-alert {
    background: var(--panel);
    border-color: var(--rule);
    border-left: 3px solid var(--red);
}
.folio-quiet {
    background: transparent;
    border: 1px solid var(--rule);
}
.folio-grid {
    margin: 0 32px;
    padding: 0;
    background: transparent;
    border: none;
}
.folio-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}
.folio-title {
    font-family: var(--display);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.folio-meta {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 10px;
    color: var(--ink-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.folio-rule {
    border-top: 1px solid var(--rule);
    margin: 16px -24px;
}

/* Drop cap — disabled in Atrium */
.drop-cap::first-letter { font-size: inherit; float: none; padding: 0; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn, button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--panel);
    border: 1px solid var(--rule-2);
    color: var(--ink-2);
    font-family: var(--body);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: -0.005em;
    text-transform: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
    border-radius: var(--radius);
    line-height: 1;
    white-space: nowrap;
}
.btn:hover {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--rule-2);
}
.btn-primary {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
.btn-primary:hover {
    background: #1a3f9c;
    border-color: #1a3f9c;
    color: #fff;
}
.btn-gilt {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.btn-gilt:hover {
    background: var(--ink-2);
    border-color: var(--ink-2);
    color: var(--bg);
}
.btn-danger {
    color: var(--red);
    border-color: var(--red);
    background: var(--panel);
}
.btn-danger:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}
.btn-ghost {
    background: transparent;
    border-color: var(--rule-2);
    color: var(--ink-2);
}
.btn-ghost:hover {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--rule-2);
}
.btn-sm {
    padding: 6px 10px;
    font-size: 11px;
}

a.link {
    color: var(--blue);
    text-decoration: none;
    border-bottom: 1px solid var(--blue-soft);
    transition: border-color 0.15s ease;
}
a.link:hover { border-color: var(--blue); }

/* ── Tables (ledger) — dense rows ────────────────────────── */
.ledger, .data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--body);
    font-size: 13px;
    background: var(--panel);
}
.ledger thead, .data-table thead {
    background: var(--panel-alt);
}
.ledger thead th, .data-table thead th {
    text-align: left;
    font-family: var(--mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}
.ledger thead th.num, .data-table thead th.num { text-align: right; }
.ledger tbody td, .data-table tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
    font-size: 13px;
    color: var(--ink-2);
    letter-spacing: -0.005em;
}
.ledger tbody tr:last-child td,
.data-table tbody tr:last-child td { border-bottom: none; }
.ledger tbody tr:hover td,
.data-table tbody tr:hover td { background: var(--panel-alt); }
.ledger .name, .data-table .name {
    font-family: var(--body);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.ledger .name-sub, .data-table .name-sub {
    font-family: var(--mono);
    font-weight: 400;
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 3px;
    letter-spacing: 0.02em;
}
.ledger .num, .ledger .tab-num,
.data-table .num, .data-table .tab-num {
    font-variant-numeric: tabular-nums lining-nums;
    font-family: var(--mono);
    text-align: right;
}
.ledger .quiet, .data-table .quiet { color: var(--ink-soft); }
.ledger .actions, .data-table .actions {
    text-align: right;
    white-space: nowrap;
}

/* Avatar in name cell */
.row-avatar {
    width: 32px; height: 32px;
    border-radius: var(--radius);
    background: var(--blue-soft);
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
    margin-right: 12px;
    vertical-align: middle;
    flex-shrink: 0;
}
.row-avatar.ink { background: var(--ink); color: var(--bg); }
.row-avatar.amber { background: var(--amber-soft); color: var(--amber); }
.row-avatar.red { background: var(--red-soft); color: var(--red); }
.row-name-block {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

/* ── Forms ────────────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field-label, .form-label {
    display: block;
    font-family: var(--body);
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-2);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
    text-transform: none;
}
.field-hint {
    font-family: var(--body);
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 4px;
    font-style: normal;
    letter-spacing: -0.005em;
    line-height: 1.5;
}
.field-input, .field-select, .field-textarea,
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--rule-2);
    background: var(--panel);
    font-family: var(--body);
    font-size: 14px;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    border-radius: var(--radius);
    letter-spacing: -0.005em;
}
.field-input:focus, .field-select:focus, .field-textarea:focus,
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-soft);
}
.field-textarea, .form-textarea {
    resize: vertical;
    min-height: 88px;
    line-height: 1.5;
    font-family: var(--body);
}
.field-row, .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 720px) {
    .field-row, .form-row { grid-template-columns: 1fr; }
}
.form-group { margin-bottom: 18px; }

/* ── Pills (status tags) ──────────────────────────────────── */
.pill, .phase-pill, .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--blue-soft);
    color: var(--blue);
    font-family: var(--mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    white-space: nowrap;
    line-height: 1;
}
.pill::before, .phase-pill::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--blue);
}

/* Phase-specific (status tag color coding) */
.phase-initiated            { background: var(--rule-soft);  color: var(--ink-soft); }
.phase-initiated::before    { background: var(--ink-soft); }
.phase-feedback_collection  { background: var(--blue-soft);  color: var(--blue); }
.phase-feedback_collection::before { background: var(--blue); }
.phase-pdp_self_submission  { background: var(--amber-soft); color: var(--amber); }
.phase-pdp_self_submission::before { background: var(--amber); }
.phase-consolidation        { background: rgba(20,23,28,0.08); color: var(--ink); }
.phase-consolidation::before { background: var(--ink); }
.phase-formal_review        { background: var(--green-soft); color: var(--green); }
.phase-formal_review::before { background: var(--green); border-radius: 0; transform: rotate(45deg); }
.phase-finalization         { background: var(--green-soft); color: var(--green); }
.phase-finalization::before { background: var(--green); }

.status-pill { padding: 3px 8px; }
.status-pending    { background: var(--amber-soft); color: var(--amber); }
.status-pending::before { background: var(--amber); }
.status-submitted  { background: var(--green-soft); color: var(--green); }
.status-submitted::before { background: var(--green); }
.status-draft      { background: var(--rule-soft); color: var(--ink-soft); }
.status-draft::before { background: var(--ink-soft); }
.status-finalized  { background: var(--ink); color: var(--bg); }
.status-finalized::before { background: var(--bg); }
.status-active     { background: var(--green-soft); color: var(--green); }
.status-active::before { background: var(--green); }
.status-closed     { background: var(--rule-soft); color: var(--ink-soft); }
.status-closed::before { background: var(--ink-soft); }

/* ── Phase timeline (printed schedule) ──────────────────── */
.timeline {
    position: relative;
    padding: 20px 0 8px;
    margin: 16px 0 8px;
}
.timeline-rule {
    position: absolute;
    left: 24px; right: 24px;
    top: 58px;
    height: 1px;
    background: var(--rule-2);
}
.timeline-rule::before, .timeline-rule::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 1px; height: 7px;
    background: var(--rule-2);
}
.timeline-rule::before { left: 0; }
.timeline-rule::after { right: 0; }
.timeline-stops {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    position: relative;
}
.timeline-stop {
    text-align: center;
    padding: 0 6px;
}
.timeline-stop .t-offset {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    margin-bottom: 10px;
    text-transform: uppercase;
    height: 14px;
    line-height: 14px;
}
.timeline-stop .t-marker {
    display: block;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--panel);
    border: 1.5px solid var(--ink-faint);
    margin: 0 auto 16px;
    position: relative;
    z-index: 2;
    transition: all 0.2s ease;
}
.timeline-stop.done .t-marker {
    background: var(--ink);
    border-color: var(--ink);
}
.timeline-stop.current .t-marker {
    background: var(--blue);
    border-color: var(--blue);
    box-shadow: 0 0 0 6px var(--blue-soft);
    width: 18px; height: 18px;
    margin-top: -2px;
    margin-bottom: 14px;
}
.timeline-stop.future .t-marker {
    background: var(--panel);
    border-color: var(--rule-2);
}
.timeline-stop.milestone .t-marker {
    background: var(--ink);
    border-color: var(--ink);
    transform: rotate(45deg);
    border-radius: 0;
    width: 12px; height: 12px;
    margin-top: 1px;
}
.timeline-stop.milestone.current .t-marker {
    background: var(--blue);
    border-color: var(--blue);
    box-shadow: 0 0 0 5px var(--blue-soft);
}
.timeline-stop .t-label {
    font-family: var(--body);
    font-weight: 500;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 4px;
    min-height: 32px;
    letter-spacing: -0.005em;
}
.timeline-stop.current .t-label {
    font-weight: 600;
    color: var(--ink);
}
.timeline-stop.future .t-label { color: var(--ink-soft); }
.timeline-stop .t-dates {
    font-family: var(--mono);
    font-weight: 400;
    font-size: 10px;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
}

/* ── Scoring rubric ───────────────────────────────────────── */
.rubric {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin: 0 32px 32px;
}
.rubric-title {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
}
.rubric-title::before, .rubric-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule);
}
.rubric-title span { padding: 0 14px; }
.rubric-rows { display: grid; gap: 0; }
.rubric-row {
    display: grid;
    grid-template-columns: 52px 1fr 150px;
    gap: 22px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
}
.rubric-row:last-child { border-bottom: none; }
.rubric-num {
    font-family: var(--display);
    font-weight: 600;
    font-size: 32px;
    color: var(--ink);
    text-align: center;
    line-height: 1;
    font-variant-numeric: lining-nums;
    letter-spacing: -0.03em;
}
.rubric-row:nth-last-child(2) .rubric-num,
.rubric-row:last-child .rubric-num { color: var(--ink-soft); }
.rubric-name {
    font-family: var(--body);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
    font-style: normal;
}
.rubric-desc {
    font-family: var(--body);
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
    letter-spacing: -0.005em;
}
.rubric-tag {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
    text-align: right;
}

/* ── Competency review grid ───────────────────────────────── */
.competency-cat {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    margin: 0 32px 20px;
    overflow: hidden;
}
.competency-cat-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--rule);
    background: var(--panel-alt);
}
.competency-cat-num {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.08em;
    font-style: normal;
    text-transform: uppercase;
}
.competency-cat-name {
    font-family: var(--display);
    font-weight: 600;
    font-size: 20px;
    color: var(--ink);
    line-height: 1.2;
    flex: 1;
    letter-spacing: -0.02em;
}
.competency-sub {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--rule);
}
.competency-sub:last-of-type { border-bottom: none; }
.competency-sub-text { min-width: 0; }
.competency-sub-name {
    font-family: var(--body);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.competency-sub-def {
    font-family: var(--body);
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
    font-style: normal;
    letter-spacing: -0.005em;
}
.score-radios { display: inline-flex; align-items: center; gap: 8px; }
.score-radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--rule-2);
    background: var(--panel);
    font-family: var(--display);
    font-weight: 600;
    font-size: 16px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: var(--radius);
    font-variant-numeric: lining-nums;
    position: relative;
    font-style: normal;
}
.score-radio input { position: absolute; opacity: 0; pointer-events: none; }
.score-radio:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--blue-soft);
}
.score-radio.checked {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    box-shadow: 0 0 0 3px var(--blue-soft);
    font-style: normal;
}
.score-radio.na {
    width: 52px;
    border-radius: var(--radius);
    font-family: var(--mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.score-radio.na.checked {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
}
.competency-commentary {
    padding: 18px 24px 22px;
    background: var(--panel-alt);
    border-top: 1px solid var(--rule);
}
.competency-commentary-label {
    font-family: var(--body);
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-2);
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    letter-spacing: -0.005em;
    text-transform: none;
}
.competency-commentary-label .nb {
    font-family: var(--body);
    font-style: normal;
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: -0.005em;
    text-transform: none;
    font-weight: 400;
}
.competency-commentary textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--rule-2);
    background: var(--panel);
    font-family: var(--body);
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.5;
    min-height: 80px;
    resize: vertical;
    border-radius: var(--radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.competency-commentary textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-soft);
}

/* ── PDP grid ─────────────────────────────────────────────── */
.pdp-grid {
    margin: 0 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 1100px) { .pdp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .pdp-grid { grid-template-columns: 1fr; } }
.pdp-card {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    transition: box-shadow 0.15s ease;
}
.pdp-card:hover {
    box-shadow: 0 4px 18px -8px rgba(20,23,28,0.12);
}
.pdp-card-tab {
    background: var(--ink);
    color: var(--bg);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}
.pdp-card-tab .num {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.pdp-card-tab .label {
    font-family: var(--body);
    font-weight: 500;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: -0.005em;
    font-style: normal;
}
.pdp-card.personal .pdp-card-tab { background: var(--blue); }
.pdp-card.personal .pdp-card-tab .label { color: rgba(255,255,255,0.8); }
.pdp-card-body { padding: 16px 18px 18px; }
.pdp-card-body input, .pdp-card-body textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--rule-2);
    background: var(--panel);
    font-family: var(--body);
    font-size: 13.5px;
    color: var(--ink);
    margin-bottom: 12px;
    border-radius: var(--radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    letter-spacing: -0.005em;
}
.pdp-card-body input:focus, .pdp-card-body textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-soft);
}
.pdp-card-body textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
.pdp-card-body label {
    font-family: var(--body);
    font-weight: 500;
    font-size: 11px;
    color: var(--ink-2);
    display: block;
    margin-bottom: 5px;
    text-transform: none;
    letter-spacing: -0.005em;
}
.pdp-readonly .pdp-card-body { padding: 18px; }
.pdp-readonly .pdp-title-display {
    font-family: var(--body);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.pdp-readonly .pdp-summary-display {
    font-family: var(--body);
    font-size: 13px;
    color: var(--ink-soft);
    font-style: normal;
    margin-bottom: 10px;
    line-height: 1.5;
    letter-spacing: -0.005em;
}
.pdp-readonly .pdp-actions-display {
    font-family: var(--body);
    font-size: 13px;
    color: var(--ink-2);
    white-space: pre-wrap;
    line-height: 1.5;
    border-top: 1px solid var(--rule);
    padding-top: 10px;
    letter-spacing: -0.005em;
}

/* ── Stat row inline (small) ──────────────────────────────── */
.stat-row {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    margin: 0 32px 24px;
    padding: 16px 24px;
    border-top: none;
    border-bottom: none;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
}
.stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat-label {
    font-family: var(--body);
    font-weight: 500;
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: -0.005em;
    text-transform: none;
}
.stat-value {
    font-family: var(--display);
    font-weight: 600;
    font-size: 22px;
    color: var(--ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.025em;
}
.stat-value em { font-style: normal; color: var(--ink-soft); }
.stat-value-sm { font-size: 16px; }

/* ── Four-quadrant matrix ────────────────────────────────── */
.matrix-wrap {
    margin: 0 32px 24px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 32px 32px 24px;
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: 1fr 56px;
    gap: 0;
}
.matrix-y-axis {
    grid-column: 1; grid-row: 1;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.matrix-x-axis {
    grid-column: 2; grid-row: 2;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 16px;
}
.quad-grid {
    grid-column: 2; grid-row: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--rule-2);
    border-radius: var(--radius);
    background: var(--panel);
    min-height: 480px;
    overflow: hidden;
}
.quad {
    padding: 20px 22px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--panel);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.quad:nth-child(2), .quad:nth-child(4) { border-right: none; }
.quad:nth-child(3), .quad:nth-child(4) { border-bottom: none; }
.quad-emphasis-ink {
    background: var(--ink);
    color: var(--bg);
}
.quad-emphasis-ink .quad-desc { color: rgba(241,239,233,0.6); }
.quad-emphasis-gilt {
    background: var(--blue-soft);
}
.quad-axis {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 6px;
}
.quad-emphasis-ink .quad-axis { color: #7fb3ff; }
.quad-title {
    font-family: var(--display);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.15;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}
.quad-emphasis-ink .quad-title { color: var(--bg); }
.quad-title em { font-style: normal; }
.quad-desc {
    font-family: var(--body);
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 12px;
    font-style: normal;
    letter-spacing: -0.005em;
}
.quad-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    overflow-y: auto;
}
.quad-item {
    font-family: var(--body);
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.4;
    padding: 7px 0;
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    letter-spacing: -0.005em;
}
.quad-emphasis-ink .quad-item {
    border-color: rgba(241,239,233,0.12);
    color: var(--bg);
}
.quad-item .nums {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-soft);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.quad-emphasis-ink .quad-item .nums { color: rgba(241,239,233,0.5); }
.quad-empty {
    font-family: var(--body);
    font-style: normal;
    font-size: 13px;
    color: var(--ink-faint);
    padding: 8px 0;
    letter-spacing: -0.005em;
}
.quad-emphasis-ink .quad-empty { color: rgba(241,239,233,0.4); }

/* ── Score table ─────────────────────────────────────────── */
.score-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--body);
    background: var(--panel);
}
.score-table th {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
    background: var(--panel-alt);
}
.score-table th.num { text-align: right; }
.score-table td {
    padding: 14px 14px;
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
    color: var(--ink-2);
    vertical-align: middle;
}
.score-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
    font-family: var(--mono);
}
.score-table .cat-row td {
    padding-top: 18px;
    border-top: 1px solid var(--rule-2);
    background: var(--panel-alt);
}
.score-table .cat-row td.cat-name {
    font-family: var(--display);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    font-style: normal;
    letter-spacing: -0.015em;
}
.score-table .sub-row td.sub-name {
    font-family: var(--body);
    font-size: 13.5px;
    color: var(--ink-2);
    padding-left: 28px;
    letter-spacing: -0.005em;
}
.score-table .sub-row td.sub-name .sub-def {
    font-family: var(--body);
    font-style: normal;
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-top: 4px;
    max-width: 56ch;
    letter-spacing: -0.005em;
}
.score-bar {
    display: inline-block;
    vertical-align: middle;
    width: 96px; height: 4px;
    background: var(--rule-soft);
    margin-right: 8px;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}
.score-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--blue);
}
.score-bar-self {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 10px;
    background: var(--ink);
}

/* ── Flash messages ──────────────────────────────────────── */
.flash-container { padding: 16px 32px 0; }
.flash {
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ink-soft);
    font-family: var(--body);
    font-size: 13.5px;
    color: var(--ink-2);
    border-radius: var(--radius);
    font-style: normal;
    letter-spacing: -0.005em;
}
.flash-success { border-left-color: var(--green); background: var(--green-soft); }
.flash-error   { border-left-color: var(--red);   background: var(--red-soft); color: var(--red); }
.flash-info    { border-left-color: var(--blue);  background: var(--blue-soft); }

/* ── Notices ─────────────────────────────────────────────── */
.notice {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ink-soft);
    padding: 16px 20px;
    margin: 0 32px 16px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border-radius: var(--radius);
}
.notice-mark {
    font-family: var(--display);
    font-weight: 600;
    font-size: 22px;
    color: var(--blue);
    line-height: 1;
    letter-spacing: -0.02em;
}
.notice-body {
    font-family: var(--body);
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.55;
    letter-spacing: -0.005em;
}
.notice-body strong {
    font-family: var(--body);
    font-weight: 600;
    color: var(--ink);
    font-style: normal;
}
.notice-confidential { border-left-color: var(--ink); }
.notice-confidential .notice-mark { color: var(--ink); }
.notice-warning { border-left-color: var(--amber); background: var(--amber-soft); }
.notice-warning .notice-mark { color: var(--amber); }
.notice-success { border-left-color: var(--green); background: var(--green-soft); }
.notice-success .notice-mark { color: var(--green); }

/* ── AI summary block ────────────────────────────────────── */
.ai-summary {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--blue);
    padding: 28px 32px;
    margin: 0 32px 16px;
    border-radius: var(--radius-lg);
}
.ai-summary-eyebrow {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 10px;
}
.ai-summary-body {
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
    white-space: pre-wrap;
    letter-spacing: -0.005em;
}
.ai-summary-body h1, .ai-summary-body h2, .ai-summary-body h3 {
    font-family: var(--display);
    font-weight: 600;
    color: var(--ink);
    margin: 16px 0 8px;
    font-size: 17px;
    letter-spacing: -0.02em;
    font-style: normal;
}
.ai-summary-body strong { font-weight: 600; color: var(--ink); }
.ai-summary-meta {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    text-transform: uppercase;
}

/* ── Login cover ─────────────────────────────────────────── */
.cover {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--bg);
}
@media (max-width: 900px) {
    .cover { grid-template-columns: 1fr; }
}
.cover-art {
    background: var(--ink);
    color: var(--bg);
    padding: 56px 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}
.cover-art::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 78% 26%, rgba(31, 78, 184, 0.20) 0%, transparent 55%),
      radial-gradient(circle at 12% 88%, rgba(31, 78, 184, 0.08) 0%, transparent 40%);
    pointer-events: none;
}
.cover-art > * { position: relative; z-index: 2; }
.cover-logo {
    height: 56px;
    width: auto;
    display: block;
    margin-bottom: 40px;
}
.cover-mark {
    font-family: var(--display);
    font-weight: 600;
    font-size: 56px;
    color: var(--bg);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-style: normal;
}
.cover-mark em {
    color: #7fb3ff;
    font-style: normal;
}
.cover-mark-rule {
    width: 64px; height: 1px;
    background: var(--blue);
    margin: 24px 0;
}
.cover-mark-eyebrow {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7fb3ff;
    margin-bottom: 18px;
}
.cover-mark-tag {
    font-family: var(--body);
    font-size: 17px;
    color: rgba(241,239,233,0.7);
    max-width: 36ch;
    line-height: 1.55;
    font-style: normal;
    letter-spacing: -0.005em;
}
.cover-foot {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(241,239,233,0.45);
}
.cover-form {
    padding: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg);
}
.cover-form-inner { max-width: 420px; }
.cover-form-eyebrow {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 14px;
}
.cover-form-title {
    font-family: var(--display);
    font-weight: 600;
    font-size: 40px;
    color: var(--ink);
    line-height: 1.04;
    margin-bottom: 18px;
    letter-spacing: -0.025em;
}
.cover-form-title em { font-style: normal; color: var(--blue); }
.cover-form-lede {
    font-family: var(--body);
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.55;
    margin-bottom: 32px;
    font-style: normal;
    letter-spacing: -0.005em;
}
.cover-foot-meta {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ── Error page ─────────────────────────────────────────── */
.error-page {
    text-align: center;
    padding: 96px 32px;
    max-width: 560px;
    margin: 0 auto;
}
.error-num {
    font-family: var(--display);
    font-weight: 600;
    font-size: 120px;
    line-height: 0.9;
    color: var(--ink);
    margin-bottom: 12px;
    letter-spacing: -0.04em;
    font-style: normal;
}
.error-msg {
    font-family: var(--display);
    font-weight: 600;
    font-size: 22px;
    color: var(--ink-2);
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}
.error-desc {
    font-family: var(--body);
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 32px;
    font-style: normal;
    letter-spacing: -0.005em;
}

/* ── Audit ledger ───────────────────────────────────────── */
.audit-row td:first-child {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-soft);
    white-space: nowrap;
    width: 170px;
    letter-spacing: 0.04em;
}
.audit-row .actor {
    font-family: var(--body);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.audit-row .action {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
}
.audit-row .details {
    font-family: var(--body);
    font-size: 13px;
    color: var(--ink-soft);
    font-style: normal;
    letter-spacing: -0.005em;
}

/* ── Responsive (mobile slide-out nav) ──────────────────── */
@media (max-width: 900px) {
    .hamburger { display: block; }
    .masthead {
        grid-template-columns: auto 1fr auto;
        padding: 0 20px;
    }
    .masthead-left { gap: 10px; }
    .masthead-section { display: none; }
    .contents {
        position: fixed;
        left: 0; top: 64px;
        bottom: 0;
        width: 260px;
        background: var(--panel);
        border-right: 1px solid var(--rule);
        flex-direction: column;
        justify-content: flex-start;
        padding: 24px 16px;
        gap: 4px;
        align-items: stretch;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 100;
    }
    body.sidebar-open .contents { transform: translateX(0); }
    body.sidebar-open .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 64px 0 0 0;
        background: rgba(20,23,28,0.4);
        z-index: 99;
    }
    .masthead-user { display: none; }
    .ticker { padding: 10px 20px; }
    .page-header { padding: 28px 20px 20px; }
    .page-title { font-size: 32px; }
    .section { margin-top: 28px; }
    .section-head { padding: 0 20px; }
    .section-lede { padding: 0 20px; }
    .metric-quartet { padding: 0 20px; grid-template-columns: 1fr 1fr; }
    .folio, .notice, .ai-summary { margin-left: 20px; margin-right: 20px; }
    .competency-cat { margin-left: 20px; margin-right: 20px; }
    .matrix-wrap { margin-left: 20px; margin-right: 20px; padding: 24px 20px 18px; }
    .rubric { margin-left: 20px; margin-right: 20px; }
    .pdp-grid { margin-left: 20px; margin-right: 20px; grid-template-columns: 1fr 1fr; }
    .timeline-stops { grid-template-columns: 1fr; gap: 12px; }
    .timeline-rule { display: none; }
}

/* ── Utility ────────────────────────────────────────────── */
.text-muted { color: var(--ink-soft); }
.text-gilt  { color: var(--blue); }
.italic     { font-style: normal; }
.serif      { font-family: var(--display); }
.sans       { font-family: var(--body); }
.mono       { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabular    { font-variant-numeric: tabular-nums lining-nums; }
.upper-meta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.hairline      { border-top: 1px solid var(--rule);   margin: 24px 0; }
.hairline-soft { border-top: 1px solid var(--rule-soft); margin: 20px 0; }

/* Override / hide legacy HRIS chrome */
.topbar { display: none !important; }
.sidebar { display: none !important; }