/* ============================================================
   ARCHER design tokens — Phase 22h.79h (2026-05-16)
   ------------------------------------------------------------
   Synced from the design-handoff bundle (archer-client-app /
   project / archer.css). SAFE is the default theme; BOLD is an
   alternative skin opt-in via `.theme-bold` on a container.

   Component primitives below (.tile / .badge-pill / .btn-archer /
   .field / .tb / .bn / .progress-bar-archer / .stage-bar / hero
   blocks) are reusable across every page and consumed by both
   the web Clients Portal and the MAUI app's web preview path.
   ============================================================ */

* { box-sizing: border-box; }

/* ───── SAFE theme (default) ─────────────────────────────────── */
.theme-safe {
    --bg: #f4f8fb;
    --surface: #ffffff;
    --surface-2: #eef4f9;
    --line: #e2eaf1;
    --line-2: #cfdae5;
    --ink: #0c1e2e;
    --ink-2: #2a445a;
    --ink-3: #5a7790;
    --ink-4: #95a9bc;
    /* Phase 22h.WB2-LOGO (2026-05-22) — Clients-tier (Sky) palette per the
       new identity-package handoff. */
    --primary: #38BDF8;
    --primary-ink: #ffffff;
    --primary-soft: #EFF8FF;
    --primary-soft-ink: #0EA5E9;
    --primary-deep: #0EA5E9;
    --success: #059669;
    --success-soft: #ecfdf5;
    --success-ink: #065f46;
    --warning: #d97706;
    --warning-soft: #fffbeb;
    --warning-ink: #92400e;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --danger-ink: #991b1b;
    --info: #2596dc;
    --info-soft: #e6f3fb;
    --info-ink: #155a85;
    /* Phase 6 (spec 68–72) — CHAT message colour-coding tokens. Mirrors the
       MAUI Archer.Maui.Shared.MessageColors helper so web + MAUI chat surfaces
       match. --msg-client = client (sky), --msg-team = team→client (teal),
       --msg-automated = automated/system (neutral, lighter), --msg-note = note
       (grey). Per-team-member personal colours (Admin↔team) are assigned in
       code, not as a fixed token. */
    --msg-client: #e0f2fe;
    --msg-team: #d8f3ee;
    --msg-automated: #f8fafc;
    --msg-note: #f3f4f6;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-sm: 8px;
    --font: 'Geist', 'Inter Tight', system-ui, sans-serif;
    --font-display: 'Geist', 'Inter Tight', system-ui, sans-serif;
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
    --shadow: 0 4px 16px -4px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
}

/* ───── BOLD theme (alternative skin) ─────────────────────────── */
.theme-bold {
    --bg: #f5f1ea;
    --surface: #fffdf9;
    --surface-2: #ece6dc;
    --line: #e3dccd;
    --line-2: #cdc4b0;
    --ink: #0c1e2e;
    --ink-2: #2a445a;
    --ink-3: #5a7790;
    --ink-4: #95a9bc;
    /* Phase 22h.WB2-LOGO (2026-05-22) — Bold theme realigned to the
       Clients-tier (Sky) palette. Primary = sky-deep, accent = sky. */
    --primary: #0EA5E9;
    --primary-ink: #fffdf9;
    --primary-soft: #EFF8FF;
    --primary-soft-ink: #0EA5E9;
    --primary-deep: #0369A1;
    --accent: #38BDF8;
    --accent-soft: #EFF8FF;
    --accent-ink: #0EA5E9;
    --success: #15803d;
    --success-soft: #e7f3ea;
    --success-ink: #14532d;
    --warning: #b45309;
    --warning-soft: #fef4e2;
    --warning-ink: #78350f;
    --danger: #b91c1c;
    --danger-soft: #fbeaea;
    --danger-ink: #7f1d1d;
    --info: #075985;
    --info-soft: #e5f0f7;
    --info-ink: #0c4a6e;
    /* Phase 6 (spec 68–72) — CHAT message colour-coding tokens (see .theme-safe).
       Bubble fills are brand-fixed, so Bold inherits the same hex. */
    --msg-client: #e0f2fe;
    --msg-team: #d8f3ee;
    --msg-automated: #f8fafc;
    --msg-note: #f3f4f6;
    --radius: 6px;
    --radius-lg: 10px;
    --radius-sm: 4px;
    --font: 'Geist', 'Inter Tight', system-ui, sans-serif;
    --font-display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
    --shadow-sm: 0 1px 2px rgba(26,23,21,0.06);
    --shadow: 0 8px 24px -8px rgba(26,23,21,0.12), 0 1px 2px rgba(26,23,21,0.04);
}

/* ───── App container ────────────────────────────────────────── */
.archer-app {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    min-height: 100%;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}
.archer-app h1,
.archer-app h2,
.archer-app h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}
.archer-app button { font-family: inherit; cursor: pointer; }
.archer-app input,
.archer-app textarea,
.archer-app select { font-family: inherit; color: inherit; }

/* ───── Top bar (per-screen, sticky) ─────────────────────────── */
.tb {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
}
.theme-bold .tb { background: var(--primary); color: var(--primary-ink); border-bottom: none; }
.theme-bold .tb .tb-back,
.theme-bold .tb .tb-title,
.theme-bold .tb .tb-action { color: var(--primary-ink); }
.tb-back,
.tb-action {
    background: transparent;
    border: 0;
    padding: 6px;
    border-radius: 8px;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.tb-back:hover,
.tb-action:hover { background: var(--surface-2); }
.tb-title {
    font-size: 17px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ───── 4-tab nav (bottom on mobile / top on web) ─────────────── */
.bn {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 6px 8px 10px;
}
.bn-item {
    background: transparent;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    border-radius: 12px;
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
}
.bn-item.active { color: var(--primary); }
.theme-bold .bn-item.active { color: var(--accent); }
.bn-item.active .bn-icon { background: var(--primary-soft); }
.theme-bold .bn-item.active .bn-icon { background: var(--accent-soft); }
.bn-icon {
    padding: 4px 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

/* ───── Tile (replaces solid blocks) ─────────────────────────── */
/* Phase 22h.103k-feedback (2026-05-19) — item 4: every quick-access
   tile is now the same size. min-height locks the visual rhythm so a
   tile with a 2-line title doesn't shrink while a 1-line tile expands. */
.tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.05s, box-shadow 0.15s;
    text-align: left;
    font: inherit;
    color: inherit;
    text-decoration: none;
    position: relative;
    min-height: 110px;
    justify-content: flex-start;
}
.tile:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.tile:active { transform: scale(0.99); }
.tile-icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-soft-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 4px;
}
.tile-icon.success { background: var(--success-soft); color: var(--success-ink); }
.tile-icon.warning { background: var(--warning-soft); color: var(--warning-ink); }
.tile-icon.danger  { background: var(--danger-soft);  color: var(--danger-ink); }
.tile-icon.info    { background: var(--info-soft);    color: var(--info-ink); }
.tile-icon.neutral { background: var(--surface-2);    color: var(--ink-3); }
.tile-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.tile-sub   { font-size: 12px; color: var(--ink-3); }
.tile-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* ───── Status badge ─────────────────────────────────────────── */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.badge-pill .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex: 0 0 6px;
}
.badge-pill.ok      { background: var(--success-soft); color: var(--success-ink); }
.badge-pill.ok .badge-dot      { background: var(--success); }
.badge-pill.warn    { background: var(--warning-soft); color: var(--warning-ink); }
.badge-pill.warn .badge-dot    { background: var(--warning); }
.badge-pill.err     { background: var(--danger-soft); color: var(--danger-ink); }
.badge-pill.err .badge-dot     { background: var(--danger); }
.badge-pill.info    { background: var(--info-soft); color: var(--info-ink); }
.badge-pill.info .badge-dot    { background: var(--info); }
.badge-pill.neutral { background: var(--surface-2); color: var(--ink-3); }
.badge-pill.neutral .badge-dot { background: var(--ink-4); }

/* ───── Buttons ─────────────────────────────────────────────── */
.btn-archer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: var(--radius);
    border: 0;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
    font-family: inherit;
    text-decoration: none;
}
.btn-archer.btn-primary,
.btn-archer.btn-primary-bg {
    background: var(--primary);
    color: var(--primary-ink);
    border-color: var(--primary);
}
.btn-archer.btn-primary:hover,
.btn-archer.btn-primary-bg:hover { filter: brightness(1.08); }
.btn-archer:active { transform: scale(0.98); }
.btn-archer.btn-ghost {
    background: transparent;
    color: var(--ink-2);
    border: 1px solid var(--line);
}
.btn-archer.btn-ghost:hover { background: var(--surface-2); }
.theme-bold .btn-archer.btn-accent { background: var(--accent); color: #fffdf9; }
.btn-archer.btn-block { width: 100%; }

/* ───── Form fields ─────────────────────────────────────────── */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.field-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.field-input,
.field-select,
.field-textarea {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px 12px;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ───── Toggle switch ───────────────────────────────────────── */
.toggle {
    width: 36px;
    height: 22px;
    background: var(--line-2);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.18s;
    border: 0;
    padding: 0;
    flex: 0 0 36px;
}
.toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 999px;
    transition: transform 0.18s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle.on { background: var(--primary); }
.toggle.on::after { transform: translateX(14px); }
.theme-bold .toggle.on { background: var(--accent); }

/* ───── Progress bar (linear) ────────────────────────────────── */
.progress-bar-archer {
    height: 6px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.progress-bar-archer > i {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: 999px;
    transition: width 0.3s;
}
.theme-bold .progress-bar-archer > i { background: var(--accent); }

/* ───── Stage bar (9-segment status on Home) ─────────────────── */
.stage-bar {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
.stage-bar .seg {
    flex: 1;
    height: 6px;
    background: var(--surface-2);
    border-radius: 999px;
}
.stage-bar .seg.done    { background: var(--success); }
.stage-bar .seg.current { background: var(--primary); }

/* ───── Scroll area + section title ──────────────────────────── */
.scroll-area { overflow-y: auto; scrollbar-width: thin; }
.scroll-area::-webkit-scrollbar { width: 4px; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.sec-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

/* ───── Card ────────────────────────────────────────────────── */
.card-archer {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* ============================================================
   Phase 22h.90g (2026-05-17) — Bootstrap compatibility shims.
   ------------------------------------------------------------
   We're stripping Bootstrap from the Clients Portal (Phase 22h.90h)
   but many existing pages still reference the most common
   Bootstrap class names (form-control, text-muted, alert,
   alert-danger, card / card-body, btn / btn-primary, row + col-*
   grid, badge bg-*, h4 / h5, small, container, etc.). Re-declaring
   these here as archer-tokens equivalents lets every page keep
   working when the upstream Bootstrap stylesheet is removed —
   without rewriting each Razor page line-by-line.

   These rules are *additive*; if a page already uses an
   archer-tokens class (.field-input / .btn-archer / .card-archer /
   .muted / .small-t) it keeps using it. The shims kick in only
   for Bootstrap-named classes.
   ============================================================ */

/* Typography */
.text-muted   { color: var(--ink-3); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-white   { color: #fff; }
.small        { font-size: 12px; }
.h1, h1.h1    { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.h2, h2.h2    { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.h3, h3.h3    { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.h4, h4.h4    { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.h5, h5.h5    { font-size: 16px; font-weight: 600; }
.h6, h6.h6    { font-size: 13px; font-weight: 600; }
.display-5    { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
.fw-bold      { font-weight: 700; }
.fw-semibold  { font-weight: 600; }
.fw-medium    { font-weight: 500; }
.fw-normal    { font-weight: 400; }

/* Card */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.card-body   { padding: 16px; }
.card-header { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-weight: 600; }
.card-footer { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.bg-light    { background: var(--surface-2); }
.bg-white    { background: var(--surface); }
.border      { border: 1px solid var(--line); }
.border-top    { border-top: 1px solid var(--line); }
.border-bottom { border-bottom: 1px solid var(--line); }
.rounded     { border-radius: var(--radius); }
.rounded-pill { border-radius: 999px; }

/* Form controls */
.form-control,
.form-control-sm,
.form-select,
.form-select-sm {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px 12px;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    width: 100%;
}
.form-control-sm,
.form-select-sm { padding: 7px 10px; font-size: 13px; }
.form-control:focus,
.form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.form-label { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); margin-bottom: 4px; }
.col-form-label,
.col-form-label-sm { font-size: 12px; font-weight: 500; color: var(--ink-3); padding-top: 8px; }
.form-check { display: flex; align-items: flex-start; gap: 8px; }
.form-check-input { margin-top: 3px; accent-color: var(--primary); cursor: pointer; }
.form-check-label { font-size: 13px; color: var(--ink-2); cursor: pointer; }
.input-group { display: flex; align-items: stretch; }
.input-group > .form-control,
.input-group > .form-select { flex: 1; border-radius: 0; }
.input-group > :first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group > :last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group-sm > .form-control { padding: 7px 10px; font-size: 13px; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: filter 0.15s, transform 0.05s;
    line-height: 1.2;
}
.btn:active { transform: scale(0.98); }
.btn:disabled,
.btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn-primary,
.btn-primary-bg { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary,
.btn-outline-secondary { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); }
.btn-outline-secondary:hover { background: var(--surface-2); }
.btn-outline-primary { background: var(--surface); color: var(--primary); border: 1px solid var(--primary); }
.btn-outline-primary:hover { background: var(--primary-soft); }
.btn-outline-danger  { background: var(--surface); color: var(--danger); border: 1px solid var(--danger); }
.btn-outline-light   { background: transparent; color: inherit; border: 1px solid rgba(255,255,255,0.3); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-danger  { background: var(--danger);  color: #fff; border-color: var(--danger); }
.btn-warning { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn-link    { background: transparent; color: var(--primary); border: 0; padding: 6px 8px; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.btn-sm      { padding: 6px 10px; font-size: 12px; gap: 4px; }
.btn-lg      { padding: 14px 22px; font-size: 16px; }

/* Alerts */
.alert {
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
}
.alert-info    { background: var(--info-soft);    color: var(--info-ink);    border-color: var(--info-soft); }
.alert-success { background: var(--success-soft); color: var(--success-ink); border-color: var(--success-soft); }
.alert-warning { background: var(--warning-soft); color: var(--warning-ink); border-color: var(--warning-soft); }
.alert-danger  { background: var(--danger-soft);  color: var(--danger-ink);  border-color: var(--danger-soft); }
.alert-secondary { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.alert-light   { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }

/* Bootstrap-style badges (different from .badge-pill) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--ink-2);
}
.bg-primary { background: var(--primary) !important; color: #fff; }
.bg-success { background: var(--success) !important; color: #fff; }
.bg-warning { background: var(--warning) !important; color: #fff; }
.bg-danger  { background: var(--danger)  !important; color: #fff; }
.bg-info    { background: var(--info)    !important; color: #fff; }
.bg-secondary { background: var(--ink-3) !important; color: #fff; }
.bg-dark    { background: var(--ink)     !important; color: #fff; }
.text-dark  { color: var(--ink); }

/* Container + 12-col grid (simplified to flex; sufficient for the
   form-grid usage left in the Clients Portal). */
.container {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}
.container-fluid { width: 100%; padding: 0 16px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.row > [class*="col-"] { padding: 0 6px; box-sizing: border-box; }
.g-1 { margin: 0 -2px; }
.g-1 > [class*="col-"] { padding: 0 2px; margin-bottom: 4px; }
.g-2 { margin: 0 -4px; }
.g-2 > [class*="col-"] { padding: 0 4px; margin-bottom: 8px; }
.g-3 { margin: 0 -8px; }
.g-3 > [class*="col-"] { padding: 0 8px; margin-bottom: 16px; }
.col       { flex: 1 1 0%; }
.col-12    { flex: 0 0 100%; max-width: 100%; }
.col-6     { flex: 0 0 50%;  max-width: 50%; }
.col-4     { flex: 0 0 33.333%; max-width: 33.333%; }
.col-3     { flex: 0 0 25%;  max-width: 25%; }
.col-auto  { flex: 0 0 auto; }
@media (min-width: 576px) {
    .col-sm-3  { flex: 0 0 25%;     max-width: 25%; }
    .col-sm-4  { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-sm-5  { flex: 0 0 41.667%; max-width: 41.667%; }
    .col-sm-6  { flex: 0 0 50%;     max-width: 50%; }
    .col-sm-7  { flex: 0 0 58.333%; max-width: 58.333%; }
    .col-sm-9  { flex: 0 0 75%;     max-width: 75%; }
    .col-sm-12 { flex: 0 0 100%;    max-width: 100%; }
}
@media (min-width: 768px) {
    .col-md-3  { flex: 0 0 25%;     max-width: 25%; }
    .col-md-4  { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-md-6  { flex: 0 0 50%;     max-width: 50%; }
    .col-md-7  { flex: 0 0 58.333%; max-width: 58.333%; }
    .col-md-8  { flex: 0 0 66.667%; max-width: 66.667%; }
    .col-md-12 { flex: 0 0 100%;    max-width: 100%; }
    .d-md-flex { display: flex; }
    .d-md-block { display: block; }
    .d-md-none { display: none; }
}
@media (min-width: 992px) {
    .col-lg-3  { flex: 0 0 25%;     max-width: 25%; }
    .col-lg-4  { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-lg-6  { flex: 0 0 50%;     max-width: 50%; }
    .col-lg-8  { flex: 0 0 66.667%; max-width: 66.667%; }
    .col-lg-12 { flex: 0 0 100%;    max-width: 100%; }
}
.align-items-center  { align-items: center; }
.align-items-start   { align-items: flex-start; }
.align-items-end     { align-items: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-center  { justify-content: center; }
.justify-content-end     { justify-content: flex-end; }
.flex-grow-1 { flex: 1; min-width: 0; }
.flex-wrap   { flex-wrap: wrap; }

/* List group */
.list-group {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.list-group-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.list-group-item:last-child { border-bottom: 0; }

/* ───── Phase 22h.90g (2026-05-17) — utility classes ─────────
   Universal margin / padding / text-align helpers that mirror the
   most-used Bootstrap utilities so the existing Razor pages can
   shed `mb-3`, `mt-4`, `text-center`, etc. one file at a time
   without losing their inter-element spacing. Eight units = 0,
   4px, 8px, 16px, 24px, 32px (a quarter of Bootstrap's scale —
   archer-tokens uses tighter spacing throughout).                 */
.m-0  { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mb-5 { margin-bottom: 32px; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mt-5 { margin-top: 32px; }
.p-0  { padding: 0 !important; }
.p-1  { padding: 4px; }
.p-2  { padding: 8px; }
.p-3  { padding: 16px; }
.p-4  { padding: 24px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 16px; padding-bottom: 16px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 16px; padding-right: 16px; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.d-inline       { display: inline; }
.d-inline-block { display: inline-block; }
.d-block        { display: block; }
.d-flex         { display: flex; }
.d-none         { display: none; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }

/* ───── Layout helpers ──────────────────────────────────────── */
.row-archer { display: flex; align-items: center; gap: 10px; }
.col-archer { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.flex1   { flex: 1; min-width: 0; }
.muted   { color: var(--ink-3); }
.tiny    { font-size: 11px; }
.small-t { font-size: 12px; }
.med     { font-size: 14px; }
.lg      { font-size: 16px; }
.xl      { font-size: 20px; }
.bold    { font-weight: 600; }
.semibold { font-weight: 500; }
.h1-archer { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.h2-archer { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

/* ───── Hero (Home greeting + agency pill + avatar bell) ─────── */
.archer-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 16px;
}
.archer-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.archer-hero-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--primary-deep);
    letter-spacing: 0.04em;
    font-size: 14px;
}
.archer-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.archer-hero-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    border: 0;
    cursor: pointer;
    text-decoration: none;
}
.archer-hero-bell .dot {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 999px;
    border: 2px solid var(--surface);
}
.archer-hero-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}
.archer-hero-greet-prefix {
    font-size: 14px;
    color: var(--ink-3);
}
.archer-hero-greet-name {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.archer-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--line);
}

/* ───── Status card ──────────────────────────────────────────── */
.archer-status-card {
    margin: 12px 16px 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    display: block;
    text-decoration: none;
    color: inherit;
}
.archer-status-overline {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.archer-status-current {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 2px;
}
.archer-status-meta {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}

/* Phase 22h.103d-1 (2026-05-18) — Canonical 11-stage workflow row
   underneath the legacy 9-stage status bar. Lower visual weight
   (lighter colour, dotted top border) so it reads as "additional
   info" not "action item". */
.archer-status-workflow {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dotted var(--ink-4, #d1d5db);
    font-size: 11px;
    color: var(--ink-3, #6b7280);
    line-height: 1.5;
}
.archer-status-workflow strong {
    color: var(--ink, #111827);
    font-weight: 600;
}

/* Phase 22h.103d-3 (2026-05-19) — Extra line under the promoted
   11-stage status card: "in this stage since {date}" + "X of Y
   tasks complete". Same lower visual weight pattern. */
.archer-status-extra {
    margin-top: 8px;
    font-size: 11px;
    color: var(--ink-3, #6b7280);
    line-height: 1.6;
}

/* ───── Tile grid ────────────────────────────────────────────── */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 16px;
    margin-top: 12px;
}
@media (min-width: 768px) {
    .tile-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (min-width: 1100px) {
    .tile-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ───── Section heading ──────────────────────────────────────── */
.archer-section {
    padding: 18px 16px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ───── Chat bubbles (Messages screen) ───────────────────────── */
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}
.chat-row { display: flex; }
.chat-row.in  { justify-content: flex-start; }
.chat-row.out { justify-content: flex-end; }
/* Phase 22h.WB2 Pass V (2026-05-22) — Whiteboard v2 feedback fix #2:
   the 82% width cap must live on the COLUMN, not the bubble. When
   max-width: 82% sat on .chat-bubble it was computed against the
   bubble's containing block — the column — whose width was itself
   determined by the bubble (max-content). The self-referential
   resolution shrank the bubble to ~82% of its own content on every
   reflow, eventually wrapping short text like "OK thanks" onto two
   lines. Moving the cap to the column breaks the circularity: the
   column caps at 82% of the row (a stable ancestor) and the bubble
   takes its natural content width inside it. */
.chat-row > .col-archer { max-width: 82%; min-width: 0; }
.chat-row.in  > .col-archer { align-items: flex-start; }
.chat-row.out > .col-archer { align-items: flex-end;   }
.chat-bubble {
    /* Phase 22h.WB2 Pass V (2026-05-22) — width cap lives on
       .chat-row > .col-archer (see above) so the bubble itself can
       just take its content width without the circular max-width
       constraint that was wrapping "OK thanks" onto two lines. */
    width: fit-content;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: normal;
}
/* Phase 22h.WB2 (2026-05-22) — Whiteboard v2 §C colour scheme.
   .in  = inbound from the agency team — light teal.
   .out = own message from the client     — sky blue.
   Symmetry with the Team Portal (where the colours flip: client=sky
   blue inbound, team=light teal outbound — same bubble colours, just
   inbound/outbound role swap). */
.chat-bubble.in {
    background: var(--msg-team, #d8f3ee);   /* light teal — team→client */
    color: #1f4f47;
    border: 1px solid #a9e2d2;
    border-bottom-left-radius: 6px;
}
.chat-bubble.out {
    background: var(--msg-client, #e0f2fe); /* sky blue (Tailwind sky-100) — client */
    color: #0c4a6e;
    border: 1px solid #bae6fd;
    border-bottom-right-radius: 6px;
}
.chat-bubble a { color: inherit; text-decoration: underline; }
/* Phase 22h.WB2-LOGO follow-up r5 (2026-05-22) — Whiteboard v2 §C:
   Notes (ClientCommKind.Note) render with a uniform light-grey
   bubble, regardless of inbound/outbound direction. */
.chat-bubble.note {
    background: var(--msg-note, #f3f4f6);   /* light grey — note */
    color: #1f2937;
    border: 1px solid #d1d5db;
    border-bottom-left-radius: 6px;
}
/* Phase 6 (spec 71) — Automated / system messages: app-default neutral, the
   lightest fill of the set so they recede. Pair with an "Automated" label. */
.chat-bubble.automated {
    background: var(--msg-automated, #f8fafc);
    color: var(--ink-2);
    border: 1px solid var(--line);
}
/* Phase 22h.WB2-LOGO follow-up r5 (2026-05-22) — Whiteboard v2 §C:
   sender name + small timestamp ABOVE the bubble, not below. Pass V
   had .chat-meta render after the bubble; the spec wants the
   reading order to be "name → message" so the eye lands on the
   sender first. We keep .chat-meta around for any legacy caller
   that still renders it below, but new code should use .chat-header. */
.chat-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 0 4px;
    margin-bottom: 2px;
    font-size: 11px;
}
.chat-row.out > .col-archer > .chat-header { justify-content: flex-end; }
.chat-row.in  > .col-archer > .chat-header { justify-content: flex-start; }
.chat-author { color: var(--ink-2); font-weight: 600; }
.chat-time   { color: var(--ink-3); font-size: 10px; }
.chat-meta {
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 4px;
}
.chat-row.out .chat-meta { text-align: right; }

/* ───── Compose bar ──────────────────────────────────────────── */
.compose-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    position: sticky;
    bottom: 0;
}
.compose-bar .field-input { flex: 1; margin: 0; }
.compose-bar button {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 0;
    background: var(--primary);
    color: var(--primary-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
}
.compose-bar button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ============================================================
   Phase 22h.Ph6 (Downloads\MIGUID~1.MD, spec 68–72) — chat
   contract additions for the Clients Portal Communications page.
   ------------------------------------------------------------
   Layout: the page is a flex column so the conversation scrolls
   in its own region above a composer pinned at the bottom. Adds
   the per-type metadata chrome (role badge, edited link, automated
   tag), the first-unread divider, the floating jump-to-latest pill,
   and the read-only version-history pop-out.
   ============================================================ */

/* InnerPageShell body host for the chat page: a zero-padding flex
   column so the chat-shell below can flex-fill the available height
   (the InnerPageShell body is otherwise a padded block). */
.archer-inner-body.archer-chat-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}

/* Shell: flex-fills the body — feed scrolls, composer pins. The flex
   chain (page-content → inner-shell → inner-body → chat-shell) all
   carry min-height:0 so the inner .archer-chat-scroll becomes a real
   bounded scroll region instead of pushing the whole column taller.
   A dvh cap is a belt-and-braces fallback for any browser where the
   percentage-height chain doesn't resolve (keeps the composer in view). */
.archer-chat-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100dvh - 56px);
}
.archer-chat-feed {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}
.archer-chat-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}
.archer-chat-scroll::-webkit-scrollbar { width: 5px; }
.archer-chat-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }

/* Floating jump-to-latest pill — bottom-right of the feed region. */
.archer-chat-jump {
    position: absolute;
    right: 16px;
    bottom: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary-deep);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow);
}
.archer-chat-jump:hover { background: var(--primary-soft); }

/* First-unread divider — a centred caption with a hairline rule
   either side. Warm accent so it reads as "new since you last looked". */
.chat-unread-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 4px;
    color: #b45309;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.chat-unread-divider::before,
.chat-unread-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #f59e0b;
    opacity: 0.65;
}

/* Role badge in the metadata line (Agent / Manager / Admin / You). */
.chat-role {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--msg-team, #d8f3ee);
    color: #0f766e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.6;
}
.chat-role.mine {
    background: var(--primary-soft);
    color: var(--primary-soft-ink);
}

/* "(edited)" link — opens the read-only history pop-out. */
.chat-edited {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--primary-deep);
    font-size: 10px;
    font-style: italic;
    text-decoration: underline;
    font-family: inherit;
}
.chat-edited:hover { color: var(--primary); }

/* Automated/system in-bubble label (spec 71). */
.chat-automated-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}

/* ───── Read-only message version-history pop-out (modal) ─────── */
.archer-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.archer-modal-card {
    background: var(--surface);
    border-radius: 14px;
    width: 100%;
    max-width: 480px;
    max-height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}
.archer-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}
.archer-modal-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 2px 8px;
    font-size: 18px;
    line-height: 1;
    color: var(--ink-2);
}
.archer-modal-body {
    padding: 16px;
    overflow-y: auto;
}
.rev-list { display: flex; flex-direction: column; gap: 10px; }
.rev-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.rev-card.current {
    background: var(--primary-soft);
    border-color: var(--primary-soft);
}
.rev-head {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.rev-body {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ============================================================
   Phase 22h.90a (2026-05-17) — Documents grid (design §5b).
   ------------------------------------------------------------
   Per-row tile with 34×34 status-soft icon square, name + sub,
   and a right-side action. For Missing rows the action is a
   solid status-color filled button (min-width 92px). For other
   statuses it's a small badge. Filter chips toggle the bucket;
   the footer carries Upload-other (ghost) + Submit-N (primary)
   with a grey/inert disabled state when nothing's uploaded.
   ============================================================ */

/* Doc filter chips — All / Missing / Uploaded / Provided / Accepted */
.doc-filter-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 16px 6px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}
.doc-filter-row::-webkit-scrollbar { display: none; }
.doc-filter-chip {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    white-space: nowrap;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.doc-filter-chip:hover { border-color: var(--line-2); }
.doc-filter-chip.active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.doc-filter-chip-count { opacity: 0.6; font-weight: 500; }

/* Per-applicant header row inside the grid screen */
.doc-applicant-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.doc-applicant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    color: #7c2d12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 32px;
}
.doc-applicant-avatar.dependent {
    background: linear-gradient(135deg, #dbeafe, #93c5fd);
    color: #1e3a8a;
}
.doc-applicant-meta { flex: 1; min-width: 0; }
.doc-applicant-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.doc-applicant-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}
.doc-applicant-progress > .progress-bar-archer { flex: 1; }
.doc-missing-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--danger);
}
.doc-missing-tag.zero { color: var(--ink-3); }

/* The grid itself — vertical list of doc rows */
.doc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--bg);
}
.doc-row {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.doc-row:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.doc-row-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
/* Per-status icon-tile soft backgrounds */
.doc-row-icon.missing  { background: var(--danger-soft);  color: var(--danger); }
.doc-row-icon.uploaded { background: var(--surface-2);    color: var(--ink-4); }
.doc-row-icon.provided { background: var(--warning-soft); color: var(--warning); }
.doc-row-icon.accepted { background: var(--success-soft); color: var(--success); }

.doc-row-body { flex: 1; min-width: 0; }
.doc-row-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.doc-row-note { font-size: 11px; color: var(--ink-3); margin-top: 1px; }

/* Right-side action button (Upload / Sign / Fill) — solid status color */
.doc-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    border: 0;
    color: #fff;
    font-weight: 600;
    min-width: 92px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}
.doc-action-btn.missing  { background: var(--danger); }
.doc-action-btn.missing:hover { filter: brightness(1.08); }
.doc-action-btn label.doc-action-btn-label { /* file picker reuses .doc-action-btn via <label> */
    cursor: pointer;
}

/* Right-side status badge (when not Missing) — minimum width 60 for alignment */
.doc-row-badge {
    min-width: 60px;
    text-align: center;
    display: inline-block;
}

/* Phase 7 — consistent per-document quick-action row (view / download /
   message / eForm). Same set + same order on every document surface.
   Reuses the .tb-action token primitive for each button. */
.doc-qa {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}
.doc-qa-btn {
    width: 30px;
    height: 30px;
    justify-content: center;
    flex: 0 0 30px;
}
/* Inapplicable action — visible but muted + inert so the set stays
   positionally identical across rows. */
.doc-qa-btn.is-off {
    color: var(--ink-4);
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
.doc-qa-btn.is-off:hover { background: transparent; }

/* On narrow (mobile-first) widths the action clusters wrap under the
   name/body so the quick-action set + primary CTA never overflow. */
@media (max-width: 480px) {
    .doc-row { flex-wrap: wrap; }
    .doc-row-body { flex: 1 1 100%; }
    .doc-qa { margin-left: 46px; }
}

/* Footer bar — Upload other + Submit (N) */
.doc-footer-bar {
    padding: 12px 16px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}
.doc-footer-row {
    display: flex;
    gap: 8px;
}
.doc-footer-row > .btn-archer.btn-ghost   { flex: 1; }
.doc-footer-row > .btn-archer.btn-primary { flex: 1.4; }
.doc-footer-hint {
    text-align: center;
    margin-top: 8px;
    line-height: 1.4;
    font-size: 11px;
    color: var(--ink-3);
}
/* Disabled Submit (no uploaded docs) — grey + inert */
.btn-archer.btn-primary.is-inert {
    background: var(--surface-2);
    color: var(--ink-3);
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Empty-state copy inside the grid */
.doc-empty {
    text-align: center;
    color: var(--ink-3);
    padding: 36px 24px;
    font-size: 13px;
    font-style: italic;
}

/* Banner shown when viewing the Uploaded filter with uploads pending submit */
.doc-uploaded-banner {
    margin: 14px 16px 0;
    padding: 12px;
    background: var(--info-soft);
    border-radius: 10px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12px;
    color: var(--info-ink);
    line-height: 1.5;
}

/* ============================================================
   Phase 22h.91 (2026-05-17) — Questionnaire primitives.
   ------------------------------------------------------------
   Three-view structure per design §4:
     • Applicants list (Individual)   — q-applicant-row + q-applicant-avatar
     • Sections list (Ind + Business) — q-section-list + q-section-row +
                                        q-section-icon
     • Form view                       — existing per-section components

   Plus shared chrome:
     • q-biz-header  — business card header for Business sections view
     • q-segment-bar — multi-segment progress bar (4 or 11 segments)
     • q-info-banner — info panel shown beneath applicants list
     • q-footer      — sticky bottom toolbar (Resume + Submit)
     • q-submit      — Submit button state: inert / ready / submitted
   ============================================================ */

/* Applicant row (level 1 — Individual) */
.q-applicant-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
}
.q-applicant-row:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.q-applicant-row:active { transform: scale(0.99); }
.q-applicant-row.dashed {
    border-style: dashed;
    background: transparent;
    color: var(--ink-3);
}
.q-applicant-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex: 0 0 44px;
    color: #fff;
    background: var(--surface-2);
}
.q-applicant-avatar.primary {
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    color: #7c2d12;
}
.q-applicant-avatar.dependent {
    background: linear-gradient(135deg, #dbeafe, #93c5fd);
    color: #1e3a8a;
}
.q-applicant-avatar.add {
    background: var(--surface);
    border: 1px dashed var(--line-2);
    color: var(--ink-3);
}
.q-applicant-body { flex: 1; min-width: 0; }
.q-applicant-name {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.q-applicant-progress { display: flex; align-items: center; gap: 8px; }
.q-applicant-progress > .progress-bar-archer { flex: 1; }

/* Business card header at top of Business sections view */
.q-biz-header {
    padding: 14px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
}
.q-biz-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
}
.q-biz-body { flex: 1; min-width: 0; }
.q-biz-name { font-weight: 600; font-size: 14px; }
.q-biz-sub  { font-size: 11px; color: var(--ink-3); }

/* Applicant header (per design §4c — top of per-applicant sections view) */
.q-applicant-header {
    padding: 14px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
}
.q-applicant-header .q-applicant-avatar { flex: 0 0 44px; }
.q-applicant-header-body { flex: 1; min-width: 0; }
.q-applicant-header-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.q-applicant-header-sub  { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.q-applicant-header-bar  { flex: 0 0 90px; }

/* Multi-segment progress bar (4 segments for Business, 11 for Individual) */
.q-segment-bar {
    display: flex;
    gap: 3px;
    margin-top: 6px;
}
.q-segment-bar > i {
    display: block;
    flex: 1;
    height: 4px;
    border-radius: 99px;
    background: var(--surface-2);
}
.q-segment-bar > i.done    { background: var(--success); }
.q-segment-bar > i.current { background: var(--primary); }

/* Sections list (level 2) — single .card-archer with rows inside */
.q-section-list {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 4px;
    overflow: hidden;
}
.q-section-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    transition: background 0.12s;
}
.q-section-row:last-child { border-bottom: 0; }
.q-section-row:hover { background: var(--surface-2); }
.q-section-row.current {
    background: var(--primary-soft);
}
.q-section-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
}
.q-section-icon.done    { background: var(--success); color: #fff; }
.q-section-icon.current { background: var(--primary); color: #fff; }
.q-section-body { flex: 1; min-width: 0; }
.q-section-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.q-section-status { font-size: 11px; color: var(--ink-3); margin-top: 1px; }

/* Info banner under applicants list — design §4a */
.q-info-banner {
    margin-top: 18px;
    padding: 14px;
    background: var(--info-soft);
    color: var(--info-ink);
    border-radius: 10px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.5;
}

/* Sticky bottom toolbar — Resume + Submit */
.q-footer {
    padding: 12px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}
.q-footer-hint {
    text-align: center;
    margin-top: 8px;
    line-height: 1.4;
    font-size: 11px;
    color: var(--ink-3);
}
.q-resume {
    width: 100%;
    margin-bottom: 8px;
}

/* Submit-button states — design §4 */
.q-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    border-radius: var(--radius);
    border: 0;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    background: var(--surface-2);
    color: var(--ink-3);
    transition: background 0.15s, color 0.15s, filter 0.15s;
}
.q-submit.ready {
    background: var(--primary);
    color: var(--primary-ink);
    cursor: pointer;
}
.q-submit.ready:hover { filter: brightness(1.08); }
.q-submit.submitted {
    background: var(--success);
    color: #fff;
    cursor: not-allowed;
    pointer-events: none;
}
.q-submit:disabled,
.q-submit.is-inert {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ───── Vault lock banner ────────────────────────────────────── */
.vault-banner {
    margin: 12px 16px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary-soft-ink);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.vault-banner .icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(49, 153, 220, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}